| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Istantation Patterns Permormance Test</title> | |
| <script src="functional.js"></script> | |
| <script src="functionalShared.js"></script> | |
| <script src="protototypal.js"></script> | |
| <script src="pseudoclassical.js"></script> | |
| </head> | |
| <body> |
| // Recursive implementation of reduce | |
| // Supports ES6 interpreter Tail Call Optimization | |
| // http://www.ecma-international.org/ecma-262/6.0/#sec-tail-position-calls | |
| // https://kangax.github.io/compat-table/es6/#test-proper_tail_calls_(tail_call_optimisation) | |
| function recursiveReduce(list, callback, accumulator) { | |
| if (list.length === 0) return accumulator; | |
| accumulator === undefined ? | |
| accumulator = list[0] : |
| function recursiveEach(list, iterator) { | |
| if (list.length === 0) { | |
| return undefined; | |
| } | |
| iterator(list[0]); | |
| return recursiveEach(list.slice(1), iterator); | |
| }; |
| import xs from 'xstream'; | |
| import { run } from '@cycle/xstream-run'; | |
| import { makeDOMDriver, div, button, h1 } from '@cycle/dom'; | |
| const fizzBuzz = (n, result='') => { | |
| if (n === 0) return result; | |
| if (n % 3 === 0) result += 'Fizz'; | |
| if (n % 5 === 0) result += 'Buzz'; | |
| if (!result.length) return n; | |
| return result; |
| import xs from 'xstream'; | |
| import { run } from '@cycle/xstream-run'; | |
| import { makeDOMDriver, div, span } from '@cycle/dom'; | |
| // -- INTENT | |
| // intent : domSource -> actions streams$ | |
| function intent(domSource) { | |
| return { |
Cover all the major aspects in order to build apps with cycle.js: from drivers, to nested dialogues, from state management to testing.
I just started deep diving into cycle.js, therefore I'm primarly writing this for myself as part of my learning process. I am openly sharing my process to get feedback from the community as I'll probably get things wrong as I don't know any best practice yet(I kinda feel like cycling with side wheels on atm). I also hope this might serve others as well.
| import xs from 'xstream'; | |
| import {div, button} from '@cycle/dom' | |
| function view(state$) { | |
| const vtree$ = state$.map( state => | |
| div([ | |
| button('.increase', 'Moar'), | |
| button('.decrease', 'Less'), | |
| div(`Count: ${state.count}`) | |
| ]) |
made with esnextbin
| function combineCycles(...mains) { | |
| return function(sources) { | |
| const sinks = mains.map(main => main(sources)) | |
| const drivers = Object.keys( | |
| sinks.reduce((drivers, sink) => Object.assign(drivers, sink), {}) | |
| ) | |
| const combinedSinks = drivers | |
| .reduce((combinedSinks, driver) => { |