@next-core/brick-kit 2.129.3 → 2.131.1

package/dist/index.esm.js

@@ -1,10 +1,10 @@
 import { parsePath, createBrowserHistory, locationsAreEqual, createPath } from 'history';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import _asyncToGenerator$4 from '@babel/runtime/helpers/asyncToGenerator';
+import _asyncToGenerator$3 from '@babel/runtime/helpers/asyncToGenerator';
 import _defineProperty$1 from '@babel/runtime/helpers/defineProperty';
 import React, { useState, useEffect, useRef, forwardRef, useImperativeHandle, useMemo, useContext, createContext, useReducer, useCallback } from 'react';
-import { JsonStorage, toPath, computeRealRoutePath, hasOwnProperty, isObject, isEvaluable, transformAndInject, transform, trackContext, trackState, scanPermissionActionsInStoryboard, precookFunction, cook, resolveContextConcurrently, syncResolveContextConcurrently, shouldAllowRecursiveEvaluations, preevaluate, inject, deepFreeze, createProviderClass, getTemplateDepsOfStoryboard, getDllAndDepsOfStoryboard, asyncProcessStoryboard, getDllAndDepsByResource, scanRouteAliasInStoryboard, prefetchScript, scanBricksInBrickConf, scanProcessorsInAny, loadScript, matchPath, scanAppGetMenuInAny, asyncProcessBrick, scanInstalledAppsInStoryboard, restoreDynamicTemplates, scanStoryboard, mapCustomApisToNameAndNamespace } from '@next-core/brick-utils';
+import { JsonStorage, toPath, computeRealRoutePath, hasOwnProperty, isObject, isEvaluable, transformAndInject, transform, trackContext, trackState, scanPermissionActionsInStoryboard, precookFunction, cook, resolveContextConcurrently, syncResolveContextConcurrently, trackUsedState, trackUsedContext, shouldAllowRecursiveEvaluations, preevaluate, inject, deepFreeze, createProviderClass, getTemplateDepsOfStoryboard, getDllAndDepsOfStoryboard, asyncProcessStoryboard, getDllAndDepsByResource, scanRouteAliasInStoryboard, prefetchScript, scanBricksInBrickConf, scanProcessorsInAny, loadScript, matchPath, scanAppGetMenuInAny, asyncProcessBrick, scanInstalledAppsInStoryboard, restoreDynamicTemplates, scanStoryboard, mapCustomApisToNameAndNamespace } from '@next-core/brick-utils';
 import _, { set, get, difference, identity, uniqueId, cloneDeep, clamp, isNil, isEmpty, sortBy, merge, isObject as isObject$1, pick, orderBy, omit, findLastIndex, noop, isString } from 'lodash';
 import { http, HttpResponseError, HttpFetchError } from '@next-core/brick-http';
 import moment from 'moment';
@@ -38,7 +38,7 @@ class BaseBar {
   bootstrap(brick, options) {
     var _this = this;
 
-    return _asyncToGenerator$4(function* () {
+    return _asyncToGenerator$3(function* () {
       // Ignore if the brick is not changed.
       if (_this.brick === brick) {
         return;
@@ -445,7 +445,7 @@ function getCssPropertyValue(name) {
   return ((_window$getComputedSt = window.getComputedStyle(el)) === null || _window$getComputedSt === void 0 ? void 0 : _window$getComputedSt.getPropertyValue(name)) || "";
 }
 
-function asyncGeneratorStep$3(gen, resolve, reject, _next, _throw, key, arg) {
+function asyncGeneratorStep$2(gen, resolve, reject, _next, _throw, key, arg) {
   try {
     var info = gen[key](arg);
     var value = info.value;
@@ -461,7 +461,7 @@ function asyncGeneratorStep$3(gen, resolve, reject, _next, _throw, key, arg) {
   }
 }
 
-function _asyncToGenerator$3(fn) {
+function _asyncToGenerator$2(fn) {
   return function () {
     var self = this,
         args = arguments;
@@ -469,11 +469,11 @@ function _asyncToGenerator$3(fn) {
       var gen = fn.apply(self, args);
 
       function _next(value) {
-        asyncGeneratorStep$3(gen, resolve, reject, _next, _throw, "next", value);
+        asyncGeneratorStep$2(gen, resolve, reject, _next, _throw, "next", value);
       }
 
       function _throw(err) {
-        asyncGeneratorStep$3(gen, resolve, reject, _next, _throw, "throw", err);
+        asyncGeneratorStep$2(gen, resolve, reject, _next, _throw, "throw", err);
       }
 
       _next(undefined);
@@ -536,7 +536,7 @@ function _objectSpread2(target) {
 
 
 var InstanceApi_getDetail = /*#__PURE__*/function () {
-  var _ref = _asyncToGenerator$3(function* (objectId, instanceId, params, options) {
+  var _ref = _asyncToGenerator$2(function* (objectId, instanceId, params, options) {
     return (
       /**! @contract easyops.api.cmdb.instance.GetDetail */
       (yield http.get("api/gateway/cmdb.instance.GetDetail/object/".concat(objectId, "/instance/").concat(instanceId), _objectSpread2(_objectSpread2({}, options), {}, {
@@ -556,7 +556,7 @@ var InstanceApi_getDetail = /*#__PURE__*/function () {
 
 
 var InstanceApi_postSearch = /*#__PURE__*/function () {
-  var _ref = _asyncToGenerator$3(function* (objectId, data, options) {
+  var _ref = _asyncToGenerator$2(function* (objectId, data, options) {
     return (
       /**! @contract easyops.api.cmdb.instance.PostSearch */
       (yield http.post("api/gateway/cmdb.instance.PostSearch/object/".concat(objectId, "/instance/_search"), data, options)).data
@@ -1333,41 +1333,26 @@ function i18nText(data) {
   }
 }
 
-function asyncGeneratorStep$2(gen, resolve, reject, _next, _throw, key, arg) {
-  try {
-    var info = gen[key](arg);
-    var value = info.value;
-  } catch (error) {
-    reject(error);
-    return;
-  }
-
-  if (info.done) {
-    resolve(value);
-  } else {
-    Promise.resolve(value).then(_next, _throw);
-  }
-}
-
-function _asyncToGenerator$2(fn) {
-  return function () {
-    var self = this,
-        args = arguments;
-    return new Promise(function (resolve, reject) {
-      var gen = fn.apply(self, args);
+/**
+ * @description 获取微应用的i18n数据
+ * @endpoint GET /api/v1/micro-app/i18n
+ */
 
-      function _next(value) {
-        asyncGeneratorStep$2(gen, resolve, reject, _next, _throw, "next", value);
-      }
 
-      function _throw(err) {
-        asyncGeneratorStep$2(gen, resolve, reject, _next, _throw, "throw", err);
-      }
+var InstalledMicroAppApi_getI18NData = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator$3(function* (params, options) {
+    return (
+      /**! @contract easyops.api.micro_app.installed_micro_app.GetI18NData@1.0.0 */
+      (yield http.get("api/gateway/micro_app.installed_micro_app.GetI18NData/api/v1/micro-app/i18n", _objectSpread(_objectSpread({}, options), {}, {
+        params
+      }))).data
+    );
+  });
 
-      _next(undefined);
-    });
+  return function InstalledMicroAppApi_getI18NData(_x, _x2) {
+    return _ref.apply(this, arguments);
   };
-}
+}();
 /**
  * @description 查询模型关联小产品列表
  * @endpoint LIST /api/micro_app/v1/object_micro_app
@@ -1375,9 +1360,9 @@ function _asyncToGenerator$2(fn) {
 
 
 var ObjectMicroAppApi_getObjectMicroAppList = /*#__PURE__*/function () {
-  var _ref = _asyncToGenerator$2(function* (options) {
+  var _ref = _asyncToGenerator$3(function* (options) {
     return (
-      /**! @contract easyops.api.micro_app.object_micro_app.GetObjectMicroAppList */
+      /**! @contract easyops.api.micro_app.object_micro_app.GetObjectMicroAppList@1.0.0 */
       (yield http.get("api/gateway/micro_app.object_micro_app.GetObjectMicroAppList/api/micro_app/v1/object_micro_app", options)).data
     );
   });
@@ -1393,9 +1378,9 @@ var ObjectMicroAppApi_getObjectMicroAppList = /*#__PURE__*/function () {
 
 
 var PermissionApi_validatePermissions = /*#__PURE__*/function () {
-  var _ref = _asyncToGenerator$2(function* (data, options) {
+  var _ref = _asyncToGenerator$3(function* (data, options) {
     return (
-      /**! @contract easyops.api.micro_app.permission.ValidatePermissions */
+      /**! @contract easyops.api.micro_app.permission.ValidatePermissions@1.0.0 */
       (yield http.post("api/gateway/micro_app.permission.ValidatePermissions/api/micro_app/v1/permission/validate", data, options)).data
     );
   });
@@ -1461,7 +1446,7 @@ function preCheckPermissions(_x) {
 }
 
 function _preCheckPermissions() {
-  _preCheckPermissions = _asyncToGenerator$4(function* (storyboard) {
+  _preCheckPermissions = _asyncToGenerator$3(function* (storyboard) {
     var usedActions = scanPermissionActionsInStoryboard(storyboard);
     yield validatePermissions(usedActions);
   });
@@ -1479,7 +1464,7 @@ function validatePermissions(_x2) {
  */
 
 function _validatePermissions() {
-  _validatePermissions = _asyncToGenerator$4(function* (usedActions) {
+  _validatePermissions = _asyncToGenerator$3(function* (usedActions) {
     // Do not request known actions.
     var actions = difference(usedActions, Array.from(permissionMap.keys()));
 
@@ -1580,6 +1565,44 @@ function getDynamicReadOnlyProxy(_ref) {
   });
 }
 
+var misc;
+function getRuntimeMisc() {
+  if (!misc) {
+    misc = {
+      isInIframe: false,
+      isInIframeOfSameSite: false,
+      isInIframeOfNext: false,
+      isInIframeOfVisualBuilder: false,
+      isInIframeOfLegacyConsole: false
+    };
+
+    if (window !== window.parent) {
+      misc.isInIframe = true;
+
+      try {
+        // Handle:
+        // - Previewing in visual builder by iframe.
+        // - Nesting next in next.
+        // - Nesting console in next.
+        if (window.origin === window.parent.origin) {
+          misc.isInIframeOfSameSite = true;
+          var selfIsNext = getBasePath() === "/next/";
+          var parentPathname = window.parent.location.pathname;
+          var parentIsNext = parentPathname.startsWith("/next/");
+          misc.isInIframeOfNext = (Number(selfIsNext) ^ Number(parentIsNext)) === 0;
+          misc.isInIframeOfVisualBuilder = parentPathname.startsWith("".concat(parentIsNext ? "/next" : "", "/visual-builder/"));
+          misc.isInIframeOfLegacyConsole = selfIsNext && !parentIsNext;
+        }
+      } catch (e) {// do nothing
+      }
+    }
+
+    Object.freeze(misc);
+  }
+
+  return misc;
+}
+
 // `GeneralGlobals` are globals which are page-state-agnostic,
 // thus they can be used both in storyboard expressions and functions.
 function getGeneralGlobals(attemptToVisitGlobals, options) {
@@ -1632,6 +1655,9 @@ function getIndividualGlobal(variableName, _ref) {
         getCssPropertyValue: collectCoverage ? () => "" : getCssPropertyValue
       };
 
+    case "RUNTIME_MISC":
+      return collectCoverage ? fakeRuntimeMisc() : getRuntimeMisc();
+
     case "console":
       return isStoryboardFunction ? getReadOnlyProxy(console) : undefined;
 
@@ -1667,6 +1693,16 @@ function fakeCheckPermissions() {
   return true;
 }
 
+function fakeRuntimeMisc() {
+  return {
+    isInIframe: false,
+    isInIframeOfSameSite: false,
+    isInIframeOfNext: false,
+    isInIframeOfVisualBuilder: false,
+    isInIframeOfLegacyConsole: false
+  };
+}
+
 /** @internal */
 
 /** @internal */
@@ -2005,7 +2041,7 @@ class StoryboardContextWrapper {
   }
 
   updateValue(name, value, method) {
-    var _item$eventTarget;
+    var _item$eventTarget2;
 
     if (!this.data.has(name)) {
       if (this.tplContextId) {
@@ -2029,6 +2065,22 @@ class StoryboardContextWrapper {
       return;
     }
 
+    if (method === "refresh") {
+      if (!item.refresh) {
+        throw new Error("You can not refresh the storyboard context \"".concat(name, "\" which has no resolve."));
+      }
+
+      item.refresh().then(val => {
+        var _item$eventTarget;
+
+        item.value = val;
+        (_item$eventTarget = item.eventTarget) === null || _item$eventTarget === void 0 ? void 0 : _item$eventTarget.dispatchEvent(new CustomEvent(this.tplContextId ? "state.change" : "context.change", {
+          detail: item.value
+        }));
+      }, handleHttpError);
+      return;
+    }
+
     if (method === "replace") {
       item.value = value;
     } else {
@@ -2041,7 +2093,7 @@ class StoryboardContextWrapper {
       }
     }
 
-    (_item$eventTarget = item.eventTarget) === null || _item$eventTarget === void 0 ? void 0 : _item$eventTarget.dispatchEvent(new CustomEvent(this.tplContextId ? "state.change" : "context.change", {
+    (_item$eventTarget2 = item.eventTarget) === null || _item$eventTarget2 === void 0 ? void 0 : _item$eventTarget2.dispatchEvent(new CustomEvent(this.tplContextId ? "state.change" : "context.change", {
       detail: item.value
     }));
   }
@@ -2049,7 +2101,7 @@ class StoryboardContextWrapper {
   define(contextConfs, coreContext, brick) {
     var _this = this;
 
-    return _asyncToGenerator$4(function* () {
+    return _asyncToGenerator$3(function* () {
       if (Array.isArray(contextConfs)) {
         var {
           mergedContext,
@@ -2090,7 +2142,7 @@ function resolveStoryboardContext(_x, _x2, _x3, _x4) {
 }
 
 function _resolveStoryboardContext() {
-  _resolveStoryboardContext = _asyncToGenerator$4(function* (contextConf, coreContext, storyboardContextWrapper, brick) {
+  _resolveStoryboardContext = _asyncToGenerator$3(function* (contextConf, coreContext, storyboardContextWrapper, brick) {
     if (contextConf.property) {
       if (storyboardContextWrapper.tplContextId) {
         throw new Error("Setting `property` is not allowed in template scoped context");
@@ -2117,35 +2169,70 @@ function resolveNormalStoryboardContext(_x5, _x6, _x7, _x8) {
 }
 
 function _resolveNormalStoryboardContext() {
-  _resolveNormalStoryboardContext = _asyncToGenerator$4(function* (contextConf, mergedContext, storyboardContextWrapper, brick) {
+  _resolveNormalStoryboardContext = _asyncToGenerator$3(function* (contextConf, mergedContext, storyboardContextWrapper, brick) {
     if (!looseCheckIf(contextConf, mergedContext)) {
       return false;
     }
 
-    var isResolve = false;
-    var value = getDefinedTemplateState(!!storyboardContextWrapper.tplContextId, contextConf, brick);
+    var isTemplateState = !!storyboardContextWrapper.tplContextId;
+    var value = getDefinedTemplateState(isTemplateState, contextConf, brick);
+    var refresh = null;
+    var isLazyResolve = false;
 
     if (value === undefined) {
       if (contextConf.resolve) {
         if (looseCheckIf(contextConf.resolve, mergedContext)) {
-          isResolve = true;
-          var valueConf = {};
-          yield _internalApiGetResolver().resolveOne("reference", _objectSpread({
-            transform: "value",
-            transformMapArray: false
-          }, contextConf.resolve), valueConf, null, mergedContext);
-          value = valueConf.value;
+          refresh = /*#__PURE__*/function () {
+            var _ref = _asyncToGenerator$3(function* () {
+              var valueConf = {};
+              yield _internalApiGetResolver().resolveOne("reference", _objectSpread({
+                transform: "value",
+                transformMapArray: false
+              }, contextConf.resolve), valueConf, null, mergedContext);
+              return valueConf.value;
+            });
+
+            return function refresh() {
+              return _ref.apply(this, arguments);
+            };
+          }();
+
+          isLazyResolve = contextConf.resolve.lazy;
+
+          if (!isLazyResolve) {
+            value = yield refresh();
+          }
         } else if (!hasOwnProperty(contextConf, "value")) {
           return false;
         }
       }
 
-      if (!isResolve && contextConf.value !== undefined) {
+      if ((!refresh || isLazyResolve) && contextConf.value !== undefined) {
+        // 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);
       }
+
+      if (contextConf.track) {
+        // Track its dependencies and auto update when each of them changed.
+        var deps = (isTemplateState ? trackUsedState : trackUsedContext)(refresh ? contextConf.resolve : contextConf.value);
+
+        for (var dep of deps) {
+          var _eventTarget;
+
+          var ctx = storyboardContextWrapper.get().get(dep);
+          ctx === null || ctx === void 0 ? void 0 : (_eventTarget = ctx.eventTarget) === null || _eventTarget === void 0 ? void 0 : _eventTarget.addEventListener(isTemplateState ? "state.change" : "context.change", () => {
+            if (refresh) {
+              storyboardContextWrapper.updateValue(contextConf.name, undefined, "refresh");
+            } else {
+              storyboardContextWrapper.updateValue(contextConf.name, computeRealValue(contextConf.value, mergedContext, true), "replace");
+            }
+          });
+        }
+      }
     }
 
-    resolveFreeVariableValue(value, contextConf, mergedContext, storyboardContextWrapper, brick);
+    resolveFreeVariableValue(value, contextConf, mergedContext, storyboardContextWrapper, brick, refresh);
     return true;
   });
   return _resolveNormalStoryboardContext.apply(this, arguments);
@@ -2176,12 +2263,13 @@ function getDefinedTemplateState(isTemplateState, contextConf, brick) {
   }
 }
 
-function resolveFreeVariableValue(value, contextConf, mergedContext, storyboardContextWrapper, brick) {
+function resolveFreeVariableValue(value, contextConf, mergedContext, storyboardContextWrapper, brick, refresh) {
   var newContext = {
     type: "free-variable",
     value,
     // This is required for tracking context, even if no `onChange` is specified.
-    eventTarget: new EventTarget$1()
+    eventTarget: new EventTarget$1(),
+    refresh
   };
 
   if (contextConf.onChange) {
@@ -2978,7 +3066,8 @@ function getNextInternalOptions(internalOptions, isArray, key) {
 }
 
 var _excluded$6 = ["children"],
-    _excluded2$2 = ["items", "app"];
+    _excluded2$2 = ["children"],
+    _excluded3 = ["items", "app"];
 var symbolAppId = Symbol("appId");
 // Caching menu requests to avoid flicker.
 var menuCache = new Map();
@@ -2989,7 +3078,7 @@ function constructMenu(_x, _x2, _x3) {
 }
 
 function _constructMenu() {
-  _constructMenu = _asyncToGenerator$4(function* (menuBar, context, kernel) {
+  _constructMenu = _asyncToGenerator$3(function* (menuBar, context, kernel) {
     var hasSubMenu = !!menuBar.subMenuId;
 
     if (menuBar.menuId) {
@@ -3019,7 +3108,7 @@ function preConstructMenus(_x4, _x5, _x6) {
 }
 
 function _preConstructMenus() {
-  _preConstructMenus = _asyncToGenerator$4(function* (menus, context, kernel) {
+  _preConstructMenus = _asyncToGenerator$3(function* (menus, context, kernel) {
     var data = yield Promise.all(menus.map(menuId => processMenu(menuId, context, kernel, undefined, true)));
     data.forEach((item, index) => processMenuCache.set(menus[index], item));
   });
@@ -3032,7 +3121,7 @@ function fetchMenuById(_x7, _x8, _x9) {
 }
 
 function _fetchMenuById() {
-  _fetchMenuById = _asyncToGenerator$4(function* (menuId, kernel, isPreFetch) {
+  _fetchMenuById = _asyncToGenerator$3(function* (menuId, kernel, isPreFetch) {
     if (menuCache.has(menuId)) {
       return menuCache.get(menuId);
     }
@@ -3138,7 +3227,7 @@ function loadDynamicMenuItems(_x10) {
 }
 
 function _loadDynamicMenuItems() {
-  _loadDynamicMenuItems = _asyncToGenerator$4(function* (menu) {
+  _loadDynamicMenuItems = _asyncToGenerator$3(function* (menu) {
     if (menu.dynamicItems && menu.itemsResolve) {
       var itemsConf = {};
       yield _internalApiGetResolver().resolveOne("reference", _objectSpread({
@@ -3156,16 +3245,19 @@ function processMenu(_x11, _x12, _x13, _x14, _x15) {
 }
 
 function _processMenu() {
-  _processMenu = _asyncToGenerator$4(function* (menuId, context, kernel, hasSubMenu, isPreFetch) {
+  _processMenu = _asyncToGenerator$3(function* (menuId, context, kernel, hasSubMenu, isPreFetch) {
     var _yield$fetchMenuById = yield fetchMenuById(menuId, kernel, isPreFetch),
         {
       items,
       app
     } = _yield$fetchMenuById,
-        restMenuData = _objectWithoutProperties(_yield$fetchMenuById, _excluded2$2);
+        restMenuData = _objectWithoutProperties(_yield$fetchMenuById, _excluded3);
+
+    var appIds = collectOverrideApps(items, app[0].appId, context.app.id);
+    yield kernel.fulfilStoryboardI18n(appIds);
 
-    var menuData = _objectSpread(_objectSpread({}, yield computeRealValueWithOverrideApp(restMenuData, app[0].appId, context, kernel)), {}, {
-      items: yield computeMenuItemsWithOverrideApp(items, context, kernel)
+    var menuData = _objectSpread(_objectSpread({}, computeRealValueWithOverrideApp(restMenuData, app[0].appId, context, kernel)), {}, {
+      items: computeMenuItemsWithOverrideApp(items, context, kernel)
     });
 
     return {
@@ -3197,31 +3289,53 @@ function _processMenu() {
   return _processMenu.apply(this, arguments);
 }
 
-function computeMenuItemsWithOverrideApp(items, context, kernel) {
-  return Promise.all(items.map( /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator$4(function* (_ref) {
+function collectOverrideApps(items, rootAppId, contextAppId) {
+  var appIds = new Set();
+
+  if (rootAppId !== contextAppId) {
+    appIds.add(rootAppId);
+  }
+
+  function collect(items) {
+    for (var _ref of items) {
       var {
         children
       } = _ref,
           rest = _objectWithoutProperties(_ref, _excluded$6);
 
-      return _objectSpread(_objectSpread({}, yield computeRealValueWithOverrideApp(rest, rest[symbolAppId], context, kernel)), {}, {
-        children: children && (yield computeMenuItemsWithOverrideApp(children, context, kernel))
-      });
-    });
+      var overrideAppId = rest[symbolAppId];
 
-    return function (_x16) {
-      return _ref2.apply(this, arguments);
-    };
-  }()));
+      if (overrideAppId !== contextAppId && !appIds.has(overrideAppId) && requireOverrideApp(rest)) {
+        appIds.add(overrideAppId);
+      }
+
+      children && collect(children);
+    }
+  }
+
+  collect(items);
+  return [...appIds];
 }
 
-function processMenuTitle(_x17) {
+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)
+    });
+  });
+}
+
+function processMenuTitle(_x16) {
   return _processMenuTitle.apply(this, arguments);
 }
 
 function _processMenuTitle() {
-  _processMenuTitle = _asyncToGenerator$4(function* (menuData) {
+  _processMenuTitle = _asyncToGenerator$3(function* (menuData) {
     if (menuData.title || isEmpty(menuData.titleDataSource)) {
       return menuData.title;
     }
@@ -3311,37 +3425,29 @@ function requireOverrideApp(data) {
   return false;
 }
 
-function computeRealValueWithOverrideApp(_x18, _x19, _x20, _x21) {
-  return _computeRealValueWithOverrideApp.apply(this, arguments);
-}
-
-function _computeRealValueWithOverrideApp() {
-  _computeRealValueWithOverrideApp = _asyncToGenerator$4(function* (data, overrideAppId, context, kernel) {
-    var newContext = context;
+function computeRealValueWithOverrideApp(data, overrideAppId, context, kernel) {
+  var newContext = context;
 
-    if (overrideAppId !== context.app.id && requireOverrideApp(data)) {
-      var storyboard = kernel.bootstrapData.storyboards.find(story => story.app.id === overrideAppId);
+  if (overrideAppId !== context.app.id && requireOverrideApp(data)) {
+    var storyboard = kernel.bootstrapData.storyboards.find(story => story.app.id === overrideAppId);
 
-      if (storyboard) {
-        yield kernel.fulfilStoryboard(storyboard);
-        newContext = _objectSpread(_objectSpread({}, context), {}, {
-          overrideApp: storyboard.app
-        });
-      }
+    if (storyboard) {
+      newContext = _objectSpread(_objectSpread({}, context), {}, {
+        overrideApp: storyboard.app
+      });
     }
+  }
 
-    return computeRealValue(data, newContext, true, {
-      ignoreSymbols: true
-    });
+  return computeRealValue(data, newContext, true, {
+    ignoreSymbols: true
   });
-  return _computeRealValueWithOverrideApp.apply(this, arguments);
 }
 
 var lazyBrickRegistry = new Map();
 var requestsMap = new WeakMap();
 function registerLazyBricks(bricks, factory) {
   var factoryWrapper = /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator$4(function* () {
+    var _ref = _asyncToGenerator$3(function* () {
       try {
         window.dispatchEvent(new CustomEvent("request.start"));
         yield factory();
@@ -3368,7 +3474,7 @@ function loadLazyBricks(_x) {
 }
 
 function _loadLazyBricks() {
-  _loadLazyBricks = _asyncToGenerator$4(function* (bricks) {
+  _loadLazyBricks = _asyncToGenerator$3(function* (bricks) {
     var requests = new Set();
 
     for (var brick of bricks) {
@@ -3489,7 +3595,7 @@ class Runtime {
   }
 
   bootstrap(mountPoints) {
-    return _asyncToGenerator$4(function* () {
+    return _asyncToGenerator$3(function* () {
       if (kernel !== undefined) {
         throw new Error("Cannot bootstrap more than once.");
       }
@@ -5777,7 +5883,7 @@ function startPoll(task, _ref, _ref2) {
   }
 
   function _poll() {
-    _poll = _asyncToGenerator$4(function* () {
+    _poll = _asyncToGenerator$3(function* () {
       timeoutIdList.delete(currentTimeoutId);
       var shouldStop;
 
@@ -5856,7 +5962,7 @@ function clearPollTimeout() {
 
 
 var BootstrapStandaloneApi_runtimeStandalone = /*#__PURE__*/function () {
-  var _ref = _asyncToGenerator$4(function* (options) {
+  var _ref = _asyncToGenerator$3(function* (options) {
     return (
       /**! @contract easyops.api.api_gateway.bootstrap_standalone.RuntimeStandalone@1.0.1 */
       (yield http.get("api/v1/runtime_standalone", options)).data
@@ -5874,7 +5980,7 @@ var BootstrapStandaloneApi_runtimeStandalone = /*#__PURE__*/function () {
 
 
 var BootstrapV2Api_bootstrapV2 = /*#__PURE__*/function () {
-  var _ref = _asyncToGenerator$4(function* (params, options) {
+  var _ref = _asyncToGenerator$3(function* (params, options) {
     return (
       /**! @contract easyops.api.api_gateway.bootstrap_v2.BootstrapV2@1.0.0 */
       (yield http.get("api/auth/v2/bootstrap", _objectSpread(_objectSpread({}, options), {}, {
@@ -5894,7 +6000,7 @@ var BootstrapV2Api_bootstrapV2 = /*#__PURE__*/function () {
 
 
 var BootstrapV2Api_getAppStoryboardV2 = /*#__PURE__*/function () {
-  var _ref = _asyncToGenerator$4(function* (appId, params, options) {
+  var _ref = _asyncToGenerator$3(function* (appId, params, options) {
     return (
       /**! @contract easyops.api.api_gateway.bootstrap_v2.GetAppStoryboardV2@1.0.0 */
       (yield http.get("api/auth/v2/bootstrap/".concat(appId), _objectSpread(_objectSpread({}, options), {}, {
@@ -5914,7 +6020,7 @@ var BootstrapV2Api_getAppStoryboardV2 = /*#__PURE__*/function () {
 
 
 var ContractApi_searchSingleContract = /*#__PURE__*/function () {
-  var _ref = _asyncToGenerator$4(function* (data, options) {
+  var _ref = _asyncToGenerator$3(function* (data, options) {
     return (
       /**! @contract easyops.api.api_gateway.contract.SearchSingleContract@1.0.0 */
       (yield http.post("api/contract/single_search", data, options)).data
@@ -5947,7 +6053,7 @@ function getArgsOfCustomApi(_x, _x2) {
 }
 
 function _getArgsOfCustomApi() {
-  _getArgsOfCustomApi = _asyncToGenerator$4(function* (provider, originalArgs) {
+  _getArgsOfCustomApi = _asyncToGenerator$3(function* (provider, originalArgs) {
     if (!isCustomApiProvider(provider)) {
       return originalArgs;
     }
@@ -6063,7 +6169,7 @@ function _fetchFlowApiDefinition(_x3) {
 }
 
 function _fetchFlowApiDefinition2() {
-  _fetchFlowApiDefinition2 = _asyncToGenerator$4(function* (provider) {
+  _fetchFlowApiDefinition2 = _asyncToGenerator$3(function* (provider) {
     var [namespaceName, nameWithVersion] = provider.split("@");
     var [name, version] = nameWithVersion.split(":");
     var contract;
@@ -6234,10 +6340,12 @@ function listenerFactory(handler, context, runtimeBrick) {
 
       case "context.assign":
       case "context.replace":
+      case "context.refresh":
         return builtinContextListenerFactory(method, handler.args, handler, context);
 
       case "state.update":
-        return builtinStateListenerFactory(handler.args, handler, context);
+      case "state.refresh":
+        return builtinStateListenerFactory(method, handler.args, handler, context);
 
       case "tpl.dispatchEvent":
         return builtinTplDispatchEventFactory(handler.args, handler, context);
@@ -6320,7 +6428,7 @@ function listenerFactory(handler, context, runtimeBrick) {
 
 function usingProviderFactory(handler, context, runtimeBrick) {
   return /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator$4(function* (event) {
+    var _ref2 = _asyncToGenerator$3(function* (event) {
       if (!looseCheckIf(handler, _objectSpread(_objectSpread({}, context), {}, {
         event
       }))) {
@@ -6381,7 +6489,7 @@ function builtinContextListenerFactory(method, args, ifContainer, context) {
   };
 }
 
-function builtinStateListenerFactory(args, ifContainer, context) {
+function builtinStateListenerFactory(method, args, ifContainer, context) {
   return function (event) {
     if (!looseCheckIf(ifContainer, _objectSpread(_objectSpread({}, context), {}, {
       event
@@ -6391,7 +6499,7 @@ function builtinStateListenerFactory(args, ifContainer, context) {
 
     var tplContext = getTplContext(context.tplContextId);
     var [name, value] = argsFactory(args, context, event);
-    tplContext.state.updateValue(name, value, "replace");
+    tplContext.state.updateValue(name, value, method === "refresh" ? method : "replace");
   };
 }
 
@@ -6597,7 +6705,7 @@ function brickCallback(_x2, _x3, _x4, _x5, _x6, _x7, _x8) {
 }
 
 function _brickCallback() {
-  _brickCallback = _asyncToGenerator$4(function* (target, handler, method, context, runtimeBrick, event, options) {
+  _brickCallback = _asyncToGenerator$3(function* (target, handler, method, context, runtimeBrick, event, options) {
     var _handler$callback, _poll;
 
     if (typeof target[method] !== "function") {
@@ -6610,7 +6718,7 @@ function _brickCallback() {
     }
 
     var task = /*#__PURE__*/function () {
-      var _ref3 = _asyncToGenerator$4(function* () {
+      var _ref3 = _asyncToGenerator$3(function* () {
         var computedArgs = argsFactory(handler.args, context, event, options);
 
         if (isUseProviderHandler(handler)) {
@@ -6966,7 +7074,7 @@ var UserAdminApi_searchAllUsersInfo = /*#__PURE__*/function () {
 
 
 var RuntimeApi_runtimeMicroAppStandalone = /*#__PURE__*/function () {
-  var _ref = _asyncToGenerator$4(function* (appId, options) {
+  var _ref = _asyncToGenerator$3(function* (appId, options) {
     return (
       /**! @contract easyops.api.micro_app_standalone.runtime.RuntimeMicroAppStandalone@1.0.1 */
       (yield http.get("api/gateway/micro_app_standalone.runtime.RuntimeMicroAppStandalone/api/v1/micro_app_standalone/runtime/".concat(appId), options)).data
@@ -6984,7 +7092,7 @@ var RuntimeApi_runtimeMicroAppStandalone = /*#__PURE__*/function () {
 
 
 var RuntimeApi_searchMicroAppStandalone = /*#__PURE__*/function () {
-  var _ref = _asyncToGenerator$4(function* (data, options) {
+  var _ref = _asyncToGenerator$3(function* (data, options) {
     return (
       /**! @contract easyops.api.micro_app_standalone.runtime.SearchMicroAppStandalone@1.0.1 */
       (yield http.post("api/gateway/micro_app_standalone.runtime.SearchMicroAppStandalone/api/v1/micro_app_standalone/search", data, options)).data
@@ -7134,7 +7242,7 @@ function CustomApi(_x) {
 }
 
 function _CustomApi() {
-  _CustomApi = _asyncToGenerator$4(function* (_ref2) {
+  _CustomApi = _asyncToGenerator$3(function* (_ref2) {
     var {
       url,
       method = "GET",
@@ -7195,7 +7303,7 @@ function standaloneBootstrap() {
 }
 
 function _standaloneBootstrap() {
-  _standaloneBootstrap = _asyncToGenerator$4(function* () {
+  _standaloneBootstrap = _asyncToGenerator$3(function* () {
     var [bootstrapResult, confString, runtimeData] = yield Promise.all([http.get(window.BOOTSTRAP_FILE), http.get("".concat(window.APP_ROOT, "conf.yaml"), {
       responseType: "text"
     }), yield BootstrapStandaloneApi_runtimeStandalone().catch(function (error) {
@@ -8258,7 +8366,7 @@ function asyncExpandCustomTemplate(_x, _x2, _x3) {
 }
 
 function _asyncExpandCustomTemplate() {
-  _asyncExpandCustomTemplate = _asyncToGenerator$4(function* (brickConf, proxyBrick, context) {
+  _asyncExpandCustomTemplate = _asyncToGenerator$3(function* (brickConf, proxyBrick, context) {
     var tplContext = new CustomTemplateContext(proxyBrick);
     var template = customTemplateRegistry.get(brickConf.brick);
 
@@ -8759,7 +8867,7 @@ class Kernel {
     _defineProperty$1(this, "loadMagicBrickConfigStarted", false);
 
     _defineProperty$1(this, "_loadDepsOfStoryboard", /*#__PURE__*/function () {
-      var _ref = _asyncToGenerator$4(function* (storyboard) {
+      var _ref = _asyncToGenerator$3(function* (storyboard) {
         var {
           brickPackages,
           templatePackages
@@ -8794,7 +8902,7 @@ class Kernel {
     }());
 
     _defineProperty$1(this, "_loadDynamicBricks", /*#__PURE__*/function () {
-      var _ref2 = _asyncToGenerator$4(function* (bricks, processors) {
+      var _ref2 = _asyncToGenerator$3(function* (bricks, processors) {
         var filteredBricks = bricks.filter( // Only try to load undefined custom elements.
         item => !customElements.get(item)); // Try to load deps for dynamic added bricks.
 
@@ -8816,7 +8924,7 @@ class Kernel {
     }());
 
     _defineProperty$1(this, "_loadEditorBricks", /*#__PURE__*/function () {
-      var _ref3 = _asyncToGenerator$4(function* (editorBricks) {
+      var _ref3 = _asyncToGenerator$3(function* (editorBricks) {
         var {
           dll,
           deps
@@ -8837,7 +8945,7 @@ class Kernel {
   bootstrap(mountPoints) {
     var _this2 = this;
 
-    return _asyncToGenerator$4(function* () {
+    return _asyncToGenerator$3(function* () {
       var _this2$bootstrapData$, _this2$bootstrapData$2;
 
       listenDevtoolsEagerly();
@@ -8872,7 +8980,7 @@ class Kernel {
   layoutBootstrap(layout) {
     var _this3 = this;
 
-    return _asyncToGenerator$4(function* () {
+    return _asyncToGenerator$3(function* () {
       var supportedLayouts = ["console", "business"];
 
       if (!supportedLayouts.includes(layout)) {
@@ -8924,7 +9032,7 @@ class Kernel {
   }
 
   loadCheckLogin() {
-    return _asyncToGenerator$4(function* () {
+    return _asyncToGenerator$3(function* () {
       if (!window.NO_AUTH_GUARD) {
         var auth = yield checkLogin();
 
@@ -8938,7 +9046,7 @@ class Kernel {
   loadMicroApps(params, interceptorParams) {
     var _this4 = this;
 
-    return _asyncToGenerator$4(function* () {
+    return _asyncToGenerator$3(function* () {
       var data = yield window.STANDALONE_MICRO_APPS ? standaloneBootstrap() : BootstrapV2Api_bootstrapV2(_objectSpread({
         appFields: "defaultConfig,userConfig,locales,name,homepage,id,currentVersion,installStatus,internal,status,icons",
         ignoreTemplateFields: "templates",
@@ -8969,7 +9077,7 @@ class Kernel {
   fulfilStoryboard(storyboard) {
     var _this5 = this;
 
-    return _asyncToGenerator$4(function* () {
+    return _asyncToGenerator$3(function* () {
       if (storyboard.$$fulfilled) {
         return;
       }
@@ -8985,10 +9093,11 @@ class Kernel {
   doFulfilStoryboard(storyboard) {
     var _this6 = this;
 
-    return _asyncToGenerator$4(function* () {
+    return _asyncToGenerator$3(function* () {
       if (window.STANDALONE_MICRO_APPS) {
         Object.assign(storyboard, {
-          $$fulfilled: true
+          $$fulfilled: true,
+          $$fulfilling: null
         });
 
         if (!window.NO_AUTH_GUARD) {
@@ -9021,7 +9130,8 @@ class Kernel {
           routes,
           meta,
           app: _objectSpread(_objectSpread({}, storyboard.app), app),
-          $$fulfilled: true
+          $$fulfilled: true,
+          $$fulfilling: null
         });
       }
 
@@ -9030,9 +9140,12 @@ class Kernel {
   }
 
   postProcessStoryboard(storyboard) {
-    var _storyboard$meta;
-
     storyboard.app.$$routeAliasMap = scanRouteAliasInStoryboard(storyboard);
+    this.postProcessStoryboardI18n(storyboard);
+  }
+
+  postProcessStoryboardI18n(storyboard) {
+    var _storyboard$meta;
 
     if ((_storyboard$meta = storyboard.meta) !== null && _storyboard$meta !== void 0 && _storyboard$meta.i18n) {
       // Prefix to avoid conflict between brick package's i18n namespace.
@@ -9045,10 +9158,70 @@ class Kernel {
     }
   }
 
+  fulfilStoryboardI18n(appIds) {
+    var _this7 = this;
+
+    return _asyncToGenerator$3(function* () {
+      // Ignore already fulfilled apps.
+      var filteredStoryboards = appIds.map(appId => _this7.bootstrapData.storyboards.find(story => story.app.id === appId)).filter(story => story && !story.$$fulfilled && !story.$$i18nFulfilled);
+
+      if (window.STANDALONE_MICRO_APPS) {
+        // Fallback to fullfil whole storyboard for standalone micro-apps.
+        yield Promise.all(filteredStoryboards.map(story => _this7.fulfilStoryboard(story)));
+        return;
+      } // Do not fulfil i18n if the app is doing a whole fulfilling.
+
+
+      var fulfilling = [];
+      var filteredAppIds = [];
+
+      for (var story of filteredStoryboards) {
+        if (story.$$fulfilling) {
+          fulfilling.push(story.$$fulfilling);
+        } else {
+          filteredAppIds.push(story.app.id);
+        }
+      }
+
+      if (filteredAppIds.length === 0) {
+        // Still wait for these whole fulfilling.
+        yield Promise.all(fulfilling);
+        return;
+      }
+
+      var [{
+        i18nInfo
+      }] = yield Promise.all([InstalledMicroAppApi_getI18NData({
+        appIds: filteredAppIds.join(",")
+      }), // Still wait for these whole fulfilling.
+      ...fulfilling]);
+
+      var _loop = function (appId, i18n) {
+        var storyboard = _this7.bootstrapData.storyboards.find(story => story.app.id === appId);
+
+        Object.assign(storyboard, {
+          meta: _objectSpread(_objectSpread({}, storyboard.meta), {}, {
+            i18n: i18n
+          }),
+          $$i18nFulfilled: true
+        });
+
+        _this7.postProcessStoryboardI18n(storyboard);
+      };
+
+      for (var {
+        appId,
+        i18n
+      } of i18nInfo) {
+        _loop(appId, i18n);
+      }
+    })();
+  }
+
   _dev_only_updateStoryboard(appId, storyboardPatch) {
     var storyboard = this.bootstrapData.storyboards.find(item => item.app.id === appId);
     Object.assign(storyboard, _objectSpread(_objectSpread({}, storyboardPatch), {}, {
-      $$fulfilling: Promise.resolve(),
+      $$fulfilling: null,
       $$fulfilled: true,
       $$registerCustomTemplateProcessed: false,
       $$depsProcessed: false
@@ -9058,7 +9231,8 @@ class Kernel {
 
   _dev_only_updateTemplatePreviewSettings(appId, templateId, settings) {
     var {
-      routes
+      routes,
+      app
     } = this.bootstrapData.storyboards.find(item => item.app.id === appId);
     var previewPath = "${APP.homepage}/_dev_only_/template-preview/".concat(templateId);
     var previewRouteIndex = routes.findIndex(route => route.path === previewPath);
@@ -9068,7 +9242,8 @@ class Kernel {
         brick: templateId
       }, pick(settings, "properties", "events", "lifeCycle", "context"))],
       menu: false,
-      exact: true
+      exact: true,
+      hybrid: app.legacy === "iframe"
     };
 
     if (previewRouteIndex === -1) {
@@ -9082,7 +9257,8 @@ class Kernel {
     var _snippetData$bricks;
 
     var {
-      routes
+      routes,
+      app
     } = this.bootstrapData.storyboards.find(item => item.app.id === appId);
     var previewPath = "${APP.homepage}/_dev_only_/snippet-preview/".concat(snippetData.snippetId);
     var previewRouteIndex = routes.findIndex(route => route.path === previewPath);
@@ -9092,7 +9268,8 @@ class Kernel {
         brick: "span"
       }],
       menu: false,
-      exact: true
+      exact: true,
+      hybrid: app.legacy === "iframe"
     };
 
     if (previewRouteIndex === -1) {
@@ -9171,9 +9348,9 @@ class Kernel {
 
   gracefullyLoadDeps(fn) {
     var _arguments = arguments,
-        _this7 = this;
+        _this8 = this;
 
-    return _asyncToGenerator$4(function* () {
+    return _asyncToGenerator$3(function* () {
       for (var _len = _arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
         args[_key - 1] = _arguments[_key];
       }
@@ -9185,7 +9362,7 @@ class Kernel {
           // The scripts maybe stale when a user stays in page while upgrades been applied.
           // So we force reloading again automatically.
           // NOTE: reload only once to avoid a infinite loop.
-          yield _this7.reloadMicroApps();
+          yield _this8.reloadMicroApps();
           yield fn(...args);
         } else {
           throw e;
@@ -9234,15 +9411,15 @@ class Kernel {
   }
 
   loadDynamicBricksInBrickConf(brickConf) {
-    var _this8 = this;
+    var _this9 = this;
 
-    return _asyncToGenerator$4(function* () {
+    return _asyncToGenerator$3(function* () {
       // Notice: `brickConf` contains runtime data,
       // which may contains recursive ref,
       // which could cause stack overflow while traversing.
       var bricks = scanBricksInBrickConf(brickConf);
       var processors = scanProcessorsInAny(brickConf);
-      yield _this8.loadDynamicBricks(bricks, processors);
+      yield _this9.loadDynamicBricks(bricks, processors);
     })();
   }
 
@@ -9314,7 +9491,7 @@ class Kernel {
   }
 
   loadUsers() {
-    return _asyncToGenerator$4(function* () {
+    return _asyncToGenerator$3(function* () {
       var allUserMap = new Map();
 
       try {
@@ -9351,15 +9528,15 @@ class Kernel {
   }
 
   getMicroAppApiOrchestrationMapAsync() {
-    var _this9 = this;
+    var _this10 = this;
 
-    return _asyncToGenerator$4(function* () {
-      return yield _this9.allMicroAppApiOrchestrationPromise;
+    return _asyncToGenerator$3(function* () {
+      return yield _this10.allMicroAppApiOrchestrationPromise;
     })();
   }
 
   loadMicroAppApiOrchestration(usedCustomApis) {
-    return _asyncToGenerator$4(function* () {
+    return _asyncToGenerator$3(function* () {
       var allMicroAppApiOrchestrationMap = new Map();
       var legacyCustomApis = usedCustomApis.filter(item => !item.name.includes(":"));
 
@@ -9401,7 +9578,7 @@ class Kernel {
   }
 
   loadMagicBrickConfig() {
-    return _asyncToGenerator$4(function* () {
+    return _asyncToGenerator$3(function* () {
       var allMagicBrickConfigMap = new Map();
 
       try {
@@ -9431,7 +9608,7 @@ class Kernel {
   }
 
   loadRelatedApps() {
-    return _asyncToGenerator$4(function* () {
+    return _asyncToGenerator$3(function* () {
       var relatedApps = [];
 
       try {
@@ -9446,14 +9623,14 @@ class Kernel {
   }
 
   getRelatedAppsAsync(appId) {
-    var _this10 = this;
+    var _this11 = this;
 
-    return _asyncToGenerator$4(function* () {
+    return _asyncToGenerator$3(function* () {
       if (!appId) {
         return [];
       }
 
-      var allRelatedApps = yield _this10.allRelatedAppsPromise;
+      var allRelatedApps = yield _this11.allRelatedAppsPromise;
       var thisApp = allRelatedApps.find(item => item.microAppId === appId);
 
       if (!thisApp) {
@@ -9465,38 +9642,38 @@ class Kernel {
   }
 
   updateWorkspaceStack() {
-    var _this11 = this;
+    var _this12 = this;
 
-    return _asyncToGenerator$4(function* () {
-      if (_this11.currentApp && _this11.currentApp.id) {
+    return _asyncToGenerator$3(function* () {
+      if (_this12.currentApp && _this12.currentApp.id) {
         var workspace = {
-          appId: _this11.currentApp.id,
-          appName: _this11.currentApp.name,
-          appLocaleName: _this11.currentApp.localeName,
-          url: _this11.currentUrl
+          appId: _this12.currentApp.id,
+          appName: _this12.currentApp.name,
+          appLocaleName: _this12.currentApp.localeName,
+          url: _this12.currentUrl
         };
 
-        if (_this11.workspaceStack.length > 0) {
-          var previousWorkspace = _this11.workspaceStack[_this11.workspaceStack.length - 1];
+        if (_this12.workspaceStack.length > 0) {
+          var previousWorkspace = _this12.workspaceStack[_this12.workspaceStack.length - 1];
 
-          var _relatedApps = yield _this11.getRelatedAppsAsync(previousWorkspace.appId);
+          var _relatedApps = yield _this12.getRelatedAppsAsync(previousWorkspace.appId);
 
-          if (_relatedApps.some(item => item.microAppId === _this11.currentApp.id)) {
+          if (_relatedApps.some(item => item.microAppId === _this12.currentApp.id)) {
             Object.assign(previousWorkspace, workspace);
             return;
           }
         }
 
-        var relatedApps = yield _this11.getRelatedAppsAsync(_this11.currentApp.id);
+        var relatedApps = yield _this12.getRelatedAppsAsync(_this12.currentApp.id);
 
         if (relatedApps.length > 0) {
-          _this11.workspaceStack.push(workspace);
+          _this12.workspaceStack.push(workspace);
 
           return;
         }
       }
 
-      _this11.workspaceStack = [];
+      _this12.workspaceStack = [];
     })();
   }
 
@@ -9543,22 +9720,22 @@ class Kernel {
   }
 
   getProviderBrick(provider) {
-    var _this12 = this;
+    var _this13 = this;
 
-    return _asyncToGenerator$4(function* () {
+    return _asyncToGenerator$3(function* () {
       if (isCustomApiProvider(provider)) {
         provider = CUSTOM_API_PROVIDER;
       }
 
-      if (_this12.providerRepository.has(provider)) {
-        return _this12.providerRepository.get(provider);
+      if (_this13.providerRepository.has(provider)) {
+        return _this13.providerRepository.get(provider);
       }
 
       if (provider === CUSTOM_API_PROVIDER && !customElements.get(provider)) {
         registerCustomApi();
       }
 
-      yield _this12.loadDynamicBricks([provider]);
+      yield _this13.loadDynamicBricks([provider]);
 
       if (!customElements.get(provider)) {
         throw new Error("Provider not defined: \"".concat(provider, "\"."));
@@ -9566,7 +9743,7 @@ class Kernel {
 
       var brick = document.createElement(provider);
 
-      _this12.providerRepository.set(provider, brick);
+      _this13.providerRepository.set(provider, brick);
 
       return brick;
     })();
@@ -9580,7 +9757,7 @@ function loadScriptOfDll(_x5) {
 }
 
 function _loadScriptOfDll() {
-  _loadScriptOfDll = _asyncToGenerator$4(function* (dlls) {
+  _loadScriptOfDll = _asyncToGenerator$3(function* (dlls) {
     if (dlls.some(dll => dll.startsWith("dll-of-editor-bricks-helper."))) {
       var dllPath = window.DLL_PATH || {};
       yield loadScript(dllPath["react-dnd"], window.CORE_ROOT);
@@ -9738,44 +9915,6 @@ function isRouteConfOfRoutes(conf) {
   return conf.type === "routes";
 }
 
-var misc;
-function getRuntimeMisc() {
-  if (!misc) {
-    misc = {
-      isInIframe: false,
-      isInIframeOfSameSite: false,
-      isInIframeOfNext: false,
-      isInIframeOfVisualBuilder: false,
-      isInIframeOfLegacyConsole: false
-    };
-
-    if (window !== window.parent) {
-      misc.isInIframe = true;
-
-      try {
-        // Handle:
-        // - Previewing in visual builder by iframe.
-        // - Nesting next in next.
-        // - Nesting console in next.
-        if (window.origin === window.parent.origin) {
-          misc.isInIframeOfSameSite = true;
-          var selfIsNext = getBasePath() === "/next/";
-          var parentPathname = window.parent.location.pathname;
-          var parentIsNext = parentPathname.startsWith("/next/");
-          misc.isInIframeOfNext = (Number(selfIsNext) ^ Number(parentIsNext)) === 0;
-          misc.isInIframeOfVisualBuilder = parentPathname.startsWith("".concat(parentIsNext ? "/next" : "", "/visual-builder/"));
-          misc.isInIframeOfLegacyConsole = selfIsNext && !parentIsNext;
-        }
-      } catch (e) {// do nothing
-      }
-    }
-
-    Object.freeze(misc);
-  }
-
-  return misc;
-}
-
 function getSubStoryboardByRoute(storyboard, matcher) {
   function getSubRoutes(routes) {
     return matcher(routes).map(getSubRoute);
@@ -10366,7 +10505,7 @@ class LocationContext {
   mountRoutes(routes, slotId, mountRoutesResult) {
     var _this = this;
 
-    return _asyncToGenerator$4(function* () {
+    return _asyncToGenerator$3(function* () {
       var matched = _this.matchRoutes(routes, _this.kernel.nextApp);
 
       var redirect;
@@ -10451,7 +10590,7 @@ class LocationContext {
   mountMenu(menuConf, match, mountRoutesResult) {
     var _this2 = this;
 
-    return _asyncToGenerator$4(function* () {
+    return _asyncToGenerator$3(function* () {
       if (menuConf === false) {
         // `route.menu` 设置为 `false` 表示不显示顶栏和侧栏。
         mountRoutesResult.flags.barsHidden = true;
@@ -10541,7 +10680,7 @@ class LocationContext {
   mountProviders(providers, match, slotId, mountRoutesResult) {
     var _this3 = this;
 
-    return _asyncToGenerator$4(function* () {
+    return _asyncToGenerator$3(function* () {
       if (Array.isArray(providers)) {
         for (var providerConf of providers) {
           yield _this3.mountBrick(_objectSpread(_objectSpread({}, typeof providerConf === "string" ? {
@@ -10558,7 +10697,7 @@ class LocationContext {
   mountBricks(bricks, match, slotId, mountRoutesResult, tplStack) {
     var _this4 = this;
 
-    return _asyncToGenerator$4(function* () {
+    return _asyncToGenerator$3(function* () {
       for (var brickConf of bricks) {
         try {
           yield _this4.mountBrick(brickConf, match, slotId, mountRoutesResult, tplStack === null || tplStack === void 0 ? void 0 : tplStack.slice());
@@ -10592,7 +10731,7 @@ class LocationContext {
   checkResolvableIf(ifContainer, context) {
     var _this5 = this;
 
-    return _asyncToGenerator$4(function* () {
+    return _asyncToGenerator$3(function* () {
       if (isObject(ifContainer.if)) {
         var ifChecked = computeRealValue(ifContainer.if, context, true);
         var ifConf = {};
@@ -10605,7 +10744,7 @@ class LocationContext {
   }
 
   preCheckPermissions(container, context) {
-    return _asyncToGenerator$4(function* () {
+    return _asyncToGenerator$3(function* () {
       if (isLoggedIn() && !getAuth().isAdmin && container.permissionsPreCheck && Array.isArray(container.permissionsPreCheck)) {
         var usedActions = computeRealValue(container.permissionsPreCheck, context, true);
         yield validatePermissions(usedActions);
@@ -10617,7 +10756,7 @@ class LocationContext {
     var _arguments = arguments,
         _this6 = this;
 
-    return _asyncToGenerator$4(function* () {
+    return _asyncToGenerator$3(function* () {
       var _this6$kernel$nextApp, _brickConf$lifeCycle, _brick$lifeCycle;
 
       var tplStack = _arguments.length > 4 && _arguments[4] !== undefined ? _arguments[4] : [];
@@ -10721,7 +10860,7 @@ class LocationContext {
       if (expandedBrickConf.exports) {
         for (var [prop, ctxName] of Object.entries(expandedBrickConf.exports)) {
           if (typeof ctxName === "string" && ctxName.startsWith("CTX.")) {
-            _this6.storyboardContextWrapper.set(ctxName.substr(4), {
+            _this6.storyboardContextWrapper.set(ctxName.substring(4), {
               type: "brick-property",
               brick,
               prop
@@ -10955,7 +11094,7 @@ class LocationContext {
   preFetchMenu(data) {
     var _this7 = this;
 
-    return _asyncToGenerator$4(function* () {
+    return _asyncToGenerator$3(function* () {
       var useMenus = scanAppGetMenuInAny(data);
 
       if (useMenus.length) {
@@ -11054,7 +11193,7 @@ function makeProviderRefreshable(providerBrick) {
       // },
       $refresh: {
         value: function () {
-          var _ref = _asyncToGenerator$4(function* () {
+          var _ref = _asyncToGenerator$3(function* () {
             var {
               ignoreErrors,
               throwErrors,
@@ -11069,7 +11208,7 @@ function makeProviderRefreshable(providerBrick) {
 
             try {
               yield Promise.all(this.$$dependents.map( /*#__PURE__*/function () {
-                var _ref3 = _asyncToGenerator$4(function* (_ref2) {
+                var _ref3 = _asyncToGenerator$3(function* (_ref2) {
                   var {
                     brick,
                     method,
@@ -11105,7 +11244,7 @@ function makeProviderRefreshable(providerBrick) {
                   }
 
                   function _fetchData() {
-                    _fetchData = _asyncToGenerator$4(function* () {
+                    _fetchData = _asyncToGenerator$3(function* () {
                       var value = yield promise;
                       data = field === null || field === undefined ? value : get(value, field); // The fetched data and its inner objects should never be *injected* again.
 
@@ -11201,7 +11340,7 @@ class Resolver {
   resolve(brickConf, brick, context) {
     var _this = this;
 
-    return _asyncToGenerator$4(function* () {
+    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 => {
@@ -11222,7 +11361,7 @@ class Resolver {
   resolveOne(type, resolveConf, conf, brick, context) {
     var _this2 = this;
 
-    return _asyncToGenerator$4(function* () {
+    return _asyncToGenerator$3(function* () {
       var brickConf = conf;
       var propsReference = conf;
       var actualResolveConf;
@@ -11300,20 +11439,34 @@ class Resolver {
         }
       }
 
-      var cacheKey = JSON.stringify({
-        provider,
-        useProvider,
-        method,
-        args
-      });
+      var actualArgs = args ? ref ? args // `args` are already computed for `defineResolves`
+      : context ? computeRealValue(args, context, true) : args : providerBrick.args || [];
+      var cacheKey;
+
+      try {
+        // `actualArgs` may contain circular references, which makes
+        // JSON stringify failed, thus we fallback to original args.
+        cacheKey = JSON.stringify({
+          provider,
+          useProvider,
+          method,
+          actualArgs
+        });
+      } catch (e) {
+        cacheKey = JSON.stringify({
+          provider,
+          useProvider,
+          method,
+          args
+        });
+      }
+
       var promise;
 
       if (_this2.cache.has(cacheKey)) {
         promise = _this2.cache.get(cacheKey);
       } else {
-        var actualArgs = args ? ref ? args // `args` are already computed for `defineResolves`
-        : context ? computeRealValue(args, context, true) : args : providerBrick.args || [];
-        promise = _asyncToGenerator$4(function* () {
+        promise = _asyncToGenerator$3(function* () {
           if (useProvider) {
             actualArgs = yield getArgsOfCustomApi(useProvider, actualArgs);
           }
@@ -11346,7 +11499,7 @@ class Resolver {
       }
 
       function _fetchData() {
-        _fetchData = _asyncToGenerator$4(function* () {
+        _fetchData = _asyncToGenerator$3(function* () {
           var value = yield promise;
           data = field === null || field === undefined ? value : get(value, field); // The fetched data and its inner objects should never be *injected* again.
 
@@ -11387,7 +11540,7 @@ class Resolver {
 
     var _loop = function (providerBrick, interval) {
       var request = /*#__PURE__*/function () {
-        var _ref2 = _asyncToGenerator$4(function* () {
+        var _ref2 = _asyncToGenerator$3(function* () {
           yield providerBrick.$refresh({
             ignoreErrors: interval.ignoreErrors,
             throwErrors: true,
@@ -11504,7 +11657,7 @@ function preFetchStandaloneInstalledApps(_x) {
 }
 
 function _preFetchStandaloneInstalledApps() {
-  _preFetchStandaloneInstalledApps = _asyncToGenerator$4(function* (storyboard) {
+  _preFetchStandaloneInstalledApps = _asyncToGenerator$3(function* (storyboard) {
     var saIds = scanInstalledAppsInStoryboard(storyboard);
     yield fetchStandaloneApps(saIds);
   });
@@ -11516,7 +11669,7 @@ function fetchStandaloneApps(_x2) {
 }
 
 function _fetchStandaloneApps() {
-  _fetchStandaloneApps = _asyncToGenerator$4(function* (saIds) {
+  _fetchStandaloneApps = _asyncToGenerator$3(function* (saIds) {
     // ignore apps which are already searched
     var searchIds = difference(saIds, Array.from(appIdSet));
 
@@ -11671,14 +11824,14 @@ class Router {
   bootstrap() {
     var _this = this;
 
-    return _asyncToGenerator$4(function* () {
+    return _asyncToGenerator$3(function* () {
       var history = getHistory();
       _this.prevLocation = history.location;
 
       _this.locationChangeNotify("", history.location.pathname);
 
       history.listen( /*#__PURE__*/function () {
-        var _ref = _asyncToGenerator$4(function* (location, action) {
+        var _ref = _asyncToGenerator$3(function* (location, action) {
           var _this$prevLocation$st, _location$state;
 
           var ignoreRendering = false;
@@ -11740,7 +11893,7 @@ class Router {
   queuedRender(location) {
     var _this2 = this;
 
-    return _asyncToGenerator$4(function* () {
+    return _asyncToGenerator$3(function* () {
       _this2.rendering = true;
 
       try {
@@ -11760,7 +11913,7 @@ class Router {
   render(location) {
     var _this3 = this;
 
-    return _asyncToGenerator$4(function* () {
+    return _asyncToGenerator$3(function* () {
       var _apiAnalyzer$getInsta, _getLocalAppsTheme;
 
       _this3.state = "initial";
@@ -12521,7 +12674,7 @@ var SingleBrickAsComponent = /*#__PURE__*/React.memo(function SingleBrickAsCompo
 
     return true;
   }, [useBrick, data]);
-  var runtimeBrick = React.useMemo( /*#__PURE__*/_asyncToGenerator$4(function* () {
+  var runtimeBrick = React.useMemo( /*#__PURE__*/_asyncToGenerator$3(function* () {
     if (!isBrickAvailable) {
       return null;
     } // If the router state is initial, ignore rendering the sub-brick.
@@ -12561,7 +12714,7 @@ var SingleBrickAsComponent = /*#__PURE__*/React.memo(function SingleBrickAsCompo
     return brick;
   }), [useBrick, data, isBrickAvailable]);
   var innerRefCallback = React.useCallback( /*#__PURE__*/function () {
-    var _ref4 = _asyncToGenerator$4(function* (element) {
+    var _ref4 = _asyncToGenerator$3(function* (element) {
       immediatelyRefCallback === null || immediatelyRefCallback === void 0 ? void 0 : immediatelyRefCallback(element);
 
       if (element) {
@@ -12723,7 +12876,7 @@ var ForwardRefSingleBrickAsComponent = /*#__PURE__*/React.memo( /*#__PURE__*/for
   useImperativeHandle(ref, () => {
     return brickRef.current;
   });
-  var runtimeBrick = React.useMemo( /*#__PURE__*/_asyncToGenerator$4(function* () {
+  var runtimeBrick = React.useMemo( /*#__PURE__*/_asyncToGenerator$3(function* () {
     if (!isBrickAvailable) {
       return null;
     } // If the router state is initial, ignore rendering the sub-brick.
@@ -12763,7 +12916,7 @@ var ForwardRefSingleBrickAsComponent = /*#__PURE__*/React.memo( /*#__PURE__*/for
     return brick;
   }), [useBrick, data, isBrickAvailable]);
   var innerRefCallback = React.useCallback( /*#__PURE__*/function () {
-    var _ref10 = _asyncToGenerator$4(function* (element) {
+    var _ref10 = _asyncToGenerator$3(function* (element) {
       brickRef.current = element;
 
       if (element) {
@@ -14421,7 +14574,7 @@ function fetchProviderArgs(_x, _x2) {
 }
 
 function _fetchProviderArgs() {
-  _fetchProviderArgs = _asyncToGenerator$4(function* (provider, args) {
+  _fetchProviderArgs = _asyncToGenerator$3(function* (provider, args) {
     for (var _len = arguments.length, originalArgs = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
       originalArgs[_key - 2] = arguments[_key];
     }
@@ -14445,7 +14598,7 @@ function fetch(_x) {
 }
 
 function _fetch() {
-  _fetch = _asyncToGenerator$4(function* (provider) {
+  _fetch = _asyncToGenerator$3(function* (provider) {
     for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
       args[_key - 1] = arguments[_key];
     }
@@ -14459,7 +14612,7 @@ function _fetch() {
     if (cache.has(cacheKey)) {
       promise = cache.get(cacheKey);
     } else {
-      promise = _asyncToGenerator$4(function* () {
+      promise = _asyncToGenerator$3(function* () {
         if (!isCustomApiProvider(provider)) {
           var providerBrick = yield _internalApiGetProviderBrick(provider);
           var providerTagName = providerBrick.tagName.toLowerCase();
@@ -14506,7 +14659,7 @@ function useProvider() {
   var data = useRef(defaults.data);
   var forceUpdate = useReducer(() => ({}), [])[1];
   var doFetch = useCallback( /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator$4(function* (provider) {
+    var _ref = _asyncToGenerator$3(function* (provider) {
       try {
         error.current = undefined;
         if (!suspense) setLoading(true);
@@ -14532,7 +14685,7 @@ function useProvider() {
     };
   }(), [provider, customOptions, dependencies, requestInit, suspense, transform, defaults.data, onError]);
   var makeFetch = useCallback( /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator$4(function* (providerOrBody, args) {
+    var _ref2 = _asyncToGenerator$3(function* (providerOrBody, args) {
       var providerStr = provider;
       var providerArgs = [];
 
@@ -14549,7 +14702,7 @@ function useProvider() {
       var actualArgs = yield fetchProviderArgs(providerStr, providerArgs, requestInit.options);
 
       if (suspense) {
-        return _asyncToGenerator$4(function* () {
+        return _asyncToGenerator$3(function* () {
           suspender.current = doFetch(providerStr, ...actualArgs).then(newData => {
             suspenseStatus.current = "success";
             return newData;