30:T529,md`# Composing viewofs with the _view_ literal Lets make custom UIs on Observable _easy_ by composing views. We wrap the amazing [hypertext literal](https://observablehq.com/@observablehq/htl) with a interceptor that looks for _[key, view]_ arguments. It uses the key to determine what field to map the view's value to in the container. ~~~js viewof container = view\`

\${["child1", Inputs.text()]} \${["child2", Inputs.range()]}\` ~~~ The syntax of a 2 element array is inspired by [Object.entries(...)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries). By reusing the [hypertext literal](https://observablehq.com/@observablehq/htl) you are able to build your custom ui view using HTML, the best abstraction for layout. Because _view_ itself is a viewof, finally, we can hierarchically build up custom views from standard library views like [@observablehq/inputs](https://observablehq.com/@observablehq/inputs) ~~~js import {view} from '@tomlarkworthy/view' ~~~ #### How to use the view-literal in UI development There is a substantial guide to [scaling UI development](https://observablehq.com/@tomlarkworthy/ui-development) which uses on this view literal quite heavily, and also has some weighty examples than the reference documentation here. `31:T498,function cautious( /* (apply, reset) => view */ viewBuilder, { nospan = false } = {} ) { const apply = DOM.uid().id; const reset = DOM.uid().id; function inputFilter(node, { filter } = {}) { node.addEventListener("input", (e) => { filter(e) || e.stopImmediatePropagation(); }); return node; } function wrapper( node, { initialOnly = false, signal = (e) => e.detail === reset } = {} ) { const ui = nospan ? node : html`${node}`; ui.value = { ...node.value }; node.addEventListener("input", (e) => { if (signal(e)) { node.value = ui.value; e.stopImmediatePropagation(); } else if (!initialOnly) { ui.value = { ...node.value }; } }); return ui; } function trigger(detail) { return (e) => { if (!e) console.log("An event needs to be passed to apply and reset"); e.target.dispatchEvent( new CustomEvent("input", { bubbles: true, detail }) ); }; } return wrapper( inputFilter(viewBuilder(trigger(apply), trigger(reset)), { filter: (e) => e.detail === apply || e.detail === reset || !e.isTrusted }) ); }32:T955,// Copied from https://github.com/observablehq/inputs/blob/main/src/bind.js bindOneWay = { function disposal(element) { return new Promise((resolve) => { requestAnimationFrame(() => { if (!element.closest) return; const target = element.closest(".observablehq"); if (!target) return resolve(); const observer = new MutationObserver(() => { if (target.contains(element)) return; observer.disconnect(), resolve(); }); observer.observe(target, { childList: true }); }); }); } return function bindOneWay( target, /* primary*/ source, { invalidation, transform = (d) => d, onlyDefined = false } = {} ) { const sourceEvent = eventof(source); const targetEvent = eventof(target); const onsource = () => { set(target, source); target.dispatchEvent(new Event(targetEvent, { bubbles: true })); }; onsource(); source.addEventListener(sourceEvent, onsource); if (!invalidation) invalidation = disposal(target); invalidation.then(() => source.removeEventListener(sourceEvent, onsource)); return target; function get(input) { switch (input.type) { case "range": case "number": return input.valueAsNumber; case "date": return input.valueAsDate; case "checkbox": return input.checked; case "file": return input.multiple ? input.files : input.files[0]; default: return input.value; } } function set(target, source) { const value = transform(get(source)); if (onlyDefined && !value) return; switch (target.type) { case "range": case "number": target.valueAsNumber = value; break; case "date": target.valueAsDate = value; break; case "checkbox": target.checked = value; break; case "file": target.multiple ? (target.files = value) : (target.files = [value]); break; default: target.value = value; break; } } function eventof(input) { switch (input.type) { case "button": case "submit": return "click"; case "file": return "change"; default: return "input"; } } }; }33:T1b1f,function wrap(fn, strings, ...exprs) { let singleton = undefined; let start = undefined; // To know where to start dynamic objects let builder = undefined; // For new keys are added dynamically const views = {}; const pexpr = exprs.map((exp) => { // All special functions are [key, ...] // Otherwise we pass through if (!Array.isArray(exp) || typeof exp[0] !== "string") { return exp; } const hidden = exp[0].startsWith("_"); const key = hidden ? exp[0].substring(1) : exp[0]; if (key === "value") throw new Error("Cannot use 'value' as a key"); let presentation; if (exp.length === 2 && exp[1] instanceof EventTarget) { // SINGLE VIEW PASSED IN if (key === "...") { // SINGLETON! singleton = exp[1]; } else { // look for [key, HTML] entries views[key] = exp[1]; } presentation = exp[1]; } else if ( // ARRAY PASSED IN (NO BUILDER) exp.length === 2 && Array.isArray(exp[1]) && exp[1].every((e) => e instanceof EventTarget) ) { if (key === "...") throw new Error("Spread not supported for arrays ATM"); /* const start = document.createComment(key); arrayViews[key] = { start, array: exp[1] }; presentation = [start, ...exp[1]];*/ presentation = arrayView({ name: key, initial: exp[1] }); views[key] = presentation; } else if ( // ARRAY PASSED IN (WITH BUILDER) exp.length === 3 && Array.isArray(exp[1]) && exp[1].every((e) => e instanceof EventTarget) && typeof exp[2] === "function" ) { if (key === "...") throw new Error("Spread not supported for arrays ATM"); /* const start = document.createComment(key); arrayViews[key] = { start, array: exp[1], builder: exp[2] }; presentation = [start, ...exp[1]];*/ presentation = arrayView({ name: key, initial: exp[1], builder: exp[2] }); views[key] = presentation; } else if ( // SPREAD OBJECT (NO BUILDER) exp.length === 2 && key === "..." && typeof exp[1] === "object" && Object.keys(exp[1]).every((e) => typeof e === "string") && Object.values(exp[1]).every((e) => e instanceof EventTarget) ) { Object.entries(exp[1]).forEach((e) => (views[e[0]] = e[1])); presentation = Object.values(exp[1]); } else if ( // SPREAD OBJECT (WITH BUILDER) exp.length === 3 && key === "..." && typeof exp[1] === "object" && Object.keys(exp[1]).every((e) => typeof e === "string") && Object.values(exp[1]).every((e) => e instanceof EventTarget) && typeof exp[2] === "function" ) { Object.entries(exp[1]).forEach((e) => (views[e[0]] = e[1])); start = document.createComment(key); builder = exp[2]; presentation = [start, ...Object.values(exp[1])]; } else { presentation = exp; } if (hidden) { const forwardEvent = (evt) => { const clone = new evt.constructor(evt.type, evt); self.dispatchEvent(clone); }; if (presentation.addEventListener) { presentation.addEventListener("input", forwardEvent); } else if (Array.isArray(presentation)) { presentation.forEach((p) => { // The first element can be the start event sometimes if (p.addEventListener) { p.addEventListener("input", forwardEvent); } }); } else { throw new Error("Not sure how to deal with this hidden element"); } return undefined; // No DOM representation } else { return presentation; // Places in DOM } }); const self = fn(strings, ...pexpr); if (singleton) { if (Object.keys(views).length !== 0) throw new Error("Singleton defined but additional properties supplied"); // Users are expected to call dispatchEvent on view, so the inner singleton // need to know about these events for the view to work // => events need to be copied over, if originating from here self.addEventListener("input", (evt) => { if (evt.target === self) { const clone = new evt.constructor(evt.type, evt); singleton.dispatchEvent(clone); } }); return Object.defineProperties(self, { value: { get: () => singleton.value, set: (val) => (singleton.value = val), configurable: true }, singleton: { value: singleton, enumerable: true } }); } // Non-singleton (Object or Array) return Object.defineProperties(self, { value: { get() { return Object.defineProperties( {}, Object.keys(views).reduce((acc, key) => { acc[key] = { get: () => views[key].value, set: (v) => (views[key].value = v), enumerable: true }; return acc; }, {}) ); }, set(newValues) { Object.entries(newValues).forEach(([key, newValue]) => { if (views[key]) { views[key].value = newValue; // Update of existing child value } else if (start && builder) { // Adding a new key const parent = start.parentNode; const newView = builder(newValue); views[key] = newView; parent.appendChild(newView); // Add top level entry too Object.defineProperty(self, key, { value: newView, enumerable: true, configurable: true }); } }); // If we are a dynamic Object, we need to remove keys too Object.entries(views).forEach(([key, oldValue]) => { if (!newValues.hasOwnProperty(key)) { // It needs to go const oldView = views[key]; delete views[key]; if (oldView.remove) oldView.remove(); delete self[key]; } }); }, configurable: true }, ...Object.keys(views).reduce( // Add top level field to access the subviews in the parent viewof (acc, key) => { acc[key] = { get: () => views[key], set: (newView) => { const oldView = views[key]; delete views[key]; if (oldView.remove) oldView.remove(); // assigning an arrayView (special cased) if (oldView.length && newView.length) { newView = arrayView({ initial: newView, builder: oldView.builder }); } views[key] = newView; if (newView instanceof Node) self.appendChild(newView); }, enumerable: true, configurable: true }; return acc; }, {} ) }); }34:T1808,function arrayView({ name = "arrayNode" + DOM.uid().id, value = [], initial = [], builder } = {}) { if (value.length > 0 && !builder) throw new Error( "You cannot initialize an arrayView with data without a builder" ); const frag = new DocumentFragment(); const subviewToFragmentEventCloner = (e) => { const new_e = new e.constructor(e.type, e); frag.dispatchEvent(new_e); }; const _builder = builder ? (arg) => { const subview = builder(arg); subview.addEventListener("input", subviewToFragmentEventCloner); return subview; } : undefined; const unbuilder = (subview) => { subview.removeEventListener("input", subviewToFragmentEventCloner); }; initial.forEach((subview) => subview.addEventListener("input", subviewToFragmentEventCloner) ); const start = document.createComment("START:" + name); const end = document.createComment("END:" + name); let subviews = (_builder ? value.map(_builder) : []).concat(initial); frag.append(...[start, ...subviews, end]); frag.addEventListener("input", (e) => { // https://stackoverflow.com/questions/11974262/how-to-clone-or-re-dispatch-dom-events const new_e = new e.constructor(e.type, e); start.dispatchEvent(new_e); }); const getIndexProperty = (index) => ({ get: () => subviews[index], enumerable: true, configurable: true }); const customSplice = (startIndex, deleteCount, ...items) => { const parent = start.parentNode; startIndex = Math.floor(startIndex); const removedData = []; // sync the splice with the DOM let node = start; // Forward to begining of the splice for (let i = 0; i < startIndex && i < subviews.length; i++) node = node.nextSibling; // delete 'deleteCount' times for (let i = 0; i < deleteCount && i < subviews.length; i++) { const toDelete = node.nextSibling; removedData.push(toDelete.value); unbuilder(toDelete); toDelete.remove(); } // add additional items const itemViews = []; for (let i = items.length - 1; i >= 0; i--) { const subview = _builder(items[i]); Object.defineProperty(frag, i, getIndexProperty(i)); let presentation = subview instanceof HTMLElement ? subview : htl.html`${subview}`; itemViews.unshift(subview); parent.insertBefore(presentation, node.nextSibling); } // Apply to cache subviews.splice(startIndex, deleteCount, ...itemViews); // Let flow upwards to array too return removedData; }; // We intercept operations to the data array and use it to drive DOM operations too. const dataArrayProxyHandler = { get: function (target, prop, receiver) { const args = arguments; if (prop === "splice") { return customSplice; } else if (prop === "push") { return (...elements) => { customSplice(subviews.length, 0, ...elements); return subviews.length; }; } else if (prop === "pop") { return () => { return customSplice(subviews.length - 1, 1)[0]; }; } else if (prop === "shift") { return () => { return customSplice(0, 1)[0]; }; } else if (prop === "unshift") { return (...elements) => { customSplice(0, 0, ...elements); return subviews.length; }; } return Reflect.get(...args); }, set(obj, prop, value) { if (!isNaN(+prop)) { // we also need to set the view customSplice(+prop, 1, value); } return Reflect.set(...arguments); } }; // Add data channel Object.defineProperties(frag, { value: { get: () => new Proxy( subviews.map((sv) => sv.value), dataArrayProxyHandler ), set: (newArray) => { const vArr = _.cloneDeep(newArray); const parent = start.parentNode; if (builder) { // We should be true to the operation and tear of the DOM and then replace it. subviews.forEach((sv) => (sv.remove ? sv.remove() : undefined)); subviews = vArr.map((data) => { const subview = _builder(data); let presentation = subview instanceof HTMLElement ? subview : htl.html`${subview}`; parent.insertBefore(presentation, end); return subview; }); } else { // We have to work around the limitations and try to do the operation without // building, so this only can work if you are setting it to something smaller vArr.forEach((v, i) => { if (i < subviews.length) { subviews[i].value = v; // mutate inplace } else { let built = _builder(v); // append additional subviews[i] = built; if (!(built instanceof HTMLElement)) built = htl.html`${built}`; parent.appendChild(built); } }); for (var i = subviews.length - 1; i >= vArr.length; i--) { // delete backwards const deleted = subviews.pop(); if (deleted.remove) deleted.remove(); } } } } }); // Add presentation channel return Object.defineProperties(frag, { remove: { value: () => { const toRemove = []; for (var node = start; node !== end; node = node.nextSibling) { toRemove.push(node); } toRemove.push(end); toRemove.forEach((n) => n.remove()); } }, length: { get: () => subviews.length, enumerable: true, configurable: true }, [Symbol.iterator]: { value: () => { let index = 0; return { next() { if (index < subviews.length) { let val = subviews[index]; index++; return { value: val, done: false }; } else return { done: true }; } }; } }, ...subviews.reduce((acc, sv, index) => { acc[index] = getIndexProperty(index); return acc; }, {}) }); }35:T4c2,htl.html`

${Inputs.button("reset", { reduce: () => { viewof numbers.value = [1, 2, 3, 4, 5, 6]; viewof numbers.dispatchEvent(new Event("input", { bubbles: true })); } })} ${Inputs.button("delete last", { reduce: () => { numbers.splice(numbers.length - 1, 1); viewof numbers.dispatchEvent(new Event("input", { bubbles: true })); } })} ${Inputs.button("delete random", { reduce: () => { const choice = Math.random() * numbers.length; numbers.splice(choice, 1); viewof numbers.dispatchEvent(new Event("input", { bubbles: true })); } })} ${Inputs.button("push number", { reduce: () => { numbers.push(numbers.length + 1); viewof numbers.dispatchEvent(new Event("input", { bubbles: true })); } })} ${Inputs.button("unshift", { reduce: () => { numbers.unshift(0); viewof numbers.dispatchEvent(new Event("input", { bubbles: true })); } })} ${Inputs.button("pop", { reduce: () => { numbers.pop(); viewof numbers.dispatchEvent(new Event("input", { bubbles: true })); } })} ${Inputs.button("shift", { reduce: () => { numbers.shift(); viewof numbers.dispatchEvent(new Event("input", { bubbles: true })); } })} `36:[] 2e:{"title":"Composing viewofs with the view literal","cells":[{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1105,"value":"Known Issues:\n- https://observablehq.com/@tomlarkworthy/dynamic-controls-example cannot bind to arrayView (DocumentFragment does not emit events)","pinned":false,"hidden":false,"mode":"md"},{"id":511,"value":"toc()","pinned":false,"hidden":false,"mode":"ojs"},{"id":321,"value":"md`## Change log\n\n- 2021-03-03 *bindOneWay* has *onlyDefined* option added\n- 2021-12-09 Bugfix for *arrayView* not bubbling events.\n- 2021-11-05 *arrayView* refactored out\n- 2021-09-05 [@mootari](/mootari) added lazy loading for testing, thus slimming its footprint significantly in production..\n- 2021-07-29, hidden modifier added\n- 2021-07-05, _array_ binding is now dynamic\n- 2021-06-21, added _singleton_, _array_ and _object_ collection support\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":255,"value":"md`## About\n\nThe original need for a UI composition helper was noted by [@mootari](/@mootari) in a [Github issue](https://github.com/observablehq/inputs/issues/73). [@mbostock](/@mbostock) wrote some very nice composition tactics and greatly clarified desired behavior and, finally, I added the template syntax and passthrough API. It took us several months to get to this!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"md`#### Demo`","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"viewof composite = view`

${[\"r1\", Inputs.range([0, 10])]}

${[\"r2\", Inputs.range([0, 3])]}

${[\n \"text\",\n Inputs.text({\n label: \"Enter some text\"\n })\n ]}

\n\n

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":62,"value":"md`## Back-writable\n\nYou can write the values back into the component by setting 'value'. This works for sub-components too, as long as everything is following [reusability guidlines](https://observablehq.com/@tomlarkworthy/ui-linter).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"htl.html`\n `\n )\n ]}\n ${[\n \"c2\",\n cautious(\n (apply, reset) => view`

\n ${['baz', Inputs.range([0, 100], { label: 'Baz', step: 1 })]}\n ${['bat', Inputs.text({ value: 'change me', label: 'Bat' })]}\n

\n \n `\n )\n ]}\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":525,"value":"md`### bindOneWay\n\nAs views become composite heirarchies, its useful to transform their values as you connect their parts unidirectionally.\n\n_bindOneWay(target, source, transform, options)_ is a *one-way* bind between event sources, that returns the target. _options_ keys include: _invalidation_, and _transform_.\n\nTransform allows you to alter the data as it passed between from source to target. Unlike _Inputs.bind_, an event is raised on the target, making it more useful for chaining.\n\nThe signature follows Observables precedence (https://github.com/observablehq/inputs#bind)\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":566,"value":"viewof slider = Inputs.range([0, 10], { value: 0, label: \"Try increasing me\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":550,"value":"viewof levels = bindOneWay(\n Inputs.radio([\"0\", \"low\", \"high\"], { disabled: true }),\n viewof slider,\n {\n transform: v => (v === 0 ? \"0\" : v < 5 ? \"low\" : \"high\")\n }\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":590,"value":"viewof levelsText = bindOneWay(Inputs.text({ disabled: true }), viewof levels, {\n transform: l => `The level is ${l}`\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":534,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":608,"value":"md`### variable\n\nVariables allow you to add additional degrees of freedom to a component as normal views. They have an contained 'value', and they can be bind to.\n\n\nThe contract of Observable states changes to a view's value should update visual appearance **but not cascade**, whereas if an _'input'_ events is dispatch the cell should cascade Dataflow. Thus a variable defines an additional event type 'assign' which is emmitted whenever the variable is assigned. This is so you can hook variables being assigned to and make DOM manipulations without causing a dataflow cascade.\n\nThe toString of variable is a coercion of the value, so a variable as a view can be placed in attribute nodes etc.\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":610,"value":"function variable(value, { name = \"variable\" } = {}) {\n const self = document.createComment(name);\n return Object.defineProperties(self, {\n value: {\n get: () => value,\n set: newValue => {\n value = newValue;\n self.dispatchEvent(new CustomEvent('assign', { detail: newValue }));\n },\n enumerable: true\n },\n toString: {\n value: () => `${value}`\n }\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":616,"value":"exmple_variable = variable(5)","pinned":true,"hidden":false,"mode":"ojs"},{"id":650,"value":"(exmple_variable.value = 44)","pinned":true,"hidden":false,"mode":"ojs"},{"id":653,"value":"{\n let resolve = null;\n exmple_variable.addEventListener('assign', evt => resolve(evt.detail));\n while (true) {\n yield new Promise(r => (resolve = r));\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":101,"value":"md`## Code\n\nMost of the work is done by _htl_, we are simply adding a new _[key, HTML]_ case\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"function view(strings, ...exprs) {\n return wrap(htl.html, strings, ...exprs);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":138,"value":"function viewSvg(strings, ...exprs) {\n return wrap(htl.svg, strings, ...exprs);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":1084,"value":"### arrayView\n\narrayView is a DocumentFragment whose nodes are subviews organised in an array. It is initialized with a *builder* of which is a function from data to a subview. E.g. `(str) => Inputs.text({value: str})`, and it can be initialised with a set of views.\n\nIts presentation layer is a DocumentFragment, but with added array like behaviour so subviews are indexable like an array.\n\nIts data object is an array, whose in-place methods (splice, push, pop, shift, unshift) are mirrored to DOM manipulation.\n\nSo assigning a new data array *e.g.* `view.value = [...]`, will replace the whole DOM. Pushing an element on an array will insert a single DOM *e.g.* `view.push(...)` using the *builder* to make the new DOM element. By preferring in-place manipulations you can create efficient UIs that minimize DOM manipulations.\n\n\ntodo\n- Its pretty confusing viewof array.splice does not work now\n","pinned":false,"hidden":false,"mode":"md"},{"id":1083,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":1082,"value":"md`length: ${numbers.length} with elements: ${numbers.join(\", \")}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1081,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1080,"value":"viewof numbers = view`\n ${[\n \"...\",\n arrayView({\n value: [1, 2, 3, 4, 5, 6],\n builder: (number) =>\n view``\n })\n ]}\n

${[\"...\", Inputs.number({ value: number })]}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1079,"value":"viewof arrayViewTests = testing.createSuite({\n name: \"arrayView Tests\",\n timeout_ms: 1000\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1141,"value":"arrayViewTests.test(\"arrayView dispatchEvent bubbles to container\", (done) => {\n const av = arrayView({ builder: (v) => Inputs.input(v) });\n const container = view`

${av}`;\n container.addEventListener(\"input\", () => done());\n av.dispatchEvent(new Event(\"input\", { bubbles: true }));\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1156,"value":"arrayViewTests.test(\"arrayView subview events bubble to arrayView\", (done) => {\n const av = arrayView({\n value: [1],\n builder: (v) => Inputs.input(v)\n });\n av.addEventListener(\"input\", () => done());\n av[0].dispatchEvent(new Event(\"input\", { bubbles: true }));\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1078,"value":"arrayViewTests.test(\"arrayView initialization (data + builder)\", () => {\n const av = arrayView({\n value: [1],\n builder: (number) => Inputs.input(\"foo\")\n });\n expect(av[0].value).toBe(\"foo\");\n expect(av.value[0]).toBe(\"foo\");\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1077,"value":"arrayViewTests.test(\"arrayView initialization (initial)\", () => {\n const av = arrayView({ initial: [Inputs.input(\"foo\")] });\n expect(av[0].value).toBe(\"foo\");\n expect(av.value[0]).toBe(\"foo\");\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1091,"value":"arrayViewTests.test(\"arrayView write element\", () => {\n const av = arrayView({\n initial: [Inputs.input(\"foo\")],\n builder: Inputs.input\n });\n expect(av[0].value).toBe(\"foo\");\n expect(av.value[0]).toBe(\"foo\");\n\n av.value[0] = \"bar\";\n\n expect(av[0].value).toBe(\"bar\");\n expect(av.value[0]).toBe(\"bar\");\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1076,"value":"arrayViewTests.test(\"arrayView splice (delete)\", () => {\n const av = arrayView({ initial: [Inputs.input(\"foo\")] });\n expect(av[0].value).toBe(\"foo\");\n expect(av.value[0]).toBe(\"foo\");\n expect(av.length).toBe(1);\n expect(av.value.length).toBe(1);\n\n av.value.splice(0, 1);\n\n expect(av[0]).toBe(undefined);\n expect(av.value[0]).toBe(undefined);\n expect(av.value.length).toBe(0);\n expect(av.length).toBe(0);\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1075,"value":"arrayViewTests.test(\"arrayView splice out of bounds (delete)\", () => {\n const av = arrayView({ initial: [Inputs.input(\"foo\")] });\n expect(av[0].value).toBe(\"foo\");\n expect(av.value[0]).toBe(\"foo\");\n expect(av.length).toBe(1);\n expect(av.value.length).toBe(1);\n\n av.value.splice(1, 1);\n\n expect(av[0].value).toBe(\"foo\");\n expect(av.value[0]).toBe(\"foo\");\n expect(av.length).toBe(1);\n expect(av.value.length).toBe(1);\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1074,"value":"arrayViewTests.test(\"arrayView splice (add)\", () => {\n const av = arrayView({ builder: (v) => Inputs.input(v) });\n av.value.splice(0, 0, 1);\n expect(av[0].value).toBe(1);\n expect(av.value[0]).toBe(1);\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1073,"value":"arrayViewTests.test(\"arrayView unshift\", () => {\n const av = arrayView({ builder: (v) => Inputs.input(v) });\n av.value.unshift(1);\n expect(av[0].value).toBe(1);\n expect(av.value[0]).toBe(1);\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1072,"value":"arrayViewTests.test(\"arrayView shift\", () => {\n const av = arrayView({ value: [1], builder: (v) => Inputs.input(v) });\n av.value.shift(1);\n expect(av[0]).toBe(undefined);\n expect(av.value[0]).toBe(undefined);\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1071,"value":"arrayViewTests.test(\"arrayView pop\", () => {\n const av = arrayView({ value: [1], builder: (v) => Inputs.input(v) });\n av.value.pop();\n expect(av[0]).toBe(undefined);\n expect(av.value[0]).toBe(undefined);\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1070,"value":"arrayViewTests.test(\"arrayView push\", () => {\n const av = arrayView({ builder: (v) => Inputs.input(v) });\n av.value.push(1);\n expect(av[0].value).toBe(1);\n expect(av.value[0]).toBe(1);\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1069,"value":"## [Optional] Tests","pinned":false,"hidden":false,"mode":"md"},{"id":989,"value":"RUN_TESTS = true // htl.html``.href.includes(\"@tomlarkworthy/view\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":985,"value":"testing = {\n if (!RUN_TESTS) return invalidation;\n const [{ Runtime }, { default: define }] = await Promise.all([\n import(\n \"https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js\"\n ),\n import(`https://api.observablehq.com/@tomlarkworthy/testing.js?v=3`)\n ]);\n const module = new Runtime().module(define);\n return Object.fromEntries(\n await Promise.all(\n [\"expect\", \"createSuite\"].map((n) => module.value(n).then((v) => [n, v]))\n )\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":484,"value":"viewof suite = testing.createSuite({\n name: \"Unit Tests\",\n timeout_ms: 1000\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":984,"value":"expect = testing.expect","pinned":false,"hidden":false,"mode":"ojs"},{"id":676,"value":"suite.test(\"Singleton spread reads from delagate\", async () => {\n const v = view`

${[\"...\", variable(1)]}`;\n expect(v.value).toEqual(1);\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":677,"value":"suite.test(\"Singleton spread write propagates\", async () => {\n const delegate = variable();\n const v = view`

${[\"...\", delegate]}`;\n v.value = 4;\n expect(delegate.value).toEqual(4);\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":696,"value":"suite.test(\n \"Singleton events propagate from container to inner singleton\",\n async (done) => {\n const delegate = variable();\n delegate.addEventListener(\"input\", (evt) => {\n done();\n });\n const v = view`

${[\"...\", delegate]}`;\n v.dispatchEvent(new Event(\"input\"));\n }\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":772,"value":"suite.test(\"Hidden write propagates upstream\", async () => {\n const delegate = variable();\n const v = view`

${[\"_hidden\", delegate]}`;\n v.hidden.value = 4;\n expect(delegate.value).toEqual(4);\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":774,"value":"suite.test(\"Hidden events propogate to self\", async (done) => {\n const delegate = variable();\n const v = view`

${[\"_hidden\", delegate]}`;\n v.addEventListener(\"input\", (evt) => {\n done();\n });\n delegate.dispatchEvent(new Event(\"input\"));\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":796,"value":"suite.test(\n \"Hidden object collection member events propogate to self\",\n async (done) => {\n const delegate = variable();\n const v = view`

${[\"_...\", { a: delegate }]}`;\n v.addEventListener(\"input\", (evt) => {\n done();\n });\n delegate.dispatchEvent(new Event(\"input\"));\n }\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1064,"value":"suite.test(\"Nested write on arrayView replaces presentation\", async () => {\n const v = view`

${[\"array\", [html``]]}`;\n expect(v.querySelector(\"#nwoa1\")).not.toBe(null);\n expect(v.querySelector(\"#nwoa2\")).toBe(null);\n expect(v.array.value).toEqual([\"foo\"]);\n\n v.array = [html``];\n expect(v.querySelector(\"#nwoa1\")).toBe(null);\n expect(v.querySelector(\"#nwoa2\")).not.toBe(null);\n expect(v.array.value).toEqual([\"fum\"]);\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":479,"value":"suite.test(\n \"Composite write spreads to array subproperty (deletion)\",\n async () => {\n const v = view`

${[\"array\", [Inputs.input()]]}`;\n v.value = { array: [] };\n expect([...v.array]).toEqual([]);\n expect(v.value.array).toEqual([]);\n }\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":495,"value":"suite.test(\n \"Composite write spreads to array subproperty (addition) (via destructuring assignment)\",\n async () => {\n const v = view`

${[\"array\", [Inputs.input()], (v) => Inputs.input(v)]}`;\n v.value = { array: [1, 2] };\n expect(v.value.array).toEqual([1, 2]);\n expect(v.array).toContainEqual(Inputs.input(1));\n expect(v.array).toContainEqual(Inputs.input(2));\n }\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":806,"value":"suite.test(\n \"Composite write spreads to array subproperty (addition) (via view.value assignment)\",\n async () => {\n const v = view`

${[\"array\", [Inputs.input()], (v) => Inputs.input(v)]}`;\n v.array.value = [1, 2]; // Should work but doesn't, we need some kind of ArrayView type\n expect(v.value.array).toEqual([1, 2]);\n expect(v.array).toContainEqual(Inputs.input(1));\n expect(v.array).toContainEqual(Inputs.input(2));\n }\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":811,"value":"suite.test(\n \"Composite write spreads to array subproperty (addition) (via data assignment)\",\n async () => {\n const v = view`

${[\"array\", [Inputs.input()], (v) => Inputs.input(v)]}`;\n v.value.array = [1, 2];\n expect(v.value.array).toEqual([1, 2]);\n expect(v.array).toContainEqual(Inputs.input(1));\n expect(v.array).toContainEqual(Inputs.input(2));\n }\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":498,"value":"suite.test(\"Array get\", async () => {\n const v = view`

${[\"array\", [Inputs.input(1)]]}`;\n expect(v.value.array).toEqual([1]);\n expect(v.array[0]).toEqual(Inputs.input(1));\n expect([...v.array]).toEqual([Inputs.input(1)]);\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":500,"value":"suite.test(\"Array write with builder creates new elements\", async () => {\n const v = view`