31: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})

`; } }32:[] 2f:{"title":"Preact","cells":[{"id":0,"value":"md`# Preact`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":8,"value":"render(htm)`\n

Lorem ipsum

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":37,"value":"render(htm, html`

`)`\n

Lorem ipsum

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":45,"value":"md`Also works as an Observable view:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"viewof testValue = render(htm)``","pinned":true,"hidden":false,"mode":"ojs"},{"id":48,"value":"testValue\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":67,"value":"viewof t1 = render(htm)`<${Test}/>`","pinned":true,"hidden":false,"mode":"ojs"},{"id":71,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":75,"value":"t1","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"md`---\n## Implementation`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":10,"value":"htm = (await require(\"htm@2/dist/htm.umd.js\")).bind(Preact.h)","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"Preact = require('preact@10/dist/preact.umd.js')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}