parameterized routing & page loaders

docs/[dir]/[file].json.js

@@ -0,0 +1,14 @@
+import {parseArgs} from "node:util";
+
+const {values} = parseArgs({
+  options: {
+    dir: {
+      type: "string"
+    },
+    file: {
+      type: "string"
+    }
+  }
+});
+
+console.log(JSON.stringify(values));

docs/[dir]/foo.js

@@ -0,0 +1 @@
+export const foo = observable.params.dir;

docs/[dir]/foo.json.js

@@ -0,0 +1,11 @@
+import {parseArgs} from "node:util";
+
+const {values} = parseArgs({
+  options: {
+    dir: {
+      type: "string"
+    }
+  }
+});
+
+console.log(JSON.stringify(values));

docs/[dir]/foo.txt

@@ -0,0 +1 @@
+foo

docs/[dir]/index.md

@@ -0,0 +1,31 @@
+# Hello dynamic route
+
+is it working
+
+```js
+display(await FileAttachment("./foo.txt").text());
+```
+
+```js
+display(await FileAttachment("./foo.json").json());
+```
+
+```js
+display(await FileAttachment("./file.json").json());
+```
+
+```js
+import {foo} from "./foo.js";
+
+display(foo);
+```
+
+```js
+display(`${observable.params.dir}.json`);
+```
+
+```js
+display(await FileAttachment("./" + observable.params.dir + ".json").json());
+```
+
+<img src="./w3c.png">

docs/data/[test].json.js

@@ -0,0 +1,11 @@
+import {parseArgs} from "node:util";
+
+const {values} = parseArgs({
+  options: {
+    test: {
+      type: "string"
+    }
+  }
+});
+
+console.log(JSON.stringify(values));

docs/foo/Component.js

@@ -0,0 +1,3 @@
+import {FileAttachment} from "npm:@observablehq/stdlib";
+
+export const data = FileAttachment("./data.txt");

docs/foo/[part].js

@@ -0,0 +1 @@
+export const part = observable.params.part;

docs/foo/data.txt

@@ -0,0 +1 @@
+data

docs/foo/index.md

@@ -0,0 +1,10 @@
+```js
+import {data} from "./Component.js";
+
+display(data);
+```
+```js
+import {part} from "./test2.js";
+
+display(part);
+```

src/build.ts

@@ -1,5 +1,4 @@
 import {createHash} from "node:crypto";
-import {existsSync} from "node:fs";
 import {access, constants, copyFile, readFile, stat, writeFile} from "node:fs/promises";
 import {basename, dirname, extname, join} from "node:path/posix";
 import type {Config} from "./config.js";
@@ -152,21 +151,23 @@ export async function build(
 
   // Copy over the referenced files, accumulating hashed aliases.
   for (const file of files) {
-    let sourcePath = join(root, file);
-    effects.output.write(`${faint("copy")} ${sourcePath} ${faint("→")} `);
-    if (!existsSync(sourcePath)) {
-      const loader = loaders.find(join("/", file), {useStale: true});
-      if (!loader) {
-        effects.logger.error(red("error: missing referenced file"));
-        continue;
-      }
+    let sourcePath: string;
+    effects.output.write(`${faint("copy")} ${join(root, file)} ${faint("→")} `);
+    const loader = loaders.find(join("/", file), {useStale: true});
+    if (!loader) {
+      effects.logger.error(red("error: missing referenced file"));
+      continue;
+    }
+    if ("load" in loader) {
       try {
         sourcePath = join(root, await loader.load(effects));
       } catch (error) {
         if (!isEnoent(error)) throw error;
         effects.logger.error(red("error: missing referenced file"));
         continue;
       }
+    } else {
+      sourcePath = loader.path;
     }
     const contents = await readFile(sourcePath);
     const hash = createHash("sha256").update(contents).digest("hex").slice(0, 8);
@@ -205,7 +206,7 @@ export async function build(
     const resolveImport = getModuleResolver(root, path);
     let input: string;
     try {
-      input = await readJavaScript(sourcePath);
+      input = await readJavaScript(root, path);
     } catch (error) {
       if (!isEnoent(error)) throw error;
       effects.logger.error(red("error: missing referenced import"));

src/dataloader.ts

@@ -2,9 +2,10 @@ import {createHash} from "node:crypto";
 import type {WriteStream} from "node:fs";
 import {createReadStream, existsSync, statSync} from "node:fs";
 import {open, readFile, rename, unlink} from "node:fs/promises";
-import {dirname, extname, join, relative} from "node:path/posix";
+import {basename, dirname, extname, join, relative} from "node:path/posix";
 import {createGunzip} from "node:zlib";
 import {spawn} from "cross-spawn";
+import {globSync} from "glob";
 import JSZip from "jszip";
 import {extract} from "tar-stream";
 import {maybeStat, prepareOutput} from "./files.js";
@@ -68,9 +69,9 @@ export class LoaderResolver {
    * abort if we find a matching folder or reach the source root; for example,
    * if src/data exists, we won’t look for a src/data.zip.
    */
-  find(targetPath: string, {useStale = false} = {}): Loader | undefined {
-    const exact = this.findExact(targetPath, {useStale});
-    if (exact) return exact;
+  find(targetPath: string, {useStale = false} = {}): Asset | Loader | undefined {
+    const result = this.findExact(targetPath, {useStale}) ?? this.findDynamic(targetPath, {useStale});
+    if (result) return result;
     let dir = dirname(targetPath);
     for (let parent: string; true; dir = parent) {
       parent = dirname(dir);
@@ -80,31 +81,35 @@ export class LoaderResolver {
     }
     for (const [ext, Extractor] of extractors) {
       const archive = dir + ext;
-      if (existsSync(join(this.root, archive))) {
-        return new Extractor({
-          preload: async () => archive,
-          inflatePath: targetPath.slice(archive.length - ext.length + 1),
-          path: join(this.root, archive),
-          root: this.root,
-          targetPath,
-          useStale
-        });
-      }
-      const archiveLoader = this.findExact(archive, {useStale});
+      const archiveLoader = this.findExact(archive, {useStale}) ?? this.findDynamic(archive, {useStale});
       if (archiveLoader) {
-        return new Extractor({
-          preload: async (options) => archiveLoader.load(options),
-          inflatePath: targetPath.slice(archive.length - ext.length + 1),
-          path: archiveLoader.path,
-          root: this.root,
-          targetPath,
-          useStale
-        });
+        if ("load" in archiveLoader) {
+          // archive.zip.js
+          return new Extractor({
+            preload: async (options) => archiveLoader.load(options),
+            inflatePath: targetPath.slice(archive.length - ext.length + 1),
+            path: archiveLoader.path,
+            root: this.root,
+            targetPath,
+            useStale
+          });
+        } else {
+          // archive.zip
+          return new Extractor({
+            preload: async () => relative(this.root, archiveLoader.path),
+            inflatePath: targetPath.slice(archive.length - ext.length + 1),
+            path: archiveLoader.path,
+            root: this.root,
+            targetPath,
+            useStale
+          });
+        }
       }
     }
   }
 
-  private findExact(targetPath: string, {useStale}): Loader | undefined {
+  private findExact(targetPath: string, {useStale}): Asset | Loader | undefined {
+    if (existsSync(join(this.root, targetPath))) return {path: join(this.root, targetPath)};
     for (const [ext, [command, ...args]] of this.interpreters) {
       if (!existsSync(join(this.root, targetPath + ext))) continue;
       if (extname(targetPath) === "") {
@@ -123,6 +128,59 @@ export class LoaderResolver {
     }
   }
 
+  private findDynamic(targetPath: string, {useStale}): Asset | Loader | undefined {
+    const found = this.findDynamicParams(".", join(".", targetPath).split("/"));
+    if (!found) return;
+    const {path, params, ext} = found;
+    if (!ext) return {path: join(this.root, path)};
+    const [command, ...args] = this.interpreters.get(ext)!;
+    if (command != null) args.push(join(this.root, path));
+    return new CommandLoader({
+      command: command ?? path,
+      args: args.concat(params),
+      path: join(this.root, path),
+      root: this.root,
+      targetPath,
+      useStale
+    });
+  }
+
+  /**
+   * Finds a parameterized data loader (dynamic route) recursively, such that
+   * the most specific match is returned.
+   */
+  private findDynamicParams(cwd: string, parts: string[]): {path: string; params: string[]; ext?: string} | undefined {
+    switch (parts.length) {
+      case 0:
+        return;
+      case 1: {
+        const [first] = parts;
+        if (existsSync(join(this.root, cwd, first))) return {path: join(cwd, first), params: []};
+        const ext1 = extname(first);
+        for (const ext of this.interpreters.keys()) {
+          const ext2 = `${ext1}${ext}`;
+          if (existsSync(join(this.root, cwd, first + ext))) return {path: join(cwd, first + ext), params: [], ext};
+          for (const file of globSync(`\\[*\\]${ext2}`, {cwd: join(this.root, cwd)})) {
+            const params = [`--${basename(file, ext2).slice(1, -1)}`, basename(first, ext1)];
+            return {path: join(cwd, file), params, ext};
+          }
+        }
+        return;
+      }
+      default: {
+        const [first, ...rest] = parts;
+        if (existsSync(join(this.root, cwd, first))) {
+          const found = this.findDynamicParams(join(cwd, first), rest);
+          if (found) return found;
+        }
+        for (const dir of globSync("\\[*\\]", {cwd: join(this.root, cwd)})) {
+          const found = this.findDynamicParams(join(cwd, dir), rest);
+          if (found) return {...found, params: found.params.concat(`--${dir.slice(1, -1)}`, first)};
+        }
+      }
+    }
+  }
+
   getWatchPath(path: string): string | undefined {
     const exactPath = join(this.root, path);
     if (existsSync(exactPath)) return exactPath;
@@ -193,6 +251,12 @@ export class LoaderResolver {
   }
 }
 
+/** Used by LoaderResolver.find to represent a static file resolution. */
+export interface Asset {
+  /** The path to the file relative to the current working directory. */
+  path: string;
+}
+
 export abstract class Loader {
   /**
    * The source root relative to the current working directory, such as src.

src/javascript/globals.ts

@@ -47,6 +47,7 @@ export const defaultGlobals = new Set([
   "Number",
   "navigator",
   "Object",
+  "observable",
   "parseFloat",
   "parseInt",
   "performance",