Skip to content

Instantly share code, notes, and snippets.

@bloodyowl

bloodyowl/Component.js

Created January 4, 2017 15:16
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save bloodyowl/0529e7165aff4519f245c0f5f4872d34 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save bloodyowl/0529e7165aff4519f245c0f5f4872d34 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. bloodyowl created this gist Jan 4, 2017.
    1 change: 1 addition & 0 deletions Component.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    b=0;$=x=>(p,i="_"+b++,u=($[i]=q=>eval(i).innerHTML=x(p,$[q],u),z=>($[++b]=z,`$.${i}(${b})`)))=>`<c id=${i}>${x(p,[]._,u)}</c>`
    17 changes: 17 additions & 0 deletions ComponentExpanded.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,17 @@
    b = 0; // global ID
    $ = // component
    x => // render function
    (
    p, // props
    i = "_" + b++, // id
    u = (
    // updater = nextStateID => document.getElementById(id).innerHTML = render(props, states[nextStateID], update)
    $[i] = q => eval(i).innerHTML = x(p, $[q], u),
    // nextState => { id = nuid(); states[id] = nextState; return () => updater(id) }
    z => (
    $[++b] = z,
    `$.${i}(${ b })`
    )
    )
    // return the contents
    ) => `<c id=${i}>${ x(p, []._, u) }</c>`
    24 changes: 24 additions & 0 deletions Example.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,24 @@
    // Test at https://jsfiddle.net/bloodyowl/hkpbtmbo/

    const DecrementButton = $(props =>
    `<div>
    <button onclick="${ props.decrement }">decrement</button>
    </div>`
    )


    const IncrementButton = $(props =>
    `<div>
    <button onclick="${ props.increment }">increment</button>
    </div>`
    )

    const App = $((props, state = 0, update) =>
    `<div>
    <b>${ state }</b>
    ${ IncrementButton({ increment: update(state + 1) }) }
    ${ state === 0 ? `` : DecrementButton({ decrement: update(state - 1) }) }
    </div>`
    )

    document.body.innerHTML = App({})