@riebeckite/plugin-vega-lite 0.0.31 → 0.0.33

package/README.md

@@ -54,6 +54,20 @@ Put a Vega-Lite specification as JSON in the body of the code block. Both
 The caption comes from the code-block `title`, or from the specification's
 `title`.
 
+## Live example
+
+~~~vega-lite
+{
+  "title": "Revenue",
+  "data": { "values": [{ "category": "A", "value": 28 }, { "category": "B", "value": 55 }] },
+  "mark": "bar",
+  "encoding": {
+    "x": { "field": "category", "type": "nominal" },
+    "y": { "field": "value", "type": "quantitative" }
+  }
+}
+~~~
+
 ## How it renders
 
 A ` ```vega-lite ` block becomes a `figure.rb-vega-lite`:
@@ -110,7 +124,7 @@ JavaScript is disabled and the spec stays readable in the fallback `details`.
 
 ## Main exports
 
-- `vegaLite(options?)`: create the plugin (`vegaLitePlugin` is an alias)
+- `vegaLite(options?)`: create the plugin (`vegaLite` is an alias)
 - `initVegaLite`: initialize client-side rendering
 - Types: `VegaLiteOptions`, `VegaLiteSpec`, `VegaLiteTheme`,
   `VegaLiteRenderer`

package/README_ja.md

@@ -51,7 +51,21 @@ export default defineConfig({
 
 キャプションにはコードブロックの `title`、なければ仕様の `title` を使います。
 
-## どのように描画されるか
+## 実行例
+
+~~~vega-lite
+{
+  "title": "Revenue",
+  "data": { "values": [{ "category": "A", "value": 28 }, { "category": "B", "value": 55 }] },
+  "mark": "bar",
+  "encoding": {
+    "x": { "field": "category", "type": "nominal" },
+    "y": { "field": "value", "type": "quantitative" }
+  }
+}
+~~~
+
+## 描画の仕組み
 
 ` ```vega-lite ` のコードブロックは `figure.rb-vega-lite` に置き換わります。
 
@@ -62,7 +76,7 @@ export default defineConfig({
 
 `initVegaLite` は `[data-vega-lite]` を探し、`data-vega-lite-spec` を `JSON.parse` してから `vega`、`vega-lite`、`vega-embed` を動的インポートして `vega-embed` で描画します。描画に成功すると `data-vega-lite="rendered"` になります。
 
-`vega-embed` の読み込み、仕様の `JSON.parse`、描画のいずれかが失敗した場合は例外を投げず、その figure の `details` を開いて元の仕様を見せます（`data-vega-lite="error"`）。
+`vega-embed` の読み込み、仕様の `JSON.parse`、描画のいずれかが失敗した場合は例外を投げず、その `<figure>` の `details` を開いて元の仕様を見せます（`data-vega-lite="error"`）。
 
 JSON を解析できないコードブロックは置き換えず、通常のコードブロックのまま残し、`@riebeckite/plugin-vega-lite` を `source` に持つ診断を出します。
 
@@ -74,13 +88,13 @@ JSON を解析できないコードブロックは置き換えず、通常のコ
 | `actions` | `null` | `vega-embed` の操作メニューを表示する（`true` / `false` / `null`） |
 | `theme` | `"light"` | 配色（`"light"`、`"dark"`、`"none"`） |
 | `renderer` | `"canvas"` | Vega のレンダラー（`"canvas"` または `"svg"`） |
-| `className` | `"rb-vega-lite"` | figure に付ける基準クラス |
+| `className` | `"rb-vega-lite"` | `<figure>` に付ける基準クラス |
 
 `actions` が `null` のときは `vega-embed` の既定（操作メニューあり）に従います。`theme` が `"light"` または `"none"` のときは Vega 既定の明るい配色を使い、`"dark"` のときだけ `vega-embed` の `dark` テーマを適用します。
 
 ## クライアント側の描画
 
-クライアントの初期化コードは静的なので、プラグインのオプションは受け取りません。`actions`、`theme`、`renderer` は figure の `data-vega-lite-*` 属性に埋め込まれ、`initVegaLite` がそこから読み取ります。
+クライアントの初期化コードは静的なので、プラグインのオプションは受け取りません。`actions`、`theme`、`renderer` は `<figure>` の `data-vega-lite-*` 属性に埋め込まれ、`initVegaLite` がそこから読み取ります。
 
 Vega ランタイムは `import()` で動的に読み込むため、JavaScript を無効にしていてもページは表示され、仕様はフォールバックの `details` から読めます。
 
@@ -94,7 +108,7 @@ Vega ランタイムは `import()` で動的に読み込むため、JavaScript
 
 ## 主なエクスポート
 
-- `vegaLite(options?)`: プラグインを作成する（`vegaLitePlugin` は別名）
+- `vegaLite(options?)`: プラグインを作成する（`vegaLite` は別名）
 - `initVegaLite`: クライアント側の描画を初期化する
 - 型: `VegaLiteOptions`、`VegaLiteSpec`、`VegaLiteTheme`、`VegaLiteRenderer`
 

package/dist/client.d.ts

@@ -1,3 +1,7 @@
+type ClientContext = {
+    root?: ParentNode;
+    signal?: AbortSignal;
+};
 /**
  * Renders every server-emitted `[data-vega-lite]` figure in the browser.
  *
@@ -6,4 +10,5 @@
  * `<details>`) when JavaScript is disabled. A broken payload or a Vega error
  * reveals the fallback for that figure without affecting the rest of the page.
  */
-export declare function initVegaLite(): Promise<void>;
+export declare function initVegaLite(context?: ClientContext): Promise<undefined | (() => void)>;
+export {};

package/dist/client.js

@@ -1,9 +1,10 @@
 // client.ts
 var FIGURE_SELECTOR = "[data-vega-lite]";
 var CANVAS_SELECTOR = "[data-vega-lite-canvas]";
-async function initVegaLite() {
+async function initVegaLite(context = {}) {
+  const root = context.root ?? document;
   const figures = Array.from(
-    document.querySelectorAll(FIGURE_SELECTOR)
+    root.querySelectorAll(FIGURE_SELECTOR)
   );
   if (figures.length === 0) return;
   let embed;
@@ -18,33 +19,46 @@ async function initVegaLite() {
     for (const figure of figures) revealFallback(figure);
     return;
   }
+  if (context.signal?.aborted) return;
+  const views = [];
   for (const figure of figures) {
-    await renderFigure(embed, figure);
+    if (context.signal?.aborted || !figure.isConnected) return;
+    const view = await renderFigure(embed, figure, context.signal);
+    if (view) views.push(view);
   }
+  return () => {
+    for (const view of views) view.finalize();
+  };
 }
-async function renderFigure(embed, figure) {
+async function renderFigure(embed, figure, signal) {
   const canvas = figure.querySelector(CANVAS_SELECTOR);
   const serialized = figure.dataset.vegaLiteSpec;
   if (!canvas || !serialized) {
     revealFallback(figure);
-    return;
+    return void 0;
   }
   let spec;
   try {
     spec = JSON.parse(serialized);
   } catch {
     revealFallback(figure);
-    return;
+    return void 0;
   }
   try {
-    await embed(
+    const result = await embed(
       canvas,
       spec,
       buildEmbedOptions(figure)
     );
+    if (signal?.aborted || !figure.isConnected) {
+      result.view.finalize();
+      return void 0;
+    }
     figure.dataset.vegaLite = "rendered";
+    return result.view;
   } catch {
     revealFallback(figure);
+    return void 0;
   }
 }
 function buildEmbedOptions(figure) {

package/dist/index.d.ts

@@ -7,5 +7,3 @@ export type { VegaLiteOptions, VegaLiteRenderer, VegaLiteSpec, VegaLiteTheme, }
  * `initVegaLite`, which imports the Vega runtime dynamically.
  */
 export declare function vegaLite(options?: VegaLiteOptions): import("@riebeckite/core").RiebeckitePlugin<VegaLiteOptions>;
-/** Alias kept for symmetry with the other plugin factories. */
-export declare const vegaLitePlugin: typeof vegaLite;

package/dist/index.js

@@ -6,50 +6,20 @@ import {
 } from "@riebeckite/core";
 
 // src/hast.ts
-function visitElements(node, visitor, parent, index) {
-  if (isElementNode(node)) visitor(node, parent, index);
-  for (const [childIndex, child] of [...getChildren(node)].entries()) {
-    visitElements(
-      child,
-      visitor,
-      hasChildren(node) ? node : parent,
-      childIndex
-    );
-  }
-}
-function element(tagName, properties = {}, children = []) {
-  return { type: "element", tagName, properties, children };
-}
-function text(value) {
-  return { type: "text", value };
-}
-function getTextContent(node) {
-  if (node.type === "text" && "value" in node && typeof node.value === "string") {
-    return node.value;
-  }
-  return getChildren(node).map(getTextContent).join("");
-}
-function getStringProperty(node, key) {
-  const value = node.properties?.[key];
-  if (typeof value === "string") return value;
-  if (Array.isArray(value)) return value.join(" ");
-  return null;
-}
-function hasClass(node, className) {
-  const value = node.properties?.className;
-  const classes = Array.isArray(value) ? value.map(String) : typeof value === "string" ? value.split(/\s+/) : [];
-  return classes.includes(className);
-}
-function isElementNode(node) {
-  return node.type === "element";
-}
-function hasChildren(node) {
-  return Array.isArray(node.children);
-}
-function getChildren(node) {
-  const children = node.children;
-  return Array.isArray(children) ? children : [];
-}
+import {
+  element as sharedElement,
+  getStringProperty as sharedGetStringProperty,
+  getTextContent as sharedGetTextContent,
+  hasClass as sharedHasClass,
+  text as sharedText,
+  visitElements as sharedVisitElements
+} from "@riebeckite/diagram";
+var element = sharedElement;
+var text = sharedText;
+var getTextContent = sharedGetTextContent;
+var getStringProperty = sharedGetStringProperty;
+var hasClass = sharedHasClass;
+var visitElements = sharedVisitElements;
 
 // src/rehype.ts
 var DEFAULT_CLASS_NAME = "rb-vega-lite";
@@ -117,7 +87,7 @@ function buildFigure(input) {
     );
   }
   children.push(
-    element("details", { className: `${base}__fallback` }, [
+    element("details", { className: `${base}__fallback rb-source-fallback` }, [
       element("summary", {}, [text("Vega-Lite spec")]),
       element("pre", {}, [element("code", {}, [text(input.source)])])
     ])
@@ -210,12 +180,14 @@ function vegaLite(options = {}) {
       createClientEntry(
         "vega-lite",
         "@riebeckite/plugin-vega-lite/client",
-        "initVegaLite"
+        "initVegaLite",
+        void 0,
+        void 0,
+        "context"
       )
     ]
   });
 }
-var vegaLitePlugin = vegaLite;
 function validateVegaLiteOptions(options) {
   if (!options) return [];
   const issues = [];
@@ -250,6 +222,5 @@ function isRenderer(value) {
 }
 export {
   rehypeVegaLite,
-  vegaLite,
-  vegaLitePlugin
+  vegaLite
 };

package/dist/src/hast.d.ts

@@ -1,7 +1,7 @@
 import type { ElementNode, HastNode, ParentNode, TextNode } from "./types.js";
-export declare function visitElements(node: HastNode, visitor: (node: ElementNode, parent?: ParentNode, index?: number) => void, parent?: ParentNode, index?: number): void;
-export declare function element(tagName: string, properties?: Record<string, unknown>, children?: HastNode[]): ElementNode;
-export declare function text(value: string): TextNode;
-export declare function getTextContent(node: HastNode): string;
-export declare function getStringProperty(node: ElementNode, key: string): string | null;
-export declare function hasClass(node: ElementNode, className: string): boolean;
+export declare const element: (tagName: string, properties?: Record<string, unknown>, children?: HastNode[]) => ElementNode;
+export declare const text: (value: string) => TextNode;
+export declare const getTextContent: (node: HastNode) => string;
+export declare const getStringProperty: (node: ElementNode, key: string) => string | null;
+export declare const hasClass: (node: ElementNode, className: string) => boolean;
+export declare const visitElements: (node: HastNode, visitor: (node: ElementNode, parent?: ParentNode, index?: number) => void, parent?: ParentNode, index?: number) => void;

package/dist/src/types.d.ts

@@ -32,7 +32,7 @@ export type TextNode = {
     type: "text";
     value: string;
 };
-export type RawNode = {
+type RawNode = {
     type: "raw";
     value: string;
 };
@@ -40,3 +40,4 @@ export type HastNode = ElementNode | TextNode | RawNode | {
     type: string;
     [key: string]: unknown;
 };
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@riebeckite/plugin-vega-lite",
-  "version": "0.0.31",
+  "version": "0.0.33",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./dist/index.js",
@@ -21,10 +21,11 @@
     "./style.css": "./style.css"
   },
   "dependencies": {
+    "@riebeckite/core": "0.0.33",
+    "@riebeckite/diagram": "0.0.33",
     "vega": "^6.4.0",
     "vega-embed": "^7.3.0",
-    "vega-lite": "^6.4.3",
-    "@riebeckite/core": "0.0.31"
+    "vega-lite": "^6.4.3"
   },
   "publishConfig": {
     "access": "public"

package/style.css

@@ -40,26 +40,6 @@
   height: auto;
 }
 
-.rb-vega-lite__fallback {
-  border-top: 1px solid var(--rb-vega-lite-rule);
-  color: var(--rb-vega-lite-muted);
-  font-size: 0.8125rem;
-}
-
-.rb-vega-lite__fallback summary {
-  cursor: pointer;
-  padding: 0.5rem 0.75rem;
-}
-
-.rb-vega-lite__fallback pre {
-  overflow: auto;
-  margin: 0 1rem;
-  padding: 0.75rem;
-  border-top: 1px solid var(--rb-vega-lite-rule);
-  color: var(--rb-vega-lite-ink);
-  background: color-mix(in srgb, var(--rb-vega-lite-ink) 6%, transparent);
-}
-
 .rb-vega-lite[data-vega-lite="error"] .rb-vega-lite__canvas::before,
 .rb-vega-lite[data-vega-lite="pending"] .rb-vega-lite__canvas:empty::before {
   content: "Chart could not be rendered.";