Skip to content

Instantly share code, notes, and snippets.

@srdjan srdjan/0->100 counter apps
Last active Sep 7, 2019

Embed
What would you like to do?
Learn more about clone URLs
Download ZIP
Goal: 100 Counter apps examples. Counting 50+ at the moment, and will keep going :)
Raw
001-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
})
Raw
002-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>)
Raw
003-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-- }, "-")
)
})
Raw
004-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>
)
Raw
005-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}
Raw
006-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')
);
Raw
007-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')
});
Raw
008-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'));
Raw
009-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)
}
}
Raw
010-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())
Raw
011-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 "+" ]
]
Raw
012-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
Raw
013-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>
)
}
Raw
014-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)
Raw
015-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')
Raw
016-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>
`
)
);
Raw
017-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 "+"]
]
Raw
018-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"))
Raw
019-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"))
Raw
020-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" ]
]
Raw
021-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>
Raw
022-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'))
Raw
023-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'})
Raw
024-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>
</>)
Raw
025-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>
)
Raw
026-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"))
Raw
027-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));
Raw
028-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)
Raw
029-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);
Raw
030-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>
</>
);
}
Raw
031-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')
Raw
032-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) ]
}
Raw
033-fantasy-land.js
const App = () =>
useState(0)
.map(([count, setCount]) => (
<div>
{count}
<button onClick={() => setCount(count + 1)}>
+
</button>
</div>
))
render(<App />, main)
Raw
034-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);
Raw
035-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>
);
};
Raw
036-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>
);
};
Raw
037-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);
Raw
037-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'));
Raw
038-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>
</>
);
}
Raw
039-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"),
);
Raw
040-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>
Raw
041-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
)
Raw
042-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
}
}
Raw
043-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>;
};
Raw
044-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);
Raw
045-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"))
Raw
046-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);
Raw
047-hybrids-with-redux.js
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,
render: ({ count, offset }) => html`
<style>:host { display: block; }</style>
<button onclick="${onInc}">+${offset}</button>
<button onclick="${onDec}">-${offset}</button>
<p>Count: ${count}</p>
`,
};
Raw
048-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);
Raw
049-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>
);
}
}
Raw
050-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>
);
Raw
051-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>
Raw
052-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'));
Raw
053-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 />);
Raw
054-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>
);
Raw
055-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")
);
Raw
056-reausable.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>
<Couner/>
</ReusableProvider>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Raw
057-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>
</>
)
}
Raw
058-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
Raw
059-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));
Raw
060-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);
}]);
Raw
061-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>
Raw
062-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)
Raw
063-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>
)
}
@mweststrate

This comment has been minimized.

Sign in to view
Copy link

commented Nov 19, 2016

Suggestion, MobX + React :) ? That is a bit more straight-forward compared to VirtualDOM

// counter: mobx-react implementation

import { observable } from 'mobx';
import { observer } from 'mobx-react';
import React from 'react'
import {render} from 'react-dom'

const state = { n: 0 };
const onclick = () => state.n++;

const view = observer(() => <div>
  <h1>clicked {state.n} times</h1>
  <button onclick={onclick}>click me!</button>
</div>)

render(
  <view />,
  document.querySelector('#app')
);
@srdjan

This comment has been minimized.

Sign in to view
Copy link
Owner Author

commented Nov 25, 2016 •
edited

@mweststrate - oh, nice ! updated - thank you.
MobX is lovely...
@jorgebucaran

This comment has been minimized.

Sign in to view
Copy link

commented Feb 12, 2017 •
edited

@srdjan Minor suggestion, HyperApp+JSX looks neater. 👋

app({
    model: 0,
    update: {
        add: model => model + 1,
        sub: model => model - 1
    },
    view: (model, actions) =>
        <div>
            <button onclick={actions.add}>+</button>
            <h1>{model}</h1>
            <button onclick={actions.sub} disabled={model <= 0}>-</button>
        </div>
})
@roman01la

This comment has been minimized.

Sign in to view
Copy link

commented Feb 24, 2017

ClojureScript + Rum counter

(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"))
@jorgebucaran

This comment has been minimized.

Sign in to view
Copy link

commented Feb 24, 2017

@roman01la What's atom 0? Is that how you declare the initial value?
@roman01la

This comment has been minimized.

Sign in to view
Copy link

commented Feb 24, 2017

@jbucaran yes, Atom is a reference type that holds an immutable value
@quarterto

This comment has been minimized.

Sign in to view
Copy link

commented Feb 24, 2017

shameless plug for enviante:

import createStore from 'enviante';
import {createObserve} from 'enviante-react';
import React from 'react';
import {render} from 'react-dom';

const store = createStore({count: 0});
const observe = createObserve(store);

const Counter = observe(props, ({subscribe, dispatch}) => <div>
    <h1>{subscribe('count')}</h1>
    <button onclick={() => dispatch('count', count => count + 1)}>+</button>
    <button onclick={() => dispatch('count', count => count - 1)}>-</button>
</div>);

render(<Counter />, document.querySelector('main'));
@lukeed

This comment has been minimized.

Sign in to view
Copy link

commented Feb 24, 2017

CounterMVC
@yyx990803

This comment has been minimized.

Sign in to view
Copy link

commented Feb 24, 2017 •
edited 

new Vue({
  data: { count: 0 },
  template: `
    <p>
      {{ count }}
      <button @click="count++">+</button>
      <button @click="count--">-</button>
    </p>
   `
}).$mount('#app')

Or

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

Note: this also doesn't require any build step.
@tivac

This comment has been minimized.

Sign in to view
Copy link

commented Feb 25, 2017 •
edited

mithril

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

live demo
@adamdicarlo

This comment has been minimized.

Sign in to view
Copy link

commented Feb 25, 2017

This is awesome! One bug: There's a missing closing back-tick in 6-choo-choo-counter.js (should be at end of line 21)
@gilbert

This comment has been minimized.

Sign in to view
Copy link

commented Feb 25, 2017

Vanilla.js

Count: <span id="count">0</span>
<button onclick="count.innerText = +count.innerText+1">+</button>
<button onclick="count.innerText = +count.innerText-1">-</button>
@foxdonut

This comment has been minimized.

Sign in to view
Copy link

commented Feb 25, 2017

I hope the vanilla js one is tongue-in-cheek... because you'd have to go fishing in the DOM to get your data back, that'd become a real mess real quick in a real app.
@polytypic

This comment has been minimized.

Sign in to view
Copy link

commented Feb 25, 2017 •
edited

Cool. As the developer of Calmm, I'd like to point out a couple of important details that are probably not immediately obvious just by looking at the code.

The first thing to understand is that the way state can be passed to components in Calmm via (lensed) atoms makes it possible to plug those components into application specific state fairly flexibly using lenses. The Counter component only assumes that it gets access to a numeric variable, but that variable can be adapted to mean many things. The shopping cart example shows how the Counter component can be adapted to control items in a shopping cart. In neither of the two uses of Counter in that example is the state that the component manipulates just a number.

The second thing to understand is that the Counter function that implements the component is only called by React when the component is mounted. In other words, the Counter function is not called for each change of the counter value. In fact, when the counter value changes, only the VDOM of the <div>Count: {value}</div> element is recomputed and the corresponding DOM element is then updated. The way observables can be embedded into VDOM in Calmm means that VDOM updates can easily be made almost optimal.

Here is a slightly fixed version of the example:

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

I moved the construction of the state atom outside of the component to emphasize that the Counter component can be a referentially transparent function. However, it is typical to define defaults, because that makes it easier to try out components, and it is also perfectly possible to create components that have local state that persists only for the duration that a component remains mounted.
@srdjan

This comment has been minimized.

Sign in to view
Copy link
Owner Author

commented Feb 25, 2017

@polytypic thanks for comments - updated
I was planning a second round with examples that are more involving - todo app with external API for persistence was original plan
but now shopping cart looks more like it 😄
@gilbert

This comment has been minimized.

Sign in to view
Copy link

commented Feb 25, 2017 •
edited

Yes @foxdonut, definitely tongue-in-cheek :) It's also a parody of the succinctness that everyone is going for with their framework of choice. Without a defined set of objectives, Vanilla.js's example is just as valid as the others 😄
@foxdonut

This comment has been minimized.

Sign in to view
Copy link

commented Feb 26, 2017

Great stuff @mindeavor :) totally agree!
@dmitriid

This comment has been minimized.

Sign in to view
Copy link

commented Feb 26, 2017

In a twitter conversation someone mentioned this repo: https://github.com/adrianmcli/omg-counters

I wonder if this gist could me merged there
@joaomilho

This comment has been minimized.

Sign in to view
Copy link

commented Feb 26, 2017 •
edited

Act's <1.0 (https://github.com/act-framework/act/) version if you wanna add:

const view = (count) =>
  ['p', [
    ['h1', count],
    ['button', {click: {add: 1}}, '+'],
    ['button', {click: {add: -1}}, '-']
  ]]

const reducer = (state, {type, payload}) =>
  type === 'add' ? state + payload : state

main(view, { model: 0, reducer })
@adamdicarlo

This comment has been minimized.

Sign in to view
Copy link

commented Feb 27, 2017

Where does 1b-calmm-counter-elm come from? As near as I can tell, https://github.com/polytypic/elm-reactive-dom-with-lensed-state-toy ? @polytypic
@polytypic

This comment has been minimized.

Sign in to view
Copy link

commented Feb 28, 2017 •
edited

@adamdicarlo Yes, (I believe) it comes from there. Note that the Elm toy example is just a quick hack to show how things could look like. The Elm toy version is neither as expressive (it lacks higher-order observables and first-class atoms) nor as algorithmically efficient (updates require recomputing more VDOM) as the Calmm JS version, but there is no reason why one couldn't implement the approach properly in a ML-style language. Note that mentioning people in gist comments doesn't (seem to) give notifications.
@jorgebucaran

This comment has been minimized.

Sign in to view
Copy link

commented Mar 15, 2017

@srdjan Hi 👋! Can we update the code in hyperapp's example? The part that says update, should be actions. That's it. 🙏
@srdjan

This comment has been minimized.

Sign in to view
Copy link
Owner Author

commented Mar 18, 2017

@jbucaran ✅
@renaudtertrais

This comment has been minimized.

Sign in to view
Copy link

commented Mar 24, 2017

Pure React ?

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

live demo
@cristinecula

This comment has been minimized.

Sign in to view
Copy link

commented Mar 25, 2017

How about Svelte?

<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>
@patrick-steele-idem

This comment has been minimized.

Sign in to view
Copy link

commented Mar 25, 2017 •
edited

Here's Marko:

class {
  onCreate() {
    this.state = { count: 0 };
  }
  increment(delta) {
    this.state.count += delta;
  }
}

<p>
  ${state.count}
  <button on-click('increment', 1)>+</button>
  <button on-click('increment', -1)>-</button>
</p>

Try Online

To mount the Marko component:

require('./path/to/marko-counter').renderSync().appendTo(document.body)
@thysultan

This comment has been minimized.

Sign in to view
Copy link

commented Mar 26, 2017

DIO. v7.0.0

class Counter {
	getInitialState () {
		return {
			count: 0
		}
	}
	increment () {
		return {
			count: this.state.count + 1
		}
	}
	decrement () {
		return {
			count: this.state.count - 1
		}
	}
	render () {
		return [
			this.state.count,
			h('button', {onClick: this.increment}, '+'),
			h('button', {onClick: this.decrement}, '-')
		]
	}
}

dio.render(Counter);
@dmitrykurmanov

This comment has been minimized.

Sign in to view
Copy link

commented Mar 29, 2019 •
edited

How about Svelte?

There is a typo in the gist see https://gist.github.com/srdjan/1d10cbd42a2d695f696dee6b47fdc5e0#file-121-svetle-html

need to change sveTLe to sveLTe

and also it would be great to add svelte3 version
@mg901

This comment has been minimized.

Sign in to view
Copy link

commented Apr 23, 2019 •
edited

React with Effector

import React from "react";
import ReactDOM from "react-dom";
import { createStore, createEvent } from "effector";
import { createComponent } from "effector-react";

const increment = createEvent("increment");
const decrement = createEvent("decrement");
const resetCounter = createEvent("reset counter");

const counter = createStore(0)
  .on(increment, state => state + 1)
  .on(decrement, state => state - 1)
  .reset(resetCounter);

const Counter = createComponent(counter, (props, counter) => (
  <>
    <div>{counter}</div>
    <button onClick={increment}>+</button>
    <button onClick={decrement}>-</button>
    <button onClick={resetCounter}>reset</button>
  </>
));
@doasync

This comment has been minimized.

Sign in to view
Copy link

commented Apr 23, 2019

Effector + React hooks:

Run in repl

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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.