relative fetch and FileAttachments

public/client.js

@@ -196,7 +196,7 @@ export function define(cell) {
   v.define(outputs.length ? `cell ${id}` : null, inputs, body);
   variables.push(v);
   for (const o of outputs) variables.push(main.define(o, [`cell ${id}`], (exports) => exports[o]));
-  for (const f of files) attachedFiles.set(f.name, {url: `/_file${(new URL(f.name, location)).pathname}`, mimeType: f.mimeType}); // prettier-ignore
+  for (const f of files) attachedFiles.set(f.name, {url: globalThis._FileAttachmentDir + `${(new URL(f.name, location)).pathname}`, mimeType: f.mimeType}); // prettier-ignore
   for (const d of databases) databaseTokens.set(d.name, d);
 }
 

src/javascript/fetches.ts

@@ -1,11 +1,15 @@
+import {dirname, join} from "node:path";
 import {simple} from "acorn-walk";
-import {isLocalFetch} from "./features.js";
+import {relativeUrl} from "../url.js";
+import {getStringLiteralValue, isLocalFetch} from "./features.js";
 
 export function rewriteFetches(output, rootNode, sourcePath) {
   simple(rootNode.body, {
     CallExpression(node) {
       if (isLocalFetch(node, rootNode.references, sourcePath)) {
-        output.insertLeft(node.arguments[0].start + 3, "_file/");
+        const arg = node.arguments[0];
+        const value = relativeUrl(sourcePath, "/_file/" + join(dirname(sourcePath), getStringLiteralValue(arg)));
+        output.replaceLeft(arg.start, arg.end, JSON.stringify(value));
       }
     }
   });

src/markdown.ts

@@ -11,6 +11,7 @@ import {type RuleInline} from "markdown-it/lib/parser_inline.js";
 import {type RenderRule, type default as Renderer} from "markdown-it/lib/renderer.js";
 import MarkdownItAnchor from "markdown-it-anchor";
 import mime from "mime";
+import {relativeUrl} from "../src/url.js";
 import {getLocalPath} from "./files.js";
 import {computeHash} from "./hash.js";
 import {parseInfo} from "./info.js";
@@ -330,7 +331,7 @@ function normalizePieceHtml(html: string, root: string, sourcePath: string, cont
     const path = getLocalPath(sourcePath, href);
     if (path) {
       context.files.push({name: href, mimeType: mime.getType(href)});
-      element.setAttribute("href", `/_file/${path}`);
+      element.setAttribute("href", relativeUrl(sourcePath, `/_file/${path}`));
     }
   }
   return isSingleElement(document) ? String(document) : `<span>${document}</span>`;

src/render.ts

@@ -73,6 +73,7 @@ ${Array.from(getImportPreloads(parseResult, path))
 <script type="module">
 
 import {${preview ? "open, " : ""}define} from "${relativeUrl(path, "/_observablehq/client.js")}";
+globalThis._FileAttachmentDir = ${JSON.stringify(relativeUrl(path, "/_file/"))};
 
 ${preview ? `open({hash: ${JSON.stringify(hash)}});\n` : ""}${parseResult.cells
     .map(resolver)

test/input/build/files/custom-styles.css

@@ -0,0 +1 @@
+a { color: pink; }

test/input/build/files/file-top.csv

@@ -0,0 +1,2 @@
+Hello,world
+1,2

test/input/build/files/files.md

@@ -0,0 +1,18 @@
+<link rel=stylesheet href="custom-styles.css" />
+<link rel=stylesheet href="subsection/additional-styles.css" />
+
+```js
+fetch("./file-top.csv")
+```
+
+```js
+fetch("./subsection/file-sub.csv")
+```
+
+```js
+FileAttachment("file-top.csv")
+```
+
+```js
+FileAttachment("subsection/file-sub.csv")
+```

test/input/build/files/subsection/additional-styles.css

@@ -0,0 +1 @@
+a { color: green; }

test/input/build/files/subsection/file-sub.csv

@@ -0,0 +1,2 @@
+Bonjour,monde
+1,2

test/input/build/files/subsection/subfiles.md

@@ -0,0 +1,18 @@
+<link rel=stylesheet href="../custom-styles.css" />
+<link rel=stylesheet href="additional-styles.css" />
+
+```js
+fetch("../file-top.csv")
+```
+
+```js
+fetch("./file-sub.csv")
+```
+
+```js
+FileAttachment("../file-top.csv")
+```
+
+```js
+FileAttachment("file-sub.csv")
+```

test/output/build/config/index.html

@@ -9,6 +9,7 @@
 <script type="module">
 
 import {define} from "./_observablehq/client.js";
+globalThis._FileAttachmentDir = "./_file/";
 
 
 </script>

test/output/build/config/one.html

@@ -9,6 +9,7 @@
 <script type="module">
 
 import {define} from "./_observablehq/client.js";
+globalThis._FileAttachmentDir = "./_file/";
 
 
 </script>

test/output/build/config/sub/two.html

@@ -9,6 +9,7 @@
 <script type="module">
 
 import {define} from "../_observablehq/client.js";
+globalThis._FileAttachmentDir = "../_file/";
 
 
 </script>

test/output/build/files/_file/custom-styles.css

@@ -0,0 +1 @@
+a { color: pink; }

test/output/build/files/_file/file-top.csv

@@ -0,0 +1,2 @@
+Hello,world
+1,2

test/output/build/files/_file/subsection/additional-styles.css

@@ -0,0 +1 @@
+a { color: green; }

test/output/build/files/_file/subsection/file-sub.csv

@@ -0,0 +1,2 @@
+Bonjour,monde
+1,2

test/output/build/files/files.html

@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<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">
+<script type="module">
+
+import {define} from "./_observablehq/client.js";
+globalThis._FileAttachmentDir = "./_file/";
+
+define({id: "a7808707", inputs: ["display"], files: [{"name":"./file-top.csv","mimeType":"text/csv"}], body: (display) => {
+display((
+fetch("./_file/file-top.csv")
+))
+}});
+define({id: "03b99abc", inputs: ["display"], files: [{"name":"./subsection/file-sub.csv","mimeType":"text/csv"}], body: (display) => {
+display((
+fetch("./_file/subsection/file-sub.csv")
+))
+}});
+define({id: "10037545", inputs: ["FileAttachment","display"], files: [{"name":"file-top.csv","mimeType":"text/csv"}], body: (FileAttachment,display) => {
+display((
+FileAttachment("file-top.csv")
+))
+}});
+define({id: "453a8147", inputs: ["FileAttachment","display"], files: [{"name":"subsection/file-sub.csv","mimeType":"text/csv"}], body: (FileAttachment,display) => {
+display((
+FileAttachment("subsection/file-sub.csv")
+))
+}});
+
+</script>
+<input id="observablehq-sidebar-toggle" type="checkbox">
+<nav id="observablehq-sidebar">
+  <ol>
+    <li class="observablehq-link observablehq-link-active"><a href="./files">Untitled</a></li>
+    <li class="observablehq-link"><a href="./subsection/subfiles">Untitled</a></li>
+  </ol>
+</nav>
+<script>{
+  const toggle = document.querySelector("#observablehq-sidebar-toggle");
+  const initialState = localStorage.getItem("observablehq-sidebar");
+  if (initialState) toggle.checked = initialState === "true";
+  else toggle.indeterminate = true;
+}</script>
+<div id="observablehq-center">
+<main id="observablehq-main" class="observablehq">
+<span><link rel="stylesheet" href="./_file/custom-styles.css">
+<link rel="stylesheet" href="./_file/subsection/additional-styles.css">
+</span><div id="cell-a7808707" class="observablehq observablehq--block"></div>
+<div id="cell-03b99abc" class="observablehq observablehq--block"></div>
+<div id="cell-10037545" class="observablehq observablehq--block"></div>
+<div id="cell-453a8147" class="observablehq observablehq--block"></div>
+</main>
+<footer id="observablehq-footer">
+<nav><a class="next" href="/subsection/subfiles"><span>Untitled</span></a></nav>
+<div>© 2023 Observable, Inc.</div>
+</footer>
+</div>

test/output/build/files/subsection/subfiles.html

@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<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">
+<script type="module">
+
+import {define} from "../_observablehq/client.js";
+globalThis._FileAttachmentDir = "../_file/";
+
+define({id: "62f1fd0c", inputs: ["display"], files: [{"name":"../file-top.csv","mimeType":"text/csv"}], body: (display) => {
+display((
+fetch("../_file/file-top.csv")
+))
+}});
+define({id: "94d347ec", inputs: ["display"], files: [{"name":"./file-sub.csv","mimeType":"text/csv"}], body: (display) => {
+display((
+fetch("../_file/subsection/file-sub.csv")
+))
+}});
+define({id: "ef9a31ef", inputs: ["FileAttachment","display"], files: [{"name":"../file-top.csv","mimeType":"text/csv"}], body: (FileAttachment,display) => {
+display((
+FileAttachment("../file-top.csv")
+))
+}});
+define({id: "834ecf9f", inputs: ["FileAttachment","display"], files: [{"name":"file-sub.csv","mimeType":"text/csv"}], body: (FileAttachment,display) => {
+display((
+FileAttachment("file-sub.csv")
+))
+}});
+
+</script>
+<input id="observablehq-sidebar-toggle" type="checkbox">
+<nav id="observablehq-sidebar">
+  <ol>
+    <li class="observablehq-link"><a href="../files">Untitled</a></li>
+    <li class="observablehq-link observablehq-link-active"><a href="./subfiles">Untitled</a></li>
+  </ol>
+</nav>
+<script>{
+  const toggle = document.querySelector("#observablehq-sidebar-toggle");
+  const initialState = localStorage.getItem("observablehq-sidebar");
+  if (initialState) toggle.checked = initialState === "true";
+  else toggle.indeterminate = true;
+}</script>
+<div id="observablehq-center">
+<main id="observablehq-main" class="observablehq">
+<span><link rel="stylesheet" href="../_file/custom-styles.css">
+<link rel="stylesheet" href="../_file/subsection/additional-styles.css">
+</span><div id="cell-62f1fd0c" class="observablehq observablehq--block"></div>
+<div id="cell-94d347ec" class="observablehq observablehq--block"></div>
+<div id="cell-ef9a31ef" class="observablehq observablehq--block"></div>
+<div id="cell-834ecf9f" class="observablehq observablehq--block"></div>
+</main>
+<footer id="observablehq-footer">
+<nav><a class="prev" href="/files"><span>Untitled</span></a></nav>
+<div>© 2023 Observable, Inc.</div>
+</footer>
+</div>

test/output/build/imports/foo/foo.html

@@ -13,6 +13,7 @@
 <script type="module">
 
 import {define} from "../_observablehq/client.js";
+globalThis._FileAttachmentDir = "../_file/";
 
 define({id: "a9220fae", inputs: ["display"], outputs: ["d3","bar"], body: async (display) => {
 const d3 = await import("https://cdn.jsdelivr.net/npm/d3/+esm");

test/output/build/multi/index.html

@@ -9,6 +9,7 @@
 <script type="module">
 
 import {define} from "./_observablehq/client.js";
+globalThis._FileAttachmentDir = "./_file/";
 
 define({id: "1bcb5df5", inputs: ["FileAttachment"], outputs: ["f1"], files: [{"name":"file1.csv","mimeType":"text/csv"}], body: (FileAttachment) => {
 const f1 = FileAttachment("file1.csv").csv();

test/output/build/multi/subsection/index.html

@@ -9,6 +9,7 @@
 <script type="module">
 
 import {define} from "../_observablehq/client.js";
+globalThis._FileAttachmentDir = "../_file/";
 
 
 </script>

test/output/build/simple/simple.html

@@ -9,6 +9,7 @@
 <script type="module">
 
 import {define} from "./_observablehq/client.js";
+globalThis._FileAttachmentDir = "./_file/";
 
 define({id: "115586ff", inputs: ["FileAttachment"], outputs: ["result"], files: [{"name":"data.txt","mimeType":"text/plain"}], body: (FileAttachment) => {
 let result = FileAttachment("data.txt").text();