Cycle.js.org Website Review

Cycle.js - Getting started

A functional and reactive aScript framework for predictable code

` elements displaying `${i} seconds elapsed` changing over time every second, where `${i}` is replaced by `0`, `1`, `2`, etc.```jsfunction main() { const sinks = { DOM: xs.periodic(1000).map(i => h1('' + i + ' seconds elapsed') ) }; return sinks;}```Also, remember to import `h1` from Cycle DOM.> In the beginning of the file:```jsimport {makeDOMDriver, h1} from '@cycle/dom';```### Catch messages into `main`Function `main()` now takes `sources` as input. Just like the output `sinks`, the input `sources` follow the same structure: an object containing `DOM` as a property. Sources are incoming messages. `sources.DOM` is an object with a queryable API to get streams. Use `sources.DOM.select(selector).events(eventType)` to get a stream of `eventType` DOM events happening on the element(s) specified by `selector`. This `main()` function takes the stream of `click` events happening on `input` elements, and maps those toggling events to Virtual DOM elements displaying a togglable checkbox.```jsfunction main(sources) { const sinks = { DOM: sources.DOM.select('input').events('click') .map(ev => ev.target.checked) .startWith(false) .map(toggled => div([ input({attrs: {type: 'checkbox'}}), 'Toggle me', p(toggled ? 'ON' : 'off') ]) ) }; return sinks;}```Remember to import new element types from Cycle DOM.> In the beginning of the file:```jsimport {makeDOMDriver, div, input, p} from '@cycle/dom';```### Consider JSXWe used the `div()`, `input()`, `p()` helper functions to create virtual DOM elements for the respective ``, ``, `` DOM elements, but you can also use JSX with Babel. The following only works if you are building with Babel:(1) Install the npm packages [babel-plugin-transform-react-jsx](http://babeljs.io/docs/plugins/transform-react-jsx/) and [snabbdom-pragma](https://www.npmjs.com/package/snabbdom-pragma).```npm install --save babel-plugin-transform-react-jsx snabbdom-pragma```(2) Specify the pragma for JSX in the `.babelrc` file.> .babelrc```json{ presets: [ es2015 ], plugins: [ syntax-jsx, [transform-react-jsx, {pragma: Snabbdom.createElement}] ]}```(3) Import Snabbdom JSX.> main.js```jsimport xs from 'xstream';import {run} from '@cycle/xstream-run';import {makeDOMDriver} from '@cycle/dom';import Snabbdom from 'snabbdom-pragma';```(4) Use JSX as return values.This example portrays the most common problem-solving pattern in Cycle.js: formulate the computer's behavior as a function of streams: continuously listen to source messages from drivers and continuously provide sinks messages (in our case, Virtual DOM elements) to the drivers. Read the next chapter to get familiar with this pattern.```jsxfunction main(sources) { const sinks = { DOM: sources.DOM.select('input').events('click') .map(ev => ev.target.checked) .startWith(false) .map(toggled => Toggle me {toggled ? 'ON' : 'off'} ) }; return sinks;}``` Flatdoc.run({ fetcher: function (callback) { callback(null, do ent.getElementById('markdown').innerHTML); }, highlight: function (code, value) { return hljs.highlight(value, code).value; }, });