Skip to content

Instantly share code, notes, and snippets.

@AxelRHD
Created November 18, 2021 20:45
Show Gist options
  • Save AxelRHD/7a7859134fb3f4343512e3071c3d3f8d to your computer and use it in GitHub Desktop.
Save AxelRHD/7a7859134fb3f4343512e3071c3d3f8d to your computer and use it in GitHub Desktop.
Cycle JS boilerplate with 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)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment