Model-View-Intent

example.js

import xs from 'xstream'
import { run } from '@cycle/run'
import * as H from '@cycle/dom'
import create from 'immutability-helper'

const INPUT = 'INPUT'

function intent (DOM) {
  const inputEvents = DOM.select('.field').events('input')
    .map((e) => ({
      type: INPUT,
      value: e.target.value
    }))

  return xs.merge(
    inputEvents
  )
}

const initialModel = {
  message: 'hello there'
}

function model (state, action) {
  switch (action.type) {
    case INPUT:
      return create(state, {
        message: {$set: action.value}
      })
  }
  return state
}

function view (state) {
  return H.div([
    H.div({}, state.message),
    H.input({
      attrs: {
        class: 'field',
        value: state.message
      }
    })
  ])
}

function app (sources) {
  return {
    DOM: intent(sources.DOM)
      .startWith({ type: 'INIT' })
      .fold(model, initialModel)
      .map(view)
  }
}

run(app, { DOM: H.makeDOMDriver('#app') })