30:[] 2e:{"title":"Hello Crank.js","cells":[{"id":0,"value":"md`# Hello [Crank.js](https://crank.js.org/)\n\nAnothe JS framework, but now full of generators, async functions and infinite loops...\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"{\n const el = DOM.element('div');\n renderer.render(\n jsx`\n

\n <${Greeting} name=${'You'}/>\n <${Timer} />\n <${Quotes} />\n

\n <${RandomDogApp}/>\n

\n`,\n el\n );\n return el;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":443,"value":"async function QuoteOfTheDay() {\n const res = await fetch(\"https://favqs.com/api/qotd\");\n const { quote } = await res.json();\n console.log(quote);\n return jsx`\n

\n “<${Raw} value=${quote.body} />” – ${quote.author}\n

\n `;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":456,"value":"function* Quotes() {\n const interval = setInterval(() => {\n this.refresh();\n }, 5000);\n try {\n while (true) {\n yield jsx`\n <${QuoteOfTheDay} />\n `;\n }\n } finally {\n clearInterval(interval);\n }\n invalidation.then(() => clearInterval(interval));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":24,"value":"function Greeting({ name = \"World\" }) {\n return jsx`\n

Hello ${name}

\n `;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":128,"value":"function* Timer() {\n let seconds = 0;\n const interval = setInterval(() => {\n seconds++;\n this.refresh();\n }, 1000);\n try {\n while (true) {\n yield jsx`

Seconds: ${seconds}

`;\n }\n } finally {\n clearInterval(interval);\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":162,"value":"async function* LoadingIndicator() {\n await Promises.delay(1000);\n return jsx`

Fetching a good boy...

`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":164,"value":"async function RandomDog({ throttle = false }) {\n const res = await fetch(\"https://dog.ceo/api/breeds/image/random\");\n const data = await res.json();\n if (throttle) {\n await Promises.delay(1000);\n }\n\n return jsx`\n \n $\"A$ \n \n `;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":166,"value":"async function* RandomDogLoader({ throttle }) {\n for await ({ throttle } of this) {\n yield jsx`<${LoadingIndicator}/>`;\n yield jsx`<${RandomDog} throttle=${throttle} />`;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":161,"value":"function* RandomDogApp() {\n let throttle = false;\n this.addEventListener(\"click\", ev => {\n if (ev.target.tagName === \"BUTTON\") {\n throttle = !throttle;\n this.refresh();\n }\n });\n\n while (true) {\n yield jsx`\n <${Fragment}>\n

\n \n

\n <${RandomDogLoader} throttle=${throttle} />\n `;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":209,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"createElement = (await import('https://unpkg.com/@bikeshaving/crank@0.1.0/esm/index.js?module'))\n .createElement","pinned":true,"hidden":false,"mode":"ojs"},{"id":159,"value":"Fragment = (await import('https://unpkg.com/@bikeshaving/crank@0.1.0/esm/index.js?module'))\n .Fragment","pinned":true,"hidden":false,"mode":"ojs"},{"id":301,"value":"Raw = (await import('https://unpkg.com/@bikeshaving/crank@0.1.0/esm/index.js?module'))\n .Raw","pinned":true,"hidden":false,"mode":"ojs"},{"id":61,"value":"renderer = (await import('https://unpkg.com/@bikeshaving/crank@0.1.0/dom.js?module'))\n .renderer","pinned":true,"hidden":false,"mode":"ojs"},{"id":36,"value":"htm = require('htm@3.0.4/dist/htm.umd.js')","pinned":true,"hidden":false,"mode":"ojs"},{"id":38,"value":"jsx = htm.bind(createElement)","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}