-
-
Save developer-rakeshpaul/0160a5c3f1fefd6ed2be8b8e6c7af193 to your computer and use it in GitHub Desktop.
Simple counter: different implementations...
This file contains hidden or 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: calmm-js way ported to 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 "+"] | |
| ] |
This file contains hidden or 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: calmm-js | |
| import * as R from "ramda" | |
| import * as U from "karet.util" | |
| import React from "karet" | |
| import ReactDOM from "react-dom" | |
| export default ({value = U.atom(0)}) => | |
| <div> | |
| <div>Count: {value}</div> | |
| <button onClick={() => value.modify(R.add(+1))}>+</button> | |
| <button onClick={() => value.modify(R.add(-1))}>-</button> | |
| </div> | |
| ReactDOM.render(<Main/>, document.getElementById("app")) |
This file contains hidden or 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: choo choo | |
| 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 hidden or 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: cyclejs | |
| 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 hidden or 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: elm implementation | |
| 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 hidden or 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 hidden or 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: mobx implementation | |
| import { observable, autorun } from 'mobx'; | |
| import { diff, patch } from 'virtual-dom'; | |
| let mount = function mount(element, view, state) { | |
| let tree = <noop/>; | |
| function render() { | |
| const newTree = view(state); | |
| const patches = diff(tree, newTree); | |
| element = patch(element, patches); | |
| tree = newTree; | |
| } | |
| autorun(() => render()); | |
| } | |
| const state = { @observable n: 0 }; | |
| const onclick = () => state.n++; | |
| const view = (state) => <div> | |
| <h1>clicked {state.n} times</h1> | |
| <button onclick={onclick}>click me!</button> | |
| </div> | |
| mount( | |
| document.querySelector('#app'), | |
| view, state | |
| ); |
This file contains hidden or 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: redux implementation | |
| 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) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment