How to use xstream - 10 common examples

export function getConditionalCmp (cond, getCmp) {
  const cond$ = isStream(cond)
    ? cond
    // xs.of() is insufficient, because it must be a memory stream
    : xs.create().startWith(cond)

  if (!(cond$ instanceof MemoryStream)) {
    console.warn('Conditional stream should be a MemoryStream')
  }

  return getDynamicCmp (
    cond$.fold(
      (acc, next) => ({ cond: next, key: String(Boolean(next)) }),
      { cond: false, key: 'false' }
    ),
    next => getCmp(next.cond)
  )
}

sources[localChannel].stream.startWith(undefined)
      )
      .map(([g, l]) => merger.merge(g, l))
      .remember()

    const sinks = cmp({
      ...omit([localChannel])(sources),
      [stateChannel]: new StateSource(
        state$.drop(2),
        'withLocalState'
      )
    })

    // Convert the emitted reducers back to state values and run
    // it through extract
    const updated$ = !sinks[stateChannel] ? xs.never() :
      sinks[stateChannel]
        .compose(sampleCombine(state$))
        .map(([reducer, state]) => merger.extract(reducer(state)))

    // Convert the extracted state values back to reducers for the separate
    // channels
    const global$ = updated$.map(extractedState => prevState => {
      return { ...prevState, ...extractedState.global }
    })

    const local$ = updated$.map(extractedState => prevState => {
      return { ...prevState, ...extractedState.local }
    })

    return {
      ...sinks,

function Collection (component, sources = {}, sourceAdd$ = xs.empty(), removeSelector = noop) {
    const removeProxy$ = xs.create();
    const add$ = xs.fromObservable(sourceAdd$);
    const addReducer$ = add$.map(sourcesList => collection => {
      if (Array.isArray(sourcesList)) {
        // multiple items
        return sourcesList.reduce((collection, sources) => collection.add(sources), collection);
      } else {
        // single item
        return collection.add(sourcesList);
      }
    });
    const removeReducer$ = removeProxy$.map(item => collection => collection.remove(item));
    const reducer$ = xs.merge(removeReducer$, addReducer$);

    const emptyCollection = collection({ component, sources, removeSelector });
    const collection$ = reducer$
      .fold((collection, reducer) => reducer(collection), emptyCollection)
      .map(collection => collection.asArray());

    const remove$ = Collection.merge(collection$, item => item._remove$, true);
    removeProxy$.imitate(remove$);

    return adapt(collection$);
  }

if (prevNode) {
          node.insertBefore(n, prevNode.nextSibling)
          return
        }

        node.insertBefore(n, node.firstChild)
      }

      createNode(insert, child).nodeP.then(node => {
        childrenNodes[index] = node
      })
    })
    return node
  }

  const visible$ = props.if$ || xs.of(true)
  const createElementWithHooks = createElementSubscriber(insert, visible$)

  return createElementWithHooks({
    async mount(shouldBeVisible, insert) {
      if (shouldBeVisible) {
        return await add(insert)
      }
      return
    },
    async update(shouldBeVisible, node, insert) {
      if (shouldBeVisible) {
        return await add(insert)
      } else {
        // node always exist because dropRepeats() guarantees previous state is false
        // so we can use ! to remove undefined variant from type
        await removeNode(node!)

voting: false,
            toasts: state.own.toasts.concat([
                { type: 'error', content: traduceErr(err) },
            ]),
        })
    );

    const voteFailDismissR$ = voteErr$.compose(delay(5000)).map(() => state =>
        update(state, {
            toasts:
                state.own.toasts.length > 0 ? state.own.toasts.slice(1) : [],
        })
    );

    const reducers$ = xs.merge(
        xs.of(state => merge(LENSED_STATE, state)),
        postR$,
        postLoadingR$,
        commentFocusR$,
        votingR$,
        voteFailR$,
        voteFailDismissR$,
        replyToR$,

        // Incoming vote effects.
        actions.vote$
            .filter(res => 'action' in res)
            .compose(sampleCombine(actions.voting$))
            .compose(delay(500))
            .map(([status, vote]) => state => {
                const value = status.action == 'create' ? 1 : -1;

options: outputSecretScreenNavOptions,
            },
          },
        } as Command,
      ),
    )
    .flatten();

  const scrollBy$ = xs
    .merge(
      sources.screen.select('confirm-start').events('press'),
      sources.screen.select('confirm-data').events('press'),
    )
    .mapTo([/* offset */ +1, /* animated */ true] as [number, boolean]);

  const vdom$ = xs
    .combine(topBarSinks.screen, sources.state.stream)
    .map(([topBarVDOM, state]) =>
      h(View, {style: styles.screen}, [
        topBarVDOM,

        tutorialPresentation('swiper', {scrollBy$}, [
          tutorialSlide({
            show: state.index >= 0,
            portraitMode: state.isPortraitMode,
            image: require('../../../../images/noun-glassware.png'),
            title: 'Your account has\ntwo parts to keep safe',
            renderDescription: () => [],
            renderBottom: () =>
              h(Button, {
                sel: 'confirm-start',
                style: styles.button,

),
    });
    const lastSentReply$ = actions.sentReply$
        .filter(res => 'id' in res)
        .map(res => res.id)
        .startWith(false);

    /**
     * Http write effects, including:
     * - votes requests
     * - comments requests
     */
    const http$ = xs.merge(
        // New votes
        actions.voting$
            .compose(sampleCombine(actions.authToken$))
            .map(([{ type, intent, id }, withAuth]) => ({
                method: 'POST',
                type: 'application/json',
                url: `${Anzu.layer}vote/${type}/${id}`,
                category: 'vote',
                send: { direction: intent },
                headers: withAuth({}),
            })),

        // Replies sent
        actions.reply$
            .compose(sampleCombine(actions.replyContent$, actions.authToken$))
            .map(([{ type, id }, content, withAuth]) => ({
                method: 'POST',
                type: 'application/json',
                url: `${Anzu.layer}comments/${id}?type=${type}`,

export function Timer(sources: Sources) {
  // Initialze if used alone - use parent provided state is present
  const defaultReducer$ = xs.of(prev => prev || { running: false });

  const i$ = sources.time.periodic(100)
    .map(x => x + 1)
    .startWith(0)
    .remember();

  const start$ = sources.DOM.select('.start').events('click')
    .compose(sampleCombine(i$))
    .map(eventI => state => ({ ...state, running: true, x: eventI[1] - state.x }));

  const stop$ = sources.DOM.select('.stop').events('click')
    .compose(sampleCombine(i$))
    .map(eventI => state => ({ ...state, running: false, x: eventI[1] - state.x }));

  const reset$ = sources.DOM.select('.reset').events('click')
    .mapTo(state => ({ ...state, running: false, x: 0 }));

  return {
    DOM: view(sources.onion.state$, i$),
    onion: xs.merge(defaultReducer$, start$, stop$, reset$)
  };
}

function Collection (component, sources = {}, sourceAdd$ = xs.empty(), removeSelector = noop) {
    const removeProxy$ = xs.create();
    const add$ = xs.fromObservable(sourceAdd$);
    const addReducer$ = add$.map(sourcesList => collection => {
      if (Array.isArray(sourcesList)) {
        // multiple items
        return sourcesList.reduce((collection, sources) => collection.add(sources), collection);
      } else {
        // single item
        return collection.add(sourcesList);
      }
    });
    const removeReducer$ = removeProxy$.map(item => collection => collection.remove(item));
    const reducer$ = xs.merge(removeReducer$, addReducer$);

    const emptyCollection = collection({ component, sources, removeSelector });
    const collection$ = reducer$
      .fold((collection, reducer) => reducer(collection), emptyCollection)
      .map(collection => collection.asArray());

function sink$ (item) {
      const key = item._id;

      if (sinks[key] === undefined) {
        const selectedSink = xs.fromObservable(mergeSelector(item));
        const sink = selectedSink.map(x =>
          isVtree(x) && x.key == null ? {...x, key} : x
        );
        // prevent sink from early completion and reinitialization
        sinks[key] = xs.merge(sink, xs.never());
      }

      return sinks[key];
    }