How to use cyclejs - 10 common examples

/* global suite, test */

import chai from 'chai';
import { assert } from 'chai';

import spies from 'chai-spies';
import spiesTdd from 'chai-spies-tdd';

chai.use(spies);
chai.use(spiesTdd);

import { Rx, h } from 'cyclejs';

import equalCollection from 'chai-equal-collection';

chai.use(equalCollection(Rx.internals.isEqual));

import injectTestingUtils from '../src/inject-testing-utils';

suite('injectTestingUtils', () => {

    test('should be a function', () => {
        assert.isFunction(injectTestingUtils);
    });

    test('should throw if argument is not a function', () => {
        assert.throws(() => injectTestingUtils());

        assert.throws(() => injectTestingUtils({}));

        assert.throws(() => injectTestingUtils([]));
    });

},{"cyclejs":"cyclejs"}],5:[function(require,module,exports){
"use strict";

// IMPORTS =========================================================================================
var Cycle = require("cyclejs");
var Rx = Cycle.Rx;
var h = Cycle.h;

var Footer = require("./footer");

// EXPORTS =========================================================================================
var View = Cycle.createView(function (Model) {
  var firstName$ = Model.get("firstName$");
  var lastName$ = Model.get("lastName$");
  return {
    vtree$: Rx.Observable.combineLatest(firstName$, lastName$, function (firstName, lastName) {
      return h("div", null, [h("div", { className: "form-group" }, [h("label", null, ["First Name:"]), h("input", { type: "text", className: "form-control", id: "firstName", placeholder: "First Name" })]), h("div", { className: "form-group" }, [h("label", null, ["Last Name:"]), h("input", { type: "text", className: "form-control", id: "lastName", placeholder: "Last Name" })]), h("h1", null, ["Hello ", firstName + " " + lastName, "!"]), h("Footer", { className: "xxx" }, ["content"])]);
    }) };
});

module.exports = View;

},{"./footer":2,"cyclejs":"cyclejs"}],6:[function(require,module,exports){
"use strict";

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o

favorite$: Props.get("favorite$").merge(Intent.get("toggle$")).scan(false, function (favorite) {
        return !favorite;
      }).startWith(false),

      width$: Props.get("width$").startWith(100) };
  });

  var View = Cycle.createView(function (Model) {
    return {
      vtree$: Cycle.latest(Model, Object.keys(props), function (item) {
        return h("div", { className: Class({ picture: true, favorite: item.favorite }) }, [h("img", { src: item.src, width: item.width, title: item.title })]);
      }) };
  });

  var Intent = Cycle.createIntent(function (User) {
    return {
      toggle$: User.event$(".picture", "click").map(function () {
        return true;
      }) };
  });

  User.inject(View).inject(Model).inject(Intent, Props)[0].inject(User);

  return {
    // As Model::favorite$ already dependes on Intent::toggle$ we can only use `.withLatestFrom`
    // `.flatMap(Model.get("favorite$"))` would create new observables at every step (circular dependency => memory leak)
    favup$: Intent.get("toggle$").withLatestFrom(Model.get("favorite$"), function (_, fav) {
      return fav;
    }).filter(function (v) {
      return !v;
    }).flatMap(Model.get("src$")),

// IMPORTS =========================================================================================
let Cycle = require("cyclejs");
let {Rx} = Cycle;

// EXPORTS =========================================================================================
let Intent = Cycle.createIntent(User => {
  return {
    add$: User.event$(".sliders .add", "click").map(event => 1),
    remove$: User.event$(".slider", "remove").map(event => event.data)
      .tap(id => {
        console.log(`Intent gets remove(${id})!`);
      }),
    changeValue$: User.event$(".slider", "changeValue").map(event => event.data),
    changeColor$: User.event$(".slider", "changeColor").map(event => event.data),
  };
});

module.exports = Intent;

// IMPORTS =========================================================================================
var Cycle = require("cyclejs");
var Rx = Cycle.Rx;
var h = Cycle.h;

var Class = require("classnames");

// COMPONENTS ======================================================================================
var props = {
  src$: null,
  title$: null,
  favorite$: null,
  width$: null };

module.exports = Cycle.registerCustomElement("Picture", function (User, Props) {
  var Model = Cycle.createModel(function (Intent, Props) {
    return {
      src$: Props.get("src$").startWith("#").shareReplay(1), // `src$` is exposed so `shareReplay` is required

      title$: Props.get("title$").startWith(""),

      favorite$: Props.get("favorite$").merge(Intent.get("toggle$")).scan(false, function (favorite) {
        return !favorite;
      }).startWith(false),

      width$: Props.get("width$").startWith(100) };
  });

  var View = Cycle.createView(function (Model) {
    return {
      vtree$: Cycle.latest(Model, Object.keys(props), function (item) {

// IMPORTS =========================================================================================
let Cycle = require("cyclejs");
let {Rx, h} = Cycle;

// ELEMENTS ========================================================================================
Cycle.registerCustomElement("item", (DOM, Props) => {
  let View = Cycle.createView(Model => {
    let id$ = Model.get("id$");
    let width$ = Model.get("width$");
    return {
      vtree$: Rx.Observable.combineLatest(id$, width$, (id, width) => {
          return (
            <div width="" style="{{width:" class="item">
              <div>
                <input value="{width}/" max="1000" min="200" type="range" class="width-slider">
              </div>
              <button class="remove">Remove</button>
            </div>
          );
        }
      ),
    };

// IMPORTS =========================================================================================
let Cycle = require("cyclejs");
let {Rx, h} = Cycle;

// ELEMENTS ========================================================================================
Cycle.registerCustomElement("item", (DOM, Props) => {
  let View = Cycle.createView(Model => {
    let id$ = Model.get("id$");
    let width$ = Model.get("width$");
    let color$ = Model.get("color$");
    return {
      vtree$: Rx.Observable.combineLatest(id$, width$, color$, (id, width, color) => {
          return (
            <div width="" style="{{width:" class="item">
              <div>
                <input value="{width}/" max="1000" min="200" type="range" class="width-slider">
              </div>
              <div>
                <input value="{color}/" type="text" class="color-input">
              </div>
              <button class="remove">Remove</button>
            </div>

},{"cyclejs":"cyclejs","lodash.range":7,"node-uuid":"node-uuid"}],4:[function(require,module,exports){
"use strict";

// IMPORTS =========================================================================================
var Cycle = require("cyclejs");
var Rx = Cycle.Rx;
var h = Cycle.h;

// ELEMENTS ========================================================================================
Cycle.registerCustomElement("Slider", function (User, Props) {
  var Model = Cycle.createModel(function (Intent, Props) {
    return {
      id$: Props.get("id$").shareReplay(1),

      value$: Props.get("value$").merge(Intent.get("changeValue$")).startWith(0),

      color$: Props.get("color$").merge(Intent.get("changeColor$")).startWith("#F00") };
  });

  var View = Cycle.createView(function (Model) {
    var id$ = Model.get("id$");
    var value$ = Model.get("value$");
    var color$ = Model.get("color$");
    return {
      vtree$: value$.combineLatest(id$, color$, function (value, id, color) {
        return h("fieldset", { className: "slider" }, [h("legend", null, ["Slider ", h("small", null, [id])]), h("div", { className: "form-group" }, [h("label", null, ["Amount"]), h("div", { className: "input-group" }, [h("input", { type: "range", value: value, min: "0", max: "100" }), h("div", { className: "input-group-addon" }, [h("input", { type: "text", value: value, readonly: "1" })])])]), h("div", { className: "form-group" }, [h("div", { className: "input-group" }, [h("div", { style: { backgroundColor: color, width: "100%", height: "10px" } }), h("div", { className: "input-group-addon" }, [h("input", { type: "text", value: color, readonly: "1" })])])]), h("div", null, [h("button", { className: "btn btn-default remove" }, ["Remove"])])]);

highlightedAutocompletionIndex$: (autocompletions$, valueChange$, hideAutocompletions$, selectedAutocompletionInput$) =>
        Rx.Observable.combineLatest(
            Rx.Observable.merge(
                Rx.Observable.merge( // reset position on text and when autocompletions list hides
                    valueChange$,
                    hideAutocompletions$
                )
                .map(() => ({ direct: 0 }))
                .delay(1), // reset after fetching value from autocompletions
                selectedAutocompletionInput$
            ),
            autocompletions$,
            (positionModifier, autocompletions) => ({ positionModifier, autocompletions })
        ).scan(0, (position, { positionModifier, autocompletions }) => {
            if(positionModifier.hasOwnProperty('modifier')) {
                position = position + positionModifier.modifier;
            } else if(positionModifier.hasOwnProperty('direct')) {
                position = positionModifier.direct;