import.meta.resolve for files (#1696)

mbostock · web-flow · commit 83d21f2e1888 · 2024-09-30T21:14:33.000+02:00
diff --git a/src/build.ts b/src/build.ts
@@ -250,6 +250,7 @@ export async function build(
     return applyHash(join("/_import", path), hash);
   };
   for (const path of localImports) {
+    if (!path.endsWith(".js")) continue;
     const module = findModule(root, path);
     if (!module) throw new Error(`import not found: ${path}`);
     const sourcePath = join(root, module.path);
diff --git a/src/javascript/imports.ts b/src/javascript/imports.ts
@@ -14,8 +14,8 @@ export interface ImportReference {
   name: string;
   /** Is this a reference to a local module, or a non-local (e.g., npm) one? */
   type: "local" | "global";
-  /** Is this a static import declaration, or a dynamic import expression? */
-  method: "static" | "dynamic";
+  /** Is this a static import, a dynamic import, or import.meta.resolve? */
+  method: "static" | "dynamic" | "resolve";
 }
 
 export type ImportNode = ImportDeclaration | ImportExpression;
@@ -98,9 +98,9 @@ export function findImports(body: Node, path: string, input: string): ImportRefe
     if (isPathImport(name)) {
       const localPath = resolveLocalPath(path, name);
       if (!localPath) throw syntaxError(`non-local import: ${name}`, node, input); // prettier-ignore
-      addImport({name: relativePath(path, localPath), type: "local", method: "dynamic"});
+      addImport({name: relativePath(path, localPath), type: "local", method: "resolve"});
     } else {
-      addImport({name, type: "global", method: "dynamic"});
+      addImport({name, type: "global", method: "resolve"});
     }
   }
 
diff --git a/src/javascript/transpile.ts b/src/javascript/transpile.ts
@@ -10,7 +10,7 @@ import {Sourcemap} from "../sourcemap.js";
 import type {FileExpression} from "./files.js";
 import {findFiles} from "./files.js";
 import type {ExportNode, ImportNode} from "./imports.js";
-import {hasImportDeclaration, isImportMetaResolve} from "./imports.js";
+import {hasImportDeclaration, isImportMetaResolve, isJavaScript} from "./imports.js";
 import type {FileInfo} from "./module.js";
 import {findParams} from "./params.js";
 import type {JavaScriptNode} from "./parse.js";
@@ -24,11 +24,12 @@ export interface TranspileOptions {
   params?: Params;
   mode?: string;
   resolveImport?: (specifier: string) => string;
+  resolveFile?: (specifier: string) => string;
 }
 
 export function transpileJavaScript(
   node: JavaScriptNode,
-  {id, path, params, mode, resolveImport}: TranspileOptions
+  {id, path, params, mode, resolveImport, resolveFile}: TranspileOptions
 ): string {
   let async = node.async;
   const inputs = Array.from(new Set<string>(node.references.map((r) => r.name)));
@@ -39,7 +40,7 @@ export function transpileJavaScript(
   const output = new Sourcemap(node.input).trim();
   if (params) rewriteParams(output, node.body, params, node.input);
   rewriteImportDeclarations(output, node.body, resolveImport);
-  rewriteImportExpressions(output, node.body, resolveImport);
+  rewriteImportExpressions(output, node.body, resolveImport, resolveFile);
   rewriteFileExpressions(output, node.files, path);
   if (display) output.insertLeft(0, "display(await(\n").insertRight(node.input.length, "\n))");
   output.insertLeft(0, `, body: ${async ? "async " : ""}(${inputs}) => {\n`);
@@ -134,7 +135,9 @@ export async function transpileModule(
   for (const node of calls) {
     const source = node.arguments[0];
     if (isImportMetaResolve(node) && isStringLiteral(source)) {
-      await rewriteImportSource(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));
     }
   }
 
@@ -152,10 +155,11 @@ function rewriteFileExpressions(output: Sourcemap, files: FileExpression[], path
 function rewriteImportExpressions(
   output: Sourcemap,
   body: Node,
-  resolve: (specifier: string) => string = String
+  resolveImport: (specifier: string) => string = String,
+  resolveFile: (specifier: string) => string = String
 ): void {
   function rewriteImportSource(source: StringLiteral) {
-    output.replaceLeft(source.start, source.end, JSON.stringify(resolve(getStringLiteralValue(source))));
+    output.replaceLeft(source.start, source.end, JSON.stringify(resolveImport(getStringLiteralValue(source))));
   }
   simple(body, {
     ImportExpression(node) {
@@ -167,7 +171,8 @@ function rewriteImportExpressions(
     CallExpression(node) {
       const source = node.arguments[0];
       if (isImportMetaResolve(node) && isStringLiteral(source)) {
-        const resolution = resolve(getStringLiteralValue(source));
+        const value = getStringLiteralValue(source);
+        const resolution = isPathImport(value) && !isJavaScript(value) ? resolveFile(value) : resolveImport(value);
         output.replaceLeft(
           node.start,
           node.end,
diff --git a/src/render.ts b/src/render.ts
@@ -79,7 +79,7 @@ import ${preview || page.code.length ? `{${preview ? "open, " : ""}define} from
       : ""
   }${data?.sql ? `\n${registerTables(data.sql, options)}` : ""}
 ${preview ? `\nopen({hash: ${JSON.stringify(resolvers.hash)}, eval: (body) => eval(body)});\n` : ""}${page.code
-    .map(({node, id, mode}) => `\n${transpileJavaScript(node, {id, path, params, mode, resolveImport})}`)
+    .map(({node, id, mode}) => `\n${transpileJavaScript(node, {id, path, params, mode, resolveImport, resolveFile})}`)
     .join("")}`)}
 </script>${sidebar ? html`\n${await renderSidebar(options, resolvers)}` : ""}
 <div id="observablehq-center">${renderHeader(page.header, resolvers)}${
diff --git a/src/resolvers.ts b/src/resolvers.ts
@@ -2,6 +2,7 @@ import {createHash} from "node:crypto";
 import {extname, join} from "node:path/posix";
 import {findAssets} from "./html.js";
 import {defaultGlobals} from "./javascript/globals.js";
+import {isJavaScript} from "./javascript/imports.js";
 import {getFileHash, getModuleHash, getModuleInfo} from "./javascript/module.js";
 import {extractJsrSpecifier, resolveJsrImport, resolveJsrImports} from "./jsr.js";
 import {getImplicitDependencies, getImplicitDownloads} from "./libraries.js";
@@ -114,6 +115,7 @@ export async function getResolvers(page: MarkdownPage, config: ResolversConfig):
     for (const i of node.imports) {
       (i.type === "local" ? localImports : globalImports).add(i.name);
       if (i.method === "static") staticImports.add(i.name);
+      if (i.type === "local" && i.method === "resolve" && !isJavaScript(i.name)) files.add(i.name);
     }
   }
 
diff --git a/test/input/build/imports/foo/foo.md b/test/input/build/imports/foo/foo.md
@@ -14,3 +14,7 @@ FileAttachment("/top.js");
 import {foobar} from "./foo%20bar.js";
 display(foobar);
 ```
+
+```js
+import.meta.resolve("./hello.txt")
+```
diff --git a/test/input/build/imports/foo/hello.txt b/test/input/build/imports/foo/hello.txt
@@ -0,0 +1 @@
+hello
diff --git a/test/input/imports/local-fetch-data.json b/test/input/imports/local-fetch-data.json
diff --git a/test/input/imports/local-meta-resolve-file-import.js b/test/input/imports/local-meta-resolve-file-import.js
@@ -0,0 +1 @@
+const foo = import.meta.resolve("./fetch-local-data.json");
diff --git a/test/input/imports/local-meta-resolve-import.js b/test/input/imports/local-meta-resolve-import.js
@@ -0,0 +1 @@
+const foo = import.meta.resolve("./foo.js");
diff --git a/test/javascript/module-test.ts b/test/javascript/module-test.ts
@@ -18,7 +18,7 @@ describe("getModuleHash(root, path)", () => {
     assert.strictEqual(getModuleHash("test/input/build/imports", "does-not-exist.js"), emptyHash);
   });
   it("returns the file hash if the specified path is not a module", () => {
-    assert.strictEqual(getModuleHash("test/input/build/imports", "foo/foo.md"), "1df6958fdef208d873474d91da45d08277944f4a1400e7ab0e6934c07d5670ed"); // prettier-ignore
+    assert.strictEqual(getModuleHash("test/input/build/imports", "foo/foo.md"), "fc5f03ef66ae950bcc54fca53c27bdd86d1d35a52cccc97d99d8585600e0cd1d"); // prettier-ignore
   });
 });
 
diff --git a/test/javascript/transpile-test.ts b/test/javascript/transpile-test.ts
@@ -6,6 +6,7 @@ import {isEnoent} from "../../src/error.js";
 import {parseJavaScript} from "../../src/javascript/parse.js";
 import type {TranspileModuleOptions} from "../../src/javascript/transpile.js";
 import {transpileJavaScript, transpileModule} from "../../src/javascript/transpile.js";
+import {isPathImport} from "../../src/path.js";
 import {mockJsDelivr} from "../mocks/jsdelivr.js";
 
 function isJsFile(inputRoot: string, fileName: string) {
@@ -15,7 +16,15 @@ function isJsFile(inputRoot: string, fileName: string) {
 }
 
 function mockResolveImport(specifier: string): string {
-  return specifier.replace(/^npm:/, "https://cdn.jsdelivr.net/npm/");
+  return isPathImport(specifier)
+    ? `./${join("_import", specifier)}`
+    : specifier.replace(/^npm:/, "https://cdn.jsdelivr.net/npm/");
+}
+
+function mockResolveFile(specifier: string): string {
+  return isPathImport(specifier)
+    ? `./${join("_file", specifier)}`
+    : specifier.replace(/^npm:/, "https://cdn.jsdelivr.net/npm/");
 }
 
 function runTests(inputRoot: string, outputRoot: string, filter: (name: string) => boolean = () => true) {
@@ -34,7 +43,12 @@ function runTests(inputRoot: string, outputRoot: string, filter: (name: string)
 
       try {
         const node = parseJavaScript(input, {path: name});
-        actual = transpileJavaScript(node, {id: "0", path: name, resolveImport: mockResolveImport});
+        actual = transpileJavaScript(node, {
+          id: "0",
+          path: name,
+          resolveImport: mockResolveImport,
+          resolveFile: mockResolveFile
+        });
       } catch (error) {
         if (!(error instanceof SyntaxError)) throw error;
         actual = `define({id: "0", body: () => { throw new SyntaxError(${JSON.stringify(error.message)}); }});\n`;
diff --git a/test/output/build/imports/_file/foo/hello.5891b5b5.txt b/test/output/build/imports/_file/foo/hello.5891b5b5.txt
@@ -0,0 +1 @@
+hello
diff --git a/test/output/build/imports/foo/foo.html b/test/output/build/imports/foo/foo.html
@@ -23,6 +23,7 @@
 import {registerFile} from "../_observablehq/stdlib.00000003.js";
 
 registerFile("../top.js", {"name":"../top.js","mimeType":"text/javascript","path":"../_file/top.a53c5d5b.js","lastModified":/* ts */1706742000000,"size":26});
+registerFile("./hello.txt", {"name":"./hello.txt","mimeType":"text/plain","path":"../_file/foo/hello.5891b5b5.txt","lastModified":/* ts */1706742000000,"size":6});
 
 define({id: "261e010e", inputs: ["display","FileAttachment"], outputs: ["d3","bar","top"], body: async (display,FileAttachment) => {
 const [d3, {bar}, {top}] = await Promise.all([import("../_npm/d3@7.8.5/cd372fb8.js"), import("../_import/bar/bar.13bb8056.js"), import("../_import/top.160847a6.js")]);
@@ -39,6 +40,12 @@
 return {foobar};
 }});
 
+define({id: "2a2171cf", inputs: ["display"], body: async (display) => {
+display(await(
+new URL("../_file/foo/hello.5891b5b5.txt", location).href
+))
+}});
+
 </script>
 <input id="observablehq-sidebar-toggle" type="checkbox" title="Toggle sidebar">
 <label id="observablehq-sidebar-backdrop" for="observablehq-sidebar-toggle"></label>
@@ -62,6 +69,7 @@
 <h1 id="foo" tabindex="-1"><a class="observablehq-header-anchor" href="#foo">Foo</a></h1>
 <div class="observablehq observablehq--block"><!--:261e010e:--></div>
 <div class="observablehq observablehq--block"><!--:ec24b17a:--></div>
+<div class="observablehq observablehq--block"><observablehq-loading></observablehq-loading><!--:2a2171cf:--></div>
 </main>
 <footer id="observablehq-footer">
 <nav><a rel="prev" href="../script"><span>Scripts</span></a></nav>
diff --git a/test/output/dynamic-import-noent.js b/test/output/dynamic-import-noent.js
@@ -1,4 +1,4 @@
 define({id: "0", outputs: ["foo"], body: async () => {
-const foo = await import("./noent.js");
+const foo = await import("./_import/noent.js");
 return {foo};
 }});
diff --git a/test/output/imports/alias-import.js b/test/output/imports/alias-import.js
@@ -1,5 +1,5 @@
 define({id: "0", inputs: ["display"], outputs: ["bar"], body: async (display) => {
-const {foo: bar} = await import("./bar.js");
+const {foo: bar} = await import("./_import/bar.js");
 
 display(bar);
 return {bar};
diff --git a/test/output/imports/dynamic-import.js b/test/output/imports/dynamic-import.js
@@ -1,4 +1,4 @@
 define({id: "0", outputs: ["foo"], body: async () => {
-const foo = await import("./bar.js");
+const foo = await import("./_import/bar.js");
 return {foo};
 }});
diff --git a/test/output/imports/empty-import.js b/test/output/imports/empty-import.js
@@ -1,4 +1,4 @@
 define({id: "0", body: async () => {
-const {} = await import("./bar.js");
+const {} = await import("./_import/bar.js");
 
 }});
diff --git a/test/output/imports/local-fetch-from-import.js b/test/output/imports/local-fetch-from-import.js
@@ -1,5 +1,5 @@
 define({id: "0", inputs: ["display"], outputs: ["data"], body: async (display) => {
-const {data} = await import("./baz.js");
+const {data} = await import("./_import/baz.js");
 
 display(data);
 return {data};
diff --git a/test/output/imports/local-meta-resolve-file-import.js b/test/output/imports/local-meta-resolve-file-import.js
@@ -0,0 +1,4 @@
+define({id: "0", outputs: ["foo"], body: () => {
+const foo = new URL("./_file/fetch-local-data.json", location).href;
+return {foo};
+}});
diff --git a/test/output/imports/local-meta-resolve-file-import.js.json b/test/output/imports/local-meta-resolve-file-import.js.json
@@ -0,0 +1,93 @@
+{
+  "body": {
+    "type": "Program",
+    "start": 0,
+    "end": 60,
+    "body": [
+      {
+        "type": "VariableDeclaration",
+        "start": 0,
+        "end": 59,
+        "declarations": [
+          {
+            "type": "VariableDeclarator",
+            "start": 6,
+            "end": 58,
+            "id": {
+              "type": "Identifier",
+              "start": 6,
+              "end": 9,
+              "name": "foo"
+            },
+            "init": {
+              "type": "CallExpression",
+              "start": 12,
+              "end": 58,
+              "callee": {
+                "type": "MemberExpression",
+                "start": 12,
+                "end": 31,
+                "object": {
+                  "type": "MetaProperty",
+                  "start": 12,
+                  "end": 23,
+                  "meta": {
+                    "type": "Identifier",
+                    "start": 12,
+                    "end": 18,
+                    "name": "import"
+                  },
+                  "property": {
+                    "type": "Identifier",
+                    "start": 19,
+                    "end": 23,
+                    "name": "meta"
+                  }
+                },
+                "property": {
+                  "type": "Identifier",
+                  "start": 24,
+                  "end": 31,
+                  "name": "resolve"
+                },
+                "computed": false,
+                "optional": false
+              },
+              "arguments": [
+                {
+                  "type": "Literal",
+                  "start": 32,
+                  "end": 57,
+                  "value": "./fetch-local-data.json",
+                  "raw": "\"./fetch-local-data.json\""
+                }
+              ],
+              "optional": false
+            }
+          }
+        ],
+        "kind": "const"
+      }
+    ],
+    "sourceType": "module"
+  },
+  "declarations": [
+    {
+      "type": "Identifier",
+      "start": 6,
+      "end": 9,
+      "name": "foo"
+    }
+  ],
+  "references": [],
+  "files": [],
+  "imports": [
+    {
+      "name": "./fetch-local-data.json",
+      "type": "local",
+      "method": "resolve"
+    }
+  ],
+  "expression": false,
+  "async": false
+}
diff --git a/test/output/imports/local-meta-resolve-import.js b/test/output/imports/local-meta-resolve-import.js
@@ -0,0 +1,4 @@
+define({id: "0", outputs: ["foo"], body: () => {
+const foo = new URL("./_import/foo.js", location).href;
+return {foo};
+}});
diff --git a/test/output/imports/local-meta-resolve-import.js.json b/test/output/imports/local-meta-resolve-import.js.json
diff --git a/test/output/imports/namespace-import.js b/test/output/imports/namespace-import.js
diff --git a/test/output/imports/npm-meta-resolve-import.js.json b/test/output/imports/npm-meta-resolve-import.js.json
diff --git a/test/output/imports/static-all-import.js b/test/output/imports/static-all-import.js
diff --git a/test/output/imports/static-import.js b/test/output/imports/static-import.js
diff --git a/test/output/imports/transitive-dynamic-import.js b/test/output/imports/transitive-dynamic-import.js
diff --git a/test/output/imports/transitive-static-import.js b/test/output/imports/transitive-static-import.js
diff --git a/test/output/static-import-noent.js b/test/output/static-import-noent.js

Original file line number	Diff line number	Diff line change
`@@ -2,6 +2,7 @@ import {createHash} from "node:crypto";`
`2`	`2`	`import {extname, join} from "node:path/posix";`
`3`	`3`	`import {findAssets} from "./html.js";`
`4`	`4`	`import {defaultGlobals} from "./javascript/globals.js";`
	`5`	`+import {isJavaScript} from "./javascript/imports.js";`
`5`	`6`	`import {getFileHash, getModuleHash, getModuleInfo} from "./javascript/module.js";`
`6`	`7`	`import {extractJsrSpecifier, resolveJsrImport, resolveJsrImports} from "./jsr.js";`
`7`	`8`	`import {getImplicitDependencies, getImplicitDownloads} from "./libraries.js";`
`@@ -114,6 +115,7 @@ export async function getResolvers(page: MarkdownPage, config: ResolversConfig):`
`114`	`115`	`for (const i of node.imports) {`
`115`	`116`	`(i.type === "local" ? localImports : globalImports).add(i.name);`
`116`	`117`	`if (i.method === "static") staticImports.add(i.name);`
	`118`	`+ if (i.type === "local" && i.method === "resolve" && !isJavaScript(i.name)) files.add(i.name);`
`117`	`119`	`}`
`118`	`120`	`}`
`119`	`121`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+const foo = import.meta.resolve("./fetch-local-data.json");`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+const foo = import.meta.resolve("./foo.js");`