How to use the xstream.combine function in xstream

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,

}: Sources): Sinks {
  const verticesAndEditable$ = state$.map(state => {
    const item = state.sitem()
    const vertices = state.vertices()
    const editable = item && !item.locked
    return { editable, vertices }
  })
  const segments$ = verticesAndEditable$.map(({ vertices, editable }) =>
    vertices.isEmpty()
      ? List<[Point, Point]>()
      : vertices
          .butLast()
          .zip(vertices.rest())
          .push([vertices.last(), vertices.first() as Point]),
  )
  const highlightedSegmentIndex$ = xs
    .combine(verticesAndEditable$, config$, mouse.move$, segments$, state$, mouse.vertexIndex$)
    .map(([{ editable }, config, pos, segments, { transform }, vertexIndex]) =>
      vertexIndex === -1 && editable
        ? segments.findIndex(
            seg =>
              distanceBetweenPointAndSegment(pos, seg[0], seg[1]) <=
              config.senseRange / transform.k,
          )
        : -1,
    )
  const highlightedSegment$ = highlightedSegmentIndex$
    .sampleCombine(segments$)
    .map(([i, segs]) => (i === -1 ? null : segs.get(i)))
  const vdom$ = highlightedSegment$.sampleCombine(state$).map(([seg, { transform }]) =>
    seg
      ? h('line', {

function model(_response$, _actions){
   let trains$ = _response$.map(data => normaliseData(data.trains))
   let line$ = _actions.line$.startWith(DEFAULT_LINE).map(line => line.label);
   let state$ = xs.combine(line$, trains$);

   return state$;
}

function view(props$, value$) {
  return xs.combine(props$, value$).map(([props, value]) =>
    div('.labeled-slider', [
      span('.label', `${props.label} ${value}${props.unit}`),
      input('.slider', {
        attrs: {type: 'range', min: props.min, max: props.max, value}
      })
    ])
  );
};

function view(state$: Stream, commentChildren$: Stream, action$: Stream): Stream {
    return xs.combine(state$, commentChildren$, action$)
        .map(([comment, children, showComment]) =>
        <li>
            <div>
                <span> {comment.user} </span>
                <span> {comment.time_ago} </span>
                <span>[{showComment ? '-' : '+'}]</span>
            </div>
            {showComment &amp;&amp; <div>
                <a href="{`https://news.ycombinator.com/reply?id=${comment.id}`}">reply</a>
            </div>}
            {(children &amp;&amp; showComment) &amp;&amp; <ul>
                {children}
            </ul>}
        </li>
    );
}

.checkedFlatMap(p =>
      xs.combine(state$, config$).map(([{ transform }, config]) =>
        h('circle.close-indicator', {
          attrs: {
            cx: p.x,
            cy: p.y,
            fill: 'red',
            opacity: 0.3,
            r: config.senseRange / transform.k,
          },
        }),
      ),
    )

export default function view(
  state$: Stream,
  topBarElem$: Stream>,
) {
  return xs.combine(state$, topBarElem$).map(([state, topBarElem]) => {
    const windowDimensions = Dimensions.get('window');
    const windowWidth = windowDimensions.width;

    return h(View, {style: styles.container}, [
      topBarElem,

      h(ScrollView, {style: styles.container}, [
        state.about.imageUrl
          ? h(Image, {
              style: {
                width: windowWidth,
                height: windowWidth,
                resizeMode: 'cover',
              },
              accessible: true,
              accessibilityLabel: 'Biographic Picture',

url: '/tasks',
    method: 'GET',
    type: 'application/json'
  });

  const tasksVtrees$ = Collection.pluck(
    tasks$,
    item => xs
      .combine(item.DOM, item.complete$, filter$)
      .map(showViewUnlessFiltered)
  );
  const tasksComplete$ = Collection.pluck(tasks$, item => item.complete$);
  const tasksRequest$ = Collection.merge(tasks$, item => itemRequests$(deleteComplete$, item));

  return {
    DOM: xs.combine(tasksVtrees$, tasksComplete$).map(view),
    HTTP: xs.merge(
      addTask$,
      refreshList$,
      tasksRequest$
    )
  };
}

closeWhenBlur$,
      closeWhenMakeIntent$,
      clickToToggleCategory$
        .sampleCombine(activeCategory$)
        .map(([next, active]) => (next === active ? null : next)),
      mouseoverToFocusCategory$,
    ),
  )

  const intent$ = domSource
    .select('*[data-intent]')
    .events('click')
    .filter(e => !e.ownerTarget.classList.contains('disabled'))
    .map(e => e.ownerTarget.dataset.intent as UIIntent)

  const vdom$ = xs
    .combine(state$, appHistory$, activeCategory$)
    .map(([{ selIdSet }, appHistory, activeCategory]) => (
      <div tabindex="1">
        
          <menuitem name="Save as JSON">
          <menuitem name="Load JSON">
          <menuitem name="Load Image">
        </menuitem></menuitem></menuitem>
        
          <menuitem disabled="{appHistory.getLastAction()" name="Undo">
          </menuitem></div>

DOM.select('.show-all').events('click').mapTo((completed) => true),
    DOM.select('.show-completed').events('click').mapTo((completed) => completed),
    DOM.select('.show-active').events('click').mapTo((completed) => !completed)
  ).startWith((completed) => true);

  const todoVtrees$ = Collection.pluck(
    todos$,
    item => xs
      .combine(item.DOM, item.complete$, filter$)
      .map(showViewUnlessFiltered)
  );

  const todosComplete$ = Collection.pluck(todos$, item => item.complete$);

  return {
    DOM: xs.combine(todoVtrees$, todosComplete$).map(view)
  };
}