@riebeckite/plugin-mermaid 0.0.30 → 0.0.32

package/README.md

@@ -6,6 +6,8 @@ Mermaid diagram rendering for ` ```mermaid ` code blocks.
 
 [日本語](./README_ja.md)
 
+For static SVG rendering without a headless browser, see [Mermaid (Pele)](../mermaid-pele/README.md).
+
 ## Overview
 
 `mermaid()` replaces mermaid code blocks with a `<figure class="rr-mermaid">`

package/README_ja.md

@@ -6,6 +6,8 @@
 
 [English](./README.md)
 
+ヘッドレスブラウザを使わずに静的 SVG を生成したい場合は [Mermaid (Pele)](../mermaid-pele/README_ja.md) を使ってください。
+
 ## 設定する
 
 ```ts

package/dist/client.js

@@ -1,27 +1,32 @@
 // src/init.ts
 var DEFAULT_THEME = { light: "default", dark: "dark" };
 var DEFAULT_SCRIPT_URL = "https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js";
-async function initMermaidDiagrams(options = {}) {
+async function initMermaidDiagrams(context = {}) {
+  const options = context.config ?? {};
+  const root = context.root ?? document;
   const mermaid = options.mermaid ?? await loadMermaid(options.scriptUrl);
   if (!mermaid) return;
+  if (context.signal?.aborted) return;
   mermaid.initialize({
     startOnLoad: false,
     securityLevel: "strict",
     theme: selectTheme(options.theme ?? DEFAULT_THEME)
   });
-  const diagrams = document.querySelectorAll(
+  const diagrams = root.querySelectorAll(
     '.rr-mermaid[data-mermaid="pending"]'
   );
   for (const [index, diagram] of Array.from(diagrams).entries()) {
-    await renderDiagram(mermaid, diagram, index);
+    if (context.signal?.aborted || !diagram.isConnected) return;
+    await renderDiagram(mermaid, diagram, index, context.signal);
   }
 }
-async function renderDiagram(mermaid, diagram, index) {
+async function renderDiagram(mermaid, diagram, index, signal) {
   const source = diagram.dataset.mermaidSource;
   const canvas = diagram.querySelector(".rr-mermaid__canvas");
   if (!source || !canvas) return;
   try {
     const { svg } = await mermaid.render(`rr-mermaid-client-${index}`, source);
+    if (signal?.aborted || !diagram.isConnected) return;
     canvas.innerHTML = svg;
     diagram.removeAttribute("data-mermaid");
   } catch {

package/dist/index.js

@@ -14,52 +14,24 @@ 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,
+  mergeClassName as sharedMergeClassName,
+  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;
   }
 });
 
@@ -73,6 +45,7 @@ function rehypeMermaid(options = {}, session) {
   const renderMode = options.render ?? "build";
   const theme = options.theme ?? DEFAULT_THEME;
   return async (tree, file) => {
+    assertNoPeleRenderer(tree);
     const replacements = [];
     visitElements(tree, (node, parent, index) => {
       if (!parent || index === void 0 || !isMermaidCodeBlock(node)) return;
@@ -144,12 +117,26 @@ function buildFigure(input) {
     "figure",
     {
       className: "rr-mermaid",
+      dataRiebeckiteMermaidRenderer: "mermaid",
       dataMermaid: input.clientFallback && !input.staticSvg ? "pending" : void 0,
       dataMermaidSource: input.clientFallback && !input.staticSvg ? input.source : void 0
     },
     children
   );
 }
+function assertNoPeleRenderer(tree) {
+  let hasPeleRenderer = false;
+  visitElements(tree, (node) => {
+    if (node.properties?.dataRiebeckiteMermaidRenderer === "pele") {
+      hasPeleRenderer = true;
+    }
+  });
+  if (hasPeleRenderer) {
+    throw new Error(
+      "@riebeckite/plugin-mermaid and @riebeckite/plugin-mermaid-pele cannot be enabled together. Enable exactly one Mermaid renderer."
+    );
+  }
+}
 async function renderStaticSvg(id, source, theme, file, session) {
   try {
     const result = await session.render(
@@ -523,7 +510,10 @@ function mermaid(options = {}) {
       createClientEntry(
         "mermaid",
         "@riebeckite/plugin-mermaid/client",
-        "initMermaidDiagrams"
+        "initMermaidDiagrams",
+        void 0,
+        void 0,
+        "context"
       )
     ]
   });

package/dist/src/hast.d.ts

@@ -1,8 +1,9 @@
+import { mergeClassName as sharedMergeClassName } from "@riebeckite/diagram";
 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 function mergeClassName(current: unknown, next: string): string;
+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;
+export declare const mergeClassName: typeof sharedMergeClassName;

package/dist/src/init.d.ts

@@ -1,2 +1,8 @@
 import type { MermaidClientOptions } from "./types.js";
-export declare function initMermaidDiagrams(options?: MermaidClientOptions): Promise<void>;
+type ClientContext = {
+    root?: ParentNode;
+    signal?: AbortSignal;
+    config?: MermaidClientOptions;
+};
+export declare function initMermaidDiagrams(context?: ClientContext): Promise<void>;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@riebeckite/plugin-mermaid",
-  "version": "0.0.30",
+  "version": "0.0.32",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./dist/index.js",
@@ -23,7 +23,8 @@
   "dependencies": {
     "mermaid": "^11.12.2",
     "puppeteer": "^25.11.0",
-    "@riebeckite/core": "0.0.30"
+    "@riebeckite/core": "0.0.32",
+    "@riebeckite/diagram": "0.0.32"
   },
   "publishConfig": {
     "access": "public"