@next-core/brick-kit 2.159.5 → 2.160.1

package/dist/index.esm.js

@@ -4,7 +4,7 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import _asyncToGenerator$3 from '@babel/runtime/helpers/asyncToGenerator';
 import _defineProperty$1 from '@babel/runtime/helpers/defineProperty';
 import React, { useState, useEffect, useRef, useMemo, useCallback, forwardRef, useImperativeHandle, useContext, createContext, useReducer } from 'react';
-import { JsonStorage, toPath, computeRealRoutePath, hasOwnProperty, isObject, isEvaluable, transformAndInject, transform, trackContext, trackState, trackFormState, scanPermissionActionsInStoryboard, precookFunction, cook, resolveContextConcurrently, syncResolveContextConcurrently, trackUsedState, trackUsedContext, shouldAllowRecursiveEvaluations, preevaluate, inject, scanPermissionActionsInAny, matchPath, deepFreeze, createProviderClass, removeDeadConditionsInTpl, getTemplateDepsOfStoryboard, getDllAndDepsOfStoryboard, asyncProcessStoryboard, getDllAndDepsByResource, scanRouteAliasInStoryboard, prefetchScript, scanBricksInBrickConf, scanProcessorsInAny, loadScript, scanAppGetMenuInAny, asyncProcessBrick, scanInstalledAppsInStoryboard, removeDeadConditions, restoreDynamicTemplates, scanStoryboard, mapCustomApisToNameAndNamespace } from '@next-core/brick-utils';
+import { JsonStorage, toPath, computeRealRoutePath, hasOwnProperty, isObject, isEvaluable, transformAndInject, transform, trackContext, trackState, trackFormState, scanPermissionActionsInStoryboard, precookFunction, cook, collectContextUsage, deferResolveContextConcurrently, resolveContextConcurrently, syncResolveContextConcurrently, trackUsedState, trackUsedContext, shouldAllowRecursiveEvaluations, preevaluate, inject, scanPermissionActionsInAny, matchPath, deepFreeze, createProviderClass, removeDeadConditionsInTpl, getTemplateDepsOfStoryboard, getDllAndDepsOfStoryboard, asyncProcessStoryboard, getDllAndDepsByResource, scanRouteAliasInStoryboard, prefetchScript, scanBricksInBrickConf, scanProcessorsInAny, loadScript, scanAppGetMenuInAny, asyncProcessBrick, scanInstalledAppsInStoryboard, removeDeadConditions, restoreDynamicTemplates, scanStoryboard, mapCustomApisToNameAndNamespace } from '@next-core/brick-utils';
 import _, { set, get, difference, identity, uniqueId, cloneDeep, clamp, isNil, isEmpty, sortBy, orderBy, merge, isObject as isObject$1, uniq, pick, omit, findLastIndex, noop, isString as isString$1 } from 'lodash';
 import { http, HttpResponseError, HttpAbortError, HttpFetchError } from '@next-core/brick-http';
 import moment from 'moment';
@@ -841,6 +841,7 @@ function doTransform(data, to, options) {
         data
       };
       if (options !== null && options !== void 0 && options.tplContextId) runtimeContext.tplContextId = options.tplContextId;
+      if (options !== null && options !== void 0 && options.formContextId) runtimeContext.formContextId = options.formContextId;
       result = evaluate(to, runtimeContext, options === null || options === void 0 ? void 0 : options.evaluateOptions);
       dismissRecursiveMarkingInjected = shouldDismissRecursiveMarkingInjected(to);
     } else {
@@ -1731,6 +1732,7 @@ class StoryboardContextWrapper {
     _defineProperty$1(this, "data", new Map());
     _defineProperty$1(this, "tplContextId", void 0);
     _defineProperty$1(this, "formContextId", void 0);
+    _defineProperty$1(this, "pendingStack", []);
     this.tplContextId = tplContextId;
     this.formContextId = formContextId;
   }
@@ -1832,15 +1834,57 @@ class StoryboardContextWrapper {
       detail: item.value
     }));
   }
-  define(contextConfs, coreContext, brick) {
+  waitForUsedContext(data) {
     var _this = this;
+    return _asyncToGenerator$3(function* () {
+      if (_this.tplContextId || _this.formContextId) {
+        return;
+      }
+      var usage = collectContextUsage(data, "CTX");
+      if (usage.includesComputed) {
+        for (var pending of _this.pendingStack) {
+          yield pending.pendingResult;
+        }
+      } else if (usage.usedContexts.length > 0) {
+        var _loop = function* (pendingContexts) {
+          yield Promise.all(usage.usedContexts.map(ctx => pendingContexts.get(ctx)));
+        };
+        for (var {
+          pendingContexts
+        } of _this.pendingStack) {
+          yield* _loop(pendingContexts);
+        }
+      }
+    })();
+  }
+  waitForAllContext() {
+    var _this2 = this;
+    return _asyncToGenerator$3(function* () {
+      if (_this2.tplContextId || _this2.formContextId) {
+        return;
+      }
+      for (var pending of _this2.pendingStack) {
+        yield pending.pendingResult;
+      }
+    })();
+  }
+  deferDefine(contextConfs, coreContext, brick) {
+    var {
+      mergedContext,
+      keyword
+    } = this.getResolveOptions(coreContext);
+    var pending = deferResolveContextConcurrently(Array.isArray(contextConfs) ? contextConfs : [], contextConf => resolveStoryboardContext(contextConf, mergedContext, this, brick), keyword);
+    this.pendingStack.push(pending);
+  }
+  define(contextConfs, coreContext, brick) {
+    var _this3 = this;
     return _asyncToGenerator$3(function* () {
       if (Array.isArray(contextConfs)) {
         var {
           mergedContext,
           keyword
-        } = _this.getResolveOptions(coreContext);
-        yield resolveContextConcurrently(contextConfs, contextConf => resolveStoryboardContext(contextConf, mergedContext, _this, brick), keyword);
+        } = _this3.getResolveOptions(coreContext);
+        yield resolveContextConcurrently(contextConfs, contextConf => resolveStoryboardContext(contextConf, mergedContext, _this3, brick), keyword);
       }
     })();
   }
@@ -1892,6 +1936,7 @@ function resolveNormalStoryboardContext(_x5, _x6, _x7, _x8) {
 }
 function _resolveNormalStoryboardContext() {
   _resolveNormalStoryboardContext = _asyncToGenerator$3(function* (contextConf, mergedContext, storyboardContextWrapper, brick) {
+    yield storyboardContextWrapper.waitForUsedContext(contextConf.if);
     if (!looseCheckIf(contextConf, mergedContext)) {
       return false;
     }
@@ -1901,6 +1946,7 @@ function _resolveNormalStoryboardContext() {
     var isLazyResolve = false;
     if (value === undefined) {
       if (contextConf.resolve) {
+        yield storyboardContextWrapper.waitForUsedContext(contextConf.resolve.if);
         if (looseCheckIf(contextConf.resolve, mergedContext)) {
           load = /*#__PURE__*/function () {
             var _ref = _asyncToGenerator$3(function* (options) {
@@ -1924,6 +1970,7 @@ function _resolveNormalStoryboardContext() {
         }
       }
       if ((!load || isLazyResolve) && contextConf.value !== undefined) {
+        yield storyboardContextWrapper.waitForUsedContext(contextConf.value);
         // If the context has no resolve, just use its `value`.
         // Or if the resolve is ignored or lazy, use its `value` as a fallback.
         value = computeRealValue(contextConf.value, mergedContext, true);
@@ -2069,7 +2116,7 @@ class CustomFormContext {
     _defineProperty$1(this, "formState", void 0);
     _defineProperty$1(this, "id", uniqueId("form-ctx-"));
     FormContextMap.set(this.id, this);
-    this.formState = new StoryboardContextWrapper("", this.id);
+    this.formState = new StoryboardContextWrapper(undefined, this.id);
   }
 }
 function getCustomFormContext(formContextId) {
@@ -2820,8 +2867,8 @@ function _mergeMenu() {
         (function () {
           var menuI18nNamespace = getI18nNamespace("menu", "".concat(menu.menuId, "~").concat(menu.app[0].appId, "+").concat(menu.instanceId));
           // Support any language in `meta.i18n`.
-          Object.entries(menu.i18n).forEach(_ref3 => {
-            var [lang, resources] = _ref3;
+          Object.entries(menu.i18n).forEach(_ref4 => {
+            var [lang, resources] = _ref4;
             i18next.addResourceBundle(lang, menuI18nNamespace, resources);
           });
           menuWithI18n.set(menu, menuI18nNamespace);
@@ -2921,8 +2968,8 @@ function _processMenu() {
     }
     collectAppsRequireI18nFulfilled(items, context.app.id, appsRequireI18nFulfilled);
     yield kernel.fulfilStoryboardI18n([...appsRequireI18nFulfilled]);
-    var menuData = _objectSpread(_objectSpread({}, computeRealValueWithOverrideApp(restMenuData, rootAppId, context, kernel)), {}, {
-      items: computeMenuItemsWithOverrideApp(items, context, kernel)
+    var menuData = _objectSpread(_objectSpread({}, yield computeRealValueWithOverrideApp(restMenuData, rootAppId, context, kernel)), {}, {
+      items: yield computeMenuItemsWithOverrideApp(items, context, kernel)
     });
     return {
       title: yield processMenuTitle(menuData),
@@ -2970,17 +3017,22 @@ function collectAppsRequireI18nFulfilled(items, contextAppId, appIds) {
   collect(items);
 }
 function computeMenuItemsWithOverrideApp(items, context, kernel) {
-  return items.map(_ref2 => {
-    var {
-        children
-      } = _ref2,
-      rest = _objectWithoutProperties(_ref2, _excluded2$2);
-    return _objectSpread(_objectSpread({}, computeRealValueWithOverrideApp(rest, rest[symbolAppId], context, kernel)), {}, {
-      children: children && computeMenuItemsWithOverrideApp(children, context, kernel)
+  return Promise.all(items.map( /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator$3(function* (_ref2) {
+      var {
+          children
+        } = _ref2,
+        rest = _objectWithoutProperties(_ref2, _excluded2$2);
+      return _objectSpread(_objectSpread({}, yield computeRealValueWithOverrideApp(rest, rest[symbolAppId], context, kernel)), {}, {
+        children: children && (yield computeMenuItemsWithOverrideApp(children, context, kernel))
+      });
     });
-  });
+    return function (_x20) {
+      return _ref3.apply(this, arguments);
+    };
+  }()));
 }
-function processMenuTitle(_x20) {
+function processMenuTitle(_x21) {
   return _processMenuTitle.apply(this, arguments);
 }
 function _processMenuTitle() {
@@ -3059,25 +3111,32 @@ function attemptToVisit(data, globals) {
   }
   return false;
 }
-function computeRealValueWithOverrideApp(data, overrideAppId, context, kernel) {
-  var newContext = context;
-  if (overrideAppId !== context.app.id && attemptToVisit(data, ["APP", "I18N"])) {
-    if (window.STANDALONE_MICRO_APPS) {
-      newContext = _objectSpread(_objectSpread({}, context), {}, {
-        overrideApp: data[symbolOverrideApp],
-        appendI18nNamespace: data[symbolMenuI18nNamespace]
-      });
-    } else {
-      var storyboard = kernel.bootstrapData.storyboards.find(story => story.app.id === overrideAppId);
-      newContext = _objectSpread(_objectSpread({}, context), {}, {
-        overrideApp: storyboard === null || storyboard === void 0 ? void 0 : storyboard.app,
-        appendI18nNamespace: data[symbolMenuI18nNamespace]
-      });
+function computeRealValueWithOverrideApp(_x22, _x23, _x24, _x25) {
+  return _computeRealValueWithOverrideApp.apply(this, arguments);
+}
+function _computeRealValueWithOverrideApp() {
+  _computeRealValueWithOverrideApp = _asyncToGenerator$3(function* (data, overrideAppId, context, kernel) {
+    var newContext = context;
+    if (overrideAppId !== context.app.id && attemptToVisit(data, ["APP", "I18N"])) {
+      if (window.STANDALONE_MICRO_APPS) {
+        newContext = _objectSpread(_objectSpread({}, context), {}, {
+          overrideApp: data[symbolOverrideApp],
+          appendI18nNamespace: data[symbolMenuI18nNamespace]
+        });
+      } else {
+        var storyboard = kernel.bootstrapData.storyboards.find(story => story.app.id === overrideAppId);
+        newContext = _objectSpread(_objectSpread({}, context), {}, {
+          overrideApp: storyboard === null || storyboard === void 0 ? void 0 : storyboard.app,
+          appendI18nNamespace: data[symbolMenuI18nNamespace]
+        });
+      }
     }
-  }
-  return computeRealValue(data, newContext, true, {
-    ignoreSymbols: true
+    yield kernel.router.waitForUsedContext(data);
+    return computeRealValue(data, newContext, true, {
+      ignoreSymbols: true
+    });
   });
+  return _computeRealValueWithOverrideApp.apply(this, arguments);
 }
 
 var lazyBrickRegistry = new Map();
@@ -7634,17 +7693,21 @@ function expandCustomTemplate(brickConf, proxyBrick, context) {
   }
   return lowLevelExpandCustomTemplate(template, brickConf, proxyBrick, context, tplContext);
 }
-function asyncExpandCustomTemplate(_x, _x2, _x3) {
+function asyncExpandCustomTemplate(_x, _x2, _x3, _x4) {
   return _asyncExpandCustomTemplate.apply(this, arguments);
 }
 function _asyncExpandCustomTemplate() {
-  _asyncExpandCustomTemplate = _asyncToGenerator$3(function* (brickConf, proxyBrick, context) {
+  _asyncExpandCustomTemplate = _asyncToGenerator$3(function* (brickConf, proxyBrick, context, locationContext) {
     var tplContext = new CustomTemplateContext(proxyBrick);
     var template = customTemplateRegistry.get(brickConf.brick);
     if (template.contracts) {
       collectWidgetContract(template.contracts);
     }
     if (Array.isArray(template.state)) {
+      if (locationContext) {
+        // Handle use cases of using `CTX.*` in template states.
+        yield locationContext.storyboardContextWrapper.waitForUsedContext(template.state.map(state => [state.if, state.value, state.resolve]));
+      }
       yield tplContext.state.define(template.state, context, proxyBrick);
     }
     return lowLevelExpandCustomTemplate(template, brickConf, proxyBrick, context, tplContext);
@@ -8991,50 +9054,85 @@ function isRouteConfOfRoutes(conf) {
   return conf.type === "routes";
 }
 
-function getSubStoryboardByRoute(storyboard, matcher) {
-  function getSubRoutes(routes) {
-    return matcher(routes).map(getSubRoute);
-  }
-  function getSubRoute(route) {
-    if (route.type === "routes") {
-      return _objectSpread(_objectSpread({}, route), {}, {
-        routes: getSubRoutes(route.routes)
+function getSubStoryboardByRoute(_x, _x2) {
+  return _getSubStoryboardByRoute.apply(this, arguments);
+}
+function _getSubStoryboardByRoute() {
+  _getSubStoryboardByRoute = _asyncToGenerator$3(function* (storyboard, matcher) {
+    function getSubRoutes(_x3) {
+      return _getSubRoutes.apply(this, arguments);
+    }
+    function _getSubRoutes() {
+      _getSubRoutes = _asyncToGenerator$3(function* (routes) {
+        return Promise.all((yield matcher(routes)).map(getSubRoute));
       });
+      return _getSubRoutes.apply(this, arguments);
     }
-    return _objectSpread(_objectSpread({}, route), {}, {
-      bricks: getSubBricks(route.bricks)
-    });
-  }
-  function getSubBricks(bricks) {
-    if (Array.isArray(bricks)) {
-      return bricks.map(brickConf => getSubBrick(brickConf));
-    }
-    return bricks;
-  }
-  function getSubBrick(brickConf) {
-    if (isObject(brickConf.slots)) {
-      return _objectSpread(_objectSpread({}, brickConf), {}, {
-        slots: Object.fromEntries(Object.entries(brickConf.slots).map(_ref => {
-          var [slotId, slotConf] = _ref;
-          if (slotConf.type === "routes") {
-            return [slotId, _objectSpread(_objectSpread({}, slotConf), {}, {
-              routes: getSubRoutes(slotConf.routes)
-            })];
-          } /* istanbul ignore else: should never reach */else if (slotConf.type === "bricks") {
-            return [slotId, _objectSpread(_objectSpread({}, slotConf), {}, {
-              bricks: getSubBricks(slotConf.bricks)
-            })];
-          }
-          /* istanbul ignore next: should never reach */
-          return [slotId, slotConf];
-        }))
+    function getSubRoute(_x4) {
+      return _getSubRoute.apply(this, arguments);
+    }
+    function _getSubRoute() {
+      _getSubRoute = _asyncToGenerator$3(function* (route) {
+        if (route.type === "routes") {
+          return _objectSpread(_objectSpread({}, route), {}, {
+            routes: yield getSubRoutes(route.routes)
+          });
+        }
+        return _objectSpread(_objectSpread({}, route), {}, {
+          bricks: yield getSubBricks(route.bricks)
+        });
       });
+      return _getSubRoute.apply(this, arguments);
     }
-    return brickConf;
-  }
-  return _objectSpread(_objectSpread({}, storyboard), {}, {
-    routes: getSubRoutes(storyboard.routes)
+    function getSubBricks(_x5) {
+      return _getSubBricks.apply(this, arguments);
+    }
+    function _getSubBricks() {
+      _getSubBricks = _asyncToGenerator$3(function* (bricks) {
+        if (Array.isArray(bricks)) {
+          return Promise.all(bricks.map(brickConf => getSubBrick(brickConf)));
+        }
+        return bricks;
+      });
+      return _getSubBricks.apply(this, arguments);
+    }
+    function getSubBrick(_x6) {
+      return _getSubBrick.apply(this, arguments);
+    }
+    function _getSubBrick() {
+      _getSubBrick = _asyncToGenerator$3(function* (brickConf) {
+        if (isObject(brickConf.slots)) {
+          return _objectSpread(_objectSpread({}, brickConf), {}, {
+            slots: Object.fromEntries(yield Promise.all(Object.entries(brickConf.slots).map( /*#__PURE__*/function () {
+              var _ref2 = _asyncToGenerator$3(function* (_ref) {
+                var [slotId, slotConf] = _ref;
+                if (slotConf.type === "routes") {
+                  return [slotId, _objectSpread(_objectSpread({}, slotConf), {}, {
+                    routes: yield getSubRoutes(slotConf.routes)
+                  })];
+                } /* istanbul ignore else: should never reach */else if (slotConf.type === "bricks") {
+                  return [slotId, _objectSpread(_objectSpread({}, slotConf), {}, {
+                    bricks: yield getSubBricks(slotConf.bricks)
+                  })];
+                }
+                /* istanbul ignore next: should never reach */
+                return [slotId, slotConf];
+              });
+              return function (_x7) {
+                return _ref2.apply(this, arguments);
+              };
+            }())))
+          });
+        }
+        return brickConf;
+      });
+      return _getSubBrick.apply(this, arguments);
+    }
+    return _objectSpread(_objectSpread({}, storyboard), {}, {
+      routes: yield getSubRoutes(storyboard.routes)
+    });
   });
+  return _getSubStoryboardByRoute.apply(this, arguments);
 }
 
 function listenOnTrackingContext(brick, trackingContextList, context) {
@@ -9085,14 +9183,18 @@ function ExpandCustomForm(formData, brickConf, isPreview, context) {
   }
   return getFinalStoryBoard(formData, brickConf, isPreview, formContext);
 }
-function AsyncExpandCustomForm(_x, _x2, _x3, _x4) {
+function AsyncExpandCustomForm(_x, _x2, _x3, _x4, _x5) {
   return _AsyncExpandCustomForm.apply(this, arguments);
 }
 function _AsyncExpandCustomForm() {
-  _AsyncExpandCustomForm = _asyncToGenerator$3(function* (formData, brickConf, isPreview, context) {
+  _AsyncExpandCustomForm = _asyncToGenerator$3(function* (formData, brickConf, isPreview, context, locationContext) {
     var formContext = new CustomFormContext();
     formData = initFormContext(formData, brickConf, isPreview);
     if (Array.isArray(formData.context)) {
+      if (locationContext) {
+        // Handle use cases of using `CTX.*` in template states.
+        yield locationContext.storyboardContextWrapper.waitForUsedContext(formData.context.map(state => [state.if, state.value, state.resolve]));
+      }
       yield formContext.formState.define(formData.context, _objectSpread(_objectSpread({}, context), {}, {
         formContextId: formContext.id
       }), {});
@@ -9478,7 +9580,7 @@ class LocationContext {
     _defineProperty$1(this, "observersList", []);
     this.kernel = kernel;
     this.location = location;
-    this.resolver = new Resolver(kernel);
+    this.resolver = new Resolver(kernel, this);
     this.query = new URLSearchParams(location.search);
     this.messageDispatcher = getMessageDispatcher();
   }
@@ -9516,60 +9618,79 @@ class LocationContext {
       match: this.currentMatch
     });
   }
+  deferComputeRealValue() {
+    var _arguments = arguments,
+      _this = this;
+    return _asyncToGenerator$3(function* () {
+      yield _this.storyboardContextWrapper.waitForUsedContext(_arguments.length <= 0 ? undefined : _arguments[0]);
+      return computeRealValue(..._arguments);
+    })();
+  }
   matchRoutes(routes, app) {
-    var _this = this;
-    var _loop = function (route) {
-      var computedPath = computeRealRoutePath(route.path, app);
-      if ([].concat(computedPath).includes(undefined)) {
-        // eslint-disable-next-line no-console
-        console.error("Invalid route with invalid path:", route);
-        return {
-          v: "missed"
-        };
-      }
-      var match = matchPath(_this.location.pathname, {
-        path: computedPath,
-        exact: route.exact,
-        checkIf: context => looseCheckIf(route, context),
-        getContext: match => _this.getContext({
-          match
-        })
-      });
-      if (match !== null) {
-        if (app.noAuthGuard || route.public || isLoggedIn()) {
-          _this.currentMatch = match;
+    var _this2 = this;
+    return _asyncToGenerator$3(function* () {
+      var _loop = function* (route) {
+        var computedPath = computeRealRoutePath(route.path, app);
+        if ([].concat(computedPath).includes(undefined)) {
+          // eslint-disable-next-line no-console
+          console.error("Invalid route with invalid path:", route);
           return {
-            v: {
-              match,
-              route
-            }
+            v: "missed"
           };
         }
-        return {
-          v: "unauthenticated"
-        };
+        yield _this2.storyboardContextWrapper.waitForUsedContext(route.if);
+        var match = matchPath(_this2.location.pathname, {
+          path: computedPath,
+          exact: route.exact,
+          checkIf: context => looseCheckIf(route, context),
+          getContext: match => _this2.getContext({
+            match
+          })
+        });
+        if (match !== null) {
+          if (app.noAuthGuard || route.public || isLoggedIn()) {
+            _this2.currentMatch = match;
+            return {
+              v: {
+                match,
+                route
+              }
+            };
+          }
+          return {
+            v: "unauthenticated"
+          };
+        }
+      };
+      for (var route of routes) {
+        var _ret = yield* _loop(route);
+        if (typeof _ret === "object") return _ret.v;
       }
-    };
-    for (var route of routes) {
-      var _ret = _loop(route);
-      if (typeof _ret === "object") return _ret.v;
-    }
-    return "missed";
+      return "missed";
+    })();
   }
   matchStoryboard(storyboards) {
     return matchStoryboard(storyboards, this.location.pathname);
   }
   getSubStoryboardByRoute(storyboard) {
-    var matcher = routes => {
-      var matched = this.matchRoutes(routes, storyboard.app);
-      return isObject(matched) ? [matched.route] : [];
-    };
-    return getSubStoryboardByRoute(storyboard, matcher);
+    var _this3 = this;
+    return _asyncToGenerator$3(function* () {
+      var matcher = /*#__PURE__*/function () {
+        var _ref2 = _asyncToGenerator$3(function* (routes) {
+          var matched = yield _this3.matchRoutes(routes, storyboard.app);
+          return isObject(matched) ? [matched.route] : [];
+        });
+        return function matcher(_x) {
+          return _ref2.apply(this, arguments);
+        };
+      }();
+      return getSubStoryboardByRoute(storyboard, matcher);
+    })();
   }
   mountRoutes(routes, slotId, mountRoutesResult) {
-    var _this2 = this;
+    var _this4 = this;
     return _asyncToGenerator$3(function* () {
-      var matched = _this2.matchRoutes(routes, _this2.kernel.nextApp);
+      var matched = yield _this4.matchRoutes(routes, _this4.kernel.nextApp);
       var redirect;
       var redirectConf = {};
       var context;
@@ -9583,19 +9704,26 @@ class LocationContext {
         default:
           mountRoutesResult.route = route = matched.route;
           if (route.segues) {
-            Object.assign(_this2.segues, route.segues);
+            Object.assign(_this4.segues, route.segues);
           }
           if (route.hybrid) {
             mountRoutesResult.flags.hybrid = true;
           }
-          context = _this2.getContext({
+          context = _this4.getContext({
             match: matched.match
           });
-          _this2.resolver.defineResolves(route.defineResolves, context);
-          yield _this2.mountProviders(route.providers, matched.match, slotId, mountRoutesResult);
-          yield _this2.storyboardContextWrapper.define(route.context, context);
-          yield _this2.preCheckPermissions(route, context);
-          redirect = computeRealValue(route.redirect, context, true);
+          yield _this4.storyboardContextWrapper.waitForUsedContext(route.defineResolves);
+          _this4.resolver.defineResolves(route.defineResolves, context);
+          yield _this4.mountProviders(route.providers, matched.match, slotId, mountRoutesResult);
+
+          // istanbul ignore else
+          if (_this4.kernel.getFeatureFlags()["next-core-deferred-context"]) {
+            _this4.storyboardContextWrapper.deferDefine(route.context, context);
+          } else {
+            yield _this4.storyboardContextWrapper.define(route.context, context);
+          }
+          yield _this4.preCheckPermissions(route, context);
+          redirect = yield _this4.deferComputeRealValue(route.redirect, context, true);
           if (redirect) {
             if (typeof redirect === "string") {
               // Directly redirect.
@@ -9605,7 +9733,7 @@ class LocationContext {
               break;
             } else {
               // Resolvable redirect.
-              yield _this2.resolver.resolveOne("reference", redirect, redirectConf);
+              yield _this4.resolver.resolveOne("reference", redirect, redirectConf);
               if (redirectConf.redirect) {
                 mountRoutesResult.flags.redirect = {
                   path: redirectConf.redirect
@@ -9614,20 +9742,20 @@ class LocationContext {
               }
             }
           }
-          yield _this2.mountMenu(route.menu, matched.match, mountRoutesResult);
+          yield _this4.mountMenu(route.menu, matched.match, mountRoutesResult);
           if (route.documentId) {
             mountRoutesResult.appBar.documentId = route.documentId;
           }
           if (isRouteConfOfRoutes(route) && Array.isArray(route.routes)) {
-            yield _this2.preFetchMenu(route.context);
-            yield _this2.mountRoutes(route.routes, slotId, mountRoutesResult);
+            yield _this4.preFetchMenu(route.context);
+            yield _this4.mountRoutes(route.routes, slotId, mountRoutesResult);
           } else if (isRouteConfOfBricks(route) && Array.isArray(route.bricks)) {
-            yield _this2.preFetchMenu(route);
-            yield _this2.mountBricks(route.bricks, matched.match, slotId, mountRoutesResult);
+            yield _this4.preFetchMenu(route);
+            yield _this4.mountBricks(route.bricks, matched.match, slotId, mountRoutesResult);
 
             // analytics data (page_view event)
             if (route.analyticsData) {
-              mountRoutesResult.analyticsData = computeRealValue(route.analyticsData, context, true);
+              mountRoutesResult.analyticsData = yield _this4.deferComputeRealValue(route.analyticsData, context, true);
             }
           }
       }
@@ -9635,7 +9763,7 @@ class LocationContext {
     })();
   }
   mountMenu(menuConf, match, mountRoutesResult) {
-    var _this3 = this;
+    var _this5 = this;
     return _asyncToGenerator$3(function* () {
       if (menuConf === false) {
         // `route.menu` 设置为 `false` 表示不显示顶栏和侧栏。
@@ -9647,7 +9775,7 @@ class LocationContext {
       if (!menuConf) {
         return;
       }
-      var context = _this3.getContext({
+      var context = _this5.getContext({
         match
       });
       if (menuConf.type === "brick") {
@@ -9657,6 +9785,7 @@ class LocationContext {
         // 那么可以将菜单配置指定为一个构件，这个构件会被装载到背景容器中（不会在界面中显示），
         // 应该在这个构件的 `connectedCallback` 中执行相关菜单设置，
         // 例如 `getRuntime().menuBar.setAppMenu(...)`。
+        yield _this5.storyboardContextWrapper.waitForUsedContext(menuConf.properties);
         var brick = {
           type: menuConf.brick,
           properties: computeRealProperties(menuConf.properties, context, menuConf.injectDeep !== false),
@@ -9664,16 +9793,16 @@ class LocationContext {
           context,
           children: []
         };
-        _this3.registerHandlersFromLifeCycle(menuConf.lifeCycle, brick, match);
+        _this5.registerHandlersFromLifeCycle(menuConf.lifeCycle, brick, match);
 
         // Then, resolve the brick.
-        yield _this3.resolver.resolve(menuConf, brick, context);
+        yield _this5.resolver.resolve(menuConf, brick, context);
         mountRoutesResult.menuInBg.push(brick);
         return;
       }
       var injectDeep = menuConf.injectDeep;
       if (menuConf.type === "resolve") {
-        yield _this3.resolver.resolveOne("reference", _objectSpread({
+        yield _this5.resolver.resolveOne("reference", _objectSpread({
           transformMapArray: false
         }, menuConf.resolve), menuConf, null, context);
         injectDeep = false;
@@ -9681,7 +9810,7 @@ class LocationContext {
 
       // 静态菜单配置，仅在有值时才设置，这样可以让菜单设置也具有按路由层级覆盖的能力。
       var otherMenuConf = omit(menuConf, ["injectDeep", "type"]);
-      var injectedMenuConf = injectDeep !== false ? computeRealValue(otherMenuConf, context, true) : otherMenuConf;
+      var injectedMenuConf = injectDeep !== false ? yield _this5.deferComputeRealValue(otherMenuConf, context, true) : otherMenuConf;
       var {
         sidebarMenu,
         pageTitle,
@@ -9713,11 +9842,11 @@ class LocationContext {
     })();
   }
   mountProviders(providers, match, slotId, mountRoutesResult) {
-    var _this4 = this;
+    var _this6 = this;
     return _asyncToGenerator$3(function* () {
       if (Array.isArray(providers)) {
         for (var providerConf of providers) {
-          yield _this4.mountBrick(_objectSpread(_objectSpread({}, typeof providerConf === "string" ? {
+          yield _this6.mountBrick(_objectSpread(_objectSpread({}, typeof providerConf === "string" ? {
             brick: providerConf
           } : providerConf), {}, {
             bg: true,
@@ -9728,11 +9857,11 @@ class LocationContext {
     })();
   }
   mountBricks(bricks, match, slotId, mountRoutesResult, tplStack) {
-    var _this5 = this;
+    var _this7 = this;
     return _asyncToGenerator$3(function* () {
       for (var brickConf of bricks) {
         try {
-          yield _this5.mountBrick(brickConf, match, slotId, mountRoutesResult, tplStack && new Map(tplStack));
+          yield _this7.mountBrick(brickConf, match, slotId, mountRoutesResult, tplStack && new Map(tplStack));
         } catch (error) {
           if (error instanceof ResolveRequestError) {
             var errorMessage = httpErrorToString(error.rawError);
@@ -9760,57 +9889,59 @@ class LocationContext {
     })();
   }
   checkResolvableIf(ifContainer, context) {
-    var _this6 = this;
+    var _this8 = this;
     return _asyncToGenerator$3(function* () {
+      yield _this8.storyboardContextWrapper.waitForUsedContext(ifContainer.if);
       if (isObject(ifContainer.if)) {
         var ifChecked = computeRealValue(ifContainer.if, context, true);
         var ifConf = {};
-        yield _this6.resolver.resolveOne("reference", ifChecked, ifConf);
+        yield _this8.resolver.resolveOne("reference", ifChecked, ifConf);
         return !hasOwnProperty(ifConf, "if") || !!ifConf.if;
       }
       return looseCheckIf(ifContainer, context);
     })();
   }
   preCheckPermissions(container, context) {
+    var _this9 = this;
     return _asyncToGenerator$3(function* () {
       if (isLoggedIn() && !getAuth().isAdmin && container.permissionsPreCheck && Array.isArray(container.permissionsPreCheck)) {
-        var usedActions = computeRealValue(container.permissionsPreCheck, context, true);
+        var usedActions = yield _this9.deferComputeRealValue(container.permissionsPreCheck, context, true);
         yield validatePermissions(usedActions);
       }
     })();
   }
   mountBrick(brickConf, match, slotId, mountRoutesResult) {
-    var _arguments = arguments,
-      _this7 = this;
+    var _arguments2 = arguments,
+      _this10 = this;
     return _asyncToGenerator$3(function* () {
-      var _this7$kernel$nextApp, _brickConf$lifeCycle, _brick$lifeCycle;
-      var tplStack = _arguments.length > 4 && _arguments[4] !== undefined ? _arguments[4] : new Map();
+      var _this10$kernel$nextAp, _brickConf$lifeCycle, _brick$lifeCycle;
+      var tplStack = _arguments2.length > 4 && _arguments2[4] !== undefined ? _arguments2[4] : new Map();
       var tplContextId = brickConf[symbolForTplContextId];
       var formContextId = brickConf[symbolForFormContextId];
-      var context = _this7.getContext({
+      var context = _this10.getContext({
         match,
         tplContextId,
         formContextId
       });
 
       // First, check whether the brick should be rendered.
-      if (!(yield _this7.checkResolvableIf(brickConf, context))) {
+      if (!(yield _this10.checkResolvableIf(brickConf, context))) {
         return;
       }
 
       // Then, resolve the template to a brick.
       if (brickConf.template) {
-        yield _this7.resolver.resolve(brickConf, null, context);
+        yield _this10.resolver.resolve(brickConf, null, context);
       }
 
       // Check `if` again for dynamic loaded templates.
-      if (!(yield _this7.checkResolvableIf(brickConf, context))) {
+      if (!(yield _this10.checkResolvableIf(brickConf, context))) {
         return;
       }
 
       // If it's a custom template, `tplTagName` is the tag name of the template.
       // Otherwise, `tplTagName` is false.
-      var tplTagName = getTagNameOfCustomTemplate(brickConf.brick, (_this7$kernel$nextApp = _this7.kernel.nextApp) === null || _this7$kernel$nextApp === void 0 ? void 0 : _this7$kernel$nextApp.id);
+      var tplTagName = getTagNameOfCustomTemplate(brickConf.brick, (_this10$kernel$nextAp = _this10.kernel.nextApp) === null || _this10$kernel$nextAp === void 0 ? void 0 : _this10$kernel$nextAp.id);
       if (tplTagName) {
         var _tplStack$get;
         var tplCount = (_tplStack$get = tplStack.get(tplTagName)) !== null && _tplStack$get !== void 0 ? _tplStack$get : 0;
@@ -9823,9 +9954,16 @@ class LocationContext {
         brickConf.properties.formData = JSON.stringify(brickConf.properties.formData);
       }
       var brick = {};
-      yield _this7.storyboardContextWrapper.define(brickConf.context, context, brick);
-      yield _this7.preCheckPermissions(brickConf, context);
+
+      // istanbul ignore else
+      if (_this10.kernel.getFeatureFlags()["next-core-deferred-context"]) {
+        _this10.storyboardContextWrapper.deferDefine(brickConf.context, context, brick);
+      } else {
+        yield _this10.storyboardContextWrapper.define(brickConf.context, context, brick);
+      }
+      yield _this10.preCheckPermissions(brickConf, context);
       var trackingContextList = [];
+      yield _this10.storyboardContextWrapper.waitForUsedContext(brickConf.properties);
       Object.assign(brick, _objectSpread({
         type: tplTagName || brickConf.brick,
         properties: computeRealProperties(brickConf.properties, context, brickConf.injectDeep !== false, trackingContextList),
@@ -9843,8 +9981,8 @@ class LocationContext {
         }
       } : {}));
       if (brickConf[symbolForComputedPropsFromProxy]) {
-        Object.entries(brickConf[symbolForComputedPropsFromProxy]).forEach(_ref2 => {
-          var [propName, propValue] = _ref2;
+        Object.entries(brickConf[symbolForComputedPropsFromProxy]).forEach(_ref3 => {
+          var [propName, propValue] = _ref3;
           set(brick.properties, propName, propValue);
         });
       }
@@ -9852,36 +9990,36 @@ class LocationContext {
       if (brick.refForProxy) {
         brick.refForProxy.brick = brick;
       }
-      _this7.registerHandlersFromLifeCycle(brickConf.lifeCycle, brick, match, tplContextId);
+      _this10.registerHandlersFromLifeCycle(brickConf.lifeCycle, brick, match, tplContextId);
       if ((_brick$lifeCycle = brick.lifeCycle) !== null && _brick$lifeCycle !== void 0 && _brick$lifeCycle.onScrollIntoView) {
-        _this7.brickBindObserver(brick);
+        _this10.brickBindObserver(brick);
       }
 
       // Then, resolve the brick.
-      yield _this7.resolver.resolve(brickConf, brick, context);
+      yield _this10.resolver.resolve(brickConf, brick, context);
       var expandedBrickConf = brickConf;
       var isBaseLayout = ["base-layout.tpl-homepage-base-module", "base-layout.tpl-base-page-module", "base-layout.tpl-homepage-base-module-cmdb", "base-layout.tpl-base-page-module-cmdb"].includes(tplTagName);
-      if (tplTagName && (!isBaseLayout || _this7.kernel.getFeatureFlags()["support-ui-8.0-base-layout"] && isBaseLayout)) {
+      if (tplTagName && (!isBaseLayout || _this10.kernel.getFeatureFlags()["support-ui-8.0-base-layout"] && isBaseLayout)) {
         var _customTemplateRegist;
-        yield _this7.preFetchMenu((_customTemplateRegist = customTemplateRegistry.get(tplTagName)) === null || _customTemplateRegist === void 0 ? void 0 : _customTemplateRegist.bricks);
+        yield _this10.preFetchMenu((_customTemplateRegist = customTemplateRegistry.get(tplTagName)) === null || _customTemplateRegist === void 0 ? void 0 : _customTemplateRegist.bricks);
         expandedBrickConf = yield asyncExpandCustomTemplate(_objectSpread(_objectSpread({}, brickConf), {}, {
           brick: tplTagName,
           // Properties are computed for custom templates.
           properties: brick.properties
-        }), brick, context);
+        }), brick, context, _this10);
 
         // Try to load deps for dynamic added bricks.
-        yield _this7.kernel.loadDynamicBricksInBrickConf(expandedBrickConf);
+        yield _this10.kernel.loadDynamicBricksInBrickConf(expandedBrickConf);
       }
       if (brick.type === formRenderer) {
         var formData = typeof brick.properties.formData === "string" ? JSON.parse(brick.properties.formData) : brick.properties.formData;
-        expandedBrickConf = yield AsyncExpandCustomForm(formData, brickConf, brick.properties.isPreview, context);
-        yield _this7.kernel.loadDynamicBricksInBrickConf(expandedBrickConf);
+        expandedBrickConf = yield AsyncExpandCustomForm(formData, brickConf, brick.properties.isPreview, context, _this10);
+        yield _this10.kernel.loadDynamicBricksInBrickConf(expandedBrickConf);
       }
       if (expandedBrickConf.exports) {
         for (var [prop, ctxName] of Object.entries(expandedBrickConf.exports)) {
           if (typeof ctxName === "string" && ctxName.startsWith("CTX.")) {
-            _this7.storyboardContextWrapper.set(ctxName.substring(4), {
+            _this10.storyboardContextWrapper.set(ctxName.substring(4), {
               type: "brick-property",
               brick,
               prop
@@ -9892,8 +10030,8 @@ class LocationContext {
       if (expandedBrickConf.bg) {
         // A bg brick has no slotId.
         brick.slotId = undefined;
-        yield _this7.kernel.loadDynamicBricks([brick.type]);
-        appendBrick(brick, _this7.kernel.mountPoints.bg);
+        yield _this10.kernel.loadDynamicBricks([brick.type]);
+        appendBrick(brick, _this10.kernel.mountPoints.bg);
       } else {
         if (expandedBrickConf.portal) {
           // A portal brick has no slotId.
@@ -9908,9 +10046,9 @@ class LocationContext {
               main: brick.children
             });
             if (slotConf.type === "bricks") {
-              yield _this7.mountBricks(slotConf.bricks, match, _slotId, slottedMountRoutesResult, tplStack);
+              yield _this10.mountBricks(slotConf.bricks, match, _slotId, slottedMountRoutesResult, tplStack);
             } else if (slotConf.type === "routes") {
-              yield _this7.mountRoutes(slotConf.routes, _slotId, slottedMountRoutesResult);
+              yield _this10.mountRoutes(slotConf.routes, _slotId, slottedMountRoutesResult);
             }
           }
         }
@@ -10086,11 +10224,11 @@ class LocationContext {
     }
   }
   preFetchMenu(data) {
-    var _this8 = this;
+    var _this11 = this;
     return _asyncToGenerator$3(function* () {
       var useMenus = scanAppGetMenuInAny(data);
       if (useMenus.length) {
-        yield preConstructMenus(useMenus, _this8.getCurrentContext(), _this8.kernel);
+        yield preConstructMenus(useMenus, _this11.getCurrentContext(), _this11.kernel);
       }
     })();
   }
@@ -10277,12 +10415,13 @@ function makeProviderRefreshable(providerBrick) {
 }
 
 class Resolver {
-  constructor(kernel) {
+  constructor(kernel, locationContext) {
     _defineProperty$1(this, "cache", new Map());
     _defineProperty$1(this, "refreshQueue", new Map());
     _defineProperty$1(this, "definedResolves", new Map());
     _defineProperty$1(this, "active", true);
     this.kernel = kernel;
+    this.locationContext = locationContext;
   }
   resetRefreshQueue() {
     if (this.refreshQueue.size > 0) {
@@ -10306,9 +10445,15 @@ class Resolver {
     var _this = this;
     return _asyncToGenerator$3(function* () {
       var _brickConf$lifeCycle$, _brickConf$lifeCycle;
-      var useResolves = ((_brickConf$lifeCycle$ = (_brickConf$lifeCycle = brickConf.lifeCycle) === null || _brickConf$lifeCycle === void 0 ? void 0 : _brickConf$lifeCycle.useResolves) !== null && _brickConf$lifeCycle$ !== void 0 ? _brickConf$lifeCycle$ : []).filter(r => {
-        return looseCheckIf(r, context);
-      });
+      var useResolves = (yield Promise.all(((_brickConf$lifeCycle$ = (_brickConf$lifeCycle = brickConf.lifeCycle) === null || _brickConf$lifeCycle === void 0 ? void 0 : _brickConf$lifeCycle.useResolves) !== null && _brickConf$lifeCycle$ !== void 0 ? _brickConf$lifeCycle$ : []).map( /*#__PURE__*/function () {
+        var _ref = _asyncToGenerator$3(function* (r) {
+          yield _this.locationContext.storyboardContextWrapper.waitForUsedContext(r.if);
+          return r;
+        });
+        return function (_x) {
+          return _ref.apply(this, arguments);
+        };
+      }()))).filter(r => looseCheckIf(r, context));
       yield Promise.all(useResolves.map(resolveConf => _this.resolveOne("brick", resolveConf, brickConf, brick, context)));
       if (brickConf.template) {
         brickConf.$$resolved = true;
@@ -10392,7 +10537,7 @@ class Resolver {
         }
       }
       var actualArgs = args ? ref ? args // `args` are already computed for `defineResolves`
-      : context ? computeRealValue(args, context, true) : args : providerBrick.args || [];
+      : context ? yield _this2.locationContext.deferComputeRealValue(args, context, true) : args : providerBrick.args || [];
       var cacheKey;
       try {
         // `actualArgs` may contain circular references, which makes
@@ -10455,6 +10600,7 @@ class Resolver {
           yield fetchData();
         } catch (error) {
           if (isHandleRejectByTransform(onReject)) {
+            yield _this2.locationContext.storyboardContextWrapper.waitForUsedContext(onReject.transform);
             transformProperties(props, error, context ? computeRealValue(onReject.transform, context, true) : onReject.transform);
             return;
           } else if (isHandleRejectByCatch(onReject)) {
@@ -10467,18 +10613,21 @@ class Resolver {
         yield fetchData();
       }
       if (ref) {
+        yield _this2.locationContext.storyboardContextWrapper.waitForUsedContext(transform);
         data = transformIntermediateData(data, context ? computeRealValue(transform, context, true) : transform, transformFrom, transformMapArray);
       }
+      var transformTo = resolveConf.transform || resolveConf.name;
+      yield _this2.locationContext.storyboardContextWrapper.waitForUsedContext(transformTo);
       transformProperties(props, data,
       // Also support legacy `name`
-      context ? computeRealValue(resolveConf.transform || resolveConf.name, context, true) : resolveConf.transform || resolveConf.name, resolveConf.transformFrom, resolveConf.transformMapArray);
+      context ? computeRealValue(transformTo, context, true) : transformTo, resolveConf.transformFrom, resolveConf.transformMapArray);
     })();
   }
   scheduleRefreshing() {
     var _this3 = this;
     var _loop = function (providerBrick, interval) {
       var request = /*#__PURE__*/function () {
-        var _ref2 = _asyncToGenerator$3(function* () {
+        var _ref3 = _asyncToGenerator$3(function* () {
           yield providerBrick.$refresh({
             ignoreErrors: interval.ignoreErrors,
             throwErrors: true,
@@ -10490,7 +10639,7 @@ class Resolver {
           }
         });
         return function request() {
-          return _ref2.apply(this, arguments);
+          return _ref3.apply(this, arguments);
         };
       }();
       interval.timeoutId = setTimeout(request, interval.delay);
@@ -10887,7 +11036,7 @@ class Router {
         yield Promise.all(parallelRequests);
 
         // 如果找到匹配的 storyboard，那么根据路由匹配得到的 sub-storyboard 加载它的依赖库。
-        var subStoryboard = _this3.locationContext.getSubStoryboardByRoute(storyboard);
+        var subStoryboard = yield _this3.locationContext.getSubStoryboardByRoute(storyboard);
         ({
           pendingTask
         } = yield _this3.kernel.loadDepsOfStoryboard(subStoryboard));
@@ -10959,6 +11108,7 @@ class Router {
         try {
           var mergedRoutes = mergePreviewRoutes(storyboard.routes);
           yield locationContext.mountRoutes(mergedRoutes, undefined, mountRoutesResult);
+          yield locationContext.storyboardContextWrapper.waitForAllContext();
         } catch (error) {
           // eslint-disable-next-line no-console
           console.error(error);
@@ -11259,6 +11409,9 @@ class Router {
   handleMessageClose(event) {
     return this.locationContext.handleMessageClose(event);
   }
+  waitForUsedContext(data) {
+    return this.locationContext.storyboardContextWrapper.waitForUsedContext(data);
+  }
 }
 
 var customProcessorRegistry = new Map();
@@ -11565,13 +11718,15 @@ function expandTemplateInUseBrick(useBrick, tplTagName, brick, requireSuspense)
 var getCurrentRunTimeBrick = (useBrick, tplTagName, data) => {
   var trackingContextList = [];
   var tplContextId = useBrick[symbolForTplContextId];
+  var formContextId = useBrick[symbolForFormContextId];
   var transformOption = {
     // Keep lazy fields inside `useBrick` inside the `properties`.
     // They will be transformed by their `BrickAsComponent` later.
     $$lazyForUseBrick: true,
     trackingContextList,
     allowInject: true,
-    tplContextId
+    tplContextId,
+    formContextId
   };
   var properties = doTransform(data, cloneDeepWithInjectedMark(useBrick.properties) || {}, transformOption);
   var brick = _objectSpread(_objectSpread({}, useBrick), {}, {
@@ -11581,7 +11736,8 @@ var getCurrentRunTimeBrick = (useBrick, tplTagName, data) => {
   });
   var runtimeContext = _internalApiGetCurrentContext();
   listenOnTrackingContext(brick, trackingContextList, _objectSpread(_objectSpread({}, runtimeContext), {}, {
-    tplContextId
+    tplContextId,
+    formContextId
   }));
   return brick;
 };
@@ -11632,7 +11788,8 @@ var SingleBrickAsComponent = /*#__PURE__*/React.memo(function SingleBrickAsCompo
   var requireSuspense = useMemo(() => {
     var context;
     if (useBrick.brick === formRenderer) {
-      context = useBrick.properties.formData.context;
+      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;
     }
@@ -11650,7 +11807,7 @@ var SingleBrickAsComponent = /*#__PURE__*/React.memo(function SingleBrickAsCompo
     }
     _internalApiLoadDynamicBricksInBrickConf(useBrick).catch(handleHttpError);
     var brick = getCurrentRunTimeBrick(useBrick, tplTagName, data);
-    var expanded = useBrick.brick === formRenderer ? (requireSuspense ? AsyncExpandCustomForm : ExpandCustomForm)(useBrick.properties.formData, useBrick, false) : expandTemplateInUseBrick(useBrick, tplTagName, brick, requireSuspense);
+    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);
       setSuspenseReady(true);
@@ -11676,7 +11833,8 @@ var SingleBrickAsComponent = /*#__PURE__*/React.memo(function SingleBrickAsCompo
         brick: useBrick.brick,
         lifeCycle: useBrick.lifeCycle
       }, brick, _objectSpread(_objectSpread({}, _internalApiGetCurrentContext()), {}, {
-        tplContextId: useBrick[symbolForTplContextId]
+        tplContextId: useBrick[symbolForTplContextId],
+        formContextId: useBrick[symbolForFormContextId]
       }));
     }
     return brick;
@@ -11685,7 +11843,8 @@ var SingleBrickAsComponent = /*#__PURE__*/React.memo(function SingleBrickAsCompo
     var _ref4 = _asyncToGenerator$3(function* (event, handlers, brick) {
       for (var handler of [].concat(handlers)) {
         listenerFactory(handler, _objectSpread(_objectSpread({}, _internalApiGetCurrentContext()), {}, {
-          tplContextId: useBrick[symbolForTplContextId]
+          tplContextId: useBrick[symbolForTplContextId],
+          formContextId: useBrick[symbolForFormContextId]
         }), brick)(event);
       }
     });
@@ -11698,6 +11857,9 @@ var SingleBrickAsComponent = /*#__PURE__*/React.memo(function SingleBrickAsCompo
     var {
       [symbolForTplContextId]: tplContextId
     } = useBrick;
+    var {
+      [symbolForFormContextId]: formContextId
+    } = useBrick;
     if (useBrick.iid) {
       element.dataset.iid = useBrick.iid;
     }
@@ -11705,7 +11867,8 @@ var SingleBrickAsComponent = /*#__PURE__*/React.memo(function SingleBrickAsCompo
     unbindListeners(element);
     if (brick.events) {
       bindListeners(element, transformEvents(data, brick.events), _objectSpread(_objectSpread({}, _internalApiGetCurrentContext()), {}, {
-        tplContextId
+        tplContextId,
+        formContextId
       }));
     }
     // 设置proxyEvent
@@ -11879,7 +12042,8 @@ var ForwardRefSingleBrickAsComponent = /*#__PURE__*/React.memo( /*#__PURE__*/for
   var requireSuspense = useMemo(() => {
     var context;
     if (useBrick.brick === formRenderer) {
-      context = useBrick.properties.formData.context;
+      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;
     }
@@ -11902,7 +12066,7 @@ var ForwardRefSingleBrickAsComponent = /*#__PURE__*/React.memo( /*#__PURE__*/for
     }
     _internalApiLoadDynamicBricksInBrickConf(useBrick).catch(handleHttpError);
     var brick = getCurrentRunTimeBrick(useBrick, tplTagName, data);
-    var expanded = useBrick.brick === formRenderer ? (requireSuspense ? AsyncExpandCustomForm : ExpandCustomForm)(useBrick.properties.formData, useBrick, false) : expandTemplateInUseBrick(useBrick, tplTagName, brick, requireSuspense);
+    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);
       setSuspenseReady(true);