docs(decision-tree-widget): convert Cycle.js/Rx4 app to pseudo-Cycle …

…Rx5 app

doc/decision-tree-widget/package.json

@@ -5,15 +5,14 @@
   "scripts": {
     "yaml2json": "rm -f src/tree.json && node tools/yaml2json tree.yml ./src/tree.json",
     "prebrowserify": "mkdir -p dist",
-    "browserify": "browserify src/main.js -t babelify --ignore snabbdom-to-html --outfile dist/decision-tree-widget.js",
+    "browserify": "browserify src/main.js -t babelify --outfile dist/decision-tree-widget.js",
     "uglify": "uglifyjs dist/decision-tree-widget.js -o dist/decision-tree-widget.min.js",
     "build": "npm install && npm run yaml2json && npm run browserify && npm run uglify",
     "postbuild": "rm -f src/tree.json"
   },
   "dependencies": {
-    "@cycle/core": "^6.0.3",
-    "cycle-snabbdom": "^1.1.1",
-    "rx": "^4.0.8",
+    "hyperscript-helpers": "^2.1.0",
+    "snabbdom": "^0.4.2",
     "yaml-js": "^0.1.3"
   },
   "devDependencies": {

doc/decision-tree-widget/src/main.js

@@ -1,32 +1,36 @@
-import {Observable} from 'rx';
-import {run} from '@cycle/core';
-import {makeDOMDriver, div, h4, p, li, ul, a, span} from 'cycle-snabbdom';
+const snabbdom = require('snabbdom');
+const classModule = require('snabbdom/modules/class');
+const propsModule = require('snabbdom/modules/props');
+const styleModule = require('snabbdom/modules/style');
+const attrsModule = require('snabbdom/modules/attributes');
+const h = require('snabbdom/h');
+const {div, h4, p, li, ul, a, span} = require('hyperscript-helpers')(h);
 const tree = require('./tree.json');
+const patch = snabbdom.init([classModule, propsModule, styleModule, attrsModule]);
 
-function intent(domSource) {
-  const chooseOption$ = domSource
-    .select('.option')
-    .events('click')
+function intent(containerElem) {
+  const click$ = Rx.Observable.fromEvent(containerElem, 'click');
+
+  const chooseOption$ = click$
+    .filter(ev => ev.target.className === 'option')
     .map(ev => ({
       type: 'CHOOSE_OPTION',
-      payload: parseInt(ev.currentTarget.dataset.index)
+      payload: parseInt(ev.target.dataset.index)
     }));
 
-  const undo$ = domSource
-    .select('.undo')
-    .events('click')
+  const undo$ = click$
+    .filter(ev => ev.target.className === 'undo')
     .map(() => ({
       type: 'UNDO'
     }));
 
-  const reset$ = domSource
-    .select('.reset')
-    .events('click')
+  const reset$ = click$
+    .filter(ev => ev.target.className === 'reset')
     .map(() => ({
       type: 'RESET'
     }));
 
-  return Observable.merge(chooseOption$, undo$, reset$);
+  return Rx.Observable.merge(chooseOption$, undo$, reset$);
 }
 
 function model(action$) {
@@ -58,7 +62,7 @@ function model(action$) {
       return initialState;
     });
 
-  return Observable.merge(selectReducer$, undoReducer$, resetReducer$)
+  return Rx.Observable.merge(selectReducer$, undoReducer$, resetReducer$)
     .scan((state, reducer) => reducer(state), initialState)
     .startWith(initialState);
 }
@@ -87,7 +91,7 @@ function renderCurrentSentence(state) {
     state.previous ? `"${state.previous}${state.options.length === 1 ? '.' : '...'}"` : null,
     state.previous ? span('.undo', '\u21A9\u00A0Undo') : null,
     state.previous ? span('.reset', 'Or\u00A0reset') : null
-  ]);
+  ].filter(x => x !== null));
 }
 
 function renderOption(option, index) {
@@ -142,8 +146,8 @@ function view(state$) {
   );
 }
 
-function main(sources) {
-  const action$ = intent(sources.DOM);
+function main(containerElem) {
+  const action$ = intent(containerElem);
   const state$ = model(action$);
   const displayState$ = viewModel(state$);
   const vdom$ = view(displayState$);
@@ -153,7 +157,7 @@ function main(sources) {
 }
 
 window.addEventListener('load', () => {
-  run(main, {
-    DOM: makeDOMDriver('.decision-tree-widget')
-  });
+  const container = document.querySelector('.decision-tree-widget');
+  const vdom$ = main(container).DOM;
+  vdom$.startWith(container).pairwise().subscribe(([a,b]) => { patch(a,b); });
 });

doc/scripts/setup-rx-script.js

@@ -0,0 +1,5 @@
+(function () {
+  if (Rx.KitchenSink) {
+    Rx = Rx.KitchenSink;
+  }
+})();

esdoc.json

@@ -10,10 +10,11 @@
   "title": "RxJS",
   "styles": ["./doc/styles/main.css"],
   "scripts": [
-    "./dist/global/Rx.umd.min.js",
+    "./dist/global/Rx.KitchenSink.umd.js",
     "./doc/asset/devtools-welcome.js",
     "./doc/scripts/custom-manual-styles.js",
-    "./doc/decision-tree-widget/dist/decision-tree-widget.min.js"
+    "./doc/decision-tree-widget/dist/decision-tree-widget.min.js",
+    "./doc/scripts/setup-rx-script.js"
   ],
   "index": "./doc/index.md",
   "plugins": [