Support relative imports

src/build.ts

@@ -34,7 +34,7 @@ async function build(context: CommandContext) {
       pages,
       resolver
     });
-    files.push(...render.files.map((f) => join(sourceFile, "..", f.name)));
+    files.push(...render.files.map((f) => f.name));
     await prepareOutput(outputPath);
     await writeFile(outputPath, render.html);
   }

src/javascript.ts

@@ -1,4 +1,4 @@
-import {Parser, tokTypes, type Options} from "acorn";
+import {Parser, tokTypes, type Node, type Options} from "acorn";
 import mime from "mime";
 import {findAwaits} from "./javascript/awaits.js";
 import {findDeclarations} from "./javascript/declarations.js";
@@ -20,6 +20,7 @@ export interface FileReference {
 
 export interface ImportReference {
   name: string;
+  type: "global" | "local";
 }
 
 export interface Transpile {
@@ -36,13 +37,14 @@ export interface Transpile {
 export interface ParseOptions {
   id: string;
   root: string;
+  sourcePath: string;
   inline?: boolean;
   sourceLine?: number;
   globals?: Set<string>;
 }
 
 export function transpileJavaScript(input: string, options: ParseOptions): Transpile {
-  const {id} = options;
+  const {id, root, sourcePath} = options;
   try {
     const node = parseJavaScript(input, options);
     const databases = node.features.filter((f) => f.type === "DatabaseClient").map((f) => ({name: f.name}));
@@ -57,8 +59,8 @@ export function transpileJavaScript(input: string, options: ParseOptions): Trans
       output.insertRight(input.length, "\n))");
       inputs.push("display");
     }
-    rewriteImports(output, node);
-    rewriteFetches(output, node);
+    rewriteImports(output, node, root, sourcePath);
+    rewriteFetches(output, node, root, sourcePath);
     return {
       id,
       ...(inputs.length ? {inputs} : null),
@@ -99,8 +101,18 @@ function trim(output: Sourcemap, input: string): void {
 
 export const parseOptions: Options = {ecmaVersion: 13, sourceType: "module"};
 
-export function parseJavaScript(input: string, options: ParseOptions) {
-  const {globals = defaultGlobals, inline = false, root} = options;
+export interface JavaScriptNode {
+  body: Node;
+  declarations: {name: string}[] | null;
+  references: {name: string}[];
+  features: {type: unknown; name: string}[];
+  imports: {type: "global" | "local"; name: string}[];
+  expression: boolean;
+  async: boolean;
+}
+
+function parseJavaScript(input: string, options: ParseOptions): JavaScriptNode {
+  const {globals = defaultGlobals, inline = false, root, sourcePath} = options;
   // First attempt to parse as an expression; if this fails, parse as a program.
   let expression = maybeParseExpression(input, parseOptions);
   if (expression?.type === "ClassExpression" && expression.id) expression = null; // treat named class as program
@@ -109,8 +121,8 @@ export function parseJavaScript(input: string, options: ParseOptions) {
   const body = expression ?? (Parser.parse(input, parseOptions) as any);
   const references = findReferences(body, globals, input);
   const declarations = expression ? null : findDeclarations(body, globals, input);
-  const features = findFeatures(body, references, input);
-  const imports = findImports(body, root);
+  const {imports, features: importFeatures} = findImports(body, root, sourcePath);
+  const features = [...importFeatures, ...findFeatures(body, root, sourcePath, references, input)];
   return {
     body,
     declarations,

src/javascript/features.js

@@ -1,7 +1,9 @@
 import {simple} from "acorn-walk";
 import {syntaxError} from "./syntaxError.js";
+import {isLocalImport} from "./imports.ts";
+import {dirname, join} from "node:path";
 
-export function findFeatures(node, references, input) {
+export function findFeatures(node, root, sourcePath, references, input) {
   const features = [];
 
   simple(node, {
@@ -11,10 +13,9 @@ export function findFeatures(node, references, input) {
         arguments: args,
         arguments: [arg]
       } = node;
-
       // Promote fetches with static literals to file attachment references.
-      if (isLocalFetch(node, references)) {
-        features.push({type: "FileAttachment", name: getStringLiteralValue(arg)});
+      if (isLocalFetch(node, references, root, sourcePath)) {
+        features.push({type: "FileAttachment", name: join(dirname(sourcePath), getStringLiteralValue(arg))});
         return;
       }
 
@@ -33,27 +34,14 @@ export function findFeatures(node, references, input) {
       if (args.length !== 1 || !isStringLiteral(arg)) {
         throw syntaxError(`${callee.name} requires a single literal string argument`, node, input);
       }
-
       features.push({type: callee.name, name: getStringLiteralValue(arg)});
-    },
-    // Promote dynamic imports with static literals to file attachment references.
-    ImportExpression: findImport,
-    ImportDeclaration: findImport
-  });
-
-  function findImport(node) {
-    if (isStringLiteral(node.source)) {
-      const value = getStringLiteralValue(node.source);
-      if (value.startsWith("./")) {
-        features.push({type: "FileAttachment", name: value});
-      }
     }
-  }
+  });
 
   return features;
 }
 
-export function isLocalFetch(node, references) {
+export function isLocalFetch(node, references, root, sourcePath) {
   if (node.type !== "CallExpression") return false;
   const {
     callee,
@@ -65,7 +53,7 @@ export function isLocalFetch(node, references) {
     !references.includes(callee) &&
     arg &&
     isStringLiteral(arg) &&
-    getStringLiteralValue(arg).startsWith("./")
+    isLocalImport(getStringLiteralValue(arg), root, sourcePath)
   );
 }
 

src/javascript/fetches.js

@@ -1,10 +1,10 @@
 import {simple} from "acorn-walk";
 import {isLocalFetch} from "./features.js";
 
-export function rewriteFetches(output, root) {
-  simple(root.body, {
+export function rewriteFetches(output, rootNode, root, sourcePath) {
+  simple(rootNode.body, {
     CallExpression(node) {
-      if (isLocalFetch(node, root.references)) {
+      if (isLocalFetch(node, rootNode.references, root, sourcePath)) {
         output.insertLeft(node.arguments[0].start + 3, "_file/");
       }
     }

src/javascript/imports.ts

@@ -1,12 +1,14 @@
 import {Parser} from "acorn";
+import type {Node} from "acorn";
 import {simple} from "acorn-walk";
 import {readFileSync} from "node:fs";
-import {dirname, join, relative, resolve} from "node:path";
-import {parseOptions} from "../javascript.js";
+import {dirname, join} from "node:path";
+import {type JavaScriptNode, parseOptions} from "../javascript.js";
 import {getStringLiteralValue, isStringLiteral} from "./features.js";
 
-export function findImports(body, root) {
-  const imports: {name: string}[] = [];
+export function findImports(body: Node, root: string, sourcePath: string) {
+  const imports: {name: string; type: "global" | "local"}[] = [];
+  const features: {name: string; type: string}[] = [];
   const paths = new Set<string>();
 
   simple(body, {
@@ -19,8 +21,11 @@ export function findImports(body, root) {
   function findImport(node) {
     if (isStringLiteral(node.source)) {
       const value = getStringLiteralValue(node.source);
-      if (value.startsWith("./")) findLocalImports(join(root, value));
-      imports.push({name: value});
+      if (isLocalImport(value, root, sourcePath)) {
+        findLocalImports(join(dirname(sourcePath), value));
+      } else {
+        imports.push({name: value, type: "global"});
+      }
     }
   }
 
@@ -29,8 +34,10 @@ export function findImports(body, root) {
   function findLocalImports(path) {
     if (paths.has(path)) return;
     paths.add(path);
+    imports.push({type: "local", name: path});
+    features.push({type: "FileAttachment", name: path});
     try {
-      const input = readFileSync(path, "utf-8");
+      const input = readFileSync(join(root, path), "utf-8");
       const program = Parser.parse(input, parseOptions);
       simple(program, {
         ImportDeclaration: findLocalImport,
@@ -44,38 +51,41 @@ export function findImports(body, root) {
     function findLocalImport(node) {
       if (isStringLiteral(node.source)) {
         const value = getStringLiteralValue(node.source);
-        if (value.startsWith("./")) {
-          const subpath = resolve(dirname(path), value);
+        if (isLocalImport(value, root, path)) {
+          const subpath = join(dirname(path), value);
           findLocalImports(subpath);
-          imports.push({name: `./${relative(root, subpath)}`});
         } else {
-          imports.push({name: value});
+          imports.push({name: value, type: "global"});
+          // non-local imports don't need to be promoted to file attachments
         }
       }
     }
   }
 
-  return imports;
+  return {imports, features};
 }
 
 // TODO parallelize multiple static imports
-// TODO need to know the local path of the importing notebook; this assumes it’s in the root
-export function rewriteImports(output, root) {
-  simple(root.body, {
+export function rewriteImports(output: any, rootNode: JavaScriptNode, root: string, sourcePath: string) {
+  simple(rootNode.body, {
     ImportExpression(node: any) {
       if (isStringLiteral(node.source)) {
         const value = getStringLiteralValue(node.source);
         output.replaceLeft(
           node.source.start,
           node.source.end,
-          JSON.stringify(value.startsWith("./") ? `/_file/${value.slice(2)}` : resolveImport(value))
+          JSON.stringify(
+            isLocalImport(value, root, sourcePath)
+              ? join("/_file/", join(dirname(sourcePath), value))
+              : resolveImport(value)
+          )
         );
       }
     },
     ImportDeclaration(node: any) {
       if (isStringLiteral(node.source)) {
         const value = getStringLiteralValue(node.source);
-        root.async = true;
+        rootNode.async = true;
         output.replaceLeft(
           node.start,
           node.end,
@@ -86,7 +96,9 @@ export function rewriteImports(output, root) {
               ? node.specifiers.find(isNamespaceSpecifier).local.name
               : "{}"
           } = await import(${JSON.stringify(
-            value.startsWith("./") ? `/_file/${value.slice(2)}` : resolveImport(value)
+            isLocalImport(value, root, sourcePath)
+              ? join("/_file/", join(dirname(sourcePath), value))
+              : resolveImport(value)
           )});`
         );
       }
@@ -102,6 +114,13 @@ function rewriteImportSpecifier(node) {
     : `${node.imported.name}: ${node.local.name}`;
 }
 
+export function isLocalImport(value: string, root: string, sourcePath: string): boolean {
+  return (
+    ["./", "../", "/"].some((prefix) => value.startsWith(prefix)) &&
+    join(root + "/", dirname(sourcePath), value).startsWith(root)
+  );
+}
+
 function isNamespaceSpecifier(node) {
   return node.type === "ImportNamespaceSpecifier";
 }

src/markdown.ts

@@ -77,7 +77,7 @@ function uniqueCodeId(context: ParseContext, content: string): string {
   return id;
 }
 
-function makeFenceRenderer(root: string, baseRenderer: RenderRule): RenderRule {
+function makeFenceRenderer(root: string, baseRenderer: RenderRule, sourcePath: string): RenderRule {
   return (tokens, idx, options, context: ParseContext, self) => {
     const token = tokens[idx];
     const [language, option] = token.info.split(" ");
@@ -88,6 +88,7 @@ function makeFenceRenderer(root: string, baseRenderer: RenderRule): RenderRule {
       const transpile = transpileJavaScript(token.content, {
         id,
         root,
+        sourcePath,
         sourceLine: context.startLine + context.currentLine
       });
       extendPiece(context, {code: [transpile]});
@@ -235,13 +236,14 @@ const transformPlaceholderCore: RuleCore = (state) => {
   state.tokens = output;
 };
 
-function makePlaceholderRenderer(root: string): RenderRule {
+function makePlaceholderRenderer(root: string, sourcePath: string): RenderRule {
   return (tokens, idx, options, context: ParseContext) => {
     const id = uniqueCodeId(context, tokens[idx].content);
     const token = tokens[idx];
     const transpile = transpileJavaScript(token.content, {
       id,
       root,
+      sourcePath,
       inline: true,
       sourceLine: context.startLine + context.currentLine
     });
@@ -331,7 +333,7 @@ function toParseCells(pieces: RenderPiece[]): CellPiece[] {
   return cellPieces;
 }
 
-export function parseMarkdown(source: string, root: string): ParseResult {
+export function parseMarkdown(source: string, root: string, sourcePath: string): ParseResult {
   const parts = matter(source);
   // TODO: We need to know what line in the source the markdown starts on and pass that
   // as startLine in the parse context below.
@@ -351,8 +353,8 @@ export function parseMarkdown(source: string, root: string): ParseResult {
   md.use(MarkdownItAnchor, {permalink: MarkdownItAnchor.permalink.headerLink({class: "observablehq-header-anchor"})});
   md.inline.ruler.push("placeholder", transformPlaceholderInline);
   md.core.ruler.before("linkify", "placeholder", transformPlaceholderCore);
-  md.renderer.rules.placeholder = makePlaceholderRenderer(root);
-  md.renderer.rules.fence = makeFenceRenderer(root, md.renderer.rules.fence!);
+  md.renderer.rules.placeholder = makePlaceholderRenderer(root, sourcePath);
+  md.renderer.rules.fence = makeFenceRenderer(root, md.renderer.rules.fence!, sourcePath);
   md.renderer.rules.softbreak = makeSoftbreakRenderer(md.renderer.rules.softbreak!);
   md.renderer.render = renderIntoPieces(md.renderer, root);
   const context: ParseContext = {files: [], imports: [], pieces: [], startLine: 0, currentLine: 0};
@@ -441,6 +443,6 @@ export function diffMarkdown({parse: prevParse}: ReadMarkdownResult, {parse: nex
 }
 
 export async function readMarkdown(path: string, root: string): Promise<ReadMarkdownResult> {
-  const contents = await readFile(path, "utf-8");
-  return {contents, parse: parseMarkdown(contents, root), hash: computeHash(contents)};
+  const contents = await readFile(pathFromRoot(path, root)!, "utf-8");
+  return {contents, parse: parseMarkdown(contents, root, path), hash: computeHash(contents)};
 }

src/navigation.ts

@@ -12,7 +12,7 @@ export async function readPages(root: string): Promise<NonNullable<RenderOptions
     if (extname(file) !== ".md") continue;
     let parsed: ParseResult;
     try {
-      parsed = parseMarkdown(await readFile(join(root, file), "utf-8"), root);
+      parsed = parseMarkdown(await readFile(join(root, file), "utf-8"), root, file);
     } catch (error) {
       if (!isNodeError(error) || error.code !== "ENOENT") throw error; // internal error
       continue;

src/preview.ts

@@ -268,8 +268,8 @@ function handleWatch(socket: WebSocket, options: {root: string; resolver: CellRe
           let {path} = message;
           if (normalize(path).startsWith("..")) throw new Error("Invalid path: " + path);
           if (path.endsWith("/")) path += "index";
-          path = join(root, normalize(path) + ".md");
-          markdownWatcher = watch(path, await refreshMarkdown(path));
+          path = normalize(path) + ".md";
+          markdownWatcher = watch(join(root, path), await refreshMarkdown(path));
           break;
         }
       }