observablehq: protocol imports

Author: mbostock

src/client/inspect.js

@@ -1,4 +1,4 @@
-import {Inspector} from "./runtime.js";
+import {Inspector} from "observablehq:runtime";
 
 export function inspect(value) {
   const inspector = new Inspector(document.createElement("div"));

src/client/main.js

@@ -1,9 +1,9 @@
+import {Runtime} from "observablehq:runtime";
+import {registerDatabase, registerFile} from "observablehq:stdlib";
+import {DatabaseClient, FileAttachment, Generators, Mutable, now, width} from "observablehq:stdlib";
 import {inspect, inspectError} from "./inspect.js";
-import {Runtime} from "./runtime.js";
 import * as recommendedLibraries from "./stdlib/recommendedLibraries.js";
 import * as sampleDatasets from "./stdlib/sampleDatasets.js";
-import {registerDatabase, registerFile} from "./stdlib.js";
-import {DatabaseClient, FileAttachment, Generators, Mutable, now, width} from "./stdlib.js";
 
 const library = {
   now,

src/client/stdlib/recommendedLibraries.js

@@ -2,14 +2,14 @@ export const _ = () => import("npm:lodash").then((lodash) => lodash.default);
 export const aq = () => import("npm:arquero");
 export const Arrow = () => import("npm:apache-arrow");
 export const d3 = () => import("npm:d3");
-export const dot = () => import("./dot.js").then((dot) => dot.default);
+export const dot = () => import("observablehq:stdlib/dot").then((dot) => dot.default);
 export const htl = () => import("npm:htl");
 export const html = () => import("npm:htl").then((htl) => htl.html);
 export const svg = () => import("npm:htl").then((htl) => htl.svg);
-export const Inputs = () => import("./inputs.js");
-export const L = () => import("./leaflet.js");
-export const mermaid = () => import("./mermaid.js").then((mermaid) => mermaid.default);
+export const Inputs = () => import("observablehq:stdlib/inputs");
+export const L = () => import("observablehq:stdlib/leaflet");
+export const mermaid = () => import("observablehq:stdlib/mermaid").then((mermaid) => mermaid.default);
 export const Plot = () => import("npm:@observablehq/plot");
-export const SQLite = () => import("./sqlite.js").then((sqlite) => sqlite.default);
-export const tex = () => import("./tex.js").then((tex) => tex.default);
+export const SQLite = () => import("observablehq:stdlib/sqlite").then((sqlite) => sqlite.default);
+export const tex = () => import("observablehq:stdlib/tex").then((tex) => tex.default);
 export const topojson = () => import("npm:topojson-client");

src/rollup.ts

@@ -1,26 +1,17 @@
 import {dirname, join, relative} from "node:path";
 import {cwd} from "node:process";
 import {fileURLToPath} from "node:url";
-import {type AstNode, type OutputChunk, rollup} from "rollup";
+import type {AstNode, OutputChunk, ResolveIdResult} from "rollup";
+import {rollup} from "rollup";
 import esbuild from "rollup-plugin-esbuild";
 
 export async function rollupClient(clientPath = getClientPath(), {minify = false} = {}): Promise<string> {
   const bundle = await rollup({
     input: clientPath,
-    external: [
-      "./runtime.js", // npm:@observablehq/runtime
-      "./stdlib.js", // npm:@observablehq/stdlib
-      "./stdlib/dot.js", // npm:@observablehq/dot
-      "./stdlib/inputs.js", // npm:@observablehq/inputs
-      "./stdlib/leaflet.js", // npm:leaflet
-      "./stdlib/mermaid.js", // npm:@observablehq/mermaid
-      "./stdlib/sqlite.js", // npm:sql.js
-      "./stdlib/tex.js", // npm:@observablehq/tex
-      /^https:/
-    ],
+    external: [/^https:/],
     plugins: [
       {
-        name: "resolve-npm-import",
+        name: "resolve-import",
         resolveId: resolveImport,
         resolveDynamicImport: resolveImport
       },
@@ -35,8 +26,12 @@ export async function rollupClient(clientPath = getClientPath(), {minify = false
   }
 }
 
-function resolveImport(specifier: string | AstNode): {id: string} | null {
-  return typeof specifier === "string" && specifier.startsWith("npm:")
+function resolveImport(specifier: string | AstNode): ResolveIdResult {
+  return typeof specifier !== "string"
+    ? null
+    : specifier.startsWith("observablehq:")
+    ? {id: `./${specifier.slice("observablehq:".length)}.js`, external: true}
+    : specifier.startsWith("npm:")
     ? {id: `https://cdn.jsdelivr.net/npm/${specifier.slice("npm:".length)}/+esm`}
     : null;
 }