@observablehq/notebook-kit 1.2.0 → 1.3.0-rc.1

package/dist/package.json

@@ -5,7 +5,7 @@
         "type": "git",
         "url": "git+https://github.com/observablehq/notebook-kit.git"
     },
-    "version": "1.2.0",
+    "version": "1.3.0-rc.1",
     "type": "module",
     "scripts": {
         "test": "vitest",

package/dist/src/databases/index.js

@@ -2,7 +2,7 @@ import { createReadStream } from "node:fs";
 import { dirname, join } from "node:path";
 import { json } from "node:stream/consumers";
 import { isEnoent } from "../lib/error.js";
-import { hash as getQueryHash, nameHash as getNameHash } from "../lib/hash.js";
+import { hash, nameHash } from "../lib/hash.js";
 export async function getDatabaseConfig(sourcePath, databaseName) {
     const sourceDir = dirname(sourcePath);
     const configPath = join(sourceDir, ".observable", "databases.json");
@@ -60,6 +60,6 @@ export async function getReplacer(config) {
 }
 export async function getQueryCachePath(sourcePath, databaseName, strings, ...params) {
     const sourceDir = dirname(sourcePath);
-    const cacheName = `${await getNameHash(databaseName)}-${await getQueryHash(strings, ...params)}.json`;
+    const cacheName = `${await nameHash(databaseName)}-${await hash(strings, ...params)}.json`;
     return join(sourceDir, ".observable", "cache", cacheName);
 }

package/dist/src/interpreters/index.d.ts

@@ -0,0 +1,2 @@
+import type { Cell } from "../lib/notebook.js";
+export declare function getInterpreterCachePath(sourcePath: string, interpreter: string, format: Cell["format"], input: string): Promise<string>;

package/dist/src/interpreters/index.js

@@ -0,0 +1,8 @@
+import { dirname, join } from "node:path";
+import { nameHash, stringHash } from "../lib/hash.js";
+import { getInterpreterExtension } from "../lib/interpreters.js";
+export async function getInterpreterCachePath(sourcePath, interpreter, format, input) {
+    const sourceDir = dirname(sourcePath);
+    const cacheName = `${await nameHash(interpreter)}-${await stringHash(input)}${getInterpreterExtension(format)}`; // TODO avoid conflict with database cache?
+    return join(sourceDir, ".observable", "cache", cacheName);
+}

package/dist/src/javascript/template.js

@@ -1,4 +1,5 @@
 import { TokContext, tokTypes as tt, Parser } from "acorn";
+import { getInterpreterMethod, isInterpreter } from "../lib/interpreters.js";
 import { acornOptions } from "./parse.js";
 import { Sourcemap } from "./sourcemap.js";
 const CODE_DOLLAR = 36;
@@ -74,21 +75,40 @@ export function transpileTemplate(input, tag = "", raw = false) {
     if (typeof input !== "string") {
         cell = input;
         input = cell.value;
-        tag = cell.mode === "tex" ? "tex.block" : cell.mode === "sql" ? getSqlTag(cell) : cell.mode;
-        raw = cell.mode !== "md";
+        tag = getTag(cell);
+        raw = getRaw(cell);
     }
     if (!input)
         return input;
     const source = new Sourcemap(input);
-    const node = parseTemplate(input);
-    (raw ? escapeRawTemplateElements : escapeTemplateElements)(source, node);
+    let node;
+    if (cell && isInterpreter(cell)) {
+        node = { type: "Literal", start: 0, end: input.length };
+        escapeBacktick(source, node);
+        escapeBackslash(source, node);
+        escapeDollarCurly(source, node);
+    }
+    else {
+        const template = parseTemplate(input);
+        (raw ? escapeRawTemplateElements : escapeTemplateElements)(source, template);
+        node = template;
+    }
     source.insertLeft(node.start, "`");
     source.insertRight(node.end, "`");
     source.insertLeft(node.start, tag);
-    let output = String(source);
-    if (cell?.mode === "sql" && !cell.hidden)
-        output += ".then(Inputs.table)";
-    return output;
+    return String(source) + (cell ? getSuffix(cell) : "");
+}
+function getRaw(cell) {
+    return cell.mode !== "md";
+}
+function getTag(cell) {
+    return cell.mode === "tex"
+        ? "tex.block"
+        : cell.mode === "sql"
+            ? getSqlTag(cell)
+            : isInterpreter(cell)
+                ? getInterpreterTag(cell)
+                : cell.mode;
 }
 function getSqlTag(cell) {
     const { id, database = "var:db", since } = cell;
@@ -96,10 +116,25 @@ function getSqlTag(cell) {
         ? `${database.slice("var:".length)}.sql`
         : `DatabaseClient(${JSON.stringify(database)}, {id: ${id}${since === undefined ? "" : `, since: ${JSON.stringify(since)}`}}).sql`;
 }
+function getInterpreterTag(cell) {
+    const { id, mode, format, since } = cell;
+    return `Interpreter(${JSON.stringify(mode)}, {id: ${id}${format === undefined ? "" : `, format: ${JSON.stringify(format)}`}${since === undefined ? "" : `, since: ${JSON.stringify(since)}`}}).run(`;
+}
+function getSuffix(cell) {
+    return cell.mode === "sql" && !cell.hidden
+        ? ".then(Inputs.table)"
+        : isInterpreter(cell)
+            ? getInterpreterSuffix(cell)
+            : "";
+}
+function getInterpreterSuffix(cell) {
+    const method = getInterpreterMethod(cell.format);
+    return method ? `).then((file) => file${method})` : "";
+}
 function escapeTemplateElements(source, node) {
     for (const quasi of node.quasis) {
         escapeBacktick(source, quasi);
-        escapeBackslash(source, quasi);
+        escapeLiteralBackslash(source, quasi);
     }
 }
 function escapeRawTemplateElements(source, node) {
@@ -108,6 +143,7 @@ function escapeRawTemplateElements(source, node) {
     }
     interpolateTerminalBackslash(source);
 }
+/** Escapes any backtick. */
 function escapeBacktick(source, { start, end }) {
     const { input } = source;
     for (let i = start; i < end; ++i) {
@@ -116,7 +152,17 @@ function escapeBacktick(source, { start, end }) {
         }
     }
 }
+/** Escapes any backslash. */
 function escapeBackslash(source, { start, end }) {
+    const { input } = source;
+    for (let i = start; i < end; ++i) {
+        if (input.charCodeAt(i) === CODE_BACKSLASH) {
+            source.insertRight(i, "\\");
+        }
+    }
+}
+/** Escapes a backslash, unless it is used to escape a dollar-curly such as "$\{" or "\${". */
+function escapeLiteralBackslash(source, { start, end }) {
     const { input } = source;
     let afterDollar = false;
     let oddBackslashes = false;
@@ -155,3 +201,12 @@ function interpolateTerminalBackslash(source) {
     if (oddBackslashes)
         source.replaceRight(input.length - 1, input.length, "${'\\\\'}");
 }
+/** Escapes a dollar curly, from "${…}" to "$\{…}". */
+function escapeDollarCurly(source, { start, end }) {
+    const { input } = source;
+    for (let i = start; i < end; ++i) {
+        if (input.charCodeAt(i) !== CODE_BRACEL || input.charCodeAt(i - 1) !== CODE_DOLLAR)
+            continue;
+        source.insertRight(i, "\\");
+    }
+}

package/dist/src/javascript/template.test.js

@@ -1,5 +1,15 @@
 import { expect, it } from "vitest";
 import { parseTemplate, transpileTemplate } from "./template.js";
+import { toCell } from "../lib/notebook.js";
+function md(value) {
+    return transpileTemplate(toCell({ id: 1, mode: "md", value }));
+}
+function html(value) {
+    return transpileTemplate(toCell({ id: 1, mode: "html", value }));
+}
+function node(value) {
+    return transpileTemplate(toCell({ id: 1, mode: "node", value }));
+}
 it("parses a simple template", () => {
     expect(parseTemplate(`Hello, world!`)).toMatchSnapshot();
 });
@@ -15,18 +25,36 @@ it("parses a template with backquotes", () => {
 it("parses a template with backslashes", () => {
     expect(parseTemplate(`Hello, \\world\\!`)).toMatchSnapshot();
 });
-it("transpiles a simple template", () => {
-    expect(transpileTemplate(`Hello, world!`)).toMatchSnapshot();
+it("transpiles a simple markdown template", () => {
+    expect(md(`Hello, world!`)).toMatchSnapshot();
 });
-it("transpiles an empty template", () => {
-    expect(transpileTemplate(``)).toMatchSnapshot();
+it("transpiles an empty markdown template", () => {
+    expect(md(``)).toMatchSnapshot();
 });
-it("transpiles a template with an interpolated expression", () => {
-    expect(transpileTemplate(`Hello, $\{"world"}!`)).toMatchSnapshot();
+it("transpiles a markdown template with an interpolated expression", () => {
+    expect(md(`Hello, $\{"world"}!`)).toMatchSnapshot();
 });
-it("transpiles a template with backquotes", () => {
-    expect(transpileTemplate(`Hello, \`world\`!`)).toMatchSnapshot();
+it("transpiles a markdown template with backquotes", () => {
+    expect(md(`Hello, \`world\`!`)).toMatchSnapshot();
 });
-it("transpiles a template with backslashes", () => {
-    expect(transpileTemplate(`Hello, \\world\\!`)).toMatchSnapshot();
+it("transpiles a markdown template with backslashes", () => {
+    expect(md(`Hello, \\world\\!`)).toMatchSnapshot();
+});
+it("transpiles a simple html template", () => {
+    expect(html(`Hello, world!`)).toMatchSnapshot();
+});
+it("transpiles an empty html template", () => {
+    expect(html(``)).toMatchSnapshot();
+});
+it("transpiles a html template with an interpolated expression", () => {
+    expect(html(`Hello, $\{"world"}!`)).toMatchSnapshot();
+});
+it("transpiles a html template with backquotes", () => {
+    expect(html(`Hello, \`world\`!`)).toMatchSnapshot();
+});
+it("transpiles a html template with backslashes", () => {
+    expect(html(`Hello, \\world\\!`)).toMatchSnapshot();
+});
+it("transpiles a node template with backslashes", () => {
+    expect(node(`Hello, \\world\\!`)).toMatchSnapshot();
 });

package/dist/src/javascript/transpile.test.js

@@ -43,3 +43,10 @@ it("transpiles import.meta.resolve", () => {
     expect(transpile('import.meta.resolve("./test")', "js", { resolveLocalImports: true })).toMatchSnapshot();
     expect(transpile('import.meta.resolve("./test")', "js", { resolveLocalImports: false })).toMatchSnapshot();
 });
+it("transpiles node cells", () => {
+    expect(transpile("process.stdout.write(`Node ${process.version}`);", "node")).toMatchSnapshot();
+    expect(transpile("process.stdout.write(`Node \\${process.version}`);", "node")).toMatchSnapshot();
+    expect(transpile("process.stdout.write(`Node \\\\${process.version}`);", "node")).toMatchSnapshot();
+    expect(transpile("process.stdout.write(`Node $\\{process.version}`);", "node")).toMatchSnapshot();
+    expect(transpile("process.stdout.write(`Node \\$\\{process.version}`);", "node")).toMatchSnapshot();
+});

package/dist/src/lib/hash.d.ts

@@ -1,2 +1,3 @@
 export declare function hash(strings: readonly string[], ...params: unknown[]): Promise<string>;
+export declare function stringHash(string: string): Promise<string>;
 export declare function nameHash(name: string): Promise<string>;

package/dist/src/lib/hash.js

@@ -10,6 +10,9 @@ function base36(int, length) {
 export async function hash(strings, ...params) {
     return base36(await sha256(JSON.stringify([strings, ...params])), 16);
 }
+export async function stringHash(string) {
+    return base36(await sha256(string), 16);
+}
 export async function nameHash(name) {
     return /^[\w-]+$/.test(name)
         ? name

package/dist/src/lib/interpreters.d.ts

@@ -0,0 +1,4 @@
+import type { Cell } from "./notebook.js";
+export declare function isInterpreter(cell: Cell): boolean;
+export declare function getInterpreterExtension(format: Cell["format"]): string;
+export declare function getInterpreterMethod(format: Cell["format"]): string;

package/dist/src/lib/interpreters.js

@@ -0,0 +1,47 @@
+export function isInterpreter(cell) {
+    return cell.mode === "node";
+}
+export function getInterpreterExtension(format) {
+    switch (format) {
+        case "html":
+        case "text":
+            return ".txt";
+        case "jpeg":
+            return ".jpg";
+        case "json":
+        case "arrow":
+        case "parquet":
+        case "csv":
+        case "tsv":
+        case "png":
+        case "gif":
+        case "webp":
+            return `.${format}`;
+        default:
+            return ".bin";
+    }
+}
+export function getInterpreterMethod(format) {
+    switch (format) {
+        case "arrow":
+        case "parquet":
+        case "json":
+        case "blob":
+        case "text":
+            return `.${format}()`;
+        case "html":
+            return `.text().then((text) => html({raw: [text]}))`;
+        case "buffer":
+            return ".arrayBuffer()";
+        case "jpeg":
+        case "png":
+        case "gif":
+        case "webp":
+            return ".image()";
+        case "csv":
+        case "tsv":
+            return `.${format}({typed: true})`;
+        default:
+            return "";
+    }
+}

package/dist/src/lib/notebook.d.ts

@@ -21,13 +21,15 @@ export interface CellSpec {
     /** the committed cell value; defaults to empty */
     value?: string;
     /** the mode; affects how the value is evaluated; defaults to js */
-    mode?: "js" | "ojs" | "md" | "html" | "tex" | "dot" | "sql";
+    mode?: "js" | "ojs" | "md" | "html" | "tex" | "dot" | "sql" | "node";
     /** if true, the editor will stay open when not focused; defaults to false */
     pinned?: boolean;
     /** if true, implicit display will be suppressed; defaults to false */
     hidden?: boolean;
     /** if present, exposes the cell’s value to the rest of the notebook */
     output?: string;
+    /** for data loader cells, how the data is represented */
+    format?: "text" | "blob" | "buffer" | "json" | "csv" | "tsv" | "jpeg" | "gif" | "webp" | "png" | "arrow" | "parquet" | "html";
     /** for SQL cells, the database to query; use var:<name> to refer to a variable */
     database?: string;
     /** for SQL cells, the oldest allowable age of the cached query result */
@@ -41,5 +43,5 @@ export interface Cell extends CellSpec {
     since?: Date;
 }
 export declare function toNotebook({ cells, title, theme, readOnly }: NotebookSpec): Notebook;
-export declare function toCell({ id, value, mode, pinned, hidden, output, database, since }: CellSpec): Cell;
+export declare function toCell({ id, value, mode, pinned, hidden, output, format, database, since }: CellSpec): Cell;
 export declare function defaultPinned(mode: Cell["mode"]): boolean;

package/dist/src/lib/notebook.js

@@ -6,7 +6,7 @@ export function toNotebook({ cells = [], title = "Untitled", theme = "air", read
         readOnly
     };
 }
-export function toCell({ id, value = "", mode = "js", pinned = defaultPinned(mode), hidden = false, output, database = mode === "sql" ? "var:db" : undefined, since }) {
+export function toCell({ id, value = "", mode = "js", pinned = defaultPinned(mode), hidden = false, output, format = mode === "node" ? "buffer" : undefined, database = mode === "sql" ? "var:db" : undefined, since }) {
     return {
         id,
         value,
@@ -14,6 +14,7 @@ export function toCell({ id, value = "", mode = "js", pinned = defaultPinned(mod
         pinned,
         hidden,
         output,
+        format: mode === "node" ? format : undefined,
         database: mode === "sql" ? database : undefined,
         since: since !== undefined ? asDate(since) : undefined
     };
@@ -22,5 +23,5 @@ function asDate(date) {
     return date instanceof Date ? date : new Date(date);
 }
 export function defaultPinned(mode) {
-    return mode === "js" || mode === "sql" || mode === "ojs";
+    return mode === "js" || mode === "sql" || mode === "node" || mode === "ojs";
 }

package/dist/src/lib/notebook.test.js

@@ -15,6 +15,7 @@ test("converts a cell spec to a cell", () => {
         mode: "js",
         pinned: true,
         hidden: false,
+        format: undefined,
         output: undefined,
         database: undefined,
         since: undefined
@@ -27,6 +28,7 @@ test("computes an appropriate default pinned based on the cell mode", () => {
         mode: "md",
         pinned: false,
         hidden: false,
+        format: undefined,
         output: undefined,
         database: undefined,
         since: undefined

package/dist/src/lib/serialize.js

@@ -23,6 +23,8 @@ export function serialize(notebook, { document = globalThis.document } = {}) {
             _cell.setAttribute("database", cell.database);
         if (cell.output)
             _cell.setAttribute("output", cell.output);
+        if (cell.format)
+            _cell.setAttribute("format", cell.format);
         _notebook.appendChild(_cell);
     }
     _notebook.appendChild(document.createTextNode("\n"));
@@ -47,9 +49,10 @@ export function deserialize(data, { parser = new DOMParser() } = {}) {
         const value = dedent(cell.textContent?.replace(/<\\(?=\\*\/script(\s|>))/gi, "<") ?? "");
         const pinned = cell.hasAttribute("pinned");
         const hidden = cell.hasAttribute("hidden");
+        const format = deserializeFormat(cell.getAttribute("format"));
         const output = cell.getAttribute("output") ?? undefined;
         const database = cell.getAttribute("database") ?? undefined;
-        return { id, mode, value, pinned, hidden, output, database };
+        return { id, mode, value, pinned, hidden, format, output, database };
     });
     return toNotebook({ title, theme, readOnly, cells });
 }
@@ -65,6 +68,8 @@ function serializeMode(mode) {
             return "application/sql";
         case "dot":
             return "text/vnd.graphviz";
+        case "node":
+            return "application/vnd.node.javascript";
         case "ojs":
             return "application/vnd.observable.javascript";
         default:
@@ -83,12 +88,32 @@ function deserializeMode(mode) {
             return "sql";
         case "text/vnd.graphviz":
             return "dot";
+        case "application/vnd.node.javascript":
+            return "node";
         case "application/vnd.observable.javascript":
             return "ojs";
         default:
             return "js";
     }
 }
+function deserializeFormat(format) {
+    switch (format) {
+        case "text":
+        case "blob":
+        case "buffer":
+        case "json":
+        case "csv":
+        case "tsv":
+        case "jpeg":
+        case "png":
+        case "webp":
+        case "gif":
+        case "arrow":
+        case "parquet":
+        case "html":
+            return format;
+    }
+}
 function deserializeTheme(theme) {
     return theme ?? "air";
 }

package/dist/src/runtime/index.d.ts

@@ -11,6 +11,8 @@ export type * from "./stdlib/databaseClient.js";
 export { DatabaseClient } from "./stdlib/databaseClient.js";
 export type * from "./stdlib/fileAttachment.js";
 export { FileAttachment, registerFile } from "./stdlib/fileAttachment.js";
+export type * from "./stdlib/interpreter.js";
+export { Interpreter } from "./stdlib/interpreter.js";
 export declare class NotebookRuntime {
     readonly runtime: Runtime & {
         fileAttachments: typeof fileAttachments;
@@ -96,6 +98,15 @@ export declare class NotebookRuntime {
             };
         };
         Generators: () => typeof import("./stdlib/generators/index.js");
+        Interpreter: () => {
+            (name: string, options?: import("./stdlib/interpreter.js").InterpreterOptionsSpec): import("./stdlib/interpreter.js").Interpreter;
+            prototype: {
+                readonly name: string;
+                readonly options: import("./stdlib/interpreter.js").InterpreterOptions;
+                run(input: string): Promise<import("./stdlib/fileAttachment.js").FileAttachment>;
+                cachePath(input: string): Promise<string>;
+            };
+        };
         Mutable: () => typeof import("./stdlib/mutable.js").Mutable;
         DOM: () => typeof import("./stdlib/dom/index.js");
         require: () => typeof import("./stdlib/require.js").require;

package/dist/src/runtime/index.js

@@ -7,6 +7,7 @@ export * from "./inspect.js";
 export * from "./stdlib/index.js";
 export { DatabaseClient } from "./stdlib/databaseClient.js";
 export { FileAttachment, registerFile } from "./stdlib/fileAttachment.js";
+export { Interpreter } from "./stdlib/interpreter.js";
 export class NotebookRuntime {
     constructor(builtins = library) {
         Object.defineProperty(this, "runtime", {

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

@@ -18,7 +18,7 @@ export interface ColumnSchema {
 export interface QueryOptionsSpec {
     /** if present, the id of the cell that owns this database client */
     id?: number;
-    /** if present, query results are at least as fresh as the specified date */
+    /** if present, results are at least as fresh as the specified date */
     since?: Date | string | number;
 }
 export interface QueryOptions extends QueryOptionsSpec {

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

@@ -51,6 +51,7 @@ async function getParser(language) {
         case "js":
         case "ts":
         case "jsx":
+        case "node":
             return (await import("@lezer/javascript")).parser.configure({ dialect: language });
         case "html":
             return (await import("@lezer/html")).parser;

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

@@ -2,6 +2,7 @@ import { DatabaseClient } from "./databaseClient.js";
 import * as DOM from "./dom/index.js";
 import { FileAttachment } from "./fileAttachment.js";
 import * as Generators from "./generators/index.js";
+import { Interpreter } from "./interpreter.js";
 import { Mutable } from "./mutable.js";
 import { Observer } from "./observer.js";
 import { require } from "./require.js";
@@ -86,6 +87,15 @@ export declare const library: {
         };
     };
     Generators: () => typeof Generators;
+    Interpreter: () => {
+        (name: string, options?: import("./interpreter.js").InterpreterOptionsSpec): Interpreter;
+        prototype: {
+            readonly name: string;
+            readonly options: import("./interpreter.js").InterpreterOptions;
+            run(input: string): Promise<FileAttachment>;
+            cachePath(input: string): Promise<string>;
+        };
+    };
     Mutable: () => typeof Mutable;
     DOM: () => typeof DOM;
     require: () => typeof require;

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

@@ -2,6 +2,7 @@ import { DatabaseClient } from "./databaseClient.js";
 import * as DOM from "./dom/index.js";
 import { FileAttachment } from "./fileAttachment.js";
 import * as Generators from "./generators/index.js";
+import { Interpreter } from "./interpreter.js";
 import { Mutable } from "./mutable.js";
 import { Observer } from "./observer.js";
 import * as recommendedLibraries from "./recommendedLibraries.js";
@@ -14,6 +15,7 @@ export const library = {
     DatabaseClient: () => DatabaseClient,
     FileAttachment: () => FileAttachment,
     Generators: () => Generators,
+    Interpreter: () => Interpreter,
     Mutable: () => Mutable,
     DOM: () => DOM, // deprecated!
     require: () => require, // deprecated!

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

@@ -0,0 +1,31 @@
+import type { Cell } from "../../lib/notebook.js";
+import { FileAttachment } from "./fileAttachment.js";
+/** A serializable value that can be interpolated into a query. */
+export type InterpreterParam = any;
+export interface InterpreterOptionsSpec {
+    /** the interpreter format; defaults to "buffer" */
+    format?: Cell["format"];
+    /** if present, the id of the cell that owns this interpreter */
+    id?: number;
+    /** if present, results are at least as fresh as the specified date */
+    since?: Date | string | number;
+}
+export interface InterpreterOptions extends InterpreterOptionsSpec {
+    since?: Date;
+}
+export interface Interpreter {
+    readonly options: InterpreterOptions;
+    run(input: string): Promise<FileAttachment>;
+}
+export declare const Interpreter: {
+    (name: string, options?: InterpreterOptionsSpec): Interpreter;
+    prototype: InterpreterImpl;
+};
+declare class InterpreterImpl implements Interpreter {
+    readonly name: string;
+    readonly options: InterpreterOptions;
+    constructor(name: string, options: InterpreterOptions);
+    run(input: string): Promise<FileAttachment>;
+    cachePath(input: string): Promise<string>;
+}
+export {};

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

@@ -0,0 +1,43 @@
+import { nameHash, stringHash } from "../../lib/hash.js";
+import { getInterpreterExtension } from "../../lib/interpreters.js";
+import { FileAttachment } from "./fileAttachment.js";
+export const Interpreter = (name, options) => {
+    return new InterpreterImpl(name, normalizeOptions(options));
+};
+function normalizeOptions({ format = "buffer", id, since } = {}) {
+    const options = { format };
+    if (id !== undefined)
+        options.id = id;
+    if (since !== undefined)
+        options.since = new Date(since);
+    return options;
+}
+class InterpreterImpl {
+    constructor(name, options) {
+        Object.defineProperty(this, "name", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "options", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperties(this, {
+            name: { value: name, enumerable: true },
+            options: { value: options, enumerable: true }
+        });
+    }
+    async run(input) {
+        return FileAttachment(await this.cachePath(input));
+    }
+    async cachePath(input) {
+        const { format } = this.options;
+        return `.observable/cache/${await nameHash(this.name)}-${await stringHash(input)}${getInterpreterExtension(format)}`; // TODO avoid conflict with database cache?
+    }
+}
+Interpreter.prototype = InterpreterImpl.prototype; // instanceof
+Object.defineProperty(InterpreterImpl, "name", { value: "Interpreter" }); // prevent mangling

package/dist/src/styles/global.css

@@ -85,9 +85,14 @@ pre[data-language] {
 
 pre[data-language]::before {
   content: attr(data-language);
-  float: right;
-  margin: -4px -8px -4px -4px;
-  padding: 4px;
+  position: sticky;
+  top: 0;
+  left: 0;
+  height: 0;
+  display: block;
+  text-align: right;
+  margin-right: -4px;
+  pointer-events: none;
   font-size: 12px;
   line-height: 21px;
   color: var(--theme-foreground-muted);
@@ -157,12 +162,16 @@ pre {
   background-color: var(--theme-background-alt);
   border-radius: 4px;
   margin: 1rem -1rem;
-  /* max-width: 960px; */
   min-height: 1.5em;
   padding: 4px 1rem;
   overflow-x: auto;
+  overscroll-behavior-x: none;
   box-sizing: border-box;
-  white-space: pre-wrap;
+}
+
+pre > code:only-child {
+  display: block;
+  width: fit-content;
 }
 
 input:not([type]),

package/dist/src/vite/observable.js

@@ -1,11 +1,13 @@
-import { fork } from "node:child_process";
-import { existsSync } from "node:fs";
-import { readFile } from "node:fs/promises";
+import { fork, spawn } from "node:child_process";
+import { createWriteStream, existsSync } from "node:fs";
+import { mkdir, readFile } 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 { getQueryCachePath } from "../databases/index.js";
+import { getInterpreterCachePath } from "../interpreters/index.js";
+import { getInterpreterMethod } from "../lib/interpreters.js";
 import { deserialize } from "../lib/serialize.js";
 import { Sourcemap } from "../javascript/sourcemap.js";
 import { transpile } from "../javascript/transpile.js";
@@ -27,6 +29,8 @@ export function observable({ window = new JSDOM().window, parser = new window.DO
         transformIndexHtml: {
             order: "pre",
             async handler(input, context) {
+                if (context.path.startsWith("/.observable/"))
+                    return input;
                 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");
@@ -44,7 +48,7 @@ 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, hidden, value } = cell;
+                    const { id, mode, pinned, hidden, format, value } = cell;
                     const contents = document.createDocumentFragment();
                     const div = contents.appendChild(document.createElement("div"));
                     div.id = `cell-${id}`;
@@ -74,13 +78,37 @@ export function observable({ window = new JSDOM().window, parser = new window.DO
                                 const child = fork(fileURLToPath(import.meta.resolve("../../bin/query.js")), args);
                                 await new Promise((resolve, reject) => {
                                     child.on("error", reject);
-                                    child.on("exit", resolve);
+                                    child.on("exit", resolve); // TODO check exit code
                                 });
                             }
                             cell.mode = "js";
                             cell.value = `FileAttachment(${JSON.stringify(relative(dir, cachePath))}).json().then(DatabaseClient.revive)${hidden ? "" : `.then(Inputs.table)${cell.output ? ".then(view)" : ""}`}`;
                         }
                     }
+                    else if (mode === "node") {
+                        const { filename: sourcePath } = context;
+                        const sourceDir = dirname(sourcePath);
+                        const cachePath = await getInterpreterCachePath(sourcePath, mode, format, value);
+                        if (!existsSync(cachePath)) {
+                            await mkdir(dirname(cachePath), { recursive: true });
+                            const args = ["--input-type=module", "--permission", "--allow-fs-read=."];
+                            const child = spawn("node", args, { cwd: sourceDir });
+                            child.stdin.end(value);
+                            child.stderr.pipe(process.stderr);
+                            child.stdout.pipe(createWriteStream(cachePath));
+                            await new Promise((resolve, reject) => {
+                                child.on("error", reject);
+                                child.on("exit", resolve); // TODO check exit code
+                            });
+                        }
+                        if (format === "html" && !hidden) {
+                            div.innerHTML = await readFile(cachePath, "utf-8");
+                            if (!cell.output)
+                                statics.add(cell);
+                        }
+                        cell.mode = "js";
+                        cell.value = `FileAttachment(${JSON.stringify(relative(sourceDir, cachePath))})${getInterpreterMethod(format)}`;
+                    }
                     collectAssets(assets, div);
                     if (pinned) {
                         const pre = contents.appendChild(document.createElement("pre"));

package/package.json

@@ -5,7 +5,7 @@
     "type": "git",
     "url": "git+https://github.com/observablehq/notebook-kit.git"
   },
-  "version": "1.2.0",
+  "version": "1.3.0-rc.1",
   "type": "module",
   "scripts": {
     "test": "vitest",