observablehq · mbostock · Mar 15, 2024 · Mar 10, 2024 · Mar 15, 2024 · Mar 15, 2024
diff --git a/src/html.ts b/src/html.ts
@@ -3,7 +3,7 @@ import he from "he";
 import hljs from "highlight.js";
 import type {DOMWindow} from "jsdom";
 import {JSDOM, VirtualConsole} from "jsdom";
-import {relativePath, resolveLocalPath} from "./path.js";
+import {isAssetPath, relativePath, resolveLocalPath} from "./path.js";
 
 const ASSET_PROPERTIES: readonly [selector: string, src: string][] = [
   ["a[href][download]", "href"],
@@ -17,55 +17,98 @@ const ASSET_PROPERTIES: readonly [selector: string, src: string][] = [
   ["video[src]", "src"]
 ];
 
-export function isAssetPath(specifier: string): boolean {
-  return !/^(\w+:|#)/.test(specifier);
+export function isJavaScript({type}: HTMLScriptElement): boolean {
+  if (!type) return true;
+  type = type.toLowerCase();
+  return type === "text/javascript" || type === "application/javascript" || type === "module";
 }
 
 export function parseHtml(html: string): DOMWindow {
   return new JSDOM(`<!DOCTYPE html><body>${html}`, {virtualConsole: new VirtualConsole()}).window;
 }
 
-export function findAssets(html: string, path: string): Set<string> {
+interface Assets {
+  files: Set<string>;
+  localImports: Set<string>;
+  globalImports: Set<string>;
+  staticImports: Set<string>;
+}
+
+export function findAssets(html: string, path: string): Assets {
   const {document} = parseHtml(html);
-  const assets = new Set<string>();
+  const files = new Set<string>();
+  const localImports = new Set<string>();
+  const globalImports = new Set<string>();
+  const staticImports = new Set<string>();
 
-  const maybeAsset = (specifier: string): void => {
+  const maybeFile = (specifier: string): void => {
     if (!isAssetPath(specifier)) return;
     const localPath = resolveLocalPath(path, specifier);
     if (!localPath) return console.warn(`non-local asset path: ${specifier}`);
-    assets.add(relativePath(path, localPath));
+    files.add(relativePath(path, localPath));
   };
 
   for (const [selector, src] of ASSET_PROPERTIES) {
     for (const element of document.querySelectorAll(selector)) {
-      const source = decodeURIComponent(element.getAttribute(src)!);
+      const source = decodeURI(element.getAttribute(src)!);
       if (src === "srcset") {
         for (const s of parseSrcset(source)) {
-          maybeAsset(s);
+          maybeFile(s);
         }
       } else {
-        maybeAsset(source);
+        maybeFile(source);
       }
     }
   }
 
-  return assets;
+  for (const script of document.querySelectorAll<HTMLScriptElement>("script[src]")) {
+    let src = script.getAttribute("src")!;
+    if (isJavaScript(script)) {
+      if (isAssetPath(src)) {
+        const localPath = resolveLocalPath(path, src);
+        if (!localPath) {
+          console.warn(`non-local asset path: ${src}`);
+          continue;
+        }
+        localImports.add((src = relativePath(path, localPath)));
+      } else {
+        globalImports.add(src);
+      }
+      if (script.getAttribute("type")?.toLowerCase() === "module") {
+        staticImports.add(src); // modulepreload
+      }
+    } else {
+      maybeFile(src);
+    }
+  }
+
+  return {files, localImports, globalImports, staticImports};
+}
+
+interface HtmlResolvers {
+  resolveFile?: (specifier: string) => string;
+  resolveScript?: (specifier: string) => string;
 }
 
-export function rewriteHtml(html: string, resolve: (specifier: string) => string = String): string {
+export function rewriteHtml(html: string, {resolveFile = String, resolveScript = String}: HtmlResolvers): string {
   const {document} = parseHtml(html);
 
-  const maybeResolve = (specifier: string): string => {
-    return isAssetPath(specifier) ? resolve(specifier) : specifier;
+  const maybeResolveFile = (specifier: string): string => {
+    return isAssetPath(specifier) ? resolveFile(specifier) : specifier;
   };
 
   for (const [selector, src] of ASSET_PROPERTIES) {
     for (const element of document.querySelectorAll(selector)) {
-      const source = decodeURIComponent(element.getAttribute(src)!);
-      element.setAttribute(src, src === "srcset" ? resolveSrcset(source, maybeResolve) : maybeResolve(source));
+      const source = decodeURI(element.getAttribute(src)!);
+      element.setAttribute(src, src === "srcset" ? resolveSrcset(source, maybeResolveFile) : maybeResolveFile(source));
     }
   }
 
+  for (const script of document.querySelectorAll<HTMLScriptElement>("script[src]")) {
+    const src = decodeURI(script.getAttribute("src")!);
+    script.setAttribute("src", (isJavaScript(script) ? resolveScript : maybeResolveFile)(src));
+  }
+
   // Syntax highlighting for <code> elements. The code could contain an inline
   // expression within, or other HTML, but we only highlight text nodes that are
   // direct children of code elements.

diff --git a/src/javascript/imports.ts b/src/javascript/imports.ts
@@ -71,7 +71,7 @@ export function findImports(body: Node, path: string, input: string): ImportRefe
   function findImport(node: ImportNode | ExportNode) {
     const source = node.source;
     if (!source || !isStringLiteral(source)) return;
-    const name = decodeURIComponent(getStringLiteralValue(source));
+    const name = decodeURI(getStringLiteralValue(source));
     const method = node.type === "ImportExpression" ? "dynamic" : "static";
     if (isPathImport(name)) {
       const localPath = resolveLocalPath(path, name);
@@ -85,7 +85,7 @@ export function findImports(body: Node, path: string, input: string): ImportRefe
   function findImportMetaResolve(node: CallExpression) {
     const source = node.arguments[0];
     if (!isImportMetaResolve(node) || !isStringLiteral(source)) return;
-    const name = decodeURIComponent(getStringLiteralValue(source));
+    const name = decodeURI(getStringLiteralValue(source));
     if (isPathImport(name)) {
       const localPath = resolveLocalPath(path, name);
       if (!localPath) throw syntaxError(`non-local import: ${name}`, node, input); // prettier-ignore

diff --git a/src/markdown.ts b/src/markdown.ts
@@ -334,7 +334,7 @@ export function parseMarkdown(input: string, {md, path, style: configStyle}: Par
   const code: MarkdownCode[] = [];
   const context: ParseContext = {code, startLine: 0, currentLine: 0, path};
   const tokens = md.parse(content, context);
-  const html = md.renderer.render(tokens, md.options, context); // Note: mutates code, assets!
+  const html = md.renderer.render(tokens, md.options, context); // Note: mutates code!
   const style = getStylesheet(path, data, configStyle);
   return {
     html,

diff --git a/src/path.ts b/src/path.ts
@@ -48,6 +48,20 @@ export function resolveLocalPath(source: string, target: string): string | null
   return path;
 }
 
+/**
+ * Returns true if the specified specifier refers to a local path, as opposed to
+ * a global import from npm or a URL. Local paths start with ./, ../, or /.
+ */
 export function isPathImport(specifier: string): boolean {
   return ["./", "../", "/"].some((prefix) => specifier.startsWith(prefix));
 }
+
+/**
+ * Like isPathImport, but more lax; this is used to detect when an HTML element
+ * such as an image refers to a local asset. Whereas isPathImport requires a
+ * local path to start with ./, ../, or /, isAssetPath only requires that a
+ * local path not start with a protocol (e.g., http: or https:) or a hash (#).
+ */
+export function isAssetPath(specifier: string): boolean {
+  return !/^(\w+:|#)/.test(specifier);
+}
diff --git a/src/preview.ts b/src/preview.ts
@@ -92,7 +92,7 @@ export class PreviewServer {
     if (this._verbose) console.log(faint(req.method!), req.url);
     try {
       const url = new URL(req.url!, "http://localhost");
-      let pathname = decodeURIComponent(url.pathname);
+      let pathname = decodeURI(url.pathname);
       let match: RegExpExecArray | null;
       if (pathname === "/_observablehq/client.js") {
         end(req, res, await rollupClient(getClientPath("preview.js"), root, pathname), "text/javascript");
@@ -334,7 +334,7 @@ function handleWatch(socket: WebSocket, req: IncomingMessage, config: Config) {
 
   async function hello({path: initialPath, hash: initialHash}: {path: string; hash: string}): Promise<void> {
     if (markdownWatcher || attachmentWatcher) throw new Error("already watching");
-    path = decodeURIComponent(initialPath);
+    path = decodeURI(initialPath);
     if (!(path = normalize(path)).startsWith("/")) throw new Error("Invalid path: " + initialPath);
     if (path.endsWith("/")) path += "index";
     path = join(dirname(path), basename(path, ".html") + ".md");
@@ -390,8 +390,8 @@ function handleWatch(socket: WebSocket, req: IncomingMessage, config: Config) {
   }
 }
 
-function getHtml({html}: MarkdownPage, {resolveFile}: Resolvers): string[] {
-  return Array.from(parseHtml(rewriteHtml(html, resolveFile)).document.body.children, (d) => d.outerHTML);
+function getHtml({html}: MarkdownPage, resolvers: Resolvers): string[] {
+  return Array.from(parseHtml(rewriteHtml(html, resolvers)).document.body.children, (d) => d.outerHTML);
 }
 
 function getCode({code}: MarkdownPage, resolvers: Resolvers): Map<string, string> {

diff --git a/src/render.ts b/src/render.ts
@@ -79,7 +79,7 @@ ${preview ? `\nopen({hash: ${JSON.stringify(resolvers.hash)}, eval: (body) => ev
   }
 <div id="observablehq-center">${renderHeader(options, data)}
 <main id="observablehq-main" class="observablehq${draft ? " observablehq--draft" : ""}">
-${html.unsafe(rewriteHtml(page.html, resolvers.resolveFile))}</main>${renderFooter(path, options, data, normalizeLink)}
+${html.unsafe(rewriteHtml(page.html, resolvers))}</main>${renderFooter(path, options, data, normalizeLink)}
 </div>
 `);
 }

diff --git a/src/resolvers.ts b/src/resolvers.ts
@@ -9,19 +9,20 @@ import {getImplicitFileImports, getImplicitInputImports} from "./libraries.js";
 import {getImplicitStylesheets} from "./libraries.js";
 import type {MarkdownPage} from "./markdown.js";
 import {extractNpmSpecifier, populateNpmCache, resolveNpmImport, resolveNpmImports} from "./npm.js";
-import {isPathImport, relativePath, resolvePath} from "./path.js";
+import {isAssetPath, isPathImport, relativePath, resolveLocalPath, resolvePath} from "./path.js";
 
 export interface Resolvers {
   hash: string;
-  assets: Set<string>;
+  assets: Set<string>; // like files, but not registered for FileAttachment
   files: Set<string>;
   localImports: Set<string>;
   globalImports: Set<string>;
   staticImports: Set<string>;
-  stylesheets: Set<string>;
+  stylesheets: Set<string>; // stylesheets to be added by render
   resolveFile(specifier: string): string;
   resolveImport(specifier: string): string;
   resolveStylesheet(specifier: string): string;
+  resolveScript(specifier: string): string;
 }
 
 const defaultImports = [
@@ -73,7 +74,7 @@ export async function getResolvers(
   {root, path, loaders}: {root: string; path: string; loaders: LoaderResolver}
 ): Promise<Resolvers> {
   const hash = createHash("sha256").update(page.html).update(JSON.stringify(page.data));
-  const assets = findAssets(page.html, path);
+  const assets = new Set<string>();
   const files = new Set<string>();
   const fileMethods = new Set<string>();
   const localImports = new Set<string>();
@@ -82,6 +83,13 @@ export async function getResolvers(
   const stylesheets = new Set<string>();
   const resolutions = new Map<string, string>();
 
+  // Add assets.
+  const info = findAssets(page.html, path);
+  for (const f of info.files) assets.add(f);
+  for (const i of info.localImports) localImports.add(i);
+  for (const i of info.globalImports) globalImports.add(i);
+  for (const i of info.staticImports) staticImports.add(i);
+
   // Add stylesheets. TODO Instead of hard-coding Source Serif Pro, parse the
   // page’s stylesheet to look for external imports.
   stylesheets.add("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"); // prettier-ignore
@@ -242,6 +250,15 @@ export async function getResolvers(
       : specifier;
   }
 
+  function resolveScript(src: string): string {
+    if (isAssetPath(src)) {
+      const localPath = resolveLocalPath(path, src);
+      return localPath ? resolveImport(relativePath(path, localPath)) : src;
+    } else {
+      return resolveImport(src);
+    }
+  }
+
   return {
     hash: hash.digest("hex"),
     assets,
@@ -252,6 +269,7 @@ export async function getResolvers(
     stylesheets,
     resolveFile,
     resolveImport,
+    resolveScript,
     resolveStylesheet
   };
 }