@observablehq/notebook-kit 2.2.2 → 2.4.0

package/dist/package.json

@@ -5,7 +5,7 @@
         "type": "git",
         "url": "git+https://github.com/observablehq/notebook-kit.git"
     },
-    "version": "2.2.2",
+    "version": "2.4.0",
     "type": "module",
     "scripts": {
         "test": "TZ=America/Los_Angeles vitest",

package/dist/src/databases/duckdb.js

@@ -8,7 +8,9 @@ export default function duckdb({ path, options }) {
         let result;
         let rows;
         try {
-            result = await connection.run(strings.reduce((p, c, i) => `${p}$${i}${c}`), params);
+            result = await connection.run(strings.reduce((p, c, i) => `${p}$${i}${c}`), 
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            params);
             rows = await result.getRowObjectsJson();
         }
         finally {

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

@@ -1,4 +1,4 @@
-import type { ColumnSchema, QueryParam } from "../runtime/index.js";
+import type { ColumnSchema } from "../runtime/index.js";
 import type { BigQueryConfig } from "./bigquery.js";
 import type { DatabricksConfig } from "./databricks.js";
 import type { DuckDBConfig } from "./duckdb.js";
@@ -6,7 +6,7 @@ import type { SQLiteConfig } from "./sqlite.js";
 import type { SnowflakeConfig } from "./snowflake.js";
 import type { PostgresConfig } from "./postgres.js";
 export type DatabaseConfig = BigQueryConfig | DatabricksConfig | DuckDBConfig | SQLiteConfig | SnowflakeConfig | PostgresConfig;
-export type QueryTemplateFunction = (strings: readonly string[], ...params: QueryParam[]) => Promise<SerializableQueryResult>;
+export type QueryTemplateFunction = (strings: readonly string[], ...params: unknown[]) => Promise<SerializableQueryResult>;
 export type SerializableQueryResult = {
     rows: Record<string, unknown>[];
     schema: ColumnSchema[];

package/dist/src/databases/postgres.js

@@ -13,7 +13,9 @@ export default function postgres(options) {
         const date = new Date();
         let rows;
         try {
-            rows = await sql.unsafe(strings.reduce((p, c, i) => `${p}$${i}${c}`), params);
+            rows = await sql.unsafe(strings.reduce((p, c, i) => `${p}$${i}${c}`), 
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            params);
         }
         finally {
             await sql.end();

package/dist/src/databases/snowflake.js

@@ -47,6 +47,7 @@ async function execute(connection, sql, params) {
         const date = new Date();
         connection.execute({
             sqlText: sql,
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             binds: params,
             complete(error, statement, rows) {
                 if (error)

package/dist/src/databases/sqlite-bun.js

@@ -6,6 +6,7 @@ export default function sqlite({ path = ":memory:" }) {
         const database = new Database(path);
         try {
             const statement = database.prepare(strings.join("?"));
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const rows = statement.all(...params);
             return {
                 rows,

package/dist/src/databases/sqlite-node.js

@@ -6,6 +6,7 @@ export default function sqlite({ path = ":memory:" }) {
         const database = new DatabaseSync(path);
         try {
             const statement = database.prepare(strings.join("?"));
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const rows = statement.all(...params);
             return {
                 rows,

package/dist/src/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./javascript/globals.js";
+export { resolveImportDefault } from "./javascript/imports.js";
 export * from "./javascript/parse.js";
 export * from "./javascript/template.js";
 export * from "./javascript/transpile.js";

package/dist/src/index.js

@@ -1,4 +1,5 @@
 export * from "./javascript/globals.js";
+export { resolveImportDefault } from "./javascript/imports.js";
 export * from "./javascript/parse.js";
 export * from "./javascript/template.js";
 export * from "./javascript/transpile.js";

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

@@ -14,13 +14,16 @@ export declare function isImportMetaResolve(node: CallExpression): boolean;
 /** Returns true if the given node is an import.meta.url expression. */
 export declare function isImportMetaUrl(node: MemberExpression): boolean;
 export declare function isTypeImport(node: AnyImportSpecifier | ImportDeclaration): boolean;
-export type RewriteImportOptions = {
+export declare function resolveImportDefault(specifier: string): string;
+export type ImportOptions = {
+    /** Returns the URL for the given import specifier; defaults to resolveImportDefault. */
+    resolveImport?: (specifier: string) => string;
     /** If true, resolve local imports relative to document.baseURI. */
     resolveLocalImports?: boolean;
 };
-export declare function rewriteImportExpressions(output: Sourcemap, body: Node, { resolveLocalImports }?: RewriteImportOptions): void;
+export declare function rewriteImportExpressions(output: Sourcemap, body: Node, { resolveImport, resolveLocalImports }?: ImportOptions): void;
 /** Note: mutates inputs! */
-export declare function rewriteImportDeclarations(output: Sourcemap, body: Node, inputs: string[], { resolveLocalImports }?: RewriteImportOptions): void;
+export declare function rewriteImportDeclarations(output: Sourcemap, body: Node, inputs: string[], { resolveImport, resolveLocalImports }?: ImportOptions): void;
 export declare function getLocalName(node: NamedImportSpecifier): string;
 export declare function getImportedName(node: NamedImportSpecifier): string;
 export declare function flatMapImportSpecifiers<T>(node: ImportDeclaration, f: (node: NamedImportSpecifier) => T): T[];

package/dist/src/javascript/imports.js

@@ -47,10 +47,10 @@ export function isImportMetaUrl(node) {
 export function isTypeImport(node) {
     return node.importKind === "type";
 }
-function resolveImport(specifier) {
+export function resolveImportDefault(specifier) {
     return resolveObservableImport(resolveJsrImport(resolveNpmImport(specifier)));
 }
-export function rewriteImportExpressions(output, body, { resolveLocalImports } = {}) {
+export function rewriteImportExpressions(output, body, { resolveImport = resolveImportDefault, resolveLocalImports } = {}) {
     function rewriteImportSource(source, node = source) {
         const value = getStringLiteralValue(source);
         const resolution = resolveImport(value);
@@ -79,7 +79,7 @@ export function rewriteImportExpressions(output, body, { resolveLocalImports } =
     });
 }
 /** Note: mutates inputs! */
-export function rewriteImportDeclarations(output, body, inputs, { resolveLocalImports } = {}) {
+export function rewriteImportDeclarations(output, body, inputs, { resolveImport = resolveImportDefault, resolveLocalImports } = {}) {
     const declarations = [];
     simple(body, {
         ImportDeclaration(node) {

package/dist/src/javascript/template.js

@@ -121,22 +121,33 @@ function getPrefix(cell) {
                     ? "htl.html"
                     : cell.mode;
 }
-function getSqlPrefix(cell) {
+function getDatabase(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`;
+        ? database.slice("var:".length)
+        : `DatabaseClient(${JSON.stringify(database)}, {id: ${id}${since === undefined ? "" : `, since: ${JSON.stringify(since)}`}})`;
+}
+function getSqlPrefix(cell) {
+    return `${getDatabase(cell)}.sql`;
+}
+function getSqlSuffix(cell) {
+    return cell.hidden ? "" : ".then(Inputs.table)";
+}
+function getSqlViewSuffix(cell) {
+    return `.bind(${getDatabase(cell)})`;
 }
 function getInterpreterPrefix(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.mode)
-            ? getInterpreterSuffix(cell)
-            : "";
+    return cell.mode === "sql"
+        ? getSqlSuffix(cell)
+        : cell.mode === "sql.view"
+            ? getSqlViewSuffix(cell)
+            : isInterpreter(cell.mode)
+                ? getInterpreterSuffix(cell)
+                : "";
 }
 function getInterpreterSuffix(cell) {
     const method = getInterpreterMethod(cell.format);

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

@@ -1,4 +1,5 @@
 import type { Cell } from "../lib/notebook.js";
+import type { ImportOptions } from "./imports.js";
 export type TranspiledJavaScript = {
     /** the source code of a JavaScript function defining the primary variable */
     body: string;
@@ -21,12 +22,10 @@ export type TranspiledJavaScript = {
     /** the names of any referenced secrets */
     secrets?: Set<string>;
 };
-export type TranspileOptions = {
-    /** If true, resolve local imports paths relative to document.baseURI. */
-    resolveLocalImports?: boolean;
+export interface TranspileOptions extends ImportOptions {
     /** 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;

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

@@ -1,4 +1,6 @@
 export type NotebookTheme = "air" | "coffee" | "cotton" | "deep-space" | "glacier" | "ink" | "midnight" | "near-midnight" | "ocean-floor" | "parchment" | "slate" | "stark" | "sun-faded";
+export type CellMode = "js" | "ts" | "ojs" | "md" | "html" | "tex" | "dot" | "sql" | "sql.view" | "node" | "python" | "r";
+export type CellFormat = "text" | "blob" | "buffer" | "json" | "csv" | "tsv" | "jpeg" | "gif" | "webp" | "png" | "arrow" | "parquet" | "html" | "svg" | "xml";
 export type LightDarkNotebookTheme = {
     light: NotebookTheme;
     dark: NotebookTheme;
@@ -25,7 +27,7 @@ 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" | "ts" | "ojs" | "md" | "html" | "tex" | "dot" | "sql" | "node" | "python" | "r";
+    mode?: CellMode;
     /** 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 */
@@ -33,7 +35,7 @@ export interface CellSpec {
     /** 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" | "svg" | "xml";
+    format?: CellFormat;
     /** 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 */
@@ -48,4 +50,5 @@ export interface Cell extends CellSpec {
 }
 export declare function toNotebook({ cells, title, theme, readOnly }: NotebookSpec): Notebook;
 export declare function toCell({ id, value, mode, pinned, hidden, output, format, database, since }: CellSpec): Cell;
+export declare function isDatabase(mode: Cell["mode"]): mode is "sql" | "sql.view";
 export declare function defaultPinned(mode: Cell["mode"]): boolean;

package/dist/src/lib/notebook.js

@@ -7,7 +7,7 @@ export function toNotebook({ cells = [], title = "Untitled", theme = "air", read
         readOnly
     };
 }
-export function toCell({ id, value = "", mode = "js", pinned = defaultPinned(mode), hidden = false, output, format = isInterpreter(mode) ? "buffer" : undefined, database = mode === "sql" ? "var:db" : undefined, since }) {
+export function toCell({ id, value = "", mode = "js", pinned = defaultPinned(mode), hidden = false, output, format = isInterpreter(mode) ? "buffer" : undefined, database = isDatabase(mode) ? "var:db" : undefined, since }) {
     return {
         id,
         value,
@@ -16,13 +16,19 @@ export function toCell({ id, value = "", mode = "js", pinned = defaultPinned(mod
         hidden,
         output,
         format: isInterpreter(mode) ? format : undefined,
-        database: mode === "sql" ? database : undefined,
+        database: isDatabase(mode) ? database : undefined,
         since: since !== undefined ? asDate(since) : undefined
     };
 }
+export function isDatabase(mode) {
+    return mode === "sql" || mode === "sql.view";
+}
+function isJavaScript(mode) {
+    return mode === "js" || mode === "ts" || mode === "ojs";
+}
 function asDate(date) {
     return date instanceof Date ? date : new Date(date);
 }
 export function defaultPinned(mode) {
-    return mode === "js" || mode === "ts" || mode === "sql" || isInterpreter(mode) || mode === "ojs";
+    return isJavaScript(mode) || isDatabase(mode) || isInterpreter(mode);
 }

package/dist/src/lib/serialize.js

@@ -67,6 +67,8 @@ function serializeMode(mode) {
             return "application/x-tex";
         case "sql":
             return "application/sql";
+        case "sql.view":
+            return "application/sql+view";
         case "dot":
             return "text/vnd.graphviz";
         case "node":
@@ -93,6 +95,8 @@ function deserializeMode(mode) {
             return "tex";
         case "application/sql":
             return "sql";
+        case "application/sql+view":
+            return "sql.view";
         case "text/vnd.graphviz":
             return "dot";
         case "application/vnd.node.javascript":

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

@@ -1,5 +1,5 @@
 import type { SerializableQueryResult } from "../../databases/index.js";
-/** A serializable value that can be interpolated into a query. */
+/** @deprecated Use unknown instead. */
 export type QueryParam = any;
 /** @see https://observablehq.com/@observablehq/database-client-specification#%C2%A71 */
 export type QueryResult = Record<string, any>[] & {
@@ -24,10 +24,11 @@ export interface QueryOptionsSpec {
 export interface QueryOptions extends QueryOptionsSpec {
     since?: Date;
 }
-export interface DatabaseClient {
+export interface DatabaseClient<T = QueryResult> {
     readonly name: string;
     readonly options: QueryOptions;
-    sql(strings: readonly string[], ...params: QueryParam[]): Promise<QueryResult>;
+    readonly dialect?: string;
+    sql<S extends T = T>(strings: readonly string[], ...params: unknown[]): Promise<S>;
 }
 export declare const DatabaseClient: {
     (name: string, options?: QueryOptionsSpec): DatabaseClient;
@@ -38,8 +39,8 @@ declare class DatabaseClientImpl implements DatabaseClient {
     readonly name: string;
     readonly options: QueryOptions;
     constructor(name: string, options: QueryOptions);
-    sql(strings: readonly string[], ...params: QueryParam[]): Promise<QueryResult>;
-    cachePath(strings: readonly string[], ...params: QueryParam[]): Promise<string>;
+    sql<T = QueryResult>(strings: readonly string[], ...params: unknown[]): Promise<T>;
+    cachePath(strings: readonly string[], ...params: unknown[]): Promise<string>;
 }
 declare function revive({ rows, schema, date, ...meta }: SerializableQueryResult): QueryResult;
 export {};

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

@@ -34,7 +34,7 @@ class DatabaseClientImpl {
         const response = await fetch(path);
         if (!response.ok)
             throw new Error(`failed to fetch: ${path}`);
-        return await response.json().then(revive);
+        return (await response.json().then(revive));
     }
     async cachePath(strings, ...params) {
         return `.observable/cache/${await nameHash(this.name)}-${await hash(strings, ...params)}.json`;

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

@@ -321,7 +321,7 @@ async function insertArrowIpc(database, name, buffer, options) {
     }
 }
 async function insertFlechetteTable(database, name, table, options) {
-    const { tableToIPC } = await import("https://cdn.jsdelivr.net/npm/@uwdata/flechette@2.5.0/+esm");
+    const { tableToIPC } = await import("https://cdn.jsdelivr.net/npm/@uwdata/flechette/+esm");
     return await insertArrowIpc(database, name, tableToIPC(table, { format: "stream" }), options);
 }
 async function insertArqueroTable(database, name, source) {

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

@@ -28,6 +28,7 @@ export declare const library: {
     duckdb: () => Promise<any>;
     DuckDBClient: () => Promise<typeof import("./duckdb.js").DuckDBClient>;
     echarts: () => Promise<any>;
+    Flechette: () => Promise<any>;
     htl: () => Promise<any>;
     html: () => Promise<any>;
     svg: () => Promise<any>;
@@ -39,6 +40,7 @@ export declare const library: {
     Plot: () => Promise<any>;
     React: () => Promise<any>;
     ReactDOM: () => Promise<any>;
+    sql: () => Promise<typeof import("./sql.js").sql>;
     tex: () => Promise<import("./template.js").RawTemplateRenderer & {
         options: (options?: any) => import("./template.js").RawTemplateRenderer;
         block: import("./template.js").RawTemplateRenderer;
@@ -54,8 +56,8 @@ export declare const library: {
         prototype: {
             readonly name: string;
             readonly options: import("./databaseClient.js").QueryOptions;
-            sql(strings: readonly string[], ...params: import("./databaseClient.js").QueryParam[]): Promise<import("./databaseClient.js").QueryResult>;
-            cachePath(strings: readonly string[], ...params: import("./databaseClient.js").QueryParam[]): Promise<string>;
+            sql<T = import("./databaseClient.js").QueryResult>(strings: readonly string[], ...params: unknown[]): Promise<T>;
+            cachePath(strings: readonly string[], ...params: unknown[]): Promise<string>;
         };
     };
     FileAttachment: () => {

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

@@ -6,6 +6,7 @@ export declare const dot: () => Promise<import("./template.js").RawTemplateRende
 export declare const duckdb: () => Promise<any>;
 export declare const DuckDBClient: () => Promise<typeof import("./duckdb.js").DuckDBClient>;
 export declare const echarts: () => Promise<any>;
+export declare const Flechette: () => Promise<any>;
 export declare const htl: () => Promise<any>;
 export declare const html: () => Promise<any>;
 export declare const svg: () => Promise<any>;
@@ -17,6 +18,7 @@ export declare const mermaid: () => Promise<import("./template.js").AsyncRawTemp
 export declare const Plot: () => Promise<any>;
 export declare const React: () => Promise<any>;
 export declare const ReactDOM: () => Promise<any>;
+export declare const sql: () => Promise<typeof import("./sql.js").sql>;
 export declare const tex: () => Promise<import("./template.js").RawTemplateRenderer & {
     options: (options?: any) => import("./template.js").RawTemplateRenderer;
     block: import("./template.js").RawTemplateRenderer;

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

@@ -6,6 +6,7 @@ export const dot = () => import("./dot.js").then((_) => _.dot);
 export const duckdb = () => import("https://cdn.jsdelivr.net/npm/@duckdb/duckdb-wasm@1.32.0/+esm");
 export const DuckDBClient = () => import("./duckdb.js").then((_) => _.DuckDBClient);
 export const echarts = () => import("https://cdn.jsdelivr.net/npm/echarts/+esm");
+export const Flechette = () => import("https://cdn.jsdelivr.net/npm/@uwdata/flechette/+esm");
 export const htl = () => import("https://cdn.jsdelivr.net/npm/htl/+esm");
 export const html = () => import("https://cdn.jsdelivr.net/npm/htl/+esm").then((_) => _.html);
 export const svg = () => import("https://cdn.jsdelivr.net/npm/htl/+esm").then((_) => _.svg);
@@ -17,7 +18,7 @@ export const mermaid = () => import("./mermaid.js").then((_) => _.mermaid);
 export const Plot = () => import("https://cdn.jsdelivr.net/npm/@observablehq/plot/+esm");
 export const React = () => import("https://cdn.jsdelivr.net/npm/react/+esm");
 export const ReactDOM = () => import("https://cdn.jsdelivr.net/npm/react-dom/+esm");
-// export const sql = () => import("observablehq:stdlib/duckdb").then((_) => _.sql);
+export const sql = () => import("./sql.js").then((_) => _.sql);
 // export const SQLite = () => import("observablehq:stdlib/sqlite").then((_) => _.default);
 // export const SQLiteDatabaseClient = () => import("observablehq:stdlib/sqlite").then((_) => _.SQLiteDatabaseClient);
 export const tex = () => import("./tex.js").then((_) => _.tex);

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

@@ -0,0 +1,42 @@
+type SqlDialect = string;
+interface DatabaseClient {
+    readonly dialect?: SqlDialect;
+    sql<T>(strings: readonly string[], ...params: unknown[]): Promise<T>;
+}
+export declare function sql(strings: readonly string[], ...params: unknown[]): SqlFragment;
+export declare namespace sql {
+    var view: (strings: readonly string[], ...params: unknown[]) => SqlView;
+    var variant: (variants: Partial<Record<SqlDialect | "default", unknown>>) => SqlVariant;
+    var ident: (name: string) => SqlVariant;
+    var text: (value: string) => SqlFragment;
+    var Fragment: typeof SqlFragment;
+    var View: typeof SqlView;
+    var Variant: typeof SqlVariant;
+}
+declare class SqlFragment {
+    readonly strings: readonly string[];
+    readonly params: unknown[];
+    constructor(strings: readonly string[], params: unknown[]);
+    flat(dialect?: SqlDialect): typeof this;
+    query<T = unknown>(database: DatabaseClient): Promise<T>;
+    toDialect(dialect?: SqlDialect): typeof this;
+    toString(): string;
+}
+declare class SqlView extends SqlFragment {
+    constructor(strings: readonly string[], params: unknown[]);
+    bind(database: DatabaseClient): BoundSqlView;
+}
+declare class BoundSqlView extends SqlView {
+    readonly database: DatabaseClient;
+    constructor(strings: readonly string[], params: unknown[], database: DatabaseClient);
+    flat(): typeof this;
+    query<T>(): Promise<T>;
+    bind(): BoundSqlView;
+}
+declare class SqlVariant {
+    readonly variants: Partial<Record<SqlDialect | "default", unknown>>;
+    constructor(variants: Partial<Record<SqlDialect | "default", unknown>>);
+    toDialect(dialect?: SqlDialect): unknown;
+    toString(): string;
+}
+export type { SqlFragment, SqlView, SqlVariant };

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

@@ -0,0 +1,294 @@
+export function sql(strings, ...params) {
+    return new SqlFragment(strings, params);
+}
+sql.view = function view(strings, ...params) {
+    return new SqlView(strings, params);
+};
+sql.variant = function variant(variants) {
+    return new SqlVariant(variants);
+};
+sql.ident = function ident(name) {
+    return new SqlVariant({
+        get databricks() {
+            return sql([tquote(name)]);
+        },
+        get bigquery() {
+            return sql([tquote(name)]);
+        },
+        get default() {
+            return sql([dquote(name)]);
+        }
+    });
+};
+sql.text = function text(value) {
+    return sql([squote(value)]);
+};
+class SqlFragment {
+    constructor(strings, params) {
+        Object.defineProperty(this, "strings", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "params", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.strings = strings;
+        this.params = params;
+    }
+    flat(dialect) {
+        const iquote = getIquote(dialect);
+        const that = this.toDialect(dialect);
+        const { strings, params } = that;
+        const names = findUndernames(strings, params); // in-use table names, including ctes
+        const map = new Map(); // from view to cte name
+        const views = {};
+        let cteIndex = 0;
+        // Bakes any SQL view or fragment params into the query, recursively.
+        // Has the side-effect of populating the views map (of CTEs).
+        function flatParams(istrings, iparams) {
+            let ostrings;
+            let oparams;
+            for (let i = 0; i < iparams.length; ++i) {
+                const param = iparams[i];
+                const string = istrings[i + 1];
+                if (param instanceof SqlView) {
+                    if (ostrings === undefined) {
+                        ostrings = istrings.slice(0, i + 1);
+                        oparams = iparams.slice(0, i);
+                    }
+                    let key = map.get(param);
+                    if (key == null) {
+                        do
+                            key = `_${++cteIndex}`;
+                        while (names.has(key));
+                        names.add(key);
+                        map.set(param, key);
+                        const [pstrings, pparams] = flatParams(param.strings, param.params);
+                        views[key] = new SqlFragment(pstrings, pparams);
+                    }
+                    ostrings[ostrings.length - 1] += iquote(key) + string;
+                }
+                else if (param instanceof SqlFragment) {
+                    if (ostrings === undefined) {
+                        ostrings = istrings.slice(0, i + 1);
+                        oparams = iparams.slice(0, i);
+                    }
+                    const [pstrings, pparams] = flatParams(param.strings, param.params);
+                    ostrings[ostrings.length - 1] += pstrings[0];
+                    ostrings.push(...pstrings.slice(1));
+                    ostrings[ostrings.length - 1] += string;
+                    oparams.push(...pparams);
+                }
+                else if (ostrings !== undefined) {
+                    oparams.push(param);
+                    ostrings.push(string);
+                }
+            }
+            return ostrings === undefined ? [istrings, iparams] : [ostrings, oparams];
+        }
+        const [fstrings, fparams] = flatParams(strings, params);
+        const [vstrings, vparams] = withViews(fstrings, fparams, views, iquote);
+        return vstrings === strings && vparams === params ? that : reconstruct(that, vstrings, vparams);
+    }
+    query(database) {
+        const { strings, params } = this.flat(database.dialect);
+        return database.sql(strings, ...params);
+    }
+    toDialect(dialect) {
+        return fragmentToDialect(this, dialect, new Map());
+    }
+    toString() {
+        return this.flat().strings.join("?");
+    }
+}
+class SqlView extends SqlFragment {
+    constructor(strings, params) {
+        super(strings, params);
+    }
+    bind(database) {
+        return new BoundSqlView(this.strings, this.params, database);
+    }
+}
+class BoundSqlView extends SqlView {
+    constructor(strings, params, database) {
+        super(strings, params);
+        Object.defineProperty(this, "database", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.database = database;
+    }
+    flat() {
+        const flat = super.flat(this.database.dialect);
+        if (flat !== this)
+            flat.database = this.database;
+        return flat;
+    }
+    query() {
+        return super.query(this.database);
+    }
+    bind() {
+        throw new Error("already bound");
+    }
+}
+class SqlVariant {
+    constructor(variants) {
+        Object.defineProperty(this, "variants", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.variants = variants;
+    }
+    toDialect(dialect) {
+        return variantToDialect(this, dialect, new Map());
+    }
+    toString() {
+        return String(this.toDialect());
+    }
+}
+sql.Fragment = SqlFragment;
+sql.View = SqlView;
+sql.Variant = SqlVariant;
+function fragmentToDialect(fragment, dialect, cache) {
+    const { strings, params } = fragment;
+    let ostrings;
+    let oparams;
+    for (let i = 0; i < params.length; ++i) {
+        const param = params[i];
+        const string = strings[i + 1];
+        if (param instanceof SqlFragment) {
+            let dparam;
+            if (cache.has(param))
+                dparam = cache.get(param);
+            else
+                cache.set(param, (dparam = fragmentToDialect(param, dialect, cache)));
+            if (dparam !== param) {
+                if (ostrings === undefined) {
+                    ostrings = strings.slice(0, i + 1);
+                    oparams = params.slice(0, i);
+                }
+                ostrings.push(string);
+                oparams.push(dparam);
+            }
+            else if (ostrings !== undefined) {
+                ostrings.push(string);
+                oparams.push(param);
+            }
+        }
+        else if (param instanceof SqlVariant) {
+            let dparam;
+            if (cache.has(param))
+                dparam = cache.get(param);
+            else
+                cache.set(param, (dparam = variantToDialect(param, dialect, cache)));
+            if (ostrings === undefined) {
+                ostrings = strings.slice(0, i + 1);
+                oparams = params.slice(0, i);
+            }
+            ostrings.push(string);
+            oparams.push(dparam);
+        }
+        else if (ostrings !== undefined) {
+            ostrings.push(string);
+            oparams.push(param);
+        }
+    }
+    return ostrings === undefined ? fragment : reconstruct(fragment, ostrings, oparams);
+}
+function reconstruct(fragment, strings, params) {
+    return new fragment.constructor(strings, params);
+}
+function variantToDialect(variant, dialect, cache) {
+    let v;
+    if (dialect !== undefined && dialect in variant.variants)
+        v = variant.variants[dialect];
+    else if ("default" in variant.variants)
+        v = variant.variants.default;
+    else
+        throw new Error(dialect ? `missing variant: ${dialect}` : `missing dialect`);
+    return v instanceof SqlFragment
+        ? fragmentToDialect(v, dialect, cache)
+        : v instanceof SqlVariant
+            ? variantToDialect(v, dialect, cache)
+            : v;
+}
+// Assumptions:
+// - the views’ names are unique and non-conflicting
+// - the views are defined in topological order
+// - the views do not reference any other views
+// - the views do not reference any other tables
+function withViews(istrings, iparams, views, iquote) {
+    const entries = Object.entries(views);
+    if (!entries.length)
+        return [istrings, iparams];
+    const input = istrings[0];
+    const withIndex = findWith(input);
+    const ostrings = [];
+    const oparams = [];
+    let first = true;
+    ostrings[0] = `${withIndex >= 0 ? input.slice(0, withIndex) : "WITH"}\n`;
+    for (const [name, view] of entries) {
+        if (view.params.some((p) => p instanceof SqlFragment))
+            throw new Error("nested fragment");
+        if (first)
+            first = false;
+        else
+            ostrings[ostrings.length - 1] += ",\n";
+        ostrings[ostrings.length - 1] += `${iquote(name)} AS (${view.strings[0]}`;
+        ostrings.push(...view.strings.slice(1));
+        ostrings[ostrings.length - 1] += ")";
+        oparams.push(...view.params);
+    }
+    ostrings[ostrings.length - 1] += withIndex >= 0 ? `,\n${input.slice(withIndex)}` : `\n${input}`;
+    ostrings.push(...istrings.slice(1));
+    oparams.push(...iparams);
+    return [ostrings, oparams];
+}
+function findWith(input) {
+    const match = /^\s*(--.*\n|\/\*[\s\S]*?\*\/|\s)*with\b(\s+recursive\b)?/i.exec(input);
+    return match ? match[0].length : -1;
+}
+function findUndernames(strings, params, names = new Set()) {
+    const string = strings.join(" ");
+    const pattern = /\b_\d+\b/g;
+    for (let match; (match = pattern.exec(string)) !== null;) {
+        names.add(match[0]);
+    }
+    for (const param of params) {
+        if (param instanceof SqlFragment) {
+            findUndernames(param.strings, param.params, names);
+        }
+    }
+    return names;
+}
+/** Quotes the specified SQL identifier. */
+function getIquote(dialect) {
+    switch (dialect) {
+        case "databricks":
+        case "bigquery":
+            return tquote;
+        default:
+            return dquote;
+    }
+}
+/** Quotes the specified name with double quotes. */
+function dquote(name) {
+    return `"${name.replace(/"/g, '""')}"`;
+}
+/** Quotes the specified name with backticks. */
+function tquote(name) {
+    return `\`${name.replace(/`/g, "``")}\``;
+}
+/** Quotes the specified name with single quotes. */
+function squote(name) {
+    return `'${name.replace(/'/g, "''")}'`;
+}

package/dist/src/vite/observable.js

@@ -8,6 +8,7 @@ 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";
@@ -68,7 +69,7 @@ export function observable({ window = new JSDOM().window, parser = new window.DO
                             statics.add(cell);
                         div.innerHTML = stripExpressions(template, value);
                     }
-                    else if (mode === "sql" && cell.database && !cell.database.startsWith("var:")) {
+                    else if (isDatabase(mode) && cell.database && !cell.database.startsWith("var:")) {
                         const template = parseTemplate(value);
                         if (!template.expressions.length) {
                             const dir = dirname(context.filename);

package/package.json

@@ -5,7 +5,7 @@
     "type": "git",
     "url": "git+https://github.com/observablehq/notebook-kit.git"
   },
-  "version": "2.2.2",
+  "version": "2.4.0",
   "type": "module",
   "scripts": {
     "test": "TZ=America/Los_Angeles vitest",