@observablehq/notebook-kit 1.0.0

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

@@ -0,0 +1,110 @@
+const SRC_SELECTOR = [
+    "audio source[src]", // audio
+    "audio[src]", // audio
+    "img[src]", // images
+    "picture source[src]", // images
+    "video source[src]", // videos
+    "video[src]" // videos
+].join();
+const SRCSET_SELECTOR = [
+    "img[srcset]", // images
+    "picture source[srcset]" // images
+].join();
+const HREF_SELECTOR = [
+    "a[href][download]", // download links
+    "link[href]" // stylesheets
+].join();
+const ASSET_ATTRIBUTES = [
+    [SRC_SELECTOR, "src"],
+    [SRCSET_SELECTOR, "srcset"],
+    [HREF_SELECTOR, "href"]
+];
+/** Populates the asset keys from the specified root.  */
+export function collectAssets(assets, root) {
+    for (const [selector, name] of ASSET_ATTRIBUTES) {
+        for (const element of root.querySelectorAll(selector)) {
+            if (isRelExternal(element))
+                continue;
+            const source = decodeURI(element.getAttribute(name));
+            if (name === "srcset") {
+                for (const s of parseSrcset(source)) {
+                    if (isSourcePath(s)) {
+                        assets.add(asImportPath(s));
+                    }
+                }
+            }
+            else if (isSourcePath(source)) {
+                assets.add(asImportPath(source));
+            }
+        }
+    }
+}
+/** Mutates the specified root to apply the specified asset mapping. */
+export function mapAssets(root, assets) {
+    const resolve = (s) => assets.get(asImportPath(s)) ?? s;
+    for (const [selector, src] of ASSET_ATTRIBUTES) {
+        for (const element of root.querySelectorAll(selector)) {
+            if (isRelExternal(element))
+                continue;
+            const source = decodeURI(element.getAttribute(src));
+            if (src === "srcset")
+                element.setAttribute(src, resolveSrcset(source, resolve));
+            else
+                element.setAttribute(src, resolve(source));
+        }
+    }
+}
+/** Returns true if the specified element has rel=external. */
+function isRelExternal(a) {
+    return /(?:^|\s)external(?:\s|$)/i.test(a.getAttribute("rel") ?? ""); // e.g., <a href rel="external">
+}
+/** Strips the query string and anchor fragment from the specified source. */
+function asPath(source) {
+    const i = source.indexOf("?");
+    const j = source.indexOf("#");
+    const k = i >= 0 && j >= 0 ? Math.min(i, j) : i >= 0 ? i : j;
+    return k >= 0 ? source.slice(0, k) : source; // strip query string or anchor fragment
+}
+/** Converts the specified source into an import path, typically with ./. */
+function asImportPath(source) {
+    const path = asPath(source);
+    return isImportPath(path) ? path : `./${path}`;
+}
+/**
+ * Returns true if the specified import specifier is a path, as opposed to a
+ * bare module specifier or a URL; import paths start with ./, ../, or /.
+ */
+function isImportPath(specifier) {
+    return ["./", "../", "/"].some((prefix) => specifier.startsWith(prefix));
+}
+/**
+ * Returns true if the specified source (such as an img element src attribute)
+ * is a path; this is anything that is not empty and does not start with a
+ * protocol or a hash.
+ */
+function isSourcePath(specifier) {
+    return asPath(specifier) ? !/^(\w+:|#)/.test(specifier) : false;
+}
+/** Parses the specified srcset attribute, returning the array of sources. */
+function parseSrcset(srcset) {
+    return srcset
+        .trim()
+        .split(/\s*,\s*/)
+        .filter((src) => src)
+        .map((src) => src.split(/\s+/)[0]);
+}
+/** Resolves the specified srcset attribute, resolving any sources. */
+function resolveSrcset(srcset, resolve) {
+    return srcset
+        .trim()
+        .split(/\s*,\s*/)
+        .filter((src) => src)
+        .map((src) => {
+        const parts = src.split(/\s+/);
+        const path = resolve(parts[0]);
+        if (path)
+            parts[0] = encodeURI(path);
+        return parts.join(" ");
+    })
+        .join(", ");
+}

package/dist/src/runtime/stdlib/assets.test.d.ts

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

package/dist/src/runtime/stdlib/assets.test.js

@@ -0,0 +1,78 @@
+// @vitest-environment jsdom
+import { html } from "htl";
+import { assert, test } from "vitest";
+import { collectAssets } from "./assets.js";
+function getAssets(root) {
+    const assets = new Set();
+    collectAssets(assets, root);
+    return assets;
+}
+test("find asset paths in descendants", () => {
+    assert.deepStrictEqual(new Set([
+        "./a-href.txt",
+        "./audio-source-src.wav",
+        "./audio-src.wav",
+        "./img-src.png",
+        "./img-srcset-src.png",
+        "./img-srcset.png",
+        "./link.css",
+        "./picture-source-src.png",
+        "./picture-srcset-src.png",
+        "./picture-srcset.png",
+        "./video-source-src.mp4",
+        "./video-src.mp4"
+    ]), getAssets(html `<div>
+      <a href="./a-href.txt" download>download</a>
+      <audio><source src="./audio-source-src.wav"></audio>
+      <audio src="./audio-src.wav"></audio>
+      <img src="./img-src.png">
+      <img src="./img-srcset-src.png" srcset="./img-srcset.png 2x">
+      <link href="./link.css" rel="stylesheet">
+      <picture><source src="./picture-source-src.png"></picture>
+      <picture><source src="./picture-srcset-src.png" srcset="./picture-srcset.png 2x"></picture>
+      <video><source src="./video-source-src.mp4"></video>
+      <video src="./video-src.mp4"></video>
+    </div>`));
+});
+test("decodes paths", () => {
+    assert.deepStrictEqual(new Set(["./hello world.png"]), getAssets(html `<div><img src="./hello%20world.png"></div>`));
+});
+test("strips query strings and anchor fragments from the path", () => {
+    assert.deepStrictEqual(new Set(["./img1.png", "./img2.png", "./img3.png", "./img4.png"]), getAssets(html `<div>
+      <img src="./img1.png?foo=bar">
+      <img src="./img2.png#baz">
+      <img src="./img3.png?foo#bar">
+      <img src="./img4.png#foo?bar">
+    </div>`));
+});
+test("adds a leading dot slash to relative paths", () => {
+    assert.deepStrictEqual(new Set([
+        "./file.png",
+        "./path/to/file.png",
+        "/root.png",
+        "./dot-slash.png",
+        "../dot-dot-slash.png"
+    ]), getAssets(html `<div>
+      <img src="file.png">
+      <img src="path/to/file.png">
+      <img src="/root.png">
+      <img src="./dot-slash.png">
+      <img src="../dot-dot-slash.png">
+    </div>`));
+});
+test("ignores protocol links", () => {
+    assert.deepStrictEqual(new Set([]), getAssets(html `<div>
+      <img src="https://example.com/test.png">
+    </div>`));
+});
+test("ignores fragment links", () => {
+    assert.deepStrictEqual(new Set([]), getAssets(html `<div>
+      <a href="#test" download>download</a>
+    </div>`));
+});
+test("ignores rel=external elements", () => {
+    assert.deepStrictEqual(new Set(["./internal.txt"]), getAssets(html `<div>
+      <a href="external.txt" rel="external" download>download</a>
+      <a href="internal.txt" rel="notexternal" download>download</a>
+    </div>`));
+});

package/dist/src/runtime/stdlib/dom/canvas.d.ts

@@ -0,0 +1 @@
+export declare function canvas(width: number, height: number): HTMLCanvasElement;

package/dist/src/runtime/stdlib/dom/canvas.js

@@ -0,0 +1,6 @@
+export function canvas(width, height) {
+    const canvas = document.createElement("canvas");
+    canvas.width = width;
+    canvas.height = height;
+    return canvas;
+}

package/dist/src/runtime/stdlib/dom/context2d.d.ts

@@ -0,0 +1 @@
+export declare function context2d(width: number, height: number, dpi?: number): CanvasRenderingContext2D;

package/dist/src/runtime/stdlib/dom/context2d.js

@@ -0,0 +1,9 @@
+export function context2d(width, height, dpi = devicePixelRatio) {
+    const canvas = document.createElement("canvas");
+    canvas.width = width * dpi;
+    canvas.height = height * dpi;
+    canvas.style.width = `${width}px`;
+    const context = canvas.getContext("2d");
+    context.scale(dpi, dpi);
+    return context;
+}

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

@@ -0,0 +1,5 @@
+export { canvas } from "./canvas.js";
+export { context2d } from "./context2d.js";
+export { svg } from "./svg.js";
+export { text } from "./text.js";
+export { uid } from "./uid.js";

package/dist/src/runtime/stdlib/dom/index.js

@@ -0,0 +1,5 @@
+export { canvas } from "./canvas.js";
+export { context2d } from "./context2d.js";
+export { svg } from "./svg.js";
+export { text } from "./text.js";
+export { uid } from "./uid.js";

package/dist/src/runtime/stdlib/dom/svg.d.ts

@@ -0,0 +1 @@
+export declare function svg(width: number, height: number): SVGSVGElement;

package/dist/src/runtime/stdlib/dom/svg.js

@@ -0,0 +1,7 @@
+export function svg(width, height) {
+    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    svg.setAttribute("viewBox", `0 0 ${width} ${height}`);
+    svg.setAttribute("width", `${width}`);
+    svg.setAttribute("height", `${height}`);
+    return svg;
+}

package/dist/src/runtime/stdlib/dom/text.d.ts

@@ -0,0 +1 @@
+export declare function text(value: string): Text;

package/dist/src/runtime/stdlib/dom/text.js

@@ -0,0 +1,3 @@
+export function text(value) {
+    return document.createTextNode(value);
+}

package/dist/src/runtime/stdlib/dom/uid.d.ts

@@ -0,0 +1,8 @@
+export declare function uid(name?: string): Id;
+declare class Id {
+    id: string;
+    href: string;
+    constructor(id: string);
+    toString(): string;
+}
+export {};

package/dist/src/runtime/stdlib/dom/uid.js

@@ -0,0 +1,25 @@
+let count = 0;
+export function uid(name) {
+    return new Id(`O-${name == null ? "" : `${name}-`}${++count}`);
+}
+class Id {
+    constructor(id) {
+        Object.defineProperty(this, "id", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "href", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.id = id;
+        this.href = new URL(`#${id}`, location.href).href;
+    }
+    toString() {
+        return `url(${this.href})`;
+    }
+}

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

@@ -0,0 +1,2 @@
+import type { RawTemplateRenderer } from "./template.js";
+export declare const dot: RawTemplateRenderer;

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

@@ -0,0 +1,34 @@
+import { instance } from "npm:@viz-js/viz";
+const viz = await instance();
+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"
+        }
+    });
+    for (const e of svg.querySelectorAll("[stroke='#000001'][stroke-opacity='0.003922']")) {
+        e.setAttribute("stroke", "currentColor");
+        e.removeAttribute("stroke-opacity");
+    }
+    for (const e of svg.querySelectorAll("[fill='#000001'][fill-opacity='0.003922']")) {
+        e.setAttribute("fill", "currentColor");
+        e.removeAttribute("fill-opacity");
+    }
+    svg.remove();
+    svg.style = "max-width: 100%; height: auto;";
+    return svg;
+};

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

@@ -0,0 +1,24 @@
+export class DuckDBClient {
+    static of(sources?: {}, config?: {}): Promise<DuckDBClient>;
+    static sql(...args: any[]): Promise<(strings: any, ...args: any[]) => Promise<any>>;
+    constructor(db: any);
+    queryStream(query: any, params: any): Promise<{
+        schema: any;
+        readRows(): AsyncGenerator<any, void, unknown>;
+    }>;
+    query(query: any, params: any): Promise<any>;
+    queryRow(query: any, params: any): Promise<any>;
+    sql(strings: any, ...args: any[]): Promise<any>;
+    queryTag(strings: any, ...params: any[]): any[];
+    escape(name: any): string;
+    describeTables(): Promise<{
+        name: any;
+    }[]>;
+    describeColumns(options?: {}): Promise<{
+        name: any;
+        type: string;
+        nullable: boolean;
+        databaseType: any;
+    }[]>;
+    readonly dialect: string;
+}