react-ai-renderer 0.1.4 → 0.1.5

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "react-ai-renderer",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "type": "module",
-  "main": "dist/index.js",
-  "module": "dist/index.es.js",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
     "dist",
@@ -36,27 +36,32 @@
     "react-dom": "^18.2.0"
   },
   "optionalDependencies": {
-    "mermaid": "^10.6.1",
-    "katex": "^0.16.0"
+    "katex": "^0.16.0",
+    "mermaid": "^10.6.1"
   },
   "dependencies": {
     "@mdx-js/mdx": "^3.0.0",
+    "react-syntax-highlighter": "^15.5.0",
     "rehype-highlight": "7.0.2",
     "rehype-katex": "7.0.1",
     "rehype-raw": "^7.0.0",
     "remark-breaks": "4.0.0",
     "remark-gfm": "4.0.0",
-    "remark-math": "6.0.0"
+    "remark-html": "16.0.1",
+    "remark-math": "6.0.0",
+    "remark-rehype": "^11.1.1"
   },
   "devDependencies": {
     "@babel/core": "^7.28.3",
     "@babel/preset-react": "^7.27.1",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^24.0.0",
+    "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
     "@rollup/plugin-typescript": "^11.0.0",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
+    "@types/react-syntax-highlighter": "^15.5.9",
     "mermaid": "^10.6.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -66,4 +71,4 @@
     "tslib": "^2.8.1",
     "typescript": "4.9.5"
   }
-}
+}

package/dist/MermaidRenderer-62cbf217.js

@@ -1,171 +0,0 @@
-'use strict';
-
-var index = require('./index-58ab9759.js');
-var React = require('react');
-var runtime = require('react/jsx-runtime');
-require('remark-math');
-require('remark-breaks');
-require('remark-gfm');
-require('@mdx-js/mdx');
-require('rehype-katex');
-require('rehype-highlight');
-
-var mermaidPromise = null;
-var getMermaid = function () {
-  if (mermaidPromise) {
-    return mermaidPromise;
-  }
-  mermaidPromise = import('mermaid').then(function (module) {
-    return module.default || module;
-  }).catch(function (error) {
-    console.warn('Mermaid is not available. Install it to enable chart rendering.');
-    return null;
-  });
-  return mermaidPromise;
-};
-// 全局缓存
-var globalSvgCache = new Map();
-function MermaidRenderer(_a) {
-  var _this = this;
-  var chart = _a.chart,
-    index$1 = _a.index;
-  var ref = React.useRef(null);
-  var _b = index.__read(React.useState(false), 2),
-    ready = _b[0],
-    setReady = _b[1];
-  var _c = index.__read(React.useState(null), 2),
-    error = _c[0],
-    setError = _c[1];
-  var _d = index.__read(React.useState(null), 2),
-    mermaidAvailable = _d[0],
-    setMermaidAvailable = _d[1];
-  var chartId = React.useMemo(function () {
-    return "mermaid-".concat(index$1, "-").concat(Math.random().toString(36).substr(2, 9));
-  }, [index$1]);
-  var renderChart = React.useCallback(function () {
-    return index.__awaiter(_this, void 0, void 0, function () {
-      var mermaid, cachedSvg, isValid, svg, renderError_1, error_1;
-      return index.__generator(this, function (_a) {
-        switch (_a.label) {
-          case 0:
-            if (!chart || !ref.current) return [2 /*return*/];
-            _a.label = 1;
-          case 1:
-            _a.trys.push([1, 9,, 10]);
-            return [4 /*yield*/, getMermaid()];
-          case 2:
-            mermaid = _a.sent();
-            // 如果 mermaid 不可用，显示友好的提示信息
-            if (!mermaid) {
-              setMermaidAvailable(false);
-              return [2 /*return*/];
-            }
-            setMermaidAvailable(true);
-            cachedSvg = globalSvgCache.get(chart);
-            if (cachedSvg) {
-              ref.current.innerHTML = cachedSvg;
-              return [2 /*return*/];
-            }
-            if (!!mermaid.initialized) return [3 /*break*/, 4];
-            // 设置全局错误处理函数
-            mermaid.parseError = function (err) {
-              console.warn('Mermaid parse error:', err.message);
-            };
-            return [4 /*yield*/, mermaid.initialize({
-              startOnLoad: false,
-              theme: 'default',
-              securityLevel: 'loose',
-              themeVariables: {
-                primaryColor: '#2196f3'
-              },
-              logLevel: 1 // 减少日志输出
-            })];
-          case 3:
-            _a.sent();
-            _a.label = 4;
-          case 4:
-            _a.trys.push([4, 7,, 8]);
-            return [4 /*yield*/, mermaid.parse(chart.trim(), {
-              suppressErrors: true
-            })];
-          case 5:
-            isValid = _a.sent();
-            if (!isValid) {
-              throw new Error('Invalid mermaid syntax');
-            }
-            return [4 /*yield*/, mermaid.render(chartId, chart.trim())];
-          case 6:
-            svg = _a.sent().svg;
-            if (ref.current) {
-              ref.current.innerHTML = svg;
-              // 更新全局缓存
-              globalSvgCache.set(chart, svg);
-            }
-            setError(null);
-            return [3 /*break*/, 8];
-          case 7:
-            renderError_1 = _a.sent();
-            // 忽略渲染错误，设置错误状态但不抛出异常
-            setError(renderError_1 instanceof Error ? renderError_1.message : 'Failed to render chart');
-            // 清空容器内容以避免显示旧内容
-            if (ref.current) {
-              ref.current.innerHTML = '';
-            }
-            return [3 /*break*/, 8];
-          case 8:
-            return [3 /*break*/, 10];
-          case 9:
-            error_1 = _a.sent();
-            // 处理初始化或其他错误
-            console.error('Mermaid initialization failed:', error_1);
-            setError(error_1 instanceof Error ? error_1.message : 'Failed to render chart');
-            if (ref.current) {
-              ref.current.innerHTML = '';
-            }
-            return [3 /*break*/, 10];
-          case 10:
-            return [2 /*return*/];
-        }
-      });
-    });
-  }, [chart, chartId]);
-  React.useEffect(function () {
-    setReady(true);
-    return function () {
-      // 清理工作
-      if (ref.current) {
-        ref.current.innerHTML = '';
-      }
-    };
-  }, []);
-  React.useEffect(function () {
-    if (ready) {
-      renderChart();
-    }
-  }, [ready, renderChart]);
-  // 如果 mermaid 不可用，显示友好的提示信息
-  if (mermaidAvailable === false) {
-    return /*#__PURE__*/runtime.jsxs("div", {
-      className: "mermaid-placeholder",
-      children: [/*#__PURE__*/runtime.jsx("p", {
-        children: "Mermaid library is not available. To enable chart rendering, please install mermaid:"
-      }), /*#__PURE__*/runtime.jsx("code", {
-        children: "npm install mermaid"
-      })]
-    });
-  }
-  if (!ready) return null;
-  if (error) return /*#__PURE__*/runtime.jsx("div", {
-    className: "mermaid-error",
-    children: "\u56FE\u8868\u6E32\u67D3\u5931\u8D25"
-  });
-  return /*#__PURE__*/runtime.jsx("div", {
-    className: "mermaid-wrapper",
-    children: /*#__PURE__*/runtime.jsx("div", {
-      ref: ref,
-      className: "mermaid-container"
-    })
-  });
-}
-
-exports.default = MermaidRenderer;

package/dist/MermaidRenderer-680adac3.js

@@ -1,169 +0,0 @@
-import { _ as __read, a as __awaiter, b as __generator } from './index-543584d8.js';
-import { useRef, useState, useMemo, useCallback, useEffect } from 'react';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import 'remark-math';
-import 'remark-breaks';
-import 'remark-gfm';
-import '@mdx-js/mdx';
-import 'rehype-katex';
-import 'rehype-highlight';
-
-var mermaidPromise = null;
-var getMermaid = function () {
-  if (mermaidPromise) {
-    return mermaidPromise;
-  }
-  mermaidPromise = import('mermaid').then(function (module) {
-    return module.default || module;
-  }).catch(function (error) {
-    console.warn('Mermaid is not available. Install it to enable chart rendering.');
-    return null;
-  });
-  return mermaidPromise;
-};
-// 全局缓存
-var globalSvgCache = new Map();
-function MermaidRenderer(_a) {
-  var _this = this;
-  var chart = _a.chart,
-    index = _a.index;
-  var ref = useRef(null);
-  var _b = __read(useState(false), 2),
-    ready = _b[0],
-    setReady = _b[1];
-  var _c = __read(useState(null), 2),
-    error = _c[0],
-    setError = _c[1];
-  var _d = __read(useState(null), 2),
-    mermaidAvailable = _d[0],
-    setMermaidAvailable = _d[1];
-  var chartId = useMemo(function () {
-    return "mermaid-".concat(index, "-").concat(Math.random().toString(36).substr(2, 9));
-  }, [index]);
-  var renderChart = useCallback(function () {
-    return __awaiter(_this, void 0, void 0, function () {
-      var mermaid, cachedSvg, isValid, svg, renderError_1, error_1;
-      return __generator(this, function (_a) {
-        switch (_a.label) {
-          case 0:
-            if (!chart || !ref.current) return [2 /*return*/];
-            _a.label = 1;
-          case 1:
-            _a.trys.push([1, 9,, 10]);
-            return [4 /*yield*/, getMermaid()];
-          case 2:
-            mermaid = _a.sent();
-            // 如果 mermaid 不可用，显示友好的提示信息
-            if (!mermaid) {
-              setMermaidAvailable(false);
-              return [2 /*return*/];
-            }
-            setMermaidAvailable(true);
-            cachedSvg = globalSvgCache.get(chart);
-            if (cachedSvg) {
-              ref.current.innerHTML = cachedSvg;
-              return [2 /*return*/];
-            }
-            if (!!mermaid.initialized) return [3 /*break*/, 4];
-            // 设置全局错误处理函数
-            mermaid.parseError = function (err) {
-              console.warn('Mermaid parse error:', err.message);
-            };
-            return [4 /*yield*/, mermaid.initialize({
-              startOnLoad: false,
-              theme: 'default',
-              securityLevel: 'loose',
-              themeVariables: {
-                primaryColor: '#2196f3'
-              },
-              logLevel: 1 // 减少日志输出
-            })];
-          case 3:
-            _a.sent();
-            _a.label = 4;
-          case 4:
-            _a.trys.push([4, 7,, 8]);
-            return [4 /*yield*/, mermaid.parse(chart.trim(), {
-              suppressErrors: true
-            })];
-          case 5:
-            isValid = _a.sent();
-            if (!isValid) {
-              throw new Error('Invalid mermaid syntax');
-            }
-            return [4 /*yield*/, mermaid.render(chartId, chart.trim())];
-          case 6:
-            svg = _a.sent().svg;
-            if (ref.current) {
-              ref.current.innerHTML = svg;
-              // 更新全局缓存
-              globalSvgCache.set(chart, svg);
-            }
-            setError(null);
-            return [3 /*break*/, 8];
-          case 7:
-            renderError_1 = _a.sent();
-            // 忽略渲染错误，设置错误状态但不抛出异常
-            setError(renderError_1 instanceof Error ? renderError_1.message : 'Failed to render chart');
-            // 清空容器内容以避免显示旧内容
-            if (ref.current) {
-              ref.current.innerHTML = '';
-            }
-            return [3 /*break*/, 8];
-          case 8:
-            return [3 /*break*/, 10];
-          case 9:
-            error_1 = _a.sent();
-            // 处理初始化或其他错误
-            console.error('Mermaid initialization failed:', error_1);
-            setError(error_1 instanceof Error ? error_1.message : 'Failed to render chart');
-            if (ref.current) {
-              ref.current.innerHTML = '';
-            }
-            return [3 /*break*/, 10];
-          case 10:
-            return [2 /*return*/];
-        }
-      });
-    });
-  }, [chart, chartId]);
-  useEffect(function () {
-    setReady(true);
-    return function () {
-      // 清理工作
-      if (ref.current) {
-        ref.current.innerHTML = '';
-      }
-    };
-  }, []);
-  useEffect(function () {
-    if (ready) {
-      renderChart();
-    }
-  }, [ready, renderChart]);
-  // 如果 mermaid 不可用，显示友好的提示信息
-  if (mermaidAvailable === false) {
-    return /*#__PURE__*/jsxs("div", {
-      className: "mermaid-placeholder",
-      children: [/*#__PURE__*/jsx("p", {
-        children: "Mermaid library is not available. To enable chart rendering, please install mermaid:"
-      }), /*#__PURE__*/jsx("code", {
-        children: "npm install mermaid"
-      })]
-    });
-  }
-  if (!ready) return null;
-  if (error) return /*#__PURE__*/jsx("div", {
-    className: "mermaid-error",
-    children: "\u56FE\u8868\u6E32\u67D3\u5931\u8D25"
-  });
-  return /*#__PURE__*/jsx("div", {
-    className: "mermaid-wrapper",
-    children: /*#__PURE__*/jsx("div", {
-      ref: ref,
-      className: "mermaid-container"
-    })
-  });
-}
-
-export { MermaidRenderer as default };