📜JavaScript developer.
🐲RPG fan.
📚Storyteller and 🕹game developer.
👨Father and Husband.
Published
Edited
Apr 8, 2022
Surprise-Free State Management! Designed for React with functional components, but can also be used with other frameworks (or no framework at all.)
Statery = import('https://cdn.skypack.dev/statery@0.5.4?min')
store = Statery.makeStore({counter: 0})
increment = () =>
store.set((state) => ({
counter: state.counter + 1
}))
{
while (true) {
const counter = store.state.counter
const retVal = html`
<div> Counter: ${counter} </div>
<div> <button>Add</button> </div>
`
retVal.querySelector('button').addEventListener('click', ()=> {
increment();
} );
await Promises.delay(1000);
yield retVal;
}
}
html`<div>
Counter (old ) state subscribed <b class='cstate'>null</b>
</br>
New (upcoming) state <b class='nstate'></b>
</div>`
{
// ( changes, state )
const listener =( changes, {counter}) => {
console.log("Changes:", changes)
document.querySelector('.cstate').innerHTML = counter
document.querySelector('.nstate').innerHTML = changes.counter
}
store.subscribe(listener)
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
