nickbalestra

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()

nickbalestra

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) => {

nickbalestra

made with esnextbin

nickbalestra

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}`)
    ])

nickbalestra

A study plan to build applications with cycle

What:

Cover all the major aspects in order to build apps with cycle.js: from drivers, to nested dialogues, from state management to testing.

Why:

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.

nickbalestra

nickbalestra

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 {

nickbalestra

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;

nickbalestra

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";
  

nickbalestra

// 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] :