2d:null 2e:["$","title",null,{"children":"Exporter 3 | Tom Larkworthy | Observable"}] 33:T534,md` Serialize literate computational notebooks with their dependancies into single ${ downloadAnchor({}, 'downloadable') } files. Double click to open locally. No server required, works in a \`file://\` context for simplicity. - **File-first** representation. The [Observable Runtime](https://github.com/observablehq/runtime) and common builtins like \`Inputs\`, \`htl\`, \`highlight\`, \`_\` (lodash) and \`markdown\` are bundled for offline operation. - **Recursive and self-sustaining**, the exporter is implemented in userspace and can be ${ forkAnchor({}, 'forked') } again after exporting. - **Fast**, single file notebooks open fast! - **Moldable**, the file format is uncompressed, readable, editable with a text editor, and diffable by Git. - **Runtime-as-the-source-of-truth**, format derived from the live [Obervable Runtime](https://github.com/observablehq/runtime) representation. - **No sandboxing**, the notebook is rendered without an iframe - **Custom bootloaders**, for control over the standard library - **Userspace**, implementation is a normal notebook. Exporter improves upon [exporter 2](https://observablehq.com/@tomlarkworthy/exporter-2) by refactoring out Observable Javascript concepts, it works on the low level reprentation directly, which has allowed us to added support for Notebook 2.0 syntax. `34:T4a3,md`## Usage Guide To put the exporter in one of your notebooks, first import the UI builder. \`\`\`js import {exporter, forkAnchor, exportAnchor } from '@tomlarkworthy/exporter' \`\`\` Then call the builder to make the UI. You don't need to pass any options, but the options is where you can customise the output format. \`\`\`js exporter({ handler: (action, state) => {}, // Optional UI click handler style: undefined,// customer reference to a style DOM node or a string to insert as a style block output: (out) => {}, // hook to get result of exporting notebook_url: undefined,// hardcode the default notebook_url }) \`\`\` If you want to export without a UI, use the function \`exportToHTML\`, see the [example](https://observablehq.com/@tomlarkworthy/export-to-html-example) \`\`\`js import {exportToHTML } from '@tomlarkworthy/exporter' \`\`\` \`\`\`js async function exportToHTML({ mains = new Map(), // (name -> module) Map of main modules runtime = _runtime, options = {} // Object, export options, e.g. head, title } = {}) \`\`\` You can also just use inline anchor tags: ${ forkAnchor({}, 'forkAnchor()') } or ${ downloadAnchor({}, 'downloadAnchor()') }`35:T13af,exporter = { return ({handler = actionHandler, style = css, output = out => { }, debug = false} = {}) => { keepalive(exporter_module, 'futureExportedState'); const handlerVar = variable(handler); const feedback = domView(); // prerender defaults ON; only an explicit "prerender": false in bootconf turns it off let prerenderDefault = true; try { const conf = JSON.parse(new window.TextDecoder().decode(window.lopecode.contentSync('bootconf.json').bytes)); if (conf.prerender === false) prerenderDefault = false; } catch (e) { } const options = { style, output, debug }; const spinner = async (...args) => { try { ui.querySelector('.disk-image').classList.add('spinning'); await handler(...args, cb => feedback.value = cb); ui.querySelector('.disk-image').classList.remove('spinning'); } catch (e) { ui.querySelector('.disk-image').classList.remove('spinning'); throw e; } }; const ui = view`

${ [ 'handler', handlerVar ] }

${ disk_svg() }

fork notebook options

${ [ 'prerender', Inputs.toggle({ label: 'prerender', value: prerenderDefault }) ] } ${ [ 'theme', Inputs.bind(Inputs.select(themes, { label: 'theme' }), viewof theme_assets) ] } ${ [ 'bootloader', Inputs.text({ label: 'bootloader', value: '@tomlarkworthy/bootloader', placeholder: '@tomlarkworthy/bootloader' }) ] }

${ [ 'copyjs', Inputs.button('Copy as JS', { reduce: () => spinner('copyjs', ui.value, options) }) ] } ${ [ 'blob', Inputs.button('Fork', { reduce: () => spinner('tab', ui.value, options) }) ] } ${ [ 'html', Inputs.button('Download', { reduce: () => spinner('file', ui.value, options) }) ] }

${ feedback }

`; // keep the "fork notebook" link navigable without toggling the

ui.querySelector('.moldbook-target')?.addEventListener('click', e => e.stopPropagation()); return ui; }; }36:T99c,htmlToConsoleSnippet = (html, {title = 'Observable notebook', zIndex = 2147483647} = {}) => { const b64 = utf8ToBase64(html); const safeTitle = String(title).replace(/`/g, '\\`'); return `(async () => { const b64 = "${ b64 }"; const bytes = Uint8Array.from(atob(b64), c => c.charCodeAt(0)); const html = new TextDecoder().decode(bytes); const z = ${ Math.max(0, Math.min(2147483647, zIndex | 0)) }; const host = document.createElement("div"); host.setAttribute("data-lopecode-notebook", ${ JSON.stringify(safeTitle) }); Object.assign(host.style, { position: "fixed", top: "12px", right: "12px", bottom: "12px", width: "calc(50vw - 12px)", maxWidth: "1100px", minWidth: "360px", background: "#fff", borderRadius: "10px", boxShadow: "0 24px 90px rgba(0,0,0,0.35)", overflow: "hidden", zIndex: String(z), pointerEvents: "auto" }); const topbar = document.createElement("div"); Object.assign(topbar.style, { position: "absolute", left: "0", right: "0", top: "0", height: "46px", display: "flex", alignItems: "center", justifyContent: "flex-end", padding: "8px", gap: "8px", background: "linear-gradient(to bottom, rgba(255,255,255,0.98), rgba(255,255,255,0.75))", backdropFilter: "blur(6px)", WebkitBackdropFilter: "blur(6px)", borderBottom: "1px solid rgba(0,0,0,0.08)", zIndex: String(z + 1) }); const close = document.createElement("button"); close.type = "button"; close.textContent = "×"; close.setAttribute("aria-label", "Close"); Object.assign(close.style, { width: "34px", height: "34px", borderRadius: "17px", border: "1px solid rgba(0,0,0,0.18)", background: "rgba(255,255,255,0.98)", fontSize: "22px", lineHeight: "30px", cursor: "pointer" }); const iframe = document.createElement("iframe"); iframe.title = ${ JSON.stringify(safeTitle) }; iframe.setAttribute("referrerpolicy", "no-referrer"); Object.assign(iframe.style, { position: "absolute", left: "0", right: "0", top: "46px", bottom: "0", width: "100%", height: "calc(100% - 46px)", border: "0", background: "#fff" }); close.addEventListener("click", () => host.remove()); topbar.appendChild(close); host.appendChild(iframe); host.appendChild(topbar); (document.body || document.documentElement).appendChild(host); iframe.srcdoc = html; })();`; }37:Tda1,exportAnchor = (action, attrs = {}, label = action, exportOpts = {}) => { const a = document.createElement('a'); const {href = '#', title, className, style, target, rel, ...rest} = attrs ?? {}; a.href = href; if (title != null) a.title = title; if (className != null) a.className = className; if (style != null) a.setAttribute('style', style); if (target != null) a.target = target; if (rel != null) a.rel = rel; for (const [k, v] of Object.entries(rest)) { if (v == null) continue; if (k.startsWith('on') && typeof v === 'function') continue; try { a.setAttribute(k, String(v)); } catch { } } if (label instanceof Node) a.appendChild(label); else a.textContent = label == null ? '' : String(label); const clickHandler = async event => { event.preventDefault(); event.stopPropagation(); if (a.dataset.busy === '1') return; a.dataset.busy = '1'; const prevAriaBusy = a.getAttribute('aria-busy'); a.setAttribute('aria-busy', 'true'); const prevPointerEvents = a.style.pointerEvents; const prevOpacity = a.style.opacity; a.style.pointerEvents = 'none'; a.style.opacity = '0.6'; let blobUrl = null; try { const mains = exportOpts.mains ?? (notebook_name ? new Map([[ notebook_name, main ]]) : _runtime.mains); const runtime = exportOpts.runtime ?? _runtime; const title = exportOpts.title ?? [...mains.keys()][0] ?? 'notebook'; const bootloader = exportOpts.bootloader ?? '@tomlarkworthy/bootloader'; const appendHash = exportOpts.appendHash ?? true; const resp = await exportToHTML({ mains, runtime, options: { title, bootloader, ...exportOpts.options ?? {}, ...exportOpts.theme != null ? { theme: exportOpts.theme } : null, ...exportOpts.style != null ? { style: exportOpts.style } : null, ...exportOpts.head != null ? { head: exportOpts.head } : null, ...exportOpts.headless != null ? { headless: exportOpts.headless } : null, ...exportOpts.hash != null ? { hash: exportOpts.hash } : null } }); const html = resp?.source ?? resp; blobUrl = URL.createObjectURL(new Blob([html], { type: 'text/html' })); if (action === 'tab' || action === 'fork') { const hash = exportOpts.hash ?? location.hash ?? ''; window.open(blobUrl + (appendHash ? hash : ''), '_blank'); setTimeout(() => URL.revokeObjectURL(blobUrl), 60000); } else if (action === 'download' || action === 'file') { const filename = exportOpts.filename ?? `${ title }_${ getCompactISODate() }.html`; const dl = document.createElement('a'); dl.href = blobUrl; dl.download = filename; dl.click(); setTimeout(() => URL.revokeObjectURL(blobUrl), 5000); } else { throw new Error(`Unknown export action: ${ action }`); } } finally { a.dataset.busy = '0'; if (prevAriaBusy == null) a.removeAttribute('aria-busy'); else a.setAttribute('aria-busy', prevAriaBusy); a.style.pointerEvents = prevPointerEvents; a.style.opacity = prevOpacity; } }; a.addEventListener('click', clickHandler); if (typeof attrs?.onclick === 'function') { const userHandler = attrs.onclick; a.addEventListener('click', e => userHandler(e)); } return a; }38:Tb11,actionHandler = { return async (action, state, options, feedback_callback) => { feedback_callback(Inputs.textarea({ value: `Generating source...\n` })); const {notebook, module, runtime} = await getSourceModule(state); const mains = notebook_name ? new Map([[ notebook, module ]]) : _runtime.mains; let title = [...mains.keys()][0]; try { const r = window.lopecode.contentSync('bootconf.json'); const b = JSON.parse(new window.TextDecoder().decode(r.bytes)).mains[0]; if (!notebook_name && mains.has(b)) title = b; } catch (e) { } const response = await exportToHTML({ mains, runtime, options: { bootloader: state.bootloader, title, ...state.prerender != null ? { prerender: state.prerender } : null, ...options } }); if (options.output) options.output(response); const {source, report} = response; if (action === 'copyjs') { const snippet = htmlToConsoleSnippet(source, { title }); await copyTextToClipboard(snippet); feedback_callback(view`

Copied JS snippet to clipboard.

Paste into a JS console to inject the notebook as a full-screen overlay.

`); return; } const url = URL.createObjectURL(new Blob([source], { type: 'text/html' })); // The report table doubles as a table of contents: the notebook's own openable // modules (@user/module, not versioned npm deps or the observablehq namespace) // render their `id` as a link that opens that module in the live layout via the // lopepage "open" intent; everything else stays plain text. const isOpenableModule = id => typeof id === 'string' && /^@[^@/\s]+\/[^@/\s]+$/.test(id) && !id.startsWith('@observablehq/'); feedback_callback(view` export ${ Inputs.table(report.filter(f => !f.file), { columns: [ 'id', 'size' ], width: { id: '80%', size: '20%' }, format: { id: id => { if (!isOpenableModule(id)) return id; const a = document.createElement('a'); a.textContent = id; a.href = linkTo({ open: id }); a.style.color = 'var(--theme-foreground-focus)'; return a; } }, sort: 'size', reverse: true }) } `); if (action === 'tab') { window.open(url + location.hash, '_blank'); } else if (action === 'file') { const a = document.createElement('a'); a.href = url; a.download = `${ title }_${ getCompactISODate() }.html`; a.click(); URL.revokeObjectURL(url); } }; }39:T143b,exportToHTML = async function exportToHTML({mains = new Map(), runtime = _runtime, options = {}} = {}) { let conf = { headless: false }; try { conf = (await import('file://bootconf.json')).default; } catch (_) { } if (runtime.module_names) { runtime.mains.forEach((name, module) => mains.set(name, module)); } if (!options.bootloader) { options.bootloader = '@tomlarkworthy/bootloader'; } if (!options.headless) { options.headless = conf.headless; } if (options.tick == null) { options.tick = conf.tick; } if (options.tickDelayMs == null) { options.tickDelayMs = conf.tickDelayMs; } // Prerender defaults ON (matching the exporter UI toggle); only an explicit // "prerender": false in bootconf.json turns it off. Flag persists across re-exports. if (options.prerender == null) { options.prerender = conf.prerender !== false; } // Snapshot the live lopepage-2 DOM (only when exporting this running notebook). // The snapshot keeps its id="lopepage-2" and scoped styles unchanged; book() emits it // as light DOM (so parsers read it) and hoists it into a shadow root before boot, so // it is invisible to the runtime's document queries (otherwise duplicated // editors/inputs corrupt the boot). if (options.prerender && runtime === _runtime && options.prerenderHTML == null) { try { const src = document.getElementById('lopepage-2'); if (src) { const clone = src.cloneNode(true); clone.querySelectorAll('script').forEach(s => s.remove()); // Styles the snapshot needs but does not contain: Observable Inputs injects // #observable-inputs-style into document.head, which neither reaches the // shadow root the snapshot is hoisted into nor exists at all with JS off. So // prerendered forms rendered as bare browser defaults and restyled on swap. // Carry head styles in with the clone; skip our own overlay rule. const headCss = [...document.head.querySelectorAll('style')].filter(s => s.id !== 'lope-prerender-style').map(s => s.outerHTML).join('\n'); options.prerenderHTML = headCss + clone.outerHTML; } } catch (_) { } } if (options.theme) { options.style = await cssForTheme(options.theme); } if (!options.style) { options.style = css; } if (!options.hash) { options.hash = location.hash; } if (runtime === _runtime) { try { const ogContent = sel => document.querySelector(sel)?.getAttribute('content')?.trim() || undefined; if (options.description == null) options.description = ogContent('meta[property="og:description"]') || ogContent('meta[name="description"]'); if (options.image == null) options.image = ogContent('meta[property="og:image"]'); // Preserve arbitrary across re-export (at:*, twitter:*, keywords, // theme-color, custom module metadata, …). Skip charset/viewport and the // og/description tags lopebook regenerates from title/description/image. // Merge, don't replace: caller-supplied options.metas win for any key they // define; scanned tags for every other key are preserved. Repeatable keys // (at:alternate, at:author) survive via full key+content dedup. const managed = new Set(['viewport', 'og:title', 'og:type', 'og:description', 'description', 'og:image']); const provided = Array.isArray(options.metas) ? options.metas : []; const ownedKeys = new Set(provided.map(m => m.key)); const seen = new Set(provided.map(m => `${ m.key }\n${ m.content }`)); const merged = [...provided]; for (const el of document.head.querySelectorAll('meta[property], meta[name]')) { const key = el.getAttribute('property') || el.getAttribute('name'); const content = el.getAttribute('content'); if (key == null || content == null || managed.has(key) || ownedKeys.has(key)) continue; const dedup = `${ key }\n${ content }`; if (seen.has(dedup)) continue; seen.add(dedup); merged.push({ key, isProperty: el.hasAttribute('property'), content }); } if (merged.length) options.metas = merged; } catch (_) { } } keepalive(exporter_module, 'tomlarkworthy_exporter_task'); const response = await viewof task.send({ mains, runtime, options }); return response; }3a:T118d,top120List = [ '@jashkenas/inputs', '@d3/gallery', '@d3/learn-d3', '@makio135/creative-coding', '@observablehq/module-require-debugger', '@d3/zoomable-sunburst', '@observablehq/plot', '@tmcw/enigma-machine', '@d3/force-directed-graph-component', '@d3/bar-chart-race-explained', '@observablehq/data-wrangler', '@d3/collapsible-tree', '@sxywu/introduction-to-svg-and-d3-js', '@d3/sankey-component', '@d3/zoomable-circle-packing', '@d3/selection-join', '@bstaats/graph-visualization-introduction', '@d3/color-legend', '@uwdata/introducing-arquero', '@mbostock/10-years-of-open-source-visualization', '@nitaku/tangled-tree-visualization-ii', '@makio135/give-me-colors', '@johnburnmurdoch/bar-chart-race-the-most-populous-cities-in-the-world', '@d3/color-schemes', '@tezzutezzu/world-history-timeline', '@d3/calendar', '@observablehq/a-taste-of-observable', '@d3/bar-chart-race', '@mourner/martin-real-time-rtin-terrain-mesh', '@uwdata/introduction-to-vega-lite', '@mbostock/voronoi-stippling', '@ben-tanen/a-tutorial-to-using-d3-force-from-someone-who-just-learned-ho', '@d3/hierarchical-edge-bundling', '@observablehq/introduction-to-data', '@harrystevens/directly-labelling-lines', '@observablehq/summary-table', '@observablehq/plot-cheatsheets', '@tomshanley/cheysson-color-palettes', '@tophtucker/inferring-chart-type-from-autocorrelation-and-other-evils', '@mitvis/introduction-to-d3', '@veltman/watercolor', '@veltman/centerline-labeling', '@mbostock/scrubber', '@observablehq/electoral-college-decision-tree', '@d3/tree-component', '@d3/radial-tree-component', '@d3/world-tour', '@observablehq/introduction-to-generators', '@yurivish/peak-detection', '@mkfreeman/plot-tooltip', '@aboutaaron/racial-demographic-dot-density-map', '@mbostock/methods-of-comparison-compared', '@rreusser/gpgpu-boids', '@rreusser/2d-n-body-gravity-with-poissons-equation', '@bumbeishvili/data-driven-range-sliders', '@observablehq/introducing-visual-dataflow', '@observablehq/vega-lite', '@observablehq/observable-for-jupyter-users', '@observablehq/how-observable-runs', '@unkleho/introducing-d3-render-truly-declarative-and-reusable-d3', '@vega/a-guide-to-guides-axes-legends-in-vega', '@bartok32/diy-inputs', '@mbostock/polar-clock', '@dakoop/learn-js-data', '@mbostock/manipulating-flat-arrays', '@uwdata/an-illustrated-guide-to-arquero-verbs', '@daformat/rounding-polygon-corners', '@yurivish/seasonal-spirals', '@emamd/animating-lots-and-lots-of-circles-with-regl-js', '@uwdata/data-visualization-curriculum', '@d3/d3-group', '@d3/tree-of-life', '@d3/arc-diagram', '@d3/choropleth', '@mattdzugan/generative-art-using-wind-turbine-data', '@jashkenas/handy-embed-code-generator', '@analyzer2004/plot-gallery', '@nsthorat/how-to-build-a-teachable-machine-with-tensorflow-js', '@d3/sunburst-component', '@tomlarkworthy/saas-tutorial', '@mbostock/the-wealth-health-of-nations', '@yy/covid-19-fatality-rate', '@bryangingechen/importing-data-from-google-spreadsheets-into-a-notebook-we', '@mbostock/slide', '@kerryrodden/sequences-sunburst', '@d3/zoom-to-bounding-box', '@ambassadors/interactive-plot-dashboard', '@sethpipho/fractal-tree', '@mbostock/saving-svg', '@analyzer2004/west-coast-weather-from-seattle-to-san-diego', '@tmcw/tables', '@observablehq/introduction-to-serverless-notebooks', '@mootari/range-slider', '@d3/animated-treemap', '@d3/treemap-component', '@uwdata/interaction', '@hydrosquall/d3-annotation-with-d3-line-chart', '@jiazhewang/introduction-to-antv', '@d3/hierarchical-bar-chart', '@uwdata/data-types-graphical-marks-and-visual-encoding-channels', '@observablehq/why-use-a-radial-data-visualization', '@kerryrodden/introduction-to-text-analysis-with-tf-idf', '@uw-info474/javascript-data-wrangling', '@karimdouieb/try-to-impeach-this-challenge-accepted', '@observablehq/plot-gallery', '@carmen-tm/women-architects-i-didnt-hear-about', '@d3/versor-dragging', '@analyzer2004/timespiral', '@d3/brushable-scatterplot-matrix', '@observablehq/require', '@anjana/functional-javascript-first-steps', '@hamzaamjad/tiny-charts', '@observablehq/views', '@yurivish/quarantine-now', '@analyzer2004/performance-chart', '@freedmand/sounds', '@d3/bubble-chart-component', '@d3/mobile-patent-suits', '@observablehq/notebook-visualizer', '@d3/force-directed-tree' ]3b:Ta25,buildModuleNames = function buildModuleNames(runtime, { cache = [] } = {}) { const names = new Map(); for (const [module, info] of cache) names.set(module, info); if (runtime.mains) { for (const [name, module] of runtime.mains) { if (!names.has(module)) names.set(module, { name, module }); } } // Pass 1: "module X" variables with resolved _value for (const v of runtime._variables) { if (typeof v._name === 'string' && v._name.startsWith('module ') && v._value && !names.has(v._value)) { const name = v._name.slice(7); names.set(v._value, { name, module: v._value }); } } // Pass 2: for import-bridged variables whose source module is still unnamed, // find the "module X" variable in the same module and use its name. // This handles lazy/unresolved modules on Observable. for (const v of runtime._variables) { if (v._inputs?.length === 1 && v._inputs[0]?._module && v._inputs[0]._module !== v._module && !names.has(v._inputs[0]._module)) { // Find a "module X" variable in v._module that could reference this source for (const mv of runtime._variables) { if (mv._module === v._module && typeof mv._name === 'string' && mv._name.startsWith('module ')) { // Try to match: if mv._value is the source module, or if mv._value is unresolved // but mv is the only module var, use its name const targetModule = v._inputs[0]._module; if (mv._value === targetModule) { names.set(targetModule, { name: mv._name.slice(7), module: targetModule }); break; } } } } // Also for @variable pattern imports if (v._inputs?.length === 2 && v._inputs[1]?._name === '@variable' && v._inputs[0]?._value && !names.has(v._inputs[0]._value)) { names.set(v._inputs[0]._value, { name: v._inputs[0]._name?.slice(7) || 'unknown', module: v._inputs[0]._value }); } } nkImportedModuleNames(runtime, names); const builtinModule = runtime._builtin; if (builtinModule && !names.has(builtinModule)) names.set(builtinModule, { name: 'builtin', module: builtinModule }); for (const v of runtime._variables) { if (!names.has(v._module)) names.set(v._module, { name: 'main', module: v._module }); } return names; }3c:Tae8,nkShape = { // what a definition's syntax says Notebook Kit emitted; memoised per definition function const cache = new WeakMap(); const walk = (node, visit) => { if (!node || typeof node.type !== 'string') return; visit(node); for (const key in node) { const child = node[key]; if (Array.isArray(child)) child.forEach(c => walk(c, visit)); else if (child && typeof child.type === 'string') walk(child, visit); } }; const literal = node => node?.type === 'Literal' && typeof node.value === 'string' ? node.value : null; const named = (node, name) => node?.type === 'MemberExpression' && !node.computed && node.property.name === name; const read = definition => { let node; try { node = acorn.parseExpressionAt(String(definition), 0, { ecmaVersion: 'latest' }); } catch (e) { return { kind: 'unparsed' }; } const kind = node.type === 'ArrowFunctionExpression' ? 'arrow' : node.type === 'FunctionExpression' ? 'function' : 'other'; // a js expression cell is `() => {\nreturn (\n…\n)\n}` const expression = kind === 'arrow' && node.body.type === 'BlockStatement' && node.body.body.length === 1 && node.body.body[0].type === 'ReturnStatement'; const param = kind === 'arrow' && node.async && node.params.length === 1 && node.params[0].type === 'Identifier' ? node.params[0].name : null; if (!param) return { kind, expression }; let loads = false, specifier = null; const pairs = []; walk(node.body, n => { // ._module._runtime.module(…) if (n.type === 'CallExpression' && named(n.callee, 'module') && named(n.callee.object, '_runtime') && named(n.callee.object.object, '_module') && n.callee.object.object.object?.type === 'Identifier' && n.callee.object.object.object.name === param) loads = true; if (n.type === 'ImportExpression' && specifier == null) specifier = literal(n.source) ?? (n.source.type === 'NewExpression' ? literal(n.source.arguments[0]) : null); // outputs.get("")?.import("", …) if (n.type === 'CallExpression' && named(n.callee, 'import') && n.callee.object?.type === 'CallExpression' && named(n.callee.object.callee, 'get')) { const local = literal(n.callee.object.arguments[0]); const imported = literal(n.arguments[0]); if (local != null && imported != null) pairs.push({ local, imported }); } }); return loads ? { kind: 'import', specifier, pairs } : { kind, expression }; }; return definition => { if (typeof definition !== 'function') return read(definition); let shape = cache.get(definition); if (!shape) cache.set(definition, shape = read(definition)); return shape; }; }3d:Ta8e,nkCellStates = variables => { // A cell Notebook Kit's own define made (a notebook viewed on observablehq.com) has no js-toolchain display state. // Rebuild the definition define was given from the variables it left, so the cell exports and loads as a js-toolchain cell does. const states = new Map(); const byName = new Map(variables.filter(v => v._name != null).map(v => [v._name, v])); const holderId = name => /^cell (\d+)$/.exec(name ?? '')?.[1]; // an input that resolves to a display or view shadow has no name of its own const inputName = (v, input) => input._name ?? [...v._shadow ?? []].find(([, s]) => s === input)?.[0] ?? null; const dependents = head => variables.filter(v => v._inputs.length === 1 && v._inputs[0] === head && !(v._shadow instanceof Map)); for (const head of variables) { if (!(head._shadow instanceof Map) || displayStateOf(head)) continue; const name = head._name; const shape = nkShape(head._definition); const inputs = head._inputs.map(i => inputName(head, i)); let definition, extras = []; if (shape.kind === 'import') { extras = [...new Set(shape.pairs.map(p => p.local))].map(n => byName.get(n)).filter(v => v && v !== head); definition = { id: Number(holderId(name)), body: head._definition, inputs, outputs: extras.map(v => v._name), autodisplay: false }; } else if (holderId(name) != null) { extras = dependents(head); definition = { id: Number(holderId(name)), body: head._definition, inputs, outputs: extras.map(v => v._name), autodisplay: false }; } else if (typeof name === 'string' && name.startsWith('viewof$')) { extras = dependents(head).filter(v => v._name === name.slice(7)); definition = { body: head._definition, inputs, output: name, autodisplay: true, autoview: true }; } else { const mutator = head._inputs.length === 1 && holderId(head._inputs[0]._name) != null ? head._inputs[0] : null; const initial = mutator && byName.get(`mutable ${ name }`); if (initial && mutator._inputs[0] === initial) { extras = [initial, mutator, byName.get(`mutable$${ name }`)].filter(Boolean); definition = { id: Number(holderId(mutator._name)), body: initial._definition, inputs: initial._inputs.map(i => i._name), output: `mutable ${ name }`, autodisplay: true, automutable: true }; } else { const autodisplay = shape.kind === 'function' || shape.expression && !inputs.includes('display') && !inputs.includes('view'); definition = { body: head._definition, inputs, output: name ?? undefined, autodisplay }; } } states.set(head, { definition, variables: [head, ...extras] }); } return states; }3e:T53c,nkImportedModuleNames = function nkImportedModuleNames(runtime, names) { // A Notebook Kit import cell leaves no `module X` variable. Once it has run, each output reads from the module it loaded, // and the specifier names that module; a relative one is resolved against the importing module's name. const unnamed = info => info == null || ['main', 'unknown'].includes(info.name); for (let progress = true; progress;) { progress = false; for (const cell of runtime._variables) { if (!isNkImportCell(cell)) continue; const {specifier, pairs} = nkShape(cell._definition); const importer = names.get(cell._module); const relative = /^\.\.?\//.test(specifier ?? ''); if (specifier == null || relative && unnamed(importer)) continue; const url = new URL(specifier, 'https://lopecode.invalid/' + (relative ? importer.name : '')); const name = decodeURIComponent(url.pathname).replace(/^\/(api\/import\/)?/, '').replace(/\.js$/, ''); for (const {local} of pairs) { const module = cell._module._scope.get(local)?._inputs[0]?._module; if (!module || module === cell._module || !unnamed(names.get(module))) continue; names.set(module, { ...names.get(module), name, module }); progress = true; } } } return names; }3f:T54d,test_nkShape_reads_import_cells = { // the import cell Notebook Kit's transpiler writes for `import {x, x as y} from "./lib"` const cell = nkShape(['async (__variable) => {', 'const {x, x: y} = await (import("./lib").then((_) => {', ' const module = __variable._module._runtime.module(_.default);', ' const outputs = new Map(Array.from(__variable._outputs, (v) => [v._name, v]));', ' outputs.get("x")?.import("x", module);', ' outputs.get("y")?.import("x", "y", module);', ' return {};', '}));', '', 'return {x,y};', '}'].join('\n')); expect(cell).toEqual({ kind: 'import', specifier: './lib', pairs: [{ local: 'x', imported: 'x' }, { local: 'y', imported: 'x' }] }); expect(nkShape('async (__variable) => { const {a} = await (import(new URL("/api/import/@u/lib", document.baseURI)).then((_) => { const module = __variable._module._runtime.module(_.default); return {}; })); return {a}; }').specifier).toBe('/api/import/@u/lib'); // compiled lopecode imports are not Notebook Kit import cells expect(nkShape('(_, v) => v.import("x", _)').kind).toBe('arrow'); expect(nkShape('async () => runtime.module((await importShim("/@u/lib.js?v=4")).default)').kind).toBe('arrow'); expect(nkShape('() => {\nreturn (\n1 + 1\n)\n}').expression).toBe(true); expect(nkShape('(display) => {\ndisplay(1);\n}').expression).toBe(false); return 'ok'; }40:T451,module_specs = { if (task.options?.debug) debugger; return new Map(await Promise.all([...included_modules.entries()].map(async ([module, spec]) => { if (spec.name === TRACE_MODULE) debugger; // Raw variables for this module (user-defined, non-dynamic) const variables = [...task_runtime._variables].filter(v => v._module === module && (v._type === 1 || isModuleVar(v)) && !isDynamicVar(v)); const imports = variables.filter(v => isModuleVar(v)).map(v => v._name.slice(7)).filter(m => !['builtin'].includes(m)); const fileAttachments = getFileAttachments(module) || new Map(); if (spec.name === task.notebook && task?.options?.main_files !== false) { (getFileAttachments(main) ?? new Map()).forEach((value, key) => fileAttachments.set(key, value)); } const source = await generate_module_source(spec, variables, fileAttachments, { moduleNames }); return [ spec.name, { url: spec.name, imports, fileAttachments, source, variables, module, define: spec.define } ]; }))); }41:T512,streamingModuleOrder = (mainNames, specByName, blockByName) => { // Small blocks first, so each one unblocks the parser sooner: bootconf-declared mains lead (they // boot the page), then every other module in ascending emitted-block size — the biggest module, // which stalls the parser longest, lands last. `blockByName` holds each module's already-rendered // block, which includes its FileAttachment blocks (they must stay adjacent to their module, see // lopemodule), so an attachment-heavy module sorts by its real weight. Without it, fall back to // the source length. Ties break alphabetically, so order depends only on content and re-exporting // an unchanged notebook still produces byte-identical block order. The import graph is ignored: // define-time contentSync only needs each module's own attachments to precede it. const sizeOf = name => blockByName?.get(name)?.length ?? specByName.get(name)?.source?.length ?? 0; const bySize = (a, b) => sizeOf(a) - sizeOf(b) || (a < b ? -1 : a > b ? 1 : 0); const mains = new Set(mainNames.filter(n => specByName.has(n))); const lead = [...mains].sort(bySize); const rest = [...specByName.keys()].filter(n => !mains.has(n)).sort(bySize); return [ ...lead, ...rest ]; }42:T16b1,book = (async () => { const cssBlocks = task.options.style .map(([url, content]) => inlineModule(url, content, { mime: "text/css" })) .join("\n"); const cssUrls = task.options.style.map(([url]) => url); const systemBlocks = [ inlineGzipModule("es-module-shims@2.6.2", es_module_shims), inlineGzipModule("@observablehq/runtime@6.0.0", runtime_gz), inlineGzipModule("@observablehq/inspector@5.0.1", inspector_gz) ].join("\n"); // Render every block first (same total work — they already all rendered in parallel), so the // order can be decided on the emitted byte size rather than an estimate. const blockByName = new Map( await Promise.all( [...module_specs.keys()].map(async (name) => [ name, await lopemodule(module_specs.get(name)) ]) ) ); const orderedNames = streamingModuleOrder( [...task.mains.keys()], module_specs, blockByName ); const userBlocks = orderedNames.map((name) => blockByName.get(name)).join(""); const bootloader = task.options.bootloader || "@tomlarkworthy/bootloader"; const tickLine = task.options.tick != null ? `,\n "tick": ${JSON.stringify(task.options.tick)}` : ""; const tickDelayLine = task.options.tickDelayMs != null ? `,\n "tickDelayMs": ${JSON.stringify(task.options.tickDelayMs)}` : ""; const prerenderLine = task.options.prerender ? `,\n "prerender": true` : ""; const bootconfBlock = `