In Cycle.js Collections, how does the second sources stream relate to the first?

Question

In the following example (from the Collections README), it sounds as though the third argument is acting as a filter:

function TodoList (sources) {
  const addTodo$ = sources.DOM
    .select('.add-todo')
    .events('click')
    .mapTo(null); // to prevent adding click events as sources

  const todoListItems$ = Collection(TodoListItem, sources, addTodo$);

  const todoListItemVtrees$ = Collection.pluck(todoListItems$, item => item.DOM);

  const sinks = {
    DOM: todoListItemVtrees$.map(vtrees =>
      div('.todo-list', [
        button('.add-todo', 'Add todo'),

        div('.items', vtrees)
      ])
    )
  }

  return sinks;
}

However, it looks to me as if we are taking all the clicks and mapping them to null, leaving nothing else in the addTodo$ stream (i.e., nothing useful). Furthermore, all the events should still be in the sources stream, so I don't see how this would be useful, or at least I don't understand how it works as a filter as claimed.

bbarker · Answer 1 · 2017-01-29T14:37:16.513

After staring at some other examples, I finally got a typescript example working so that I understand better what is happening, though I still don't quite understand how mapTo null events are populating a list.

Say you have a list of "Item" components that will be part of a "List" component, where "Item" has the following sources:

export interface Sources {
  dom: DOMSource;
}

export interface ItemSources {
  item$: Stream<Data>;
}

export interface ItemSourcesAll extends ItemSources, Sources {}

ItemSourcesAll is used internally by the "Item" component. In our "List" component, however, we just need to be concerned with ItemSources as Collection takes care of merging ItemSources with Sources. So in our "List" component, we might have some code that looks like this:

const itemSources$: Stream<ItemSources[]>= res$.map(res =>
    <Data[]> JSON.parse(res.text)
  ).map(items => items.map(item => <ItemSources> {item$: xs.of(item)}));

You can now see that the type passed as the second sources argument is in fact a stream of sources. The call to Collection looks like:

  const listItems$ = Collection(Item, sources, itemSources$);

score 0 · Answer 2 · answered Jan 30 '17 at 13:37

addTodo$ is basically a stream of events representing item additions. You may optionally merge some item-specific sources by providing them as a stream value, but usually you don't need that, because your items get the common sources from the second argument of Collection anyway. So null means that you have nothing to merge.

In Cycle.js Collections, how does the second sources stream relate to the first?

2 Answers2