@observablehq/notebook-kit 1.3.0-rc.3 → 1.4.0-rc.1

package/dist/package.json

@@ -5,7 +5,7 @@
         "type": "git",
         "url": "git+https://github.com/observablehq/notebook-kit.git"
     },
-    "version": "1.3.0-rc.3",
+    "version": "1.4.0-rc.1",
     "type": "module",
     "scripts": {
         "test": "vitest",
@@ -61,6 +61,7 @@
         "jsdom": "^26.1.0",
         "markdown-it": "^14.1.0",
         "markdown-it-anchor": "^9.2.0",
+        "typescript": "^5.8.3",
         "vite": "^7.0.0"
     },
     "devDependencies": {
@@ -77,7 +78,6 @@
         "postgres": "^3.4.7",
         "snowflake-sdk": "^2.1.3",
         "tsx": "^4.20.3",
-        "typescript": "^5.8.3",
         "typescript-eslint": "^8.35.0",
         "vitest": "^3.2.4"
     },

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

@@ -1,2 +1,7 @@
 import type { Identifier, Node } from "acorn";
-export declare function checkAssignments(node: Node, references: Identifier[], input: string): void;
+export declare function checkAssignments(node: Node, { input, locals, references, globals }: {
+    input: string;
+    locals: Map<Node, Set<string>>;
+    globals?: Set<string>;
+    references: Identifier[];
+}): void;

package/dist/src/javascript/assignments.js

@@ -1,33 +1,44 @@
 import { defaultGlobals } from "./globals.js";
 import { syntaxError } from "./syntaxError.js";
-import { simple } from "./walk.js";
-export function checkAssignments(node, references, input) {
-    function checkConst(node) {
+import { ancestor } from "./walk.js";
+export function checkAssignments(node, { input, locals, references, globals = defaultGlobals }) {
+    function isLocal({ name }, parents) {
+        for (const p of parents)
+            if (locals.get(p)?.has(name))
+                return true;
+        return false;
+    }
+    function checkConst(node, parents) {
         switch (node.type) {
             case "Identifier":
+                if (isLocal(node, parents))
+                    break;
                 if (references.includes(node))
                     throw syntaxError(`Assignment to external variable '${node.name}'`, node, input);
-                if (defaultGlobals.has(node.name))
+                if (globals.has(node.name))
                     throw syntaxError(`Assignment to global '${node.name}'`, node, input);
                 break;
-            case "ObjectPattern":
-                node.properties.forEach((node) => checkConst(node.type === "Property" ? node.value : node));
-                break;
             case "ArrayPattern":
-                node.elements.forEach((node) => node && checkConst(node));
+                for (const e of node.elements)
+                    if (e)
+                        checkConst(e, parents);
+                break;
+            case "ObjectPattern":
+                for (const p of node.properties)
+                    checkConst(p.type === "Property" ? p.value : p, parents);
                 break;
             case "RestElement":
-                checkConst(node.argument);
+                checkConst(node.argument, parents);
                 break;
         }
     }
-    function checkConstLeft({ left }) {
-        checkConst(left);
+    function checkConstArgument({ argument }, parents) {
+        checkConst(argument, parents);
     }
-    function checkConstArgument({ argument }) {
-        checkConst(argument);
+    function checkConstLeft({ left }, parents) {
+        checkConst(left, parents);
     }
-    simple(node, {
+    ancestor(node, {
         AssignmentExpression: checkConstLeft,
         AssignmentPattern: checkConstLeft,
         UpdateExpression: checkConstArgument,

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

@@ -1,9 +1,9 @@
 import { assert, test } from "vitest";
-import { checkAssignments } from "./assignments.js";
 import { parseJavaScript } from "./parse.js";
+import { findReferences } from "./references.js";
 function check(input) {
     const cell = parseJavaScript(input);
-    checkAssignments(cell.body, cell.references, input);
+    findReferences(cell.body, { input });
 }
 test("allows non-external assignments", () => {
     assert.doesNotThrow(() => check("let foo = 1;\nfoo = 2;"));
@@ -29,5 +29,18 @@ test("does not allow external assignments via for…of or for…in", () => {
     assert.throws(() => check("for (foo in {});"), /external variable 'foo'/);
 });
 test("does not allow global assignments", () => {
-    assert.throws(() => check("window = 1;"), /global 'window'/);
+    assert.throws(() => check("window = 1;"), /Assignment to global 'window'/);
+    assert.throws(() => check("const foo = (window = 1);"), /Assignment to global 'window'/);
+});
+test("does not allow conflicting top-level variables", () => {
+    assert.throws(() => check("const window = 1;"), /Global 'window' cannot be redefined/);
+    assert.throws(() => check("const foo = 1, window = 2;"), /Global 'window' cannot be redefined/);
+    assert.throws(() => check("const {window} = {};"), /Global 'window' cannot be redefined/);
+    assert.throws(() => check("const {window = 1} = {};"), /Global 'window' cannot be redefined/);
+});
+test("allows conflicting non-top-level variables", () => {
+    assert.doesNotThrow(() => check("{ const window = 1; }"));
+    assert.doesNotThrow(() => check("{ let window; window = 2; }"));
+    assert.doesNotThrow(() => check("{ const {window} = {}; }"));
+    assert.doesNotThrow(() => check("{ const {window = 1} = {}; }"));
 });

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

@@ -3,7 +3,9 @@ import type { ImportDefaultSpecifier, ImportSpecifier } from "acorn";
 import type { Sourcemap } from "./sourcemap.js";
 type NamedImportSpecifier = ImportSpecifier | ImportDefaultSpecifier;
 /** Throws a syntax error if any export declarations are found. */
-export declare function checkExports(body: Node, input: string): void;
+export declare function checkExports(body: Node, { input }: {
+    input: string;
+}): void;
 /** Returns true if the body includes an import declaration. */
 export declare function hasImportDeclaration(body: Node): boolean;
 /** Returns true if the given node is a import.meta.resolve(…) call. */

package/dist/src/javascript/imports.js

@@ -6,7 +6,7 @@ import { getStringLiteralValue, isStringLiteral } from "./strings.js";
 import { syntaxError } from "./syntaxError.js";
 import { simple } from "./walk.js";
 /** Throws a syntax error if any export declarations are found. */
-export function checkExports(body, input) {
+export function checkExports(body, { input }) {
     function checkExport(child) {
         throw syntaxError("Unexpected token 'export'", child, input);
     }
@@ -109,8 +109,10 @@ function renderImport(source, node, input) {
     return `import(${source}${node.attributes.length > 0
         ? `, {with: {${input.slice(node.attributes[0].start, node.attributes[node.attributes.length - 1].end)}}}`
         : ""})${names.length > 0
-        ? `.then((module) => {${names.map((name) => `
-  if (!("${name}" in module)) throw new SyntaxError(\`export '${name}' not found\`);`).join("")}
+        ? `.then((module) => {${names
+            .map((name) => `
+  if (!("${name}" in module)) throw new SyntaxError(\`export '${name}' not found\`);`)
+            .join("")}
   return module;
 })`
         : ""}`;

package/dist/src/javascript/parse.js

@@ -1,7 +1,5 @@
 import { Parser, tokTypes } from "acorn";
-import { checkExports } from "./imports.js";
 import { findReferences } from "./references.js";
-import { checkAssignments } from "./assignments.js";
 import { findDeclarations } from "./declarations.js";
 import { findAwaits } from "./awaits.js";
 export const acornOptions = {
@@ -25,13 +23,10 @@ export function parseJavaScript(input) {
     if (expression?.type === "FunctionExpression" && expression.id)
         expression = null; // treat named function as program
     const body = expression ?? parseProgram(input); // otherwise parse as a program
-    checkExports(body, input);
-    const references = findReferences(body);
-    checkAssignments(body, references, input);
     return {
         body,
         declarations: expression ? null : findDeclarations(body, input),
-        references,
+        references: findReferences(body, { input }),
         expression: !!expression,
         async: findAwaits(body).length > 0
     };

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

@@ -1,5 +1,6 @@
 import type { Identifier, Node } from "acorn";
-export declare function findReferences(node: Node, { globals, filterReference, filterDeclaration }?: {
+export declare function findReferences(node: Node, { input, globals, filterReference, filterDeclaration }?: {
+    input?: string;
     globals?: Set<string>;
     filterReference?: (identifier: Identifier) => boolean;
     filterDeclaration?: (identifier: {

package/dist/src/javascript/references.js

@@ -1,4 +1,6 @@
+import { checkAssignments } from "./assignments.js";
 import { defaultGlobals } from "./globals.js";
+import { checkExports } from "./imports.js";
 import { ancestor } from "./walk.js";
 function isScope(node) {
     return (node.type === "FunctionExpression" ||
@@ -15,12 +17,11 @@ function isBlockScope(node) {
         node.type === "ForStatement" ||
         isScope(node));
 }
-export function findReferences(node, { globals = defaultGlobals, filterReference = (identifier) => !globals.has(identifier.name), filterDeclaration = () => true } = {}) {
+export function findReferences(node, { input, globals = defaultGlobals, filterReference = (identifier) => !globals.has(identifier.name), filterDeclaration = () => true } = {}) {
     const locals = new Map();
     const references = [];
     function hasLocal(node, name) {
-        const l = locals.get(node);
-        return l ? l.has(name) : false;
+        return locals.get(node)?.has(name) ?? false;
     }
     function declareLocal(node, id) {
         if (!filterDeclaration(id))
@@ -125,5 +126,9 @@ export function findReferences(node, { globals = defaultGlobals, filterReference
         },
         Identifier: identifier
     });
+    if (input !== undefined) {
+        checkAssignments(node, { locals, references, globals, input });
+        checkExports(node, { input });
+    }
     return references;
 }

package/dist/src/javascript/template.js

@@ -72,12 +72,19 @@ export function parseTemplate(input) {
 }
 export function transpileTemplate(input, tag = "", raw = false) {
     let cell;
+    let prefix;
+    let suffix;
     if (typeof input !== "string") {
         cell = input;
         input = cell.value;
-        tag = getTag(cell);
+        prefix = getPrefix(cell);
+        suffix = getSuffix(cell);
         raw = getRaw(cell);
     }
+    else {
+        prefix = tag;
+        suffix = "";
+    }
     if (!input)
         return input;
     const source = new Sourcemap(input);
@@ -93,30 +100,29 @@ export function transpileTemplate(input, tag = "", raw = false) {
         (raw ? escapeRawTemplateElements : escapeTemplateElements)(source, template);
         node = template;
     }
-    source.insertLeft(node.start, "`");
-    source.insertRight(node.end, "`");
-    source.insertLeft(node.start, tag);
-    return String(source) + (cell ? getSuffix(cell) : "");
+    source.insertLeft(node.start, `${prefix}\``);
+    source.insertRight(node.end, `\`${suffix}`);
+    return String(source);
 }
 function getRaw(cell) {
     return cell.mode !== "md";
 }
-function getTag(cell) {
+function getPrefix(cell) {
     return cell.mode === "tex"
         ? "tex.block"
         : cell.mode === "sql"
-            ? getSqlTag(cell)
+            ? getSqlPrefix(cell)
             : isInterpreter(cell.mode)
-                ? getInterpreterTag(cell)
+                ? getInterpreterPrefix(cell)
                 : cell.mode;
 }
-function getSqlTag(cell) {
+function getSqlPrefix(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 getInterpreterTag(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(`;
 }
@@ -129,7 +135,7 @@ function getSuffix(cell) {
 }
 function getInterpreterSuffix(cell) {
     const method = getInterpreterMethod(cell.format);
-    return method ? `).then((file) => file${method})` : "";
+    return method ? `).then((file) => file${method})` : ")";
 }
 function escapeTemplateElements(source, node) {
     for (const quasi of node.quasis) {

package/dist/src/javascript/transpile.js

@@ -1,3 +1,4 @@
+import { ScriptTarget, transpile as transpileTypeScript } from "typescript";
 import { toCell } from "../lib/notebook.js";
 import { rewriteFileExpressions } from "./files.js";
 import { hasImportDeclaration } from "./imports.js";
@@ -18,16 +19,18 @@ export function transpile(input, mode, options) {
         cell = input;
         input = cell.value;
     }
-    const transpiled = mode === "ojs"
-        ? transpileObservable(input, options)
-        : mode !== "js"
-            ? transpileJavaScript(transpileTemplate(cell), options)
-            : transpileJavaScript(input, options);
+    const transpiled = mode === "ts"
+        ? transpileJavaScript(transpileTypeScript(input, { target: ScriptTarget.ESNext }), options)
+        : 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") {
+    else if (mode !== "js" && mode !== "ts" && mode !== "ojs") {
         transpiled.autodisplay = !!input;
         transpiled.autoview = mode === "sql" && transpiled.autodisplay && !!transpiled.output;
         if (transpiled.autoview)

package/dist/src/lib/interpreters.js

@@ -15,7 +15,9 @@ export function getInterpreterExtension(format) {
         case "tsv":
         case "png":
         case "gif":
+        case "svg":
         case "webp":
+        case "xml":
             return `.${format}`;
         default:
             return ".bin";
@@ -28,6 +30,7 @@ export function getInterpreterMethod(format) {
         case "json":
         case "blob":
         case "text":
+        case "xml":
             return `.${format}()`;
         case "html":
             return `.text().then((text) => html({raw: [text]}))`;
@@ -36,6 +39,7 @@ export function getInterpreterMethod(format) {
         case "jpeg":
         case "png":
         case "gif":
+        case "svg":
         case "webp":
             return ".image()";
         case "csv":

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

@@ -21,7 +21,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" | "ojs" | "md" | "html" | "tex" | "dot" | "sql" | "node" | "python";
+    mode?: "js" | "ts" | "ojs" | "md" | "html" | "tex" | "dot" | "sql" | "node" | "python";
     /** 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 */
@@ -29,7 +29,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";
+    format?: "text" | "blob" | "buffer" | "json" | "csv" | "tsv" | "jpeg" | "gif" | "webp" | "png" | "arrow" | "parquet" | "html" | "svg" | "xml";
     /** 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 */

package/dist/src/lib/notebook.js

@@ -24,5 +24,5 @@ function asDate(date) {
     return date instanceof Date ? date : new Date(date);
 }
 export function defaultPinned(mode) {
-    return mode === "js" || mode === "sql" || isInterpreter(mode) || mode === "ojs";
+    return mode === "js" || mode === "ts" || mode === "sql" || isInterpreter(mode) || mode === "ojs";
 }

package/dist/src/lib/serialize.js

@@ -74,6 +74,8 @@ function serializeMode(mode) {
             return "text/x-python";
         case "ojs":
             return "application/vnd.observable.javascript";
+        case "ts":
+            return "text/x-typescript";
         default:
             return "module";
     }
@@ -96,6 +98,8 @@ function deserializeMode(mode) {
             return "python";
         case "application/vnd.observable.javascript":
             return "ojs";
+        case "text/x-typescript":
+            return "ts";
         default:
             return "js";
     }

package/package.json

@@ -5,7 +5,7 @@
     "type": "git",
     "url": "git+https://github.com/observablehq/notebook-kit.git"
   },
-  "version": "1.3.0-rc.3",
+  "version": "1.4.0-rc.1",
   "type": "module",
   "scripts": {
     "test": "vitest",
@@ -61,6 +61,7 @@
     "jsdom": "^26.1.0",
     "markdown-it": "^14.1.0",
     "markdown-it-anchor": "^9.2.0",
+    "typescript": "^5.8.3",
     "vite": "^7.0.0"
   },
   "devDependencies": {
@@ -77,7 +78,6 @@
     "postgres": "^3.4.7",
     "snowflake-sdk": "^2.1.3",
     "tsx": "^4.20.3",
-    "typescript": "^5.8.3",
     "typescript-eslint": "^8.35.0",
     "vitest": "^3.2.4"
   },