react-ai-renderer 0.1.16 → 0.1.18

package/README.md

@@ -148,10 +148,11 @@ const componentHandlers = [
     name: 'Button',
     component: Button,
     selfClosing: false,
-    onRender: (item, scope) => {
-      console.log('Button 组件已渲染完成');
-      // 可以在这里触发下一个动作
-      // 例如：更新状态、发送请求等
+    onRenderProcess: (item, scope) => {
+      console.log('Button 组件渲染中...');
+    },
+    onRenderFinished: (item, scope) => {
+      console.log('Button 组件渲染完成');
     }
   }
 ];
@@ -195,14 +196,22 @@ const componentHandlers = [
     name: 'MyComponent',
     component: MyComponent,
     selfClosing: false,
-    onRender: (item, scope) => {
-      // 组件渲染完成后的回调
-      console.log('组件已渲染:', item);
+    onRenderProcess: (item, scope) => {
+      console.log('组件渲染中:', item);
+    },
+    onRenderFinished: (item, scope) => {
+      console.log('组件渲染完成:', item);
     }
   }
 ];
 ```
 
+**生命周期钩子说明：**
+
+- `onRenderProcess`: 在组件流式渲染过程中触发，适用于处理渐进式渲染逻辑
+- `onRenderFinished`: 在组件完全渲染完成后触发，适用于执行后续动作如状态更新、请求发送等
+- `onRender`: （向后兼容）如果未定义 `onRenderProcess`，会在渲染过程中调用此钩子
+
 ## ⚡ 性能优势
 
 ### 实时渲染

package/dist/index.cjs

@@ -10,7 +10,6 @@ var RemarkGfm = require('remark-gfm');
 var mdx = require('@mdx-js/mdx');
 var RehypeKatex = require('rehype-katex');
 var RehypeHighlight = require('rehype-highlight');
-var RehypeRaw = require('rehype-raw');
 
 function _interopNamespaceDefault(e) {
     var n = Object.create(null);
@@ -786,7 +785,8 @@ var MDXStreamingParser = /** @class */function () {
                 return "\"".concat(inner, "\"");
               });
               // 2. 为对象键名添加引号（如果还没有引号）
-              jsonValue = jsonValue.replace(/([{,]\s*)([a-zA-Z_$][a-zA-Z0-9_$]*)\s*:/g, '$1"$2":');
+              // 修复：使用 \p{L} 匹配 Unicode 字母（包括中文），使用 u 标志
+              jsonValue = jsonValue.replace(/([{,]\s*)([\p{L}_$][\p{L}\p{N}_$]*)\s*:/gu, '$1"$2":');
               // 3. 处理属性值中的模板字符串
               jsonValue = jsonValue.replace(/`([^`]*)`/g, function (match, p1) {
                 return JSON.stringify(p1);
@@ -58359,13 +58359,13 @@ function renderText(textContent, scope, registeredComponents) {
         children: textContent,
         components: registeredComponents,
         remarkPlugins: [RemarkMath, RemarkGfm, RemarkBreaks],
-        rehypePlugins: [RehypeRaw, RehypeKatex, [RehypeHighlight, {
+        rehypePlugins: [RehypeKatex, [RehypeHighlight, {
           detect: false,
           ignoreMissing: true,
           plainText: ['mermaid'] // 将mermaid作为纯文本处理，避免被错误高亮
         }]],
         remarkRehypeOptions: {
-          allowDangerousHtml: true // 允许处理 HTML 标签
+          allowDangerousHtml: false // 允许处理 HTML 标签
         }
       })];
     });
@@ -58625,10 +58625,523 @@ function MdxLayout(_a) {
   });
 }
 
+function generateSkeletonByComponentName(componentName, props, style) {
+  var _a, _b;
+  var baseStyle = __assign({
+    borderRadius: '8px',
+    backgroundColor: '#f3f4f6'
+  }, style);
+  // 根据组件名称模式匹配生成不同的骨架图
+  var name = componentName.toLowerCase();
+  // 图表类组件
+  if (name.includes('chart') || name.includes('graph') || name.includes('plot')) {
+    return /*#__PURE__*/runtime.jsxs("div", {
+      style: __assign(__assign({}, baseStyle), {
+        padding: '24px',
+        minHeight: (props === null || props === void 0 ? void 0 : props.height) ? "".concat(props.height, "px") : '300px',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '12px'
+      }),
+      children: [/*#__PURE__*/runtime.jsxs("div", {
+        style: {
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          marginBottom: '8px'
+        },
+        children: [/*#__PURE__*/runtime.jsx("div", {
+          style: {
+            width: '120px',
+            height: '20px',
+            backgroundColor: '#e5e7eb',
+            borderRadius: '4px'
+          }
+        }), /*#__PURE__*/runtime.jsx("div", {
+          style: {
+            width: '80px',
+            height: '16px',
+            backgroundColor: '#e5e7eb',
+            borderRadius: '4px'
+          }
+        })]
+      }), /*#__PURE__*/runtime.jsx("div", {
+        style: {
+          flex: 1,
+          display: 'flex',
+          alignItems: 'flex-end',
+          gap: '8px',
+          height: '200px'
+        },
+        children: Array.from({
+          length: 8
+        }).map(function (_, i) {
+          return /*#__PURE__*/runtime.jsx("div", {
+            style: {
+              flex: 1,
+              height: "".concat(Math.random() * 60 + 40, "%"),
+              backgroundColor: '#d1d5db',
+              borderRadius: '4px 4px 0 0',
+              animation: 'pulse 1.5s ease-in-out infinite',
+              animationDelay: "".concat(i * 0.1, "s")
+            }
+          }, i);
+        })
+      }), /*#__PURE__*/runtime.jsx("div", {
+        style: {
+          display: 'flex',
+          gap: '12px',
+          marginTop: '8px'
+        },
+        children: Array.from({
+          length: 3
+        }).map(function (_, i) {
+          return /*#__PURE__*/runtime.jsxs("div", {
+            style: {
+              display: 'flex',
+              alignItems: 'center',
+              gap: '6px'
+            },
+            children: [/*#__PURE__*/runtime.jsx("div", {
+              style: {
+                width: '12px',
+                height: '12px',
+                backgroundColor: '#d1d5db',
+                borderRadius: '2px'
+              }
+            }), /*#__PURE__*/runtime.jsx("div", {
+              style: {
+                width: '60px',
+                height: '12px',
+                backgroundColor: '#e5e7eb',
+                borderRadius: '2px'
+              }
+            })]
+          }, i);
+        })
+      }), /*#__PURE__*/runtime.jsx("style", {
+        children: "\n                    @keyframes pulse {\n                        0%, 100% { opacity: 1; }\n                        50% { opacity: 0.5; }\n                    }\n                "
+      })]
+    });
+  }
+  // 表格类组件
+  if (name.includes('table') || name.includes('grid')) {
+    var rowCount_1 = (props === null || props === void 0 ? void 0 : props.rows) || 5;
+    var colCount_1 = (props === null || props === void 0 ? void 0 : props.columns) || 4;
+    return /*#__PURE__*/runtime.jsxs("div", {
+      style: __assign(__assign({}, baseStyle), {
+        padding: '16px',
+        overflow: 'hidden'
+      }),
+      children: [/*#__PURE__*/runtime.jsxs("div", {
+        style: {
+          marginBottom: '12px'
+        },
+        children: [/*#__PURE__*/runtime.jsx("div", {
+          style: {
+            width: '150px',
+            height: '20px',
+            backgroundColor: '#e5e7eb',
+            borderRadius: '4px',
+            marginBottom: '8px'
+          }
+        }), /*#__PURE__*/runtime.jsx("div", {
+          style: {
+            width: '200px',
+            height: '16px',
+            backgroundColor: '#e5e7eb',
+            borderRadius: '4px'
+          }
+        })]
+      }), /*#__PURE__*/runtime.jsxs("div", {
+        style: {
+          border: '1px solid #e5e7eb',
+          borderRadius: '4px',
+          overflow: 'hidden'
+        },
+        children: [/*#__PURE__*/runtime.jsx("div", {
+          style: {
+            display: 'grid',
+            gridTemplateColumns: "repeat(".concat(colCount_1, ", 1fr)"),
+            backgroundColor: '#f9fafb',
+            borderBottom: '1px solid #e5e7eb'
+          },
+          children: Array.from({
+            length: colCount_1
+          }).map(function (_, i) {
+            return /*#__PURE__*/runtime.jsx("div", {
+              style: {
+                padding: '12px',
+                borderRight: i < colCount_1 - 1 ? '1px solid #e5e7eb' : 'none'
+              },
+              children: /*#__PURE__*/runtime.jsx("div", {
+                style: {
+                  width: '80%',
+                  height: '16px',
+                  backgroundColor: '#d1d5db',
+                  borderRadius: '2px'
+                }
+              })
+            }, i);
+          })
+        }), Array.from({
+          length: rowCount_1
+        }).map(function (_, rowIndex) {
+          return /*#__PURE__*/runtime.jsx("div", {
+            style: {
+              display: 'grid',
+              gridTemplateColumns: "repeat(".concat(colCount_1, ", 1fr)"),
+              borderBottom: rowIndex < rowCount_1 - 1 ? '1px solid #e5e7eb' : 'none'
+            },
+            children: Array.from({
+              length: colCount_1
+            }).map(function (_, colIndex) {
+              return /*#__PURE__*/runtime.jsx("div", {
+                style: {
+                  padding: '12px',
+                  borderRight: colIndex < colCount_1 - 1 ? '1px solid #e5e7eb' : 'none'
+                },
+                children: /*#__PURE__*/runtime.jsx("div", {
+                  style: {
+                    width: "".concat(Math.random() * 40 + 60, "%"),
+                    height: '14px',
+                    backgroundColor: '#e5e7eb',
+                    borderRadius: '2px'
+                  }
+                })
+              }, colIndex);
+            })
+          }, rowIndex);
+        })]
+      })]
+    });
+  }
+  // 卡片类组件
+  if (name.includes('card')) {
+    return /*#__PURE__*/runtime.jsxs("div", {
+      style: __assign(__assign({}, baseStyle), {
+        padding: '20px',
+        minHeight: '200px'
+      }),
+      children: [/*#__PURE__*/runtime.jsx("div", {
+        style: {
+          width: '60%',
+          height: '24px',
+          backgroundColor: '#e5e7eb',
+          borderRadius: '4px',
+          marginBottom: '16px'
+        }
+      }), /*#__PURE__*/runtime.jsx("div", {
+        style: {
+          width: '100%',
+          height: '16px',
+          backgroundColor: '#e5e7eb',
+          borderRadius: '4px',
+          marginBottom: '8px'
+        }
+      }), /*#__PURE__*/runtime.jsx("div", {
+        style: {
+          width: '90%',
+          height: '16px',
+          backgroundColor: '#e5e7eb',
+          borderRadius: '4px',
+          marginBottom: '8px'
+        }
+      }), /*#__PURE__*/runtime.jsx("div", {
+        style: {
+          width: '70%',
+          height: '16px',
+          backgroundColor: '#e5e7eb',
+          borderRadius: '4px',
+          marginBottom: '16px'
+        }
+      }), /*#__PURE__*/runtime.jsxs("div", {
+        style: {
+          display: 'flex',
+          gap: '8px',
+          marginTop: '16px'
+        },
+        children: [/*#__PURE__*/runtime.jsx("div", {
+          style: {
+            width: '80px',
+            height: '32px',
+            backgroundColor: '#d1d5db',
+            borderRadius: '4px'
+          }
+        }), /*#__PURE__*/runtime.jsx("div", {
+          style: {
+            width: '80px',
+            height: '32px',
+            backgroundColor: '#d1d5db',
+            borderRadius: '4px'
+          }
+        })]
+      })]
+    });
+  }
+  // 列表类组件
+  if (name.includes('list') || name.includes('todo')) {
+    var itemCount_1 = ((_a = props === null || props === void 0 ? void 0 : props.items) === null || _a === void 0 ? void 0 : _a.length) || (props === null || props === void 0 ? void 0 : props.count) || 3;
+    return /*#__PURE__*/runtime.jsx("div", {
+      style: __assign(__assign({}, baseStyle), {
+        padding: '16px'
+      }),
+      children: Array.from({
+        length: itemCount_1
+      }).map(function (_, i) {
+        return /*#__PURE__*/runtime.jsxs("div", {
+          style: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: '12px',
+            marginBottom: i < itemCount_1 - 1 ? '12px' : '0',
+            paddingBottom: i < itemCount_1 - 1 ? '12px' : '0',
+            borderBottom: i < itemCount_1 - 1 ? '1px solid #e5e7eb' : 'none'
+          },
+          children: [/*#__PURE__*/runtime.jsx("div", {
+            style: {
+              width: '20px',
+              height: '20px',
+              backgroundColor: '#d1d5db',
+              borderRadius: '4px',
+              flexShrink: 0
+            }
+          }), /*#__PURE__*/runtime.jsxs("div", {
+            style: {
+              flex: 1
+            },
+            children: [/*#__PURE__*/runtime.jsx("div", {
+              style: {
+                width: "".concat(Math.random() * 30 + 60, "%"),
+                height: '16px',
+                backgroundColor: '#e5e7eb',
+                borderRadius: '4px',
+                marginBottom: '6px'
+              }
+            }), /*#__PURE__*/runtime.jsx("div", {
+              style: {
+                width: "".concat(Math.random() * 40 + 40, "%"),
+                height: '14px',
+                backgroundColor: '#e5e7eb',
+                borderRadius: '4px'
+              }
+            })]
+          })]
+        }, i);
+      })
+    });
+  }
+  // 表单类组件
+  if (name.includes('form') || name.includes('input') || name.includes('select')) {
+    var fieldCount_1 = ((_b = props === null || props === void 0 ? void 0 : props.fields) === null || _b === void 0 ? void 0 : _b.length) || 3;
+    return /*#__PURE__*/runtime.jsxs("div", {
+      style: __assign(__assign({}, baseStyle), {
+        padding: '20px'
+      }),
+      children: [Array.from({
+        length: fieldCount_1
+      }).map(function (_, i) {
+        return /*#__PURE__*/runtime.jsxs("div", {
+          style: {
+            marginBottom: i < fieldCount_1 - 1 ? '20px' : '0'
+          },
+          children: [/*#__PURE__*/runtime.jsx("div", {
+            style: {
+              width: '100px',
+              height: '14px',
+              backgroundColor: '#e5e7eb',
+              borderRadius: '2px',
+              marginBottom: '8px'
+            }
+          }), /*#__PURE__*/runtime.jsx("div", {
+            style: {
+              width: '100%',
+              height: '40px',
+              backgroundColor: '#f3f4f6',
+              border: '1px solid #e5e7eb',
+              borderRadius: '4px'
+            }
+          })]
+        }, i);
+      }), /*#__PURE__*/runtime.jsxs("div", {
+        style: {
+          display: 'flex',
+          gap: '12px',
+          marginTop: '20px'
+        },
+        children: [/*#__PURE__*/runtime.jsx("div", {
+          style: {
+            width: '100px',
+            height: '36px',
+            backgroundColor: '#d1d5db',
+            borderRadius: '4px'
+          }
+        }), /*#__PURE__*/runtime.jsx("div", {
+          style: {
+            width: '100px',
+            height: '36px',
+            backgroundColor: '#e5e7eb',
+            borderRadius: '4px'
+          }
+        })]
+      })]
+    });
+  }
+  // 图片/媒体类组件
+  if (name.includes('image') || name.includes('img') || name.includes('video') || name.includes('media')) {
+    return /*#__PURE__*/runtime.jsx("div", {
+      style: __assign(__assign({}, baseStyle), {
+        padding: '16px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        minHeight: (props === null || props === void 0 ? void 0 : props.height) ? "".concat(props.height, "px") : '200px'
+      }),
+      children: /*#__PURE__*/runtime.jsx("div", {
+        style: {
+          width: '100%',
+          height: '100%',
+          backgroundColor: '#e5e7eb',
+          borderRadius: '8px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center'
+        },
+        children: /*#__PURE__*/runtime.jsx("div", {
+          style: {
+            width: '48px',
+            height: '48px',
+            backgroundColor: '#d1d5db',
+            borderRadius: '50%',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center'
+          },
+          children: /*#__PURE__*/runtime.jsx("div", {
+            style: {
+              width: '24px',
+              height: '24px',
+              backgroundColor: '#9ca3af',
+              borderRadius: '4px'
+            }
+          })
+        })
+      })
+    });
+  }
+  // 默认骨架图
+  return /*#__PURE__*/runtime.jsxs("div", {
+    style: __assign(__assign({}, baseStyle), {
+      padding: '24px',
+      minHeight: '120px',
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '12px',
+      alignItems: 'center',
+      justifyContent: 'center'
+    }),
+    children: [/*#__PURE__*/runtime.jsxs("div", {
+      style: {
+        width: '100%',
+        maxWidth: '400px'
+      },
+      children: [/*#__PURE__*/runtime.jsx("div", {
+        style: {
+          width: '60%',
+          height: '20px',
+          backgroundColor: '#e5e7eb',
+          borderRadius: '4px',
+          marginBottom: '12px'
+        }
+      }), /*#__PURE__*/runtime.jsx("div", {
+        style: {
+          width: '100%',
+          height: '16px',
+          backgroundColor: '#e5e7eb',
+          borderRadius: '4px',
+          marginBottom: '8px'
+        }
+      }), /*#__PURE__*/runtime.jsx("div", {
+        style: {
+          width: '90%',
+          height: '16px',
+          backgroundColor: '#e5e7eb',
+          borderRadius: '4px',
+          marginBottom: '8px'
+        }
+      }), /*#__PURE__*/runtime.jsx("div", {
+        style: {
+          width: '75%',
+          height: '16px',
+          backgroundColor: '#e5e7eb',
+          borderRadius: '4px'
+        }
+      })]
+    }), /*#__PURE__*/runtime.jsxs("div", {
+      style: {
+        display: 'flex',
+        gap: '8px',
+        marginTop: '12px'
+      },
+      children: [/*#__PURE__*/runtime.jsx("div", {
+        style: {
+          width: '60px',
+          height: '32px',
+          backgroundColor: '#d1d5db',
+          borderRadius: '4px'
+        }
+      }), /*#__PURE__*/runtime.jsx("div", {
+        style: {
+          width: '60px',
+          height: '32px',
+          backgroundColor: '#d1d5db',
+          borderRadius: '4px'
+        }
+      })]
+    })]
+  });
+}
+/**
+ * 创建骨架图组件
+ */
+function createSkeletonComponent(componentName, componentData, skeletonConfig, style) {
+  // 如果提供了自定义骨架图组件
+  if (skeletonConfig === null || skeletonConfig === void 0 ? void 0 : skeletonConfig.component) {
+    var SkeletonComponent = skeletonConfig.component;
+    return /*#__PURE__*/runtime.jsx(SkeletonComponent, {
+      componentName: componentName,
+      componentData: componentData,
+      props: componentData === null || componentData === void 0 ? void 0 : componentData.props,
+      style: style
+    });
+  }
+  // 如果提供了自定义骨架图元素
+  if (skeletonConfig === null || skeletonConfig === void 0 ? void 0 : skeletonConfig.element) {
+    return skeletonConfig.element;
+  }
+  // 如果提供了自定义生成函数
+  if (skeletonConfig === null || skeletonConfig === void 0 ? void 0 : skeletonConfig.generator) {
+    return skeletonConfig.generator({
+      componentName: componentName,
+      componentData: componentData,
+      props: componentData === null || componentData === void 0 ? void 0 : componentData.props,
+      style: style
+    });
+  }
+  // 如果启用了自动生成，或者没有提供任何配置
+  if ((skeletonConfig === null || skeletonConfig === void 0 ? void 0 : skeletonConfig.autoGenerate) !== false) {
+    return generateSkeletonByComponentName(componentName, componentData === null || componentData === void 0 ? void 0 : componentData.props, style);
+  }
+  // 默认返回空
+  return /*#__PURE__*/runtime.jsx(React.Fragment, {});
+}
+
 var ComponentPlaceholder = function (_a) {
   var componentName = _a.componentName,
     style = _a.style,
-    loader = _a.loader;
+    loader = _a.loader,
+    skeleton = _a.skeleton,
+    componentData = _a.componentData;
   // 如果有自定义加载内容，优先使用
   if (loader) {
     // 如果是布尔值 true，使用默认样式
@@ -58680,6 +59193,19 @@ var ComponentPlaceholder = function (_a) {
       }
     }
   }
+  // 如果没有 loader，尝试使用骨架图
+  if (skeleton || !loader) {
+    try {
+      var skeletonElement = createSkeletonComponent(componentName, componentData, skeleton, style);
+      // 如果骨架图生成成功且不是空元素，使用骨架图
+      if (skeletonElement && /*#__PURE__*/React.isValidElement(skeletonElement)) {
+        return skeletonElement;
+      }
+    } catch (e) {
+      // 如果骨架图生成失败，继续使用默认占位内容
+      console.warn('Failed to generate skeleton:', e);
+    }
+  }
   // 默认占位内容
   return /*#__PURE__*/runtime.jsxs("div", {
     style: __assign({