@riebeckite/plugin-d2 0.0.31 → 0.0.33

package/README.md

@@ -50,6 +50,13 @@ client -> server: request
 ```
 ````
 
+## Live example
+
+~~~d2
+site: Riebeckite
+content -> build -> deploy
+~~~
+
 ## Behavior
 
 ### Build
@@ -110,7 +117,7 @@ copy if the deployment has no outbound network access.
 
 ## Exports
 
-- `d2(options?)` — plugin factory (`d2Plugin` is an alias)
+- `d2(options?)` — plugin factory (`d2` is an alias)
 - `initD2Diagrams` — client initializer
 - Types: `D2Options`, `D2ClientOptions`, `D2RenderMode`, `D2Layout`, `D2Theme`,
   `D2ModuleApi`

package/README_ja.md

@@ -2,11 +2,11 @@
 
 <!-- Generated from docs/docs/plugins/d2.ja.md. Edit the canonical documentation in docs/docs/plugins and run `pnpm docs:sync`. -->
 
-` ```d2 ` コードブロックを SVG の図として表示するプラグインです。既定ではビルド時に描画し、描画できなかった図だけをブラウザ側で再試行します。
+` ```d2 ` コードブロックを SVG の図として表示するプラグインです。既定ではビルド時に描画し、描画できなかった図だけをブラウザで描画し直します。
 
 [English](./README.md)
 
-## 設定する
+## 設定
 
 ```ts
 import { defineConfig } from "@riebeckite/core";
@@ -44,23 +44,30 @@ client -> server: request
 ```
 ````
 
-## どのように描画されるか
+## 実行例
 
-### ビルド時
+~~~d2
+site: Riebeckite
+content -> build -> deploy
+~~~
+
+## 描画の仕組み
+
+### ビルド時の描画
 
 ` ```d2 ` のコードブロックは `figure.rb-d2` に置き換わります。
 
-- `figcaption.rb-d2__caption`: コードブロックの title、または `# caption:` 行
+- `figcaption.rb-d2__caption`: コードブロックの `title`、または `# caption:` 行
 - `div.rb-d2__canvas`: 図本体（`role="img"`、キャプションがある場合はそれをラベルに使用）
 - `details.rb-d2__fallback`: 元の D2 記法を折りたたんで表示
 
 `render: "build"` では、D2.js の WebAssembly 版（`@d2lang/d2`）を Node 上で直接実行して静的な SVG を生成します。ブラウザ、ネットワーク接続、D2 本体のインストールはいずれも不要です。
 
-生成される figure には常に `data-d2`、`data-d2-source`、`data-d2-layout` が付きます。`data-d2` は静的 SVG があれば `rendered`、クライアント側の描画に委ねる場合は `pending` になります。
+生成される `figure` には常に `data-d2`、`data-d2-source`、`data-d2-layout` が付きます。`data-d2` は静的 SVG があれば `rendered`、クライアント側の描画に委ねる場合は `pending` になります。
 
 構文エラーは `invalid-diagram`、描画環境の問題は `renderer-error` として区別して診断します。
 
-### クライアント側
+### クライアント側の描画
 
 `initD2Diagrams` は保留中の図だけを描画します。D2.js がなければ jsDelivr から ESM として読み込みます。描画に失敗した場合は `data-d2="error"` となり、CSS のプレースホルダー表示に切り替わります。
 
@@ -70,31 +77,31 @@ client -> server: request
 
 | 項目 | 既定値 | 説明 |
 | --- | --- | --- |
-| `render` | `"build"` | `"build"` または `"client"` のいずれで描画するか |
+| `render` | `"build"` | ビルド時とクライアント側のどちらで描画するか |
 | `theme` | `{ light: 0, dark: 1 }` | D2 のテーマ ID、または明暗別のテーマ ID |
 | `layout` | `"dagre"` | D2 のレイアウトエンジン（`"dagre"` または `"elk"`） |
-| `caption` | `true` | タイトルまたは `# caption:` をキャプションとして表示する |
+| `caption` | `true` | `title` または `# caption:` をキャプションとして表示する |
 | `fallback` | `true` | 元の D2 記法を `<details>` に残す |
-| `className` | `"rb-d2"` | figure に付ける基準クラス |
+| `className` | `"rb-d2"` | `figure` に付ける基準クラス |
 
-`"client"` はビルド時の描画を行いません。
+`"client"` はビルド時に描画せず、ブラウザでのみ描画します。
 
 ## オフラインでの利用
 
 ビルド時の描画は完全にオフラインです。`@d2lang/d2` が同梱する WebAssembly を `node_modules` から読み込むだけで、外部通信は発生しません。クライアント側の描画（`render: "client"` またはビルド失敗時）は jsDelivr から D2.js を取得します。外部通信を避けたい場合は `moduleUrl` に自前でホストしたモジュールを指定してください。
 
-## 出力のフック
+## 出力フック
 
 - `globalThis.d2` に読み込み済みの D2.js モジュールを設定すると、CDN からの読み込みを省略できます
 - `initD2Diagrams()` を直接呼ぶ場合は `api` と `moduleUrl` を渡せます
 
 ## 主なエクスポート
 
-- `d2(options?)`: プラグインを作成する（`d2Plugin` は別名）
+- `d2(options?)`: プラグインを作成する（`d2` は別名）
 - `initD2Diagrams`: クライアント側の描画を初期化する
 - 型: `D2Options`、`D2ClientOptions`、`D2RenderMode`、`D2Layout`、`D2Theme`、`D2ModuleApi`
 
-## 制限
+## 制限事項
 
 - 図ごとに新しい D2 ワーカーを起動するため、大量の図を含むビルドでは WASM の起動コストが繰り返し発生します
 - `layout: "elk"` は D2 の ELK エンジンを使うため `dagre` より遅くなります

package/dist/index.d.ts

@@ -1,5 +1,3 @@
 import type { D2Options } from "./src/types.js";
 export type { D2ClientOptions, D2Layout, D2ModuleApi, D2Options, D2RenderMode, D2Theme, } from "./src/types.js";
 export declare function d2(options?: D2Options): import("@riebeckite/core").RiebeckitePlugin<D2Options>;
-/** Alias matching the `*Plugin` convention used by several packages. */
-export declare const d2Plugin: typeof d2;

package/dist/index.js

@@ -14,52 +14,23 @@ var __export = (target, all) => {
 };
 
 // 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, text, getTextContent, getStringProperty, hasClass, visitElements;
 var init_hast = __esm({
   "src/hast.ts"() {
+    element = sharedElement;
+    text = sharedText;
+    getTextContent = sharedGetTextContent;
+    getStringProperty = sharedGetStringProperty;
+    hasClass = sharedHasClass;
+    visitElements = sharedVisitElements;
   }
 });
 
@@ -271,10 +242,14 @@ function buildFigure(input) {
   );
   if (input.fallback) {
     children.push(
-      element("details", { className: `${base}__fallback` }, [
-        element("summary", {}, [text("Diagram source")]),
-        element("pre", {}, [element("code", {}, [text(input.source)])])
-      ])
+      element(
+        "details",
+        { className: `${base}__fallback rb-source-fallback` },
+        [
+          element("summary", {}, [text("Diagram source")]),
+          element("pre", {}, [element("code", {}, [text(input.source)])])
+        ]
+      )
     );
   }
   return element(
@@ -394,7 +369,6 @@ function d2(options = {}) {
     ]
   });
 }
-var d2Plugin = d2;
 function validateD2Options(options) {
   if (!options) return [];
   const issues = [];
@@ -434,6 +408,5 @@ function rehypeD2Lazy(options = {}) {
   };
 }
 export {
-  d2,
-  d2Plugin
+  d2
 };

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@riebeckite/plugin-d2",
-  "version": "0.0.31",
+  "version": "0.0.33",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./dist/index.js",
@@ -22,7 +22,8 @@
   },
   "dependencies": {
     "@d2lang/d2": "^0.1.34",
-    "@riebeckite/core": "0.0.31"
+    "@riebeckite/core": "0.0.33",
+    "@riebeckite/diagram": "0.0.33"
   },
   "publishConfig": {
     "access": "public"

package/style.css

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