react-ai-renderer 0.1.24 → 0.1.25

package/dist/index.d.ts

@@ -51,6 +51,8 @@ interface ComponentHandler extends BaseComponentHandler {
     skeleton?: SkeletonConfig;
     /** 组件的显示标签，用于在占位组件中显示 */
     label?: string;
+    /** 流式渲染：为 true 时组件在 isComplete=false 阶段即渲染实际内容而非 loader */
+    streamable?: boolean;
 }
 /** 增强模式的组件配置 */
 interface EnhancedComponentConfig {
@@ -70,6 +72,8 @@ interface EnhancedComponentConfig {
     onRenderFinished?: (item: ComponentData$1, scope: any) => void;
     /** 是否自闭合 */
     selfClosing?: boolean;
+    /** 流式渲染：为 true 时组件在流式解析未完成阶段即渲染实际内容而非 loader */
+    streamable?: boolean;
 }
 /** 组件值类型：可以是组件本身，也可以是增强配置对象 */
 type ComponentValue = React.ComponentType<any> | EnhancedComponentConfig;

package/dist/index.js

@@ -816,33 +816,37 @@ var MDXStreamingParser = /** @class */function () {
           // 处理 JSON 值（对象或数组）
           var startChar = input[j];
           var startBracket = j;
-          // 使用局部变量跟踪属性值内部的括号嵌套
           var localBracketCount = 0;
           var localSquareBracketCount = 0;
           var inValueQuote = false;
           var valueQuoteChar = '';
+          var inBacktick = false;
+          var closingStack = [];
           if (startChar === '{') {
             localBracketCount = 1;
+            closingStack.push('}');
           } else {
             localSquareBracketCount = 1;
+            closingStack.push(']');
           }
           j++;
-          // 同时跟踪花括号和方括号的嵌套
           while (j < input.length && (localBracketCount > 0 || localSquareBracketCount > 0)) {
-            if (input[j] === '"' || input[j] === "'") {
-              // 在字符串内，跳过整个字符串
+            if (input[j] === '`' && !inValueQuote) {
+              inBacktick = !inBacktick;
+              j++;
+            } else if (inBacktick) {
+              j++;
+            } else if (input[j] === '"' || input[j] === "'") {
               if (!inValueQuote) {
                 inValueQuote = true;
                 valueQuoteChar = input[j];
               } else if (input[j] === valueQuoteChar) {
-                // 检查是否是转义的引号
                 var escapeCount = 0;
                 var k = j - 1;
                 while (k >= 0 && input[k] === '\\') {
                   escapeCount++;
                   k--;
                 }
-                // 如果是偶数个反斜杠，说明引号没有被转义
                 if (escapeCount % 2 === 0) {
                   inValueQuote = false;
                 }
@@ -850,15 +854,23 @@ var MDXStreamingParser = /** @class */function () {
               j++;
             } else if (input[j] === '{' && !inValueQuote) {
               localBracketCount++;
+              closingStack.push('}');
               j++;
             } else if (input[j] === '}' && !inValueQuote) {
               localBracketCount--;
+              if (closingStack.length > 0 && closingStack[closingStack.length - 1] === '}') {
+                closingStack.pop();
+              }
               j++;
             } else if (input[j] === '[' && !inValueQuote) {
               localSquareBracketCount++;
+              closingStack.push(']');
               j++;
             } else if (input[j] === ']' && !inValueQuote) {
               localSquareBracketCount--;
+              if (closingStack.length > 0 && closingStack[closingStack.length - 1] === ']') {
+                closingStack.pop();
+              }
               j++;
             } else {
               j++;
@@ -866,31 +878,46 @@ var MDXStreamingParser = /** @class */function () {
           }
           var rawValue = input.slice(startBracket, j);
           value = input.slice(startBracket + 1, j - 1);
+          // 流式修复：输入未结束但括号未闭合，尝试关闭不完整的表达式
+          if (j >= input.length && closingStack.length > 0) {
+            var healed = rawValue;
+            if (inBacktick) healed += '`';
+            if (inValueQuote) healed += valueQuoteChar;
+            healed += closingStack.reverse().join('');
+            // 剥离外层 JSX 表达式括号 {{ → {，用 (...) 包裹强制表达式上下文
+            var inner = healed.slice(1, -1);
+            try {
+              props[propName] = new Function('return (' + inner + ')')();
+            } catch (_a) {
+              try {
+                var jv = inner.replace(/`([^`]*)`/g, function (_, p1) {
+                  return JSON.stringify(p1);
+                }).replace(/'([^'\\]*(\\.[^'\\]*)*)'/g, function (m) {
+                  var s = m.slice(1, -1).replace(/\\/g, '\\\\').replace(/"/g, '\\"');
+                  return "\"".concat(s, "\"");
+                }).replace(/([{,]\s*)([\p{L}_$][\p{L}\p{N}_$]*)\s*:/gu, '$1"$2":');
+                props[propName] = JSON.parse(jv);
+              } catch (_b) {
+                // 修复失败，不设置 prop，组件以骨架态渲染
+              }
+            }
+            i = j;
+            continue;
+          }
           try {
-            // 直接使用 Function 构造器来评估 JavaScript 表达式
-            // 这比手动转换 JavaScript 对象字面量为 JSON 更可靠
             props[propName] = new Function('return ' + rawValue)();
           } catch (e) {
-            // 如果 Function 构造器失败，尝试手动转换并解析为 JSON
             try {
-              // 将 JavaScript 对象字面量转换为有效的 JSON
-              // 1. 将单引号字符串转换为双引号字符串
               var jsonValue = value.replace(/'([^'\\]*(\\.[^'\\]*)*)'/g, function (match) {
-                // 将单引号内容转换为双引号，并转义内部的双引号和反斜杠
                 var inner = match.slice(1, -1).replace(/\\/g, '\\\\').replace(/"/g, '\\"');
                 return "\"".concat(inner, "\"");
               });
-              // 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);
               });
-              // 4. 尝试解析为 JSON
               props[propName] = JSON.parse(jsonValue);
             } catch (jsonError) {
-              // 如果都失败了，保持原值
               props[propName] = value;
             }
           }
@@ -59487,7 +59514,8 @@ function convertComponentsToHandlers(components, componentHandlers) {
         onRenderProcess: config.onRenderProcess,
         onRenderFinished: config.onRenderFinished,
         loader: config.loader,
-        label: config.label
+        label: config.label,
+        streamable: config.streamable
       });
     } else {
       handlers.push({
@@ -59562,11 +59590,12 @@ function parsedStructureSignature(parsedData) {
 }
 function hasPendingLoaderComponents(parsedData, handlers) {
   return parsedData.some(function (item) {
-    var _a;
     if (item.type !== 'component' || item.isComplete === true) return false;
-    return Boolean((_a = handlers.find(function (h) {
+    var handler = handlers.find(function (h) {
       return h.name === item.value;
-    })) === null || _a === void 0 ? void 0 : _a.loader);
+    });
+    if (handler === null || handler === void 0 ? void 0 : handler.streamable) return false;
+    return Boolean(handler === null || handler === void 0 ? void 0 : handler.loader);
   });
 }
 function ReactAIRenderer(_a) {
@@ -59702,7 +59731,7 @@ function ReactAIRenderer(_a) {
               finalComponent = [];
               fallbackComponent = [];
               _loop_3 = function (i) {
-                var item, currentParsedItem, _result, placeholderForFallback, componentNameMatch, componentName_1, componentHandler, displayName, cacheKey;
+                var item, currentParsedItem, _result, placeholderForFallback, componentNameMatch, componentName_1, componentHandler, displayName, cacheKey, cacheKey;
                 return __generator(this, function (_d) {
                   switch (_d.label) {
                     case 0:
@@ -59715,10 +59744,10 @@ function ReactAIRenderer(_a) {
                     case 1:
                       _result = _d.sent();
                       finalComponent.push(_result);
-                      return [3 /*break*/, 12];
+                      return [3 /*break*/, 14];
                     case 2:
                       componentNameMatch = item.value.match(/<([A-Z][A-Za-z0-9]*)/);
-                      if (!componentNameMatch) return [3 /*break*/, 10];
+                      if (!componentNameMatch) return [3 /*break*/, 12];
                       componentName_1 = componentNameMatch[1];
                       componentHandler = allComponentHandlers.find(function (c) {
                         return c.name === componentName_1;
@@ -59732,14 +59761,21 @@ function ReactAIRenderer(_a) {
                         loader: componentHandler === null || componentHandler === void 0 ? void 0 : componentHandler.loader,
                         key: "fallback-loader-".concat(componentName_1)
                       });
-                      if (!(currentParsedItem.isComplete === true || !(componentHandler === null || componentHandler === void 0 ? void 0 : componentHandler.loader))) return [3 /*break*/, 6];
+                      if (!(currentParsedItem.isComplete === true || !(componentHandler === null || componentHandler === void 0 ? void 0 : componentHandler.loader))) return [3 /*break*/, 7];
                       cacheKey = "mdx-component-".concat(componentName_1, "-").concat(i);
                       if (!completedComponentsCacheRef.current.has(cacheKey)) return [3 /*break*/, 3];
                       _result = completedComponentsCacheRef.current.get(cacheKey);
-                      return [3 /*break*/, 5];
+                      return [3 /*break*/, 6];
                     case 3:
-                      return [4 /*yield*/, renderMdx(item.value, scope, allComponents)];
+                      if (!(componentHandler === null || componentHandler === void 0 ? void 0 : componentHandler.streamable)) return [3 /*break*/, 4];
+                      _result = /*#__PURE__*/React__default.createElement(componentHandler.component, __assign(__assign({}, currentParsedItem.props), {
+                        key: cacheKey
+                      }));
+                      completedComponentsCacheRef.current.set(cacheKey, _result);
+                      return [3 /*break*/, 6];
                     case 4:
+                      return [4 /*yield*/, renderMdx(item.value, scope, allComponents)];
+                    case 5:
                       _result = _d.sent();
                       if (/*#__PURE__*/React__default.isValidElement(_result)) {
                         _result = /*#__PURE__*/React__default.cloneElement(_result, {
@@ -59751,29 +59787,37 @@ function ReactAIRenderer(_a) {
                         }, _result);
                       }
                       completedComponentsCacheRef.current.set(cacheKey, _result);
-                      _d.label = 5;
-                    case 5:
-                      finalComponent.push(_result);
-                      return [3 /*break*/, 9];
+                      _d.label = 6;
                     case 6:
-                      if (!placeholderForFallback) return [3 /*break*/, 7];
-                      finalComponent.push(placeholderForFallback);
-                      return [3 /*break*/, 9];
+                      finalComponent.push(_result);
+                      return [3 /*break*/, 11];
                     case 7:
-                      return [4 /*yield*/, renderMdx(item.value, scope, allComponents)];
-                    case 8:
-                      _result = _d.sent();
+                      if (!(componentHandler === null || componentHandler === void 0 ? void 0 : componentHandler.streamable)) return [3 /*break*/, 8];
+                      cacheKey = "mdx-component-".concat(componentName_1, "-").concat(i);
+                      _result = /*#__PURE__*/React__default.createElement(componentHandler.component, __assign(__assign({}, currentParsedItem.props), {
+                        key: cacheKey
+                      }));
                       finalComponent.push(_result);
-                      _d.label = 9;
+                      return [3 /*break*/, 11];
+                    case 8:
+                      if (!placeholderForFallback) return [3 /*break*/, 9];
+                      finalComponent.push(placeholderForFallback);
+                      return [3 /*break*/, 11];
                     case 9:
-                      return [3 /*break*/, 12];
-                    case 10:
                       return [4 /*yield*/, renderMdx(item.value, scope, allComponents)];
-                    case 11:
+                    case 10:
                       _result = _d.sent();
                       finalComponent.push(_result);
-                      _d.label = 12;
+                      _d.label = 11;
+                    case 11:
+                      return [3 /*break*/, 14];
                     case 12:
+                      return [4 /*yield*/, renderMdx(item.value, scope, allComponents)];
+                    case 13:
+                      _result = _d.sent();
+                      finalComponent.push(_result);
+                      _d.label = 14;
+                    case 14:
                       fallbackComponent.length = 0;
                       fallbackComponent.push.apply(fallbackComponent, __spreadArray([], __read(finalComponent.slice(0, i)), false));
                       if (placeholderForFallback) {