@observablehq/notebook-kit 2.5.8 → 2.6.0

package/dist/package.json

@@ -5,7 +5,7 @@
         "type": "git",
         "url": "git+https://github.com/observablehq/notebook-kit.git"
     },
-    "version": "2.5.8",
+    "version": "2.6.0",
     "type": "module",
     "scripts": {
         "test": "TZ=America/Los_Angeles vitest",
@@ -54,7 +54,7 @@
         "@lezer/python": "^1.1.18",
         "@observablehq/inspector": "^5.0.1",
         "@observablehq/parser": "^6.1.0",
-        "@observablehq/runtime": "^6.0.0",
+        "@observablehq/runtime": "^6.0.1",
         "@sindresorhus/slugify": "^2.2.1",
         "@sveltejs/acorn-typescript": "^1.0.11",
         "acorn": "^8.16.0",

package/dist/src/javascript/template.js

@@ -130,10 +130,7 @@ function getDatabase(cell) {
     return `DatabaseClient(${JSON.stringify(database)}, {id: ${id}${since === undefined ? "" : `, since: ${JSON.stringify(since)}`}})`;
 }
 function getSqlPrefix(cell) {
-    return `${cell.hidden ? "" : cell.output ? "((_) => (display(Inputs.table(_)), _))(" : "Inputs.table("}await ${getDatabase(cell)}.sql`;
-}
-function getSqlSuffix(cell) {
-    return cell.hidden ? "" : ")";
+    return `${getDatabase(cell)}.sql`;
 }
 function getSqlViewSuffix(cell) {
     return `.bind(${getDatabase(cell)})`;
@@ -143,13 +140,11 @@ function getInterpreterPrefix(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"
-        ? getSqlSuffix(cell)
-        : cell.mode === "sql.view"
-            ? getSqlViewSuffix(cell)
-            : isInterpreter(cell.mode)
-                ? getInterpreterSuffix(cell)
-                : "";
+    return cell.mode === "sql.view"
+        ? getSqlViewSuffix(cell)
+        : isInterpreter(cell.mode)
+            ? getInterpreterSuffix(cell)
+            : "";
 }
 function getInterpreterSuffix(cell) {
     const method = getInterpreterMethod(cell.format);

package/dist/src/javascript/transpile.js

@@ -26,12 +26,8 @@ export function transpile(input, mode, options) {
             : mode !== "js"
                 ? transpileJavaScript(transpileTemplate(cell), options)
                 : transpileJavaScript(input, options);
-    if (mode !== "ts" && mode !== "js" && mode !== "ojs") {
-        if (cell.output)
-            transpiled.output = cell.output;
-        if (cell.value)
-            transpiled.autodisplay = true;
-    }
+    if (mode !== "ts" && mode !== "js" && mode !== "ojs")
+        transpiled.output = cell.output;
     if (cell.hidden)
         transpiled.autodisplay = false;
     return transpiled;

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

@@ -1,5 +1,5 @@
 import type { Module, Variable, VariableDefinition } from "@observablehq/runtime";
-import type { DisplayState } from "./display.js";
+import type { DisplayState, DisplayMode } from "./display.js";
 import { observe } from "./display.js";
 export type DefineState = DisplayState & {
     /** the runtime variables associated with this cell */
@@ -24,6 +24,8 @@ export type Definition = {
     automutable?: boolean;
     /** whether to define the display and view builtins; defaults to true */
     display?: boolean;
+    /** whether to use the default inspector, or the special table display (for SQL cells) */
+    displayMode?: DisplayMode;
     /** an asset mapping to apply to any autodisplayed assets (e.g., images and videos) */
     assets?: Map<string, string>;
 };

package/dist/src/runtime/define.js

@@ -2,7 +2,7 @@ import { clear, display, observe } from "./display.js";
 import { input } from "./stdlib/generators/index.js";
 import { Mutator } from "./stdlib/mutable.js";
 export function define(main, state, definition, observer = observe) {
-    const { id, body, inputs = [], outputs = [], output } = definition;
+    const { id, body, inputs = [], outputs = [], output, displayMode } = definition;
     const { autodisplay, autoview, automutable, display: defineDisplay = true } = definition;
     const variables = state.variables;
     const v = main.variable(observer(state, definition), { shadow: {} });
@@ -21,7 +21,7 @@ export function define(main, state, definition, observer = observe) {
                 else if (version > displayVersion)
                     clear(state);
                 displayVersion = version;
-                display(state, value, output);
+                display(state, value, output, displayMode);
                 return value;
             };
         });

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

@@ -1,4 +1,5 @@
 import type { Definition } from "./define.js";
+export type DisplayMode = "table" | "default";
 export type DisplayState = {
     /** the HTML element in which to render this cell’s display */
     root: HTMLDivElement;
@@ -7,9 +8,9 @@ export type DisplayState = {
     /** for inspected values, any expanded paths; see getExpanded */
     expanded: (number[][] | undefined)[];
 };
-export declare function display(state: DisplayState, value: unknown, name?: string): void;
+export declare function display(state: DisplayState, value: unknown, name?: string, mode?: DisplayMode): void;
 export declare function clear(state: DisplayState): void;
-export declare function observe(state: DisplayState, { autodisplay, assets, output }: Definition): {
+export declare function observe(state: DisplayState, { autodisplay, assets, output: name, displayMode: mode }: Definition): {
     _error: boolean;
     _node: HTMLDivElement;
     pending(): void;

package/dist/src/runtime/display.js

@@ -1,10 +1,22 @@
 import { inspect, inspectError, getExpanded } from "./inspect.js";
 import { mapAssets } from "./stdlib/assets.js";
-export function display(state, value, name) {
+export function display(state, value, name, mode) {
+    return mode === "table" ? displayTable(state, value) : displayDefault(state, value, name);
+}
+function displayDefault(state, value, name) {
     const { root, expanded } = state;
     const node = isDisplayable(value, root) ? value : inspect(value, expanded[root.childNodes.length], name); // prettier-ignore
     displayNode(state, node);
 }
+function displayTable(state, value) {
+    const placeholder = document.createComment("table");
+    displayNode(state, placeholder);
+    import("./stdlib/inputs.js").then(({ table }) => {
+        if (!placeholder.parentNode)
+            return; // don’t bother rendering if detached
+        placeholder.replaceWith(table(value));
+    });
+}
 function displayNode(state, node) {
     if (node.nodeType === 11) {
         let child;
@@ -33,7 +45,7 @@ export function clear(state) {
     while (state.root.lastChild)
         state.root.lastChild.remove();
 }
-export function observe(state, { autodisplay, assets, output }) {
+export function observe(state, { autodisplay, assets, output: name, displayMode: mode }) {
     return {
         _error: false,
         _node: state.root, // _node for visibility promise
@@ -48,7 +60,7 @@ export function observe(state, { autodisplay, assets, output }) {
                 if (assets && value instanceof Element)
                     mapAssets(value, assets);
                 clear(state);
-                display(state, value, output);
+                display(state, value, name, mode);
             }
             else if (state.autoclear) {
                 clear(state);
@@ -58,7 +70,7 @@ export function observe(state, { autodisplay, assets, output }) {
             console.error(error);
             this._error = true;
             clear(state);
-            displayError(state, error, output);
+            displayError(state, error, name);
         }
     };
 }

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

@@ -1,24 +1,17 @@
 import { instance } from "https://cdn.jsdelivr.net/npm/@viz-js/viz/+esm";
 const viz = await instance();
+const theme = {
+    color: "#00000101",
+    fontcolor: "#00000101",
+    fontname: "var(--sans-serif)",
+    fontsize: "12"
+};
 export const dot = (template, ...values) => {
     const source = String.raw.call(String, template, ...values);
     const svg = viz.renderSVGElement(source, {
-        graphAttributes: {
-            bgcolor: "none",
-            color: "#00000101",
-            fontcolor: "#00000101",
-            fontname: "var(--sans-serif)",
-            fontsize: "12"
-        },
-        nodeAttributes: {
-            color: "#00000101",
-            fontcolor: "#00000101",
-            fontname: "var(--sans-serif)",
-            fontsize: "12"
-        },
-        edgeAttributes: {
-            color: "#00000101"
-        }
+        graphAttributes: { bgcolor: "none", ...theme },
+        nodeAttributes: theme,
+        edgeAttributes: theme
     });
     for (const e of svg.querySelectorAll("[stroke='#000001'][stroke-opacity='0.003922']")) {
         e.setAttribute("stroke", "currentColor");

package/dist/src/vite/observable.js

@@ -8,7 +8,6 @@ import { JSDOM } from "jsdom";
 import { getQueryCachePath } from "../databases/index.js";
 import { getInterpreterCachePath, getInterpreterCommand } from "../interpreters/index.js";
 import { getInterpreterMethod, isInterpreter } from "../lib/interpreters.js";
-import { isDatabase } from "../lib/notebook.js";
 import { deserialize } from "../lib/serialize.js";
 import { Sourcemap } from "../javascript/sourcemap.js";
 import { transpile } from "../javascript/transpile.js";
@@ -69,7 +68,7 @@ export function observable({ window = new JSDOM().window, parser = new window.DO
                             statics.add(cell);
                         div.innerHTML = stripExpressions(template, value);
                     }
-                    else if (isDatabase(mode) && cell.database && !cell.database.startsWith("var:")) {
+                    else if (mode === "sql" && cell.database && !cell.database.startsWith("var:")) {
                         const template = parseTemplate(value);
                         if (!template.expressions.length) {
                             const dir = dirname(context.filename);
@@ -182,7 +181,8 @@ define(
     inputs: ${JSON.stringify(transpiled.inputs)},
     outputs: ${JSON.stringify(transpiled.outputs)},
     output: ${JSON.stringify(transpiled.output)},
-    display: ${cell.mode === "js" || cell.mode === "ts" || cell.mode === "sql"},
+    display: ${cell.mode === "js" || cell.mode === "ts"},
+    displayMode: ${JSON.stringify(cell.mode === "sql" ? "table" : "default")},
     assets: ${assets.size > 0 ? "assets" : "undefined"},
     autodisplay: ${transpiled.autodisplay},
     autoview: ${transpiled.autoview},

package/package.json

@@ -5,7 +5,7 @@
     "type": "git",
     "url": "git+https://github.com/observablehq/notebook-kit.git"
   },
-  "version": "2.5.8",
+  "version": "2.6.0",
   "type": "module",
   "scripts": {
     "test": "TZ=America/Los_Angeles vitest",
@@ -54,7 +54,7 @@
     "@lezer/python": "^1.1.18",
     "@observablehq/inspector": "^5.0.1",
     "@observablehq/parser": "^6.1.0",
-    "@observablehq/runtime": "^6.0.0",
+    "@observablehq/runtime": "^6.0.1",
     "@sindresorhus/slugify": "^2.2.1",
     "@sveltejs/acorn-typescript": "^1.0.11",
     "acorn": "^8.16.0",