dinh · June 16, 2020 12:59 · Jun 14, 2020 · Jun 9, 2020 · Jun 7, 2020 · Jun 6, 2020
diff --git a/208.hawk.js b/208.hawk.js
@@ -0,0 +1,45 @@
+import React from 'react';
+import { hawk, hawkeye, useHawkState, useHawkSetState } from 'react-hawk';
+
+const counterState = hawk({
+  key: 'counter',
+  default: 0
+});
+
+const isEvenState = hawkeye({
+  key: 'isEven',
+  get: ({ get }) => {
+    const count = get(counterState)
+    return Boolean(count % 2) ? 'odd' : 'even'
+  }
+})
+
+const useIncrease = () => {
+  const setCounter = useHawkSetState(counterState)
+  const increase = (n = 1) => {
+    setCounter(count => count + n)
+  }
+  return increase
+}
+
+const useDecrease = () => {
+  const setCounter = useHawkSetState(counterState)
+  const decrease = (n = 1) => {
+    setCounter(count => count - n)
+  }
+  return decrease
+}
+
+export const Counter = () => {
+  const count = useHawkState(counterState)
+  const even = useHawkState(isEvenState)
+  const decrease = useDecrease()
+  const increase = useIncrease()
+  return (
+    <>
+      <button onClick={() => decrease()}>-</button>
+      {count} is {even}
+      <button onClick={() => increase()}>+</button>
+    </>
+  )
+}
diff --git a/207-solid.js b/207-solid.js
@@ -0,0 +1,12 @@
+import { createState } from "solid-js";
+
+const Counter = () => {
+  const [state, setState] = createState({ counter: 0 });
+  return <div>
+           {state.counter}
+           <button type="button" onClick={() => setState({ counter: state.counter + 1 }}>+1</button>
+           <button type="button" onClick={() => setState({ counter: state.counter - 1 }}>-1</button>
+         </div>;
+};
+
+render(() => createComponent(Counter, document.getElementById("app"));
diff --git a/100+different counter apps... → 100+ different counter apps... b/100+different counter apps... → 100+ different counter apps...
diff --git a/206-use-atom.js b/206-use-atom.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import { Provider, createAtom, useAtom } from 'use-atom';
+
+const countAtom = createAtom({ default: 0 });
+
+const Counter = () => {
+  const [count, setCount] = useAtom(countAtom);
+  return (
+    <div>
+      <span>Count: {count}</span>
+      <button type="button" onClick={() => setCount(count + 1)}>+1</button>
+      <button type="button" onClick={() => setCount((c) => c - 1)}>-1</button>
+    </div>
+  );
+};
+
+const App = () => (
+  <Provider>
+    <h1>Counter</h1>
+    <Counter />
+  </Provider>
+);
diff --git a/100 different counter apps... → 100+different counter apps... b/100 different counter apps... → 100+different counter apps...
diff --git a/100 different counter app implementations... → 100 different counter apps... b/100 different counter app implementations... → 100 different counter apps...
diff --git a/000_.md → 100 different counter app implementations... b/000_.md → 100 different counter app implementations...
diff --git a/001-hyperapp-v2.x.js → 101-hyperapp-v2.x.js b/001-hyperapp-v2.x.js → 101-hyperapp-v2.x.js
diff --git a/002-react-values.js → 102-react-values.js b/002-react-values.js → 102-react-values.js
diff --git a/003-mithril.js → 103-mithril.js b/003-mithril.js → 103-mithril.js
diff --git a/004-react-contextual.js → 104-react-contextual.js b/004-react-contextual.js → 104-react-contextual.js
diff --git a/005-elmar.js → 105-elmar.js b/005-elmar.js → 105-elmar.js
diff --git a/006-mobx.js → 106-mobx.js b/006-mobx.js → 106-mobx.js
diff --git a/007-cyclejs.js → 107-cyclejs.js b/007-cyclejs.js → 107-cyclejs.js
diff --git a/008-react.js → 108-react.js b/008-react.js → 108-react.js
diff --git a/009-choo-choo-v5.js → 109-choo-choo-v5.js b/009-choo-choo-v5.js → 109-choo-choo-v5.js
diff --git a/010-choo-choo.js → 110-choo-choo.js b/010-choo-choo.js → 110-choo-choo.js
diff --git a/011-elm.elm → 111-elm.elm b/011-elm.elm → 111-elm.elm
diff --git a/012-fable-v2-elmish.fs → 112-fable-v2-elmish.fs b/012-fable-v2-elmish.fs → 112-fable-v2-elmish.fs
diff --git a/013-elm-ts-counter.ts → 113-elm-ts-counter.ts b/013-elm-ts-counter.ts → 113-elm-ts-counter.ts
diff --git a/014-redux.js → 114-redux.js b/014-redux.js → 114-redux.js
diff --git a/015-vue.js → 115-vue.js b/015-vue.js → 115-vue.js
diff --git a/016-compo.js → 116-compo.js b/016-compo.js → 116-compo.js
diff --git a/017-calmm.elm → 117-calmm.elm b/017-calmm.elm → 117-calmm.elm
diff --git a/018-clojurescript.cljs → 118-clojurescript.cljs b/018-clojurescript.cljs → 118-clojurescript.cljs
diff --git a/019-calmm.js → 119-calmm.js b/019-calmm.js → 119-calmm.js
diff --git a/020-purescript.purs → 120-purescript.purs b/020-purescript.purs → 120-purescript.purs
diff --git a/021-svelte.html → 121-svelte.html b/021-svelte.html → 121-svelte.html
diff --git a/022-focal.tsx → 122-focal.tsx b/022-focal.tsx → 122-focal.tsx
diff --git a/023-cyclow.js → 123-cyclow.js b/023-cyclow.js → 123-cyclow.js
diff --git a/024-react-easy-state.js → 124-react-easy-state.js b/024-react-easy-state.js → 124-react-easy-state.js
diff --git a/025-recompose.js → 125-recompose.js b/025-recompose.js → 125-recompose.js
diff --git a/026-react-hooks.js → 126-react-hooks.js b/026-react-hooks.js → 126-react-hooks.js
diff --git a/027-lit-html.js → 127-lit-html.js b/027-lit-html.js → 127-lit-html.js
diff --git a/028-hooks-as-a-return-val.js → 128-hooks-as-a-return-val.js b/028-hooks-as-a-return-val.js → 128-hooks-as-a-return-val.js
diff --git a/029-rx-observable.js → 129-rx-observable.js b/029-rx-observable.js → 129-rx-observable.js
diff --git a/030-useImmerReduserHook.js → 130-useImmerReduserHook.js b/030-useImmerReduserHook.js → 130-useImmerReduserHook.js
diff --git a/031-omi.js → 131-omi.js b/031-omi.js → 131-omi.js
diff --git a/032-react-basic.purs → 132-react-basic.purs b/032-react-basic.purs → 132-react-basic.purs
diff --git a/033-fantasy-land.js → 133-fantasy-land.js b/033-fantasy-land.js → 133-fantasy-land.js
diff --git a/034-apprun.js → 134-apprun.js b/034-apprun.js → 134-apprun.js
diff --git a/035-more-hooks.js → 135-more-hooks.js b/035-more-hooks.js → 135-more-hooks.js
diff --git a/036-actions-as-hooks.js → 136-actions-as-hooks.js b/036-actions-as-hooks.js → 136-actions-as-hooks.js
diff --git a/037-constate.js → 137-constate.js b/037-constate.js → 137-constate.js
diff --git a/037-htm.js → 138-htm.js b/037-htm.js → 138-htm.js
diff --git a/038-useReducer.js → 139-useReducer.js b/038-useReducer.js → 139-useReducer.js
diff --git a/039-ivy.js → 140-ivy.js b/039-ivy.js → 140-ivy.js
diff --git a/040-haunted.html → 141-haunted.html b/040-haunted.html → 141-haunted.html
diff --git a/041-storeon.js → 142-storeon.js b/041-storeon.js → 142-storeon.js
diff --git a/042-fastdom.ts → 143-fastdom.ts b/042-fastdom.ts → 143-fastdom.ts
diff --git a/043-reason-react.re → 144-reason-react.re b/043-reason-react.re → 144-reason-react.re
diff --git a/044-effector.js → 145-effector.js b/044-effector.js → 145-effector.js
diff --git a/045-unsteated-next.js → 146-unsteated-next.js b/045-unsteated-next.js → 146-unsteated-next.js
diff --git a/046-hybrids.js → 147-hybrids.js b/046-hybrids.js → 147-hybrids.js
diff --git a/047-hybrids-with-redux.js → 148-hybrids-with-redux.js b/047-hybrids-with-redux.js → 148-hybrids-with-redux.js
diff --git a/048-hybrids-with-react.js → 149-hybrids-with-react.js b/048-hybrids-with-react.js → 149-hybrids-with-react.js
diff --git a/049-ReComponent.js → 150-ReComponent.js b/049-ReComponent.js → 150-ReComponent.js
diff --git a/050-globalhook.js → 151-globalhook.js b/050-globalhook.js → 151-globalhook.js
diff --git a/051-litedom.html → 152-litedom.html b/051-litedom.html → 152-litedom.html
diff --git a/052-react-tracked.js → 153-react-tracked.js b/052-react-tracked.js → 153-react-tracked.js
diff --git a/053-react-tracked-and-immer.js → 154-react-tracked-and-immer.js b/053-react-tracked-and-immer.js → 154-react-tracked-and-immer.js
diff --git a/054-reactive-react-redux.js → 155-reactive-react-redux.js b/054-reactive-react-redux.js → 155-reactive-react-redux.js
diff --git a/055-react-hookstore.js → 156-react-hookstore.js b/055-react-hookstore.js → 156-react-hookstore.js
diff --git a/056-reusable.js → 157-reusable.js b/056-reusable.js → 157-reusable.js
diff --git a/057-zustand.js → 158-zustand.js b/057-zustand.js → 158-zustand.js
diff --git a/058-reactn.js → 159-reactn.js b/058-reactn.js → 159-reactn.js
diff --git a/059-lighterhtml.js → 160-lighterhtml.js b/059-lighterhtml.js → 160-lighterhtml.js
diff --git a/060-angular.js → 161-angular.js b/060-angular.js → 161-angular.js
diff --git a/061-hyperapp-v2-in-html.html → 162-hyperapp-v2-in-html.html b/061-hyperapp-v2-in-html.html → 162-hyperapp-v2-in-html.html
diff --git a/062-purescript-turbine.purs → 163-purescript-turbine.purs b/062-purescript-turbine.purs → 163-purescript-turbine.purs
diff --git a/063-bitstate.js → 164-bitstate.js b/063-bitstate.js → 164-bitstate.js
diff --git a/064-effe-ts.js → 165-effe-ts.js b/064-effe-ts.js → 165-effe-ts.js
diff --git a/065-flowponent.js → 166-flowponent.js b/065-flowponent.js → 166-flowponent.js
diff --git a/066-xreact.js → 167-xreact.js b/066-xreact.js → 167-xreact.js
diff --git a/067-xreact.ts → 168-xreact.ts b/067-xreact.ts → 168-xreact.ts
diff --git a/068-uhtml.js → 169-uhtml.js b/068-uhtml.js → 169-uhtml.js
diff --git a/069-apprun.html → 170-apprun.html b/069-apprun.html → 170-apprun.html
diff --git a/070-reactn2.js → 171-reactn2.js b/070-reactn2.js → 171-reactn2.js
diff --git a/071-react-use.js → 172-react-use.js b/071-react-use.js → 172-react-use.js
diff --git a/072-fre.js → 173-fre.js b/072-fre.js → 173-fre.js
diff --git a/073-concur.js → 174-concur.js b/073-concur.js → 174-concur.js
diff --git a/074-neverland.js → 175-neverland.js b/074-neverland.js → 175-neverland.js
diff --git a/075-js-elements.js → 176-js-elements.js b/075-js-elements.js → 176-js-elements.js
diff --git a/076-js-surface.js → 177-js-surface.js b/076-js-surface.js → 177-js-surface.js
diff --git a/077-html-element.js → 178-html-element.js b/077-html-element.js → 178-html-element.js
diff --git a/078-lighterhtml.js → 179-lighterhtml.js b/078-lighterhtml.js → 179-lighterhtml.js
diff --git a/079-hypertml-element.js → 180-hypertml-element.js b/079-hypertml-element.js → 180-hypertml-element.js
diff --git a/080-neow.js → 181-neow.js b/080-neow.js → 181-neow.js
diff --git a/081-omi.js → 182-omi.js b/081-omi.js → 182-omi.js
diff --git a/082-skate-with-lithtml.js → 183-skate-with-lithtml.js b/082-skate-with-lithtml.js → 183-skate-with-lithtml.js
diff --git a/083-skate-with-preact.js → 184-skate-with-preact.js b/083-skate-with-preact.js → 184-skate-with-preact.js
diff --git a/084-slim.js → 185-slim.js b/084-slim.js → 185-slim.js
diff --git a/085-atomico.js → 186-atomico.js b/085-atomico.js → 186-atomico.js
diff --git a/086-heresy-with-hook.js → 187-heresy-with-hook.js b/086-heresy-with-hook.js → 187-heresy-with-hook.js
diff --git a/087-litedom-js → 188-litedom-js b/087-litedom-js → 188-litedom-js
diff --git a/088-ottavino.js → 189-ottavino.js b/088-ottavino.js → 189-ottavino.js
diff --git a/089-lightning-webcomonents.js → 190-lightning-webcomonents.js b/089-lightning-webcomonents.js → 190-lightning-webcomonents.js
diff --git a/090-stencil.js → 191-stencil.js b/090-stencil.js → 191-stencil.js
diff --git a/091-preact-with-class.js → 192-preact-with-class.js b/091-preact-with-class.js → 192-preact-with-class.js
diff --git a/092-react-with-class.js → 193-react-with-class.js b/092-react-with-class.js → 193-react-with-class.js
diff --git a/093-react-with-hook.js → 194-react-with-hook.js b/093-react-with-hook.js → 194-react-with-hook.js
diff --git a/094-riot.html → 195-riot.html b/094-riot.html → 195-riot.html
diff --git a/095-svelte.html → 196-svelte.html b/095-svelte.html → 196-svelte.html
diff --git a/096-vue2.html → 197-vue2.html b/096-vue2.html → 197-vue2.html
diff --git a/097-flowponent.js → 198-flowponent.js b/097-flowponent.js → 198-flowponent.js
diff --git a/098-solid-with-storeon.js → 199-solid-with-storeon.js b/098-solid-with-storeon.js → 199-solid-with-storeon.js
diff --git a/099-flame.purs → 200-flame.purs b/099-flame.purs → 200-flame.purs
diff --git a/100-uhtml-with-uce.js → 201-uhtml-with-uce.js b/100-uhtml-with-uce.js → 201-uhtml-with-uce.js
diff --git a/101-statlake.js → 202-statlake.js b/101-statlake.js → 202-statlake.js
diff --git a/102-feliz.fs → 203-feliz.fs b/102-feliz.fs → 203-feliz.fs
diff --git a/103-capsid.js → 204-capsid.js b/103-capsid.js → 204-capsid.js
diff --git a/104-purescript-web.purs → 205-purescript-web.purs b/104-purescript-web.purs → 205-purescript-web.purs
diff --git a/0_.md → 000_.md b/0_.md → 000_.md
diff --git a/000 → 0_.md b/000 → 0_.md
diff --git a/104-purescript-web.purs b/104-purescript-web.purs
@@ -0,0 +1,22 @@
+module Main where
+
+import Prelude
+import Effect (Effect)
+
+import Concur.Core (Widget)
+import Concur.React (HTML)
+import Concur.React.DOM as D
+import Concur.React.Props as P
+import Concur.React.Run (runWidgetInDom)
+
+counterWidget :: forall a. Int -> Widget HTML a
+counterWidget count = do
+  n <- D.div'
+        [ D.p' [D.text ("State: " <> show count)]
+        , D.button [P.onClick] [D.text "Increment"] $> count+1
+        , D.button [P.onClick] [D.text "Decrement"] $> count-1
+        ]
+  counterWidget n
+
+main :: Effect Unit
+main = runWidgetInDom "main" (counterWidget 0)
diff --git a/000 b/000
@@ -0,0 +1 @@
+More than 100 different counter app implementations...
diff --git a/103 different counter app examples... b/103 different counter app examples...
@@ -1 +0,0 @@
-... using diff libraries and frameworks

diff --git a/0...100 Different counter apps examples... b/0...100 Different counter apps examples...
@@ -1 +0,0 @@
-... using many diff libraries and frameworks

diff --git a/103 different counter app examples... b/103 different counter app examples...
@@ -0,0 +1 @@
+... using diff libraries and frameworks
diff --git a/103-capsid.js b/103-capsid.js
@@ -0,0 +1,30 @@
+import { wired, on, component } from "capsid";
+
+@component("counter")
+export class Counter {
+  count: number = 0;
+
+  @wired(".label")
+  label: HTMLElement;
+
+  __mount__() {
+    this.update();
+  }
+
+  @on.click.at(".plus")
+  plus() {
+    this.count++;
+    this.update();
+  }
+
+  @on.click.at(".minus")
+  minus() {
+    this.count--;
+    this.update();
+  }
+
+  /** Updates the label. */
+  update() {
+    this.label.textContent = `${this.count}`;
+  }
+}
diff --git a/102-feliz.fs b/102-feliz.fs
@@ -0,0 +1,32 @@
+open Feliz
+open Feliz.UseElmish
+open Elmish
+
+type Msg =
+    | Increment
+    | Decrement
+
+type State = { Count : int }
+
+let init() = { Count = 0 }, Cmd.none
+
+let update msg state =
+    match msg with
+    | Increment -> { state with Count = state.Count + 1 }, Cmd.none
+    | Decrement -> { state with Count = state.Count - 1 }, Cmd.none
+
+let counter = React.functionComponent(fun () ->
+    let state, dispatch = React.useElmish(init, update, [| |])
+    Html.div [
+        Html.h1 state.Count
+        Html.button [
+            prop.text "Increment"
+            prop.onClick (fun _ -> dispatch Increment)
+        ]
+
+        Html.button [
+            prop.text "Decrement"
+            prop.onClick (fun _ -> dispatch Decrement)
+        ]
+    ]
+)
diff --git a/0 100 Different counter apps examples... → 0...100 Different counter apps examples... b/0 100 Different counter apps examples... → 0...100 Different counter apps examples...
diff --git a/101-statlake.js b/101-statlake.js
@@ -0,0 +1,16 @@
+import React from "react";
+import { StateLake } from "statelake";
+
+const store = new StateLake({ count: ""});
+
+export default function App() {
+  const [count, setCount] = store.useState("count")();
+
+  return (
+    <div className="App">
+      <button onClick={() => setCount(count + 1)}>+</button>
+      <button onClick={() => setCount(count - 1)}>-</button>
+      <div>{count}</div>
+    </div>
+  );
+}
diff --git a/0 100 Different counter apps examples... b/0 100 Different counter apps examples...
@@ -0,0 +1 @@
+... using many diff libraries and frameworks
diff --git a/0_100 Different counter apps examples... b/0_100 Different counter apps examples...
@@ -1 +0,0 @@
-... using diff frameworks

diff --git a/100-uhtml.js → 100-uhtml-with-uce.js b/100-uhtml.js → 100-uhtml-with-uce.js
diff --git a/000-Different counter apps examples... → 0_100 Different counter apps examples... b/000-Different counter apps examples... → 0_100 Different counter apps examples...
diff --git a/100-uhtml.js b/100-uhtml.js
@@ -0,0 +1,46 @@
+import { define } from 'uce';
+import { render, html } from 'uhtml';
+
+define("my-counter", {
+  init() {
+    this.count = 0;
+    this.dec = () => {
+      this.count--;
+      this.render();
+    };
+    this.inc = () => {
+      this.count++;
+      this.render();
+    };
+    this.render();
+  },
+  render() {
+    this.html`
+      <button onclick="${this.dec}">-</button>
+      <span>${this.count}</span>
+      <button onclick="${this.inc}">+</button>
+    `;
+  }
+});
+
+addEventListener(
+  'DOMContentLoaded',
+  () => {
+
+    // populate the body
+    render(document.body, html`
+      <my-counter />
+      <footer></footer>
+    `);
+
+    // fetch project details and populate the footer
+    fetch('package.json')
+      .then(_ => _.json())
+      .then(({description, version}) => {
+        render(document.querySelector('footer'), html`
+          ${description} v${version}
+        `);
+      });
+  },
+  {once: true}
+);
diff --git a/0} _ 100 _ counter apps examples... → 000-Different counter apps examples... b/0} _ 100 _ counter apps examples... → 000-Different counter apps examples...
diff --git a/_ 100 counter apps examples... → 0} _ 100 _ counter apps examples... b/_ 100 counter apps examples... → 0} _ 100 _ counter apps examples...
diff --git a/002-react-values.js b/002-react-values.js
@@ -7,4 +7,5 @@ const Counter = () => (
       <span>{value}</span>
       <button onClick={() => decrement()}>-1</button>
     )}
-  </NumberValue>)
+  </NumberValue>
+)
diff --git a/005-elmar.js b/005-elmar.js
@@ -1,5 +1,4 @@
 import React from 'react'
-
 export const init = count => count
 
 const Action = {

diff --git a/100 counter apps examples... → _ 100 counter apps examples... b/100 counter apps examples... → _ 100 counter apps examples...
diff --git a/0->100 counter apps b/0->100 counter apps
@@ -1 +0,0 @@
-...

diff --git a/100 counter apps examples... b/100 counter apps examples...
@@ -0,0 +1 @@
+... using diff frameworks
diff --git a/099-flame.purs b/099-flame.purs
@@ -0,0 +1,32 @@
+module Examples.NoEffects.Counter.Main where
+import Prelude
+import Effect (Effect)
+import Flame (QuerySelector(..), Html)
+import Flame.Application.NoEffects as FAN
+import Flame.HTML.Element as HE
+import Flame.HTML.Attribute as HA
+
+type Model = Int
+data Message = Increment | Decrement
+
+init :: Model
+init = 0
+
+update :: Model -> Message -> Model
+update model = case _ of
+        Increment -> model + 1
+        Decrement -> model - 1
+
+view :: Model -> Html Message
+view model = HE.main "main" [
+        HE.button [HA.onClick Decrement] "-",
+        HE.text $ show model,
+        HE.button [HA.onClick Increment] "+"
+]
+
+main :: Effect Unit
+main = FAN.mount_ (QuerySelector "main") {
+        init,
+        update,
+        view
+}
diff --git a/098-solid-with-storeon.js b/098-solid-with-storeon.js
@@ -0,0 +1,19 @@
+import { useStoreon } from 'storeon-solidjs'
+
+let counter = store => {
+  store.on('@init', () => ({ count: 0 }))
+  store.on('inc', ({ count }) => ({ count: count + 1 }))
+  store.on('dec', ({ count }) => ({ count: count - 1 }))
+}
+
+export default function Counter() {
+  const [state, dispatch] = useStoreon()
+
+  return (
+    <div>
+      {state.count}
+      <button onClick={() => dispatch('inc')}>inc</button>
+      <button onClick={() => dispatch('dec')}>dec</button>
+    </div>
+  )
+}
diff --git a/097-flowponent.js b/097-flowponent.js
@@ -0,0 +1,18 @@
+import { render } from "preact";
+import flowponent from "flowponent";
+
+const App = flowponent(function*() {
+  let count = 0;
+
+  for (;;) {
+    count += yield resolve => (
+      <div>
+        <div>current value: {count}</div>
+        <button onClick={() => resolve(1)}>+1</button>
+        <button onClick={() => resolve(-1)}>-1</button>
+      </div>
+    );
+  }
+});
+
+render(<App />, document.getElementById("root"));
diff --git a/094-riot.js → 094-riot.html b/094-riot.js → 094-riot.html
diff --git a/095-svelte.js → 095-svelte.html b/095-svelte.js → 095-svelte.html
diff --git a/096-vue2.js → 096-vue2.html b/096-vue2.js → 096-vue2.html
diff --git a/096-vue.js → 096-vue2.js b/096-vue.js → 096-vue2.js
diff --git a/096-vue.js b/096-vue.js
@@ -1,12 +1,8 @@
 <template>
 	<div>
-		<button @click="this.dec">
-					-
-		</button>
+		<button @click="this.dec">-</button>
 		<span>{{count}}</span>
-		<button @click="this.inc">
-					+
-		</button>
+		<button @click="this.inc">+</button>
 	</div>
 </template>
 

diff --git a/047-hybrids-with-redux.js b/047-hybrids-with-redux.js
@@ -1,18 +1,14 @@
 import { html } from 'hybrids';
 import store, { increment, decrement } from './redux';
 
-// This is a factory for connecting redux store.
-// It can be taken out from here and use in other elements.
 const connect = (store, mapState) => ({
   get: mapState ? () => mapState(store.getState()) : () => store.getState(),
   connect: (host, key, invalidate) => store.subscribe(invalidate),
 });
 
-// Event callbacks
 const onInc = ({ offset }) => store.dispatch(increment(offset));
 const onDec = ({ offset }) => store.dispatch(decrement(offset));
 
-// redux-counter definition
 export default {
   count: connect(store, (state) => state.count),
   offset: 1,
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		More than 100 different counter app implementations...