diff --git a/src/client/dot.js b/src/client/dot.js index 3528e89e6..e2efebe38 100644 --- a/src/client/dot.js +++ b/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] + ""; diff --git a/src/client/library.js b/src/client/library.js index ca5390d1c..df683f494 100644 --- a/src/client/library.js +++ b/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"; diff --git a/src/client/mermaid.js b/src/client/mermaid.js index c37b4a630..6f83c0271 100644 --- a/src/client/mermaid.js +++ b/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() { diff --git a/src/client/tex.js b/src/client/tex.js index 3d88da326..1b9a515e7 100644 --- a/src/client/tex.js +++ b/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) { diff --git a/src/rollup.ts b/src/rollup.ts index 81b860f71..8592806fa 100644 --- a/src/rollup.ts +++ b/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 { - 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