move imports to _import (#136)

Author: mbostock

src/build.ts

@@ -32,6 +32,7 @@ export async function build(context: CommandContext = makeCommandContext()) {
   const config = await readConfig(sourceRoot);
   const pages = await readPages(sourceRoot);
   const files: string[] = [];
+  const imports: string[] = [];
   const resolver = await makeCLIResolver();
   for await (const sourceFile of visitMarkdownFiles(sourceRoot)) {
     const sourcePath = join(sourceRoot, sourceFile);
@@ -46,7 +47,7 @@ export async function build(context: CommandContext = makeCommandContext()) {
       resolver
     });
     files.push(...render.files.map((f) => join(dirname(sourceFile), f.name)));
-    files.push(...render.imports.filter((i) => i.type === "local").map((i) => join(dirname(sourceFile), i.name)));
+    imports.push(...render.imports.filter((i) => i.type === "local").map((i) => join(dirname(sourceFile), i.name)));
     await prepareOutput(outputPath);
     await writeFile(outputPath, render.html);
   }
@@ -82,6 +83,19 @@ export async function build(context: CommandContext = makeCommandContext()) {
     await copyFile(sourcePath, outputPath);
   }
 
+  // Copy over the imported modules.
+  for (const file of imports) {
+    const sourcePath = join(sourceRoot, file);
+    const outputPath = join(outputRoot, "_import", file);
+    if (!existsSync(sourcePath)) {
+      console.error("missing referenced file", sourcePath);
+      continue;
+    }
+    if (verbose) console.log("copy", sourcePath, "→", outputPath);
+    await prepareOutput(outputPath);
+    await copyFile(sourcePath, outputPath);
+  }
+
   // Copy over required distribution files from node_modules.
   // TODO: Note that this requires that the build command be run relative to the node_modules directory.
   if (addPublic) {

src/javascript/imports.ts

@@ -66,7 +66,7 @@ export function findImports(body: Node, root: string, sourcePath: string) {
           findLocalImports(join(dirname(path), value));
         } else {
           imports.push({name: value, type: "global"});
-          // non-local imports don't need to be promoted to file attachments
+          // non-local imports don't need to be traversed
         }
       }
     }
@@ -86,7 +86,7 @@ export function rewriteImports(output: any, rootNode: JavaScriptNode, root: stri
           node.source.end,
           JSON.stringify(
             isLocalImport(value, root, sourcePath)
-              ? join("/_file/", join(dirname(sourcePath), value))
+              ? join("/_import/", join(dirname(sourcePath), value))
               : resolveImport(value)
           )
         );
@@ -107,7 +107,7 @@ export function rewriteImports(output: any, rootNode: JavaScriptNode, root: stri
               : "{}"
           } = await import(${JSON.stringify(
             isLocalImport(value, root, sourcePath)
-              ? join("/_file/", join(dirname(sourcePath), value))
+              ? join("/_import/", join(dirname(sourcePath), value))
               : resolveImport(value)
           )});`
         );

src/preview.ts

@@ -51,6 +51,8 @@ class Server {
         send(req, "/@observablehq/runtime/dist/runtime.js", {root: "./node_modules"}).pipe(res);
       } else if (pathname.startsWith("/_observablehq/")) {
         send(req, pathname.slice("/_observablehq".length), {root: publicRoot}).pipe(res);
+      } else if (pathname.startsWith("/_import/")) {
+        send(req, pathname.slice("/_import".length), {root: this.root}).pipe(res);
       } else if (pathname.startsWith("/_file/")) {
         const path = pathname.slice("/_file".length);
         const filepath = join(this.root, path);

src/render.ts

@@ -118,7 +118,7 @@ function getImportPreloads(parseResult: ParseResult, path: string): Iterable<str
   const specifiers = new Set<string>(["npm:@observablehq/runtime"]);
   for (const {name, type} of parseResult.imports) {
     if (type === "local") {
-      specifiers.add(`/_file${join(dirname(path), name)}`);
+      specifiers.add(`/_import${join(dirname(path), name)}`);
     } else {
       specifiers.add(name);
     }

test/output/build/imports/_file/bar/bar.js renamed to test/output/build/imports/_import/bar/bar.js

@@ -6,15 +6,15 @@
 <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css2?family=Source+Serif+Pro:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap">
 <link rel="stylesheet" type="text/css" href="/_observablehq/style.css">
 <link rel="modulepreload" href="/_observablehq/runtime.js">
-<link rel="modulepreload" href="/_file/bar/bar.js">
-<link rel="modulepreload" href="/_file/bar/baz.js">
-<link rel="modulepreload" href="/_file/foo/foo.js">
+<link rel="modulepreload" href="/_import/bar/bar.js">
+<link rel="modulepreload" href="/_import/bar/baz.js">
+<link rel="modulepreload" href="/_import/foo/foo.js">
 <script type="module">
 
 import {define} from "/_observablehq/client.js";
 
 define({id: "d54e931e", inputs: ["display"], outputs: ["bar"], body: async (display) => {
-const {bar} = await import("/_file/bar/bar.js");
+const {bar} = await import("/_import/bar/bar.js");
 
 display(bar);
 return {bar};

test/output/build/imports/_file/bar/baz.js renamed to test/output/build/imports/_import/bar/baz.js

@@ -1,4 +1,4 @@
 define({id: "0", outputs: ["foo"], body: async () => {
-const foo = await import("/_file/bar.js");
+const foo = await import("/_import/bar.js");
 return {foo};
 }});

test/output/build/imports/_file/foo/foo.js renamed to test/output/build/imports/_import/foo/foo.js

@@ -1,5 +1,5 @@
 define({id: "0", inputs: ["display"], outputs: ["foo"], body: async (display) => {
-const {foo} = await import("/_file/bar.js");
+const {foo} = await import("/_import/bar.js");
 
 display(foo);
 return {foo};