30:[{"id":"dec489daac2e4a27c49e9ac9241bdba2ecde9687d9d521364238e168fb6567278d156f3d630fe937db02352d6e47556fe14f9ddcb62ecaeb902ac85ea3f83ef9","href":"https://static.observableusercontent.com/files/dec489daac2e4a27c49e9ac9241bdba2ecde9687d9d521364238e168fb6567278d156f3d630fe937db02352d6e47556fe14f9ddcb62ecaeb902ac85ea3f83ef9","name":"viewroutine.png","type":"image/png","lastModified":1623871822550.412,"size":274547}] 2e:{"title":"Composing views across time: viewroutine","cells":[{"id":0,"value":"md`# Composing views across time: viewroutine\n\n${await FileAttachment(\"viewroutine.png\").image()}\n\nSometimes you want to put a sequence of UI steps in a single cell. Using inspiration drawn from Unity and Golang ([_coroutines_](https://docs.unity3d.com/Manual/Coroutines.html) and _goroutines_) checkout the _viewroutine_. A _viewroutine_ leans on Javascript's _async generator functions_ to compose views across time.\n\n~~~\n viewroutine(generator: async function*) => viewof\n~~~\n\nThe import:-\n\n~~~js\nimport {viewroutine, ask} from '@tomlarkworthy/viewroutine'\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"md`## What is a view again?\n\nA view\n\n- contains a visual DOM component (viewof foo)\n- contains a data component (foo) as the value of the visual component (viewof foo.value)\n- Emits _input_ events to signal listeners that the data value has changed\n- Like all cells, the viewof cell can be a generator as well and be its own stream\n\n(see also https://observablehq.com/@observablehq/introduction-to-views)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"md`## What is an async generator?\n\nAsync generators\n- Have a signature like _async foo*()_\n- have intermediate return values in the body with _yield_\n- can have a final return value with _return_\n- can use _await_ in the body\n- can bulk return the results of other generators with _yield*_\n\n(see also https://observablehq.com/@observablehq/introduction-to-generators)\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"md`## Putting it together\n\nThe broad idea of a viewroutine, is that an async generator yields a stream of visual components, and we update an overarching span by setting its only child to be those stream of values. Thus, the span becomes a view that doesn't invalidate when the generator yields.\n\nThere are a few nice properties with this. You can have variables declared in the closure that are carried between yields. This can often replace the use of an overarching _mutable_ in Observable.\n\nYou can compose generators by using the _yield*_ syntax making things compose nicely.\n\nYou can on demand and programatically drive the sequence, wait for user input, make choices _etc._ You could probably build an entire app in this way, and it can be decomposed into functional pieces.\n\nOne other important aspect of views is programmatic control over when an input event is raised. The viewroutine will emit an event if yielded. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"md`### Pattern we are trying to fix\n\nWe want to avoid stuffing a model into a mutable and asynchronously updating that from a dedicated input cell. It takes up too many cells and the use of mutable has lots of unexpected implications such as not working when imported from other notebooks\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"mutable nameOfThing = undefined","pinned":true,"hidden":false,"mode":"ojs"},{"id":86,"value":"viewof newName = Inputs.text({\n label: \"please enter the name of the thing to create\",\n submit: true,\n minlength: 1\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":90,"value":"sideEffect = {\n yield md`updating`;\n await new Promise(r => setTimeout(r, 1000));\n mutable nameOfThing = newName;\n\n yield md`updated!!!`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":120,"value":"md`## The viewroutine`","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"function viewroutine(generator) {\n let current;\n const holder = Object.defineProperty(\n document.createElement(\"span\"),\n \"value\",\n {\n get: () => current?.value,\n set: (v) => (current ? (current.value = v) : null),\n enumerable: true\n }\n );\n\n new Promise(async () => {\n const iterator = generator();\n const n = await iterator.next();\n let { done, value } = n;\n while (!done) {\n if (value instanceof Event) {\n holder.dispatchEvent(value);\n } else {\n current = value;\n if (holder.firstChild) holder.removeChild(holder.firstChild);\n if (value) {\n holder.appendChild(value);\n }\n }\n ({ done, value } = await iterator.next());\n }\n holder.remove();\n });\n return holder;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":129,"value":"md`### Example`","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"md`_ask_ wraps any input. It yields the passed in input to be its visual representation, but its final return is the value submitted, which ends the routine (allowing an enclosing generator to continue with the sequence)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":134,"value":"async function* ask(input) {\n let responder = null;\n const response = new Promise(resolve => (responder = resolve));\n input.addEventListener('input', () => responder(input.value));\n yield input;\n return await response;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":199,"value":"md`Now we can do the same thing without a mutable, even carrying the inputed name in the first step to steps further along.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"viewof example1 = viewroutine(async function*() {\n let newName = undefined;\n while (true) {\n newName = yield* ask(\n Inputs.text({\n label: \"please enter the name of the thing to create\",\n minlength: 1,\n value: newName,\n submit: true\n })\n );\n yield md`updating to ${newName}`; // Note we can remember newName\n await new Promise(r => setTimeout(r, 1000)); // Mock async action\n yield* ask(htl.html`${md`updated`} ${Inputs.button(\"Again?\")}`);\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":194,"value":"example1","pinned":true,"hidden":false,"mode":"ojs"},{"id":204,"value":"md`## Animation Example with return values\n\nMixing HTML with SVG and composing animations\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":237,"value":"choice","pinned":true,"hidden":false,"mode":"ojs"},{"id":216,"value":"viewof choice = viewroutine(async function*() {\n while (true) {\n const choice = yield* choose();\n if (choice == 'square') yield* flashSquare();\n if (choice == 'star') yield* flashStar();\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":214,"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":false,"hidden":false,"mode":"ojs"},{"id":222,"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}","pinned":false,"hidden":false,"mode":"ojs"},{"id":220,"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":false,"hidden":false,"mode":"ojs"},{"id":305,"value":"import { footer } from \"@tomlarkworthy/footer\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":323,"value":"footer","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}