2e:null 2f:["$","title",null,{"children":"View Composition Examples | Tom Larkworthy | Observable"}] 34:T4a3,md`# View Composition Examples Here we play _view_ template literal and related techniques. The _view_ literal lets you build components heirarchically. Its _closed_. Each construction is also a _view_ and can be placed inside another _view_ literal. Because each view is a multi-level views, the system plays very well with _Inputs.bind_. You can _bind_ to not jus tthe root view, but also individual fields in the composite. This allows interesting and programatic cross-wiring across sibling cells. I think of _bind_ as dimension reduction. What was once two free parameters becomes one after binding. Well written _views_ are back-writable (and _view_ template literal does this for you). Using back-writability, we can acheive business-presentation logic seperation. Simply have the business logic in a different cell manipulating the presentation parameters view writes. Because data updates propogate in a different logical channel to the presentation code channel, we can acheive good performance by targetted manipulation of DOM nodes on data changes. In this notebook we use _reconcile_ which probably is not as effecient as possible, but fairly trivial to implement. `35:[] 32:{"id":"3493e47d5eb3ac12","slug":"view-examples","title":"View Composition Examples","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2021-05-21T07:08:18.214Z","update_time":"$D2024-03-23T18:54:19.105Z","view_time":null,"first_public_time":"$D2024-03-23T18:54:51.499Z","has_unpublished_edits":null,"fork":false,"stars":10,"starred":false,"owner":{"type":"team","id":"7db5ed2b0697d645","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":"starter_2024"},"version":1506,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5215f6ec4a999d40","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":null}],"members":[{"type":"individual","id":"5215f6ec4a999d40","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":null,"role":"editor"},{"type":"team","id":"7db5ed2b0697d645","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":"starter_2024","role":"viewer"}],"comments":[{"id":"69e33e116a1df120","reply_to_id":null,"content":"typo: \"manipute\"","create_time":"$D2021-05-24T10:03:53.623Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}},{"id":"f427657f9f707a29","reply_to_id":"69e33e116a1df120","content":"A second problem is sharing a parameter across many leaves. Possibly its the same problem but a different use case.","create_time":"$D2021-05-25T05:42:04.950Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"5215f6ec4a999d40","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":{"id":"d00b7aa83811f066","slug":"ui","title":"ui","owner":{"id":"7db5ed2b0697d645","login":"tomlarkworthy","name":"Tom Larkworthy"}},"type":"notebook","body":{"title":"View Composition Examples","cells":[{"id":0,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"import { view, viewSvg } from '@tomlarkworthy/view'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"import { reconcile } from '@tomlarkworthy/reconcile-nanomorph'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":975,"value":"md`## Heirarchical Composition`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"md`### Isosceles\n\nCreate a parameterized shape in 3D.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"isosceles = ({ w = 100, l = 100, color = \"#0000FF\" } = {}) => {\n // TODO: Pass in variable\n const id = DOM.uid().id; // A uid helps reconcile's matcher.\n const wVar = variable(w).onWrite(() => reconcile(me, render()));\n const lVar = variable(l).onWrite(() => reconcile(me, render()));\n const colorVar = variable(color, () => reconcile(me, render()));\n const render = () =>\n viewSvg``; // TODO, better way to bind dummies\n const me = render();\n return me;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1371,"value":"isoscelesFabian = ({\n w = 100 /* TODO Could we pass in a variable here and bind to it automgically*/,\n l = 100,\n color = \"#0000FF\"\n} = {}) => {\n const id = DOM.uid().id; // A uid helps reconcile's matcher.\n const vars = propsToVars({ w, l, color }, () => reconcile(me, render(vars)));\n const render = ({ color, w, l }) =>\n htl.svg``;\n const me = render(vars);\n console.log(\"me\", me.w);\n me.value = {};\n Object.entries(vars).forEach(([name, variable]) => {\n Object.defineProperty(me, name, {\n get: () => variable,\n set: (v) => (variable = v),\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(me.value, name, {\n get: () => variable.value,\n set: (v) => (variable.value = v),\n enumerable: true,\n configurable: true\n });\n });\n return me;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1344,"value":"propsToVars = (obj, onWrite) => Object.fromEntries(Object.entries(obj).map(([k, v]) => [k, variable(v).onWrite(onWrite)]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"viewof testIsosceles = isosceles()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1453,"value":"viewof testIsosceles.values","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":394,"value":"md`The _viewof_ is an SVG element`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":329,"value":"viewof testIsosceles.outerHTML","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":397,"value":"md`The data is the parameters, which are individually backwritable`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":347,"value":"testIsosceles.w","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":414,"value":"md`#### View nesting`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":400,"value":"md`We can embed views inside other views with the view literal`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"value":"htl.svg`

\n ${[\"w\", Inputs.range([0, 1000], { label: \"width\" })]}\n ${[\"l\", Inputs.range([0, 1000], { label: \"length\" })]}\n ${\n [\n \"color\",\n colorPicker(viewof testIsosceles.color.value)\n ] /* Manual fix for non backwritability */\n }\n`,\n viewof testIsosceles\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":578,"value":"testIsosceles","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":377,"value":"md`#### Programatically manipulate parameters\n\nThe parameters are backwritable too\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":381,"value":"{\n viewof testIsosceles.w.value = 20;\n viewof testIsosceles.l.value = 50;\n viewof testIsosceles.w.dispatchEvent(new Event('input', { bubbles: true })); // TODO bubbling broke?\n viewof testIsosceles.dispatchEvent(new Event('input', { bubbles: true }));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"md`### Transform\n\nCreate a parameterized transform. The useful thing is that we can minimize recomputation of the DOM stable for changes in transform parameters.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"transform = ({ tx = 0, ty = 0, sx = 1, sy = 1, angle = 0, inner } = {}) => {\n const id = DOM.uid().id;\n const txVar = variable(tx).onWrite(() => reconcile(me, render()));\n const tyVar = variable(ty).onWrite(() => reconcile(me, render()));\n const sxVar = variable(sx).onWrite(() => reconcile(me, render()));\n const syVar = variable(sy).onWrite(() => reconcile(me, render()));\n const aVar = variable(angle).onWrite(() => reconcile(me, render()));\n const render = () =>\n viewSvg`\n ${[\"inner\", inner]}\n `;\n const me = render();\n return me;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"viewof testTransform = transform({ inner: isosceles(), tx: 100 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"testTransform","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"viewof testTransform","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":438,"value":"viewof testTransform.outerHTML","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"htl.svg`

\n ${Inputs.bind(\n Inputs.range([0, 200], { label: \"tx\" }),\n viewof testTransform.tx\n )}\n ${Inputs.bind(\n Inputs.range([-100, 200], { label: \"ty\" }),\n viewof testTransform.ty\n )}\n ${Inputs.bind(\n Inputs.range([0, 5], { label: \"scale x\" }),\n viewof testTransform.sx\n )}\n ${Inputs.bind(\n Inputs.range([0, 5], { label: \"scale y\" }),\n viewof testTransform.sy\n )}\n ${Inputs.bind(\n Inputs.range([-360, 360], { label: \"angle\" }),\n viewof testTransform.angle\n )}\n ${Inputs.bind(\n Inputs.range([-100, 200], { label: \"width\" }),\n viewof testTransform.inner.w\n )}\n ${Inputs.bind(\n Inputs.range([-100, 200], { label: \"length\" }),\n viewof testTransform.inner.l\n )}\n ${Inputs.bind(\n colorPicker(viewof testTransform.inner.color.value),\n viewof testTransform.inner.color\n )}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":594,"value":"md`## Arrays\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":945,"value":"arrayOfSlider = md`#### Array of sliders`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":949,"value":"viewof arrayControl = view`

\n \n ${[\n \"r\",\n // Its slightly annoying we have to bind the inner control to a property\n new Array(10).fill(null).map((r, i) => {\n return view`\n \n `;\n })\n ]}\n

${[\n \"v\",\n Inputs.range([0, 10], { label: `r[${i}].v`, value: i })\n ]}

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":959,"value":"arrayControl","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":967,"value":"viewof arrayControl","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1022,"value":"md`### Coordinating arrays`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":611,"value":"viewof dartParams = view`\n ${[\n \"n\",\n Inputs.range([0, 1000], {\n label: \"number of darts\",\n value: 50,\n step: 1\n })\n ]}\n\n ${[\n \"v\",\n Inputs.range([0, 100], {\n label: \"velocity of darts\",\n value: 5\n })\n ]}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":883,"value":"md`## Fullsize world`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":601,"value":"viewof world = viewSvg``;\n await Promises.delay(50);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1001,"value":"viewof coroutineExample","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":990,"value":"coroutineExample","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1017,"value":"md`### Coroutines are an async function*\n\n(as are cells)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1004,"value":"async function* flashSquare() {\n for (let index = 0; index < 360; index += 5) {\n yield Object.defineProperty(\n html``,\n 'value',\n {\n value: \"square\"\n }\n );\n if (index === 0) yield new Event(\"input\", { bubbles: true });\n await Promises.delay(10);\n }\n return null; // End coroutine\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1075,"value":"function toView(generator) {\n let current;\n const holder = Object.defineProperty(document.createElement('span'), 'value', {\n get : () => current?.value,\n set : (v) => current ? current.value = v : null,\n enumerable: true\n });\n \n new Promise(async () => {\n const iterator = generator();\n let { done, value } = await iterator.next();\n while (!done) {\n if (value instanceof Event) { \n holder.dispatchEvent(value);\n } else {\n current = value\n if (value) {\n const span = document.createElement('span');\n span.appendChild(value);\n reconcile(holder, span);\n }\n }\n ({ done, value } = await iterator.next());\n }\n holder.remove();\n });\n return holder;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1117,"value":"md`A noticable difference to Observable cells is the DOM removes itself when the coroutine finishes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1097,"value":"toView(flashSquare)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1113,"value":"flashSquare()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1078,"value":"viewof square = view`${['sqaure', await toView(flashSquare)]}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1307,"value":"square.square","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1124,"value":"md`#### Combining coroutines\n\nThe power of coroutines is the ability to hold state in the closure, and that they can be sequences together\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1135,"value":"async function* flashStar() {\n for (let index = 0; index < 360; index += 5) {\n yield Object.defineProperty(\n htl.svg``,\n 'value',\n {\n value: \"star\"\n }\n );\n if (index === 0) yield new Event(\"input\", { bubbles: true });\n await Promises.delay(10);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1140,"value":"flashStar()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1182,"value":"async function* choose() {\n let resolve;\n yield Object.defineProperty(\n htl.html`\n `,\n 'value',\n {\n value: 'undecided'\n }\n );\n yield new Event(\"input\", { bubbles: true });\n return await new Promise(function(_resolve) {\n resolve = _resolve;\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1173,"value":"viewof animatedUI = view`${[\n 'choice',\n await toView(async function*() {\n while (true) {\n const choice = yield* choose();\n if (choice == 'square') yield* flashSquare();\n if (choice == 'star') yield* flashStar();\n }\n })\n]}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1288,"value":"animatedUI","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1290,"value":"viewof animatedUI","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1196,"value":"import { cautious } from '@tomlarkworthy/view'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":511,"value":"import { colorPicker } from \"@tomlarkworthy/colorpicker\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":708,"value":"function variable(value) {\n let onWrites = [];\n const self = new EventTarget();\n return Object.defineProperties(self, {\n value: {\n get: () => value,\n set: newValue => {\n value = newValue;\n onWrites.forEach(onWrite => onWrite(value)); // TODO: use CustomEvent\n },\n enumerable: true\n },\n toString: {\n // Should this be a Text node?\n value: () => `${value}`\n },\n onWrite: {\n value: cb => {\n onWrites.push(cb);\n return self;\n }\n }\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":804,"value":"documentBody = Generators.observe((notify) => {\n const resizeObserver = new ResizeObserver((entries) =>\n notify(entries[0].target)\n );\n resizeObserver.observe(document.body);\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":815,"value":"documentHeight = documentBody.clientHeight","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":832,"value":"mousePos = Generators.observe(notify => {\n const pointermoved = e => {\n notify([e.clientX, e.clientY]);\n };\n document.addEventListener(\"pointermove\", pointermoved);\n invalidation.then(() => {\n document.removeEventListener(\"pointermove\", pointermoved);\n });\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1487,"value":"import { footer } from \"@tomlarkworthy/footer\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1505,"value":"footer","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"