25:["$","title",null,{"children":"Crank.js: JSX-driven components with functions, promises and generators | btheado | Observable"}] 4c:T530,{ async function LoadingIndicator() { await new Promise(resolve => setTimeout(resolve, 1000)); return htm`

Fetching a good boy...

`; } async function RandomDog({throttle = false}) { const res = await fetch("https://dog.ceo/api/breeds/image/random"); const data = await res.json(); if (throttle) { await new Promise(resolve => setTimeout(resolve, 2000)); } return htm`

`; } async function *RandomDogLoader({throttle}) { for await ({throttle} of this) { yield htm`<${LoadingIndicator} />`; yield htm`<${RandomDog} throttle=${throttle} />`; } } function *RandomDogApp() { let throttle = false; this.addEventListener("click", (ev) => { if (ev.target.tagName === "BUTTON") { // Throttle every other button click in order to // illustrate the delayed loading indicator throttle = !throttle; this.refresh(); } }); while (true) { yield htm` <${Fragment}>

<${RandomDogLoader} throttle=${throttle} /> `; } } return crank(htm`<${RandomDogApp} />`); }4d:[] 48:{"id":"14e3e59c98bb3f22","slug":"crank-js","title":"Crank.js: JSX-driven components with functions, promises and generators","thumbnail":"173354e2987dc853d61bbae1e30920f540d804d968c6cda5bedc114c4f85d729","access_level":"public","create_time":"$D2020-04-21T22:44:58.655Z","update_time":"$D2020-04-25T15:04:31.654Z","view_time":null,"first_public_time":"$D2020-04-22T03:00:52.419Z","has_unpublished_edits":null,"fork":false,"stars":5,"starred":false,"owner":{"type":"team","id":"2c0fcccea99387d7","login":"btheado","name":"","avatar_url":"https://avatars-next.observableusercontent.com/8315783a6ce8d9c8019f396006c77dcba615bbc93819e5644a289a7ca704ffcf","tier":"starter_2024","bio":"","following":false},"version":401,"publish_version":401,"role":null,"authored":false,"authors":[{"type":"individual","id":"46fc8e968a5255ec","login":"btheado","name":"","avatar_url":"https://avatars-next.observableusercontent.com/8315783a6ce8d9c8019f396006c77dcba615bbc93819e5644a289a7ca704ffcf","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"46fc8e968a5255ec","login":"btheado","name":"","avatar_url":"https://avatars-next.observableusercontent.com/8315783a6ce8d9c8019f396006c77dcba615bbc93819e5644a289a7ca704ffcf","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Crank.js: JSX-driven components with functions, promises and generators","cells":[{"id":0,"value":"md`# Crank.js: JSX-driven components with functions, promises and generators`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"md`\nIn this page, I explore [crank.js](https://crank.js.org).\n\nIts tag-line is \"*Write JSX-driven components with functions, promises and generators*\", but **JSX** is not required and here I use it with [htm](https://github.com/developit/htm) since htm integrates better with ObservableHq.\n\nI have copied all the examples from the crank.js [components](https://crank.js.org/guides/components) and [asynchronous components](https://crank.js.org/guides/async-components) docs. I translated the jsx to htm. I did not copy any of the extremely helpful explanatory text from that page, so refer to that page for more details.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":396,"value":"toc()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"md`\n# Components\nhttps://crank.js.org/guides/components\n\n## Basic Components\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"function Greeting({name}) {\n return htm`

Hello, ${name}

`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"md`\n**Note**: the \\`crank\\` function used below is defined as a convenience function for \n\n\\`renderer.render(some_htm, html'

'})\\`\n\nThe \\`html\\` function (not to be confused with \\`htm\\`) is a standard part of the [Observable library](https://crank.js.org/guides/async-components)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"crank(htm`<${Greeting} name=\"World\" />`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"function Greeting2({name, children}) {\n return htm`\n

\n Message for ${name}: ${children}\n

\n `;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"crank(htm`\n <${Greeting2} name=\"Nemo\">\n Howdy!\n \n`);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"md`## Stateful Components`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"function *Counter() {\n let count = 0;\n while (true) {\n count++;\n yield htm`\n

\n You have updated this component ${count} ${count === 1 ? \"time\" : \"times\"}\n

\n `;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"md`**Note**: [Observable's asynchronous generator](https://observablehq.com/@observablehq/introduction-to-asynchronous-iteration) functionality is used below in order to illustrate multiple calls to cranks's \\`renderer.render\\`. The shorthand \\`crank\\` function is not used because that one creates a new DOM element each time. Crank's stateful behavior depends on re-use of the same DOM element each time.\n\nThe \\`yield\\`ing of the output of \\`renderer.render\\` is not required here. Doing it allows Observable to be part of the fun and see the changing component (i.e. the flashing gray bar on the left each time it updates).\n\n**Note 2**: Click the play button in the upper right-hand corner of the cell to re-run the code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"{\n const div = html`

`\n yield renderer.render(htm`<${Counter}/>`, div)\n await Promises.delay(1000)\n yield renderer.render(htm`<${Counter}/>`, div)\n await Promises.delay(1000)\n yield renderer.render(htm`<${Counter}/>`, div)\n await Promises.delay(1000)\n yield renderer.render(null, div) // null causes the generator to reset\n await Promises.delay(1000)\n yield renderer.render(htm`<${Counter}/>`, div)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"md`### Contexts`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"function *Timer() {\n let seconds = 0;\n const interval = setInterval(() => {\n seconds++;\n this.refresh();\n }, 1000);\n\n try {\n while (true) {\n yield htm`\n

Seconds elapsed: ${seconds}

\n `;\n }\n } finally {\n clearInterval(interval);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"crank(htm`<${Timer}/>`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"md`### Prop updates`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"function *LabeledCounter({message}) {\n let count = 0;\n while (true) {\n count++;\n yield htm`

${message} ${count}

`;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"{\n const div = html`

`;\n yield renderer.render(htm`<${LabeledCounter} message=\"The count is now:\" />`, div);\n await Promises.delay(1000);\n yield renderer.render(htm`<${LabeledCounter} message=\"The count is now:\" />`, div);\n await Promises.delay(1000);\n yield renderer.render(htm`<${LabeledCounter} message=\"What if I update the message:\" />`, div);\n // WOOPS! The message doesn't update\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"function *LabeledCounter2({message}) {\n let count = 0;\n for ({message} of this) {\n count++;\n yield htm`\n

${message} ${count}

`;\n yield renderer.render(htm`<${LabeledCounter2} message=\"The count is now:\" />`, div);\n await Promises.delay(1000);\n yield renderer.render(htm`<${LabeledCounter2} message=\"What if I update the message:\" />`, div);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"function *Greeting3({name}) {\n yield htm`

Hello ${name}

`;\n for (const {name: newName} of this) {\n if (name !== newName) {\n yield htm`\n

Goodbye ${name} and hello ${newName}

\n `;\n } else {\n yield htm`

Hello again ${newName}

`;\n }\n\n name = newName;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"{\n const div = html`

`;\n yield renderer.render(htm`<${Greeting3} name=\"Alice\" />`, div);\n await Promises.delay(1000);\n yield renderer.render(htm`<${Greeting3} name=\"Alice\" />`, div);\n await Promises.delay(1000);\n yield renderer.render(htm`<${Greeting3} name=\"Bob\" />`, div);\n await Promises.delay(1000);\n yield renderer.render(htm`<${Greeting3} name=\"Bob\" />`, div);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"md`## Interactive Components`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"function *Clicker() {\n let count = 0;\n this.addEventListener(\"click\", () => {\n count++;\n this.refresh();\n });\n\n while (true) {\n yield htm`\n \n `;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"crank(htm`<${Clicker}/>`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"function *Clicker2() {\n let count = 0;\n this.addEventListener(\"click\", (ev) => {\n // Only react when the button is clicked as opposed to \n // anywhere in the div\n if (ev.target.tagName === \"BUTTON\") {\n count++;\n this.refresh();\n }\n });\n\n while (true) {\n yield htm`\n

\n The button has been clicked ${count} ${count === 1 ? \"time\" : \"times\"}.\n \n

\n `;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"crank(htm`<${Clicker2}/>`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"md`### Dispatching events`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"MyApp = {\n function MyButton(props) {\n this.addEventListener(\"click\", () => {\n this.dispatchEvent(new CustomEvent(\"mybutton.click\", {\n bubbles: true,\n detail: {id: props.id},\n }));\n });\n\n return htm`\n

\n `;\n }\n\n function *MyApp() {\n let lastId;\n this.addEventListener(\"mybutton.click\", (ev) => {\n lastId = ev.detail.id;\n this.refresh();\n });\n while (true) {\n yield htm`\n

\n <${MyButton} id=\"button1\">Button 1\n <${MyButton} id=\"button2\">Button 2\n <${MyButton} id=\"button3\">Button 3\n

Last pressed id: ${lastId == null ? \"N/A\" : lastId}

\n `;\n }\n }\n return MyApp;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"crank(htm`<${MyApp}/>`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"md`### Accessing rendered values`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"function *MyInput(props) {\n let input; \n for (props of this) {\n setTimeout(() => {\n // Docs use input.focus() here, but I don't want to \n // grab the focus for the whole page here everytime this\n // cell runs\n input.value = \"forced value\";\n });\n input = yield htm``;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"{\n const div = html`

`\n yield renderer.render(htm`<${MyInput} value=\"testing123\"/>`, div)\n await Promises.delay(1000)\n yield renderer.render(htm`<${MyInput} value=\"testing456\"/>`, div)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"md`### Returning from a generator`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"function *Stuck({message}) {\n return htm`

${message}

`;\n yield renderer.render(htm`<${Stuck} message=\"Hello\" />`, div);\n await Promises.delay(1000);\n yield renderer.render(htm`<${Stuck} message=\"Goodbye\" />`, div);\n await Promises.delay(1000);\n yield renderer.render(htm`<${Stuck} message=\"Passing in new props is useless\" />`, div);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"md`### Catching errors from child components`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"Catcher = {\n function Thrower() { \n throw new Error(\"Hi\");\n }\n\n function *Catcher() {\n try {\n yield htm`<${Thrower} />`;\n } catch (err) {\n return htm`

Problem: ${err.message}

`;\n }\n }\n return Catcher\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"crank(htm`<${Catcher}/>`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"md`# Asynchronous Components\nhttps://crank.js.org/guides/async-components\n## Async function components`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"async function IPAddress () {\n const res = await fetch(\"https://api.ipify.org\");\n const address = await res.text();\n return htm`

Your IP Address: ${address}

`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"renderer.render(htm`<${IPAddress} />`, html`

`);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"md`### Concurrent updates`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":348,"value":"md`Concurrent update rule 1:\n\nThere can only be one pending run of an element at the same time for the same tag and position. If the same async component is rerendered concurrently while it is still pending, another call is enqueued with the latest props.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":"async function Delay ({message}) {\n await new Promise((resolve) => setTimeout(resolve, 1000));\n return htm`

${message}

`;\n yield div;\n const p1 = renderer.render(htm`<${Delay} message=\"Run 1\" />`, div);\n yield await p1; // \"Run 1\"\n const p2 = renderer.render(htm`<${Delay} message=\"Run 2\" />`, div);\n // this render is skipped because the second render is still pending\n const p3 = renderer.render(htm`<${Delay} message=\"Run 3\" />`, div);\n const p4 = renderer.render(htm`<${Delay} message=\"Run 4\" />`, div);\n yield await p2; // \"Run 2\"\n yield await p3; // \"Run 4\"\n yield await p4; // \"Run 4\"\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":352,"value":"md`Concurrent update rule 2:\n\nIf two different async components are rendered in the same position, the components are raced. If the earlier component fulfills first, it shows until the later component fulfills. If the later component fulfills first, the earlier component is never rendered.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":299,"value":"async function Fast() {\n await new Promise((resolve) => setTimeout(resolve, 500));\n return htm`Fast`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":300,"value":"async function Slow() {\n await new Promise((resolve) => setTimeout(resolve, 1000));\n return htm`Slow`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":358,"value":"md`The earlier component fulfills first, so it shows until the later component fulfills`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":303,"value":"{\n const div = html`

`;\n yield div;\n (async () => {\n const p1 = renderer.render(htm`

<${Fast} />

`, div);\n const p2 = renderer.render(htm`

<${Slow} />

`, div);\n await p1; // \"

Fast

\"\n await p2; // \"

Slow

\"\n await new Promise((resolve) => setTimeout(resolve, 2000)); // \"

Slow

\"\n })();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"md`The later component fulfills first, so the earlier component is never rendered`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":355,"value":"{\n const div = html`

`;\n yield div;\n (async () => {\n const p1 = renderer.render(htm`

<${Slow} />

`, div);\n const p2 = renderer.render(htm`

<${Fast} />

`, div);\n await p1; // \"

Fast

\"\n await p2; // \"

Fast

\"\n await new Promise((resolve) => setTimeout(resolve, 2000)); // \"

Fast

\"\n })();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"md`### Components with async children\nNo examples in this section\n## Async generator components`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":318,"value":"async function *AsyncLabeledCounter ({message}) { \n let count = 0;\n for await ({message} of this) {\n yield htm`

`;\n await new Promise((resolve) => setTimeout(resolve, 1000));\n count++;\n yield htm`

${message} ${count}

`;\n yield div;\n yield await renderer.render(\n htm`<${AsyncLabeledCounter} message=\"The count is now: \" />`,\n div,\n ); //

\n await new Promise((resolve) => setTimeout(resolve, 2000));\n yield div; //

The count is now: 1

\n await renderer.render(\n htm`<${AsyncLabeledCounter} message=\"The count is now: \" />`,\n div,\n ); //

\n await new Promise((resolve) => setTimeout(resolve, 2000));\n yield div; //

The count is now: 2

\n await new Promise((resolve) => setTimeout(resolve, 2000));\n yield div; //

The count is now: 2

\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"md`## Responsive Loading Indicators`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":324,"value":"$4c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":333,"value":"md`The above example hints at how we could abstract this pattern to implement a Suspense component, a proposed custom API in React which allows async components with fallback states:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"{\n async function Fallback({timeout = 1000, children}) {\n await new Promise((resolve) => setTimeout(resolve, timeout));\n return children;\n }\n\n async function *Suspense({timeout, fallback, children}) {\n for await ({timeout, fallback, children} of this) {\n yield htm`<${Fallback} timeout=${timeout}>${fallback}`;\n yield htm`<${Fragment}>${children}`;\n }\n }\n const Spinner = () => htm`

Spinner

`;\n async function ProfilePage() {\n await new Promise((resolve) => setTimeout(resolve, 2000));\n return htm`

Profile Page

`;\n }\n\n return crank(htm`\n <${Suspense} fallback=${htm`<${Spinner} />`}>\n <${ProfilePage} />\n \n `);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"md`# Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"md`Helper wrapper function around crank's render`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"crank = elem => renderer.render(elem, html`

`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"md`Use htm (https://github.com/developit/htm) instead of jsx with crank`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"htm = (await require('htm@2.2.1/dist/htm.umd.js')).bind(createElement)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"md`https://crank.js.org/`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"createElement = (await import('https://unpkg.com/@bikeshaving/crank@0.1.0/esm/index.js?module')).createElement","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"Fragment = (await import('https://unpkg.com/@bikeshaving/crank@0.1.0/esm/index.js?module')).Fragment","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"renderer = (await import('https://unpkg.com/@bikeshaving/crank@0.1.0/dom.js?module')).renderer","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":394,"value":"import {toc} from \"@bryangingechen/toc\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 24:null