Handling multiple component types in a single list

Most of the time, all items in a list will be of a uniform component type, but sometimes we'll want the option to create children of differing types, depending on context. Having support for multiple component types in a single list can also be useful for cases where we're managing a collection of known entities, but, for whatever reason, we'd like the collection to manage the lifecycle of those components rather than requiring us to do so ourselves.

To define additional component types beyond the first, we can either define the set of available component types when the collection is created, or we can define them on an adhoc basis.

To define multiple component types when the collection is instantiated, we pass an options object to the collection. The first item in the types list is used by default if no type is specified when adding or setting a new list item.

function ImageItem(sources) { /* ... */ }
function VideoItem(sources) { /* ... */ }
function MessageItem(sources) { /* ... */ }

const emptyList = Collection({
  types: [MessageItem, ImageItem, VideoItem]
});

// Use the name of the function to specify which component type to use:
const videos$ = video$.scan((list, sources) =>
  list.add(VideoItem.name, sources), emptyList);

// Or use the `set` method if you want to specify a key for the item:
const images$ = image$.scan((list, image) =>
  list.set(image.id, ImageItem.name, image.sources));

To define another component type after the list has been instantiated, use the define method:

function WidgetItem(sources) { /* ... */ }
const updatedList = list.define(WidgetItem);