react-ai-renderer 0.1.17 → 0.1.19

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

@@ -785,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);
@@ -58397,6 +58398,12 @@ function formatProps(props) {
       key = _b[0],
       value = _b[1];
     if (typeof value === 'string') {
+      var trimmedValue = value.trim();
+      var isArrowFunction = trimmedValue.includes('=>');
+      var isRegularFunction = trimmedValue.startsWith('function');
+      if (isArrowFunction || isRegularFunction) {
+        return "".concat(key, "={").concat(value, "}");
+      }
       return "".concat(key, "=\"").concat(value, "\"");
     }
     try {
@@ -58480,6 +58487,9 @@ function parseComponentRecursively(allComponentHandlers, item, scope) {
           componentHandler = allComponentHandlers.find(function (c) {
             return c.name === item.value;
           });
+          if (componentHandler === null || componentHandler === void 0 ? void 0 : componentHandler.onRenderStart) {
+            componentHandler.onRenderStart(item, scope);
+          }
           props = __assign({}, item.props);
           propsString = formatProps(props);
           propsString += " scope={props.scope}";
@@ -58502,16 +58512,13 @@ function parseComponentRecursively(allComponentHandlers, item, scope) {
           componentString = (componentHandler === null || componentHandler === void 0 ? void 0 : componentHandler.selfClosing) ? "<".concat(item.value, " ").concat(propsString, " />") : ["<".concat(item.value, " ").concat(propsString, ">"), childrenContent_1, "</".concat(item.value, ">")].join('\n');
           // 调用组件的渲染钩子
           if (isComplete) {
-            // 渲染完成后的钩子
             if (componentHandler === null || componentHandler === void 0 ? void 0 : componentHandler.onRenderFinished) {
               componentHandler.onRenderFinished(item, scope);
             }
           } else {
-            // 渲染过程中的钩子
             if (componentHandler === null || componentHandler === void 0 ? void 0 : componentHandler.onRenderProcess) {
               componentHandler.onRenderProcess(item, scope);
             } else if (componentHandler === null || componentHandler === void 0 ? void 0 : componentHandler.onRender) {
-              // 向后兼容：如果存在旧的 onRender，也调用它
               componentHandler.onRender(item, scope);
             }
           }
@@ -59318,14 +59325,14 @@ function convertComponentsToHandlers(components, componentHandlers) {
       name = _b[0],
       componentValue = _b[1];
     if (isEnhancedComponentConfig(componentValue)) {
-      // 增强模式：从配置对象中提取信息
       var config = componentValue;
       return {
         component: config.value,
         name: name,
         selfClosing: config.selfClosing !== undefined ? config.selfClosing : isSelfClosingComponent(config.value),
-        onRenderFinished: config.onRenderFinished,
+        onRenderStart: config.onRenderStart,
         onRenderProcess: config.onRenderProcess,
+        onRenderFinished: config.onRenderFinished,
         loader: config.loader,
         label: config.label
       };
@@ -59411,6 +59418,7 @@ function ReactAIRenderer(_a) {
               if (!resultContent) return [3 /*break*/, 8];
               resultContent = fixMDXContent(resultContent);
               parsedData = parser.parse('magic', resultContent);
+              console.log('parsedData', parsedData);
               return [4 /*yield*/, Promise.all(parsedData.map(function (item) {
                 return parseComponentRecursively(allComponentHandlers, item, scope);
               }))];