30:T703,async_output = async (inputs=document.createElement('input'), transformation = async x => x) => { if (!Array.isArray(inputs)) { inputs = [inputs] } if (inputs.some(input => !(input instanceof Node))) throw new Error('Argument should be an HTML input or an output (must support .value and .addEventListener).') // HACK the content has to live somewhere for replaceChildren to work. // A custom element seems good enough for now, but maybe some other solution could be better? // e.g. comment nodes / Range API https://developer.mozilla.org/en-US/docs/Web/API/Range ? const ui = document.createElement('reactive-output') // Sketching code for live updates (doesn't quite work here b/c Observable has special scope.) // const script = document.createElement('script') // script.setAttribute('nomodule', true) // script.setAttribute('type', "text/javascript") // script.innerHTML = transformation.toString() //const get_value = () => eval(script.innerHTML)(...inputs.map(input => input.value)) const get_value = () => transformation(...inputs.map(input => input.value)) let cache = await get_value() function eventof(input) { switch (input.type) { case "button": case "submit": case "checkbox": return "click"; case "file": return "change"; default: return "input"; } } ui.replaceChildren(...[cache])//, script) inputs.map((input, _) => input.addEventListener(eventof(input), async e => { cache = await get_value() ui.replaceChildren(...[cache])//, script) ui.dispatchEvent(new CustomEvent('input')) })) Object.defineProperty(ui, 'value', { get: () => cache, set: newVal => { cache = newVal ui.dispatchEvent(new CustomEvent('input')) } }) return ui }31:T6df,output = (inputs=document.createElement('input'), transformation = x => x) => { if (!Array.isArray(inputs)) { inputs = [inputs] } if (inputs.some(input => !(input instanceof Node))) throw new Error('Argument should be an HTML input or an output (must support .value and .addEventListener).') // HACK the content has to live somewhere for replaceChildren to work. // A custom element seems good enough for now, but maybe some other solution could be better? // e.g. comment nodes / Range API https://developer.mozilla.org/en-US/docs/Web/API/Range ? const ui = document.createElement('reactive-output') // Sketching code for live updates (doesn't quite work here b/c Observable has special scope.) // const script = document.createElement('script') // script.setAttribute('nomodule', true) // script.setAttribute('type', "text/javascript") // script.innerHTML = transformation.toString() //const get_value = () => eval(script.innerHTML)(...inputs.map(input => input.value)) const get_value = () => transformation(...inputs.map(input => input.value)) let cache = get_value() function eventof(input) { switch (input.type) { case "button": case "submit": case "checkbox": return "click"; case "file": return "change"; default: return "input"; } } ui.replaceChildren(...[cache])//, script) inputs.map((input, _) => input.addEventListener(eventof(input), e => { cache = get_value() ui.replaceChildren(...[cache])//, script) ui.dispatchEvent(new CustomEvent('input')) })) Object.defineProperty(ui, 'value', { get: () => cache, set: newVal => { cache = newVal ui.dispatchEvent(new CustomEvent('input')) } }) return ui }32:[] 2e:{"title":"Single-cell I/O","cells":[{"id":0,"value":"# Single-cell I/O","pinned":false,"hidden":false,"mode":"md"},{"id":268,"value":"md`\n\\`\\`\\`js\nimport {output} from '@elmisback/output'\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":485,"value":"md`\\`output()\\` makes this cell work:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":488,"value":"html`\n${viewof textInput}\n${await output(viewof textInput)}\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":672,"value":"md`(How this normally works)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":611,"value":"html`\n${viewof textInput2}\n${textInput2}\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":126,"value":"md`

\n\n

How output() works

\n
\n\\`output(HTML_input_or_inputs, transform)\\` takes an input element or list of elements and returns a \\`\\` element whose child or children are the output of \\`transform(...inputs.map(e => e.value))\\`.\n

\nWhen the inputs update, the output rerenders its contents using the new values. A \\`\\` can also be used as an input. Its value is the output of \\`transform(...inputs.map(e => e.value))\\`. Each time the inputs update or the output's value is set, the output receives an \\`input\\` event.\n\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":742,"value":"md`
\n## More examples`","pinned":false,"hidden":false,"mode":"ojs"},{"id":500,"value":"html`\n${viewof partA}\n${viewof partB}\n${output([viewof partA, viewof partB], (a, b) => a + \" ... \" + b)}\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":520,"value":"html`\n${viewof partA2}\n${viewof partC}\n${output([viewof partA2, viewof partC], (a, c) => \n html`

${a} ... ${c}

Sure, why not?

`)}\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":621,"value":"md`Observe the number of times the concatentation function runs when editing the boxes below:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":374,"value":"mutable number_of_times_concat_ran = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":355,"value":"{\n let number_of_times_run = 0\n\n // Creates an intermediate node that is not attached to the DOM but still sends updates\n const intermediate = output([viewof partD, viewof partE], (a, b) => {\n number_of_times_run += 1\n mutable number_of_times_concat_ran = number_of_times_run\n \n return a + \" ... \" + b\n })\n \n return html`\n${viewof partD}\n${viewof partE}\n${output(intermediate, v => v + ' ||| Yes! The intermediate value is only computed once')}
\n${output(intermediate, v => html`${v} ||| for each edit even though it is rendered twice.`)}\n`\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":647,"value":"md`Outputs also act like inputs in another way--when their value is set directly, they send updates. (Full dataflow is not yet implemented, so if an output is listening to two parents who are listening to the same grandparent, it will update twice whenever the grandparent updates.)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":418,"value":"out1 = output()","pinned":true,"hidden":false,"mode":"ojs"},{"id":421,"value":"{\n setInterval(() => out1.value = (out1.value || 0) + 1, 1000)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":424,"value":"out2 = output(out1) // Notice this cell is not using any Observable magic to update.","pinned":true,"hidden":false,"mode":"ojs"},{"id":459,"value":"md`## Plain JS implementation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":906,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":787,"value":"md`## Planned features\n* Proper dataflow--each update should cause only one update in each downstream node.\n* Possibly additional functions for controlling dataflow (avoiding recomputation, pausing execution), to be implemented elsewhere.\n* Storing functions on the nodes?\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":453,"value":"md`### misc`","pinned":true,"hidden":false,"mode":"ojs"},{"id":492,"value":"viewof textInput = Inputs.text({label: 'Text input', value: \"Edit me without losing focus!\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":609,"value":"viewof textInput2 = Inputs.text({label: 'Text input', value: \"In case this has never bitten you...\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":506,"value":"viewof partA = Inputs.text({value: \"What if I want\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":813,"value":"viewof partA2 = Inputs.text({value: \"What if I want\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":508,"value":"viewof partB = Inputs.text({value: \"to mix outputs together?\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":523,"value":"viewof partC = Inputs.text({value: \"to add some HTML?\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":547,"value":"viewof partD = Inputs.text({value: \"But can you\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":548,"value":"viewof partE = Inputs.text({value: \"use an output as an input?\"})","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}