Cycle JS boilerplate with JSX

boilerplate.jsx

import xs from 'xstream';
import { run } from '@cycle/run';
import { makeDOMDriver } from '@cycle/dom';
// import { makeHTTPDriver } from '@cycle/http';
import Snabbdom from 'snabbdom-pragma';



const intent = sources => {
  return {
    buttonClicked$: sources.DOM.select('.btn-msg').events('click'),
  }
}


const model = actions => {
  msgOutput$ = actions.buttonClicked$
    .map(() => 'Button was clicked').startWith(null)
  
  return {
    DOM: msgOutput$,
    // HTTP: fetchData$
  }
}


const view = state$ => {
  return state$.map(msgOutput => 
    <div>
      <h2>Cycle Boilerplate</h2>
      <button type="button" className="btn-msg">Click me!</button>
      { msgOutput === null ? null : <p>{ msgOutput }</p>}
    </div>
  )
}


const main = (sources) => {
  const actions = intent(sources)
  const state$ = model(actions)
  const vdom$ = view(state$.DOM)

  return {
    DOM: vdom$,
    // HTTP: state$.HTTP
  }
}

const drivers = {
  DOM: makeDOMDriver('#app'),
  // HTTP: makeHTTPDriver()
}


console.log('app started')
run(main, drivers)