srdjan/100+ different counter apps...

## 100+ different counter apps...
100+ different js counter apps...

## 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
})

## 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>
)

## 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-- }, "-")
    )
})

## 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>
)

## 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}

## 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')
);

## 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')
});

## 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'));

## 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)
  }
}

## 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())

## 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 "+" ]
]

## 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

## 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>
  )
}

## 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)

## 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')

## 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>
  `
  )
);

## 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 "+"]
  ]

## 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"))

## 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"))

## 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" ]
    ]

## 121-svelte.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>

## 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'))

## 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'})

## 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>
                          </>)

## 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>
)

## 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"))

## 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));

## 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)

## 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);

## 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>
    </>
  );
}

## 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')

## 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) ]
        }

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

render(<App />, main)

## 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);

## 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>
  );
};

## 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>
  );
};

## 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);

## 138-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'));

## 139-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>
    </>
  );
}

## 140-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"),
);

## 141-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>

## 142-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
)

## 143-fastdom.ts
import { Component, FastDomNode, createComponent, fdObject, fdValue } from "../../src";

export function createCounter() {
    return createComponent(Counter);
}

class Counter extends Component {
    width = 100;

    reactive = {
        counter: fdValue(0),
    }

    get counter() {
        return this.reactive.counter;
    }

    onClick = () => {
        this.counter.value += 1;
    }

    template: FastDomNode = {
        tag: "button",
        textValue: this.counter,
        listeners: {
            click: this.onClick
        }
    }

## 144-reason-react.re
[@react.component]
let counter = () => {
  <div>
     {ReasonReact.string("Count: " ++ string_of_int(state.count)}
     <>
       <Button label="Increment" onClick={_event => state.count++)} />
       <Button label="Decrement" onClick={_event => state.count--} />
     </>
   </div>;
};

## 145-effector.js
import React from "react";
import ReactDOM from "react-dom";
import { createStore, createEvent, createApi } from "effector";
import { useStore } from "effector-react";

const $counter = createStore(0)
const increment = createEvent();
const decrement = createEvent();

$counter.on(increment, state => state + 1)
$counter.on(decrement, state => state - 1)

function Counter () {
  const counter = useStore($counter)
  return (
    <>
      <div>{counter}</div>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </>
  )
};

ReactDOM.render(<Counter />, document.body);

## 146-unsteated-next.js
import React, { useState } from "react"
import { createContainer } from "unstated-next"
import { render } from "react-dom"

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

let Counter = createContainer(useCounter)

function CounterDisplay() {
  let counter = Counter.useContainer()
  return (
    <div>
      <button onClick={counter.decrement}>-</button>
      <span>{counter.count}</span>
      <button onClick={counter.increment}>+</button>
    </div>
  )
}

function App() {
  return (
    <Counter.Provider>
      <CounterDisplay />
      <CounterDisplay />
    </Counter.Provider>
  )
}

render(<App />, document.getElementById("root"))

## 147-hybrids.js
import { html, define } from 'hybrids';

export function increaseCount(host) => host.count += 1
export function decreaseCount(host) => host.count -= 1

export const SimpleCounter = {
  count: 0,
  render: ({ count }) => html`
    Count: ${count}
    <button onclick="${increaseCount}"/>
    <button onclick="${decreaseCount}"/>
  `,
};

define('simple-counter', SimpleCounter);

## 148-hybrids-with-redux.js
import { html } from 'hybrids';
import store, { increment, decrement } from './redux';

const connect = (store, mapState) => ({
  get: mapState ? () => mapState(store.getState()) : () => store.getState(),
  connect: (host, key, invalidate) => store.subscribe(invalidate),
});

const onInc = ({ offset }) => store.dispatch(increment(offset));
const onDec = ({ offset }) => store.dispatch(decrement(offset));

export default {
  count: connect(store, (state) => state.count),
  offset: 1,
  render: ({ count, offset }) => html`
    <style>:host { display: block; }</style>

    <button onclick="${onInc}">+${offset}</button>
    <button onclick="${onDec}">-${offset}</button>

    <p>Count: ${count}</p>
  `,
};

## 149-hybrids-with-react.js
import { define } from 'hybrids';
import React from 'react';
import ReactDOM from 'react-dom';
import Counter from './Counter';

function reactify(fn) {
  return (host) => {
    const Component = fn(host);
    return (host, target) => ReactDOM.render(Component, target);
  }
}

const ReactCounter = {
  count: 0,
  render: reactify(({ count }) =>
    <Counter count={count} />
  ),
};

define('react-counter', ReactCounter);

## 150-ReComponent.js
import React from "react";
import { ReComponent, Update } from "react-recomponent";

class Counter extends ReComponent {
  constructor() {
    super();
    this.handleClick = this.createSender("CLICK");
    this.state = { count: 0 };
  }

  static reducer(action, state) {
    switch (action.type) {
      case "CLICK":
        return Update({ count: state.count + 1 });
    }
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        You’ve clicked this {this.state.count} times(s)
      </button>
    );
  }
}

## 151-globalhook.js
import React from 'react';
import { createGlobalState } from 'react-hooks-global-state';

const initialState = { counter: 0 };
const { GlobalStateProvider, useGlobalState } = createGlobalState(initialState);

const Counter = () => {
  const [value, update] = useGlobalState('counter');
  return (
    <div>
      <span>Counter: {value}</span>
      <button onClick={() => update(v => v + 1)}>+1</button>
      <button onClick={() => update(v => v - 1)}>-1</button>
    </div>
  );
};

const App = () => (
  <GlobalStateProvider>
    <Counter />
    <Counter />
  </GlobalStateProvider>
);

## 152-litedom.html
<script type="module">
  import Litedom from '//unpkg.com/litedom';

  Litedom({
    el: '#counterWidget',
    data: {
      count: 0
    },
    up(event) {
      this.data.count++;
    },
    down(event) {
      this.data.count--;
    }
  });
</script>

<div id="counterWidget">
  <div>Count: {this.count}</div>
  <button @click="down">DOWN</button>
  <button @click="up">UP</button>
</div>


## 153-react-tracked.js
import React, { useReducer } from 'react';
import ReactDOM from 'react-dom';

import { Provider, useTracked } from 'react-tracked';

const initialState = {
  counter: 0
};

const reducer = (state, action) => {
  switch (action.type) {
    case 'increment': return { ...state, counter: state.counter + 1 };
    case 'decrement': return { ...state, counter: state.counter - 1 };
    default: throw new Error(`unknown action type: ${action.type}`);
  }
};

const useValue = () => useReducer(reducer, initialState);

const Counter = () => {
  const [state, dispatch] = useTracked();
  return (
    <div>
      <span>Count:{state.counter}</span>
      <button type="button" onClick={() => dispatch({ type: 'increment' })}>+1</button>
      <button type="button" onClick={() => dispatch({ type: 'decrement' })}>-1</button>
    </div>
  );
};

const App = () => (
  <Provider useValue={useValue}>
    <Counter />
  </Provider>
);

ReactDOM.render(<App />, document.getElementById('app'));

## 154-react-tracked-and-immer.js
/* eslint-env browser */

import React, { useState, StrictMode } from "react";
import ReactDOM from "react-dom";

import { Provider, useTracked } from "react-tracked";
import produce from "immer";

const useValue = () =>
  useState({
    count: 0
});

const Counter = () => {
  const [state, setState] = useTracked();
  const increment = () => {
    setState(
      produce(draft => {
        draft.count += 1;
      })
    );
  };
  const decrement = () => {
    setState(
      produce(draft => {
        draft.count -= 1;
      })
    );
  };
  return (
    <div>
      <div>Count: {state.count}</div>
      <button type="button" onClick={increment}>+</button>
      <button type="button" onClick={decrement}>-</button>
    </div>
  );
};

const App = () => (
  <StrictMode>
    <Provider useValue={useValue}>
      <Counter />
    </Provider>
  </StrictMode>
);

ReactDOM.unstable_createRoot(document.getElementById("app")).render(<App />);

## 155-reactive-react-redux.js
import React from 'react';
import { createStore } from 'redux';
import {
  Provider,
  useDispatch,
  useTrackedState,
} from 'reactive-react-redux';

const initialState = {
  count: 0
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'increment': return { ...state, count: state.count + 1 };
    case 'decrement': return { ...state, count: state.count - 1 };
    default: return state;
  }
};

const store = createStore(reducer);

const Counter = () => {
  const state = useTrackedState();
  const dispatch = useDispatch();
  return (
    <div>
      <span>Count: {state.count}</span>
      <button type="button" onClick={() => dispatch({ type: 'increment' })}>+1</button>
      <button type="button" onClick={() => dispatch({ type: 'decrement' })}>-1</button>
    </div>
  );
};

const App = () => (
  <Provider store={store}>
    <Counter />
  </Provider>
);

## 156-react-hookstore.js
import React from "react";
import ReactDOM from "react-dom";
import { createStore, useStore } from "react-hookstore";

createStore("counter", 0);

export function Counter() {
  const [state, setState] = useStore("counter");

  return (
    <div>
      <h2>Count: {state}</h2>
      <button type="button" onClick={() => setState(state + 1)}>Inc</button>
      <button type="button" onClick={() => setState(state - 1)}>Dec</button>
    </div>
  );
}
ReactDOM.render(
  <React.Fragment>
    <Counter />
  </React.Fragment>,
  document.querySelector("#root")
);

## 157-reusable.js
import React from "react";
import ReactDOM from "react-dom";
import {ReusableProvider, createStore} from 'reusable';
import {useState} from 'react';

const useCounter = createStore(() => useState(0));

export function Counter() {
  const [counter] = useCounter();

  return (
    <div>
        {counter}
    </div>
  );
}

function App() {
  return (
    <ReusableProvider>
      <Counter/>
    </ReusableProvider>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

## 158-zustand.js
import create from 'zustand'

const [useStore] = create(set=> ({
  count: 1,
  inc: () => set(state => ({ count: state.count + 1 })),
  dec: () => set(state => ({ count: state.count - 1 }))
}))

function Counter() {
  const {count, inc, dec} = useStore()

  return (
    <>
      <h1>{count}</h1>
      <button onClick={inc}>inc</button>
      <button onClick={dec}>dec</button>
    </>
  )
}

## 159-reactn.js
import React, { useDispatch } from 'reactn'

const incr = (count, action) => count + action.value
const decr = (count, action) => count - action.value

const MyComponent = () => {
  const increment = useDispatch(incr, 'count')
  const decrement = useDispatch(decr, 'count')

  return (
    <div>
      <button onClick={() => increment({ value: 1 })}>incr</button>
      <button onClick={() => decrement({ value: 1 })}>decr</button>
    </div>
  )
}

export default MyComponent

## 160-lighterhtml.js
import haunted, { useState } from 'https://unpkg.com/haunted/core.js?module';
import { html, render } from 'https://unpkg.com/lighterhtml?module';

const { component } = haunted({
  render: (what, where) => render(where, () => what)
});

function Counter() {
  let [count, set] = useState(0);
  return html`
    <h1>Counter</h1>
    <p>count: <strong>${count}</strong></p>
    <button onclick=${() => set(count + 1)} type="button">Increment</button>
    <button onclick=${() => set(count - 1)} type="button">Decrement</button>
  `;
}

customElements.define('my-counter', component(Counter));

## 161-angular.js
(function (angular) {

	// service
	var CounterService = (function () {

		function CounterService() {
		};
		CounterService.prototype.count = function (object, property, from, to, duration, effect, step, finish) {
			var target = {};

			// stop previous animation
			$(object).stop(true, true);
			object[property] = parseFloat(from || 0);
			target[property] = parseFloat(to || 0);

			if (object[property] == target[property]) return;

			$(object).animate(target, {
				duration: duration,
				easing: effect,
				step: step
			}).promise().done(function () {
				if (angular.isFunction(finish)) finish();
			});
		};

		return CounterService;
	})();

	// directive
	var CounterDirective = (function () {

		function CounterDirective(counter, timeout) {
			this.restrict = 'EAC';
			this.scope = {
				to:       '=',
				value:    '=',
				effect:   '=?',
				duration: '=?',
				finish:   '&?'
			};
			$counter = counter;
			$timeout = timeout;
		};
		CounterDirective.prototype.$inject = ['$counter', '$timeout'];
		CounterDirective.prototype.link = function ($scope, $element, $attrs, $controller) {
			var defaults = {
					effect:   'linear',
					duration: 1000
				};

			if (!angular.isDefined($scope.to))
				throw new 'Angular Counter: attribute `to` is undefined';

			angular.forEach(defaults, function (value, key) {
				if (!angular.isDefined($scope[key])) $scope[key] = defaults[key];
			});

			$scope.step = function (value) {
				$timeout(function () {
					$scope.$apply(function () {
						$scope.value = value;
					});
				});
			};

			$scope.$watch('to', function () {
				$counter.count($scope, 'value', $scope.value, $scope.to, $scope.duration, $scope.effect, $scope.step, $scope.finish);
			});
		};

		return CounterDirective;
	})();

	angular
		.module('counter', [])
		.service('$counter', function () {
			return new CounterService();
		})
		.directive('counter', ['$counter', '$timeout', function ($counter, $timeout) {
			return new CounterDirective($counter, $timeout);
		}]);

## 162-hyperapp-v2-in-html.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script type="module">
        import { h, app } from "https://unpkg.com/hyperapp"

        app({
        init: 0,
        view: state =>
        h("div", {}, [
        h("h1", {}, state),
        h("button", { onClick: state => state - 1 }, "-"),
        h("button", { onClick: state => state + 1 }, "+")
        ]),
        node: document.getElementById("app")
        })
    </script>
    <div class="app"></div>
</body>
</html>

## 163-purescript-turbine.purs
counter id = component \on -> do
  count <- accum (+) 0 on.change
  ( H.div {} (
      H.text "Counter " </>
      H.span {} (H.textB $ map show count) </>
      H.button {} (H.text "+" ) `use` (\o -> { change: o.click $> 1 }) </>
      H.button {} (H.text "-" ) `use` (\o -> { change: o.click $> -1 })
    )
  ) `output` {}

main = runComponent "#mount" (counter 0)

## 164-bitstate.js
import React from 'react'
import { useBistate, useMutate } from 'bistate/react'

export default function Counter() {
  let state = useBistate({ count: 0 })
  let incre = useMutate(() => {
    state.count += 1
  })

  let decre = useMutate(() => {
    state.count -= 1
  })

  return (
    <div>
      <button onClick={incre}>+1</button>
      {state.count}
      <button onClick={decre}>-1</button>
    </div>
  )
}

## 165-effe-ts.js
import * as React from 'react'
import * as ReactDOM from 'react-dom'
import { html, platform, state } from 'effe-ts'

type Action = { type: 'Increase' } | { type: 'Decrease' }

type Model = number

const init: state.State<Model> = state.of(0)

function update(action: Action, model: Model): state.State<Model> {
  switch (action.type) {
    case 'Increase':
      return state.of(model + 1)
    case 'Decrease':
      return state.of(model - 1)
  }
}

const view = (model: Model) => (dispatch: platform.Dispatch<Action>) => (
  <>
    <span>Counter: {model}</span>
    <button onClick={() => dispatch({ type: 'Increase' })}>+</button>
    <button onClick={() => dispatch({ type: 'Decrease' })}>-</button>
  </>
)

const app = html.program(init, update, view)

html.run(app, dom => ReactDOM.render(dom, document.getElementById('app')!), {})

## 166-flowponent.js
import { render } from "preact";
import flowponent from "flowponent";

const App = flowponent(function*() {
  let count = 0;

  for (;;) {
    count += yield step => (
      <div>
        <div>current value: {count}</div>
        <button onClick={() => step(1)}>+1</button>
        <button onClick={() => step(-1)}>-1</button>
      </div>
    );
  }
});

render(<App />, document.getElementById("root"));

## 167-xreact.js
const { X, x } = xreact
function xmount(component, dom) { ReactDOM.render(React.createFactory(X)({}, component), dom) }

const CounterView = ({actions, count}) => (
  <div>
    <button onClick={actions.dec}>-</button>
    <span>{count}</span>
    <button onClick={actions.inc}>+</button>
  </div>
)

CounterView.defaultProps = {count: 0}

const plan = (intent$) => {
  return {
    update$: intent$.map(intent => {
      switch (intent.type) {
        case 'inc':
          return state => ({ count: state.count + 1 });
        case 'dec':
          return state => ({ count: state.count - 1 });
        default:
          return _ => _;
      }
    }),
    actions: {
      inc: () => ({ type: 'inc' }),
      dec: () => ({ type: 'dec' })
    }
  }
}

const Counter = x(plan)(CounterView);

xmount(<Counter/>,
  document.getElementById('app')
);

## 168-xreact.ts
const { X, x } = xreact
function xmount(component, dom) { ReactDOM.render(React.createFactory(X)({}, component), dom) }

// Intent union type
interface Inc {
  kind: 'inc'
}
interface Dec {
  kind: 'dec'
}
type Intent = Inc | Dec

// State
interface CounterProps {
  count: number
  actions: Actions<Intent>
}


const CounterView: React.SFC<CounterProps> = ({actions, count}) => (
  <div>
    <button onClick={actions.dec}>-</button>
    <span>{count}</span>
    <button onClick={actions.inc}>+</button>
  </div>
)

CounterView.defaultProps = {count: 0}

const plan = (intent$) => {
  return {
    update$: intent$.map(intent => {
      // now the switch is Type Safe
      switch (intent.kind) {
        case 'inc':
          return state => ({ count: state.count + 1 });
        case 'dec':
          return state => ({ count: state.count - 1 });
        default:
          return _ => _;
      }
    }),
    actions: {
      inc: () => ({ kind: 'inc' } as Inc),
      dec: () => ({ kind: 'dec' } as Dec)
    }
  }
}

const Counter = x(plan)(CounterView);

xmount(<Counter/>,
  document.getElementById('app')
);

## 169-uhtml.js
import {render, html} from 'https://unpkg.com/uhtml?module';
import {define, useState} from 'https://unpkg.com/hooked-elements?module';

define('my-counter', element => {
  const [count, update] = useState(0);
  const {value, dec, inc} = render(element, html`
    <button class="large btn" name="dec">-</button>
    <span class="large value" name="value"></span>
    <button class="large btn" name="inc">+</button>
  `);
  value.textContent = count;
  dec.onclick = () => update(count - 1);
  inc.onclick = () => update(count + 1);
});

## 170-apprun.html
<html>
<head>
  <meta charset="utf-8">
  <title>Counter</title>
</head>
<body>
  <script src="https://unpkg.com/apprun/dist/apprun-html.js"></script>
  <script>
    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>`;
	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())