made with esnextbin
This file contains 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
import xs from 'xstream' | |
function streamFromStore(store) { | |
return xs.create( | |
{ | |
start: function(listener){ | |
this.unsubscribe = store.subscribe(() => listener.next(store.getState())) | |
}, | |
stop: function(){ | |
this.unsubscribe() |
This file contains 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
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) => { |
This file contains 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
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}`) | |
]) |
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.
This file contains 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
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 { |
This file contains 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
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; |
This file contains 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
function continentCounter (world, x, y) { | |
var board = world.slice(); | |
if (board[x] === undefined || board[x][y] !== "land") { | |
return 0; | |
} | |
var count = 1; | |
board[x][y] = "counted"; | |
This file contains 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
// 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] : |