@riebeckite/plugin-mermaid 0.0.14 → 0.0.15

package/README.md

@@ -81,4 +81,5 @@ export default defineConfig({
 
 ## See also
 
-- [Plugin guide](../../../docs/en/reference/plugin-api.md)
+- [Plugin guide](../../../docs/en/docs/reference/plugin-api.md)
+

package/README_ja.md

@@ -56,4 +56,5 @@ export default defineConfig({
 
 ## 関連資料
 
-- [プラグインシステム](../../../docs/ja/reference/plugin-api.md)
+- [プラグインシステム](../../../docs/ja/docs/reference/plugin-api.md)
+

package/dist/index.d.ts

@@ -1,3 +1,3 @@
 import type { MermaidOptions } from "./src/types.js";
-export type { MermaidClientOptions, MermaidOptions, MermaidRenderMode, MermaidTheme, } from "./src/types.js";
+export type { MermaidClientOptions, MermaidOptions, MermaidRenderMode, MermaidRenderSession, MermaidTheme, } from "./src/types.js";
 export declare function mermaid(options?: MermaidOptions): import("@riebeckite/core").RiebeckitePlugin<MermaidOptions>;

package/dist/index.js

@@ -63,175 +63,12 @@ var init_hast = __esm({
   }
 });
 
-// src/render-static.ts
-var render_static_exports = {};
-__export(render_static_exports, {
-  renderMermaidStaticSvg: () => renderMermaidStaticSvg
-});
-import { access, mkdtemp, rm, writeFile } from "node:fs/promises";
-import { tmpdir } from "node:os";
-import { join } from "node:path";
-import { fileURLToPath } from "node:url";
-async function renderWithBrowser(scriptPath) {
-  const browser = await launchBrowser();
-  const page = await browser.newPage();
-  try {
-    page.setDefaultTimeout(RENDER_TIMEOUT_MS);
-    await page.setContent("<!doctype html><html><body></body></html>");
-    await page.addScriptTag({ path: await resolveMermaidScriptPath() });
-    await page.addScriptTag({ path: scriptPath });
-    const result = await page.evaluate(() => {
-      return globalThis.__rrMermaidResult;
-    });
-    return normalizeRenderResult(result);
-  } catch (error) {
-    return {
-      ok: false,
-      kind: "renderer-error",
-      message: formatError(error)
-    };
-  } finally {
-    await page.close();
-    await browser.close();
-  }
-}
-async function resolveMermaidScriptPath() {
-  const candidates = [
-    resolveWithImportMeta(),
-    fileURLToPath(
-      new URL(`../node_modules/${MERMAID_SCRIPT_SUBPATH}`, import.meta.url)
-    ),
-    join(process.cwd(), "node_modules", MERMAID_SCRIPT_SUBPATH),
-    join(
-      process.cwd(),
-      "..",
-      "..",
-      "packages",
-      "plugin-mermaid",
-      "node_modules",
-      MERMAID_SCRIPT_SUBPATH
-    )
-  ].filter((path) => typeof path === "string");
-  for (const candidate of candidates) {
-    if (await fileExists(candidate)) return candidate;
-  }
-  return candidates.at(0) ?? MERMAID_SCRIPT_SUBPATH;
-}
-function resolveWithImportMeta() {
-  const resolver = import.meta.resolve;
-  if (typeof resolver !== "function") return void 0;
-  return fileURLToPath(resolver(MERMAID_SCRIPT_SUBPATH));
-}
-async function fileExists(path) {
-  try {
-    await access(path);
-    return true;
-  } catch {
-    return false;
-  }
-}
-async function launchBrowser() {
-  const puppeteer = await importPuppeteer();
-  return puppeteer.default.launch({
-    headless: "shell",
-    args: ["--no-sandbox", "--disable-setuid-sandbox"]
-  });
-}
-async function importPuppeteer() {
-  const importModule = new Function(
-    "specifier",
-    "return import(specifier)"
-  );
-  return importModule("puppeteer");
-}
-function buildRenderScript(id, source, theme) {
-  return `
-    (async () => {
-      try {
-        mermaid.initialize({
-          startOnLoad: false,
-          securityLevel: "strict",
-          theme: ${JSON.stringify(theme)},
-        });
-        const { svg } = await mermaid.render(
-          ${JSON.stringify(id)},
-          ${JSON.stringify(source)},
-        );
-        globalThis.__rrMermaidResult = { ok: true, svg };
-      } catch (error) {
-        globalThis.__rrMermaidResult = {
-          ok: false,
-          kind: "invalid-diagram",
-          message: error instanceof Error ? error.message : String(error),
-        };
-      }
-    })();
-  `;
-}
-function normalizeRenderResult(value) {
-  if (!value || typeof value !== "object") {
-    return {
-      ok: false,
-      kind: "renderer-error",
-      message: "Mermaid renderer returned no result."
-    };
-  }
-  const result = value;
-  if (result.ok === true && typeof result.svg === "string") {
-    return { ok: true, svg: result.svg };
-  }
-  if (result.ok === false) {
-    return {
-      ok: false,
-      kind: normalizeErrorKind(result.kind),
-      message: typeof result.message === "string" ? result.message : "Mermaid renderer failed."
-    };
-  }
-  return {
-    ok: false,
-    kind: "renderer-error",
-    message: "Mermaid renderer returned an invalid result."
-  };
-}
-function normalizeErrorKind(value) {
-  return value === "invalid-diagram" || value === "renderer-error" ? value : "renderer-error";
-}
-async function enqueueMermaidRender(render) {
-  const current = renderQueue.then(render, render);
-  renderQueue = current.catch(() => void 0);
-  return current;
-}
-function formatError(error) {
-  if (error instanceof Error) return error.message;
-  return String(error);
-}
-var RENDER_TIMEOUT_MS, MERMAID_SCRIPT_SUBPATH, renderQueue, renderMermaidStaticSvg;
-var init_render_static = __esm({
-  "src/render-static.ts"() {
-    RENDER_TIMEOUT_MS = 3e4;
-    MERMAID_SCRIPT_SUBPATH = "mermaid/dist/mermaid.min.js";
-    renderQueue = Promise.resolve();
-    renderMermaidStaticSvg = async (id, source, theme) => {
-      return enqueueMermaidRender(async () => {
-        const workDir = await mkdtemp(join(tmpdir(), "riebeckite-mermaid-"));
-        const scriptPath = join(workDir, "render-mermaid.js");
-        try {
-          await writeFile(scriptPath, buildRenderScript(id, source, theme), "utf8");
-          return await renderWithBrowser(scriptPath);
-        } finally {
-          await rm(workDir, { force: true, recursive: true });
-        }
-      });
-    };
-  }
-});
-
 // src/rehype.ts
 var rehype_exports = {};
 __export(rehype_exports, {
   rehypeMermaid: () => rehypeMermaid
 });
-function rehypeMermaid(options = {}) {
+function rehypeMermaid(options = {}, session) {
   const renderMode = options.render ?? "build";
   const theme = options.theme ?? DEFAULT_THEME;
   return async (tree, file) => {
@@ -243,7 +80,8 @@ function rehypeMermaid(options = {}) {
           render: renderMode,
           theme,
           caption: options.caption !== false,
-          fallback: options.fallback !== false
+          fallback: options.fallback !== false,
+          session
         })
       );
     });
@@ -255,7 +93,7 @@ async function replaceMermaidBlock(parent, index, pre, file, options) {
   const source = code ? getTextContent(code).trim() : getTextContent(pre).trim();
   const caption = options.caption ? extractCaption(source, pre, code) : null;
   const id = `rr-mermaid-${hashSource(source)}`;
-  const renderResult = shouldRenderAtBuild(options.render) ? await renderStaticSvg(id, source, options.theme, file) : null;
+  const renderResult = shouldRenderAtBuild(options.render) ? await renderStaticSvg(id, source, options.theme, file, options.session) : null;
   const staticSvg = renderResult?.ok ? renderResult.svg : null;
   parent.children = parent.children ?? [];
   parent.children[index] = buildFigure({
@@ -307,10 +145,9 @@ function buildFigure(input) {
     children
   );
 }
-async function renderStaticSvg(id, source, theme, file) {
+async function renderStaticSvg(id, source, theme, file, session) {
   try {
-    const { renderMermaidStaticSvg: renderMermaidStaticSvg2 } = await Promise.resolve().then(() => (init_render_static(), render_static_exports));
-    const result = await renderMermaidStaticSvg2(
+    const result = await session.render(
       id,
       source,
       selectTheme(theme, "light")
@@ -390,14 +227,243 @@ import {
   createStyleAsset,
   definePlugin
 } from "@riebeckite/core";
+
+// src/render-static.ts
+import { access } from "node:fs/promises";
+import { join } from "node:path";
+import { fileURLToPath } from "node:url";
+var RENDER_TIMEOUT_MS = 3e4;
+var MERMAID_SCRIPT_SUBPATH = "mermaid/dist/mermaid.min.js";
+function createMermaidRenderSession(dependencies = {}) {
+  const launchBrowser = dependencies.launch ?? defaultLaunchBrowser;
+  let state = null;
+  let queue = Promise.resolve();
+  let exitListenerAttached = false;
+  const handleExit = () => {
+    const browser = state?.browser;
+    state = null;
+    if (!browser) return;
+    try {
+      browser.process()?.kill();
+    } catch {
+    }
+  };
+  function attachExitListener() {
+    if (exitListenerAttached) return;
+    process.once("exit", handleExit);
+    exitListenerAttached = true;
+  }
+  function detachExitListener() {
+    if (!exitListenerAttached) return;
+    process.removeListener("exit", handleExit);
+    exitListenerAttached = false;
+  }
+  async function ensureSession() {
+    if (state) return state;
+    const browser = await launchBrowser();
+    attachExitListener();
+    try {
+      const page = await browser.newPage();
+      page.setDefaultTimeout(RENDER_TIMEOUT_MS);
+      await page.setContent("<!doctype html><html><body></body></html>");
+      await page.addScriptTag({ path: await resolveMermaidScriptPath() });
+      state = { browser, page };
+      return state;
+    } catch (error) {
+      await teardownBrowser(browser);
+      detachExitListener();
+      throw error;
+    }
+  }
+  async function teardownBrowser(browser) {
+    try {
+      await browser.close();
+    } catch {
+    }
+  }
+  async function teardown() {
+    const current = state;
+    state = null;
+    detachExitListener();
+    if (current) await teardownBrowser(current.browser);
+  }
+  async function evaluateRender(session, id, source, theme) {
+    const result = await session.page.evaluate(
+      renderMermaidInPage,
+      id,
+      source,
+      theme
+    );
+    return normalizeRenderResult(result);
+  }
+  async function renderWithRecovery(id, source, theme) {
+    let established = false;
+    try {
+      const session = await ensureSession();
+      established = true;
+      return await evaluateRender(session, id, source, theme);
+    } catch (error) {
+      await teardown();
+      if (!established) {
+        return rendererErrorResult(error);
+      }
+      try {
+        const session = await ensureSession();
+        return await evaluateRender(session, id, source, theme);
+      } catch (retryError) {
+        await teardown();
+        return rendererErrorResult(retryError);
+      }
+    }
+  }
+  function enqueue(task) {
+    const run = queue.then(task, task);
+    queue = run.then(
+      () => void 0,
+      () => void 0
+    );
+    return run;
+  }
+  return {
+    render(id, source, theme) {
+      return enqueue(() => renderWithRecovery(id, source, theme));
+    },
+    dispose() {
+      return enqueue(() => teardown());
+    }
+  };
+}
+async function renderMermaidInPage(id, source, theme) {
+  const mermaid2 = globalThis.mermaid;
+  if (!mermaid2) {
+    return {
+      ok: false,
+      kind: "renderer-error",
+      message: "Mermaid script is not loaded."
+    };
+  }
+  try {
+    document.body.innerHTML = "";
+    mermaid2.initialize({
+      startOnLoad: false,
+      securityLevel: "strict",
+      theme
+    });
+    const { svg } = await mermaid2.render(id, source);
+    return { ok: true, svg };
+  } catch (error) {
+    return {
+      ok: false,
+      kind: "invalid-diagram",
+      message: error instanceof Error ? error.message : String(error)
+    };
+  }
+}
+async function defaultLaunchBrowser() {
+  const puppeteer = await importPuppeteer();
+  return puppeteer.default.launch({
+    headless: "shell",
+    args: ["--no-sandbox", "--disable-setuid-sandbox"]
+  });
+}
+async function importPuppeteer() {
+  const importModule = new Function(
+    "specifier",
+    "return import(specifier)"
+  );
+  return importModule("puppeteer");
+}
+async function resolveMermaidScriptPath() {
+  const candidates = [
+    resolveWithImportMeta(),
+    fileURLToPath(
+      new URL(`../node_modules/${MERMAID_SCRIPT_SUBPATH}`, import.meta.url)
+    ),
+    join(process.cwd(), "node_modules", MERMAID_SCRIPT_SUBPATH),
+    join(
+      process.cwd(),
+      "..",
+      "..",
+      "packages",
+      "plugin-mermaid",
+      "node_modules",
+      MERMAID_SCRIPT_SUBPATH
+    )
+  ].filter((path) => typeof path === "string");
+  for (const candidate of candidates) {
+    if (await fileExists(candidate)) return candidate;
+  }
+  return candidates.at(0) ?? MERMAID_SCRIPT_SUBPATH;
+}
+function resolveWithImportMeta() {
+  const resolver = import.meta.resolve;
+  if (typeof resolver !== "function") return void 0;
+  return fileURLToPath(resolver(MERMAID_SCRIPT_SUBPATH));
+}
+async function fileExists(path) {
+  try {
+    await access(path);
+    return true;
+  } catch {
+    return false;
+  }
+}
+function rendererErrorResult(error) {
+  return { ok: false, kind: "renderer-error", message: formatError(error) };
+}
+function normalizeRenderResult(value) {
+  if (!value || typeof value !== "object") {
+    return {
+      ok: false,
+      kind: "renderer-error",
+      message: "Mermaid renderer returned no result."
+    };
+  }
+  const result = value;
+  if (result.ok === true && typeof result.svg === "string") {
+    return { ok: true, svg: result.svg };
+  }
+  if (result.ok === false) {
+    return {
+      ok: false,
+      kind: normalizeErrorKind(result.kind),
+      message: typeof result.message === "string" ? result.message : "Mermaid renderer failed."
+    };
+  }
+  return {
+    ok: false,
+    kind: "renderer-error",
+    message: "Mermaid renderer returned an invalid result."
+  };
+}
+function normalizeErrorKind(value) {
+  return value === "invalid-diagram" || value === "renderer-error" ? value : "renderer-error";
+}
+function formatError(error) {
+  if (error instanceof Error) return error.message;
+  return String(error);
+}
+
+// index.ts
 function mermaid(options = {}) {
+  const session = createMermaidRenderSession();
   return definePlugin({
     name: "mermaid",
     order: -10,
+    processedContentCache: {
+      version: "mermaid-v1",
+      dependencyMode: "none"
+    },
     options,
     validateOptions: validateMermaidOptions,
     extendHtmlPipeline: (pipeline) => {
-      pipeline.use(rehypeMermaidLazy, options);
+      pipeline.use(rehypeMermaidLazy, { options, session });
+    },
+    buildEnd: async () => {
+      await session.dispose();
+    },
+    dispose: async () => {
+      await session.dispose();
     },
     assets: [createStyleAsset("mermaid")],
     clientEntries: [createClientEntry("mermaid", "initMermaidDiagrams")]
@@ -428,10 +494,10 @@ function validateMermaidOptions(options) {
 function isMermaidTheme(value) {
   return value === void 0 || typeof value === "string" || typeof value === "object" && value !== null && "light" in value && "dark" in value && typeof value.light === "string" && typeof value.dark === "string";
 }
-function rehypeMermaidLazy(options = {}) {
+function rehypeMermaidLazy(settings) {
   return async (tree, file) => {
     const { rehypeMermaid: rehypeMermaid2 } = await Promise.resolve().then(() => (init_rehype(), rehype_exports));
-    const transformer = rehypeMermaid2(options);
+    const transformer = rehypeMermaid2(settings.options, settings.session);
     await transformer(tree, file);
   };
 }

package/dist/src/rehype.d.ts

@@ -1,2 +1,2 @@
-import type { HastNode, MermaidOptions } from "./types.js";
-export declare function rehypeMermaid(options?: MermaidOptions): (tree: HastNode, file: unknown) => Promise<void>;
+import type { HastNode, MermaidOptions, MermaidRenderSession } from "./types.js";
+export declare function rehypeMermaid(options: MermaidOptions, session: MermaidRenderSession): (tree: HastNode, file: unknown) => Promise<void>;

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

@@ -1,2 +1,20 @@
-import type { MermaidBuildRenderer } from "./types.js";
-export declare const renderMermaidStaticSvg: MermaidBuildRenderer;
+import type { Browser } from "puppeteer";
+import type { MermaidRenderSession } from "./types.js";
+export type MermaidSessionDependencies = {
+    /**
+     * Overrides browser launch. Tests inject a fake browser so session
+     * lifecycle can be asserted without launching Chrome.
+     */
+    launch?: () => Promise<Browser>;
+};
+/**
+ * Creates a build-scoped Mermaid render session.
+ *
+ * The session owns one browser + one page and injects `mermaid.min.js` a
+ * single time; every diagram render reuses that page through
+ * `page.evaluate`. Each `mermaid()` plugin instance creates its own
+ * session, so resource ownership stays with the plugin rather than a
+ * module-global singleton. `dispose` releases the browser and is wired to
+ * the plugin `buildEnd`/`dispose` hooks.
+ */
+export declare function createMermaidRenderSession(dependencies?: MermaidSessionDependencies): MermaidRenderSession;

package/dist/src/types.d.ts

@@ -19,6 +19,14 @@ export type MermaidBuildRenderResult = {
     message: string;
 };
 export 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`.
+ */
+export type MermaidRenderSession = {
+    render: MermaidBuildRenderer;
+    dispose: () => Promise<void>;
+};
 export type MermaidClientOptions = {
     theme?: MermaidTheme;
     mermaid?: MermaidApi;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@riebeckite/plugin-mermaid",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./dist/index.js",
@@ -23,7 +23,7 @@
   "dependencies": {
     "mermaid": "^11.12.2",
     "puppeteer": "^25.11.0",
-    "@riebeckite/core": "0.0.14"
+    "@riebeckite/core": "0.0.15"
   },
   "publishConfig": {
     "access": "public"
@@ -58,6 +58,7 @@
     "./style.css"
   ],
   "scripts": {
-    "build": "node ../../../scripts/build_package.mjs"
+    "build": "node ../../../scripts/build_package.mjs",
+    "test": "node --import tsx --test \"test/*.test.ts\""
   }
 }