29:null 2a:["$","title",null,{"children":"Simple Notebook Renderer | Mikhail Kotelnikov | Observable"}] 2f:Tb84,# Simple Notebook Renderer ## Renders Observable HQ Notebooks with custom HTML templates The `newNotebookRenderer` method allows to load code of an Observable Notebook and render it by spreading notebook cells over the HTML element marked with the `data-cell` attributes: ```html

``` ## Example *See here for a working example: https://observablehq.com/@kotelnikov/notebook-renderer-example* Example of usage of this method with a remote Notebook: ```js import { newNotebookRenderer } from "@kotelnikov/notebook-renderer-method"; const renderer = newNotebookRenderer(); const element = document.createElement("div"); document.body.appendChild(element); element.innerHTML = `

` // URL of the published notebook to load. const notebookUrl = "https://www.foo.bar/notebooks/12356789.js" // (This notebook should contain the "title" and "body" cells // as they are used in the template element defined above) // This method call will load the application // and attach the data cells to the template element: renderer({ notebookUrl, element, data : {}, invalidation }) ``` ## API The `newNotebookRenderer` method configures and returns a function allowing to attach Observable notebook cells to HTML DOM elements. The returned method accepts the template element and notebook to wire together. The list of optional parameters for the `newNotebookRenderer` method: * `loadNotebook`- an async function loading a notebook by the specified URL; the default method loads the notebook using standard `import` * `loadData` - an async method to load data used by the notebook * `loadRuntime` - loads the Observable Runtime instance; by default it uses the library imported from the public CDN (`https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js`) * `newObserver` - a method returning a new cell observer as defined here: https://github.com/observablehq/runtime This returned function rendering cells accepts the following parameters: * `notebook` (function) - the optional notebook definition function; if this parameter is not defined then this method loads the notebook definition using the `notebookUrl` parameter * `notebookUrl` (string) - the optional notebook URL; it is used only if the `notebook` is not defined * `element` (HTMLElement) - mandatory DOM element where the notebook cells should be attached; the `data-cell` attributes are used to define cell placeholders * `data` (object) - an optional JavaScript object containing data to inject in the notebook; keys are names of notebook cells to replace * `invalidation` (Promise) - a Promise instance used to dispose the notebook runtime30:Tc11,function newNotebookRenderer({ loadData, loadRuntime, loadNotebook, newObserver } = {}) { loadData = loadData || async function loadData(d) { if (typeof d === "string") { const res = await fetch(d); d = await res.json(); } return d; }; loadRuntime = loadRuntime || (async () => await import( "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js" )); loadNotebook = loadNotebook || (async (url) => (await import(url)).default); newObserver = newObserver || ((name, { rootElement, element, runtime, library, Inspector }) => { const inspector = () => (inspector.instance = inspector.instance || new Inspector(element)); element.classList.add("observablehq"); let prev; return { pending() { // inspector().pending(); }, fulfilled(value) { if (value === prev) return; if (value instanceof Node) { element.innerHTML = ""; element.appendChild(value); } else if (typeof value === "undefined") { element.innerHTML = ""; } else if ( typeof value === "string" || typeof value === "number" || typeof value === "boolean" ) { element.innerHTML = String(value); } else { inspector().fulfilled(value); } prev = value; }, rejected(error) { inspector().rejected(error); } }; }); return Object.assign( async function bindNotebook({ notebook, notebookUrl, element, data = {}, invalidation }) { const { Runtime, Library, Inspector } = await loadRuntime(); notebook = notebook || (await loadNotebook(notebookUrl)); const dataList = []; for (const [key, value] of Object.entries(data)) { dataList.push([key, await loadData(value)]); } const cells = [...element.querySelectorAll("[data-cell]")]; const cellsIndex = new Map(cells.map((elm) => [elm.dataset.cell, elm])); const library = new Library(); const width = (library.width = Math.min(element.clientWidth, 1024)); [...element.querySelectorAll("[data-root]")].forEach((elm) => { elm.style.width = width + "px"; }); const runtime = new Runtime(library); invalidation && invalidation.then(() => runtime.dispose()); const parent = runtime.module(notebook); const module = runtime.module(); for (let [name, elm] of cellsIndex.entries()) { const observer = newObserver(name, { element: elm, rootElement: element, runtime, Inspector, library }); module.variable(observer).import(name, name, parent); } dataList.forEach(([key, value]) => { parent.redefine(key, value); // ?? }); return Object.assign(element, { module, runtime, library }); }, { loadData, loadRuntime, loadNotebook } ); }31:[] 2d:{"id":"e21c853017bd919c","slug":"notebook-renderer-method","title":"Simple Notebook Renderer","thumbnail":"a4fd45734c3306dd5f108c5485734201abd3d7e542f448e17f0c2343f5e2964d","access_level":"public","create_time":"$D2022-06-11T11:12:05.723Z","update_time":"$D2022-06-15T07:21:46.930Z","view_time":null,"first_public_time":"$D2022-06-11T11:15:01.814Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"d4c65cdf77f8f4fd","login":"kotelnikov","name":"Mikhail Kotelnikov","avatar_url":"https://avatars-next.observableusercontent.com/529fa53c5b4acc1414273473d4e049e502c44c1bdbb1a0af81f7faa463dcff4f","tier":"starter_2024"},"version":38,"publish_version":38,"role":null,"authored":false,"authors":[{"type":"individual","id":"cdbfd308e8310490","login":"kotelnikov","name":"Mikhail Kotelnikov","avatar_url":"https://avatars-next.observableusercontent.com/529fa53c5b4acc1414273473d4e049e502c44c1bdbb1a0af81f7faa463dcff4f","tier":null}],"members":[{"type":"individual","id":"cdbfd308e8310490","login":"kotelnikov","name":"Mikhail Kotelnikov","avatar_url":"https://avatars-next.observableusercontent.com/529fa53c5b4acc1414273473d4e049e502c44c1bdbb1a0af81f7faa463dcff4f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Simple Notebook Renderer","cells":[{"id":0,"value":"$2f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2e:"$2d:body"