Public
Edited
Jun 28, 2022
6 stars
viewof component = {
let uses = Alpine, /*
1*/ wrap = html`<div @click=$dispatch('input')>`,
counter = html`<div>
<button @click=$store.counter.count-->Dec</button>
<button @click=$store.counter.count++>Inc</button>
<button @click="$store.counter.count = (Math.random()*10).toFixed(3)">Rand</button>
<label>Slice:</label> <span x-text=($store.counter.count+'').slice(0,5)>`,
field = html`<div>
<input type="text" x-model="$store.counter.count">`; /*
2*/ uses.store('counter',{count: 0})
uses.effect(() => {
uses.store('counter').count;
wrap.dispatchEvent(new Event('click'))})() /*
3*/ wrap.append(field,counter,html`<br>`)
Object.defineProperty(wrap, 'value' , {
get : ()=> uses.store('counter').count,
set : (v)=> uses.store('counter').count = v })
return wrap }
[ viewof range, viewof component ].map( view => Inputs.bind( view, viewof init , invalidation ))
[ viewof range.value = 2 , viewof range.dispatchEvent(new Event('input')) ]
[ viewof component.value = 3 ]
watchStore = {
let uses = await Alpine, cycle =
new Mutable;
uses.effect(()=>cycle.value =
uses.store('counter').count)()
return cycle.generator }
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.
