@next-core/brick-kit 2.178.1 → 2.178.2

package/dist/index.bundle.js

@@ -12602,159 +12602,163 @@
     return brick;
   };
 
-  /**
-   * 可以渲染单个 `useBrick` 的 React 组件。
-   *
-   * @example
-   *
-   * ```tsx
-   * <BrickAsComponent
-   *   useBrick={{
-   *     brick: "your.any-brick"
-   *   }}
-   *   data={yourData}
-   * />
-   * ```
-   *
-   * @param props - 属性。
-   */
-  var SingleBrickAsComponent = /*#__PURE__*/React__default["default"].memo(function SingleBrickAsComponent(_ref) {
-    var _internalApiGetCurren, _expandedBrickConf$br;
-    var {
-      useBrick,
-      data,
-      refCallback,
-      immediatelyRefCallback
-    } = _ref;
-    var firstRunRef = React.useRef(true);
-    var innerRefCallbackRef = React.useRef();
-    var elementRef = React.useRef();
-    var [expandedBrickConf, setExpandedBrickConf] = React.useState(null);
-    var tplTagName = getTagNameOfCustomTemplate(useBrick.brick, (_internalApiGetCurren = _internalApiGetCurrentContext().app) === null || _internalApiGetCurren === void 0 ? void 0 : _internalApiGetCurren.id);
-    var isBrickAvailable = React.useMemo(() => {
-      if (brickUtils.isObject(useBrick.if) && !isPreEvaluated(useBrick.if)) {
-        // eslint-disable-next-line
-        console.warn("Currently resolvable-if in `useBrick` is not supported.");
-      } else if (!looseCheckIfByTransform(useBrick, data, {
-        allowInject: true,
-        // useBrick 中嵌套custom-template的情况下, 会存在丢失getTplVariables的情况, 因此需要在此进行补充
-        tplContextId: useBrick[symbolForTplContextId]
-      })) {
-        return false;
-      }
-      return true;
-    }, [useBrick, data]);
-    var requireSuspense = React.useMemo(() => {
-      var context;
-      if (useBrick.brick === formRenderer) {
-        var formData = typeof useBrick.properties.formData === "string" ? JSON.parse(useBrick.properties.formData) : useBrick.properties.formData;
-        context = formData.context;
-      } else if (tplTagName) {
-        context = customTemplateRegistry.get(tplTagName).state;
-      }
-      return Array.isArray(context) && context.some(ctx => !!ctx.resolve);
-    }, [tplTagName, useBrick]);
-    var [suspenseReady, setSuspenseReady] = React.useState(false);
-    var runtimeBrick = React.useMemo( /*#__PURE__*/_asyncToGenerator__default["default"](function* () {
-      if (!isBrickAvailable) {
-        return null;
-      }
-
-      // If the router state is initial, ignore rendering the sub-brick.
-      if (_internalApiGetRouterState() === "initial" && !window.DEVELOPER_PREVIEW) {
-        return;
-      }
-      var promise = _internalApiLoadDynamicBricksInBrickConf(useBrick).catch(handleHttpError);
+  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+  function SingleBrickAsComponentFactory(React) {
+    function SingleBrickAsComponent(_ref) {
+      var _internalApiGetCurren, _expandedBrickConf$br;
+      var {
+        useBrick,
+        data,
+        refCallback,
+        immediatelyRefCallback
+      } = _ref;
+      var firstRunRef = React.useRef(true);
+      var innerRefCallbackRef = React.useRef();
+      var elementRef = React.useRef();
+      var [expandedBrickConf, setExpandedBrickConf] = React.useState(null);
+      var tplTagName = getTagNameOfCustomTemplate(useBrick.brick, (_internalApiGetCurren = _internalApiGetCurrentContext().app) === null || _internalApiGetCurren === void 0 ? void 0 : _internalApiGetCurren.id);
+      var isBrickAvailable = React.useMemo(() => {
+        if (brickUtils.isObject(useBrick.if) && !isPreEvaluated(useBrick.if)) {
+          // eslint-disable-next-line
+          console.warn("Currently resolvable-if in `useBrick` is not supported.");
+        } else if (!looseCheckIfByTransform(useBrick, data, {
+          allowInject: true,
+          // useBrick 中嵌套custom-template的情况下, 会存在丢失getTplVariables的情况, 因此需要在此进行补充
+          tplContextId: useBrick[symbolForTplContextId]
+        })) {
+          return false;
+        }
+        return true;
+      }, [useBrick, data]);
+      var requireSuspense = React.useMemo(() => {
+        var context;
+        if (useBrick.brick === formRenderer) {
+          var formData = typeof useBrick.properties.formData === "string" ? JSON.parse(useBrick.properties.formData) : useBrick.properties.formData;
+          context = formData.context;
+        } else if (tplTagName) {
+          context = customTemplateRegistry.get(tplTagName).state;
+        }
+        return Array.isArray(context) && context.some(ctx => !!ctx.resolve);
+      }, [tplTagName, useBrick]);
+      var [suspenseReady, setSuspenseReady] = React.useState(false);
+      var runtimeBrick = React.useMemo( /*#__PURE__*/_asyncToGenerator__default["default"](function* () {
+        if (!isBrickAvailable) {
+          return null;
+        }
 
-      // 需要等待构件加载完成，因为构件可能包含属性初始化逻辑。
-      // 如果先创建构件，再完成构件加载，其属性默认初始化动作会覆盖用户定义的属性。
-      // 另一方面，避免额外的 MicroTask，因为 graph.general-graph 构件依赖固定的 useBrick 渲染时机。
-      if (useBrick.brick.includes("-") && !customElements.get(useBrick.brick)) {
-        yield promise;
-      }
-      var brick = getCurrentRunTimeBrick(useBrick, tplTagName, data);
-      var expanded = useBrick.brick === formRenderer ? (requireSuspense ? AsyncExpandCustomForm : ExpandCustomForm)(typeof useBrick.properties.formData === "string" ? JSON.parse(useBrick.properties.formData) : useBrick.properties.formData, useBrick, false) : expandTemplateInUseBrick(useBrick, tplTagName, brick, requireSuspense);
-      if (requireSuspense) {
-        setExpandedBrickConf(yield expanded);
-      } else {
-        setExpandedBrickConf(expanded);
-      }
-      setSuspenseReady(true);
+        // If the router state is initial, ignore rendering the sub-brick.
+        if (_internalApiGetRouterState() === "initial" && !window.DEVELOPER_PREVIEW) {
+          return;
+        }
+        var promise = _internalApiLoadDynamicBricksInBrickConf(useBrick).catch(handleHttpError);
 
-      // Let `transform` works still.
-      transformProperties(brick.properties, data, useBrick.transform, useBrick.transformFrom, undefined, {
-        allowInject: true
-      });
+        // 需要等待构件加载完成，因为构件可能包含属性初始化逻辑。
+        // 如果先创建构件，再完成构件加载，其属性默认初始化动作会覆盖用户定义的属性。
+        // 另一方面，避免额外的 MicroTask，因为 graph.general-graph 构件依赖固定的 useBrick 渲染时机。
+        if (useBrick.brick.includes("-") && !customElements.get(useBrick.brick)) {
+          yield promise;
+        }
+        var brick = getCurrentRunTimeBrick(useBrick, tplTagName, data);
+        var expanded = useBrick.brick === formRenderer ? (requireSuspense ? AsyncExpandCustomForm : ExpandCustomForm)(typeof useBrick.properties.formData === "string" ? JSON.parse(useBrick.properties.formData) : useBrick.properties.formData, useBrick, false) : expandTemplateInUseBrick(useBrick, tplTagName, brick, requireSuspense);
+        if (requireSuspense) {
+          setExpandedBrickConf(yield expanded);
+        } else {
+          setExpandedBrickConf(expanded);
+        }
+        setSuspenseReady(true);
 
-      // 设置 properties refProperty值
-      if (useBrick[symbolForComputedPropsFromProxy]) {
-        Object.entries(useBrick[symbolForComputedPropsFromProxy]).forEach(_ref3 => {
-          var [propName, propValue] = _ref3;
-          _.set(brick.properties, propName, propValue);
+        // Let `transform` works still.
+        transformProperties(brick.properties, data, useBrick.transform, useBrick.transformFrom, undefined, {
+          allowInject: true
         });
-      }
-      if (useBrick.lifeCycle) {
-        var resolver = _internalApiGetResolver();
-        yield resolver.resolve({
-          brick: useBrick.brick,
-          lifeCycle: useBrick.lifeCycle
-        }, brick, _objectSpread__default["default"](_objectSpread__default["default"]({}, _internalApiGetCurrentContext()), {}, {
-          tplContextId: useBrick[symbolForTplContextId],
-          formContextId: useBrick[symbolForFormContextId]
-        }));
-      }
-      return brick;
-    }), [useBrick, data, isBrickAvailable, tplTagName, requireSuspense]);
-    var dispatchLifeCycleEvent = /*#__PURE__*/function () {
-      var _ref4 = _asyncToGenerator__default["default"](function* (event, handlers, brick) {
-        for (var handler of [].concat(handlers)) {
-          listenerFactory(handler, _objectSpread__default["default"](_objectSpread__default["default"]({}, _internalApiGetCurrentContext()), {}, {
+
+        // 设置 properties refProperty值
+        if (useBrick[symbolForComputedPropsFromProxy]) {
+          Object.entries(useBrick[symbolForComputedPropsFromProxy]).forEach(_ref3 => {
+            var [propName, propValue] = _ref3;
+            _.set(brick.properties, propName, propValue);
+          });
+        }
+        if (useBrick.lifeCycle) {
+          var resolver = _internalApiGetResolver();
+          yield resolver.resolve({
+            brick: useBrick.brick,
+            lifeCycle: useBrick.lifeCycle
+          }, brick, _objectSpread__default["default"](_objectSpread__default["default"]({}, _internalApiGetCurrentContext()), {}, {
             tplContextId: useBrick[symbolForTplContextId],
             formContextId: useBrick[symbolForFormContextId]
-          }), brick)(event);
+          }));
         }
-      });
-      return function dispatchLifeCycleEvent(_x, _x2, _x3) {
-        return _ref4.apply(this, arguments);
-      };
-    }();
-    var updateBrick = React.useCallback((brick, element) => {
-      brick.element = element;
-      var {
-        [symbolForTplContextId]: tplContextId
-      } = useBrick;
-      var {
-        [symbolForFormContextId]: formContextId
-      } = useBrick;
-      if (useBrick.iid) {
-        element.dataset.iid = useBrick.iid;
-      }
-      setRealProperties(element, brick.properties);
-      unbindListeners(element);
-      if (brick.events) {
-        bindListeners(element, transformEvents(data, brick.events), _objectSpread__default["default"](_objectSpread__default["default"]({}, _internalApiGetCurrentContext()), {}, {
-          tplContextId,
-          formContextId
-        }));
-      }
-      // 设置proxyEvent
-      handleProxyOfCustomTemplate(brick);
-      if (!["formRenderer", "custom-template"].includes(element.$$typeof)) {
-        if (!useBrick.brick.includes("-")) {
-          element.$$typeof = "native";
-        } else if (!customElements.get(useBrick.brick)) {
-          element.$$typeof = "invalid";
+        return brick;
+      }), [useBrick, data, isBrickAvailable, tplTagName, requireSuspense]);
+      var dispatchLifeCycleEvent = /*#__PURE__*/function () {
+        var _ref4 = _asyncToGenerator__default["default"](function* (event, handlers, brick) {
+          for (var handler of [].concat(handlers)) {
+            listenerFactory(handler, _objectSpread__default["default"](_objectSpread__default["default"]({}, _internalApiGetCurrentContext()), {}, {
+              tplContextId: useBrick[symbolForTplContextId],
+              formContextId: useBrick[symbolForFormContextId]
+            }), brick)(event);
+          }
+        });
+        return function dispatchLifeCycleEvent(_x, _x2, _x3) {
+          return _ref4.apply(this, arguments);
+        };
+      }();
+      var updateBrick = React.useCallback((brick, element) => {
+        brick.element = element;
+        var {
+          [symbolForTplContextId]: tplContextId
+        } = useBrick;
+        var {
+          [symbolForFormContextId]: formContextId
+        } = useBrick;
+        if (useBrick.iid) {
+          element.dataset.iid = useBrick.iid;
+        }
+        setRealProperties(element, brick.properties);
+        unbindListeners(element);
+        if (brick.events) {
+          bindListeners(element, transformEvents(data, brick.events), _objectSpread__default["default"](_objectSpread__default["default"]({}, _internalApiGetCurrentContext()), {}, {
+            tplContextId,
+            formContextId
+          }));
         }
-      }
-    }, [data, useBrick]);
-    React.useEffect(() => {
-      if (firstRunRef.current) {
-        firstRunRef.current = false;
-        return;
-      }
-      _asyncToGenerator__default["default"](function* () {
-        var element = elementRef.current;
-        if (element) {
+        // 设置proxyEvent
+        handleProxyOfCustomTemplate(brick);
+        if (!["formRenderer", "custom-template"].includes(element.$$typeof)) {
+          if (!useBrick.brick.includes("-")) {
+            element.$$typeof = "native";
+          } else if (!customElements.get(useBrick.brick)) {
+            element.$$typeof = "invalid";
+          }
+        }
+      }, [data, useBrick]);
+      React.useEffect(() => {
+        if (firstRunRef.current) {
+          firstRunRef.current = false;
+          return;
+        }
+        _asyncToGenerator__default["default"](function* () {
+          var element = elementRef.current;
+          if (element) {
+            var brick;
+            try {
+              brick = yield runtimeBrick;
+            } catch (e) {
+              handleHttpError(e);
+            }
+            // sub-brick rendering is ignored.
+            if (!brick) {
+              return;
+            }
+            updateBrick(brick, element);
+          }
+        })();
+      }, [runtimeBrick, updateBrick]);
+      innerRefCallbackRef.current = /*#__PURE__*/function () {
+        var _ref6 = _asyncToGenerator__default["default"](function* (element) {
+          immediatelyRefCallback === null || immediatelyRefCallback === void 0 ? void 0 : immediatelyRefCallback(element);
+          elementRef.current = element;
           var brick;
           try {
             brick = yield runtimeBrick;
@@ -12762,62 +12766,83 @@
             handleHttpError(e);
           }
           // sub-brick rendering is ignored.
-          if (!brick) {
-            return;
-          }
-          updateBrick(brick, element);
-        }
-      })();
-    }, [runtimeBrick, updateBrick]);
-    innerRefCallbackRef.current = /*#__PURE__*/function () {
-      var _ref6 = _asyncToGenerator__default["default"](function* (element) {
-        immediatelyRefCallback === null || immediatelyRefCallback === void 0 ? void 0 : immediatelyRefCallback(element);
-        elementRef.current = element;
-        var brick;
-        try {
-          brick = yield runtimeBrick;
-        } catch (e) {
-          handleHttpError(e);
-        }
-        // sub-brick rendering is ignored.
-        if (brick) {
-          if (element) {
-            var _useBrick$lifeCycle;
-            updateBrick(brick, element);
-            if ((_useBrick$lifeCycle = useBrick.lifeCycle) !== null && _useBrick$lifeCycle !== void 0 && _useBrick$lifeCycle.onMount) {
-              dispatchLifeCycleEvent(new CustomEvent("mount"), useBrick.lifeCycle.onMount, brick);
-            }
-          } else {
-            var _useBrick$lifeCycle2;
-            if ((_useBrick$lifeCycle2 = useBrick.lifeCycle) !== null && _useBrick$lifeCycle2 !== void 0 && _useBrick$lifeCycle2.onUnmount) {
-              dispatchLifeCycleEvent(new CustomEvent("unmount"), useBrick.lifeCycle.onUnmount, brick);
+          if (brick) {
+            if (element) {
+              var _useBrick$lifeCycle;
+              updateBrick(brick, element);
+              if ((_useBrick$lifeCycle = useBrick.lifeCycle) !== null && _useBrick$lifeCycle !== void 0 && _useBrick$lifeCycle.onMount) {
+                dispatchLifeCycleEvent(new CustomEvent("mount"), useBrick.lifeCycle.onMount, brick);
+              }
+            } else {
+              var _useBrick$lifeCycle2;
+              if ((_useBrick$lifeCycle2 = useBrick.lifeCycle) !== null && _useBrick$lifeCycle2 !== void 0 && _useBrick$lifeCycle2.onUnmount) {
+                dispatchLifeCycleEvent(new CustomEvent("unmount"), useBrick.lifeCycle.onUnmount, brick);
+              }
             }
           }
-        }
-        refCallback === null || refCallback === void 0 ? void 0 : refCallback(element);
-      });
-      return function (_x4) {
-        return _ref6.apply(this, arguments);
-      };
-    }();
+          refCallback === null || refCallback === void 0 ? void 0 : refCallback(element);
+        });
+        return function (_x4) {
+          return _ref6.apply(this, arguments);
+        };
+      }();
 
-    // ref https://reactjs.org/docs/refs-and-the-dom.html#caveats-with-callback-refs
-    var innerRefCallback = React__default["default"].useCallback(element => {
-      innerRefCallbackRef.current(element);
-    }, []);
-    var childConfs = React.useMemo(() => isBrickAvailable && suspenseReady ? slotsToChildren((expandedBrickConf !== null && expandedBrickConf !== void 0 ? expandedBrickConf : useBrick).slots) : [], [isBrickAvailable, suspenseReady, expandedBrickConf, useBrick]);
-    if (!isBrickAvailable || !suspenseReady) {
-      return null;
-    }
-    var tagName = (_expandedBrickConf$br = expandedBrickConf === null || expandedBrickConf === void 0 ? void 0 : expandedBrickConf.brick) !== null && _expandedBrickConf$br !== void 0 ? _expandedBrickConf$br : tplTagName || useBrick.brick;
-    return /*#__PURE__*/React__default["default"].createElement(tagName, {
-      ref: innerRefCallback
-    }, ...childConfs.map((item, index) => /*#__PURE__*/React__default["default"].createElement(SingleBrickAsComponent, {
-      key: index,
-      useBrick: item,
-      data: data
-    })));
-  });
+      // ref https://reactjs.org/docs/refs-and-the-dom.html#caveats-with-callback-refs
+      var innerRefCallback = React.useCallback(element => {
+        innerRefCallbackRef.current(element);
+      }, []);
+      var childConfs = React.useMemo(() => isBrickAvailable && suspenseReady ? slotsToChildren((expandedBrickConf !== null && expandedBrickConf !== void 0 ? expandedBrickConf : useBrick).slots) : [], [isBrickAvailable, suspenseReady, expandedBrickConf, useBrick]);
+      if (!isBrickAvailable || !suspenseReady) {
+        return null;
+      }
+      var tagName = (_expandedBrickConf$br = expandedBrickConf === null || expandedBrickConf === void 0 ? void 0 : expandedBrickConf.brick) !== null && _expandedBrickConf$br !== void 0 ? _expandedBrickConf$br : tplTagName || useBrick.brick;
+      return React.createElement(tagName, {
+        ref: innerRefCallback
+      }, ...childConfs.map((item, index) => /*#__PURE__*/React.createElement(SingleBrickAsComponent, {
+        key: index,
+        useBrick: item,
+        data: data
+      })));
+    }
+    return React.memo(SingleBrickAsComponent);
+  }
+
+  /**
+   * 可以渲染单个 `useBrick` 的 React 组件。
+   *
+   * @example
+   *
+   * ```tsx
+   * <BrickAsComponent
+   *   useBrick={{
+   *     brick: "your.any-brick"
+   *   }}
+   *   data={yourData}
+   * />
+   * ```
+   *
+   * @param props - 属性。
+   */
+  var SingleBrickAsComponent = SingleBrickAsComponentFactory(React__default["default"]);
+  function BrickAsComponentFactory(React) {
+    return function BrickAsComponent(_ref7) {
+      var {
+        useBrick,
+        data
+      } = _ref7;
+      if (Array.isArray(useBrick)) {
+        return /*#__PURE__*/React.createElement(React.Fragment, null, useBrick.map((item, index) => /*#__PURE__*/React.createElement(SingleBrickAsComponent, {
+          key: index,
+          useBrick: item,
+          data: data
+        })));
+      }
+      return /*#__PURE__*/React.createElement(SingleBrickAsComponent, {
+        useBrick: useBrick,
+        data: data
+      });
+    };
+  }
 
   /**
    * 可以渲染 `useBrick` 的 React 组件。
@@ -12837,23 +12862,7 @@
    *
    * @param props - 属性。
    */
-  function BrickAsComponent(_ref7) {
-    var {
-      useBrick,
-      data
-    } = _ref7;
-    if (Array.isArray(useBrick)) {
-      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, useBrick.map((item, index) => /*#__PURE__*/React__default["default"].createElement(SingleBrickAsComponent, {
-        key: index,
-        useBrick: item,
-        data: data
-      })));
-    }
-    return /*#__PURE__*/React__default["default"].createElement(SingleBrickAsComponent, {
-      useBrick: useBrick,
-      data: data
-    });
-  }
+  var BrickAsComponent = BrickAsComponentFactory(React__default["default"]);
   function slotsToChildren(slots) {
     if (!slots) {
       return [];
@@ -12876,138 +12885,156 @@
   }
 
   /* istanbul ignore next */
-  // eslint-disable-next-line react/display-name
-  var ForwardRefSingleBrickAsComponent = /*#__PURE__*/React__default["default"].memo( /*#__PURE__*/React.forwardRef(function LegacySingleBrickAsComponent(_ref9, ref) {
-    var _internalApiGetCurren2, _expandedBrickConf$br2;
-    var {
-      useBrick,
-      data,
-      refCallback
-    } = _ref9;
-    var firstRunRef = React.useRef(true);
-    var innerRefCallbackRef = React.useRef();
-    var elementRef = React.useRef();
-    var [expandedBrickConf, setExpandedBrickConf] = React.useState(null);
-    var tplTagName = getTagNameOfCustomTemplate(useBrick.brick, (_internalApiGetCurren2 = _internalApiGetCurrentContext().app) === null || _internalApiGetCurren2 === void 0 ? void 0 : _internalApiGetCurren2.id);
-    var isBrickAvailable = React__default["default"].useMemo(() => {
-      if (brickUtils.isObject(useBrick.if) && !isPreEvaluated(useBrick.if)) {
-        // eslint-disable-next-line
-        console.warn("Currently resolvable-if in `useBrick` is not supported.");
-      } else if (!looseCheckIfByTransform(useBrick, data, {
-        allowInject: true,
-        // useBrick 中嵌套custom-template的情况下, 会存在丢失getTplVariables的情况, 因此需要在此进行补充
-        tplContextId: useBrick[symbolForTplContextId]
-      })) {
-        return false;
-      }
-      return true;
-    }, [useBrick, data]);
-    var requireSuspense = React.useMemo(() => {
-      var context;
-      if (useBrick.brick === formRenderer) {
-        var formData = typeof useBrick.properties.formData === "string" ? JSON.parse(useBrick.properties.formData) : useBrick.properties.formData;
-        context = formData.context;
-      } else if (tplTagName) {
-        context = customTemplateRegistry.get(tplTagName).state;
-      }
-      return Array.isArray(context) && context.some(ctx => !!ctx.resolve);
-    }, [tplTagName, useBrick]);
-    var [suspenseReady, setSuspenseReady] = React.useState(false);
-
-    /* istanbul ignore next (never reach in test) */
-    React.useImperativeHandle(ref, () => {
-      return elementRef.current;
-    });
-    var runtimeBrick = React__default["default"].useMemo( /*#__PURE__*/_asyncToGenerator__default["default"](function* () {
-      if (!isBrickAvailable) {
-        return null;
-      }
-
-      // If the router state is initial, ignore rendering the sub-brick.
-      if (_internalApiGetRouterState() === "initial" && !window.DEVELOPER_PREVIEW) {
-        return;
-      }
-      var promise = _internalApiLoadDynamicBricksInBrickConf(useBrick).catch(handleHttpError);
-      if (useBrick.brick.includes("-") && !customElements.get(useBrick.brick)) {
-        yield promise;
-      }
-      var brick = getCurrentRunTimeBrick(useBrick, tplTagName, data);
-      var expanded = useBrick.brick === formRenderer ? (requireSuspense ? AsyncExpandCustomForm : ExpandCustomForm)(typeof useBrick.properties.formData === "string" ? JSON.parse(useBrick.properties.formData) : useBrick.properties.formData, useBrick, false) : expandTemplateInUseBrick(useBrick, tplTagName, brick, requireSuspense);
-      if (requireSuspense) {
-        setExpandedBrickConf(yield expanded);
-      } else {
-        setExpandedBrickConf(expanded);
-      }
-      setSuspenseReady(true);
-
-      // Let `transform` works still.
-      transformProperties(brick.properties, data, useBrick.transform, useBrick.transformFrom, undefined, {
-        allowInject: true
+  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+  function ForwardRefSingleBrickAsComponentFactory(React) {
+    var fn = React.forwardRef(function LegacySingleBrickAsComponent(_ref9, ref) {
+      var _internalApiGetCurren2, _expandedBrickConf$br2;
+      var {
+        useBrick,
+        data,
+        refCallback
+      } = _ref9;
+      var firstRunRef = React.useRef(true);
+      var innerRefCallbackRef = React.useRef();
+      var elementRef = React.useRef();
+      var [expandedBrickConf, setExpandedBrickConf] = React.useState(null);
+      var tplTagName = getTagNameOfCustomTemplate(useBrick.brick, (_internalApiGetCurren2 = _internalApiGetCurrentContext().app) === null || _internalApiGetCurren2 === void 0 ? void 0 : _internalApiGetCurren2.id);
+      var isBrickAvailable = React.useMemo(() => {
+        if (brickUtils.isObject(useBrick.if) && !isPreEvaluated(useBrick.if)) {
+          // eslint-disable-next-line
+          console.warn("Currently resolvable-if in `useBrick` is not supported.");
+        } else if (!looseCheckIfByTransform(useBrick, data, {
+          allowInject: true,
+          // useBrick 中嵌套custom-template的情况下, 会存在丢失getTplVariables的情况, 因此需要在此进行补充
+          tplContextId: useBrick[symbolForTplContextId]
+        })) {
+          return false;
+        }
+        return true;
+      }, [useBrick, data]);
+      var requireSuspense = React.useMemo(() => {
+        var context;
+        if (useBrick.brick === formRenderer) {
+          var formData = typeof useBrick.properties.formData === "string" ? JSON.parse(useBrick.properties.formData) : useBrick.properties.formData;
+          context = formData.context;
+        } else if (tplTagName) {
+          context = customTemplateRegistry.get(tplTagName).state;
+        }
+        return Array.isArray(context) && context.some(ctx => !!ctx.resolve);
+      }, [tplTagName, useBrick]);
+      var [suspenseReady, setSuspenseReady] = React.useState(false);
+
+      /* istanbul ignore next (never reach in test) */
+      React.useImperativeHandle(ref, () => {
+        return elementRef.current;
       });
+      var runtimeBrick = React.useMemo( /*#__PURE__*/_asyncToGenerator__default["default"](function* () {
+        if (!isBrickAvailable) {
+          return null;
+        }
+
+        // If the router state is initial, ignore rendering the sub-brick.
+        if (_internalApiGetRouterState() === "initial" && !window.DEVELOPER_PREVIEW) {
+          return;
+        }
+        var promise = _internalApiLoadDynamicBricksInBrickConf(useBrick).catch(handleHttpError);
+        if (useBrick.brick.includes("-") && !customElements.get(useBrick.brick)) {
+          yield promise;
+        }
+        var brick = getCurrentRunTimeBrick(useBrick, tplTagName, data);
+        var expanded = useBrick.brick === formRenderer ? (requireSuspense ? AsyncExpandCustomForm : ExpandCustomForm)(typeof useBrick.properties.formData === "string" ? JSON.parse(useBrick.properties.formData) : useBrick.properties.formData, useBrick, false) : expandTemplateInUseBrick(useBrick, tplTagName, brick, requireSuspense);
+        if (requireSuspense) {
+          setExpandedBrickConf(yield expanded);
+        } else {
+          setExpandedBrickConf(expanded);
+        }
+        setSuspenseReady(true);
 
-      // 设置 properties refProperty值
-      if (useBrick[symbolForComputedPropsFromProxy]) {
-        Object.entries(useBrick[symbolForComputedPropsFromProxy]).forEach(_ref11 => {
-          var [propName, propValue] = _ref11;
-          _.set(brick.properties, propName, propValue);
+        // Let `transform` works still.
+        transformProperties(brick.properties, data, useBrick.transform, useBrick.transformFrom, undefined, {
+          allowInject: true
         });
-      }
-      if (useBrick.lifeCycle) {
-        var resolver = _internalApiGetResolver();
-        yield resolver.resolve({
-          brick: useBrick.brick,
-          lifeCycle: useBrick.lifeCycle
-        }, brick, _objectSpread__default["default"](_objectSpread__default["default"]({}, _internalApiGetCurrentContext()), {}, {
-          tplContextId: useBrick[symbolForTplContextId]
-        }));
-      }
-      return brick;
-    }), [useBrick, data, isBrickAvailable, tplTagName, requireSuspense]);
-    var dispatchLifeCycleEvent = /*#__PURE__*/function () {
-      var _ref12 = _asyncToGenerator__default["default"](function* (event, handlers, brick) {
-        for (var handler of [].concat(handlers)) {
-          listenerFactory(handler, _objectSpread__default["default"](_objectSpread__default["default"]({}, _internalApiGetCurrentContext()), {}, {
+
+        // 设置 properties refProperty值
+        if (useBrick[symbolForComputedPropsFromProxy]) {
+          Object.entries(useBrick[symbolForComputedPropsFromProxy]).forEach(_ref11 => {
+            var [propName, propValue] = _ref11;
+            _.set(brick.properties, propName, propValue);
+          });
+        }
+        if (useBrick.lifeCycle) {
+          var resolver = _internalApiGetResolver();
+          yield resolver.resolve({
+            brick: useBrick.brick,
+            lifeCycle: useBrick.lifeCycle
+          }, brick, _objectSpread__default["default"](_objectSpread__default["default"]({}, _internalApiGetCurrentContext()), {}, {
             tplContextId: useBrick[symbolForTplContextId]
-          }), brick)(event);
+          }));
         }
-      });
-      return function dispatchLifeCycleEvent(_x5, _x6, _x7) {
-        return _ref12.apply(this, arguments);
-      };
-    }();
-    var updateBrick = React.useCallback((brick, element) => {
-      brick.element = element;
-      var {
-        [symbolForTplContextId]: tplContextId
-      } = useBrick;
-      if (useBrick.iid) {
-        element.dataset.iid = useBrick.iid;
-      }
-      setRealProperties(element, brick.properties);
-      unbindListeners(element);
-      if (useBrick.events) {
-        bindListeners(element, transformEvents(data, useBrick.events), _objectSpread__default["default"](_objectSpread__default["default"]({}, _internalApiGetCurrentContext()), {}, {
-          tplContextId
-        }));
-      }
-      // 设置proxyEvent
-      handleProxyOfCustomTemplate(brick);
-      if (element.$$typeof !== "custom-template") {
-        if (!useBrick.brick.includes("-")) {
-          element.$$typeof = "native";
-        } else if (!customElements.get(useBrick.brick)) {
-          element.$$typeof = "invalid";
+        return brick;
+      }), [useBrick, data, isBrickAvailable, tplTagName, requireSuspense]);
+      var dispatchLifeCycleEvent = /*#__PURE__*/function () {
+        var _ref12 = _asyncToGenerator__default["default"](function* (event, handlers, brick) {
+          for (var handler of [].concat(handlers)) {
+            listenerFactory(handler, _objectSpread__default["default"](_objectSpread__default["default"]({}, _internalApiGetCurrentContext()), {}, {
+              tplContextId: useBrick[symbolForTplContextId]
+            }), brick)(event);
+          }
+        });
+        return function dispatchLifeCycleEvent(_x5, _x6, _x7) {
+          return _ref12.apply(this, arguments);
+        };
+      }();
+      var updateBrick = React.useCallback((brick, element) => {
+        brick.element = element;
+        var {
+          [symbolForTplContextId]: tplContextId
+        } = useBrick;
+        if (useBrick.iid) {
+          element.dataset.iid = useBrick.iid;
+        }
+        setRealProperties(element, brick.properties);
+        unbindListeners(element);
+        if (useBrick.events) {
+          bindListeners(element, transformEvents(data, useBrick.events), _objectSpread__default["default"](_objectSpread__default["default"]({}, _internalApiGetCurrentContext()), {}, {
+            tplContextId
+          }));
         }
-      }
-    }, [data, useBrick]);
-    React.useEffect(() => {
-      if (firstRunRef.current) {
-        firstRunRef.current = false;
-        return;
-      }
-      _asyncToGenerator__default["default"](function* () {
-        var element = elementRef.current;
-        if (element) {
+        // 设置proxyEvent
+        handleProxyOfCustomTemplate(brick);
+        if (element.$$typeof !== "custom-template") {
+          if (!useBrick.brick.includes("-")) {
+            element.$$typeof = "native";
+          } else if (!customElements.get(useBrick.brick)) {
+            element.$$typeof = "invalid";
+          }
+        }
+      }, [data, useBrick]);
+      React.useEffect(() => {
+        if (firstRunRef.current) {
+          firstRunRef.current = false;
+          return;
+        }
+        _asyncToGenerator__default["default"](function* () {
+          var element = elementRef.current;
+          if (element) {
+            var brick;
+            try {
+              brick = yield runtimeBrick;
+            } catch (e) {
+              handleHttpError(e);
+            }
+            // sub-brick rendering is ignored.
+            if (!brick) {
+              return;
+            }
+            updateBrick(brick, element);
+          }
+        })();
+      }, [runtimeBrick, updateBrick]);
+      innerRefCallbackRef.current = /*#__PURE__*/function () {
+        var _ref14 = _asyncToGenerator__default["default"](function* (element) {
+          elementRef.current = element;
           var brick;
           try {
             brick = yield runtimeBrick;
@@ -13015,61 +13042,47 @@
             handleHttpError(e);
           }
           // sub-brick rendering is ignored.
-          if (!brick) {
-            return;
-          }
-          updateBrick(brick, element);
-        }
-      })();
-    }, [runtimeBrick, updateBrick]);
-    innerRefCallbackRef.current = /*#__PURE__*/function () {
-      var _ref14 = _asyncToGenerator__default["default"](function* (element) {
-        elementRef.current = element;
-        var brick;
-        try {
-          brick = yield runtimeBrick;
-        } catch (e) {
-          handleHttpError(e);
-        }
-        // sub-brick rendering is ignored.
-        if (brick) {
-          if (element) {
-            var _useBrick$lifeCycle3;
-            updateBrick(brick, element);
-            if ((_useBrick$lifeCycle3 = useBrick.lifeCycle) !== null && _useBrick$lifeCycle3 !== void 0 && _useBrick$lifeCycle3.onMount) {
-              dispatchLifeCycleEvent(new CustomEvent("mount"), useBrick.lifeCycle.onMount, brick);
-            }
-          } else {
-            var _useBrick$lifeCycle4;
-            if ((_useBrick$lifeCycle4 = useBrick.lifeCycle) !== null && _useBrick$lifeCycle4 !== void 0 && _useBrick$lifeCycle4.onUnmount) {
-              dispatchLifeCycleEvent(new CustomEvent("unmount"), useBrick.lifeCycle.onUnmount, brick);
+          if (brick) {
+            if (element) {
+              var _useBrick$lifeCycle3;
+              updateBrick(brick, element);
+              if ((_useBrick$lifeCycle3 = useBrick.lifeCycle) !== null && _useBrick$lifeCycle3 !== void 0 && _useBrick$lifeCycle3.onMount) {
+                dispatchLifeCycleEvent(new CustomEvent("mount"), useBrick.lifeCycle.onMount, brick);
+              }
+            } else {
+              var _useBrick$lifeCycle4;
+              if ((_useBrick$lifeCycle4 = useBrick.lifeCycle) !== null && _useBrick$lifeCycle4 !== void 0 && _useBrick$lifeCycle4.onUnmount) {
+                dispatchLifeCycleEvent(new CustomEvent("unmount"), useBrick.lifeCycle.onUnmount, brick);
+              }
             }
           }
-        }
-        refCallback === null || refCallback === void 0 ? void 0 : refCallback(element);
-      });
-      return function (_x8) {
-        return _ref14.apply(this, arguments);
-      };
-    }();
+          refCallback === null || refCallback === void 0 ? void 0 : refCallback(element);
+        });
+        return function (_x8) {
+          return _ref14.apply(this, arguments);
+        };
+      }();
 
-    // ref https://reactjs.org/docs/refs-and-the-dom.html#caveats-with-callback-refs
-    var innerRefCallback = React__default["default"].useCallback(element => {
-      innerRefCallbackRef.current(element);
-    }, []);
-    var childConfs = React.useMemo(() => isBrickAvailable && suspenseReady ? slotsToChildren((expandedBrickConf !== null && expandedBrickConf !== void 0 ? expandedBrickConf : useBrick).slots) : [], [isBrickAvailable, suspenseReady, expandedBrickConf, useBrick]);
-    if (!isBrickAvailable || !suspenseReady) {
-      return null;
-    }
-    var tagName = (_expandedBrickConf$br2 = expandedBrickConf === null || expandedBrickConf === void 0 ? void 0 : expandedBrickConf.brick) !== null && _expandedBrickConf$br2 !== void 0 ? _expandedBrickConf$br2 : tplTagName || useBrick.brick;
-    return /*#__PURE__*/React__default["default"].createElement(tagName, {
-      ref: innerRefCallback
-    }, ...childConfs.map((item, index) => /*#__PURE__*/React__default["default"].createElement(SingleBrickAsComponent, {
-      key: index,
-      useBrick: item,
-      data: data
-    })));
-  }));
+      // ref https://reactjs.org/docs/refs-and-the-dom.html#caveats-with-callback-refs
+      var innerRefCallback = React.useCallback(element => {
+        innerRefCallbackRef.current(element);
+      }, []);
+      var childConfs = React.useMemo(() => isBrickAvailable && suspenseReady ? slotsToChildren((expandedBrickConf !== null && expandedBrickConf !== void 0 ? expandedBrickConf : useBrick).slots) : [], [isBrickAvailable, suspenseReady, expandedBrickConf, useBrick]);
+      if (!isBrickAvailable || !suspenseReady) {
+        return null;
+      }
+      var tagName = (_expandedBrickConf$br2 = expandedBrickConf === null || expandedBrickConf === void 0 ? void 0 : expandedBrickConf.brick) !== null && _expandedBrickConf$br2 !== void 0 ? _expandedBrickConf$br2 : tplTagName || useBrick.brick;
+      return React.createElement(tagName, {
+        ref: innerRefCallback
+      }, ...childConfs.map((item, index) => /*#__PURE__*/React.createElement(SingleBrickAsComponent, {
+        key: index,
+        useBrick: item,
+        data: data
+      })));
+    });
+    return React.memo(fn);
+  }
+  var ForwardRefSingleBrickAsComponent = ForwardRefSingleBrickAsComponentFactory(React__default["default"]);
 
   var Pagination$1 = {
     // Options.jsx
@@ -14847,14 +14860,17 @@
   }
 
   exports.BrickAsComponent = BrickAsComponent;
+  exports.BrickAsComponentFactory = BrickAsComponentFactory;
   exports.BrickWrapper = BrickWrapper;
   exports.DisplayByFeatureFlags = DisplayByFeatureFlags;
   exports.EasyopsEmpty = EasyopsEmpty;
   exports.ErrorBoundary = ErrorBoundary;
   exports.FeatureFlagsProvider = FeatureFlagsProvider;
   exports.ForwardRefSingleBrickAsComponent = ForwardRefSingleBrickAsComponent;
+  exports.ForwardRefSingleBrickAsComponentFactory = ForwardRefSingleBrickAsComponentFactory;
   exports.ModalElement = ModalElement;
   exports.SingleBrickAsComponent = SingleBrickAsComponent;
+  exports.SingleBrickAsComponentFactory = SingleBrickAsComponentFactory;
   exports.StoryboardFunctionRegistryFactory = StoryboardFunctionRegistryFactory;
   exports.UpdatingElement = UpdatingElement;
   exports.WebsocketMessageRequest = WebsocketMessageRequest;