@bdocs/plugin-math 4.0.2 → 4.0.4

package/dist/client/index.d.mts

@@ -1,20 +1,38 @@
 
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$react from "react";
 
 //#region src/client/Math.d.ts
 interface MathProps {
   children: string;
+  /** Pre-rendered KaTeX HTML, baked at build time by the math plugin. */
+  html?: string;
 }
+/**
+ * Inline math. When the build-time transform has baked the KaTeX output into
+ * the `html` prop, this renders synchronously and KaTeX is never bundled into
+ * the critical path. For direct MDX usage without the bake (rare), KaTeX is
+ * imported on demand and the raw TeX stays visible until it arrives — the
+ * server and the first client render agree, so hydration stays consistent.
+ */
 declare function MathComponent({
-  children
-}: MathProps): _$react_jsx_runtime0.JSX.Element;
+  children,
+  html
+}: MathProps): _$react.JSX.Element;
 //#endregion
 //#region src/client/BlockMath.d.ts
 interface BlockMathProps {
   children: string;
+  /** Pre-rendered KaTeX HTML, baked at build time by the math plugin. */
+  html?: string;
 }
+/**
+ * Block math. Same contract as `MathComponent`: the build-time transform bakes
+ * KaTeX into `html`, so the critical client path never bundles KaTeX; direct
+ * MDX usage falls back to an on-demand import.
+ */
 declare function BlockMath({
-  children
-}: BlockMathProps): _$react_jsx_runtime0.JSX.Element;
+  children,
+  html
+}: BlockMathProps): _$react.JSX.Element;
 //#endregion
 export { BlockMath, MathComponent as Math, MathComponent };

package/dist/client/index.mjs

@@ -3,31 +3,74 @@
  * Copyright (c) 2026 Jesus Alcala
  * Licensed under the MIT License.
  */
-import { useMemo } from "react";
-import katex from "katex";
+import { useEffect, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/client/Math.tsx
-function MathComponent({ children }) {
-	return /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: useMemo(() => {
-		try {
-			return katex.renderToString(children, { displayMode: false });
-		} catch {
-			return children;
-		}
-	}, [children]) } });
+/**
+* Inline math. When the build-time transform has baked the KaTeX output into
+* the `html` prop, this renders synchronously and KaTeX is never bundled into
+* the critical path. For direct MDX usage without the bake (rare), KaTeX is
+* imported on demand and the raw TeX stays visible until it arrives — the
+* server and the first client render agree, so hydration stays consistent.
+*/
+function MathComponent({ children, html }) {
+	const [lazyHtml, setLazyHtml] = useState(null);
+	useEffect(() => {
+		if (typeof html === "string" || lazyHtml !== null) return;
+		let active = true;
+		import("katex").then((k) => {
+			if (!active) return;
+			try {
+				setLazyHtml(k.default.renderToString(children, { displayMode: false }));
+			} catch {
+				setLazyHtml(children);
+			}
+		}).catch(() => {
+			if (active) setLazyHtml(children);
+		});
+		return () => {
+			active = false;
+		};
+	}, [
+		html,
+		children,
+		lazyHtml
+	]);
+	return /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: typeof html === "string" ? html : lazyHtml ?? children } });
 }
 //#endregion
 //#region src/client/BlockMath.tsx
-function BlockMath({ children }) {
-	return /* @__PURE__ */ jsx("div", {
-		className: "math-block my-6 flex justify-center overflow-x-auto",
-		dangerouslySetInnerHTML: { __html: useMemo(() => {
+/**
+* Block math. Same contract as `MathComponent`: the build-time transform bakes
+* KaTeX into `html`, so the critical client path never bundles KaTeX; direct
+* MDX usage falls back to an on-demand import.
+*/
+function BlockMath({ children, html }) {
+	const [lazyHtml, setLazyHtml] = useState(null);
+	useEffect(() => {
+		if (typeof html === "string" || lazyHtml !== null) return;
+		let active = true;
+		import("katex").then((k) => {
+			if (!active) return;
 			try {
-				return katex.renderToString(children, { displayMode: true });
+				setLazyHtml(k.default.renderToString(children, { displayMode: true }));
 			} catch {
-				return children;
+				setLazyHtml(children);
 			}
-		}, [children]) }
+		}).catch(() => {
+			if (active) setLazyHtml(children);
+		});
+		return () => {
+			active = false;
+		};
+	}, [
+		html,
+		children,
+		lazyHtml
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		className: "math-block my-6 flex justify-center overflow-x-auto",
+		dangerouslySetInnerHTML: { __html: typeof html === "string" ? html : lazyHtml ?? children }
 	});
 }
 //#endregion

package/dist/node/index.mjs

@@ -3,10 +3,23 @@
  * Copyright (c) 2026 Jesus Alcala
  * Licensed under the MIT License.
  */
+import katex from "katex";
 //#region src/node/source-transform.ts
 function escapeJsString(content) {
 	return content.replace(/\\/g, "\\\\").replace(/"/g, "\\\"").replace(/\n/g, "\\n");
 }
+function renderMathHtml(tex, displayMode) {
+	try {
+		return katex.renderToString(tex, { displayMode });
+	} catch {
+		return tex;
+	}
+}
+/**
+* Bake KaTeX output at build time. The emitted `<BlockMath>`/`<MathComponent>`
+* tags carry the pre-rendered HTML in a `html` prop, so the client components
+* never need to bundle KaTeX (~250 KB minified) just to display equations.
+*/
 function preprocessMath(source) {
 	const placeholders = [];
 	let result = source.replace(/(`{3,})[\s\S]*?\1/g, (match) => {
@@ -22,10 +35,11 @@ function preprocessMath(source) {
 		return `\0MATH_PH_${placeholders.length - 1}\0`;
 	});
 	result = result.replace(/\$\$([\s\S]*?)\$\$/g, (_, content) => {
-		return `<BlockMath>{"${escapeJsString(content.trim())}"}</BlockMath>`;
+		const trimmed = content.trim();
+		return `<BlockMath html={"${escapeJsString(renderMathHtml(trimmed, true))}"}>{"${escapeJsString(trimmed)}"}</BlockMath>`;
 	});
 	result = result.replace(/(?<!\$)\$(?!\$)(.+?)\$(?!\$)/g, (_, content) => {
-		return `<MathComponent>{"${escapeJsString(content)}"}</MathComponent>`;
+		return `<MathComponent html={"${escapeJsString(renderMathHtml(content, false))}"}>{"${escapeJsString(content)}"}</MathComponent>`;
 	});
 	while (result.includes("\0MATH_PH_")) result = result.replace(/\0MATH_PH_(\d+)\0/g, (_, idx) => {
 		return placeholders[parseInt(idx)];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bdocs/plugin-math",
-  "version": "4.0.2",
+  "version": "4.0.4",
   "description": "KaTeX math plugin for Boltdocs",
   "publishConfig": {
     "access": "public"
@@ -26,10 +26,10 @@
     "katex": "^0.16.11"
   },
   "peerDependencies": {
-    "@bdocs/dui": "^0.2.0",
+    "@bdocs/dui": "^0.6.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "boltdocs": "3.2.2"
+    "boltdocs": "^3.4.0"
   },
   "devDependencies": {
     "@types/katex": "^0.16.7",
@@ -40,7 +40,8 @@
     "react-dom": "^19.0.0",
     "tsdown": "^0.21.7",
     "typescript": "^5.9.3",
-    "boltdocs": "3.2.2"
+    "boltdocs": "^3.4.0",
+    "tsdown-config": "1.0.0"
   },
   "scripts": {
     "build": "tsdown --config-loader unrun && node --input-type=module -e \"import fs from 'node:fs'; fs.mkdirSync('dist/client', { recursive: true }); fs.cpSync('src/client/index.css', 'dist/client/index.css');\"",