@stream-mdx/mermaid 0.0.3

package/CHANGELOG.md

@@ -0,0 +1,11 @@
+# @stream-mdx/mermaid
+
+## 0.0.3
+
+### Patch Changes
+
+- 47d1374: Add opt-in streaming format anticipation and an optional Mermaid diagram addon for ` ```mermaid ` code blocks.
+
+## Unreleased
+
+- Initial release.

package/README.md

@@ -0,0 +1,39 @@
+# @stream-mdx/mermaid
+
+Mermaid diagram rendering addon for StreamMDX.
+
+This package is **opt-in**. Install it and register the `mermaid` block component so ` ```mermaid ` code fences render as diagrams (with a Diagram/Code toggle).
+
+## Install
+
+```bash
+npm install @stream-mdx/mermaid
+```
+
+## Usage
+
+```tsx
+import { StreamingMarkdown } from "@stream-mdx/react";
+import { MermaidBlock } from "@stream-mdx/mermaid";
+
+export function Demo() {
+  return (
+    <StreamingMarkdown
+      text={"```mermaid\\ngraph TD; A-->B;\\n```"}
+      components={{
+        mermaid: MermaidBlock,
+      }}
+    />
+  );
+}
+```
+
+## Customization
+
+If you want to tune debounce or default view, wrap the component:
+
+```tsx
+components={{
+  mermaid: (props) => <MermaidBlock {...props} debounceMs={250} defaultView="diagram" />,
+}}
+```

package/dist/index.cjs

@@ -0,0 +1,172 @@
+"use client";
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  MermaidBlock: () => MermaidBlock
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/mermaid-block.tsx
+var import_react = __toESM(require("react"), 1);
+var import_jsx_runtime = require("react/jsx-runtime");
+var mermaidPromise = null;
+var mermaidInitialized = false;
+var mermaidIdCounter = 0;
+async function loadMermaid() {
+  if (!mermaidPromise) {
+    mermaidPromise = import("mermaid").then((mod) => mod.default ?? mod);
+  }
+  const mermaid = await mermaidPromise;
+  if (!mermaidInitialized && typeof mermaid.initialize === "function") {
+    mermaid.initialize({ startOnLoad: false });
+    mermaidInitialized = true;
+  }
+  return mermaid;
+}
+function nextMermaidId() {
+  mermaidIdCounter += 1;
+  return `stream-mdx-mermaid-${mermaidIdCounter}`;
+}
+var MermaidBlock = ({ code, renderCode, defaultView = "diagram", debounceMs = 200 }) => {
+  const [view, setView] = import_react.default.useState(defaultView);
+  const [svg, setSvg] = import_react.default.useState("");
+  const [error, setError] = import_react.default.useState(null);
+  const containerRef = import_react.default.useRef(null);
+  const bindRef = import_react.default.useRef(void 0);
+  const lastValidSvgRef = import_react.default.useRef("");
+  const generationRef = import_react.default.useRef(0);
+  import_react.default.useEffect(() => {
+    setView(defaultView);
+  }, [defaultView]);
+  import_react.default.useEffect(() => {
+    if (view !== "diagram") return;
+    const trimmed = typeof code === "string" ? code.trim() : "";
+    if (!trimmed) {
+      setError(null);
+      setSvg("");
+      lastValidSvgRef.current = "";
+      return;
+    }
+    generationRef.current += 1;
+    const generation = generationRef.current;
+    const timeout = setTimeout(async () => {
+      try {
+        const mermaid = await loadMermaid();
+        if (typeof mermaid.render !== "function") {
+          throw new Error("Mermaid runtime missing render()");
+        }
+        const result = await mermaid.render(nextMermaidId(), trimmed);
+        if (generation !== generationRef.current) return;
+        const svgText = typeof result === "string" ? result : result?.svg ?? "";
+        const bindFunctions = typeof result === "string" ? void 0 : result?.bindFunctions;
+        if (!svgText || svgText.trim().length === 0) {
+          throw new Error("Mermaid render returned empty SVG");
+        }
+        lastValidSvgRef.current = svgText;
+        bindRef.current = typeof bindFunctions === "function" ? bindFunctions : void 0;
+        setSvg(svgText);
+        setError(null);
+      } catch (err) {
+        if (generation !== generationRef.current) return;
+        const message = err instanceof Error ? err.message : String(err);
+        setError(message);
+        if (lastValidSvgRef.current) {
+          setSvg(lastValidSvgRef.current);
+        }
+      }
+    }, Math.max(0, debounceMs));
+    return () => clearTimeout(timeout);
+  }, [code, debounceMs, view]);
+  import_react.default.useEffect(() => {
+    if (view !== "diagram") return;
+    if (!svg) return;
+    const bind = bindRef.current;
+    const el = containerRef.current;
+    if (!el || typeof bind !== "function") return;
+    try {
+      bind(el);
+    } catch {
+    }
+  }, [svg, view]);
+  const toolbarStyle = {
+    display: "flex",
+    gap: 8,
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: "6px 10px",
+    borderBottom: "1px solid rgba(0,0,0,0.08)"
+  };
+  const wrapperStyle = {
+    border: "1px solid rgba(0,0,0,0.12)",
+    borderRadius: 10,
+    overflow: "hidden",
+    margin: "12px 0"
+  };
+  const buttonStyle = (active) => ({
+    border: "1px solid rgba(0,0,0,0.18)",
+    borderRadius: 8,
+    padding: "3px 8px",
+    fontSize: 12,
+    background: active ? "rgba(0,0,0,0.06)" : "transparent",
+    cursor: "pointer"
+  });
+  const toolbar = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: toolbarStyle, className: "stream-mdx-mermaid-toolbar", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 12, opacity: 0.8 }, children: "mermaid" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", gap: 6 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", onClick: () => setView("diagram"), style: buttonStyle(view === "diagram"), children: "Diagram" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", onClick: () => setView("code"), style: buttonStyle(view === "code"), children: "Code" })
+    ] })
+  ] });
+  if (view === "code") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: wrapperStyle, className: "stream-mdx-mermaid-block", children: [
+      toolbar,
+      renderCode
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: wrapperStyle, className: "stream-mdx-mermaid-block", children: [
+    toolbar,
+    error ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 12, padding: "6px 10px", opacity: 0.8 }, className: "stream-mdx-mermaid-error", children: error }) : null,
+    svg ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        ref: containerRef,
+        className: "stream-mdx-mermaid-diagram",
+        style: { overflowX: "auto", padding: 10 },
+        dangerouslySetInnerHTML: { __html: svg }
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 12, padding: "10px", opacity: 0.7 }, className: "stream-mdx-mermaid-placeholder", children: "Waiting for a valid diagram\u2026" })
+  ] });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MermaidBlock
+});

package/dist/index.d.cts

@@ -0,0 +1,13 @@
+import React from 'react';
+
+type MermaidBlockProps = {
+    code: string;
+    renderCode: React.ReactNode;
+    meta?: Record<string, unknown>;
+    isFinalized?: boolean;
+    defaultView?: "diagram" | "code";
+    debounceMs?: number;
+};
+declare const MermaidBlock: React.FC<MermaidBlockProps>;
+
+export { MermaidBlock, type MermaidBlockProps };

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+
+type MermaidBlockProps = {
+    code: string;
+    renderCode: React.ReactNode;
+    meta?: Record<string, unknown>;
+    isFinalized?: boolean;
+    defaultView?: "diagram" | "code";
+    debounceMs?: number;
+};
+declare const MermaidBlock: React.FC<MermaidBlockProps>;
+
+export { MermaidBlock, type MermaidBlockProps };

package/dist/index.mjs

@@ -0,0 +1,136 @@
+"use client";
+
+// src/mermaid-block.tsx
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var mermaidPromise = null;
+var mermaidInitialized = false;
+var mermaidIdCounter = 0;
+async function loadMermaid() {
+  if (!mermaidPromise) {
+    mermaidPromise = import("mermaid").then((mod) => mod.default ?? mod);
+  }
+  const mermaid = await mermaidPromise;
+  if (!mermaidInitialized && typeof mermaid.initialize === "function") {
+    mermaid.initialize({ startOnLoad: false });
+    mermaidInitialized = true;
+  }
+  return mermaid;
+}
+function nextMermaidId() {
+  mermaidIdCounter += 1;
+  return `stream-mdx-mermaid-${mermaidIdCounter}`;
+}
+var MermaidBlock = ({ code, renderCode, defaultView = "diagram", debounceMs = 200 }) => {
+  const [view, setView] = React.useState(defaultView);
+  const [svg, setSvg] = React.useState("");
+  const [error, setError] = React.useState(null);
+  const containerRef = React.useRef(null);
+  const bindRef = React.useRef(void 0);
+  const lastValidSvgRef = React.useRef("");
+  const generationRef = React.useRef(0);
+  React.useEffect(() => {
+    setView(defaultView);
+  }, [defaultView]);
+  React.useEffect(() => {
+    if (view !== "diagram") return;
+    const trimmed = typeof code === "string" ? code.trim() : "";
+    if (!trimmed) {
+      setError(null);
+      setSvg("");
+      lastValidSvgRef.current = "";
+      return;
+    }
+    generationRef.current += 1;
+    const generation = generationRef.current;
+    const timeout = setTimeout(async () => {
+      try {
+        const mermaid = await loadMermaid();
+        if (typeof mermaid.render !== "function") {
+          throw new Error("Mermaid runtime missing render()");
+        }
+        const result = await mermaid.render(nextMermaidId(), trimmed);
+        if (generation !== generationRef.current) return;
+        const svgText = typeof result === "string" ? result : result?.svg ?? "";
+        const bindFunctions = typeof result === "string" ? void 0 : result?.bindFunctions;
+        if (!svgText || svgText.trim().length === 0) {
+          throw new Error("Mermaid render returned empty SVG");
+        }
+        lastValidSvgRef.current = svgText;
+        bindRef.current = typeof bindFunctions === "function" ? bindFunctions : void 0;
+        setSvg(svgText);
+        setError(null);
+      } catch (err) {
+        if (generation !== generationRef.current) return;
+        const message = err instanceof Error ? err.message : String(err);
+        setError(message);
+        if (lastValidSvgRef.current) {
+          setSvg(lastValidSvgRef.current);
+        }
+      }
+    }, Math.max(0, debounceMs));
+    return () => clearTimeout(timeout);
+  }, [code, debounceMs, view]);
+  React.useEffect(() => {
+    if (view !== "diagram") return;
+    if (!svg) return;
+    const bind = bindRef.current;
+    const el = containerRef.current;
+    if (!el || typeof bind !== "function") return;
+    try {
+      bind(el);
+    } catch {
+    }
+  }, [svg, view]);
+  const toolbarStyle = {
+    display: "flex",
+    gap: 8,
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: "6px 10px",
+    borderBottom: "1px solid rgba(0,0,0,0.08)"
+  };
+  const wrapperStyle = {
+    border: "1px solid rgba(0,0,0,0.12)",
+    borderRadius: 10,
+    overflow: "hidden",
+    margin: "12px 0"
+  };
+  const buttonStyle = (active) => ({
+    border: "1px solid rgba(0,0,0,0.18)",
+    borderRadius: 8,
+    padding: "3px 8px",
+    fontSize: 12,
+    background: active ? "rgba(0,0,0,0.06)" : "transparent",
+    cursor: "pointer"
+  });
+  const toolbar = /* @__PURE__ */ jsxs("div", { style: toolbarStyle, className: "stream-mdx-mermaid-toolbar", children: [
+    /* @__PURE__ */ jsx("span", { style: { fontSize: 12, opacity: 0.8 }, children: "mermaid" }),
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 6 }, children: [
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setView("diagram"), style: buttonStyle(view === "diagram"), children: "Diagram" }),
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setView("code"), style: buttonStyle(view === "code"), children: "Code" })
+    ] })
+  ] });
+  if (view === "code") {
+    return /* @__PURE__ */ jsxs("div", { style: wrapperStyle, className: "stream-mdx-mermaid-block", children: [
+      toolbar,
+      renderCode
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { style: wrapperStyle, className: "stream-mdx-mermaid-block", children: [
+    toolbar,
+    error ? /* @__PURE__ */ jsx("div", { style: { fontSize: 12, padding: "6px 10px", opacity: 0.8 }, className: "stream-mdx-mermaid-error", children: error }) : null,
+    svg ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: containerRef,
+        className: "stream-mdx-mermaid-diagram",
+        style: { overflowX: "auto", padding: 10 },
+        dangerouslySetInnerHTML: { __html: svg }
+      }
+    ) : /* @__PURE__ */ jsx("div", { style: { fontSize: 12, padding: "10px", opacity: 0.7 }, className: "stream-mdx-mermaid-placeholder", children: "Waiting for a valid diagram\u2026" })
+  ] });
+};
+export {
+  MermaidBlock
+};

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@stream-mdx/mermaid",
+  "version": "0.0.3",
+  "description": "Mermaid diagram rendering addon for StreamMDX (Streaming Markdown V2)",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kmccleary3301/stream-mdx.git",
+    "directory": "packages/markdown-v2-mermaid"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "CHANGELOG.md"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup",
+    "test": "tsx __tests__/*.test.ts",
+    "clean": "rm -rf dist",
+    "prepack": "npm run build"
+  },
+  "dependencies": {
+    "mermaid": "^11.12.2"
+  },
+  "peerDependencies": {
+    "react": ">=18.2.0",
+    "react-dom": ">=18.2.0"
+  }
+}