@ai-gui/plugin-mermaid 0.1.0 → 0.3.0

package/README.md

@@ -25,6 +25,8 @@ The model emits, e.g.:
 
 ## Options
 
-- `theme?: string` — Mermaid theme.
+- `theme?: string` — Mermaid theme. Mermaid has process-global configuration, so the theme of the first render wins across plugin instances; later instances share that initialization.
+
+Renders are queued across instances because Mermaid mutates global state while rendering. This also guarantees unique diagram IDs for concurrent renders.
 
 See the [root README](../../README.md) for the full plugin list.

package/dist/index.cjs

@@ -1,6 +1,16 @@
 "use strict";
 
 //#region src/index.ts
+let nextId = 0;
+let mermaidPromise = null;
+let initializedTheme;
+let renderQueue = Promise.resolve();
+const loadMermaid = () => mermaidPromise ??= import("mermaid").then(({ default: m }) => m);
+function enqueue(work) {
+	const result = renderQueue.then(work, work);
+	renderQueue = result.then(() => void 0, () => void 0);
+	return result;
+}
 function escapeHtml(s) {
 	return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
@@ -11,19 +21,18 @@ function errorHtml(message) {
 	};
 }
 function mermaid(opts = {}) {
-	let initialized = false;
-	let counter = 0;
-	const render = async (node) => {
+	const theme = opts.theme ?? "default";
+	const render = (node) => enqueue(async () => {
 		try {
-			const m = (await import("mermaid")).default;
-			if (!initialized) {
+			const m = await loadMermaid();
+			if (initializedTheme === void 0) {
 				m.initialize({
 					startOnLoad: false,
-					theme: opts.theme ?? "default"
+					theme
 				});
-				initialized = true;
+				initializedTheme = theme;
 			}
-			const id = `aigui-mermaid-${counter++}`;
+			const id = `aigui-mermaid-${nextId++}`;
 			const { svg } = await m.render(id, node.content ?? "");
 			return {
 				kind: "html",
@@ -32,7 +41,7 @@ function mermaid(opts = {}) {
 		} catch (e) {
 			return errorHtml(String(e?.message ?? e));
 		}
-	};
+	});
 	return {
 		name: "mermaid",
 		nodeRenderers: { mermaid: render }

package/dist/index.js

@@ -1,4 +1,14 @@
 //#region src/index.ts
+let nextId = 0;
+let mermaidPromise = null;
+let initializedTheme;
+let renderQueue = Promise.resolve();
+const loadMermaid = () => mermaidPromise ??= import("mermaid").then(({ default: m }) => m);
+function enqueue(work) {
+	const result = renderQueue.then(work, work);
+	renderQueue = result.then(() => void 0, () => void 0);
+	return result;
+}
 function escapeHtml(s) {
 	return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
@@ -9,19 +19,18 @@ function errorHtml(message) {
 	};
 }
 function mermaid(opts = {}) {
-	let initialized = false;
-	let counter = 0;
-	const render = async (node) => {
+	const theme = opts.theme ?? "default";
+	const render = (node) => enqueue(async () => {
 		try {
-			const m = (await import("mermaid")).default;
-			if (!initialized) {
+			const m = await loadMermaid();
+			if (initializedTheme === void 0) {
 				m.initialize({
 					startOnLoad: false,
-					theme: opts.theme ?? "default"
+					theme
 				});
-				initialized = true;
+				initializedTheme = theme;
 			}
-			const id = `aigui-mermaid-${counter++}`;
+			const id = `aigui-mermaid-${nextId++}`;
 			const { svg } = await m.render(id, node.content ?? "");
 			return {
 				kind: "html",
@@ -30,7 +39,7 @@ function mermaid(opts = {}) {
 		} catch (e) {
 			return errorHtml(String(e?.message ?? e));
 		}
-	};
+	});
 	return {
 		name: "mermaid",
 		nodeRenderers: { mermaid: render }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ai-gui/plugin-mermaid",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "Mermaid diagram plugin for AIGUI.",
   "keywords": [
     "llm",
@@ -23,14 +23,23 @@
   "homepage": "https://github.com/liliang-cn/aigui#readme",
   "bugs": "https://github.com/liliang-cn/aigui/issues",
   "type": "module",
+  "sideEffects": false,
+  "engines": {
+    "node": ">=18"
+  },
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
     }
   },
   "files": [
@@ -43,10 +52,11 @@
   },
   "dependencies": {
     "mermaid": "^11.4.0",
-    "@ai-gui/core": "0.1.0"
+    "@ai-gui/core": "0.3.0"
   },
   "scripts": {
     "build": "tsdown",
+    "test": "pnpm --dir ../.. exec vitest run --project plugin-mermaid",
     "typecheck": "tsc --noEmit"
   }
 }