feat: add support for notebook-kit

GordonSmith · GordonSmith · commit 3757b4f95fe3 · 2025-08-08T08:34:12.000+01:00
Signed-off-by: Gordon Smith &lt;GordonJSmith@gmail.com&gt;
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/markdown-it-plugins/package.json b/packages/markdown-it-plugins/package.json
@@ -54,7 +54,10 @@
     "dependencies": {
         "@hpcc-js/observablehq-compiler": "^3.3.9",
         "@observablehq/framework": "1.13.3",
-        "@observablehq/runtime": "5.9.9",
+        "@observablehq/parser": "6.1.0",
+        "@observablehq/inspector": "5.0.1",
+        "@observablehq/stdlib": "5.8.8",
+        "@observablehq/runtime": "6.0.0",
         "@types/markdown-it": "14.1.2"
     },
     "peerDependencies": {
diff --git a/packages/observablehq-compiler/README.md b/packages/observablehq-compiler/README.md
@@ -80,7 +80,9 @@ The interpreter is 100% compatible with:
 It also supports fetching notebooks directly from the ObservableHQ repository.
 
 ```js
-import { Library, Runtime, Inspector } from "@observablehq/runtime";
+import { Inspector } from "@observablehq/inspector";
+import { Library } from "@observablehq/stdlib";
+import { Runtime } from "@observablehq/runtime";
 import { download, compile } from "@hpcc-js/observablehq-compiler";
 
 const placeholder = document.getElementById("placeholder");
diff --git a/packages/observablehq-compiler/esbuild.js b/packages/observablehq-compiler/esbuild.js
diff --git a/packages/observablehq-compiler/index-preview.html b/packages/observablehq-compiler/index-preview.html
@@ -26,7 +26,14 @@
     <script type="importmap">
         {
             "imports": {
-                "@observablehq/runtime": "https://cdn.jsdelivr.net/npm/@observablehq/runtime@5.9.9/dist/runtime.js",
+                "@observablehq/stdlib": "https://cdn.jsdelivr.net/npm/@observablehq/stdlib@5.8.8/src/index.js",
+                "@observablehq/inspector": "https://cdn.jsdelivr.net/npm/@observablehq/inspector@5.0.1/src/index.js",
+                "@observablehq/runtime": "https://cdn.jsdelivr.net/npm/@observablehq/runtime@6.0.0/src/index.js",
+                "isoformat": "https://cdn.jsdelivr.net/npm/isoformat@0.2.1/src/index.js",
+                "d3-dsv": "https://cdn.jsdelivr.net/npm/d3-dsv@3.0.1/src/index.js",
+                "d3-require": "https://cdn.jsdelivr.net/npm/d3-require@1.3.0/src/index.mjs",
+                "d3-array": "https://cdn.jsdelivr.net/npm/d3-array@3.2.4/src/index.js",
+                "internmap": "https://cdn.jsdelivr.net/npm/internmap@2.0.3/src/index.js",
 
                 "@hpcc-js/observablehq-compiler": "../observablehq-compiler/dist/index.js"
             }
@@ -38,7 +45,9 @@
     <h1>ESM Quick Test</h1>
     <div id="placeholder"></div>
     <script type="module">
-        import { Library, Runtime, Inspector } from "@observablehq/runtime";
+        import { Inspector } from "@observablehq/inspector";
+        import { Library } from "@observablehq/stdlib";
+        import { Runtime } from "@observablehq/runtime";
         import { omd2notebook, compile } from "@hpcc-js/observablehq-compiler";
 
         const md = `\
diff --git a/packages/observablehq-compiler/index.html b/packages/observablehq-compiler/index.html
@@ -29,7 +29,9 @@
     <h1>ESM Quick Test</h1>
     <div id="placeholder"></div>
     <script type="module">
-        import { Library, Runtime, Inspector } from "@observablehq/runtime";
+        import { Inspector } from "@observablehq/inspector";
+        import { Library } from "@observablehq/stdlib";
+        import { Runtime } from "@observablehq/runtime";
         import { omd2notebook, compile } from "./src/index.ts";
 
         const md = `\
diff --git a/packages/observablehq-compiler/package.json b/packages/observablehq-compiler/package.json
@@ -48,7 +48,9 @@
     "devDependencies": {
         "@hpcc-js/esbuild-plugins": "^1.4.9",
         "@observablehq/parser": "6.1.0",
-        "@observablehq/runtime": "5.9.9"
+        "@observablehq/inspector": "5.0.1",
+        "@observablehq/stdlib": "5.8.8",
+        "@observablehq/notebook-kit": "1.0.1"
     },
     "repository": {
         "type": "git",
diff --git a/packages/observablehq-compiler/src/compiler.md b/packages/observablehq-compiler/src/compiler.md
@@ -71,7 +71,9 @@ To render it to a web page, simply follow the same steps as if you had downloade
 
 ```js
 
-import { Library, Runtime, Inspector } from "https://cdn.skypack.dev/@observablehq/runtime";
+import { Inspector } from "https://cdn.skypack.dev/@observablehq/inspector";
+import { Library } from "https://cdn.skypack.dev/@observablehq/stdlib";
+import { Runtime } from "https://cdn.skypack.dev/@observablehq/runtime";
 
 const placeholder = document.getElementById("placeholder");
 
@@ -93,7 +95,9 @@ Putting it all together:
     <div id="placeholder" style="height:100%;overflow-y:scroll">
     </div>
     <script type="module">
-      import { Library, Runtime, Inspector } from "https://cdn.skypack.dev/@observablehq/runtime";
+      import { Inspector } from "https://cdn.skypack.dev/@observablehq/inspector";
+      import { Library } from "https://cdn.skypack.dev/@observablehq/stdlib";
+      import { Runtime } from "https://cdn.skypack.dev/@observablehq/runtime";
       import { compile } from "@hpcc-js/observablehq-compiler";
 
       const placeholder = document.getElementById("placeholder");
@@ -183,7 +187,9 @@ To output the generated code simply call `toString` on the compiled function:
     <div id="placeholder" style="height:400px;overflow-y:scroll">
     </div>
     <script type="module">
-      import { Library, Runtime, Inspector } from "https://cdn.skypack.dev/@observablehq/runtime";
+      import { Inspector } from "https://cdn.skypack.dev/@observablehq/inspector";
+      import { Library } from "https://cdn.skypack.dev/@observablehq/stdlib";
+      import { Runtime } from "https://cdn.skypack.dev/@observablehq/runtime";
       import { download, compile } from "@hpcc-js/observablehq-compiler";
 
       const notebookUrl = "https://observablehq.com/@observablehq/plot";
@@ -212,7 +218,10 @@ To output the generated code simply call `toString` on the compiled function:
     <div id="placeholder" style="height:400px;overflow-y:scroll">
     </div>
     <script type="module">
-      import { Library, Runtime, Inspector } from "https://cdn.skypack.dev/@observablehq/runtime";
+      import { Inspector } from "https://cdn.skypack.dev/@observablehq/inspector";
+      import { Library } from "https://cdn.skypack.dev/@observablehq/stdlib";
+      import { Runtime } from "https://cdn.skypack.dev/@observablehq/runtime";
+
       import { download, compile } from "@hpcc-js/observablehq-compiler";
 
       const notebookUrl = "https://observablehq.com/@mbostock/fullscreen-canvas";
diff --git a/packages/observablehq-compiler/src/compiler.ts b/packages/observablehq-compiler/src/compiler.ts
@@ -1,3 +1,4 @@
+import { FileAttachments } from "@observablehq/stdlib";
 import { ohq, splitModule } from "./observable-shim.ts";
 import { parseCell, ParsedImportCell } from "./cst.ts";
 import { Writer } from "./writer.ts";
@@ -266,13 +267,16 @@ export interface CompileOptions {
 }
 export function notebook(_files: ohq.File[] = [], _cells: CellFunc[] = [], { baseUrl = ".", importMode = "precompiled" }: CompileOptions = {}) {
     const files: FileFunc[] = _files.map(f => createFile(f, { baseUrl, importMode }));
-    const fileAttachments = new Map<string, any>(files);
+    const fileAttachmentsMap = new Map<string, any>(files);
     const cells = new Map<string | number, CellFunc>(_cells.map(c => [c.id, c]));
 
     const retVal = (runtime: ohq.Runtime, inspector?: InspectorFactoryEx): ohq.Module => {
+        if (runtime.fileAttachments === undefined) {
+            Object.defineProperties(Object.getPrototypeOf(runtime), { fileAttachments: { value: FileAttachments, writable: true, configurable: true } });
+        }
         const main = runtime.module();
         main.builtin("FileAttachment", runtime.fileAttachments(name => {
-            return fileAttachments.get(name) ?? { url: new URL(fixRelativeUrl(name, baseUrl)), mimeType: null };
+            return fileAttachmentsMap.get(name) ?? { url: new URL(fixRelativeUrl(name, baseUrl)), mimeType: null };
         }));
         main.builtin("fetchEx", fetchEx);
 
@@ -281,7 +285,7 @@ export function notebook(_files: ohq.File[] = [], _cells: CellFunc[] = [], { bas
         });
         return main;
     };
-    retVal.fileAttachments = fileAttachments;
+    retVal.fileAttachments = fileAttachmentsMap;
     retVal.cells = cells;
     retVal.set = async (n: ohq.Node): Promise<CellFunc> => {
         const cell = await createCell(n, { baseUrl, importMode });
diff --git a/packages/observablehq-compiler/src/index.ts b/packages/observablehq-compiler/src/index.ts
@@ -5,3 +5,5 @@ export { ojs2notebook, omd2notebook, download } from "./util.ts";
 export * from "./writer.ts";
 
 import "../src/index.css";
+
+// export { ohqnk } from "./ohqnk/index.ts";
diff --git a/packages/observablehq-compiler/src/ohqnk/compiler.ts b/packages/observablehq-compiler/src/ohqnk/compiler.ts
@@ -0,0 +1,54 @@
+import { Notebook, Cell } from '@observablehq/notebook-kit';
+import { define, runtime, main, type DefineState, type Definition } from '@observablehq/notebook-kit/runtime';
+import type { Inspector } from "@observablehq/inspector";
+import type { Runtime, Module } from "@observablehq/runtime";
+
+export type InspectorFactory = (name: string | undefined, id: string | number) => Inspector;
+
+class RuntimeWrapper {
+    protected stateById = new Map<string, DefineState>();
+
+    constructor() {
+
+    }
+
+    add(vscodeCellID: string, definition: Definition, placeholderDiv: HTMLDivElement): void {
+        let state = this.stateById.get(vscodeCellID);
+        if (state) {
+            state.variables.forEach((v) => v.delete());
+            state.variables = [];
+        } else {
+            state = { root: placeholderDiv, expanded: [], variables: [] };
+            this.stateById.set(vscodeCellID, state);
+        }
+        define(state, definition);
+    }
+
+    remove(vscodeCellID: string): void {
+        const state = this.stateById.get(vscodeCellID)!;
+        state.root.remove();
+        state.variables.forEach((v) => v.delete());
+        this.stateById.delete(vscodeCellID);
+    }
+
+    removeAll(): void {
+        const keys = Array.from(this.stateById.keys());
+        for (const key of keys) {
+            this.remove(key);
+        }
+    }
+
+}
+
+//  File  ---
+export function compile(notebook: Notebook) {
+    const retVal = (runtime: Runtime, inspector?: InspectorFactory): Module => {
+        const main: Module = runtime.module();
+
+        notebook.cells.forEach(cell => {
+            main.define(cell.id, cell.value);
+        });
+        return main;
+    };
+    return retVal;
+}
diff --git a/packages/observablehq-compiler/src/ohqnk/index.ts b/packages/observablehq-compiler/src/ohqnk/index.ts
@@ -0,0 +1,12 @@
+import { Notebook as ohqnkNotebook, Cell as ohqnkCell } from '@observablehq/notebook-kit';
+import { compile as ohqnkCompile } from "./compiler.ts";
+
+export namespace ohqnk {
+    export interface Notebook extends ohqnkNotebook {
+    }
+
+    export interface Cell extends ohqnkCell {
+    }
+
+    export const compile = ohqnkCompile;
+}
diff --git a/packages/observablehq-compiler/tests/esm-import.browser.spec.ts b/packages/observablehq-compiler/tests/esm-import.browser.spec.ts
@@ -1,5 +1,6 @@
 import { describe, it, expect } from "vitest";
-import { Library, Runtime } from "@observablehq/runtime";
+import { Library } from "@observablehq/stdlib";
+import { Runtime } from "@observablehq/runtime";
 import { compile, ohq } from "@hpcc-js/observablehq-compiler";
 
 describe("observablehq-compiler", function () {
diff --git a/packages/observablehq-compiler/tests/simple.browser.spec.ts b/packages/observablehq-compiler/tests/simple.browser.spec.ts
@@ -1,4 +1,6 @@
-import { Library, Runtime, Inspector } from "@observablehq/runtime";
+import { Inspector } from "@observablehq/inspector";
+import { Library } from "@observablehq/stdlib";
+import { Runtime } from "@observablehq/runtime";
 import { describe, it, expect } from "vitest";
 import { compile, download, ohq, ojs2notebook } from "@hpcc-js/observablehq-compiler";
 import { fa } from "./File Attachments.ts";
diff --git a/packages/observablehq-compiler/vite.config.ts b/packages/observablehq-compiler/vite.config.ts
@@ -1,6 +1,32 @@
 import { createHpccViteConfig, browserConfig, nodeConfig } from "@hpcc-js/esbuild-plugins";
 import pkg from "./package.json" with { type: "json" };
 
+const aliasPlugin = {
+    name: 'alias-plugin',
+    setup(build) {
+        const aliases = [
+            {
+                find: /^npm:(.*)$/,
+                replacement: "https://cdn.jsdelivr.net/npm/$1/+esm"
+            },
+            {
+                find: /^jsr:(.*)$/,
+                replacement: "https://esm.sh/jsr/$1"
+            }
+        ];
+
+        build.onResolve({ filter: /^(npm|jsr):/ }, args => {
+            for (const alias of aliases) {
+                const match = args.path.match(alias.find);
+                if (match) {
+                    const resolved = alias.replacement.replace('$1', match[1]);
+                    return { path: resolved, external: true };
+                }
+            }
+        });
+    }
+};
+
 const myBrowserConfig = { ...browserConfig };
 myBrowserConfig.optimizeDeps = {
     include: ["acorn", "acorn-walk", "@observablehq/parser"]
@@ -11,10 +37,15 @@ myNodeConfig.optimizeDeps = {
     include: ["acorn", "acorn-walk", "@observablehq/parser"]
 };
 
-export default createHpccViteConfig(pkg, {
+const config = createHpccViteConfig(pkg, {
+    plugins: [aliasPlugin],
     configOverrides: {
         test: {
             projects: [myBrowserConfig, myNodeConfig]
         }
     }
 });
+
+export default {
+    ...config
+};
