How to use @cycle/isolate - 10 common examples

function main (sources) {
      const child = isolate(Child)(sources)
      // make child.DOM be inserted, removed, and inserted again
      const innerDOM$ = Observable.interval(50).take(3)
        .map(x => x === 1 ? Observable.of(div()) : child.DOM).switch()
      return {
        DOM: innerDOM$
      }
    }

const instances$ = state$.fold((acc: InternalInstances, nextState: Array | any) => {
      const dict = acc.dict;
      if (Array.isArray(nextState)) {
        const nextInstArray = Array(nextState.length) as Array;
        const nextKeys = new Set();
        // add
        for (let i = 0, n = nextState.length; i < n; ++i) {
          const key = `${itemKey ? itemKey(nextState[i], i) : i}`;
          nextKeys.add(key);
          if (!dict.has(key)) {
            const onionScope = itemKey ? instanceLens(itemKey, key) : `${i}`;
            const otherScopes = itemScope(key);
            const scopes = typeof otherScopes === 'string' ?
              {'*': otherScopes, [name]: onionScope}  :
              {...otherScopes, [name]: onionScope};
            const sinks = isolate(itemComp, scopes)(sources);
            dict.set(key, sinks);
            nextInstArray[i] = sinks;
          } else {
            nextInstArray[i] = dict.get(key) as any;
          }
          nextInstArray[i]._key = key;
        }
        // remove
        dict.forEach((_, key) => {
          if (!nextKeys.has(key)) {
            dict.delete(key);
          }
        });
        nextKeys.clear();
        return {dict: dict, arr: nextInstArray};
      } else {

const navbar = Navbar({
        DOM,
        HTTP,
        storage,
        fractal,
        glue,
        props: { authToken$ },
    });
    const feed = isolate(Feed, { fractal: feedLens() })({
        DOM,
        HTTP,
        fractal,
        glue,
        props: { authToken$, router$ },
    });
    const post = isolate(Post, { fractal: postLens() })({
        DOM,
        HTTP,
        fractal,
        glue,
        props: { authToken$, router$ },
    });
    const publisher = isolate(Publisher, { fractal: publisherLens() })({
        DOM,
        HTTP,
        storage,
        fractal,
        glue,
        props: { authToken$, router$ },
    });

    // Compute merged vdom trees.

const defsWithComps = defs.map(def => {
    const comp = isolate(def.componentFn)({
      ...sources,
      router: sources.router.path(def.urlPath) // scoped router
    });
    return { ...def, comp };
  });

function main (sources) {
      const first = isolate(Child, 'first')(sources)
      first.DOM = first.DOM.share()
      const second = isolate(Child, 'second')(sources)
      second.DOM = second.DOM.share()
      const oneChild = [first]
      const twoChildren = [first, second]
      const vnode$ = Observable.interval(50).skip(1).take(1).startWith(-1)
        .map(i => i === -1 ? oneChild : twoChildren)
        .map(children =>
          Observable.combineLatest(
            ...children.map(child => child.DOM),
            (...childVNodes) => div('.parent', childVNodes)
          )
        ).switch()
      return {
        DOM: vnode$
      }

function main (sources) {
      const first = isolate(Child, 'first')(sources)
      first.DOM = first.DOM.share()
      const second = isolate(Child, 'second')(sources)
      second.DOM = second.DOM.share()
      const oneChild = [first]
      const twoChildren = [first, second]
      const vnode$ = Observable.interval(50).skip(1).take(1).startWith(-1)
        .map(i => i === -1 ? oneChild : twoChildren)
        .map(children =>
          Observable.combineLatest(
            ...children.map(child => child.DOM),
            (...childVNodes) => div('.parent', childVNodes)
          )
        ).switch()
      return {
        DOM: vnode$
      }
    }

export function EndMarker(sources) {
  return isolate(OriginalEndMarker)(sources);
}

export default ({
    DOM, globalEvents, visible$,
    pla$ = O.empty(), json$ = O.empty(),
}) => {
  const {isolateSource, isolateSink} = DOM;

  const actions = intent({DOM: isolateSource(DOM, 'modalBody')});
  const state$ = model(pla$, json$);
  const modal = isolate(ModalBox, 'modal')({
    DOM,
    globalEvents,
    props$: O.merge([
      actions.finish$.map(() => false),
      visible$,
    ]).map((v) => ({visible: v})),
    content$: isolateSink(view(state$), 'modalBody'),
  });

  return {
    DOM: modal.DOM.map(wrapInDiv),
    selectAll: actions.selectAll$,
  };
};

export default function main(sources: Sources): Sinks {
  const isolatedCentral = isolate(central, {
    onion: centralLens,
    "*": "central",
  }) as typeof main;

  const isolatedDetails = isolate(details, {
    onion: detailsLens,
    "*": "details",
  }) as typeof main;

  const isolatedAddition = isolate(addition, "addition") as typeof main;

  const centralSinks = isolatedCentral(sources);
  const additionSinks = isolatedAddition(sources);
  const detailsSinks = isolatedDetails(sources);

  const vdom$ = xs.merge(

export default sources => isolate(ComponentRouter)(sources)