How to use the xstream/extra/concat function in xstream

.map(el => {
              mutationObserver.observe(el, {
                childList: true,
                attributes: true,
                characterData: true,
                subtree: true,
                attributeOldValue: true,
                characterDataOldValue: true,
              });
              return el;
            })
            .compose(dropCompletion) // don't complete this stream
      )
      .flatten();

    const rootElement$ = concat(domReady$, mutationConfirmed$)
      .endWhen(sanitation$)
      .compose(sampleCombine(elementAfterPatch$))
      .map(arr => arr[1])
      .remember();

    // Start the snabbdom patching, over time
    rootElement$.addListener({error: reportSnabbdomError});

    const delegator = new EventDelegator(rootElement$, isolateModule);

    return new MainDOMSource(
      rootElement$,
      sanitation$,
      [],
      isolateModule,
      delegator,

.map(state => {
      const ease = tween.power2.easeInOut;
      const xMove = 63.5; // px
      const padding = 8;
      const yLift = padding +
        state.measurements.matrixAHeight * 0.5 +
        state.measurements.matrixBHeight * 0.5;
      return concat(
        tween({ from: 0, to: yLift, duration: styles.step1Duration1, ease })
          .map(y => `
            translateX(0%)
            translateY(-${y}px)
            rotateZ(0deg)
          `),
        tween({ from: 0, to: 1, duration: styles.step1Duration2, ease })
          .map(x => `
            translateX(-${x * xMove}px)
            translateY(-${yLift}px)
            rotateZ(-${Math.pow(x, 2.3) * 90}deg)
          `),
      );
    })
    .flatten();

const doTheThing$ = pauseByBarMousedown$.map(() => {
        return concat(
          concat(xs.of((playing: boolean): boolean => false), xs.never()).endWhen(mouseUp$),
          xs.of((playing: boolean): boolean => true)
        )
      }
    ).flatten();

  const coords$ = start$.map(() => concat(
    xs.of({ left: 0, top: 0 }), leftToRight$, topToBottom$, circularReturn$
  )).flatten().startWith({ left: 0, top: 0 });

.map(state => {
      const ease = tween.power2.easeInOut;
      const yLift = padding +
        state.measurements.matrixAHeight * 0.5 +
        state.measurements.matrixBHeight * 0.5;
      return concat(
        tween({ from: 0, to: yLift, duration: styles.step1Duration1, ease })
          .map(y => `
            translateX(0%)
            translateY(${-y}px)
            rotateZ(0deg)
          `),
        tween({ from: 0, to: 1, duration: styles.step1Duration2, ease })
          .map(t => `
            translateX(${-t * xMove}px)
            translateY(${-yLift}px)
            rotateZ(${-Math.pow(t, 2.3) * 90}deg)
          `),
      );
    })
    .flatten();

const mainStream = () => {
    return concat(xs.fromArray(mainStreamHistory), main$$);
  }