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

package/dist/src/javascript/observable.js

@@ -10,13 +10,13 @@ export function transpileObservable(input, options) {
     if (cell.tag)
         throw new Error("tagged ojs cells are not supported");
     const output = new Sourcemap(input).trim();
+    rewriteSpecialReferences(output, cell.body);
     if (cell.body.type === "ImportDeclaration") {
         rewriteImportSource(output, cell.body);
         return transpileJavaScript(String(output));
     }
     if (options?.resolveFiles)
         rewriteFileExpressions(output, cell.body);
-    rewriteSpecialReferences(output, cell.body);
     const inputs = Array.from(new Set(cell.references.map(asReference)));
     let start = "";
     let end = "";
@@ -39,13 +39,15 @@ export function transpileObservable(input, options) {
         autoview: cell.id?.type === "ViewExpression"
     };
 }
+/** Rewrite bare module specifiers to have the observable: protocol. */
 function rewriteImportSource(output, body) {
     const specifier = body.source.value;
-    if (typeof specifier === "string" && !/^\w+:/.test(specifier))
+    if (typeof specifier === "string" && !/^\w+:/.test(specifier)) {
         output.insertLeft(body.source.start + 1, "observable:");
+    }
     output.insertRight(body.end, ";");
 }
-// Rewrite viewof x ↦ viewof$x, and mutable x ↦ mutable$x.value.
+/** Rewrite viewof x ↦ viewof$x, and mutable x ↦ mutable$x.value. */
 function rewriteSpecialReferences(output, body) {
     simple(body, {
         MutableExpression(node) {
@@ -53,9 +55,28 @@ function rewriteSpecialReferences(output, body) {
         },
         ViewExpression(node) {
             output.replaceLeft(node.start, node.end, asReference(node));
+        },
+        ImportSpecifier(node) {
+            const inode = node;
+            const prefix = inode.view ? "viewof$" : inode.mutable ? "mutable$" : null;
+            if (prefix) {
+                const imported = asImportName(node.imported);
+                output.replaceLeft(node.start, node.imported.start, prefix);
+                if (node.imported === node.local) {
+                    output.insertLeft(node.start, `${imported},`);
+                }
+                else {
+                    const local = asImportName(node.local);
+                    output.insertLeft(node.start, `${imported} as ${local},`);
+                    output.insertLeft(node.local.start, prefix);
+                }
+            }
         }
     });
 }
+function asImportName(ref) {
+    return ref.type === "Identifier" ? ref.name : ref.raw;
+}
 function asReference(ref) {
     return ref.type === "ViewExpression"
         ? `viewof$${ref.id.name}`

package/dist/src/javascript/template.d.ts

@@ -1,3 +1,6 @@
 import type { TemplateLiteral } from "acorn";
+import type { Cell } from "../lib/notebook.js";
 export declare function parseTemplate(input: string): TemplateLiteral;
+/** @deprecated */
 export declare function transpileTemplate(input: string, tag?: string, raw?: boolean): string;
+export declare function transpileTemplate(cell: Cell): string;

package/dist/src/javascript/template.js

@@ -70,6 +70,13 @@ export function parseTemplate(input) {
     return TemplateCellParser.parse(input, acornOptions);
 }
 export function transpileTemplate(input, tag = "", raw = false) {
+    let cell;
+    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";
+    }
     if (!input)
         return input;
     const source = new Sourcemap(input);
@@ -78,7 +85,16 @@ export function transpileTemplate(input, tag = "", raw = false) {
     source.insertLeft(node.start, "`");
     source.insertRight(node.end, "`");
     source.insertLeft(node.start, tag);
-    return String(source);
+    let output = String(source);
+    if (cell?.mode === "sql" && !cell.hidden)
+        output += ".then(Inputs.table)";
+    return output;
+}
+function getSqlTag(cell) {
+    const { id, database = "var:db", since } = cell;
+    return database.startsWith("var:")
+        ? `${database.slice("var:".length)}.sql`
+        : `DatabaseClient(${JSON.stringify(database)}, {id: ${id}${since === undefined ? "" : `, since: ${JSON.stringify(since)}`}}).sql`;
 }
 function escapeTemplateElements(source, node) {
     for (const quasi of node.quasis) {

package/dist/src/javascript/transpile.d.ts

@@ -10,9 +10,9 @@ export type TranspiledJavaScript = {
     output?: string;
     /** whether to implicitly display the body value (e.g., an expression) */
     autodisplay?: boolean;
-    /** whether to implicitly derive a view; for ojs compatibility; requires viewof output */
+    /** whether to implicitly derive a view; requires viewof output */
     autoview?: boolean;
-    /** whether to implicitly derive a mutable; for ojs compatibility; requires mutable output */
+    /** whether to implicitly derive a mutable; requires mutable output */
     automutable?: boolean;
 };
 export type TranspileOptions = {
@@ -21,5 +21,7 @@ export type TranspileOptions = {
     /** If true, resolve file using import.meta.url (so Vite treats it as an asset). */
     resolveFiles?: boolean;
 };
+/** @deprecated */
 export declare function transpile(input: string, mode: Cell["mode"], options?: TranspileOptions): TranspiledJavaScript;
+export declare function transpile(input: Cell, options?: TranspileOptions): TranspiledJavaScript;
 export declare function transpileJavaScript(input: string, options?: TranspileOptions): TranspiledJavaScript;

package/dist/src/javascript/transpile.js

@@ -1,20 +1,39 @@
+import { toCell } from "../lib/notebook.js";
 import { rewriteFileExpressions } from "./files.js";
-import { hasImportDeclaration, rewriteImportDeclarations, rewriteImportExpressions } from "./imports.js";
+import { hasImportDeclaration } from "./imports.js";
+import { rewriteImportDeclarations, rewriteImportExpressions } from "./imports.js";
 import { transpileObservable } from "./observable.js";
 import { parseJavaScript } from "./parse.js";
 import { Sourcemap } from "./sourcemap.js";
 import { transpileTemplate } from "./template.js";
 export function transpile(input, mode, options) {
-    return mode === "ojs"
-        ? transpileObservable(input, options) // TODO ojs+md etc.
-        : transpileJavaScript(transpileMode(input, mode), options);
-}
-function transpileMode(input, mode) {
-    if (mode === "js")
-        return input;
-    const tag = mode === "tex" ? "tex.block" : mode === "sql" ? "__sql(db, Inputs.table)" : mode; // for now
-    const raw = mode === "html" || mode === "tex" || mode === "dot";
-    return transpileTemplate(input, tag, raw);
+    let cell;
+    if (typeof input === "string") {
+        mode = mode;
+        cell = toCell({ id: -1, value: input, mode });
+    }
+    else {
+        options = mode;
+        mode = input.mode;
+        cell = input;
+        input = cell.value;
+    }
+    const transpiled = mode === "ojs"
+        ? transpileObservable(input, options)
+        : mode !== "js"
+            ? transpileJavaScript(transpileTemplate(cell), options)
+            : transpileJavaScript(input, options);
+    if (transpiled.output === undefined)
+        transpiled.output = cell.output;
+    if (cell.hidden)
+        transpiled.autodisplay = false;
+    else if (mode !== "js" && mode !== "ojs") {
+        transpiled.autodisplay = !!input;
+        transpiled.autoview = mode === "sql" && transpiled.autodisplay && !!transpiled.output;
+        if (transpiled.autoview)
+            transpiled.output = `viewof$${transpiled.output}`;
+    }
+    return transpiled;
 }
 export function transpileJavaScript(input, options) {
     const cell = parseJavaScript(input);

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

@@ -6,6 +6,13 @@ it("transpiles JavaScript expressions", () => {
     expect(transpile("await z", "js")).toMatchSnapshot();
     expect(transpile("display(1), display(2)", "js")).toMatchSnapshot();
 });
+it("transpiles empty cells", () => {
+    expect(transpile("", "js")).toMatchSnapshot();
+    expect(transpile("", "md")).toMatchSnapshot();
+    expect(transpile("", "html")).toMatchSnapshot();
+    expect(transpile("", "tex")).toMatchSnapshot();
+    expect(transpile("", "sql")).toMatchSnapshot();
+});
 it("transpiles JavaScript programs", () => {
     expect(transpile("const x = 1, y = 2;", "js")).toMatchSnapshot();
     expect(transpile("x + y;", "js")).toMatchSnapshot();
@@ -21,6 +28,15 @@ it("transpiles dynamic npm: imports", () => {
 });
 it("transpiles static observable: imports", () => {
     expect(transpile('import {Scrubber} from "observable:@mbostock/scrubber";', "js")).toMatchSnapshot();
+    expect(transpile('import {viewof$rotation} from "observable:@rreusser/drawing-3d-objects-with-svg";', "js")).toMatchSnapshot();
+});
+it("transpiles static imports with {type: 'observable'}", () => {
+    expect(transpile('import {Scrubber} from "https://api.observablehq.com/@mbostock/scrubber.js?v=4" with {type: "observable"};', "js")).toMatchSnapshot();
+    expect(transpile('import {viewof$rotation} from "https://api.observablehq.com/@rreusser/drawing-3d-objects-with-svg.js?v=4" with {type: "observable"};', "js")).toMatchSnapshot();
+});
+it("transpiles Observable JavaScript imports", () => {
+    expect(transpile('import {figure, viewof rotation} from "@rreusser/drawing-3d-objects-with-svg"', "ojs")).toMatchSnapshot();
+    expect(transpile('import {figure, viewof rotation as rot} from "@rreusser/drawing-3d-objects-with-svg"', "ojs")).toMatchSnapshot();
 });
 it("transpiles import.meta.resolve", () => {
     expect(transpile('import.meta.resolve("npm:d3")', "js")).toMatchSnapshot();

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

@@ -0,0 +1,6 @@
+export declare function isEnoent(error: unknown): error is Error & {
+    code: "ENOENT";
+};
+export declare function isSystemError(error: unknown): error is Error & {
+    code: string;
+};

package/dist/src/lib/error.js

@@ -0,0 +1,6 @@
+export function isEnoent(error) {
+    return isSystemError(error) && error.code === "ENOENT";
+}
+export function isSystemError(error) {
+    return error instanceof Error && "code" in error;
+}

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

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

package/dist/src/lib/hash.js

@@ -0,0 +1,20 @@
+import { sluggify } from "./sluggify.js";
+async function sha256(input) {
+    const encoded = new TextEncoder().encode(input);
+    const buffer = await crypto.subtle.digest("SHA-256", encoded);
+    return new Uint8Array(buffer).reduce((i, byte) => (i << 8n) | BigInt(byte), 0n);
+}
+function base36(int, length) {
+    return int.toString(36).padStart(length, "0").slice(0, length);
+}
+export async function hash(strings, ...params) {
+    return base36(await sha256(JSON.stringify([strings, ...params])), 16);
+}
+export async function nameHash(name) {
+    return /^[\w-]+$/.test(name)
+        ? name
+        : `${sluggify(basename(name))}.${base36(await sha256(name), 8)}`;
+}
+function basename(name) {
+    return name.replace(/^.*\//, "");
+}

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,28 @@
+import { assert, describe, test } from "vitest";
+import { hash, nameHash } from "./hash.js";
+describe("nameHash", () => {
+    test("returns a simple name as-is", async () => {
+        assert.strictEqual(await nameHash("foo"), "foo");
+        assert.strictEqual(await nameHash("foo-bar"), "foo-bar");
+        assert.strictEqual(await nameHash("foo-"), "foo-");
+        assert.strictEqual(await nameHash("-foo"), "-foo");
+    });
+    test("sluggifies and hashes names with special characters", async () => {
+        assert.strictEqual(await nameHash("foo.db"), "foo-db.2s9flvsm");
+        assert.strictEqual(await nameHash("./foo.db"), "foo-db.3ee6cmxd");
+        assert.strictEqual(await nameHash("data/foo.db"), "foo-db.61nrbwb0");
+        assert.strictEqual(await nameHash("bar/foo.db"), "foo-db.1jlqjad7");
+        assert.strictEqual(await nameHash("foo bar"), "foo-bar.69w36b7f");
+    });
+});
+describe("hash", () => {
+    test("returns the expected static hash", async () => {
+        assert.strictEqual(await hash `foo`, "1n7k0l3ilxvth9al");
+        assert.strictEqual(await hash `bar`, "39v7mmkf7sfehxh1");
+        assert.strictEqual(await hash ``, "gepym5nmvuej8503");
+    });
+    test("returns the expected dynamic hash", async () => {
+        assert.strictEqual(await hash `SELECT 1 + ${2}`, "64iqby4orqj5tgek");
+        assert.strictEqual(await hash `SELECT 1 + ${3}`, "1azi8mazfb39kln7");
+    });
+});

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

@@ -24,12 +24,22 @@ export interface CellSpec {
     mode?: "js" | "ojs" | "md" | "html" | "tex" | "dot" | "sql";
     /** 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 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 */
+    since?: Date | string | number;
 }
 export interface Cell extends CellSpec {
     value: NonNullable<CellSpec["value"]>;
     mode: NonNullable<CellSpec["mode"]>;
     pinned: NonNullable<CellSpec["pinned"]>;
+    hidden: NonNullable<CellSpec["hidden"]>;
+    since?: Date;
 }
 export declare function toNotebook({ cells, title, theme, readOnly }: NotebookSpec): Notebook;
-export declare function toCell({ id, value, mode, pinned }: CellSpec): Cell;
+export declare function toCell({ id, value, mode, pinned, hidden, output, database, since }: CellSpec): Cell;
 export declare function defaultPinned(mode: Cell["mode"]): boolean;

package/dist/src/lib/notebook.js

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

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

@@ -13,7 +13,11 @@ test("converts a cell spec to a cell", () => {
         id: 1,
         value: "",
         mode: "js",
-        pinned: true
+        pinned: true,
+        hidden: false,
+        output: undefined,
+        database: undefined,
+        since: undefined
     });
 });
 test("computes an appropriate default pinned based on the cell mode", () => {
@@ -21,6 +25,10 @@ test("computes an appropriate default pinned based on the cell mode", () => {
         id: 1,
         value: "",
         mode: "md",
-        pinned: false
+        pinned: false,
+        hidden: false,
+        output: undefined,
+        database: undefined,
+        since: undefined
     });
 });

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

@@ -1,5 +1,7 @@
 import type { Notebook } from "./notebook.js";
-export declare function serialize(notebook: Notebook): string;
+export declare function serialize(notebook: Notebook, { document }?: {
+    document?: Document | undefined;
+}): string;
 export declare function deserialize(data: string, { parser }?: {
     parser?: DOMParser | undefined;
 }): Notebook;

package/dist/src/lib/serialize.js

@@ -1,6 +1,6 @@
 import { toNotebook } from "./notebook.js";
 import { isEmpty } from "./text.js";
-export function serialize(notebook) {
+export function serialize(notebook, { document = globalThis.document } = {}) {
     const _notebook = document.createElement("notebook");
     _notebook.setAttribute("theme", notebook.theme);
     if (notebook.readOnly)
@@ -17,6 +17,12 @@ export function serialize(notebook) {
         _cell.textContent = indent(cell.value.replace(/<(?=\\*\/script(\s|>))/gi, "<\\"));
         if (cell.pinned)
             _cell.setAttribute("pinned", "");
+        if (cell.hidden)
+            _cell.setAttribute("hidden", "");
+        if (cell.database)
+            _cell.setAttribute("database", cell.database);
+        if (cell.output)
+            _cell.setAttribute("output", cell.output);
         _notebook.appendChild(_cell);
     }
     _notebook.appendChild(document.createTextNode("\n"));
@@ -37,10 +43,13 @@ export function deserialize(data, { parser = new DOMParser() } = {}) {
         else if (id > maxCellId)
             maxCellId = id;
         cellIds.add(id);
-        const pinned = cell.hasAttribute("pinned");
-        const value = dedent(cell.textContent?.replace(/<\\(?=\\*\/script(\s|>))/gi, "<") ?? "");
         const mode = deserializeMode(cell.getAttribute("type"));
-        return { id, pinned, mode, value };
+        const value = dedent(cell.textContent?.replace(/<\\(?=\\*\/script(\s|>))/gi, "<") ?? "");
+        const pinned = cell.hasAttribute("pinned");
+        const hidden = cell.hasAttribute("hidden");
+        const output = cell.getAttribute("output") ?? undefined;
+        const database = cell.getAttribute("database") ?? undefined;
+        return { id, mode, value, pinned, hidden, output, database };
     });
     return toNotebook({ title, theme, readOnly, cells });
 }

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

@@ -1,7 +1,14 @@
-// @vitest-environment jsdom
+import { JSDOM } from "jsdom";
 import { assert, test } from "vitest";
 import { toNotebook } from "./notebook.js";
-import { deserialize, serialize } from "./serialize.js";
+import { deserialize as _deserialize, serialize as _serialize } from "./serialize.js";
+const { window } = new JSDOM();
+function serialize(notebook) {
+    return _serialize(notebook, { document: window.document });
+}
+function deserialize(data) {
+    return _deserialize(data, { parser: new window.DOMParser() });
+}
 test("serializes unpinned cells", () => {
     const notebook1 = toNotebook({
         cells: [
@@ -84,7 +91,7 @@ test("serialization escapes </script>, in various forms", () => {
             { id: 6, mode: "js", pinned: true, value: `'<\\/script>'` },
             { id: 7, mode: "js", pinned: true, value: `'<\\/script '` },
             { id: 8, mode: "js", pinned: true, value: `'<\\\\/SCRIPT '` },
-            { id: 9, mode: "js", pinned: true, value: `'<\\\\/sCrIpT '` },
+            { id: 9, mode: "js", pinned: true, value: `'<\\\\/sCrIpT '` }
         ]
     });
     const html = serialize(notebook1);

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

@@ -0,0 +1,6 @@
+export interface SluggifyOptions {
+    length?: number;
+    fallback?: string;
+    separator?: string;
+}
+export declare function sluggify(string: string, { length, fallback, separator }?: SluggifyOptions): string;

package/dist/src/lib/sluggify.js

@@ -0,0 +1,22 @@
+export function sluggify(string, { length = 50, fallback = "untitled", separator = "-" } = {}) {
+    const parts = string
+        .normalize("NFD")
+        .replace(/[\u0300-\u036f'‘’]/g, "")
+        .toLowerCase()
+        .split(/\W+/g)
+        .filter(nonempty);
+    let i = -1;
+    for (let l = 0, n = parts.length; ++i < n;) {
+        if ((l += parts[i].length) + i > length) {
+            parts[i] = parts[i].substring(0, length - l + parts[i].length - i);
+            break;
+        }
+    }
+    return (parts
+        .slice(0, i + 1)
+        .filter(Boolean)
+        .join(separator) || fallback.slice(0, length));
+}
+function nonempty(string) {
+    return string.length > 0;
+}

package/dist/src/lib/sluggify.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,51 @@
+import { assert, test } from "vitest";
+import { sluggify } from "./sluggify.js";
+test("returns the default fallback for empty slugs", () => {
+    assert.strictEqual(sluggify(""), "untitled");
+    assert.strictEqual(sluggify("  "), "untitled");
+    assert.strictEqual(sluggify("---"), "untitled");
+    assert.strictEqual(sluggify("##)!@#(*"), "untitled");
+});
+test("returns the given fallback for empty slugs", () => {
+    assert.strictEqual(sluggify("", { fallback: "foo" }), "foo");
+    assert.strictEqual(sluggify("  ", { fallback: "foo" }), "foo");
+    assert.strictEqual(sluggify("---", { fallback: "foo" }), "foo");
+    assert.strictEqual(sluggify("##)!@#(*", { fallback: "foo" }), "foo");
+});
+test("lowercases", () => {
+    assert.strictEqual(sluggify("HELLO WORLD"), "hello-world");
+    assert.strictEqual(sluggify("HelLo WorlD"), "hello-world");
+});
+test("removes emoji", () => {
+    assert.strictEqual(sluggify("HELLO 😎"), "hello");
+    assert.strictEqual(sluggify("HELLO 😎 world"), "hello-world");
+    assert.strictEqual(sluggify("HELLO 💩 world"), "hello-world");
+});
+test("trims leading and trailing spaces", () => {
+    assert.strictEqual(sluggify("  hello world   "), "hello-world");
+});
+test("collapses contiguous spaces", () => {
+    assert.strictEqual(sluggify("  hello    world   "), "hello-world");
+});
+test("removes punctuation", () => {
+    assert.strictEqual(sluggify("Hello, world!"), "hello-world");
+    assert.strictEqual(sluggify("Hello, 'world'!"), "hello-world");
+    assert.strictEqual(sluggify('Hello, "world"!'), "hello-world");
+    assert.strictEqual(sluggify("Hello, “world”!"), "hello-world");
+    assert.strictEqual(sluggify("Hello, ‘world’!"), "hello-world");
+    assert.strictEqual(sluggify("Hello, fo'c's'le!"), "hello-focsle");
+    assert.strictEqual(sluggify("Hello, fo’c’s’le!"), "hello-focsle");
+});
+test("removes diacritics and combiners", () => {
+    assert.strictEqual(sluggify("Héllö, wørld!"), "hello-w-rld");
+    assert.strictEqual(sluggify("z̷̢̡̟͍̺͛͆͐̀ą̸̻̰̪͈͒͝ͅl̸͇̘̓g̶̡͈͒̾̉̽̑̅ö̸̧̟́͆"), "zalgo");
+});
+test("allows up to 50 characters after stripping", () => {
+    assert.strictEqual(sluggify("‘A‘ohe pu‘u ki‘eki‘e ke ho ‘ā‘o ‘ia e pi‘i"), "aohe-puu-kiekie-ke-ho-ao-ia-e-pii");
+    assert.strictEqual(sluggify("0123456789012345678901234567890123456789012345678"), "0123456789012345678901234567890123456789012345678");
+    assert.strictEqual(sluggify("01234567890123456789012345678901234567890123456789"), "01234567890123456789012345678901234567890123456789");
+    assert.strictEqual(sluggify("012345678901234567890123456789012345678901234567890"), "01234567890123456789012345678901234567890123456789");
+    assert.strictEqual(sluggify("01234567890 1234567890 1234567890 1234567890 12345678"), "01234567890-1234567890-1234567890-1234567890-12345");
+    assert.strictEqual(sluggify("01234567890 1234567890 1234567890 1234567890 123456789"), "01234567890-1234567890-1234567890-1234567890-12345");
+    assert.strictEqual(sluggify("01234567890 1234567890 1234567890 1234567890 1234567890"), "01234567890-1234567890-1234567890-1234567890-12345");
+});

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

@@ -1,4 +1,4 @@
-import type { Variable, VariableDefinition } from "@observablehq/runtime";
+import type { Module, Variable, VariableDefinition } from "@observablehq/runtime";
 import type { DisplayState } from "./display.js";
 import { observe } from "./display.js";
 export type DefineState = DisplayState & {
@@ -25,4 +25,4 @@ export type Definition = {
     /** an asset mapping to apply to any autodisplayed assets (e.g., images and videos) */
     assets?: Map<string, string>;
 };
-export declare function define(state: DefineState, definition: Definition, observer?: typeof observe): void;
+export declare function define(main: Module, state: DefineState, definition: Definition, observer?: typeof observe): void;

package/dist/src/runtime/define.js

@@ -1,12 +1,12 @@
 import { clear, display, observe } from "./display.js";
-import { main } from "./index.js";
 import { input } from "./stdlib/generators/index.js";
 import { Mutator } from "./stdlib/mutable.js";
-export function define(state, definition, observer = observe) {
+export function define(main, state, definition, observer = observe) {
     const { id, body, inputs = [], outputs = [], output, autodisplay, autoview, automutable } = definition;
     const variables = state.variables;
     const v = main.variable(observer(state, definition), { shadow: {} });
     const vid = output ?? (outputs.length ? `cell ${id}` : null);
+    state.autoclear = true;
     if (inputs.includes("display") || inputs.includes("view")) {
         let displayVersion = -1; // the variable._version of currently-displayed values
         const vd = new v.constructor(2, v._module);

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

@@ -2,6 +2,8 @@ import type { Definition } from "./define.js";
 export type DisplayState = {
     /** the HTML element in which to render this cell’s display */
     root: HTMLDivElement;
+    /** whether to clear on fulfilled */
+    autoclear?: boolean;
     /** for inspected values, any expanded paths; see getExpanded */
     expanded: (number[][] | undefined)[];
 };

package/dist/src/runtime/display.js

@@ -28,6 +28,7 @@ function isDisplayable(value, root) {
         (!value.parentNode || root.contains(value)));
 }
 export function clear(state) {
+    state.autoclear = false;
     state.expanded = Array.from(state.root.childNodes, getExpanded);
     while (state.root.lastChild)
         state.root.lastChild.remove();
@@ -44,11 +45,14 @@ export function observe(state, { autodisplay, assets }) {
         },
         fulfilled(value) {
             if (autodisplay) {
-                clear(state);
                 if (assets && value instanceof Element)
                     mapAssets(value, assets);
+                clear(state);
                 display(state, value);
             }
+            else if (state.autoclear) {
+                clear(state);
+            }
         },
         rejected(error) {
             console.error(error);