Getting StartedのサンプルをMVIで書く

Getting StartedのサンプルをMVIで書くと多分こんな感じ。

import Cycle from "@cycle/core";
import {makeDOMDriver, hJSX} from "@cycle/dom";

function intent(DOM) {
  return {
    toggleSwitch$: DOM.select("input").events("change")
      .map(ev => ev.target.checked)
  };
}

function model(actions) {
  return actions.toggleSwitch$.startWith(false)
    .map(isOn => ({isOn}));
}

function view(state$) {
  return state$.map(({isOn}) =>
    <div>
      <input type="checkbox" /> Toggle me
      <p>{isOn ? "ON" : "OFF"}</p>
    </div>
  );
}

function main(drivers) {
  return {
    DOM: view(model(intent(drivers.DOM)))
  };
}

Cycle.run(main, {
  DOM: makeDOMDriver("main")
});

ちなみにJSXをbabelで変換する場合は、pluginの場合["transform-react-jsx", { "pragma": "hJSX" }]、preset reactを使う場合はファイル冒頭にコメント/** @jsx hJSX */を入れる必要がある。