rollup npm protocol imports

src/client/dot.js

@@ -1,5 +1,5 @@
 export async function dot() {
-  const {instance} = await import("https://cdn.jsdelivr.net/npm/@viz-js/viz/+esm");
+  const {instance} = await import("npm:@viz-js/viz");
   const viz = await instance();
   return function dot(strings) {
     let string = strings[0] + "";

src/client/library.js

@@ -13,16 +13,16 @@ export function makeLibrary() {
     // Override the common recommended libraries so that if a user imports them,
     // they get the same version that the standard library provides (rather than
     // loading the library twice). Also, it’s nice to avoid require!
-    d3: () => import("https://cdn.jsdelivr.net/npm/d3/+esm"),
-    htl: () => import("https://cdn.jsdelivr.net/npm/htl/+esm"),
-    html: () => import("https://cdn.jsdelivr.net/npm/htl/+esm").then((htl) => htl.html),
-    svg: () => import("https://cdn.jsdelivr.net/npm/htl/+esm").then((htl) => htl.svg),
-    Plot: () => import("https://cdn.jsdelivr.net/npm/@observablehq/plot/+esm"),
+    d3: () => import("npm:d3"),
+    htl: () => import("npm:htl"),
+    html: () => import("npm:htl").then((htl) => htl.html),
+    svg: () => import("npm:htl").then((htl) => htl.svg),
+    Plot: () => import("npm:@observablehq/plot"),
     Inputs: () => {
       // TODO Observable Inputs needs to include the CSS in the dist folder
       // published to npm, and we should replace the __ns__ namespace with
       // oi-{hash} in the ES module distribution, somehow.
-      const inputs = import("https://cdn.jsdelivr.net/npm/@observablehq/inputs/+esm");
+      const inputs = import("npm:@observablehq/inputs");
       const link = document.createElement("link");
       link.rel = "stylesheet";
       link.href = "https://cdn.jsdelivr.net/gh/observablehq/inputs/src/style.css";

src/client/mermaid.js

@@ -1,6 +1,6 @@
 export async function mermaid() {
   let nextId = 0;
-  const {default: mer} = await import("https://cdn.jsdelivr.net/npm/mermaid/+esm");
+  const {default: mer} = await import("npm:mermaid");
   const theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "neutral";
   mer.initialize({startOnLoad: false, securityLevel: "loose", theme});
   return async function mermaid() {

src/client/tex.js

@@ -5,7 +5,7 @@ export async function tex() {
   link.crossOrigin = "anonymous";
   document.head.appendChild(link);
 
-  const {default: katex} = await import("https://cdn.jsdelivr.net/npm/katex/+esm");
+  const {default: katex} = await import("npm:katex");
   const tex = renderer();
 
   function renderer(options) {

src/rollup.ts

@@ -5,7 +5,20 @@ import terser from "@rollup/plugin-terser";
 import {type OutputChunk, rollup} from "rollup";
 
 export async function rollupClient(clientPath = getClientPath(), {minify = false} = {}): Promise<string> {
-  const bundle = await rollup({input: clientPath, external: ["./runtime.js", /^https:/]});
+  const bundle = await rollup({
+    input: clientPath,
+    external: ["./runtime.js", /^https:/],
+    plugins: [
+      {
+        name: "resolve-npm-import",
+        resolveDynamicImport(specifier) {
+          return typeof specifier === "string" && specifier.startsWith("npm:")
+            ? {id: `https://cdn.jsdelivr.net/npm/${specifier.slice("npm:".length)}/+esm`}
+            : null;
+        }
+      }
+    ]
+  });
   try {
     const output = await bundle.generate({format: "es", plugins: minify ? [(terser as any)()] : []});
     return output.output.find((o): o is OutputChunk => o.type === "chunk")!.code; // XXX