applicato · March 27, 2019 20:58
diff --git a/100 Counter apps examples :) b/100 Counter apps examples :)
 ...
 Different
 Counter 
 Implementations
 ...
diff --git a/101-hyperapp-v2.x.js b/101-hyperapp-v2.x.js
 import { h, app } from "hyperapp"

 app({
  init: 0,
  view: state => (
    <main>
      <h1>{state}</h1>
      <button onclick={state => state - 1}>-</button>
      <button onclick={state => state + 1}>+</button>
    </main>
  ),
  container: document.body
 })
diff --git a/102-react-values.js b/102-react-values.js
 import { NumberValue } from 'react-values'

 const Counter = () => (
  <NumberValue defaultValue={0}>
    {({ value, increment, decrement }) => (
      <button onClick={() => increment()}>+1</button>
      <span>{value}</span>
      <button onClick={() => decrement()}>-1</button>
    )}
  </NumberValue>)
diff --git a/103-mithril.js b/103-mithril.js
 m.mount(document.body, {
    count : 0,
    view : (vnode) => m("div",
        m("div", "Count: ", vnode.state.count),
        m("button", { onclick : () => vnode.state.count++ }, "+"),
        m("button", { onclick : () => vnode.state.count-- }, "-")
    )
 })
diff --git a/104-react-contextual.js b/104-react-contextual.js
 import { Provider, Subscribe } from 'react-contextual'

 const store = {
  count: 0,
  up: () => state => ({ count: state.count + 1 }),
  down: () => state => ({ count: state.count - 1 }),
 }

 const App = () => (
  <Provider {...store}>
    <Subscribe>
      {props => (
        <div>
          <h1>{props.count}</h1>
          <button onClick={props.up}>Up</button>
          <button onClick={props.down}>Down</button>
        </div>
      )}
    </Subscribe>
  </Provider>
 )
diff --git a/105-elmar.js b/105-elmar.js
 import React from 'react'

 export const init = count => count

 const Action = {
  Increment: x => x + 1,
  Decrement: x => x - 1
 }

 export const update = (action, model) => action(model)

 export const view = (signal, model) => (
  <div>
    <button onClick={signal(Action.Decrement)}>-</button>
    <div>{model}</div>
    <button onClick={signal(Action.Increment)}>+</button>
  </div>
 )

 export default {init, update, view}
diff --git a/106-mobx.js b/106-mobx.js
 import { observable } from 'mobx';
 import { observer } from 'mobx-react';
 import React from 'react'
 import {render} from 'react-dom'

 const state = { n: 0 };
 const incr = () => state.n++;
 const decr = () => state.n--;

 const view = observer(() => 
  <div>
    <h1>{state.n}</h1>
    <button onclick={incr}>+</button>
    <button onclick={decr}>-</button>
  </div>)

 render(
  <view />,
  document.querySelector('#app')
 );
diff --git a/107-cyclejs.js b/107-cyclejs.js
 import xs from 'xstream';
 import Cycle from '@cycle/xstream-run';
 import {div, button, p, makeDOMDriver} from '@cycle/dom';

 function main(sources) {
  let action$ = xs.merge(
    sources.DOM.select('.decrement').events('click').map(ev => -1),
    sources.DOM.select('.increment').events('click').map(ev => +1)
  );
  
  let count$ = action$.fold((x,y) => x + y, 0);
  
  return {
    DOM: count$.map(count =>
        div([
          button('.decrement', 'Decrement'),
          button('.increment', 'Increment'),
          p('Counter: ' + count)
        ])
      )
  };
 }

 Cycle.run(main, {
  DOM: makeDOMDriver('#main-container')
 });
diff --git a/108-react.js b/108-react.js
 import React, { Component, PropTypes } from 'react'
 import ReactDOM from 'react-dom'

 const increment = ({ count }) => ({ count: count + 1 });
 const decrement = ({ count }) => ({ count: count - 1 });

 class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    return (
      <p>
        {this.state.count}
        <button onClick={() => this.setState(increment)}>+</button>
        <button onClick={() => this.setState(decrement)}>-</button>
      </p>
    );
  }
 }

 ReactDOM.render(<Counter />, document.getElementById('root'));
diff --git a/109-choo-choo-v5.js b/109-choo-choo-v5.js
 var html = require('./html')
 var app = require('./')()

 app.model(function (state, bus) {
  state.count = 0
  bus.on('increment', function (count) {
    state.count += count
    bus.emit('render')
  })
 })
 app.router([ '/', mainView ])
 app.mount('body')

 function mainView (state, emit) {
  return html`
    <body>
      <h1>count is ${state.count}</h1>
      <button onclick=${onIncr}>+</button>
      <button onclick=${onDecr}>-</button>
    </body>
  `
  function onIncr() {
    emit('increment', 1)
  }
  function onDecr() {
    emit('increment', -1)
  }  
 }
diff --git a/110-choo-choo.js b/110-choo-choo.js
 const choo = require('../../')
 const html = require('../../html')

 const app = choo()
 app.model({
  state: {
    counter: 0
  },
  reducers: {
    increment: (data, state) => ({ counter: state.counter + 1 }),
    decrement: (data, state) => ({ counter: state.counter - 1 })
  }
 })

 const mainView = (state, prev, send) => {
  return html`
    <main class="app">
      <button onclick=${() => send('increment')}>Increment</button>
      <button onclick=${() => send('decrement')}>Decrement</button>
      <p>state.counter</p>
    </main>
 }

 app.router((route) => [
  route('/', mainView)
 ])

 document.body.appendChild(app.start())
diff --git a/111-elm.elm b/111-elm.elm
 import Html exposing (Html, button, div, text)
 import Html.App as App
 import Html.Events exposing (onClick)

 main =
  App.beginnerProgram
    { model = model
    , view = view
    , update = update
    }

 type alias Model = Int
 model : Model
 model = 0

 type Msg = Increment | Decrement

 update : Msg -> Model -> Model
 update msg model =
  case msg of
    Increment -> model + 1
    Decrement -> model - 1
    
 view : Model -> Html Msg
 view model =
  div []
    [ button [ onClick Decrement ] [ text "-" ]
    , div [] [ text (toString model) ]
    , button [ onClick Increment ] [ text "+" ]
 ]
diff --git a/112-fable-v2-elmish.fs b/112-fable-v2-elmish.fs
 module App
 open Elmish
 open Elmish.React
 open Fable.Helpers.React
 open Fable.Helpers.React.Props

 type Model = int
 type Msg = Increment| Decrement
 let init() : Model = 0

 let update (msg:Msg) (model:Model) =
    match msg with
    | Increment -> model + 1
    | Decrement -> model - 1

 let view model dispatch =
  div []
      [ button [ OnClick (fun _ -> dispatch Increment) ] [ str "+" ]
        div [] [ str (string model) ]
        button [ OnClick (fun _ -> dispatch Decrement) ] [ str "-" ] ]

 Program.mkSimple init update view
 |> Program.withReact "elmish-app"
 |> Program.withConsoleTrace
 |> Program.run
diff --git a/113-elm-ts-counter.ts b/113-elm-ts-counter.ts
 import { cmd } from '../src'
 import { Html } from '../src/React'
 import * as React from 'react'

 export type Model = number
 export type Flags = Model
 export const flags: Flags = 0

 export function init(flags: Flags): [Model, cmd.Cmd<Msg>] {
  return [flags, cmd.none]
 }

 export type Msg =
  | { type: 'Increment' }
  | { type: 'Decrement' }

 export function update(msg: Msg, model: Model): [Model, cmd.Cmd<Msg>] {
  switch (msg.type) {
    case 'Increment' :
      return [model + 1, cmd.none]
    case 'Decrement' :
      return [model - 1, cmd.none]
  }
 }

 export function view(model: Model): Html<Msg> {
  return dispatch => (
    <div>Count: {model}
      <button onClick={() => dispatch({ type: 'Increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'Decrement' })}>-</button>
    </div>
  )
 }
diff --git a/114-redux.js b/114-redux.js
 import React, { Component, PropTypes } from 'react'
 import ReactDOM from 'react-dom'
 import { createStore } from 'redux'

 class Counter extends Component {
  static propTypes = {
    value: PropTypes.number.isRequired,
    onIncrement: PropTypes.func.isRequired,
    onDecrement: PropTypes.func.isRequired
  }

  render() {
    const { value, onIncrement, onDecrement } = this.props
    return (
      <p>
        <button onClick={onIncrement}>+</button>
        <button onClick={onDecrement}>-</button>
      </p>
    )
  }
 }

 const counter = (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    case 'DECREMENT':
      return state - 1
    default:
      return state
  }
 }

 const store = createStore(counter)
 const rootEl = document.getElementById('root')

 const render = () => ReactDOM.render(
  <Counter
    value={store.getState()}
    onIncrement={() => store.dispatch({ type: 'INCREMENT' })}
    onDecrement={() => store.dispatch({ type: 'DECREMENT' })}
  />,
  rootEl
 )

 render()
 store.subscribe(render)
diff --git a/115-vue.js b/115-vue.js
 new Vue({
  data: { count: 0 },
  render (h) {
    return h('p', [
      this.count,
      h('button', { on: { click: () => { this.count++ }}}, '+'),
      h('button', { on: { click: () => { this.count-- }}}, '-')
    ])
  }
 }).$mount('#app')
diff --git a/116-compo.js b/116-compo.js
 import {html,css,createStore,component,withProp,withStore,withStyle,withMarkup} from "compo-lib";

 createStore((state, action) => {
  switch (action.type) {
    case "ADD": return state + 1;
    case "SUB": return state - 1;
    default:    return state;
  }
 }, 0);

 component(
  "my-counter-label",
  withProp("value"),
  withStyle(
    ({ value }) => css`
      :host {
        color: ${value < 1 ? "red" : "black"};
      }
    `
  )
 );

 component(
  "my-counter",
  withStore(({ getState, dispatch }) => ({
    counter: getState(),
    add: () => dispatch({ type: "ADD" }),
    sub: () => dispatch({ type: "SUB" })
  })),
  withMarkup(
    ({ counter, add, sub }) => html`
    <div>
      <my-counter-label value=${counter}>${counter}</my-counter-label>
      <button onclick=${add}>+</button>
      <button onclick=${sub}>-</button>
    </div>
  `
  )
 );
diff --git a/117-calmm.elm b/117-calmm.elm
 import Dom exposing (..)
 import Lens exposing (Lens)

 counter : Lens m Int -> Html m
 counter value =
  div []
    [ button [onClick (Lens.modify value ((+) -1))] [text "-"]
    , textAs toString value
    , button [onClick (Lens.modify value ((+)  1))] [text "+"]
  ]
diff --git a/118-clojurescript.cljs b/118-clojurescript.cljs
 (def state (atom 0))

 (rum/defc view < rum/reactive [state]
  [:div
    [:button {:on-click #(swap! state dec)} "-"]
    [:span (rum/react state)]
    [:button {:on-click #(swap! state inc)} "+"]])

 (run/mount (view state)
                    (js/document.getElementById "app"))
diff --git a/119-calmm.js b/119-calmm.js
 import * as R from "ramda"
 import * as U from "karet.util"
 import React from "karet"
 import ReactDOM from "react-dom"

 const Counter = ({value}) =>
  <div>
    <div>Count: {value}</div>
    <button onClick={() => value.modify(R.add(+1))}>+</button>
    <button onClick={() => value.modify(R.add(-1))}>-</button>
  </div>

 ReactDOM.render(<Counter value={U.atom(0)}/>, document.getElementById("app"))
diff --git a/120-purescript.purs b/120-purescript.purs
 data Action = Increment | Decrement

 type State = Int
 update :: Action -> State -> State
 update Increment count = count + 1
 update Decrement count = count - 1

 view :: State -> Html Action
 view count =
  div
    []
    [ button [ onClick (const Increment) ] [ text "Increment" ]
    , span [] [ text (show count) ]
    , button [ onClick (const Decrement) ] [ text "Decrement" ]
    ]       
diff --git a/121-svetle.html b/121-svetle.html
 <p>
  {{ count }}
  <button on:click="set({count: count + 1})">+</button>
  <button on:click="set({count: count - 1})">-</button>
 </p>

 <script>
  export default {
    data() {
      return {
        count: 0
      }
    }
  }
 </script>
diff --git a/122-focal.tsx b/122-focal.tsx
 import * as React from 'react'
 import * as ReactDOM from 'react-dom'
 import { Atom, F } from '@grammarly/focal'

 const Counter = (props: { count: Atom<number> }) =>
  <F.div>
    You have clicked this button {props.count} time(s).
    <button onClick={() => props.count.modify(x => x + 1)}>Click again?</button>
  </F.div>

 const App = (props: { state: Atom<{ count: number }> }) =>
  <div>
    <Counter count={ props.state.lens(x => x.count)} />
  </div>

 ReactDOM.render(<App state={Atom.create({ count: 0 })} />,  document.getElementById('app'))
diff --git a/123-cyclow.js b/123-cyclow.js
 import {Block, run} from 'cyclow'

 const Counter = () => Block({
  on: {
    'in.init':  () => counter => 0,
    'dom.increment': () => counter => counter + 1,
    'dom.decrement': () => counter => counter - 1
  },
  view: counter => ({tag:'div#app', content: [
    {tag: 'div.counter', content: `${counter}`},
    {tag: 'div.buttons', content: [
      {tag: 'button', on: {click: 'decrement'}, content: '-'},
      {tag: 'button', on: {click: 'increment'}, content: '+'}
    ]}
  ]})
 })

 run(Counter, {target: 'app'})
diff --git a/124-react-easy-state.js b/124-react-easy-state.js
 import React from 'react'
 import { store, view } from 'react-easy-state'

 const counter = store({
  num: 0,
  incr: () => counter.num++,
  decr: () => counter.num--
 })

 export default view(() => <>
                           <div>Count: {value}</div>
                           <button onClick={counter.incr}>+</button>
                           <button onClick={counter.decr}>-</button>
                          </>)
diff --git a/125-recompose.js b/125-recompose.js
 import { withState } from `recompose`

 const enhance = withState('counter', 'setCounter', 0)

 const Counter = enhance(({ counter, setCounter }) =>
  <div>
    Count: {counter}
    <button onClick={() => setCounter(n => n + 1)}>Increment</button>
    <button onClick={() => setCounter(n => n - 1)}>Decrement</button>
  </div>
 )
diff --git a/126-react-hooks.js b/126-react-hooks.js
 import React, { useState } from "react"
 import ReactDOM from "react-dom"

 function App() {
  const [count, setCount] = useState(0)

  return (
    <p>
      {count}
      <button onClick={() => setCount(count + 1)}>+</button>
      <button onClick={() => setCount(count - 1)}>-</button>
    </p>
  )
 }

 ReactDOM.render(<App />, document.getElementById("root"))
diff --git a/127-lit-html.js b/127-lit-html.js
  import { html } from 'https://unpkg.com/lit-html/lit-html.js';
  import { component, useState } from 'https://unpkg.com/@matthewp/haunted/haunted.js';

  function Counter() {
    const [count, setCount] = useState(0);

    return html`
      <div id="count">${count}</div>
      <button type="button" @click=${() => setCount(count + 1)}>Increment</button>
      <button type="button" @click=${() => setCount(count - 1)}>Decrement</button>
    `;
  }

  customElements.define('my-counter', component(Counter));
diff --git a/128-hooks-as-a-return-val.js b/128-hooks-as-a-return-val.js
 import { useState } from '...'

 const App = () =>
  useState(0)
    .map(([count, setCount]) => (
      <div>
        {count}
        <button onClick={() => setCount(count + 1)}>+</button>
        <button onClick={() => setCount(count - 1)}>-</button>
      </div>
    ))

 render(<App />, main)
diff --git a/129-rx-observable.js b/129-rx-observable.js
 import React from "react";
 import ReactDOM from "react-dom";
 import { Observable } from "rxjs";
 import { map } from 'rxjs/operators';
 import { observeComponent } from "./observe";

 function state(defaultState) {
  return new Observable((observer) => {
    let state;

    function setState(newState) {
      if (typeof newState === 'function') {
        newState = newState(state);
      } 
      observer.next([state = newState, setState]);
    }
    setState(defaultState);
  });
 }

 const App = observeComponent(() => (
  state(0).pipe(
    map(([count, updateCount]) => (
      <div className="App">
        <h2> {count} </h2>
        <button onClick={() => updateCount(c => c - 1)}>Decrement</button>
        <button onClick={() => updateCount(c => c + 1)}>Increment</button>
      </div>
    ))
  )
 ));

 const rootElement = document.getElementById("root");
 ReactDOM.render(<App />, rootElement);
diff --git a/130-useImmerReduserHook.js b/130-useImmerReduserHook.js
 const initialState = { count: 0 };

 function reducer(draft, action) {
  switch (action.type) {
    case "increment": return void draft.count++;
    case "decrement": return void draft.count--;
  }
 }

 function Counter() {
  const [state, dispatch] = useImmerReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({ type: "increment" })}>+</button>
      <button onClick={() => dispatch({ type: "decrement" })}>-</button>
    </>
  );
 }
diff --git a/131-omi.js b/131-omi.js
 import { define, render } from 'omi'

 define('my-counter', function() {
  const [count, setCount] = this.useData(0)
  this.useCss(`button{ color: red; }`)

  return (
    <div>
      <button onClick={() => setCount(count - 1)}>-</button>
      <span>{count}</span>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  )
 })

 render(<my-counter />, 'body')
diff --git a/132-react-basic.purs b/132-react-basic.purs
 module Counter where

 import Prelude
 import React.Basic (Component, JSX, StateUpdate(..), capture_, createComponent, make)
 import React.Basic.DOM as R

 component :: Component Props
 component = createComponent "Counter"

 type Props = { label :: String }

 data Action = Increment

 counter :: Props -> JSX
 counter = make component { initialState, update, render }
  where
    initialState = { counter: 0 }

    update self = case _ of
      Increment -> Update self.state { counter = self.state.counter + 1 }

    render self =
      R.button
        { onClick: capture_ self Increment
        , children: [ R.text (self.props.label <> ": " <> show self.state.counter) ]
        }
diff --git a/133-fantasy-land.js b/133-fantasy-land.js
 const App = () =>
  useState(0)
    .map(([count, setCount]) => (
      <div>
        {count}
        <button onClick={() => setCount(count + 1)}>
          +
        </button>
      </div>
    ))

 render(<App />, main)
diff --git a/134-apprun.js b/134-apprun.js
 const state = 0;

 const view = state => {
  return `<div>
    <h1>${state}</h1>
    <button onclick='app.run("-1")'>-1</button>
    <button onclick='app.run("+1")'>+1</button>
  </div>`;
 };

 const update = {
  '+1': state => state + 1,
  '-1': state => state - 1
 };

 app.start('my-app', state, view, update);
diff --git a/135-more-hooks.js b/135-more-hooks.js
 import { StoreProvider, useStore } from './store'

 const Counter = () => {
  const [state, setState] = useStore();

  const increment = () =>
    setState(old => ({...old, count: old.count + 1}));

  const decrement = () =>
    setState(old => ({...old, count: old.count - 1}));

  return (
    <div>
      <button onClick={decrement}>-</button>
      {state.count}
      <button onClick={increment}>+</button>
    </div>
  );
 };

 const App = () => {
  return (
    <StoreProvider initialValue={{ count: 0 }}>
      <Counter />
    </StoreProvider>
  );
 };
diff --git a/136-actions-as-hooks.js b/136-actions-as-hooks.js
 const useIncrement = () => {
  const [state, setState] = useStore();

  return () =>
    setState(old => ({
      ...old,
      count: old.count + 1
    }));
 }

 const useDecrement = () => {
  const [state, setState] = useStore();

  return () =>
    setState(old => ({
      ...old,
      count: old.count + 1
    }));
 }

 const Counter = () => {
  const [{ count }] = useStore()
  const increment = useIncrement()
  const decrement = useDecrement()

  return (
    <div>
      <button onClick={decrement}>-</button>
      {count}
      <button onClick={increment}>+</button>
    </div>
  );
 };
diff --git a/137-constate.js b/137-constate.js
 import React, { useState, useContext } from "react";
 import ReactDOM from "react-dom";
 import createContainer from "constate";

 function useCounter() {
  const [count, setCount] = useState(0);
  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);
  return { count, increment, decrement };
 }

 const CounterContainer = createContainer(useCounter);

 function ButtonIncr() {
  const { increment } = useContext(CounterContainer.Context);
  return <button onClick={increment}>+</button>;
 }
 function ButtonDecr() {
  const { decrement } = useContext(CounterContainer.Context);
  return <button onClick={decrement}>-</button>;
 }

 function Count() {
  const { count } = useContext(CounterContainer.Context);
  return <span>{count}</span>;
 }

 const Counter = () =>
    <CounterContainer.Provider>
      <Count />
      <ButtonIncr />
      <ButtonDecr />
    </CounterContainer.Provider>


 const rootElement = document.getElementById("root");
 ReactDOM.render(<Counter />, rootElement);
diff --git a/137-htm.js b/137-htm.js
 const { useState } = React;
 const html = htm.bind(React.createElement);

 const App = () => {
  const [count, setCount] = useState(0);
  const increment = () => setCount(count+1);
  const decrement = () => setCount(count-1);

  return html`
    <div class="app">
        <button onClick=${decrement}> - </button>
        <strong> ${count} </strong>
        <button onClick=${increment}> + </button>
      </div>
    </div>
  `;
 };

 ReactDOM.render(html`<${App} />`, document.getElementById('root'));
diff --git a/138-useReducer.js b/138-useReducer.js
 const initialState = { count: 0 };

 function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
  }
 }

 function Counter() {
  const [ state, dispatch ] = useReducer(reducer, initialState);
  const increment = () => dispatch({ type: 'increment' });
  const decrement = () => dispatch({ type: 'decrement' });
  return (
    <>
      Count: {state.count}
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </>
  );
 }
diff --git a/139-ivy.js b/139-ivy.js
 import { _, component, invalidate, render } from "ivi";
 import { h1 } from "ivi-html";

 const Counter = component((c) => {
  let counter = 0;

  const ticker = useEffect(c, (interval) => {
    const id = setInterval(() => {
      counter++;
      invalidate(c);
    }, interval);
    return () => clearInterval(id);
  });

  return (interval) => (
    ticker(interval),

    div(_, _, `Counter: ${counter}`),
  );
 });

 render(
  Counter(1000),
  document.getElementById("app"),
 );
diff --git a/140-haunted.html b/140-haunted.html
 <!doctype html>
 <html lang="en">

 <my-counter></my-counter>

 <script type="module">
  import { html } from 'https://unpkg.com/lit-html/lit-html.js';
  import { component, useState } from 'https://unpkg.com/haunted/haunted.js';

  function Counter() {
    const [count, setCount] = useState(0);

    return html`
      <div id="count">${count}</div>
      <button type="button" @click=${() => setCount(count + 1)}>Increment</button>
      <button type="button" @click=${() => setCount(count - 1)}>Decrement</button>
    `;
  }

  customElements.define('my-counter', component(Counter));
 </script>
diff --git a/141-storeon.js b/141-storeon.js
 import createStore from 'storeon'
 import { StoreContext, connect } from 'storeon/react' 

 let increment = store => {
  store.on('@init', () => ({ count: 0 }))
  store.on('inc', ({ count }) => ({ count: count + 1 }))
 }
 const store = createStore([increment])

 const Counter = connect('count', React.memo(
  ({ count, dispatch }) => 
  <>
    {count}
    <button onClick={() => dispatch('inc')} />
    <button onClick={() => dispatch('dec')} />
  </>
 )

 render(
  <StoreContext.Provider value={store}>
    <Counter/>
  </StoreContext.Provider>,
  document.body
 )
	import { h, app } from "hyperapp"

	app({
	init: 0,
	view: state => (
	<main>
	<h1>{state}</h1>
	<button onclick={state => state - 1}>-</button>
	<button onclick={state => state + 1}>+</button>
	</main>
	),
	container: document.body
	})
	import { NumberValue } from 'react-values'

	const Counter = () => (
	<NumberValue defaultValue={0}>
	{({ value, increment, decrement }) => (
	<button onClick={() => increment()}>+1</button>
	<span>{value}</span>
	<button onClick={() => decrement()}>-1</button>
	)}
	</NumberValue>)
	m.mount(document.body, {
	count : 0,
	view : (vnode) => m("div",
	m("div", "Count: ", vnode.state.count),
	m("button", { onclick : () => vnode.state.count++ }, "+"),
	m("button", { onclick : () => vnode.state.count-- }, "-")
	)
	})
	import { Provider, Subscribe } from 'react-contextual'

	const store = {
	count: 0,
	up: () => state => ({ count: state.count + 1 }),
	down: () => state => ({ count: state.count - 1 }),
	}

	const App = () => (
	<Provider {...store}>
	<Subscribe>
	{props => (
	<div>
	<h1>{props.count}</h1>
	<button onClick={props.up}>Up</button>
	<button onClick={props.down}>Down</button>
	</div>
	)}
	</Subscribe>
	</Provider>
	)
	import React from 'react'

	export const init = count => count

	const Action = {
	Increment: x => x + 1,
	Decrement: x => x - 1
	}

	export const update = (action, model) => action(model)

	export const view = (signal, model) => (
	<div>
	<button onClick={signal(Action.Decrement)}>-</button>
	<div>{model}</div>
	<button onClick={signal(Action.Increment)}>+</button>
	</div>
	)

	export default {init, update, view}
	import { observable } from 'mobx';
	import { observer } from 'mobx-react';
	import React from 'react'
	import {render} from 'react-dom'

	const state = { n: 0 };
	const incr = () => state.n++;
	const decr = () => state.n--;

	const view = observer(() =>
	<div>
	<h1>{state.n}</h1>
	<button onclick={incr}>+</button>
	<button onclick={decr}>-</button>
	</div>)

	render(
	<view />,
	document.querySelector('#app')
	);
	import xs from 'xstream';
	import Cycle from '@cycle/xstream-run';
	import {div, button, p, makeDOMDriver} from '@cycle/dom';

	function main(sources) {
	let action$ = xs.merge(
	sources.DOM.select('.decrement').events('click').map(ev => -1),
	sources.DOM.select('.increment').events('click').map(ev => +1)
	);

	let count$ = action$.fold((x,y) => x + y, 0);

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

	Cycle.run(main, {
	DOM: makeDOMDriver('#main-container')
	});
	import React, { Component, PropTypes } from 'react'
	import ReactDOM from 'react-dom'

	const increment = ({ count }) => ({ count: count + 1 });
	const decrement = ({ count }) => ({ count: count - 1 });

	class Counter extends React.Component {
	constructor(props) {
	super(props);
	this.state = { count: 0 };
	}

	render() {
	return (
	<p>
	{this.state.count}
	<button onClick={() => this.setState(increment)}>+</button>
	<button onClick={() => this.setState(decrement)}>-</button>
	</p>
	);
	}
	}

	ReactDOM.render(<Counter />, document.getElementById('root'));
	var html = require('./html')
	var app = require('./')()

	app.model(function (state, bus) {
	state.count = 0
	bus.on('increment', function (count) {
	state.count += count
	bus.emit('render')
	})
	})
	app.router([ '/', mainView ])
	app.mount('body')

	function mainView (state, emit) {
	return html`
	<body>
	<h1>count is ${state.count}</h1>
	<button onclick=${onIncr}>+</button>
	<button onclick=${onDecr}>-</button>
	</body>
	`
	function onIncr() {
	emit('increment', 1)
	}
	function onDecr() {
	emit('increment', -1)
	}
	}
	const choo = require('../../')
	const html = require('../../html')

	const app = choo()
	app.model({
	state: {
	counter: 0
	},
	reducers: {
	increment: (data, state) => ({ counter: state.counter + 1 }),
	decrement: (data, state) => ({ counter: state.counter - 1 })
	}
	})

	const mainView = (state, prev, send) => {
	return html`
	<main class="app">
	<button onclick=${() => send('increment')}>Increment</button>
	<button onclick=${() => send('decrement')}>Decrement</button>
	<p>state.counter</p>
	</main>
	}

	app.router((route) => [
	route('/', mainView)
	])

	document.body.appendChild(app.start())