30:T736,bind = (input, view) => { const runtime = new ObservableRuntime({}); const main = runtime.module(); main.define('input', () => { return input; }); main.define('value', ['input'], x => { return Generators.input(x); }); let input_generator = generator_from_observable_variable(main, 'input'); let value_generator = generator_from_observable_variable(main, 'value'); run(async () => { let initial_skip = view.value != null; for await (let value of value_generator) { if (initial_skip) { initial_skip = false; continue; } if (view.value !== value) { console.group('UPDATE VIEW'); console.log('FROM view.value:', view.value); console.log('TO value:', value); console.groupEnd('UPDATE VIEW'); view.value = value; } } }); let last_input = input; function update({ value }) { if (last_input) { last_input.value = value; last_input.dispatchEvent(new CustomEvent('input')); } } view.addEventListener("input", update); if (!generatorish(input)) { input.value = view.value; } return disposable( generatorish(input) ? run(async function*() { for await (let input of input_generator) { last_input = input; if (input.value !== view.value) { console.group('UPDATE INPUT'); console.log('FROM input.value:', input.value); console.log('TO view.value:', view.value); console.groupEnd('UPDATE INPUT'); input.value = view.value; // input.dispatchEvent(new CustomEvent('input', { bubbles: true })); } yield input; } }) : input, () => { view.removeEventListener("input", update); // generator.return(); } ); }31:T25eb,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; } } class ComposeOutput { constructor(map_fn) { this.map_fn = map_fn; } } // 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` ); } if (compose_view instanceof ComposeOutput) { // Outputs take the current value of the whole template as argument, // and do not feed into the value itself main.define(`viewof_${index}`, ['value'], value => cell.map_fn(value)); } else { // 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 }; }); let root_container = DOM.element('span'); let everything_generator = generator_from_observable_variable( main, 'everything' ); run(async function() { let container_element = null; let current_value = null; let viewof_elements = null; let last_viewofs = null; let initial_yield_done = false; // let generator = generator_from_observable_variable(main, 'everything'); for await (let { value, viewofs, value_changed, viewofs_changed } of everything_generator) { // Generate the view first, so we can set the value on it below if ( viewofs_changed && viewof_elements != null && container_element != null ) { let all_viewofs = _.zip(last_viewofs, viewofs, viewof_elements); let changed_viewofs = all_viewofs.filter(([x, y, z]) => x === y); viewof_elements = []; for (let [old_viewof, new_viewof, container] of all_viewofs) { if (old_viewof === new_viewof) { viewof_elements.push(container); continue; } let new_container = DOM.element('span'); new_container.append(new_viewof); container.replaceWith(new_container); viewof_elements.push(new_container); } } if (initial_yield_done === false) { viewof_elements = viewofs.map(view_of => { let container = DOM.element('span'); container.append(view_of); return container; }); container_element = template_fn(template_strings, ...viewof_elements); Object.defineProperty(root_container, 'value', { set: value => { current_value = value; if (has_default) { console.group('DEFAULT COMPOSE UPDATED'); console.log('viewofs[0]:', viewofs[0]); console.log('FROM viewofs[0].value:', viewofs[0].value); console.log('TO value:', value); console.groupEnd('DEFAULT COMPOSE UPDATED'); viewofs[0].value = value; viewofs[0].dispatchEvent( new CustomEvent('input', { bubbles: false }) ); } else { // TODO Hmmm } }, get: () => { return current_value; } }); } if (value_changed) { console.group('COMPOSE VALUE'); console.log('FROM root_container.value:', root_container.value); console.log('TO value:', value); console.groupEnd('COMPOSE VALUE'); root_container.value = value; root_container.dispatchEvent( new CustomEvent('input', { bubbles: false }) ); } last_viewofs = viewofs; // But only after we set the value, we yield if (initial_yield_done === false) { initial_yield_done = true; // yield container_element; root_container.append(container_element); } } }); disposal(root_container).then(() => { everything_generator.return(); // Just get rid of the whole runtime, // also invokes all disposables inside cells 👍🏾 runtime.dispose(); }); return root_container; // 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(root_container, () => { // everything_generator.return(); // // 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.output = map_fn => new ComposeOutput(map_fn); 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 x Bind","cells":[{"id":0,"value":"md`# Compose *x* Bind`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"viewof visual_view = new VisualView(\"\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"viewof visual_view.bind(html``)","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"viewof visual_view.bind(\n compose.html`

${compose.default(html``)}

`\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":242,"value":"viewof visual_view.bind(compose.md`\n **Input:** ${compose.default(html``)} \n **Value:** ${compose.output(x => x)}\n`)","pinned":true,"hidden":false,"mode":"ojs"},{"id":387,"value":"compose.md`\n **Input:** ${compose.viewof({\n title: viewof visual_view.bind(html``)\n })} \n **Value:** ${compose.output(({ title }) => [...title].join('-'))}\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":526,"value":"viewof value_from_mask = compose.md`\n**Input:** ${compose.viewof({\n phone: input_with_mask({ mask: phoneMask, guide: false })\n})} \n\n${compose.output(({ phone }) =>\n phone.replace(/[^0-9]/g, '').length === 10 ? '✅CORRECT' : '❌INCORRECT'\n)}\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":529,"value":"value_from_mask","pinned":true,"hidden":false,"mode":"ojs"},{"id":515,"value":"input_with_mask = ({\n mask,\n inputElement = html``,\n ...props\n} = {}) => {\n let maskedInputController = textmask.maskInput({\n inputElement: inputElement,\n mask: mask,\n ...props\n });\n\n disposal(inputElement, () => {\n maskedInputController.destroy();\n });\n return inputElement;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":516,"value":"phoneMask = [\n '(',\n /[1-9]/,\n /\\d/,\n /\\d/,\n ')',\n ' ',\n /\\d/,\n /\\d/,\n /\\d/,\n '-',\n /\\d/,\n /\\d/,\n /\\d/,\n /\\d/\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"class VisualView {\n constructor(value) {\n Object.defineProperties(this, {\n _list: { value: [], writable: true }\n });\n\n this._value = value;\n }\n get value() {\n return this._value;\n }\n set value(value) {\n if (this._value !== value) {\n console.group('VISUAL VIEW SET VALUE');\n console.log('FROM this._value:', this._value);\n console.log('TO value:', value);\n console.groupEnd('VISUAL VIEW SET VALUE');\n this._value = value;\n this.dispatchEvent({ type: \"input\", value });\n }\n }\n addEventListener(type, listener) {\n if (type != \"input\" || this._list.includes(listener)) return;\n this._list = [listener].concat(this._list);\n }\n removeEventListener(type, listener) {\n if (type != \"input\") return;\n this._list = this._list.filter(l => l !== listener);\n }\n dispatchEvent(event) {\n const p = Promise.resolve(event);\n this._list.forEach(l => p.then(l));\n }\n bind(element) {\n return bind(element, this);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":351,"value":"import { View } from \"@mbostock/synchronized-views\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":488,"value":"import { dedent } from \"@dralletje/dedent-for-template-strings\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":512,"value":"textmask = require('vanilla-text-mask')","pinned":false,"hidden":false,"mode":"ojs"},{"id":344,"value":"md`\n## Tha code\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":341,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"import {\n ObservableRuntime,\n generator_from_observable_variable,\n precondition\n} from \"@dralletje/compose-viewof\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"run = fn => fn()","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"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":49,"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":29,"value":"that = function() {\n return this;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"disposable = (value, dispose) => {\n if (generatorish(value)) {\n return {\n [Symbol.iterator]: that,\n [Symbol.asyncIterator]: that,\n next: (...args) => {\n let result = value.next(...args);\n return result;\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":247,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs"},{"id":465,"value":"import { disposal } from \"@mbostock/disposal\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}