const {div, h, p, button, ul, li, makeDOMDriver} = CycleDOM;

const {Observable} = Rx;

const isolate = CycleIsolate;

​

function OriginalInput(sources) {

  const input$ = sources.DOM

    .events('input')

    .map(ev => ev.target.value);

  const vtree$ = sources.Assign

    .merge(input$)

    .startWith(null)

    .map(value =>

      h('input', {

        type: 'text',

        value

      })

    );

  return {

    DOM: vtree$,

    Values: input$

  };

}

​

const Input = s => isolate(OriginalInput)(s);

​

function main(sources) { 

  const add$ = sources.DOM.select('.add')

    .events('click').map(null);

  const input = Input({

    Assign: add$.map(() => ''),

    DOM: sources.DOM

  });

​

  const list$ = input.Values.flatMapLatest(text => add$.first().map(text))

    .startWith([])

    .scan((acc, curr) => acc.concat(curr));

  const vtree$ = list$.combineLatest(input.DOM, 

    (list, inputDOM) =>

      div([

        inputDOM,

        button('.add', 'Add'),

        ul(list.map(item => li(item)))

      ])

    );

  return {

    DOM: vtree$,

  };

}

​

Cycle.run(main, {

  DOM: makeDOMDriver('#app')

});