Dash scaffolding

Author: mbostock

src/build.ts

@@ -20,6 +20,7 @@ const EXTRA_FILES = new Map([["node_modules/@observablehq/runtime/dist/runtime.j
 const CLIENT_BUNDLES: [entry: string, name: string][] = [
   ["./src/client/index.js", "client.js"],
   ["./src/client/stdlib.js", "stdlib.js"],
+  ["./src/client/stdlib/dash.js", "stdlib/dash.js"],
   ["./src/client/stdlib/dot.js", "stdlib/dot.js"],
   ["./src/client/stdlib/duckdb.js", "stdlib/duckdb.js"],
   ["./src/client/stdlib/mermaid.js", "stdlib/mermaid.js"],

src/client/stdlib/dash.ts

@@ -0,0 +1 @@
+export * from "./dash/resize.js";

src/client/stdlib/dash/resize.ts

@@ -0,0 +1,22 @@
+// TODO Automatically disconnect the observer when the returned DIV is detached.
+export function resize(run: (width: number, height: number) => Node, invalidation?: Promise<void>): Node {
+  const div = document.createElement("div");
+  div.style.cssText = "position: relative; height: 100%;";
+  const observer = new ResizeObserver(([entry]) => {
+    const {width, height} = entry.contentRect;
+    while (div.lastChild) div.lastChild.remove();
+    if (width > 0) {
+      const child = run(width, height);
+      // prevent feedback loop if height is used
+      if (run.length !== 1 && isElement(child)) child.style.position = "absolute";
+      div.append(child);
+    }
+  });
+  observer.observe(div);
+  invalidation?.then(() => observer.disconnect());
+  return div;
+}
+
+function isElement(node: Node): node is HTMLElement {
+  return node.nodeType === 1;
+}

src/client/stdlib/recommendedLibraries.js

@@ -2,6 +2,7 @@ export const _ = () => import("npm:lodash").then((lodash) => lodash.default);
 export const aq = () => import("npm:arquero");
 export const Arrow = () => import("npm:apache-arrow");
 export const d3 = () => import("npm:d3");
+export const Dash = () => import("observablehq:stdlib/dash");
 export const dot = () => import("observablehq:stdlib/dot").then((dot) => dot.default);
 export const duckdb = () => import("npm:@duckdb/duckdb-wasm");
 export const DuckDBClient = () => import("observablehq:stdlib/duckdb").then((duckdb) => duckdb.DuckDBClient);

src/javascript/imports.ts

@@ -311,6 +311,8 @@ export function createImportResolver(root: string, base: "." | "_import" = "."):
       ? resolveBuiltin(base, path, "runtime.js")
       : specifier === "npm:@observablehq/stdlib"
       ? resolveBuiltin(base, path, "stdlib.js")
+      : specifier === "npm:@observablehq/dash"
+      ? resolveBuiltin(base, path, "stdlib/dash.js") // TODO publish to npm
       : specifier === "npm:@observablehq/dot"
       ? resolveBuiltin(base, path, "stdlib/dot.js") // TODO publish to npm
       : specifier === "npm:@observablehq/duckdb"

src/rollup.ts

@@ -1,3 +1,4 @@
+import {existsSync} from "node:fs";
 import {dirname, join, relative} from "node:path";
 import {cwd} from "node:process";
 import {fileURLToPath} from "node:url";
@@ -86,5 +87,7 @@ function importMetaResolve(): Plugin {
 }
 
 export function getClientPath(entry: string): string {
-  return relative(cwd(), join(dirname(fileURLToPath(import.meta.url)), "..", entry));
+  const path = relative(cwd(), join(dirname(fileURLToPath(import.meta.url)), "..", entry));
+  if (path.endsWith(".js") && !existsSync(path) && existsSync(path.slice(0, -2) + "ts")) return path.slice(0, -2) + "ts";
+  return path;
 }

test/deploy-test.ts

@@ -18,6 +18,7 @@ const EXTRA_FILES: string[] = [
   "_observablehq/client.js",
   "_observablehq/runtime.js",
   "_observablehq/stdlib.js",
+  "_observablehq/stdlib/dash.js",
   "_observablehq/stdlib/dot.js",
   "_observablehq/stdlib/duckdb.js",
   "_observablehq/stdlib/mermaid.js",