28:null 29:["$","title",null,{"children":"Preact | Iris Artin | Observable"}] 2e:T435,class Test extends Preact.Component { constructor() { super(); this.ref = Preact.createRef(); this.state = { value: 0 }; } onInput() { return (evt => { var value = parseInt(evt.target.value); this.setState({ value: value }); console.log('onInput', evt.target.value, this.state); evt.stopPropagation(); this.ref.current.value = value; this.ref.current.dispatchEvent( new InputEvent('input', { bubbles: true }) ); }).bind(this); } componentDidMount() { debugger; this.ref.current.value = this.state.value; console.log("componentDidMount", this.state); this.ref.current.dispatchEvent(new InputEvent('input', { bubbles: true })); } render({ children }, { value }) { return htm`

Not an input (#${idx})

`; } }2f:[] 2c:{"id":"ff5e5ca6026e25f5","slug":"preact","title":"Preact","thumbnail":"65793ecce2c7611add0e7d7744d5cf69a5d948ed0b79b0af65f58b1b301571eb","access_level":"public","create_time":"$D2020-03-10T14:31:51.418Z","update_time":"$D2020-11-22T03:58:52.113Z","view_time":null,"first_public_time":"$D2020-03-10T14:34:57.030Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"f7eb604de06625ed","login":"innermatrix","name":"Iris Artin","avatar_url":"https://avatars-next.observableusercontent.com/781cf1ee03bb64ebe77f2c23cb2cf99cb5477757f4f5e8b778158428d5f71908","tier":"starter_2024"},"version":130,"publish_version":130,"role":null,"authored":false,"authors":[{"type":"individual","id":"eb2c49d0af58d6ef","login":"innermatrix","name":"Iris Artin","avatar_url":"https://avatars-next.observableusercontent.com/781cf1ee03bb64ebe77f2c23cb2cf99cb5477757f4f5e8b778158428d5f71908","tier":null}],"members":[{"type":"individual","id":"eb2c49d0af58d6ef","login":"innermatrix","name":"Iris Artin","avatar_url":"https://avatars-next.observableusercontent.com/781cf1ee03bb64ebe77f2c23cb2cf99cb5477757f4f5e8b778158428d5f71908","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Preact","cells":[{"id":0,"value":"md`# Preact`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"md`A utility for rendering preact in Observable notebooks. Use like so:\n\n~~~js\nimport { render, htm } from \"@airbornemint/preact\"\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"render(htm)`\n

Lorem ipsum

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"md`By default, the DOM is rendered inside a plain \\`div\\`, but you can customize it:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"render(htm, html`

`)`\n

Lorem ipsum

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"md`Also works as an Observable view:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"viewof testValue = render(htm)``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"testValue\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"viewof t1 = render(htm)`<${Test}/>`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"$2e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"t1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"md`---\n## Implementation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"function render(vdommer, container = html`

`) {\n return function() {\n Preact.render(vdommer(...arguments), container);\n container.addEventListener(\n 'input',\n evt => {\n // Can allow event to bubble because not altering value\n container.value = evt.target.value;\n },\n { passive: true }\n );\n\n // If you need composite value from children, it's on you to construct it\n container.value = [...container.children]\n .map(child => child.value)\n .find(value => value !== undefined);\n return container;\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"htm = (await require(\"htm@2/dist/htm.umd.js\")).bind(Preact.h)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"Preact = require('preact@10/dist/preact.umd.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2d:"$2c:body"