@observablehq/notebook-kit 2.1.5 → 2.1.7

package/dist/package.json

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

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

@@ -1,8 +1,15 @@
-import type { ImportDeclaration } from "acorn";
+import type { ImportWithDeclaration } from "@observablehq/parser";
+import type { ImportDeclaration, ImportSpecifier } from "acorn";
+import type { Identifier } from "acorn";
+import type { NamedImportSpecifier } from "../imports.js";
 /** If specifier is an observable: protocol import, resolves it. */
 export declare function resolveObservableImport(specifier: string): string;
 export declare function isObservableImport(node: ImportDeclaration, specifier: string): boolean;
 /** Note: mutates inputs! */
-export declare function renderObservableImport(source: string, node: ImportDeclaration, inputs: string[]): string;
+export declare function renderObservableImport(source: string, node: ImportDeclaration | ImportWithDeclaration, inputs: string[]): string;
+export declare function toSpecialIdentifier(identifier: Identifier, type: "viewof" | "mutable"): Identifier;
+export declare function toSpecialImportSpecifier(specifier: ImportSpecifier, type: "viewof" | "mutable"): ImportSpecifier;
+export declare function isViewImport(node: NamedImportSpecifier): node is ImportSpecifier;
+export declare function isMutableImport(node: NamedImportSpecifier): node is ImportSpecifier;
 /** Turns e.g. "viewof$foo" into "viewof foo", and "$$" into "$". */
 export declare function dedollar(input: string): string;

package/dist/src/javascript/imports/observable.js

@@ -1,4 +1,4 @@
-import { getImportedName, getLocalName } from "../imports.js";
+import { flatMapImportSpecifiers, getImportedName, getLocalName } from "../imports.js";
 const CODE_DOLLAR = 36;
 /** If specifier is an observable: protocol import, resolves it. */
 export function resolveObservableImport(specifier) {
@@ -21,20 +21,60 @@ export function renderObservableImport(source, node, inputs) {
     if (!inputs.includes("@variable"))
         inputs.push("@variable");
     return `(import(${JSON.stringify(source)}).then((_) => {
-  const module = __variable._module._runtime.module(_.default);
-  const outputs = new Map(Array.from(__variable._outputs, (v) => [v._name, v]));${node.specifiers
-        .map((specifier) => {
-        if (specifier.type === "ImportNamespaceSpecifier")
-            throw new SyntaxError("observable namespace imports are not supported");
-        const iname = dedollar(getImportedName(specifier));
-        const lname = getLocalName(specifier);
+  const module = __variable._module._runtime.module(_.default)${"injections" in node ? `.derive([${renderObservableInjections(node)}], __variable._module)` : ""};
+  const outputs = new Map(Array.from(__variable._outputs, (v) => [v._name, v]));${flatMapImportSpecifiers(node, (specifier) => {
+        const i = dedollar(getImportedName(specifier));
+        const l = getLocalName(specifier);
         return `
-  outputs.get(${JSON.stringify(lname)})?.import(${JSON.stringify(iname)}${iname === lname ? "" : `, ${JSON.stringify(lname)}`}, module);`;
-    })
-        .join("")}
+  outputs.get(${JSON.stringify(l)})?.import(${JSON.stringify(i)}${i === l ? "" : `, ${JSON.stringify(l)}`}, module);`;
+    }).join("")}
   return {};
 }))`;
 }
+function renderObservableInjections(node) {
+    return node.injections
+        .map((node) => {
+        if (node.imported.type !== "Identifier")
+            throw new SyntaxError("unexpected import specifier");
+        const imported = node.imported.name;
+        const local = node.local.name;
+        let injection;
+        if (imported === local) {
+            injection = `"${local}"`;
+            if (node.view)
+                injection += `, "viewof ${local}"`;
+            if (node.mutable)
+                injection += `, "mutable ${local}"`;
+        }
+        else {
+            injection = `{name: "${imported}", alias: "${local}"}`;
+            if (node.view)
+                injection += `, {name: "viewof ${imported}", alias: "viewof ${local}"}`;
+            if (node.mutable)
+                injection += `, {name: "mutable ${imported}", alias: "mutable ${local}"}`;
+        }
+        return injection;
+    })
+        .join(", ");
+}
+export function toSpecialIdentifier(identifier, type) {
+    return { ...identifier, name: `${type}$${identifier.name}` };
+}
+export function toSpecialImportSpecifier(specifier, type) {
+    if (specifier.imported.type !== "Identifier")
+        throw new SyntaxError("unexpected import specifier");
+    return {
+        ...specifier,
+        imported: toSpecialIdentifier(specifier.imported, type),
+        local: toSpecialIdentifier(specifier.local, type)
+    };
+}
+export function isViewImport(node) {
+    return "view" in node && !!node.view;
+}
+export function isMutableImport(node) {
+    return "mutable" in node && !!node.mutable;
+}
 /** Turns e.g. "viewof$foo" into "viewof foo", and "$$" into "$". */
 export function dedollar(input) {
     const start = 0;

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

@@ -1,7 +1,8 @@
-import type { CallExpression, MemberExpression, Node } from "acorn";
-import type { ImportDefaultSpecifier, ImportSpecifier } from "acorn";
+import type { CallExpression, ImportDeclaration, MemberExpression, Node } from "acorn";
+import type { ImportDefaultSpecifier, ImportNamespaceSpecifier, ImportSpecifier } from "acorn";
 import type { Sourcemap } from "./sourcemap.js";
-type NamedImportSpecifier = ImportSpecifier | ImportDefaultSpecifier;
+export type NamedImportSpecifier = ImportSpecifier | ImportDefaultSpecifier;
+export type AnyImportSpecifier = ImportSpecifier | ImportDefaultSpecifier | ImportNamespaceSpecifier;
 /** Throws a syntax error if any export declarations are found. */
 export declare function checkExports(body: Node, { input }: {
     input: string;
@@ -21,4 +22,4 @@ export declare function rewriteImportExpressions(output: Sourcemap, body: Node,
 export declare function rewriteImportDeclarations(output: Sourcemap, body: Node, inputs: string[], { resolveLocalImports }?: RewriteImportOptions): void;
 export declare function getLocalName(node: NamedImportSpecifier): string;
 export declare function getImportedName(node: NamedImportSpecifier): string;
-export {};
+export declare function flatMapImportSpecifiers<T>(node: ImportDeclaration, f: (node: NamedImportSpecifier) => T): T[];

package/dist/src/javascript/imports.js

@@ -1,7 +1,8 @@
 import { resolveJsrImport } from "./imports/jsr.js";
 import { resolveNpmImport } from "./imports/npm.js";
-import { resolveObservableImport } from "./imports/observable.js";
-import { isObservableImport, renderObservableImport } from "./imports/observable.js";
+import { isObservableImport, isMutableImport, isViewImport } from "./imports/observable.js";
+import { resolveObservableImport, renderObservableImport } from "./imports/observable.js";
+import { toSpecialImportSpecifier } from "./imports/observable.js";
 import { getStringLiteralValue, isStringLiteral } from "./strings.js";
 import { syntaxError } from "./syntaxError.js";
 import { simple } from "./walk.js";
@@ -138,9 +139,20 @@ function isNamedSpecifier(node) {
 }
 function rewriteImportSpecifiers(node) {
     return node.specifiers.some(isNamedSpecifier)
-        ? `{${node.specifiers.filter(isNamedSpecifier).map(rewriteImportSpecifier).join(", ")}}`
+        ? `{${flatMapImportSpecifiers(node, rewriteImportSpecifier).join(", ")}}`
         : (node.specifiers.find(isNamespaceSpecifier)?.local.name ?? "{}");
 }
+export function flatMapImportSpecifiers(node, f) {
+    return node.specifiers.flatMap((node) => {
+        if (node.type === "ImportNamespaceSpecifier")
+            throw new SyntaxError("unexpected namespace specifier");
+        return isViewImport(node)
+            ? [f(node), f(toSpecialImportSpecifier(node, "viewof"))]
+            : isMutableImport(node)
+                ? [f(node), f(toSpecialImportSpecifier(node, "mutable"))]
+                : f(node);
+    });
+}
 function rewriteImportSpecifier(node) {
     return getImportedName(node) === getLocalName(node)
         ? getLocalName(node)

package/dist/src/javascript/observable.js

@@ -1,5 +1,6 @@
 import { parseCell } from "@observablehq/parser";
 import { rewriteFileExpressions } from "./files.js";
+import { flatMapImportSpecifiers, rewriteImportDeclarations } from "./imports.js";
 import { Sourcemap } from "./sourcemap.js";
 import { transpileJavaScript } from "./transpile.js";
 import { simple } from "./walk.js";
@@ -7,14 +8,12 @@ export function transpileObservable(input, options) {
     const cell = parseCell(input);
     if (!cell.body)
         return transpileJavaScript(input);
+    if (isImportCell(cell))
+        return transpileObservableImport(input, cell, 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);
     const inputs = Array.from(new Set(cell.references.map(asReference)));
@@ -42,13 +41,46 @@ export function transpileObservable(input, options) {
         secrets: new Set(cell.secrets.keys())
     };
 }
-/** 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)) {
-        output.insertLeft(body.source.start + 1, "observable:");
+function isImportCell(cell) {
+    return cell.body.type === "ImportDeclaration";
+}
+function transpileObservableImport(input, cell, options) {
+    const output = new Sourcemap(input).trim();
+    const inputs = ["@variable"];
+    const declarations = flatMapImportSpecifiers(cell.body, (s) => s.local);
+    const outputs = Array.from(new Set(declarations.map(asDeclaration)));
+    transformObservableImport(cell.body);
+    rewriteImportDeclarations(output, cell.body, inputs, options);
+    output.insertLeft(0, `async (__variable) => {\n`);
+    if (outputs.length > 0)
+        output.insertRight(input.length, `\nreturn {${outputs}};`);
+    output.insertRight(input.length, "\n}");
+    const body = String(output);
+    return {
+        body,
+        inputs,
+        outputs,
+        autodisplay: false,
+        files: new Set(),
+        secrets: new Set(),
+        databases: new Set()
+    };
+}
+/** Mutates the given import declaration to be an Observable import. */
+function transformObservableImport(body) {
+    const source = body.source.value;
+    if (typeof source === "string" && !/^\w+:/.test(source)) {
+        body.source.value = `observable:${source}`;
     }
-    output.insertRight(body.end, ";");
+    body.attributes = [
+        {
+            type: "ImportAttribute",
+            key: { type: "Literal", value: "type", start: 0, end: 0 },
+            value: { type: "Literal", value: "observable", start: 0, end: 0 },
+            start: 0,
+            end: 0
+        }
+    ];
 }
 /** Rewrite viewof x ↦ viewof$x, and mutable x ↦ mutable$x.value. */
 function rewriteSpecialReferences(output, body) {
@@ -58,28 +90,9 @@ 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/styles/inspector.css

@@ -84,6 +84,7 @@
 }
 
 .observablehq--cell {
+  position: relative;
   margin: 17px 0;
   min-height: 1px; /* prevent margin collapse when empty */
 }

package/package.json

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