Motorcycle.js test

index.js

import { run } from '@motorcycle/run'
import { makeDomDriver, div, button, h2 } from '@motorcycle/dom';

import {merge, of} from 'most'


function variants(){
  const inc$ = sources.dom.select('.inc').events('click')
  const dec$ = sources.dom.select('.dec').events('click');

  const actions = {
    inc: (state, action) => {return state +=1},
    dec: (state, action) => {return state -=1}
  }
  const actions$ = {
    inc$,
    dec$
  }
  
  
  const countVar1$ = merge(
    inc$.map(value=>({type: 'inc',value})),
    dec$.map(value=>({type: 'dec', value}))
    )
    .scan(function(state, action){
      state = actions[action.type](state)
      return state
  },0)
  
  const countVar2$ = merge(
    inc$.map(input => actions.inc),
    dec$.map(input => actions.dec)
    )
    .scan(function(state, action){
      state = action(state)
      return state
  },0)
}


function main(sources) {
  const inc$ = sources.dom.select('.inc').events('click')
  const dec$ = sources.dom.select('.dec').events('click');

  const actions = {
    inc: (state, action) => {return state +=1},
    dec: (state, action) => {return state -=1}
  }
  const actions$ = {
    inc$,
    dec$
  }
  
  const count$ = merge(
    inc$.map(input=>actions.inc),
    dec$.map(input=>actions.dec)
    )
    .scan(function(state, action){
      state = action(state)
      return state
  },0)
  
  const view$ = count$.map(count =>
    div([
      h2(`Clicked ${count} times`),
      button('.inc','Inc'),
      button('.dec','Dec')
    ])
  )

  return { view$ }
}

const domDriver = makeDomDriver(document.querySelector('#app'));

function effects(sinks) {
  console.log('calling effects')
  const dom = domDriver(sinks.view$)

  return { dom }
}

run(main, effects)