@next-core/brick-kit 2.159.5 → 2.160.1

package/dist/index.bundle.js

@@ -840,6 +840,7 @@
           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 {
@@ -1730,6 +1731,7 @@
       _defineProperty__default["default"](this, "data", new Map());
       _defineProperty__default["default"](this, "tplContextId", void 0);
       _defineProperty__default["default"](this, "formContextId", void 0);
+      _defineProperty__default["default"](this, "pendingStack", []);
       this.tplContextId = tplContextId;
       this.formContextId = formContextId;
     }
@@ -1831,15 +1833,57 @@
         detail: item.value
       }));
     }
-    define(contextConfs, coreContext, brick) {
+    waitForUsedContext(data) {
       var _this = this;
+      return _asyncToGenerator__default["default"](function* () {
+        if (_this.tplContextId || _this.formContextId) {
+          return;
+        }
+        var usage = brickUtils.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__default["default"](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 = brickUtils.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__default["default"](function* () {
         if (Array.isArray(contextConfs)) {
           var {
             mergedContext,
             keyword
-          } = _this.getResolveOptions(coreContext);
-          yield brickUtils.resolveContextConcurrently(contextConfs, contextConf => resolveStoryboardContext(contextConf, mergedContext, _this, brick), keyword);
+          } = _this3.getResolveOptions(coreContext);
+          yield brickUtils.resolveContextConcurrently(contextConfs, contextConf => resolveStoryboardContext(contextConf, mergedContext, _this3, brick), keyword);
         }
       })();
     }
@@ -1891,6 +1935,7 @@
   }
   function _resolveNormalStoryboardContext() {
     _resolveNormalStoryboardContext = _asyncToGenerator__default["default"](function* (contextConf, mergedContext, storyboardContextWrapper, brick) {
+      yield storyboardContextWrapper.waitForUsedContext(contextConf.if);
       if (!looseCheckIf(contextConf, mergedContext)) {
         return false;
       }
@@ -1900,6 +1945,7 @@
       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__default["default"](function* (options) {
@@ -1923,6 +1969,7 @@
           }
         }
         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);
@@ -2068,7 +2115,7 @@
       _defineProperty__default["default"](this, "formState", void 0);
       _defineProperty__default["default"](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) {
@@ -2819,8 +2866,8 @@
           (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__default["default"].addResourceBundle(lang, menuI18nNamespace, resources);
             });
             menuWithI18n.set(menu, menuI18nNamespace);
@@ -2920,8 +2967,8 @@
       }
       collectAppsRequireI18nFulfilled(items, context.app.id, appsRequireI18nFulfilled);
       yield kernel.fulfilStoryboardI18n([...appsRequireI18nFulfilled]);
-      var menuData = _objectSpread__default["default"](_objectSpread__default["default"]({}, computeRealValueWithOverrideApp(restMenuData, rootAppId, context, kernel)), {}, {
-        items: computeMenuItemsWithOverrideApp(items, context, kernel)
+      var menuData = _objectSpread__default["default"](_objectSpread__default["default"]({}, yield computeRealValueWithOverrideApp(restMenuData, rootAppId, context, kernel)), {}, {
+        items: yield computeMenuItemsWithOverrideApp(items, context, kernel)
       });
       return {
         title: yield processMenuTitle(menuData),
@@ -2969,17 +3016,22 @@
     collect(items);
   }
   function computeMenuItemsWithOverrideApp(items, context, kernel) {
-    return items.map(_ref2 => {
-      var {
-          children
-        } = _ref2,
-        rest = _objectWithoutProperties__default["default"](_ref2, _excluded2$2);
-      return _objectSpread__default["default"](_objectSpread__default["default"]({}, computeRealValueWithOverrideApp(rest, rest[symbolAppId], context, kernel)), {}, {
-        children: children && computeMenuItemsWithOverrideApp(children, context, kernel)
+    return Promise.all(items.map( /*#__PURE__*/function () {
+      var _ref3 = _asyncToGenerator__default["default"](function* (_ref2) {
+        var {
+            children
+          } = _ref2,
+          rest = _objectWithoutProperties__default["default"](_ref2, _excluded2$2);
+        return _objectSpread__default["default"](_objectSpread__default["default"]({}, 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() {
@@ -3058,25 +3110,32 @@
     }
     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__default["default"](_objectSpread__default["default"]({}, context), {}, {
-          overrideApp: data[symbolOverrideApp],
-          appendI18nNamespace: data[symbolMenuI18nNamespace]
-        });
-      } else {
-        var storyboard = kernel.bootstrapData.storyboards.find(story => story.app.id === overrideAppId);
-        newContext = _objectSpread__default["default"](_objectSpread__default["default"]({}, 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__default["default"](function* (data, overrideAppId, context, kernel) {
+      var newContext = context;
+      if (overrideAppId !== context.app.id && attemptToVisit(data, ["APP", "I18N"])) {
+        if (window.STANDALONE_MICRO_APPS) {
+          newContext = _objectSpread__default["default"](_objectSpread__default["default"]({}, context), {}, {
+            overrideApp: data[symbolOverrideApp],
+            appendI18nNamespace: data[symbolMenuI18nNamespace]
+          });
+        } else {
+          var storyboard = kernel.bootstrapData.storyboards.find(story => story.app.id === overrideAppId);
+          newContext = _objectSpread__default["default"](_objectSpread__default["default"]({}, 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();
@@ -7633,17 +7692,21 @@
     }
     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__default["default"](function* (brickConf, proxyBrick, context) {
+    _asyncExpandCustomTemplate = _asyncToGenerator__default["default"](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);
@@ -8990,50 +9053,85 @@
     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__default["default"](_objectSpread__default["default"]({}, route), {}, {
-          routes: getSubRoutes(route.routes)
+  function getSubStoryboardByRoute(_x, _x2) {
+    return _getSubStoryboardByRoute.apply(this, arguments);
+  }
+  function _getSubStoryboardByRoute() {
+    _getSubStoryboardByRoute = _asyncToGenerator__default["default"](function* (storyboard, matcher) {
+      function getSubRoutes(_x3) {
+        return _getSubRoutes.apply(this, arguments);
+      }
+      function _getSubRoutes() {
+        _getSubRoutes = _asyncToGenerator__default["default"](function* (routes) {
+          return Promise.all((yield matcher(routes)).map(getSubRoute));
         });
+        return _getSubRoutes.apply(this, arguments);
       }
-      return _objectSpread__default["default"](_objectSpread__default["default"]({}, route), {}, {
-        bricks: getSubBricks(route.bricks)
-      });
-    }
-    function getSubBricks(bricks) {
-      if (Array.isArray(bricks)) {
-        return bricks.map(brickConf => getSubBrick(brickConf));
-      }
-      return bricks;
-    }
-    function getSubBrick(brickConf) {
-      if (brickUtils.isObject(brickConf.slots)) {
-        return _objectSpread__default["default"](_objectSpread__default["default"]({}, brickConf), {}, {
-          slots: Object.fromEntries(Object.entries(brickConf.slots).map(_ref => {
-            var [slotId, slotConf] = _ref;
-            if (slotConf.type === "routes") {
-              return [slotId, _objectSpread__default["default"](_objectSpread__default["default"]({}, slotConf), {}, {
-                routes: getSubRoutes(slotConf.routes)
-              })];
-            } /* istanbul ignore else: should never reach */else if (slotConf.type === "bricks") {
-              return [slotId, _objectSpread__default["default"](_objectSpread__default["default"]({}, 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__default["default"](function* (route) {
+          if (route.type === "routes") {
+            return _objectSpread__default["default"](_objectSpread__default["default"]({}, route), {}, {
+              routes: yield getSubRoutes(route.routes)
+            });
+          }
+          return _objectSpread__default["default"](_objectSpread__default["default"]({}, route), {}, {
+            bricks: yield getSubBricks(route.bricks)
+          });
         });
+        return _getSubRoute.apply(this, arguments);
       }
-      return brickConf;
-    }
-    return _objectSpread__default["default"](_objectSpread__default["default"]({}, storyboard), {}, {
-      routes: getSubRoutes(storyboard.routes)
+      function getSubBricks(_x5) {
+        return _getSubBricks.apply(this, arguments);
+      }
+      function _getSubBricks() {
+        _getSubBricks = _asyncToGenerator__default["default"](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__default["default"](function* (brickConf) {
+          if (brickUtils.isObject(brickConf.slots)) {
+            return _objectSpread__default["default"](_objectSpread__default["default"]({}, brickConf), {}, {
+              slots: Object.fromEntries(yield Promise.all(Object.entries(brickConf.slots).map( /*#__PURE__*/function () {
+                var _ref2 = _asyncToGenerator__default["default"](function* (_ref) {
+                  var [slotId, slotConf] = _ref;
+                  if (slotConf.type === "routes") {
+                    return [slotId, _objectSpread__default["default"](_objectSpread__default["default"]({}, slotConf), {}, {
+                      routes: yield getSubRoutes(slotConf.routes)
+                    })];
+                  } /* istanbul ignore else: should never reach */else if (slotConf.type === "bricks") {
+                    return [slotId, _objectSpread__default["default"](_objectSpread__default["default"]({}, 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__default["default"](_objectSpread__default["default"]({}, storyboard), {}, {
+        routes: yield getSubRoutes(storyboard.routes)
+      });
     });
+    return _getSubStoryboardByRoute.apply(this, arguments);
   }
 
   function listenOnTrackingContext(brick, trackingContextList, context) {
@@ -9084,14 +9182,18 @@
     }
     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__default["default"](function* (formData, brickConf, isPreview, context) {
+    _AsyncExpandCustomForm = _asyncToGenerator__default["default"](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__default["default"](_objectSpread__default["default"]({}, context), {}, {
           formContextId: formContext.id
         }), {});
@@ -9477,7 +9579,7 @@
       _defineProperty__default["default"](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();
     }
@@ -9515,60 +9617,79 @@
         match: this.currentMatch
       });
     }
+    deferComputeRealValue() {
+      var _arguments = arguments,
+        _this = this;
+      return _asyncToGenerator__default["default"](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 = brickUtils.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 = brickUtils.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__default["default"](function* () {
+        var _loop = function* (route) {
+          var computedPath = brickUtils.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 = brickUtils.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 brickUtils.isObject(matched) ? [matched.route] : [];
-      };
-      return getSubStoryboardByRoute(storyboard, matcher);
+      var _this3 = this;
+      return _asyncToGenerator__default["default"](function* () {
+        var matcher = /*#__PURE__*/function () {
+          var _ref2 = _asyncToGenerator__default["default"](function* (routes) {
+            var matched = yield _this3.matchRoutes(routes, storyboard.app);
+            return brickUtils.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__default["default"](function* () {
-        var matched = _this2.matchRoutes(routes, _this2.kernel.nextApp);
+        var matched = yield _this4.matchRoutes(routes, _this4.kernel.nextApp);
         var redirect;
         var redirectConf = {};
         var context;
@@ -9582,19 +9703,26 @@
           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.
@@ -9604,7 +9732,7 @@
                 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
@@ -9613,20 +9741,20 @@
                 }
               }
             }
-            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);
               }
             }
         }
@@ -9634,7 +9762,7 @@
       })();
     }
     mountMenu(menuConf, match, mountRoutesResult) {
-      var _this3 = this;
+      var _this5 = this;
       return _asyncToGenerator__default["default"](function* () {
         if (menuConf === false) {
           // `route.menu` 设置为 `false` 表示不显示顶栏和侧栏。
@@ -9646,7 +9774,7 @@
         if (!menuConf) {
           return;
         }
-        var context = _this3.getContext({
+        var context = _this5.getContext({
           match
         });
         if (menuConf.type === "brick") {
@@ -9656,6 +9784,7 @@
           // 那么可以将菜单配置指定为一个构件，这个构件会被装载到背景容器中（不会在界面中显示），
           // 应该在这个构件的 `connectedCallback` 中执行相关菜单设置，
           // 例如 `getRuntime().menuBar.setAppMenu(...)`。
+          yield _this5.storyboardContextWrapper.waitForUsedContext(menuConf.properties);
           var brick = {
             type: menuConf.brick,
             properties: computeRealProperties(menuConf.properties, context, menuConf.injectDeep !== false),
@@ -9663,16 +9792,16 @@
             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__default["default"]({
+          yield _this5.resolver.resolveOne("reference", _objectSpread__default["default"]({
             transformMapArray: false
           }, menuConf.resolve), menuConf, null, context);
           injectDeep = false;
@@ -9680,7 +9809,7 @@
 
         // 静态菜单配置，仅在有值时才设置，这样可以让菜单设置也具有按路由层级覆盖的能力。
         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,
@@ -9712,11 +9841,11 @@
       })();
     }
     mountProviders(providers, match, slotId, mountRoutesResult) {
-      var _this4 = this;
+      var _this6 = this;
       return _asyncToGenerator__default["default"](function* () {
         if (Array.isArray(providers)) {
           for (var providerConf of providers) {
-            yield _this4.mountBrick(_objectSpread__default["default"](_objectSpread__default["default"]({}, typeof providerConf === "string" ? {
+            yield _this6.mountBrick(_objectSpread__default["default"](_objectSpread__default["default"]({}, typeof providerConf === "string" ? {
               brick: providerConf
             } : providerConf), {}, {
               bg: true,
@@ -9727,11 +9856,11 @@
       })();
     }
     mountBricks(bricks, match, slotId, mountRoutesResult, tplStack) {
-      var _this5 = this;
+      var _this7 = this;
       return _asyncToGenerator__default["default"](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);
@@ -9759,57 +9888,59 @@
       })();
     }
     checkResolvableIf(ifContainer, context) {
-      var _this6 = this;
+      var _this8 = this;
       return _asyncToGenerator__default["default"](function* () {
+        yield _this8.storyboardContextWrapper.waitForUsedContext(ifContainer.if);
         if (brickUtils.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 !brickUtils.hasOwnProperty(ifConf, "if") || !!ifConf.if;
         }
         return looseCheckIf(ifContainer, context);
       })();
     }
     preCheckPermissions(container, context) {
+      var _this9 = this;
       return _asyncToGenerator__default["default"](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__default["default"](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;
@@ -9822,9 +9953,16 @@
           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__default["default"]({
           type: tplTagName || brickConf.brick,
           properties: computeRealProperties(brickConf.properties, context, brickConf.injectDeep !== false, trackingContextList),
@@ -9842,8 +9980,8 @@
           }
         } : {}));
         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);
           });
         }
@@ -9851,36 +9989,36 @@
         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__default["default"](_objectSpread__default["default"]({}, 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
@@ -9891,8 +10029,8 @@
         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.
@@ -9907,9 +10045,9 @@
                 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);
               }
             }
           }
@@ -10085,11 +10223,11 @@
       }
     }
     preFetchMenu(data) {
-      var _this8 = this;
+      var _this11 = this;
       return _asyncToGenerator__default["default"](function* () {
         var useMenus = brickUtils.scanAppGetMenuInAny(data);
         if (useMenus.length) {
-          yield preConstructMenus(useMenus, _this8.getCurrentContext(), _this8.kernel);
+          yield preConstructMenus(useMenus, _this11.getCurrentContext(), _this11.kernel);
         }
       })();
     }
@@ -10276,12 +10414,13 @@
   }
 
   class Resolver {
-    constructor(kernel) {
+    constructor(kernel, locationContext) {
       _defineProperty__default["default"](this, "cache", new Map());
       _defineProperty__default["default"](this, "refreshQueue", new Map());
       _defineProperty__default["default"](this, "definedResolves", new Map());
       _defineProperty__default["default"](this, "active", true);
       this.kernel = kernel;
+      this.locationContext = locationContext;
     }
     resetRefreshQueue() {
       if (this.refreshQueue.size > 0) {
@@ -10305,9 +10444,15 @@
       var _this = this;
       return _asyncToGenerator__default["default"](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__default["default"](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;
@@ -10391,7 +10536,7 @@
           }
         }
         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
@@ -10454,6 +10599,7 @@
             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)) {
@@ -10466,18 +10612,21 @@
           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__default["default"](function* () {
+          var _ref3 = _asyncToGenerator__default["default"](function* () {
             yield providerBrick.$refresh({
               ignoreErrors: interval.ignoreErrors,
               throwErrors: true,
@@ -10489,7 +10638,7 @@
             }
           });
           return function request() {
-            return _ref2.apply(this, arguments);
+            return _ref3.apply(this, arguments);
           };
         }();
         interval.timeoutId = setTimeout(request, interval.delay);
@@ -10886,7 +11035,7 @@
           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));
@@ -10958,6 +11107,7 @@
           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);
@@ -11258,6 +11408,9 @@
     handleMessageClose(event) {
       return this.locationContext.handleMessageClose(event);
     }
+    waitForUsedContext(data) {
+      return this.locationContext.storyboardContextWrapper.waitForUsedContext(data);
+    }
   }
 
   var customProcessorRegistry = new Map();
@@ -11564,13 +11717,15 @@
   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__default["default"](_objectSpread__default["default"]({}, useBrick), {}, {
@@ -11580,7 +11735,8 @@
     });
     var runtimeContext = _internalApiGetCurrentContext();
     listenOnTrackingContext(brick, trackingContextList, _objectSpread__default["default"](_objectSpread__default["default"]({}, runtimeContext), {}, {
-      tplContextId
+      tplContextId,
+      formContextId
     }));
     return brick;
   };
@@ -11631,7 +11787,8 @@
     var requireSuspense = React.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;
       }
@@ -11649,7 +11806,7 @@
       }
       _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);
@@ -11675,7 +11832,8 @@
           brick: useBrick.brick,
           lifeCycle: useBrick.lifeCycle
         }, brick, _objectSpread__default["default"](_objectSpread__default["default"]({}, _internalApiGetCurrentContext()), {}, {
-          tplContextId: useBrick[symbolForTplContextId]
+          tplContextId: useBrick[symbolForTplContextId],
+          formContextId: useBrick[symbolForFormContextId]
         }));
       }
       return brick;
@@ -11684,7 +11842,8 @@
       var _ref4 = _asyncToGenerator__default["default"](function* (event, handlers, brick) {
         for (var handler of [].concat(handlers)) {
           listenerFactory(handler, _objectSpread__default["default"](_objectSpread__default["default"]({}, _internalApiGetCurrentContext()), {}, {
-            tplContextId: useBrick[symbolForTplContextId]
+            tplContextId: useBrick[symbolForTplContextId],
+            formContextId: useBrick[symbolForFormContextId]
           }), brick)(event);
         }
       });
@@ -11697,6 +11856,9 @@
       var {
         [symbolForTplContextId]: tplContextId
       } = useBrick;
+      var {
+        [symbolForFormContextId]: formContextId
+      } = useBrick;
       if (useBrick.iid) {
         element.dataset.iid = useBrick.iid;
       }
@@ -11704,7 +11866,8 @@
       unbindListeners(element);
       if (brick.events) {
         bindListeners(element, transformEvents(data, brick.events), _objectSpread__default["default"](_objectSpread__default["default"]({}, _internalApiGetCurrentContext()), {}, {
-          tplContextId
+          tplContextId,
+          formContextId
         }));
       }
       // 设置proxyEvent
@@ -11878,7 +12041,8 @@
     var requireSuspense = React.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;
       }
@@ -11901,7 +12065,7 @@
       }
       _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);