How to use the xstream.of function in xstream

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;

it("should re show Auth0 login form", (done) => {
                    const sources = getSources({
                        auth0: { select: () => xs.empty(), tokens$: xs.of(tokens, null) }
                    });

                    const { auth0 } = AuthenticationWrapper(sources);

                    auth0
                        .addListener(getListener({
                            next: action => {
                                expect(action.action).to.be("show")
                                done();
                            }
                        }));
                });
        });

sources.react
        .props()
        .drop(1)
        .take(1)
        .addListener({
          next: props => {
            assert.strictEqual(first, true);
            assert.strictEqual(props.name, 'alice');
            assert.strictEqual(props.age, 31);
            done();
          },
        });

      return {
        react: xs.of(
          h('section', [h('div', {}, [h('h1', {}, 'Hello world')])]),
        ),
      };
    }

function getSources(overrides) {
    const defaultSources = {
        auth0: { select: () => {}, tokens$: xs.of(null) },
        props: {
            authWrapperParams: {
                Child: () => ({})
            }
        }
    };
    return {
        ...defaultSources,
        ...overrides
    };
}

export const FeedAtom: Component = function(sources: FeedSources): FeedSinks {
    const vdom$ = view(sources.onion.state$);

    const sinks = {
        DOM: vdom$,
        onion: xs.of((state) => state)
    };

    return sinks;
};

function model(actions: Actions) {
  const initReducer$ = xs.of(function initReducer(prevState: State): State {
    if (prevState) {
      return prevState;
    } else {
      return {color: '#888', width: 200};
    }
  });

  const removeReducer$ = actions.remove$
    .mapTo(function removeReducer(prevState: State): State {
      return undefined;
    });

  const changeWidthReducer$ = actions.changeWidth$
    .map((width: number) => function changeWidthReducer(prevState: State): State {
      return {...prevState, width};
    });

.map(stagedPeers => {
      const dhtInvites = stagedPeers
        .filter(([_address, data]) => data.type === 'dht')
        .map(noteStorageKeyFor);

      if (dhtInvites.length === 0) {
        const notes: Array<[string, string]> = [];
        return xs.of([stagedPeers, notes]);
      } else {
        return asyncStorageSource
          .multiGet(dhtInvites)
          .map(keyValuePairs => [stagedPeers, keyValuePairs]);
      }
    })
    .flatten()

.map(([zoomConfig, { transform: startTransform }, config, viewBox]) => {
      const { rawPos, targetTransform, useTransition } = zoomConfig
      if (useTransition) {
        return transition(250, startTransform, targetTransform, interpolateTransform(viewBox)).map(
          nextTransform =>
            new SetTransformAction(nextTransform, startTransform, rawPos, config.senseRange),
        )
      } else {
        return xs.of(
          new SetTransformAction(targetTransform, startTransform, rawPos, config.senseRange),
        )
      }
    })
    .flatten()