@next-core/brick-kit 2.178.1 → 2.178.2

package/dist/index.esm.js

@@ -5,7 +5,7 @@ import _defineProperty$1 from '@babel/runtime/helpers/defineProperty';
 import _asyncToGenerator$3 from '@babel/runtime/helpers/asyncToGenerator';
 import _, { set, get, difference, identity, uniqueId, cloneDeep, clamp, isNil, isEmpty, merge, sortBy, orderBy, isObject as isObject$1, uniq, pick, omit, findLastIndex, noop, isString as isString$1 } from 'lodash';
 import { JsonStorage, toPath, computeRealRoutePath, hasOwnProperty, isObject, isEvaluable, isTrackAll, trackAll, trackContext, trackState, trackFormState, transformAndInject, transform, scanPermissionActionsInStoryboard, precookFunction, cook, collectContextUsage, deferResolveContextConcurrently, resolveContextConcurrently, syncResolveContextConcurrently, trackUsedFormState, trackUsedState, trackUsedContext, shouldAllowRecursiveEvaluations, preevaluate, inject, scanPermissionActionsInAny, deepFreeze, scanProcessorsInAny, matchPath, asyncProcessBrick, createProviderClass, removeDeadConditionsInTpl, getTemplateDepsOfStoryboard, getDllAndDepsOfStoryboard, asyncProcessStoryboard, getDllAndDepsByResource, scanRouteAliasInStoryboard, snippetEvaluate, prefetchScript, scanBricksInBrickConf, loadScript as loadScript$1, scanAppGetMenuInAny, scanInstalledAppsInStoryboard, removeDeadConditions, restoreDynamicTemplates, scanStoryboard, mapCustomApisToNameAndNamespace } from '@next-core/brick-utils';
-import React, { useState, useEffect, useRef, useMemo, useCallback, forwardRef, useImperativeHandle, useContext, createContext, useReducer } from 'react';
+import React, { useState, useEffect, useMemo, useContext, createContext, useRef, useReducer, useCallback } from 'react';
 import { http, HttpResponseError, HttpAbortError, HttpFetchError } from '@next-core/brick-http';
 import { Modal, message, Empty, ConfigProvider } from 'antd';
 import { ExclamationCircleOutlined } from '@ant-design/icons';
@@ -12603,159 +12603,163 @@ var getCurrentRunTimeBrick = (useBrick, tplTagName, data) => {
   return brick;
 };
 
-/**
- * 可以渲染单个 `useBrick` 的 React 组件。
- *
- * @example
- *
- * ```tsx
- * <BrickAsComponent
- *   useBrick={{
- *     brick: "your.any-brick"
- *   }}
- *   data={yourData}
- * />
- * ```
- *
- * @param props - 属性。
- */
-var SingleBrickAsComponent = /*#__PURE__*/React.memo(function SingleBrickAsComponent(_ref) {
-  var _internalApiGetCurren, _expandedBrickConf$br;
-  var {
-    useBrick,
-    data,
-    refCallback,
-    immediatelyRefCallback
-  } = _ref;
-  var firstRunRef = useRef(true);
-  var innerRefCallbackRef = useRef();
-  var elementRef = useRef();
-  var [expandedBrickConf, setExpandedBrickConf] = useState(null);
-  var tplTagName = getTagNameOfCustomTemplate(useBrick.brick, (_internalApiGetCurren = _internalApiGetCurrentContext().app) === null || _internalApiGetCurren === void 0 ? void 0 : _internalApiGetCurren.id);
-  var isBrickAvailable = useMemo(() => {
-    if (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 = 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] = useState(false);
-  var runtimeBrick = useMemo( /*#__PURE__*/_asyncToGenerator$3(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 (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$3(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(_objectSpread({}, _internalApiGetCurrentContext()), {}, {
-        tplContextId: useBrick[symbolForTplContextId],
-        formContextId: useBrick[symbolForFormContextId]
-      }));
-    }
-    return brick;
-  }), [useBrick, data, isBrickAvailable, tplTagName, requireSuspense]);
-  var dispatchLifeCycleEvent = /*#__PURE__*/function () {
-    var _ref4 = _asyncToGenerator$3(function* (event, handlers, brick) {
-      for (var handler of [].concat(handlers)) {
-        listenerFactory(handler, _objectSpread(_objectSpread({}, _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(_objectSpread({}, _internalApiGetCurrentContext()), {}, {
           tplContextId: useBrick[symbolForTplContextId],
           formContextId: useBrick[symbolForFormContextId]
-        }), brick)(event);
+        }));
       }
-    });
-    return function dispatchLifeCycleEvent(_x, _x2, _x3) {
-      return _ref4.apply(this, arguments);
-    };
-  }();
-  var updateBrick = 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(_objectSpread({}, _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$3(function* (event, handlers, brick) {
+        for (var handler of [].concat(handlers)) {
+          listenerFactory(handler, _objectSpread(_objectSpread({}, _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(_objectSpread({}, _internalApiGetCurrentContext()), {}, {
+          tplContextId,
+          formContextId
+        }));
       }
-    }
-  }, [data, useBrick]);
-  useEffect(() => {
-    if (firstRunRef.current) {
-      firstRunRef.current = false;
-      return;
-    }
-    _asyncToGenerator$3(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$3(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$3(function* (element) {
+        immediatelyRefCallback === null || immediatelyRefCallback === void 0 ? void 0 : immediatelyRefCallback(element);
+        elementRef.current = element;
         var brick;
         try {
           brick = yield runtimeBrick;
@@ -12763,62 +12767,83 @@ var SingleBrickAsComponent = /*#__PURE__*/React.memo(function SingleBrickAsCompo
           handleHttpError(e);
         }
         // sub-brick rendering is ignored.
-        if (!brick) {
-          return;
-        }
-        updateBrick(brick, element);
-      }
-    })();
-  }, [runtimeBrick, updateBrick]);
-  innerRefCallbackRef.current = /*#__PURE__*/function () {
-    var _ref6 = _asyncToGenerator$3(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.useCallback(element => {
-    innerRefCallbackRef.current(element);
-  }, []);
-  var childConfs = 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.createElement(tagName, {
-    ref: innerRefCallback
-  }, ...childConfs.map((item, index) => /*#__PURE__*/React.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);
+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 组件。
@@ -12838,23 +12863,7 @@ var SingleBrickAsComponent = /*#__PURE__*/React.memo(function SingleBrickAsCompo
  *
  * @param props - 属性。
  */
-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
-  });
-}
+var BrickAsComponent = BrickAsComponentFactory(React);
 function slotsToChildren(slots) {
   if (!slots) {
     return [];
@@ -12877,138 +12886,156 @@ function transformEvents(data, events) {
 }
 
 /* istanbul ignore next */
-// eslint-disable-next-line react/display-name
-var ForwardRefSingleBrickAsComponent = /*#__PURE__*/React.memo( /*#__PURE__*/forwardRef(function LegacySingleBrickAsComponent(_ref9, ref) {
-  var _internalApiGetCurren2, _expandedBrickConf$br2;
-  var {
-    useBrick,
-    data,
-    refCallback
-  } = _ref9;
-  var firstRunRef = useRef(true);
-  var innerRefCallbackRef = useRef();
-  var elementRef = useRef();
-  var [expandedBrickConf, setExpandedBrickConf] = useState(null);
-  var tplTagName = getTagNameOfCustomTemplate(useBrick.brick, (_internalApiGetCurren2 = _internalApiGetCurrentContext().app) === null || _internalApiGetCurren2 === void 0 ? void 0 : _internalApiGetCurren2.id);
-  var isBrickAvailable = React.useMemo(() => {
-    if (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 = 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] = useState(false);
-
-  /* istanbul ignore next (never reach in test) */
-  useImperativeHandle(ref, () => {
-    return elementRef.current;
-  });
-  var runtimeBrick = React.useMemo( /*#__PURE__*/_asyncToGenerator$3(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 (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$3(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(_objectSpread({}, _internalApiGetCurrentContext()), {}, {
-        tplContextId: useBrick[symbolForTplContextId]
-      }));
-    }
-    return brick;
-  }), [useBrick, data, isBrickAvailable, tplTagName, requireSuspense]);
-  var dispatchLifeCycleEvent = /*#__PURE__*/function () {
-    var _ref12 = _asyncToGenerator$3(function* (event, handlers, brick) {
-      for (var handler of [].concat(handlers)) {
-        listenerFactory(handler, _objectSpread(_objectSpread({}, _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(_objectSpread({}, _internalApiGetCurrentContext()), {}, {
           tplContextId: useBrick[symbolForTplContextId]
-        }), brick)(event);
+        }));
       }
-    });
-    return function dispatchLifeCycleEvent(_x5, _x6, _x7) {
-      return _ref12.apply(this, arguments);
-    };
-  }();
-  var updateBrick = 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(_objectSpread({}, _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$3(function* (event, handlers, brick) {
+        for (var handler of [].concat(handlers)) {
+          listenerFactory(handler, _objectSpread(_objectSpread({}, _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(_objectSpread({}, _internalApiGetCurrentContext()), {}, {
+          tplContextId
+        }));
       }
-    }
-  }, [data, useBrick]);
-  useEffect(() => {
-    if (firstRunRef.current) {
-      firstRunRef.current = false;
-      return;
-    }
-    _asyncToGenerator$3(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$3(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$3(function* (element) {
+        elementRef.current = element;
         var brick;
         try {
           brick = yield runtimeBrick;
@@ -13016,61 +13043,47 @@ var ForwardRefSingleBrickAsComponent = /*#__PURE__*/React.memo( /*#__PURE__*/for
           handleHttpError(e);
         }
         // sub-brick rendering is ignored.
-        if (!brick) {
-          return;
-        }
-        updateBrick(brick, element);
-      }
-    })();
-  }, [runtimeBrick, updateBrick]);
-  innerRefCallbackRef.current = /*#__PURE__*/function () {
-    var _ref14 = _asyncToGenerator$3(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.useCallback(element => {
-    innerRefCallbackRef.current(element);
-  }, []);
-  var childConfs = 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.createElement(tagName, {
-    ref: innerRefCallback
-  }, ...childConfs.map((item, index) => /*#__PURE__*/React.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);
 
 var Pagination$1 = {
   // Options.jsx
@@ -14847,5 +14860,5 @@ function constructEventListener(handler) {
   });
 }
 
-export { BrickAsComponent, BrickWrapper, DisplayByFeatureFlags, EasyopsEmpty, ErrorBoundary, FeatureFlagsProvider, ForwardRefSingleBrickAsComponent, ModalElement, SingleBrickAsComponent, StoryboardFunctionRegistryFactory, UpdatingElement, WebsocketMessageRequest, WebsocketMessageResponse, abortController, applyTheme, authenticate, batchSetAppsLocalTheme, checkIf, checkIfByTransform, constructEventListener, createHistory, createRuntime, createWebSocket, developHelper, doTransform, event, getAuth, getCssPropertyValue, getCurrentTheme, getHistory, getMockInfo, getRealValue, getRuntime, getRuntimeMisc, getWebSocket, handleHttpError, httpErrorToString, i18nText, initI18n, isLoggedIn, logout, looseCheckIf$1 as looseCheckIf, looseCheckIfByTransform, looseCheckIfOfComputed, method, preprocessTransformProperties, property, reTransformForDevtools, renderEasyopsEmpty, transformElementProperties, transformIntermediateData, transformProperties, useApplyPageTitle, useCurrentApp, useCurrentMode, useCurrentTheme, useFeatureFlags, useLocation, useProvider, useRecentApps };
+export { BrickAsComponent, BrickAsComponentFactory, BrickWrapper, DisplayByFeatureFlags, EasyopsEmpty, ErrorBoundary, FeatureFlagsProvider, ForwardRefSingleBrickAsComponent, ForwardRefSingleBrickAsComponentFactory, ModalElement, SingleBrickAsComponent, SingleBrickAsComponentFactory, StoryboardFunctionRegistryFactory, UpdatingElement, WebsocketMessageRequest, WebsocketMessageResponse, abortController, applyTheme, authenticate, batchSetAppsLocalTheme, checkIf, checkIfByTransform, constructEventListener, createHistory, createRuntime, createWebSocket, developHelper, doTransform, event, getAuth, getCssPropertyValue, getCurrentTheme, getHistory, getMockInfo, getRealValue, getRuntime, getRuntimeMisc, getWebSocket, handleHttpError, httpErrorToString, i18nText, initI18n, isLoggedIn, logout, looseCheckIf$1 as looseCheckIf, looseCheckIfByTransform, looseCheckIfOfComputed, method, preprocessTransformProperties, property, reTransformForDevtools, renderEasyopsEmpty, transformElementProperties, transformIntermediateData, transformProperties, useApplyPageTitle, useCurrentApp, useCurrentMode, useCurrentTheme, useFeatureFlags, useLocation, useProvider, useRecentApps };
 //# sourceMappingURL=index.esm.js.map