hyperfactorials.tsx

import xs from 'xstream'
import {Sources, Sinks} from './interfaces'

const intent = (sources$: Sources) => sources$.DOM
  .select('button')
  .events('click')
  .map(ev => 1);

const model = (intent$: any) => intent$
  .fold((total, change) => total + change, 1);

const view = (model$: any) => model$.map(count =>
  <div>
    <h1>Hyperfactorials</h1>
    <p>
      The <strong>{ordinalSuffix(Number(count))}</strong> hyperfactorial is <strong>{String(hyperfactorial(count))}</strong>
    </p>
    <div>Click <button>here</button> to see the next hyperfactorial</div>
  </div>
)

export function App(sources: Sources): Sinks {
  return {
    DOM: view(model(intent(sources)))
  }
}