30:T40a,md` # Compose viewof I felt like there was one thing lacking from the templating Observable, and that was a way to compose "viewofs", the different elements/views people make that can hold values, with html to create compound forms. I figured a way, using nested Observable Runtimes, to do this reliably. Below are some examples. You can put elements you'd normally use with \`viewof some_config = ...\` inside custom html now, or even markdown. You can also combine multiple elements into one object of options. Similar to [@mbostock/form-input](https://observablehq.com/@mbostock/form-input), but this works for every viewof-able view. Inside your template string, wrap everything you want to end up in the resulting value with \`compose.viewof({ name: ... })\`, where name will be the property name in the value. If you want to return one value, not an object with keys, but style your input nontheless, you can wrap the value in \`compose.default(...)\` instead. ~~~js import { compose } from '@dralletje/compose-viewof' ~~~ `31:T19a7,compose = { // Wrappers so I can quickly/intuitively check for values created with // `compose({ ... })` and `compose.default()` class ComposeView { constructor(name, view) { this.name = name; this.view = view; } } class ComposeDefault { constructor(view) { this.view = view; } } // The real powerhouse of this function let compose_template = (template_fn, template_strings, ...input_cells) => { // Special case where I want the .value of this element to not be an object, but just this value let has_default = input_cells.some(cell => cell instanceof ComposeDefault); // Setup const runtime = new ObservableRuntime({}); const main = runtime.module(); let cells_with_index = Object.entries(input_cells); // Define a "viewof_" for every interpolated value. // This is useful, because this way we can still use anything that would normally render in a cell. // In normal html or md templates this is not the case, generators and promises do not "just work". for (let [index, compose_view] of cells_with_index) { let is_compose_value = compose_view instanceof ComposeView || compose_view instanceof ComposeDefault; let cell = is_compose_value ? compose_view.view : compose_view; // Better safe than sorry if (is_compose_value) { precondition( !(cell instanceof DocumentFragment), `For now I do not allow DocumentFragment's in compose(...), as they would normally not be rendered in a notebook cell either` ); } // Define the cell as a constant. // Turns out that if you put a function as interpolation, // compose will actually treat it like a cell container 🙃 main.define(`viewof_${index}`, cell); } // Define the value cells, derive from the viewof cells if (has_default) { // In the has_default case this is really easy, and really most of the lines go to extra error checking. // This thing is most likely buggy enough as it is, let me at least disallow anything I know is wrong. precondition( !input_cells.some(cell => cell instanceof ComposeView), `When using a ComposeDefault, there are not ComposeValues allowed` ); precondition( input_cells.filter(cell => cell instanceof ComposeDefault).length === 1, `You can't have multiple ComposeDefault's, that doesn't make sense!` ); // Find the single default cell and derive value from it let [default_cell_index, _] = cells_with_index.find( ([_, cell]) => cell instanceof ComposeDefault ); main.define('value', [`viewof_${default_cell_index}`], view => { return Generators.input(view); }); } else { // Define a "valueof_" from "viewof_" for every compose() value. let compose_cells_with_index = cells_with_index.filter( ([_, view]) => view instanceof ComposeView ); for (let [index, compose_value] of compose_cells_with_index) { let name = compose_value.name; // prettier-ignore main.define(`valueof_${index}`, [`viewof_${index}`], async function*(view) { // Can't just do Generators.input, because we need the name as well, // and tried using Generators.map but it acted weirdly, but that doesn't support async 🤷‍ for await (let value of Generators.input(view)) { yield [name, value]; } }); } // Collect all the valueof cells, and combine them into an object main.define( 'value', compose_cells_with_index.map(([index, _]) => `valueof_${index}`), (...valueofs) => { let value_object = {}; for (let [name, value] of valueofs) { value_object[name] = value; } return value_object; } ); } // Cell that collects all viewof cells in one array main.define( 'viewofs', cells_with_index.map(([index, _]) => `viewof_${index}`), (...viewofs) => viewofs ); // One last cell to rule them all. // We need the "_changed" properties, so we do not refresh the html when a value changed, // because that would take a lot of processing and all inputs would be recreated and lose focus. main.define('everything', ['viewofs', 'value'], function(viewofs, value) { let previous = this || { viewofs: null, value: null }; return { viewofs, value, viewofs_changed: viewofs !== previous.viewofs, value_changed: value !== previous.value }; }); // withDispose is like Generators.disposable, but when you want to return a generator // (where Observable does not like it when you return a generator with Generators.disposable) return disposable( run(async function*() { let container_element = null; let generator = generator_from_observable_variable(main, 'everything'); for await (let { value, viewofs, value_changed, viewofs_changed } of generator) { // Generate the view first, so we can set the value on it below if (viewofs_changed) { container_element = template_fn(template_strings, ...viewofs); } if (value_changed) { container_element.value = value; container_element.dispatchEvent(new CustomEvent('input')); } // But only after we set the value, we yield if (viewofs_changed) { yield container_element; } } }), () => { // Just get rid of the whole runtime, // also invokes all disposables inside cells 👍🏾 runtime.dispose(); } ); }; let compose = template_fn => { return (...args) => compose_template(template_fn, ...args); }; compose.default = value => new ComposeDefault(value); compose.viewof = definition_object => { let [name, ...other_keys] = Object.keys(definition_object); precondition( other_keys.length === 0, 'compose({ ... }) takes an object with only one key' ); precondition( name != null, 'compose({ ... }) takes an object with at least one key' ); let value = definition_object[name]; precondition(value != null, `compose({ ... }) can not have null as value`); return new ComposeView(name, value); }; compose.html = compose(html); compose.md = compose(md); return compose; }32:[] 2e:{"title":"Compose viewof","cells":[{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":855,"value":"md`## Simple markdown slider`","pinned":false,"hidden":false,"mode":"ojs"},{"id":862,"value":"beauitful_slider","pinned":false,"hidden":false,"mode":"ojs"},{"id":858,"value":"viewof beauitful_slider = compose.md`\n#### Slider with title\n${compose.default(html``)}\n*Pretty nice*\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":676,"value":"md`## Combining multiple in html`","pinned":false,"hidden":false,"mode":"ojs"},{"id":441,"value":"options","pinned":false,"hidden":false,"mode":"ojs"},{"id":363,"value":"viewof options = compose.html`\n

Scrubber in my html

\n\n

\n ${compose.viewof({ a_b_c: Scrubber([1, 2, 3], { delay: 500 }) })}\n

\n Not bad right?\n

\n\n

Input in the same html

\n ${compose.viewof({ title: html`` })}\n \n

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":705,"value":"md`## \\`with_title utility\\` to make forms look like inputs from @jashkenas/inputs (also \\`compose.default\\`)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":599,"value":"scrubber_with_title","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"viewof scrubber_with_title = with_title({\n viewof: Scrubber([1, 2, 3], { delay: 500 }),\n title: 'A slider',\n description: 'This is useful'\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":33,"value":"with_title = ({ title, viewof: view, description }) => {\n return compose.html`\n

\n ${title &&\n html`

${title}

`} \n

\n ${compose.default(view)}\n

\n ${description &&\n html`

${description}

`}\n

\n `;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":720,"value":"md`## Nested compose (\\`with_title\\` inside \\`compose.html\\`)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":727,"value":"ultimate_test","pinned":false,"hidden":false,"mode":"ojs"},{"id":670,"value":"viewof ultimate_test = compose.html`\n

\n ${compose.viewof({\n scrubber_with_title: with_title({\n viewof: Scrubber([1, 2, 3], { delay: 500 }),\n title: 'Hey there',\n description: 'This is useful'\n })\n })}\n

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":738,"value":"viewof markdown_test = compose.md`\n ## Compose in markdown\n\n ### Where would you like to go?\n ${compose.default(worldMapCoordinates([-122.27, 37.87]))}\n Choose wisely, once you click you will be teleported there immediately \n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":750,"value":"markdown_test","pinned":false,"hidden":false,"mode":"ojs"},{"id":753,"value":"md`## Compose with htl.html`","pinned":false,"hidden":false,"mode":"ojs"},{"id":771,"value":"htl_html_test","pinned":false,"hidden":false,"mode":"ojs"},{"id":762,"value":"viewof htl_html_test = compose(htl_html)`\n

I don't have inspiration for forms

\n ${compose.viewof({ location: worldMapCoordinates([-122.27, 37.87]) })}\n

Slider 1

\n ${compose.viewof({\n slider1: htl_html``\n })}\n\n \n

\n\n

Slider 2

\n ${compose.viewof({\n slider2: htl_html``\n })}\n\n

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":713,"value":"md`# The actual code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":308,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":732,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":913,"value":"run = fn => fn()","pinned":true,"hidden":false,"mode":"ojs"},{"id":583,"value":"precondition = (condition, message = 'Precondition not met') => {\n if (!condition) throw new Error(message);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":562,"value":"generator_from_observable_variable = async function*(module, variable_name) {\n let raw_from_variable = Generators.observe(push => {\n let variable = module.variable({\n fulfilled: result => {\n push({ fulfilled: result });\n },\n rejected: error => push({ rejected: error })\n });\n variable.define([variable_name], x => x);\n return () => variable.delete();\n });\n\n for await (let result of raw_from_variable) {\n if (result.rejected) {\n throw result.rejected;\n }\n\n yield result.fulfilled;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":924,"value":"generator_from_cell = cell => {\n const runtime = new ObservableRuntime({});\n const main = runtime.module();\n\n return disposable(\n run(async function*() {\n let raw_from_variable = Generators.observe(push => {\n let variable = main.variable({\n fulfilled: result => {\n push({ fulfilled: result });\n },\n rejected: error => push({ rejected: error })\n });\n variable.define(cell);\n return () => variable.delete();\n });\n\n for await (let result of raw_from_variable) {\n if (result.rejected) {\n throw result.rejected;\n }\n\n yield result.fulfilled;\n }\n }),\n () => {\n runtime.dispose();\n }\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"disposable = (value, dispose) => {\n if (generatorish(value)) {\n return {\n [Symbol.iterator]: that,\n next: (...args) => {\n return value.next(...args);\n },\n return: (...args) => {\n dispose();\n return value.return(...args);\n },\n throw: value.throw && value.throw.bind(value)\n };\n } else {\n return Generators.disposable(value, dispose);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":497,"value":"that = function() {\n return this;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":908,"value":"generatorish = value => {\n return (\n value &&\n typeof value.next === \"function\" &&\n typeof value.return === \"function\"\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":314,"value":"ObservableRuntime = ObservableHq.Runtime","pinned":false,"hidden":false,"mode":"ojs"},{"id":306,"value":"ObservableHq = import(\"https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"import { html as htl_html } from \"@observablehq/htl\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":740,"value":"import { worldMapCoordinates } from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}