incremental implicit stylesheets

Author: mbostock

src/client/preview.js

@@ -19,12 +19,13 @@ export function open({hash, eval: compile} = {}) {
         location.reload();
         break;
       }
-      case "refresh":
+      case "refresh": {
         message.cellIds.forEach((id) => {
           const cell = cellsById.get(id);
           if (cell) define(cell.cell);
         });
         break;
+      }
       case "update": {
         const root = document.querySelector("main");
         if (message.previousHash !== hash) {
@@ -92,6 +93,19 @@ export function open({hash, eval: compile} = {}) {
         enableCopyButtons();
         break;
       }
+      case "add-stylesheet": {
+        const link = document.createElement("link");
+        link.rel = "stylesheet";
+        link.type = "text/css";
+        link.crossOrigin = "";
+        link.href = message.href;
+        document.head.appendChild(link);
+        break;
+      }
+      case "remove-stylesheet": {
+        document.head.querySelector(`link[href="${message.href}"]`)?.remove();
+        break;
+      }
     }
   };
 

src/libraries.ts

@@ -1,3 +1,7 @@
+export function getImplicitSpecifiers(inputs: Set<string>): Set<string> {
+  return addImplicitSpecifiers(new Set(), inputs);
+}
+
 export function addImplicitSpecifiers(specifiers: Set<string>, inputs: Set<string>): typeof specifiers {
   if (inputs.has("d3") || inputs.has("Plot")) specifiers.add("npm:d3");
   if (inputs.has("Plot")) specifiers.add("npm:@observablehq/plot");

src/markdown.ts

@@ -332,6 +332,7 @@ const SUPPORTED_PROPERTIES: readonly {query: string; src: "href" | "src" | "srcs
   {query: "video[src]", src: "src"},
   {query: "video source[src]", src: "src"}
 ]);
+
 export function normalizePieceHtml(html: string, sourcePath: string, context: ParseContext): string {
   const {document} = parseHTML(html);
 
@@ -419,11 +420,10 @@ function toParseCells(pieces: RenderPiece[]): CellPiece[] {
   return cellPieces;
 }
 
+// TODO We need to know what line in the source the markdown starts on and pass
+// that as startLine in the parse context below.
 export async function parseMarkdown(source: string, root: string, sourcePath: string): Promise<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.
   const md = MarkdownIt({html: true});
   md.use(MarkdownItAnchor, {permalink: MarkdownItAnchor.permalink.headerLink({class: "observablehq-header-anchor"})});
   md.inline.ruler.push("placeholder", transformPlaceholderInline);
@@ -497,12 +497,13 @@ function diffReducer(patch: PatchItem<ParsePiece>) {
   if (patch.type === "remove") {
     return {
       ...patch,
+      type: "remove",
       items: patch.items.map((item) => ({
         type: item.type,
         id: item.id,
         ...("cellIds" in item ? {cellIds: item.cellIds} : null)
       }))
-    };
+    } as const;
   }
   return patch;
 }

src/preview.ts

@@ -6,6 +6,7 @@ import {createServer} from "node:http";
 import type {IncomingMessage, RequestListener, Server, ServerResponse} from "node:http";
 import {basename, dirname, extname, join, normalize} from "node:path";
 import {fileURLToPath} from "node:url";
+import {difference} from "d3-array";
 import send from "send";
 import {type WebSocket, WebSocketServer} from "ws";
 import {version} from "../package.json";
@@ -14,6 +15,7 @@ import {Loader} from "./dataloader.js";
 import {HttpError, isEnoent, isHttpError, isSystemError} from "./error.js";
 import {FileWatchers} from "./fileWatchers.js";
 import {createImportResolver, rewriteModule} from "./javascript/imports.js";
+import {getImplicitSpecifiers, getImplicitStylesheets} from "./libraries.js";
 import {diffMarkdown, readMarkdown} from "./markdown.js";
 import type {ParseResult, ReadMarkdownResult} from "./markdown.js";
 import {renderPreview} from "./render.js";
@@ -246,10 +248,17 @@ function getWatchPaths(parseResult: ParseResult): string[] {
   return paths;
 }
 
+function getStylesheets({cells}: ParseResult): Set<string> {
+  const inputs = new Set<string>();
+  for (const cell of cells) cell.inputs?.forEach(inputs.add, inputs);
+  return getImplicitStylesheets(getImplicitSpecifiers(inputs));
+}
+
 function handleWatch(socket: WebSocket, req: IncomingMessage, options: {root: string}) {
   const {root} = options;
   let path: string | null = null;
   let current: ReadMarkdownResult | null = null;
+  let stylesheets: Set<string> | null = null;
   let markdownWatcher: FSWatcher | null = null;
   let attachmentWatcher: FileWatchers | null = null;
   console.log(faint("socket open"), req.url);
@@ -285,6 +294,10 @@ function handleWatch(socket: WebSocket, req: IncomingMessage, options: {root: st
       case "change": {
         const updated = await readMarkdown(path, root);
         if (current.parse.hash === updated.parse.hash) break;
+        const updatedStylesheets = getStylesheets(updated.parse);
+        for (const href of difference(stylesheets, updatedStylesheets)) send({type: "remove-stylesheet", href});
+        for (const href of difference(updatedStylesheets, stylesheets)) send({type: "add-stylesheet", href});
+        stylesheets = updatedStylesheets;
         const diff = diffMarkdown(current, updated);
         send({type: "update", diff, previousHash: current.parse.hash, updatedHash: updated.parse.hash});
         current = updated;
@@ -303,6 +316,7 @@ function handleWatch(socket: WebSocket, req: IncomingMessage, options: {root: st
     path += ".md";
     current = await readMarkdown(path, root);
     if (current.parse.hash !== initialHash) return void send({type: "reload"});
+    stylesheets = getStylesheets(current.parse);
     attachmentWatcher = await FileWatchers.of(root, path, getWatchPaths(current.parse), refreshAttachment);
     markdownWatcher = watch(join(root, path), watcher);
   }