esbuild client (#293)

* esbuild client

* remove as any

* typescript width

* esbuild peer dependency

Author: mbostock

package.json

@@ -45,9 +45,9 @@
   },
   "dependencies": {
     "@observablehq/runtime": "^5.9.4",
-    "@rollup/plugin-terser": "^0.4.4",
     "acorn": "^8.11.2",
     "acorn-walk": "^8.3.0",
+    "esbuild": "^0.19.8",
     "fast-array-diff": "^1.1.0",
     "fast-deep-equal": "^3.1.3",
     "gray-matter": "^4.0.3",
@@ -60,6 +60,7 @@
     "mime": "^3.0.0",
     "open": "^9.1.0",
     "rollup": "^4.6.0",
+    "rollup-plugin-esbuild": "^6.1.0",
     "send": "^0.18.0",
     "tar-stream": "^3.1.6",
     "tsx": "^3.13.0",

src/client/toc.js renamed to src/client/toc.ts

@@ -1,22 +1,22 @@
-const toc = document.querySelector("#observablehq-toc");
+const toc = document.querySelector<HTMLElement>("#observablehq-toc");
 if (toc) {
   const highlight = toc.appendChild(document.createElement("div"));
   highlight.classList.add("observablehq-secondary-link-highlight");
-  const headings = Array.from(document.querySelectorAll(toc.dataset.selector)).reverse();
-  const links = toc.querySelectorAll(".observablehq-secondary-link");
-  const relink = () => {
+  const headings = Array.from(document.querySelectorAll<HTMLElement>(toc.dataset.selector!)).reverse();
+  const links = toc.querySelectorAll<HTMLElement>(".observablehq-secondary-link");
+  const relink = (): HTMLElement | undefined => {
     for (const link of links) {
       link.classList.remove("observablehq-secondary-link-active");
     }
     // If there’s a location.hash, highlight that if it’s at the top of the viewport.
     if (location.hash) {
       for (const heading of headings) {
-        const hash = heading.querySelector("a[href]")?.hash;
+        const hash = heading.querySelector<HTMLAnchorElement>("a[href]")?.hash;
         if (hash === location.hash) {
           const top = heading.getBoundingClientRect().top;
           if (0 < top && top < 40) {
             for (const link of links) {
-              if (link.querySelector("a[href]")?.hash === hash) {
+              if (link.querySelector<HTMLAnchorElement>("a[href]")?.hash === hash) {
                 link.classList.add("observablehq-secondary-link-active");
                 return link;
               }
@@ -30,9 +30,9 @@ if (toc) {
     // Otherwise, highlight the last one that’s above the center of the viewport.
     for (const heading of headings) {
       if (heading.getBoundingClientRect().top >= innerHeight * 0.5) continue;
-      const hash = heading.querySelector("a[href]")?.hash;
+      const hash = heading.querySelector<HTMLAnchorElement>("a[href]")?.hash;
       for (const link of links) {
-        if (link.querySelector("a[href]")?.hash === hash) {
+        if (link.querySelector<HTMLAnchorElement>("a[href]")?.hash === hash) {
           link.classList.add("observablehq-secondary-link-active");
           return link;
         }
@@ -42,7 +42,7 @@ if (toc) {
   };
   const intersected = () => {
     const link = relink();
-    highlight.style = link ? `top: ${link.offsetTop}px; height: ${link.offsetHeight}px;` : "";
+    highlight.style.cssText = link ? `top: ${link.offsetTop}px; height: ${link.offsetHeight}px;` : "";
   };
   const observer = new IntersectionObserver(intersected, {rootMargin: "0px 0px -50% 0px"});
   for (const heading of headings) observer.observe(heading);

src/client/width.js renamed to src/client/width.ts

@@ -1,13 +1,13 @@
 // Override the width definition to use main instead of body (and also use a
 // ResizeObserver instead of listening for window resize events).
 export function width({Generators}) {
-  return Generators.observe((notify) => {
-    let width;
+  return Generators.observe((notify: (width: number) => void) => {
+    let width: number;
     const observer = new ResizeObserver(([entry]) => {
       const w = entry.contentRect.width;
       if (w !== width) notify((width = w));
     });
-    observer.observe(document.querySelector("main"));
+    observer.observe(document.querySelector<HTMLElement>("main")!);
     return () => observer.disconnect();
   });
 }

src/rollup.ts

@@ -1,8 +1,8 @@
 import {dirname, join, relative} from "node:path";
 import {cwd} from "node:process";
 import {fileURLToPath} from "node:url";
-import terser from "@rollup/plugin-terser";
 import {type OutputChunk, rollup} from "rollup";
+import esbuild from "rollup-plugin-esbuild";
 
 export async function rollupClient(clientPath = getClientPath(), {minify = false} = {}): Promise<string> {
   const bundle = await rollup({
@@ -16,11 +16,12 @@ export async function rollupClient(clientPath = getClientPath(), {minify = false
             ? {id: `https://cdn.jsdelivr.net/npm/${specifier.slice("npm:".length)}/+esm`}
             : null;
         }
-      }
+      },
+      esbuild({minify})
     ]
   });
   try {
-    const output = await bundle.generate({format: "es", plugins: minify ? [(terser as any)()] : []});
+    const output = await bundle.generate({format: "es"});
     return output.output.find((o): o is OutputChunk => o.type === "chunk")!.code; // XXX
   } finally {
     await bundle.close();