const xs = xstream.default;

const {div, input, p, makeDOMDriver} = CycleDOM;

​

const intent = (DOMSource) => {

  const addClick$ = DOMSource.select('.add').events('click').map(ev => true);

  const todoChange$ = DOMSource.select('.todo').events('change').map(ev => ev.target.value);

​

  return { addClick$, todoChange$ };

};

​

const model = (addClick$, todoChange$) => {

  const add$ = addClick$.startWith(false);

  const todo$ = todoChange$.startWith('');

​

  return xs.combine(add$, todo$)

    .map((combined$) => combined$[1])

    .fold((todos, todo) => {

      todo.trim() && todos.push(todo);

      return todos;

    }, []);

};

​

const view = state$ => state$.map(todos => div([

  input({attrs: {type: 'text', class: 'todo'}}),

  input({attrs: {type: 'submit', value: 'Add', class: 'add'}}),

  div(todos.map(todo => p(todo)))

]));

​

​

const main = (sources) => {

  const { addClick$, todoChange$ } = intent(sources.DOM);

  const state$ = model(addClick$, todoChange$);

  const vdom$ = view(state$);

​

   return {

     DOM: vdom$

   };

 };

​

Cycle.run(main, {

   DOM: makeDOMDriver('#app')

 });

​