-
-
Save tomhodgins/8d78fd1d0cb2a3a6bbe1dcb113408fce to your computer and use it in GitHub Desktop.
Component library in less than 140 bytes
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
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>` |
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
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>` |
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
// 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({}) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment