Reactive Programming with React and Most.js

app.tsx

import { startWith, map, constant, merge, combineArray, runEffects, tap } from '@most/core'
import { newDefaultScheduler } from '@most/scheduler'

const textVal$ = startWith(
  '',
  map(
    (e) => (e.target as HTMLInputElement).value,
    sources.fromDOMEvent('#text-input', 'input')
  )
)

const textFocus$ = startWith(
  false,
  merge(
    constant(
      true,
      fromDOMEvent('#text-input', 'focus')
    ),
    constant(
      false,
      fromDOMEvent('#text-input', 'blur')
    )
  )
)

const view$ = combineArray(
  (
    textFocus: boolean,
    textVal: string
  ) => {
    return <div>
      <input
        id="text-input"
        value={textVal}
      />
      <h3>{textFocus ? 'I have focus' : 'I am blurred'}</h3>
      <h3>Shout mode: {textVal.toUpperCase()}</h3>
    </div>
  },
  [
    textFocus$,
    textVal$
  ]
)

const render = (provider) => tap(provider, view$)

/* SIDE EFFECT ZONE DANGER */
/* eslint-disable fp/no-unused-expression, fp/no-nil */
if (process.env.BROWSER) {
  const el = document.getElementById('app')
  runEffects(
    render((View) => {
      ReactDOM.render(View, el)
    }),
    newDefaultScheduler()
  )
}
/* eslint-enable */
/* BACK TO SAFETY */