@observablehq/notebook-kit 1.0.1 → 1.1.0-rc.10

package/dist/src/vite/observable.d.ts

@@ -1,12 +1,31 @@
-import type { PluginOption } from "vite";
+import type { PluginOption, IndexHtmlTransformContext } from "vite";
+import type { Notebook } from "../lib/notebook.js";
+/**
+ * A function which performs a per-page transformation of the template HTML.
+ *
+ * @param source The source of the template (typically HTML).
+ * @param context The Vite plugin context.
+ * @returns The transformed template source HTML.
+ */
+export type TemplateTransform = (source: string, context: IndexHtmlTransformContext) => string | Promise<string>;
+/**
+ * A function which transforms the parsed notebook.
+ *
+ * @param notebook The current (parsed) notebook.
+ * @param context The Vite plugin context.
+ * @returns The transformed notebook.
+ */
+export type NotebookTransform = (notebook: Notebook, context: IndexHtmlTransformContext) => Notebook | Promise<Notebook>;
 export interface ObservableOptions {
-    /** The global window, for the default parser and serializer implementations. */
-    window?: Pick<typeof globalThis, "DOMParser" | "XMLSerializer">;
+    /** The global window, for the default parser implementations. */
+    window?: Pick<typeof globalThis, "DOMParser">;
     /** The parser implementation; defaults to `new window.DOMParser()`. */
     parser?: DOMParser;
-    /** The serializer implementation; defaults to `new window.XMLSerializer()`. */
-    serializer?: XMLSerializer;
     /** The path to the page template; defaults to the default template. */
     template?: string;
+    /** An optional function which transforms the template HTML for the current page. */
+    transformTemplate?: TemplateTransform;
+    /** An optional function which transforms the notebook for the current page. */
+    transformNotebook?: NotebookTransform;
 }
-export declare function observable({ window, parser, serializer, template }?: ObservableOptions): PluginOption;
+export declare function observable({ window, parser, template, transformTemplate, transformNotebook }?: ObservableOptions): PluginOption;

package/dist/src/vite/observable.js

@@ -1,8 +1,10 @@
 import { existsSync } from "node:fs";
-import { readFile } from "node:fs/promises";
+import { mkdir, readFile, writeFile } from "node:fs/promises";
 import { dirname, join, resolve } from "node:path";
+import { relative } from "node:path/posix";
 import { fileURLToPath } from "node:url";
 import { JSDOM } from "jsdom";
+import { getDatabase, getDatabaseConfig, getQueryCachePath } from "../databases/index.js";
 import { deserialize } from "../lib/serialize.js";
 import { Sourcemap } from "../javascript/sourcemap.js";
 import { transpile } from "../javascript/transpile.js";
@@ -10,7 +12,7 @@ import { parseTemplate } from "../javascript/template.js";
 import { collectAssets } from "../runtime/stdlib/assets.js";
 import { highlight } from "../runtime/stdlib/highlight.js";
 import { MarkdownRenderer } from "../runtime/stdlib/md.js";
-export function observable({ window = new JSDOM().window, parser = new window.DOMParser(), serializer = new window.XMLSerializer(), template = fileURLToPath(import.meta.resolve("../templates/default.html")) } = {}) {
+export function observable({ window = new JSDOM().window, parser = new window.DOMParser(), template = fileURLToPath(import.meta.resolve("../templates/default.html")), transformTemplate = (template) => template, transformNotebook = (notebook) => notebook } = {}) {
     return {
         name: "observable",
         buildStart() {
@@ -24,9 +26,9 @@ export function observable({ window = new JSDOM().window, parser = new window.DO
         transformIndexHtml: {
             order: "pre",
             async handler(input, context) {
-                const notebook = deserialize(input, { parser });
-                const tsource = await readFile(template, "utf-8");
-                const document = parser.parseFromString(tsource, "text/html");
+                const notebook = await transformNotebook(deserialize(input, { parser }), context);
+                const templateHtml = await transformTemplate(await readFile(template, "utf-8"), context);
+                const document = parser.parseFromString(templateHtml, "text/html");
                 const statics = new Set();
                 const assets = new Set();
                 const md = MarkdownRenderer({ document });
@@ -41,26 +43,47 @@ export function observable({ window = new JSDOM().window, parser = new window.DO
                 let cells = document.querySelector("main");
                 cells ?? (cells = document.body.appendChild(document.createElement("main")));
                 for (const cell of notebook.cells) {
-                    const { id, mode, pinned, value } = cell;
+                    const { id, mode, pinned, hidden, value } = cell;
                     const contents = document.createDocumentFragment();
                     const div = contents.appendChild(document.createElement("div"));
                     div.id = `cell-${id}`;
                     div.className = "observablehq observablehq--cell";
-                    if (mode === "md") {
+                    if (mode === "md" && !hidden) {
                         const template = parseTemplate(value);
-                        if (!template.expressions.length)
+                        if (!template.expressions.length && !cell.output)
                             statics.add(cell);
-                        const content = md([stripExpressions(template, value)]);
+                        const content = md([unescapeDollarBackslashCurly(stripExpressions(template, value))]);
                         const codes = content.querySelectorAll("code[class^=language-]");
                         await Promise.all(Array.from(codes, highlight));
                         div.appendChild(content);
                     }
-                    else if (mode === "html") {
+                    else if (mode === "html" && !hidden) {
                         const template = parseTemplate(value);
-                        if (!template.expressions.length)
+                        if (!template.expressions.length && !cell.output)
                             statics.add(cell);
                         div.innerHTML = stripExpressions(template, value);
                     }
+                    else if (mode === "sql" && cell.database && !cell.database.startsWith("var:")) {
+                        const template = parseTemplate(value);
+                        if (!template.expressions.length) {
+                            const dir = dirname(context.filename);
+                            const cachePath = await getQueryCachePath(context.filename, cell.database, [value]);
+                            if (!existsSync(cachePath)) {
+                                const config = await getDatabaseConfig(context.filename, cell.database);
+                                try {
+                                    const database = await getDatabase(config, { cwd: dir });
+                                    const results = await database.call(null, [value]);
+                                    await mkdir(dirname(cachePath), { recursive: true });
+                                    await writeFile(cachePath, JSON.stringify(results));
+                                }
+                                catch (error) {
+                                    console.error(error);
+                                }
+                            }
+                            cell.mode = "js";
+                            cell.value = `FileAttachment(${JSON.stringify(relative(dir, cachePath))}).json().then(DatabaseClient.revive)${hidden ? "" : `.then(Inputs.table)${cell.output ? ".then(view)" : ""}`}`;
+                        }
+                    }
                     collectAssets(assets, div);
                     if (pinned) {
                         const pre = contents.appendChild(document.createElement("pre"));
@@ -73,15 +96,16 @@ export function observable({ window = new JSDOM().window, parser = new window.DO
                 }
                 // Don’t error if assets are missing (matching Vite’s behavior).
                 filterMissingAssets(assets, dirname(context.filename));
-                const output = serializer.serializeToString(document);
+                const output = document.documentElement.outerHTML;
                 const i = output.indexOf("</body>");
                 if (!(i >= 0))
                     throw new Error("body not found");
-                return (output.slice(0, i) +
+                return (`<!doctype html>` +
+                    output.slice(0, i) +
                     `<style type="text/css">
 @import url("observable:styles/theme-${notebook.theme}.css");
 </style><script type="module">
-import {define} from "observable:runtime/define";${Array.from(assets)
+import {define} from "observable:runtime";${Array.from(assets)
                         .map((asset, i) => `
 import asset${i + 1} from ${JSON.stringify(`${asset}?url`)};`)
                         .join("")}${assets.size > 0
@@ -96,7 +120,7 @@ ${Array.from(assets)
 ${notebook.cells
                         .filter((cell) => !statics.has(cell))
                         .map((cell) => {
-                        const transpiled = transpile(cell.value, cell.mode, { resolveFiles: true });
+                        const transpiled = transpile(cell, { resolveFiles: true });
                         return `
 define(
   {
@@ -154,6 +178,9 @@ function stripExpressions(template, input) {
     }
     return String(source);
 }
+function unescapeDollarBackslashCurly(input) {
+    return input.replace(/(\$\\*)\\({)/g, "$1$2");
+}
 /** Returns true if the specified character is preceded by an equals sign, ignoring whitespace. */
 function hasPrecedingEquals(input, index) {
     let i = index - 1;

package/package.json

@@ -5,7 +5,7 @@
     "type": "git",
     "url": "git+https://github.com/observablehq/notebook-kit.git"
   },
-  "version": "1.0.1",
+  "version": "1.1.0-rc.10",
   "type": "module",
   "scripts": {
     "test": "vitest",
@@ -13,7 +13,7 @@
     "lint": "tsc --noEmit && eslint bin src types",
     "notebooks": "tsx bin/notebooks.ts",
     "download": "tsx bin/notebooks.ts download",
-    "docs:preview": "tsx --watch bin/notebooks.ts preview --root docs --template docs/observable.tmpl",
+    "docs:preview": "tsx --watch bin/notebooks.ts preview --base /notebook-kit/ --root docs --template docs/observable.tmpl",
     "docs:build": "tsx bin/notebooks.ts build --root docs --template docs/observable.tmpl -- $(find docs -path 'docs/.observable' -prune -o -name '*.html' -print)"
   },
   "bin": {
@@ -27,6 +27,10 @@
       "types": "./dist/src/index.d.ts",
       "import": "./dist/src/index.js"
     },
+    "./databases": {
+      "types": "./dist/src/databases/index.d.ts",
+      "import": "./dist/src/databases/index.js"
+    },
     "./runtime": {
       "types": "./dist/src/runtime/index.d.ts",
       "import": "./dist/src/runtime/index.js"
@@ -59,15 +63,40 @@
     "vite": "^7.0.0"
   },
   "devDependencies": {
+    "@duckdb/node-api": "^1.3.2-alpha.26",
     "@eslint/js": "^9.29.0",
+    "@types/better-sqlite3": "^7.6.13",
     "@types/jsdom": "^21.1.7",
     "@types/markdown-it": "^14.1.2",
+    "better-sqlite3": "^12.2.0",
     "eslint": "^9.29.0",
     "globals": "^16.2.0",
     "htl": "^0.3.1",
+    "postgres": "^3.4.7",
+    "snowflake-sdk": "^2.1.3",
     "tsx": "^4.20.3",
     "typescript": "^5.8.3",
     "typescript-eslint": "^8.35.0",
     "vitest": "^3.2.4"
+  },
+  "peerDependencies": {
+    "@duckdb/node-api": "^1.3.2-alpha.26",
+    "better-sqlite3": "^12.2.0",
+    "postgres": "^3.4.7",
+    "snowflake-sdk": "^2.1.3"
+  },
+  "peerDependenciesMeta": {
+    "@duckdb/node-api": {
+      "optional": true
+    },
+    "better-sqlite3": {
+      "optional": true
+    },
+    "postgres": {
+      "optional": true
+    },
+    "snowflake-sdk": {
+      "optional": true
+    }
   }
 }

package/dist/src/runtime/stdlib/sql.d.ts

@@ -1,5 +0,0 @@
-type Template = (template: TemplateStringsArray, ...values: unknown[]) => Promise<unknown>;
-export declare function __sql(db: {
-    sql: Template;
-}, render: (data: unknown) => unknown): Template;
-export {};

package/dist/src/runtime/stdlib/sql.js

@@ -1,5 +0,0 @@
-export function __sql(db, render) {
-    return (template, ...values) => {
-        return db.sql.call(db, template, ...values).then(render);
-    };
-}