TypeScript, Cycle.js, Fluent UI React

index.ts

import { Stream } from 'xstream';
import { run } from "@cycle/run";
import { ReactElement } from 'react';
import { h, ReactSource } from "@cycle/react";
import { makeDOMDriver, p } from "@cycle/react-dom";
import { PrimaryButton, IStackTokens, Stack } from '@fluentui/react';

export type Sources = {
  readonly react: ReactSource;
};
export type Sinks = {
  readonly react: Stream<ReactElement>;
};

function counter(sources: Sources): Sinks {
  const click$ = (sources.react
    .select("primary")
    .events("click") as Stream<MouseEvent>)
    .mapTo(+1)

  const count$ = click$.fold((x, y) => x + y, 0)

  const stackTokens: IStackTokens = { childrenGap: 40 };

  const content = count$.map(count =>
    h(
      Stack,
      {
        tokens: stackTokens,
      },
      [
        h(PrimaryButton, {sel: "primary", text: "Primary"}),
        p("Counter: " + count)
      ]
    )
  )

  return { react: content }
}

const dispose = run(counter, {
  react: makeDOMDriver(document.getElementById("root"))
});