31:T62a,{ const renderer = newNotebookRenderer(); const { id } = DOM.uid(); const element = htl.html`

Loading the "hello" cell...

This is the !

`; // This notebook function creates "manually" individual cells: const notebook = (runtime, observer) => { const main = runtime.module(); async function* generateName(Promises, invalidation) { let stop = false; invalidation.then(() => (stop = true)); const stamp = Date.now(); for (let i = 0; !stop && i < 100; i++) { yield "World-" + i; // console.log(">", stamp, i); await Promises.delay(100); } } main .variable(observer("name")) .define("name", ["Promises", "invalidation"], generateName); function renderName(md, name) { return md`# Hello ${name}`; } main .variable(observer("hello")) .define("hello", ["md", "name"], renderName); return main; }; // This method call will load the application and attach the data cells to the template element: return renderer({ notebook, element, invalidation }); }32:[] 2f:{"title":"Example Of Notebook Rendering","cells":[{"id":0,"value":"# Example Of Notebook Rendering\n\nSee: [@kotelnikov/notebook-renderer-method](/@kotelnikov/notebook-renderer-method)\n","pinned":false,"hidden":false,"mode":"md"},{"id":128,"value":"toc({ headers: \"h2,h3\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"URL of a published notebook used in this example (*it should contain the \"hello\" and \"name\" cells as they are used in the templates.*):","pinned":false,"hidden":false,"mode":"md"},{"id":77,"value":"notebookUrl = \"https://api.observablehq.com/@observablehq/hello-world.js?v=3\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"## Example 1: Rendering with a template","pinned":false,"hidden":false,"mode":"md"},{"id":6,"value":"{\n const renderer = newNotebookRenderer();\n\n const { id } = DOM.uid();\n const element = htl.html`

Loading the \"hello\" cell...

\n This is the !\n

\n \n

`;\n\n // This method call will load the application and attach the data cells to the template element:\n return renderer({\n notebookUrl,\n element\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":65,"value":"## Example 2: Re-define data cells\n\nThis example is quite similar with the previous one. The only difference is that here we re-define the \"name\" cell. \n\n*Note: The string value is defined as `Promise.resolve(\"string value\")` because otherwise they are interpreted as URLs of resources containing data to load.*","pinned":false,"hidden":false,"mode":"md"},{"id":67,"value":"{\n const { id } = DOM.uid();\n const element = htl.html`

Loading the \"hello\" cell...

\n This is the !\n

\n \n

`;\n\n const renderer = newNotebookRenderer();\n return renderer({\n notebookUrl,\n element,\n data: {\n // We use a promise to re-define value because the strings are interpreted as URL\n // containing data to load\n name: Promise.resolve(\"John Smith\")\n }\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":108,"value":"## Example 3: Define notebooks as functions","pinned":false,"hidden":false,"mode":"md"},{"id":106,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":100,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":4,"value":"import { newNotebookRenderer } from \"@kotelnikov/notebook-renderer-method\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":130,"value":"import { toc } from \"@nebrius/indented-toc\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}