@riebeckite/plugin-mermaid 0.0.32 → 0.0.33

package/README.md

@@ -31,6 +31,17 @@ export default defineConfig({
 });
 ```
 
+## Live example
+
+This site renders `mermaid` fences with Mermaid (Pele), not the headless browser build. Both plugins accept the same fence:
+
+~~~mermaid
+flowchart LR
+  Draft --> Review --> Published
+~~~
+
+See [Mermaid (Pele)](../mermaid-pele/README.md) for the renderer used here.
+
 ## Behavior
 
 ### Build

package/README_ja.md

@@ -8,7 +8,7 @@
 
 ヘッドレスブラウザを使わずに静的 SVG を生成したい場合は [Mermaid (Pele)](../mermaid-pele/README_ja.md) を使ってください。
 
-## 設定する
+## 使い方
 
 ```ts
 import { defineConfig } from "@riebeckite/core";
@@ -27,17 +27,28 @@ export default defineConfig({
 
 このプラグインは `order: -10` で実行されます。Mermaid のコードブロックを先に処理したい場合に適した順序です。
 
-## どのように描画されるか
+## 実行例
 
-` ```mermaid ` のコードブロックは `figure.rr-mermaid` に置き換わります。図のタイトルはコードブロックの title、またはソース内の `%% caption: ...` 行から取得します。図には代替テキスト相当の `role="img"` を付け、必要に応じて元の記法を折りたたみ表示します。
+このサイトでは `mermaid` フェンスを headless browser 版ではなく Mermaid (Pele) で描画しています。どちらのプラグインも同じフェンスを受け付けます。
 
-`render: "build"` では、Puppeteer が起動するヘッドレス Chromium 上で Mermaid を実行し、静的な SVG を生成します。簡易な DOM 実装や寸法の推測には頼らないため、ブラウザと同じレイアウトエンジンで図を作れます。Mermaid は `securityLevel: "strict"` で実行されます。
+~~~mermaid
+flowchart LR
+  Draft --> Review --> Published
+~~~
 
-構文エラーは `invalid-diagram`、描画環境の問題は `renderer-error` として区別して診断します。ビルド時の描画に失敗した場合、既定ではビルドを失敗させます。失敗した図を成功したコンテンツとして保存しません。SVG ID は図の ID をシードにして決定的に生成します。
+ここで使っている描画器は [Mermaid (Pele)](../mermaid-pele/README_ja.md) です。
+
+## 描画の仕組み
+
+` ```mermaid ` のコードブロックは `figure.rr-mermaid` に置き換わります。図のタイトルはコードブロックの `title`、またはソース内の `%% caption: ...` 行から取得します。図には `role="img"` を付け、キャプションがあればそれをラベルにします。元の記法は必要に応じて折りたたみで残します。
+
+`render: "build"` では、Puppeteer が起動するヘッドレス Chromium 上で Mermaid を実行し、静的な SVG を生成します。JSDOM のような簡易な DOM 実装や寸法の推測には頼らないため、ブラウザと同じレイアウトエンジンで図を作れます。Mermaid は `securityLevel: "strict"` で実行されます。
+
+構文エラーは `invalid-diagram`、描画環境の問題は `renderer-error` として区別して診断します。ビルド時の描画に失敗した場合、既定ではビルドを失敗させます。失敗した描画が成功したコンテンツとして保存されることはありません。SVG ID は図の ID をシードにして決定的に生成します。
 
 ## クライアント側の再試行
 
-`initMermaidDiagrams` は保留中の図だけを描画します。Mermaid のインスタンスがなければ jsDelivr から Mermaid 11 を読み込みます。描画に失敗した場合は `data-mermaid="error"` となり、CSS のプレースホルダー表示に切り替わります。
+`initMermaidDiagrams` は未描画の図だけを描画します。Mermaid のインスタンスがなければ jsDelivr から Mermaid 11 を読み込みます。描画に失敗した場合は `data-mermaid="error"` となり、CSS のプレースホルダー表示に切り替わります。
 
 明暗別のテーマを指定した場合は、`html[data-theme]` を優先し、なければ OS の配色設定に従います。
 
@@ -51,7 +62,7 @@ export default defineConfig({
 | `caption` | `true` | タイトルまたは `%% caption:` をキャプションとして表示する |
 | `fallback` | `true` | 元の Mermaid 記法を `<details>` に残す |
 
-`"client"` はビルド時の描画を行いません。`render: "build"` で `onRenderError: "client"` を指定するときだけ、ビルド時の描画失敗をクライアント側へ明示的に委譲します。この設定では生成HTMLが描画環境の可用性に依存します。
+`"client"` はビルド時の描画を行いません。`render: "build"` で `onRenderError: "client"` を指定するときだけ、ビルド時の描画失敗をクライアント側へ明示的に委譲します。この設定では、生成される HTML がレンダラーの可用性に左右されます。
 
 ## 主なエクスポート
 

package/dist/index.js

@@ -19,7 +19,6 @@ import {
   getStringProperty as sharedGetStringProperty,
   getTextContent as sharedGetTextContent,
   hasClass as sharedHasClass,
-  mergeClassName as sharedMergeClassName,
   text as sharedText,
   visitElements as sharedVisitElements
 } from "@riebeckite/diagram";
@@ -107,10 +106,14 @@ function buildFigure(input) {
   );
   if (input.fallback) {
     children.push(
-      element("details", { className: "rr-mermaid__fallback" }, [
-        element("summary", {}, [text("Diagram source")]),
-        element("pre", {}, [element("code", {}, [text(input.source)])])
-      ])
+      element(
+        "details",
+        { className: "rr-mermaid__fallback rb-source-fallback" },
+        [
+          element("summary", {}, [text("Diagram source")]),
+          element("pre", {}, [element("code", {}, [text(input.source)])])
+        ]
+      )
     );
   }
   return element(

package/dist/src/hast.d.ts

@@ -1,4 +1,3 @@
-import { mergeClassName as sharedMergeClassName } from "@riebeckite/diagram";
 import type { ElementNode, HastNode, ParentNode, TextNode } from "./types.js";
 export declare const element: (tagName: string, properties?: Record<string, unknown>, children?: HastNode[]) => ElementNode;
 export declare const text: (value: string) => TextNode;
@@ -6,4 +5,3 @@ 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;
-export declare const mergeClassName: typeof sharedMergeClassName;

package/dist/src/render-static.d.ts

@@ -1,8 +1,6 @@
 import type { Browser } from "puppeteer";
 import type { MermaidRenderSession } from "./types.js";
-export declare const MERMAID_HEADLESS_MODE: "shell";
-export declare const MERMAID_PUPPETEER_BROWSER = "chrome-headless-shell";
-export type MermaidSessionDependencies = {
+type MermaidSessionDependencies = {
     /**
      * Overrides browser launch. Tests inject a fake browser so session
      * lifecycle can be asserted without launching Chrome.
@@ -21,3 +19,4 @@ export type MermaidSessionDependencies = {
  * the plugin `buildEnd`/`dispose` hooks.
  */
 export declare function createMermaidRenderSession(dependencies?: MermaidSessionDependencies): MermaidRenderSession;
+export {};

package/dist/src/types.d.ts

@@ -20,7 +20,7 @@ export type MermaidBuildRenderResult = {
     kind: MermaidBuildRenderErrorKind;
     message: string;
 };
-export type MermaidBuildRenderer = (id: string, source: string, theme: string) => Promise<MermaidBuildRenderResult>;
+type MermaidBuildRenderer = (id: string, source: string, theme: string) => Promise<MermaidBuildRenderResult>;
 /**
  * Build-scoped render resource. Owns one browser/page session, serializes
  * renders, and releases the browser on `dispose`.
@@ -34,7 +34,7 @@ export type MermaidClientOptions = {
     mermaid?: MermaidApi;
     scriptUrl?: string;
 };
-export type MermaidApi = {
+type MermaidApi = {
     initialize(options: Record<string, unknown>): void;
     render(id: string, source: string): Promise<{
         svg: string;
@@ -55,7 +55,7 @@ export type TextNode = {
     type: "text";
     value: string;
 };
-export type RawNode = {
+type RawNode = {
     type: "raw";
     value: string;
 };
@@ -63,3 +63,4 @@ export type HastNode = ElementNode | TextNode | RawNode | {
     type: string;
     [key: string]: unknown;
 };
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@riebeckite/plugin-mermaid",
-  "version": "0.0.32",
+  "version": "0.0.33",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./dist/index.js",
@@ -21,10 +21,10 @@
     "./style.css": "./style.css"
   },
   "dependencies": {
+    "@riebeckite/core": "0.0.33",
+    "@riebeckite/diagram": "0.0.33",
     "mermaid": "^11.12.2",
-    "puppeteer": "^25.11.0",
-    "@riebeckite/core": "0.0.32",
-    "@riebeckite/diagram": "0.0.32"
+    "puppeteer": "^25.16.0"
   },
   "publishConfig": {
     "access": "public"

package/style.css

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