Last active
May 6, 2024 05:13
-
-
Save srdjan/1d10cbd42a2d695f696dee6b47fdc5e0 to your computer and use it in GitHub Desktop.
100+ different js counter apps...
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
100+ different js counter apps... |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 | |
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | |
) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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-- }, "-") | |
) | |
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | |
) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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') | |
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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') | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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')); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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) | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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()) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 "+" ] | |
] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | |
) | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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') |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | |
` | |
) | |
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 "+"] | |
] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(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")) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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")) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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" ] | |
] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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')) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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'}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | |
</>) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | |
) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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")) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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)); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | |
</> | |
); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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') |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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) ] | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const App = () => | |
useState(0) | |
.map(([count, setCount]) => ( | |
<div> | |
{count} | |
<button onClick={() => setCount(count + 1)}> | |
+ | |
</button> | |
</div> | |
)) | |
render(<App />, main) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | |
); | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | |
); | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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')); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | |
</> | |
); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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"), | |
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 | |
) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
[@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>; | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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")) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | |
`, | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | |
); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | |
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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')); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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 />); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | |
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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") | |
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | |
</> | |
) | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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)); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(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); | |
}]); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | |
) | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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')!), {}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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")); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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') | |
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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') | |
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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>`; | |
}; | |
const update = { | |
'+1': state => state + 1, | |
'-1': state => state - 1 | |
}; | |
app.start(document.body, state, view, update); | |
</script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { useDispatch } from 'reactn'; // <-- reactn | |
const incrementReducer = (global, dispatch, action) => ({ | |
count: global.count + action.amount, | |
}); | |
const decrementReducer = (global, dispatch, action) => ({ | |
count: global.count - action.amount, | |
}); | |
const MyComponent = () => { | |
const increment = useDispatch(incrementReducer); | |
const decrement = useDispatch(decrementReducer); | |
return ( | |
<div> | |
<button onClick={() => increment({ amount: 1 })}>Add 1</button> | |
<button onClick={() => increment({ amount: 3 })}>Add 3</button> | |
<button onClick={() => decrement({ amount: 5 })}>Subtract 5</button> | |
</div> | |
); | |
}; | |
export default MyComponent; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from "react"; | |
import {createGlobalState} from 'react-use' | |
const useGlobalValue = createGlobalState(0); | |
const CompA = () => { | |
const [value, setValue] = useGlobalValue(); | |
return <button onClick={() => setValue(value + 1)}>+</button>; | |
}; | |
const CompB = () => { | |
const [value, setValue] = useGlobalValue(); | |
return <button onClick={() => setValue(value - 1)}>-</button>; | |
}; | |
export default function App() { | |
const [value] = useGlobalValue(); | |
return ( | |
<div> | |
<p>{value}</p> | |
<CompA /> | |
<CompB /> | |
</div> | |
); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { h, render, useState } from 'fre' | |
function App() { | |
const [count, setCount] = useState(0) | |
return ( | |
<div> | |
<h1>{count}</h1> | |
<button onClick={() => setCount(count + 1)}>+</button> | |
<button onClick={() => setCount(count + -)}>-</button> | |
</div> | |
) | |
} | |
render(<App />, document.getElementById('root')) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import ReactDOM from "react" | |
import Concur from "concur" | |
const stateLoop = async function*(initState, component) { | |
let state = initState | |
while(true) { | |
state = yield* component(state) | |
} | |
} | |
const Counter = stateLoop(0, (count) => | |
<div> | |
<div>The current count is {count}</div> | |
<div> | |
<button onClick={mapProp(() => count+1)}>Increment</button> | |
<button onClick={mapProp(() => count-1)}>Decrement</button> | |
<button onClick={mapProp(() => 0)}>Reset</button> | |
</div> | |
</div> | |
) | |
ReactDOM.render(<Concur><Counter/></Concur>, document.getElementById('root')); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import {neverland as $, render, html, useState} from 'neverland'; | |
const Counter = $((initialState) => { | |
const [count, setCount] = useState(initialState); | |
return html` | |
Count: ${count} | |
<button onclick=${() => setCount(count + 1)}>Increment</button> | |
<button onclick=${() => setCount(count - 1)}>Decrement</button> | |
}); | |
render(document.body, html` | |
<div> | |
${Counter(0)} | |
</div> | |
`); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { component, html, prop, useObservable } from 'js-elements' | |
component('simple-counter', { | |
props: { | |
label: prop.str.opt('Counter'), | |
initialCount: prop.num.opt(0) | |
} | |
}, props => { | |
const | |
state = useObservable({ count: props.initialCount }), | |
onIncrement = () => { ++state.count }, | |
onDecrement = () => { --state.count } | |
return () => html` | |
<div> | |
<label>${props.label}: </label> | |
<button @click=${onDecrement}>-</button> | |
<span> ${state.count} </span> | |
<button @click=${onIncrement}>+</button> | |
<div> | |
` | |
}) | |
document.getElementById('app').appendChild( | |
document.createElement('simple-counter')) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { h, component, render, useCallback, useState } from 'js-surface/react' | |
const Counter = component({ | |
name: 'Counter', | |
validate: true, | |
main({ initialValue = 0, label = 'Counter' }) { | |
const | |
[count, setCount] = useState(initialValue), | |
onIncrement = useCallback(() => setCount(it => it + 1), []) | |
return ( | |
<div> | |
<label>{label}</label> | |
<button onClick={onIncrement}>{count}</button> | |
</div> | |
) | |
} | |
}) | |
render(<Counter/>, 'app') |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
class MyCounter extends HTMLElement { | |
constructor() { | |
super(); | |
this.count = 0; | |
const style = ` | |
* { | |
font-size: 200%; | |
} | |
span { | |
width: 4rem; | |
display: inline-block; | |
text-align: center; | |
} | |
button { | |
width: 64px; | |
height: 64px; | |
border: none; | |
border-radius: 10px; | |
background-color: seagreen; | |
color: white; | |
} | |
`; | |
const html = ` | |
<button id="dec">-</button> | |
<span>${this.count}</span> | |
<button id="inc">+</button> | |
`; | |
this.attachShadow({ mode: 'open' }); | |
this.shadowRoot.innerHTML = ` | |
<style> | |
${style} | |
</style> | |
${html} | |
`; | |
this.buttonInc = this.shadowRoot.getElementById('inc'); | |
this.buttonDec = this.shadowRoot.getElementById('dec'); | |
this.spanValue = this.shadowRoot.querySelector('span'); | |
this.inc = this.inc.bind(this); | |
this.dec = this.dec.bind(this); | |
} | |
inc() { | |
this.count++; | |
this.update(); | |
} | |
dec() { | |
this.count--; | |
this.update(); | |
} | |
update() { | |
this.spanValue.innerText = this.count; | |
} | |
connectedCallback() { | |
this.buttonInc.addEventListener('click', this.inc); | |
this.buttonDec.addEventListener('click', this.dec); | |
} | |
disconnectedCallback() { | |
this.buttonInc.removeEventListener('click', this.inc); | |
this.buttonDec.removeEventListener('click', this.dec); | |
} | |
} | |
customElements.define('my-counter', MyCounter); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { html, render } from 'lighterhtml'; | |
class MyCounter extends HTMLElement { | |
constructor() { | |
super(); | |
this.count = 0; | |
this.attachShadow({ mode: 'open' }); | |
this.update(); | |
} | |
inc = () => { | |
this.count++; | |
this.update(); | |
}; | |
dec = () => { | |
this.count--; | |
this.update(); | |
}; | |
style() { | |
return ` | |
* { | |
font-size: 200%; | |
} | |
span { | |
width: 4rem; | |
display: inline-block; | |
text-align: center; | |
} | |
button { | |
width: 64px; | |
height: 64px; | |
border: none; | |
border-radius: 10px; | |
background-color: seagreen; | |
color: white; | |
} | |
`; | |
} | |
template() { | |
return html` | |
<style> | |
${this.style()} | |
</style> | |
<button onclick="${this.dec}">-</button> | |
<span>${this.count}</span> | |
<button onclick="${this.inc}">+</button> | |
`; | |
} | |
update() { | |
render(this.shadowRoot, this.template()); | |
} | |
} | |
customElements.define('my-counter', MyCounter); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import HyperHTMLElement from "hyperhtml-element"; | |
class MyCounter extends HyperHTMLElement { | |
constructor() { | |
super(); | |
this.attachShadow({ mode: "open" }); | |
} | |
created() { | |
this.count = 0; | |
this.render(); | |
} | |
inc = () => { | |
this.count++; | |
this.render(); | |
}; | |
dec = () => { | |
this.count--; | |
this.render(); | |
}; | |
render() { | |
return this.html` | |
<style> | |
* { | |
font-size: 200%; | |
} | |
span { | |
width: 4rem; | |
display: inline-block; | |
text-align: center; | |
} | |
button { | |
width: 64px; | |
height: 64px; | |
border: none; | |
border-radius: 10px; | |
background-color: seagreen; | |
color: white; | |
} | |
</style> | |
<button onclick=${this.dec}>-</button> | |
<span>${this.count}</span> | |
<button onclick=${this.inc}>+</button> | |
`; | |
} | |
} | |
MyCounter.define("my-counter"); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { ComponentMixin } from "@neow/core"; | |
class MyComponent extends ComponentMixin(HTMLElement) { | |
static template = ` | |
<style> | |
* { | |
font-size: 200%; | |
} | |
span { | |
width: 4rem; | |
display: inline-block; | |
text-align: center; | |
} | |
button { | |
width: 64px; | |
height: 64px; | |
border: none; | |
border-radius: 10px; | |
background-color: seagreen; | |
color: white; | |
} | |
</style> | |
<button onclick="{{this.dec()}}">-</button> | |
<span>{{this.counter}}</span> | |
<button onclick="{{this.inc()}}">+</button> | |
`; | |
counter = 0; | |
inc() { | |
this.counter++; | |
} | |
dec() { | |
this.counter--; | |
} | |
} | |
customElements.define("my-counter", MyComponent); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { define, WeElement, html } from "omi"; | |
class MyCounter extends WeElement { | |
static get propTypes() { | |
return { | |
count: Number | |
}; | |
} | |
static get defaultProps() { | |
return { count: 0 }; | |
} | |
install() { | |
this.data = { count: this.props.count }; | |
} | |
static get css() { | |
return ` | |
* { | |
font-size: 200%; | |
} | |
span { | |
width: 4rem; | |
display: inline-block; | |
text-align: center; | |
} | |
button { | |
width: 64px; | |
height: 64px; | |
border: none; | |
border-radius: 10px; | |
background-color: seagreen; | |
color: white; | |
} | |
`; | |
} | |
inc = () => { | |
this.data.count++; | |
this.update(); | |
}; | |
dec = () => { | |
this.data.count--; | |
this.update(); | |
}; | |
render(props) { | |
return html` | |
<button onclick="${this.dec}">-</button> | |
<span>${this.data.count}</span> | |
<button onclick="${this.inc}">+</button> | |
`; | |
} | |
} | |
define("my-counter", MyCounter); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import Element from "@skatejs/element"; | |
import { render, html } from "lit-html"; | |
class MyCounterElement extends Element { | |
static get props() { | |
return { | |
count: Number | |
}; | |
} | |
inc = () => { | |
this.count++; | |
}; | |
dec = () => { | |
this.count--; | |
}; | |
render() { | |
const style = ` | |
* { | |
font-size: 200%; | |
} | |
span { | |
width: 4rem; | |
display: inline-block; | |
text-align: center; | |
} | |
button { | |
width: 64px; | |
height: 64px; | |
border: none; | |
border-radius: 10px; | |
background-color: seagreen; | |
color: white; | |
}`; | |
return html` | |