Cycle.js

Untitled-3

import Cycle from '@cycle/core';
import {div, label, input, h1, button, p, makeDOMDriver} from '@cycle/dom';
const _ = require('lodash');
const {Observable} = require('rx');

function f1(sources) {
  const sinks = {
    DOM: sources.DOM.select('.field').events('input')
      .map(ev => ev.target.value)
      .startWith('12')
      .map(name => 
        div([
          label('Name:'),
          div('Tests'),
          input('.field', {attributes: {type: 'text'}}),
          h1('Hello2 ' + name)
        ])
      )
  };
  return sinks;
}

function f2(sources) {
  const decrement$ = sources.DOM
    .select('.decrement').events('click').map(ev => -1);

  const increment$ = sources.DOM
    .select('.increment').events('click').map(ev => +1);

  const action$ = Observable.merge(decrement$, increment$);
  const count$ = action$.startWith(0).scan((x,y) => x+y);

  const vtree$ = count$.map(count =>
    div([
      button('.decrement', 'Decrement'),
      button('.increment', 'Increment'),
      p('Counter: ' + count)
    ])
  );
  return { DOM: vtree$ };
}

let main = f2;

const sources = { DOM: makeDOMDriver('.app') }

//Cycle.run(main, );