Combining multiple sinks from child components

Obviously child components will usually return more than just a DOM stream. HTTP requests and WebSocket messages, to name just a couple, are potential sinks that need to be returned to their respective drivers in order for the child component to function correctly. Use of the static Collection.merge method does all the hard work for us.

function App(sources) {
  // Create our child component collection stream
  const components$ = makeChildComponents(sources);

  // Render the app view any time a child component's view changes
  const view$ = Collection.combineObject('DOM', components$)
    .map(render);

  // Merge pass-through sinks from child components into a new sinks object
  const childSinks = Collection.merge(['HTTP', 'socket'], components$);

  // Create a sinks object that is relevant to the local `App` component
  const appSinks = {
    DOM: view$,
    HTTP: emitSomeMoreHTTPRequests(sources) // Illustrative only
  };

  // Finally, merge both sinks object into a new, unified sinks object
  const sinks = Collection.merge(appSinks, childSinks);

  // The final `sinks` object contains: {DOM, HTTP, socket}
  return sinks;
}