Last active
October 3, 2017 08:34
-
-
Save Frikki/273cf63cb1cd7a181888 to your computer and use it in GitHub Desktop.
Simple Cycle.js (Nested) Dialogue with MVI Example
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** @jsx hJSX */ | |
| import {hJSX} from '@cycle/dom'; | |
| const DIALOGUE_NAME = `dialogue`; | |
| let idSuffix = 0; | |
| function makeCycleId() { | |
| return `${DIALOGUE_NAME}-${idSuffix++}`; | |
| } | |
| function intent({DOM, cycleId}) { | |
| return { | |
| isClicked$: DOM.select(`.${cycleId}`).events(`click`) | |
| .map(() => true) | |
| .startWith(false), | |
| }; | |
| } | |
| function model({props$, actions}) { | |
| return props$.combineLatest( | |
| actions.isClicked$, | |
| (props, isClicked) => { | |
| return { | |
| data: isClicked ? | |
| <span style={{whiteSpace: `nowrap`}}>I was clicked</span> : | |
| `Click me!`, | |
| text: props.text, | |
| }; | |
| }); | |
| } | |
| function view({state$, cycleId}) { | |
| return state$.map( | |
| (state) => ( // eslint-disable-line | |
| <div className={`${cycleId} ${DIALOGUE_NAME}`}> | |
| {state.text} {state.data} | |
| </div> | |
| ) | |
| ); | |
| } | |
| function dialogue({DOM, props$, optCycleId = makeCycleId()}) { | |
| const cycleId = optCycleId.trim(); | |
| const actions = intent(DOM, cycleId); | |
| const state$ = model(actions); | |
| return { | |
| DOM: view({props$, state$}, cycleId), | |
| cycleId, | |
| state$, | |
| }; | |
| } | |
| export default dialogue; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
| <meta name="viewport" | |
| content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes"> | |
| <title>Simple Cycle.js (Nested) Dialogue with MVI Example</title> | |
| </head> | |
| <body> | |
| <section class="app-container"></section> | |
| <script src="main.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** @jsx hJSX */ | |
| import {run} from '@cycle/core'; | |
| import {hJSX, makeDOMDriver} from '@cycle/dom'; | |
| import dialogue from './dialogue.js'; | |
| function main({DOM}) { | |
| const dialogueInstance = dialogue( | |
| {DOM, props$: Rx.Observable.just({ | |
| text: `Unicorns cycle on rainbows!`, | |
| })} | |
| ); | |
| return { | |
| DOM: Rx.Observable.combineLatest( | |
| dialogueInstance.DOM, | |
| dialogueInstance.state$, | |
| (dialogueVTree, dialogueState) => ( | |
| <div> | |
| {dialogueVTree} | |
| <p> | |
| The dialogue state data is: {dialogueState.data} | |
| The dialogue state text is: {dialogueState.text} | |
| </p> | |
| </div> | |
| ) | |
| ), | |
| }; | |
| } | |
| run(main, { | |
| DOM: makeDOMDriver(`.app-container`), | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment