Collections

Version 4 introduces "Collections", a way of efficiently and simply handling lists of many components.

makeCollection allows you to pass some configuration parameters, and returns a normal sources=>sinks Cycle.js component:

const List = makeCollection({
  item: Child,
  itemKey: (childState, index) => String(index),
  itemScope: key => key,
  collectSinks: instances => {
    return {
      onion: instances.pickMerge('onion'),
      DOM: instances.pickCombine('DOM')
        .map(itemVNodes => ul(itemVNodes))
    }
  }
});

• item required parameter: specify the item component for the list of items
• itemKey optional parameter: given state and (array) index, specify the unique identifier (key) for each item. Defaults to array index.
• itemScope optional parameter: given the item key, determine the isolation scope for that item. Defaults to null.
• collectSinks required parameter: a function specifying how to collect together all the sinks from all item components. Takes instances as input, where instances has two functions pickMerge and pickCombine, which work like pick+mix(merge) and pick+mix(combine), respectively.

Once List component is created, you can use it:

const listSinks = isolate(List, 'list')(sources);

This means sources.onion.state$ should be a stream that emits state objects with the shape {..., list: [...]}, in other words, there should be a list property that is an array. The use of isolate is optional, as long as List receives a stream of arrays under the onion channel. This is how the List knows how to create item components as the array dynamically grows or shrinks.

Note that in this version, pick and mix were removed. Instead, we have pickMerge and pickCombine.