30:[{"id":"4660ef936f20d2c973545ea80936d8aa236bcde4a8e75399af4f682193619ad3a74b6ae90bee45642ab48110be8960bf3f3cbfce1907549da07d14783f9e0b8e","href":"https://static.observableusercontent.com/files/4660ef936f20d2c973545ea80936d8aa236bcde4a8e75399af4f682193619ad3a74b6ae90bee45642ab48110be8960bf3f3cbfce1907549da07d14783f9e0b8e","name":"hi-alpine.png","type":"image/png","lastModified":1654796089304.778,"size":291710}] 2e:{"title":"hi [ alpinejs ]","cells":[{"id":0,"value":"# hi [ *alpinejs* ]\n## Quick custom components\n___","pinned":false,"hidden":false,"mode":"md"},{"id":1274,"value":"$${await FileAttachment(\"hi-alpine.png\").image({style: 'width:640px; max-width:width'})}","pinned":false,"hidden":false,"mode":"md"},{"id":1288,"value":"___","pinned":false,"hidden":false,"mode":"md"},{"id":1105,"value":"index = md`\n\nAlpineJS provides a great way to build Observable views with minimal code. It extends standard HTML elements with some powerful inline attributes, enabling to quickly wire up and mix Observable inputs with vanilla HTML.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1459,"value":"ToC({headers: ['h3'],order:1, scroll:{block:'center'}})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1463,"value":"___","pinned":false,"hidden":false,"mode":"md"},{"id":316,"value":"### Setup\nFirst, provide an input container and a default value:","pinned":false,"hidden":false,"mode":"md"},{"id":115,"value":"viewof init = Inputs.input(parseInt(Math.random()*10))","pinned":false,"hidden":false,"mode":"ojs"},{"id":342,"value":"___\n\nNext, define an Observable input:","pinned":false,"hidden":false,"mode":"md"},{"id":75,"value":"viewof range = Inputs.range([0,10],{step:0.1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":300,"value":"___\n\nThen, create some HTML elements to interact with a global `Alpine.store()` and `@click` / `x-model` attributes (note how typing below gracefully updates each element while retaining focus):","pinned":false,"hidden":false,"mode":"md"},{"id":8,"value":"viewof component = { \n let uses = Alpine, /*\n 1*/ wrap = html`

`,\n \n counter = html`

\n \n \n \n Slice: `,\n\n field = html`

\n `; /*\n \n 2*/ uses.store('counter',{count: 0})\n uses.effect(() => { \n uses.store('counter').count;\n wrap.dispatchEvent(new Event('click'))})() /*\n \n 3*/ wrap.append(field,counter,html`
`)\n Object.defineProperty(wrap, 'value' , {\n get : ()=> uses.store('counter').count,\n set : (v)=> uses.store('counter').count = v })\n return wrap }","pinned":true,"hidden":false,"mode":"ojs"},{"id":542,"value":"___\n\n*Resulting in a plain old `view:`*","pinned":false,"hidden":false,"mode":"md"},{"id":795,"value":"## `${component}`","pinned":false,"hidden":false,"mode":"md"},{"id":375,"value":"___\n\n### Explanation [`^`](https://observablehq.com/@dleeftink/hi-alpine#index)\n\nTo make this work:\n1. > Alpine elements need to be wrapped in a parent `

` that dispatches input events e.g. using `

`\n2. > `uses.store()` and `uses.effect()` are needed to trigger Observable's dataflow when binding multiple views with `Inputs.bind` (below)\n3. > `Object.defineProperty` enables the parent element to reflect wrapped values.\n\n___","pinned":false,"hidden":false,"mode":"md"},{"id":1308,"value":"`Binding an array of views:`","pinned":false,"hidden":false,"mode":"md"},{"id":118,"value":"[ viewof range, viewof component ].map( view => Inputs.bind( view, viewof init , invalidation ))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1313,"value":"___ \n`Update bound views from an Observable input:`","pinned":false,"hidden":false,"mode":"md"},{"id":988,"value":"[ viewof range.value = 2 , viewof range.dispatchEvent(new Event('input')) ]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1318,"value":"___\n\n`Update bound views from an Alpine input:`","pinned":false,"hidden":false,"mode":"md"},{"id":489,"value":"[ viewof component.value = 3 ]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1199,"value":"___\n\nDistributed update `view:`","pinned":false,"hidden":false,"mode":"md"},{"id":1176,"value":"## `${component}`","pinned":false,"hidden":false,"mode":"md"},{"id":1012,"value":"___\n\n### Wiring elements [`^`](https://observablehq.com/@dleeftink/hi-alpine#index)\nAn array of views can be bound to the `initial` input which invalidates on cell rerun. \nIn effect, this enables distributed updating of the same state. \nNote how Observable inputs need to dispatch an additional `'input'` event to trigger dataflow.","pinned":false,"hidden":false,"mode":"md"},{"id":1180,"value":"___","pinned":false,"hidden":false,"mode":"md"},{"id":11,"value":"watchStore = { \n let uses = await Alpine, cycle = \n new Mutable;\n \n uses.effect(()=>cycle.value =\n uses.store('counter').count)()\n \n return cycle.generator }","pinned":true,"hidden":false,"mode":"ojs"},{"id":390,"value":"___\n\n### Auto updating state [`^`](https://observablehq.com/@dleeftink/hi-alpine#index)\n\nTo observe a globally stored variable independently from a view, use `Alpine.effect()` in combination with a `Mutable`.","pinned":false,"hidden":false,"mode":"md"},{"id":405,"value":"___\n\n### Imports","pinned":false,"hidden":false,"mode":"md"},{"id":6,"value":"Alpine = { let Alpine = (await import('https://cdn.skypack.dev/alpinejs@3.10.2')).default\n\n Alpine.start()\n \n return Alpine\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1079,"value":"import {ToC} from \"@rmw4269/contents\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}