annotate local paths

src/javascript/transpile.ts

@@ -101,7 +101,7 @@ export async function transpileModule(
 
   async function rewriteImportSource(source: StringLiteral) {
     const specifier = getStringLiteralValue(source);
-    output.replaceLeft(source.start, source.end, JSON.stringify(await resolveImport(specifier)));
+    output.replaceLeft(source.start, source.end, annotatePath(await resolveImport(specifier)));
   }
 
   for (const {name, node} of findFiles(body, path, input)) {
@@ -111,17 +111,15 @@ export async function transpileModule(
     output.replaceLeft(
       source.start,
       source.end,
-      `${JSON.stringify(
+      `${
         info
-          ? {
-              name: p,
-              mimeType: mime.getType(name) ?? undefined,
-              path: relativePath(servePath, resolveFile(name)),
-              lastModified: info.mtimeMs,
-              size: info.size
-            }
-          : p
-      )}, import.meta.url`
+          ? `{"name":${JSON.stringify(p)},"mimeType":${JSON.stringify(
+              mime.getType(name) ?? undefined
+            )},"path":${annotatePath(relativePath(servePath, resolveFile(name)))},"lastModified":${JSON.stringify(
+              info.mtimeMs
+            )},"size":${JSON.stringify(info.size)}}`
+          : JSON.stringify(p)
+      }, import.meta.url`
     );
   }
 
@@ -137,7 +135,7 @@ export async function transpileModule(
     if (isImportMetaResolve(node) && isStringLiteral(source)) {
       const value = getStringLiteralValue(source);
       const resolution = isPathImport(value) && !isJavaScript(value) ? resolveFile(value) : await resolveImport(value);
-      output.replaceLeft(source.start, source.end, JSON.stringify(resolution));
+      output.replaceLeft(source.start, source.end, annotatePath(resolution));
     }
   }
 
@@ -205,7 +203,7 @@ function rewriteImportDeclarations(
   for (const node of declarations) {
     output.delete(node.start, node.end + +(output.input[node.end] === "\n"));
     specifiers.push(rewriteImportSpecifiers(node));
-    imports.push(`import(${JSON.stringify(resolve(getStringLiteralValue(node.source as StringLiteral)))})`);
+    imports.push(`import(${annotatePath(resolve(getStringLiteralValue(node.source as StringLiteral)))})`);
   }
   if (declarations.length > 1) {
     output.insertLeft(0, `const [${specifiers.join(", ")}] = await Promise.all([${imports.join(", ")}]);\n`);
@@ -259,3 +257,10 @@ export function rewriteParams(output: Sourcemap, body: Node, params: Params, inp
     output.replaceLeft(node.start, node.end, JSON.stringify(params[name]));
   }
 }
+
+/**
+ * Annotate a path to a local import or file so it can be reworked server-side.
+ */
+export function annotatePath(uri: string): string {
+  return `${JSON.stringify(uri)}${isPathImport(uri) ? "/* observablehq-file */" : ""}`;
+}

src/node.ts

@@ -15,6 +15,7 @@ import esbuild from "rollup-plugin-esbuild";
 import {prepareOutput, toOsPath} from "./files.js";
 import type {ImportReference} from "./javascript/imports.js";
 import {isJavaScript, parseImports} from "./javascript/imports.js";
+import {annotatePath} from "./javascript/transpile.js";
 import {parseNpmSpecifier, rewriteNpmImports} from "./npm.js";
 import {isPathImport, relativePath} from "./path.js";
 import {faint} from "./tty.js";
@@ -86,7 +87,7 @@ function isBadCommonJs(specifier: string): boolean {
 }
 
 function shimCommonJs(specifier: string, require: NodeRequire): string {
-  return `export {${Object.keys(require(specifier))}} from ${JSON.stringify(specifier)};\n`;
+  return `export {${Object.keys(require(specifier))}} from ${annotatePath(specifier)};\n`;
 }
 
 async function bundle(

src/npm.ts

@@ -10,6 +10,7 @@ import {isImportMetaResolve, parseImports} from "./javascript/imports.js";
 import {parseProgram} from "./javascript/parse.js";
 import type {StringLiteral} from "./javascript/source.js";
 import {getStringLiteralValue, isStringLiteral} from "./javascript/source.js";
+import {annotatePath} from "./javascript/transpile.js";
 import {relativePath} from "./path.js";
 import {Sourcemap} from "./sourcemap.js";
 import {faint, yellow} from "./tty.js";
@@ -64,7 +65,7 @@ export function rewriteNpmImports(input: string, resolve: (s: string) => string
     const value = getStringLiteralValue(source);
     const resolved = resolve(value);
     if (resolved === undefined || value === resolved) return;
-    output.replaceLeft(source.start, source.end, JSON.stringify(resolved));
+    output.replaceLeft(source.start, source.end, annotatePath(resolved));
   }
 
   // TODO Preserve the source map, but download it too.

src/rollup.ts

@@ -8,6 +8,7 @@ import esbuild from "rollup-plugin-esbuild";
 import {getClientPath, getStylePath} from "./files.js";
 import type {StringLiteral} from "./javascript/source.js";
 import {getStringLiteralValue, isStringLiteral} from "./javascript/source.js";
+import {annotatePath} from "./javascript/transpile.js";
 import {resolveNpmImport} from "./npm.js";
 import {getObservableUiOrigin} from "./observableApiClient.js";
 import {isAssetPath, isPathImport, relativePath} from "./path.js";
@@ -177,7 +178,7 @@ function importMetaResolve(path: string, resolveImport: ImportResolver): Plugin
       for (const source of resolves) {
         const specifier = getStringLiteralValue(source);
         const resolution = await resolveImport(specifier);
-        if (resolution) output.replaceLeft(source.start, source.end, JSON.stringify(relativePath(path, resolution)));
+        if (resolution) output.replaceLeft(source.start, source.end, annotatePath(relativePath(path, resolution)));
       }
 
       return {code: String(output)};

test/javascript/transpile-test.ts

@@ -210,11 +210,11 @@ describe("transpileModule(input, root, path)", () => {
   it("rewrites npm imports", async () => {
     const input = 'import "npm:d3-array";';
     const output = (await transpileModule(input, options)).split("\n").pop()!;
-    assert.strictEqual(output, 'import "../_npm/[email protected]/_esm.js";');
+    assert.strictEqual(output, 'import "../_npm/[email protected]/_esm.js"/* observablehq-file */;');
   });
   it("rewrites node imports", async () => {
     const input = 'import "d3-array";';
     const output = (await transpileModule(input, options)).split("\n").pop()!;
-    assert.strictEqual(output, 'import "../_node/[email protected]/index.js";');
+    assert.strictEqual(output, 'import "../_node/[email protected]/index.js"/* observablehq-file */;');
   });
 });

test/npm-test.ts

@@ -103,37 +103,37 @@ describe("fromJsDelivrPath(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');
+    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"/* observablehq-file */;\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');
+    assert.strictEqual(rewriteNpmImports('export * from "/npm/[email protected]/+esm";\n', (v) => resolve("/_npm/[email protected]/_esm.js", v)), 'export * from "../[email protected]/_esm.js"/* observablehq-file */;\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');
+    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"/* observablehq-file */;\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"/* observablehq-file */;\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"/* observablehq-file */;\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"/* observablehq-file */;\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"/* observablehq-file */;\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"/* observablehq-file */;\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"/* observablehq-file */;\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"/* observablehq-file */;\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"/* observablehq-file */);\n');
+    assert.strictEqual(rewriteNpmImports("import(`/npm/[email protected]/+esm`);\n", (v) => resolve("/_npm/[email protected]/_esm.js", v)), 'import("../[email protected]/_esm.js"/* observablehq-file */);\n');
+    assert.strictEqual(rewriteNpmImports("import('/npm/[email protected]/+esm');\n", (v) => resolve("/_npm/[email protected]/_esm.js", v)), 'import("../[email protected]/_esm.js"/* observablehq-file */);\n');
   });
   it("ignores dynamic imports with dynamic module specifiers", () => {
     assert.strictEqual(rewriteNpmImports("import(`/npm/d3-array@${version}/+esm`);\n", (v) => resolve("/_npm/[email protected]/_esm.js", v)), "import(`/npm/d3-array@${version}/+esm`);\n");
@@ -142,8 +142,8 @@ describe("rewriteNpmImports(input, resolve)", () => {
     assert.strictEqual(rewriteNpmImports("import(`/npm/d3-array@${version}/+esm`);\n", (v) => resolve("/_npm/[email protected]/_esm.js", v)), "import(`/npm/d3-array@${version}/+esm`);\n");
   });
   it("strips the sourceMappingURL declaration", () => {
-    assert.strictEqual(rewriteNpmImports("import(`/npm/[email protected]/+esm`);\n//# sourceMappingURL=index.js.map", (v) => resolve("/_npm/[email protected]/_esm.js", v)), 'import("../[email protected]/_esm.js");\n');
-    assert.strictEqual(rewriteNpmImports("import(`/npm/[email protected]/+esm`);\n//# sourceMappingURL=index.js.map\n", (v) => resolve("/_npm/[email protected]/_esm.js", v)), 'import("../[email protected]/_esm.js");\n');
+    assert.strictEqual(rewriteNpmImports("import(`/npm/[email protected]/+esm`);\n//# sourceMappingURL=index.js.map", (v) => resolve("/_npm/[email protected]/_esm.js", v)), 'import("../[email protected]/_esm.js"/* observablehq-file */);\n');
+    assert.strictEqual(rewriteNpmImports("import(`/npm/[email protected]/+esm`);\n//# sourceMappingURL=index.js.map\n", (v) => resolve("/_npm/[email protected]/_esm.js", v)), 'import("../[email protected]/_esm.js"/* observablehq-file */);\n');
   });
 });
 

test/output/build/data-loaders/_import/import-test.e7269c4e.js

@@ -1 +1 @@
-export {test} from "./test.86a60bc6.js";
+export {test} from "./test.86a60bc6.js"/* observablehq-file */;

test/output/build/data-loaders/_import/test.86a60bc6.js

@@ -1,3 +1,3 @@
-import {FileAttachment} from "../_observablehq/stdlib.00000003.js";
+import {FileAttachment} from "../_observablehq/stdlib.00000003.js"/* observablehq-file */;
 
-export const test = FileAttachment({"name":"../test.txt","mimeType":"text/plain","path":"../_file/test.f2ca1bb6.txt","lastModified":/* ts */1706742000000,"size":5}, import.meta.url).text();
+export const test = FileAttachment({"name":"../test.txt","mimeType":"text/plain","path":"../_file/test.f2ca1bb6.txt"/* observablehq-file */,"lastModified":/* ts */1706742000000,"size":5}, import.meta.url).text();

test/output/build/data-loaders/index.html

@@ -23,7 +23,7 @@
 registerFile("./test.txt", {"name":"./test.txt","mimeType":"text/plain","path":"./_file/test.f2ca1bb6.txt","lastModified":/* ts */1706742000000,"size":5});
 
 define({id: "05e74070", inputs: ["display"], outputs: ["test"], body: async (display) => {
-const {test} = await import("./_import/import-test.e7269c4e.js");
+const {test} = await import("./_import/import-test.e7269c4e.js"/* observablehq-file */);
 
 display(await test);
 return {test};

test/output/build/embed/_import/chart.2ce91e05.js

@@ -1,8 +1,8 @@
-import {FileAttachment} from "../_observablehq/stdlib.00000003.js";
-import * as Plot from "../_npm/@observablehq/[email protected]/cd372fb8.js";
+import {FileAttachment} from "../_observablehq/stdlib.00000003.js"/* observablehq-file */;
+import * as Plot from "../_npm/@observablehq/[email protected]/cd372fb8.js"/* observablehq-file */;
 
 export async function Chart() {
-  const gistemp = await FileAttachment({"name":"../lib/gistemp.csv","mimeType":"text/csv","path":"../_file/lib/gistemp.1cf298b1.csv","lastModified":/* ts */1706742000000,"size":97}, import.meta.url).csv({typed: true});
+  const gistemp = await FileAttachment({"name":"../lib/gistemp.csv","mimeType":"text/csv","path":"../_file/lib/gistemp.1cf298b1.csv"/* observablehq-file */,"lastModified":/* ts */1706742000000,"size":97}, import.meta.url).csv({typed: true});
   return Plot.plot({
     y: {grid: true},
     color: {scheme: "burd"},

test/output/build/embed/chart.js

@@ -1,4 +1,4 @@
-import "./_observablehq/stdlib.00000003.js";
-import "./_npm/@observablehq/[email protected]/cd372fb8.js";
-import "./_npm/[email protected]/cd372fb8.js";
-export * from "./_import/chart.2ce91e05.js";
+import "./_observablehq/stdlib.00000003.js"/* observablehq-file */;
+import "./_npm/@observablehq/[email protected]/cd372fb8.js"/* observablehq-file */;
+import "./_npm/[email protected]/cd372fb8.js"/* observablehq-file */;
+export * from "./_import/chart.2ce91e05.js"/* observablehq-file */;

test/output/build/fetches/foo.html

@@ -23,7 +23,7 @@
 registerFile("./foo/foo-data.json", {"name":"./foo/foo-data.json","mimeType":"application/json","path":"./_file/foo/foo-data.67358ed8.json","lastModified":/* ts */1706742000000,"size":10});
 
 define({id: "47a695da", inputs: ["display"], outputs: ["fooJsonData","fooCsvData"], body: async (display) => {
-const {fooJsonData, fooCsvData} = await import("./_import/foo/foo.666599bc.js");
+const {fooJsonData, fooCsvData} = await import("./_import/foo/foo.666599bc.js"/* observablehq-file */);
 
 display(fooJsonData);
 display(fooCsvData);

test/output/build/fetches/top.html

@@ -26,7 +26,7 @@
 registerFile("./top-data.json", {"name":"./top-data.json","mimeType":"application/json","path":"./_file/top-data.67358ed8.json","lastModified":/* ts */1706742000000,"size":10});
 
 define({id: "cb908c08", inputs: ["display"], outputs: ["fooCsvData","fooJsonData","topCsvData","topJsonData"], body: async (display) => {
-const {fooCsvData, fooJsonData, topCsvData, topJsonData} = await import("./_import/top.c85e149a.js");
+const {fooCsvData, fooJsonData, topCsvData, topJsonData} = await import("./_import/top.c85e149a.js"/* observablehq-file */);
 
 display(fooJsonData);
 display(fooCsvData);

test/output/build/imports/_import/bar/bar.4460ccc2.js

@@ -1 +1 @@
-export {bar} from "./baz.2add1dd0.js";
+export {bar} from "./baz.2add1dd0.js"/* observablehq-file */;

test/output/build/imports/_import/bar/baz.2add1dd0.js

@@ -1,4 +1,4 @@
-import {foo} from "../foo/foo.bcd720b2.js";
+import {foo} from "../foo/foo.bcd720b2.js"/* observablehq-file */;
 
 export const bar = "bar";
 export const foobar = foo + "bar";