_esm.js (#1056)

Author: mbostock

src/build.ts

@@ -10,7 +10,7 @@ import {transpileModule} from "./javascript/transpile.js";
 import type {Logger, Writer} from "./logger.js";
 import type {MarkdownPage} from "./markdown.js";
 import {parseMarkdown} from "./markdown.js";
-import {populateNpmCache, resolveNpmImport, resolveNpmSpecifier} from "./npm.js";
+import {extractNpmSpecifier, populateNpmCache, resolveNpmImport} from "./npm.js";
 import {isPathImport, relativePath, resolvePath} from "./path.js";
 import {renderPage} from "./render.js";
 import type {Resolvers} from "./resolvers.js";
@@ -176,7 +176,7 @@ export async function build(
   // doesn’t let you pass in a resolver.
   for (const path of globalImports) {
     if (!path.startsWith("/_npm/")) continue; // skip _observablehq
-    effects.output.write(`${faint("copy")} npm:${resolveNpmSpecifier(path)} ${faint("→")} `);
+    effects.output.write(`${faint("copy")} npm:${extractNpmSpecifier(path)} ${faint("→")} `);
     const sourcePath = await populateNpmCache(root, path); // TODO effects
     await effects.copyFile(sourcePath, path);
   }

src/npm.ts

@@ -80,7 +80,7 @@ export async function populateNpmCache(root: string, path: string): Promise<stri
   let promise = npmRequests.get(path);
   if (promise) return promise; // coalesce concurrent requests
   promise = (async function () {
-    const specifier = resolveNpmSpecifier(path);
+    const specifier = extractNpmSpecifier(path);
     const href = `https://cdn.jsdelivr.net/npm/${specifier}`;
     process.stdout.write(`npm:${specifier} ${faint("→")} `);
     const response = await fetch(href);
@@ -117,7 +117,7 @@ export async function getDependencyResolver(
 ): Promise<(specifier: string) => string> {
   const body = parseProgram(input);
   const dependencies = new Set<string>();
-  const {name, range} = parseNpmSpecifier(resolveNpmSpecifier(path));
+  const {name, range} = parseNpmSpecifier(extractNpmSpecifier(path));
 
   simple(body, {
     ImportDeclaration: findImport,
@@ -172,7 +172,7 @@ export async function getDependencyResolver(
   return (specifier: string) => {
     if (!specifier.startsWith("/npm/")) return specifier;
     if (resolutions.has(specifier)) specifier = resolutions.get(specifier)!;
-    else specifier = `/_npm/${specifier.slice("/npm/".length)}${specifier.endsWith("/+esm") ? ".js" : ""}`;
+    else specifier = fromJsDelivrPath(specifier);
     return relativePath(path, specifier);
   };
 }
@@ -249,14 +249,14 @@ export async function resolveNpmImport(root: string, specifier: string): Promise
       ? "dist/echarts.esm.min.js"
       : "+esm"
   } = parseNpmSpecifier(specifier);
-  return `/_npm/${name}@${await resolveNpmVersion(root, {name, range})}/${path.replace(/\+esm$/, "+esm.js")}`;
+  return `/_npm/${name}@${await resolveNpmVersion(root, {name, range})}/${path.replace(/\+esm$/, "_esm.js")}`;
 }
 
 const npmImportsCache = new Map<string, Promise<ImportReference[]>>();
 
 /**
  * Resolves the direct dependencies of the specified npm path, such as
- * "/_npm/[email protected]/+esm.js", returning the corresponding set of npm paths.
+ * "/_npm/[email protected]/_esm.js", returning the corresponding set of npm paths.
  */
 export async function resolveNpmImports(root: string, path: string): Promise<ImportReference[]> {
   if (!path.startsWith("/_npm/")) throw new Error(`invalid npm path: ${path}`);
@@ -278,6 +278,20 @@ export async function resolveNpmImports(root: string, path: string): Promise<Imp
   return promise;
 }
 
-export function resolveNpmSpecifier(path: string): string {
-  return path.replace(/^\/_npm\//, "").replace(/\/\+esm\.js$/, "/+esm");
+/**
+ * Given a local npm path such as "/_npm/[email protected]/_esm.js", returns the
+ * corresponding npm specifier such as "[email protected]".
+ */
+export function extractNpmSpecifier(path: string): string {
+  if (!path.startsWith("/_npm/")) throw new Error(`invalid npm path: ${path}`);
+  return path.replace(/^\/_npm\//, "").replace(/\/_esm\.js$/, "/+esm");
+}
+
+/**
+ * Given a jsDelivr path such as "/npm/[email protected]/+esm", returns the corresponding
+ * local path such as "/_npm/[email protected]/_esm.js".
+ */
+export function fromJsDelivrPath(path: string): string {
+  if (!path.startsWith("/npm/")) throw new Error(`invalid jsDelivr path: ${path}`);
+  return path.replace(/^\/npm\//, "/_npm/").replace(/\/\+esm$/, "/_esm.js");
 }

src/resolvers.ts

@@ -8,7 +8,7 @@ import {getImplicitDependencies, getImplicitDownloads} from "./libraries.js";
 import {getImplicitFileImports, getImplicitInputImports} from "./libraries.js";
 import {getImplicitStylesheets} from "./libraries.js";
 import type {MarkdownPage} from "./markdown.js";
-import {populateNpmCache, resolveNpmImport, resolveNpmImports, resolveNpmSpecifier} from "./npm.js";
+import {extractNpmSpecifier, populateNpmCache, resolveNpmImport, resolveNpmImports} from "./npm.js";
 import {isPathImport, relativePath, resolvePath} from "./path.js";
 
 export interface Resolvers {
@@ -171,7 +171,7 @@ export async function getResolvers(
     for (const i of await resolveNpmImports(root, value)) {
       if (i.type === "local") {
         const path = resolvePath(value, i.name);
-        const specifier = `npm:${resolveNpmSpecifier(path)}`;
+        const specifier = `npm:${extractNpmSpecifier(path)}`;
         globalImports.add(specifier);
         resolutions.set(specifier, path);
       }
@@ -188,7 +188,7 @@ export async function getResolvers(
     for (const i of await resolveNpmImports(root, value)) {
       if (i.type === "local" && i.method === "static") {
         const path = resolvePath(value, i.name);
-        const specifier = `npm:${resolveNpmSpecifier(path)}`;
+        const specifier = `npm:${extractNpmSpecifier(path)}`;
         staticImports.add(specifier);
         npmStaticResolutions.add(path);
       }

test/javascript/npm-test.ts

@@ -1,5 +1,6 @@
 import assert from "node:assert";
-import {getDependencyResolver, rewriteNpmImports} from "../../src/npm.js";
+import {extractNpmSpecifier, getDependencyResolver, rewriteNpmImports} from "../../src/npm.js";
+import {fromJsDelivrPath} from "../../src/npm.js";
 import {relativePath} from "../../src/path.js";
 import {mockJsDelivr} from "../mocks/jsdelivr.js";
 
@@ -8,67 +9,86 @@ describe("getDependencyResolver(root, path, input)", () => {
   it("finds /npm/ imports and re-resolves their versions", async () => {
     const root = "test/input/build/simple-public";
     const specifier = "/npm/[email protected]/dist/d3-array.js";
-    const resolver = await getDependencyResolver(root, "/_npm/[email protected]/+esm.js", `import '${specifier}';\n`); // prettier-ignore
+    const resolver = await getDependencyResolver(root, "/_npm/[email protected]/_esm.js", `import '${specifier}';\n`); // prettier-ignore
     assert.strictEqual(resolver(specifier), "../[email protected]/dist/d3-array.js");
   });
   it("finds /npm/ import resolutions and re-resolves their versions", async () => {
     const root = "test/input/build/simple-public";
     const specifier = "/npm/[email protected]/dist/d3-array.js";
-    const resolver = await getDependencyResolver(root, "/_npm/[email protected]/+esm.js", `import.meta.resolve('${specifier}');\n`); // prettier-ignore
+    const resolver = await getDependencyResolver(root, "/_npm/[email protected]/_esm.js", `import.meta.resolve('${specifier}');\n`); // prettier-ignore
     assert.strictEqual(resolver(specifier), "../[email protected]/dist/d3-array.js");
   });
 });
 
+describe("extractNpmSpecifier(path)", () => {
+  it("returns the npm specifier for the given local npm path", () => {
+    assert.strictEqual(extractNpmSpecifier("/_npm/[email protected]/_esm.js"), "[email protected]/+esm");
+    assert.strictEqual(extractNpmSpecifier("/_npm/[email protected]/dist/d3.js"), "[email protected]/dist/d3.js");
+  });
+  it("throws if not given a local npm path", () => {
+    assert.throws(() => extractNpmSpecifier("/npm/[email protected]/+esm"), /invalid npm path/);
+    assert.throws(() => extractNpmSpecifier("[email protected]"), /invalid npm path/);
+  });
+});
+
+describe("fromJsDelivrPath(path)", () => {
+  it("returns the local npm path for the given jsDelivr path", () => {
+    assert.strictEqual(fromJsDelivrPath("/npm/[email protected]/+esm"), "/_npm/[email protected]/_esm.js");
+    assert.strictEqual(fromJsDelivrPath("/npm/[email protected]/dist/d3.js"), "/_npm/[email protected]/dist/d3.js");
+  });
+  it("throws if not given a jsDelivr path", () => {
+    assert.throws(() => fromJsDelivrPath("/_npm/[email protected]/_esm.js"), /invalid jsDelivr path/);
+    assert.throws(() => fromJsDelivrPath("[email protected]"), /invalid jsDelivr path/);
+  });
+});
+
 // prettier-ignore
 describe("rewriteNpmImports(input, resolve)", () => {
   it("rewrites /npm/ imports to /_npm/", () => {
     assert.strictEqual(rewriteNpmImports('export * from "/npm/[email protected]/dist/d3-array.js";\n', (v) => resolve("/_npm/[email protected]/dist/d3.js", v)), 'export * from "../../[email protected]/dist/d3-array.js";\n');
   });
-  it("rewrites /npm/…+esm imports to +esm.js", () => {
-    assert.strictEqual(rewriteNpmImports('export * from "/npm/[email protected]/+esm";\n', (v) => resolve("/_npm/[email protected]/+esm.js", v)), 'export * from "../[email protected]/+esm.js";\n');
+  it("rewrites /npm/…+esm imports to _esm.js", () => {
+    assert.strictEqual(rewriteNpmImports('export * from "/npm/[email protected]/+esm";\n', (v) => resolve("/_npm/[email protected]/_esm.js", v)), 'export * from "../[email protected]/_esm.js";\n');
   });
   it("rewrites /npm/ imports to a relative path", () => {
     assert.strictEqual(rewriteNpmImports('import "/npm/[email protected]/dist/d3-array.js";\n', (v) => resolve("/_npm/[email protected]/dist/d3.js", v)), 'import "../../[email protected]/dist/d3-array.js";\n');
     assert.strictEqual(rewriteNpmImports('import "/npm/[email protected]/dist/d3-array.js";\n', (v) => resolve("/_npm/[email protected]/d3.js", v)), 'import "../[email protected]/dist/d3-array.js";\n');
   });
   it("rewrites named imports", () => {
-    assert.strictEqual(rewriteNpmImports('import {sort} from "/npm/[email protected]/+esm";\n', (v) => resolve("/_npm/[email protected]/+esm.js", v)), 'import {sort} from "../[email protected]/+esm.js";\n');
+    assert.strictEqual(rewriteNpmImports('import {sort} from "/npm/[email protected]/+esm";\n', (v) => resolve("/_npm/[email protected]/_esm.js", v)), 'import {sort} from "../[email protected]/_esm.js";\n');
   });
   it("rewrites empty imports", () => {
-    assert.strictEqual(rewriteNpmImports('import "/npm/[email protected]/+esm";\n', (v) => resolve("/_npm/[email protected]/+esm.js", v)), 'import "../[email protected]/+esm.js";\n');
+    assert.strictEqual(rewriteNpmImports('import "/npm/[email protected]/+esm";\n', (v) => resolve("/_npm/[email protected]/_esm.js", v)), 'import "../[email protected]/_esm.js";\n');
   });
   it("rewrites default imports", () => {
-    assert.strictEqual(rewriteNpmImports('import d3 from "/npm/[email protected]/+esm";\n', (v) => resolve("/_npm/[email protected]/+esm.js", v)), 'import d3 from "../[email protected]/+esm.js";\n');
+    assert.strictEqual(rewriteNpmImports('import d3 from "/npm/[email protected]/+esm";\n', (v) => resolve("/_npm/[email protected]/_esm.js", v)), 'import d3 from "../[email protected]/_esm.js";\n');
   });
   it("rewrites namespace imports", () => {
-    assert.strictEqual(rewriteNpmImports('import * as d3 from "/npm/[email protected]/+esm";\n', (v) => resolve("/_npm/[email protected]/+esm.js", v)), 'import * as d3 from "../[email protected]/+esm.js";\n');
+    assert.strictEqual(rewriteNpmImports('import * as d3 from "/npm/[email protected]/+esm";\n', (v) => resolve("/_npm/[email protected]/_esm.js", v)), 'import * as d3 from "../[email protected]/_esm.js";\n');
   });
   it("rewrites named exports", () => {
-    assert.strictEqual(rewriteNpmImports('export {sort} from "/npm/[email protected]/+esm";\n', (v) => resolve("/_npm/[email protected]/+esm.js", v)), 'export {sort} from "../[email protected]/+esm.js";\n');
+    assert.strictEqual(rewriteNpmImports('export {sort} from "/npm/[email protected]/+esm";\n', (v) => resolve("/_npm/[email protected]/_esm.js", v)), 'export {sort} from "../[email protected]/_esm.js";\n');
   });
   it("rewrites namespace exports", () => {
-    assert.strictEqual(rewriteNpmImports('export * from "/npm/[email protected]/+esm";\n', (v) => resolve("/_npm/[email protected]/+esm.js", v)), 'export * from "../[email protected]/+esm.js";\n');
+    assert.strictEqual(rewriteNpmImports('export * from "/npm/[email protected]/+esm";\n', (v) => resolve("/_npm/[email protected]/_esm.js", v)), 'export * from "../[email protected]/_esm.js";\n');
   });
   it("rewrites dynamic imports with static module specifiers", () => {
-    assert.strictEqual(rewriteNpmImports('import("/npm/[email protected]/+esm");\n', (v) => resolve("/_npm/[email protected]/+esm.js", v)), 'import("../[email protected]/+esm.js");\n');
-    assert.strictEqual(rewriteNpmImports("import(`/npm/[email protected]/+esm`);\n", (v) => resolve("/_npm/[email protected]/+esm.js", v)), 'import("../[email protected]/+esm.js");\n');
-    assert.strictEqual(rewriteNpmImports("import('/npm/[email protected]/+esm');\n", (v) => resolve("/_npm/[email protected]/+esm.js", v)), 'import("../[email protected]/+esm.js");\n');
+    assert.strictEqual(rewriteNpmImports('import("/npm/[email protected]/+esm");\n', (v) => resolve("/_npm/[email protected]/_esm.js", v)), 'import("../[email protected]/_esm.js");\n');
+    assert.strictEqual(rewriteNpmImports("import(`/npm/[email protected]/+esm`);\n", (v) => resolve("/_npm/[email protected]/_esm.js", v)), 'import("../[email protected]/_esm.js");\n');
+    assert.strictEqual(rewriteNpmImports("import('/npm/[email protected]/+esm');\n", (v) => resolve("/_npm/[email protected]/_esm.js", v)), 'import("../[email protected]/_esm.js");\n');
   });
   it("ignores dynamic imports with dynamic module specifiers", () => {
-    assert.strictEqual(rewriteNpmImports('import(`/npm/d3-array@${"3.2.4"}/+esm`);\n', (v) => resolve("/_npm/[email protected]/+esm.js", v)), 'import(`/npm/d3-array@${"3.2.4"}/+esm`);\n');
+    assert.strictEqual(rewriteNpmImports('import(`/npm/d3-array@${"3.2.4"}/+esm`);\n', (v) => resolve("/_npm/[email protected]/_esm.js", v)), 'import(`/npm/d3-array@${"3.2.4"}/+esm`);\n');
   });
   it("ignores dynamic imports with dynamic module specifiers", () => {
-    assert.strictEqual(rewriteNpmImports('import(`/npm/d3-array@${"3.2.4"}/+esm`);\n', (v) => resolve("/_npm/[email protected]/+esm.js", v)), 'import(`/npm/d3-array@${"3.2.4"}/+esm`);\n');
+    assert.strictEqual(rewriteNpmImports('import(`/npm/d3-array@${"3.2.4"}/+esm`);\n', (v) => resolve("/_npm/[email protected]/_esm.js", v)), 'import(`/npm/d3-array@${"3.2.4"}/+esm`);\n');
   });
   it("strips the sourceMappingURL declaration", () => {
-    assert.strictEqual(rewriteNpmImports('import(`/npm/d3-array@${"3.2.4"}/+esm`);\n//# sourceMappingURL=index.js.map', (v) => resolve("/_npm/[email protected]/+esm.js", v)), 'import(`/npm/d3-array@${"3.2.4"}/+esm`);\n');
-    assert.strictEqual(rewriteNpmImports('import(`/npm/d3-array@${"3.2.4"}/+esm`);\n//# sourceMappingURL=index.js.map\n', (v) => resolve("/_npm/[email protected]/+esm.js", v)), 'import(`/npm/d3-array@${"3.2.4"}/+esm`);\n');
+    assert.strictEqual(rewriteNpmImports('import(`/npm/d3-array@${"3.2.4"}/+esm`);\n//# sourceMappingURL=index.js.map', (v) => resolve("/_npm/[email protected]/_esm.js", v)), 'import(`/npm/d3-array@${"3.2.4"}/+esm`);\n');
+    assert.strictEqual(rewriteNpmImports('import(`/npm/d3-array@${"3.2.4"}/+esm`);\n//# sourceMappingURL=index.js.map\n', (v) => resolve("/_npm/[email protected]/_esm.js", v)), 'import(`/npm/d3-array@${"3.2.4"}/+esm`);\n');
   });
 });
 
 function resolve(path: string, specifier: string): string {
-  if (!specifier.startsWith("/npm/")) return specifier;
-  specifier = `/_npm/${specifier.slice("/npm/".length)}`;
-  if (specifier.endsWith("/+esm")) specifier += ".js";
-  return relativePath(path, specifier);
+  return specifier.startsWith("/npm/") ? relativePath(path, fromJsDelivrPath(specifier)) : specifier;
 }

test/output/build/files/_npm/[email protected]/+esm.js renamed to test/output/build/files/_npm/[email protected]/_esm.js

@@ -9,7 +9,7 @@
 <link rel="modulepreload" href="./_observablehq/client.js">
 <link rel="modulepreload" href="./_observablehq/runtime.js">
 <link rel="modulepreload" href="./_observablehq/stdlib.js">
-<link rel="modulepreload" href="./_npm/[email protected]/+esm.js">
+<link rel="modulepreload" href="./_npm/[email protected]/_esm.js">
 <script type="module">
 
 import {define} from "./_observablehq/client.js";

test/output/build/files/files.html

@@ -9,7 +9,7 @@
 <link rel="modulepreload" href="../_observablehq/client.js">
 <link rel="modulepreload" href="../_observablehq/runtime.js">
 <link rel="modulepreload" href="../_observablehq/stdlib.js">
-<link rel="modulepreload" href="../_npm/[email protected]/+esm.js">
+<link rel="modulepreload" href="../_npm/[email protected]/_esm.js">
 <script type="module">
 
 import {define} from "../_observablehq/client.js";

test/output/build/files/subsection/subfiles.html

@@ -1,4 +1,4 @@
-import "../../_npm/[email protected]/+esm.js";
+import "../../_npm/[email protected]/_esm.js";
 import {bar} from "../bar/bar.13bb8056.js";
 export {top} from "../top.160847a6.js";
 

test/output/build/imports/_import/foo/foo.821499d0.js

@@ -10,7 +10,7 @@
 <link rel="modulepreload" href="../_observablehq/client.js">
 <link rel="modulepreload" href="../_observablehq/runtime.js">
 <link rel="modulepreload" href="../_observablehq/stdlib.js">
-<link rel="modulepreload" href="../_npm/[email protected]/+esm.js">
+<link rel="modulepreload" href="../_npm/[email protected]/_esm.js">
 <link rel="modulepreload" href="../_import/bar/bar.13bb8056.js">
 <link rel="modulepreload" href="../_import/top.160847a6.js">
 <link rel="modulepreload" href="../_import/foo/foo bar.b173d3de.js">
@@ -24,7 +24,7 @@
 registerFile("../top.js", {"name":"../top.js","mimeType":"text/javascript","path":"../_file/top.a53c5d5b.js"});
 
 define({id: "261e010e", inputs: ["display","FileAttachment"], outputs: ["d3","bar","top"], body: async (display,FileAttachment) => {
-const [d3, {bar}, {top}] = await Promise.all([import("../_npm/[email protected]/+esm.js"), import("../_import/bar/bar.13bb8056.js"), import("../_import/top.160847a6.js")]);
+const [d3, {bar}, {top}] = await Promise.all([import("../_npm/[email protected]/_esm.js"), import("../_import/bar/bar.13bb8056.js"), import("../_import/top.160847a6.js")]);
 
 display(bar);
 display(top);