@next-core/brick-kit 2.129.3 → 2.131.1

package/dist/index.bundle.js

@@ -1,14 +1,14 @@
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('history'), require('@babel/runtime/helpers/objectSpread2'), require('@babel/runtime/helpers/objectWithoutProperties'), require('@babel/runtime/helpers/asyncToGenerator'), require('@babel/runtime/helpers/defineProperty'), require('react'), require('@next-core/brick-utils'), require('lodash'), require('@next-core/brick-http'), require('moment'), require('@next-core/pipes'), require('i18next'), require('@next-core/easyops-analytics'), require('antd'), require('@ant-design/icons'), require('js-yaml'), require('react-i18next'), require('@babel/runtime/helpers/esm/extends'), require('@next-core/illustrations'), require('@babel/runtime/helpers/decorate')) :
   typeof define === 'function' && define.amd ? define(['exports', 'history', '@babel/runtime/helpers/objectSpread2', '@babel/runtime/helpers/objectWithoutProperties', '@babel/runtime/helpers/asyncToGenerator', '@babel/runtime/helpers/defineProperty', 'react', '@next-core/brick-utils', 'lodash', '@next-core/brick-http', 'moment', '@next-core/pipes', 'i18next', '@next-core/easyops-analytics', 'antd', '@ant-design/icons', 'js-yaml', 'react-i18next', '@babel/runtime/helpers/esm/extends', '@next-core/illustrations', '@babel/runtime/helpers/decorate'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.BrickKit = {}, global.history$1, global._objectSpread, global._objectWithoutProperties, global._asyncToGenerator$4, global._defineProperty$1, global.React, global.brickUtils, global._, global.brickHttp, global.moment, global.pipes, global.i18next, global.easyopsAnalytics, global.antd, global.icons, global.yaml, global.reactI18next, global._extends, global.illustrations, global._decorate));
-})(this, (function (exports, history$1, _objectSpread, _objectWithoutProperties, _asyncToGenerator$4, _defineProperty$1, React, brickUtils, _, brickHttp, moment, pipes, i18next, easyopsAnalytics, antd, icons, yaml, reactI18next, _extends, illustrations, _decorate) { 'use strict';
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.BrickKit = {}, global.history$1, global._objectSpread, global._objectWithoutProperties, global._asyncToGenerator$3, global._defineProperty$1, global.React, global.brickUtils, global._, global.brickHttp, global.moment, global.pipes, global.i18next, global.easyopsAnalytics, global.antd, global.icons, global.yaml, global.reactI18next, global._extends, global.illustrations, global._decorate));
+})(this, (function (exports, history$1, _objectSpread, _objectWithoutProperties, _asyncToGenerator$3, _defineProperty$1, React, brickUtils, _, brickHttp, moment, pipes, i18next, easyopsAnalytics, antd, icons, yaml, reactI18next, _extends, illustrations, _decorate) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
   var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
   var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
-  var _asyncToGenerator__default = /*#__PURE__*/_interopDefaultLegacy(_asyncToGenerator$4);
+  var _asyncToGenerator__default = /*#__PURE__*/_interopDefaultLegacy(_asyncToGenerator$3);
   var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty$1);
   var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
   var ___default = /*#__PURE__*/_interopDefaultLegacy(_);
@@ -444,7 +444,7 @@
     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;
@@ -460,7 +460,7 @@
     }
   }
 
-  function _asyncToGenerator$3(fn) {
+  function _asyncToGenerator$2(fn) {
     return function () {
       var self = this,
           args = arguments;
@@ -468,11 +468,11 @@
         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);
@@ -535,7 +535,7 @@
 
 
   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 brickHttp.http.get("api/gateway/cmdb.instance.GetDetail/object/".concat(objectId, "/instance/").concat(instanceId), _objectSpread2(_objectSpread2({}, options), {}, {
@@ -555,7 +555,7 @@
 
 
   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 brickHttp.http.post("api/gateway/cmdb.instance.PostSearch/object/".concat(objectId, "/instance/_search"), data, options)).data
@@ -1332,41 +1332,26 @@
     }
   }
 
-  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);
-    }
-  }
+  /**
+   * @description 获取微应用的i18n数据
+   * @endpoint GET /api/v1/micro-app/i18n
+   */
 
-  function _asyncToGenerator$2(fn) {
-    return function () {
-      var self = this,
-          args = arguments;
-      return new Promise(function (resolve, reject) {
-        var gen = fn.apply(self, args);
 
-        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__default["default"](function* (params, options) {
+      return (
+        /**! @contract easyops.api.micro_app.installed_micro_app.GetI18NData@1.0.0 */
+        (yield brickHttp.http.get("api/gateway/micro_app.installed_micro_app.GetI18NData/api/v1/micro-app/i18n", _objectSpread__default["default"](_objectSpread__default["default"]({}, 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
@@ -1374,9 +1359,9 @@
 
 
   var ObjectMicroAppApi_getObjectMicroAppList = /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator$2(function* (options) {
+    var _ref = _asyncToGenerator__default["default"](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 brickHttp.http.get("api/gateway/micro_app.object_micro_app.GetObjectMicroAppList/api/micro_app/v1/object_micro_app", options)).data
       );
     });
@@ -1392,9 +1377,9 @@
 
 
   var PermissionApi_validatePermissions = /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator$2(function* (data, options) {
+    var _ref = _asyncToGenerator__default["default"](function* (data, options) {
       return (
-        /**! @contract easyops.api.micro_app.permission.ValidatePermissions */
+        /**! @contract easyops.api.micro_app.permission.ValidatePermissions@1.0.0 */
         (yield brickHttp.http.post("api/gateway/micro_app.permission.ValidatePermissions/api/micro_app/v1/permission/validate", data, options)).data
       );
     });
@@ -1579,6 +1564,44 @@
     });
   }
 
+  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) {
@@ -1631,6 +1654,9 @@
           getCssPropertyValue: collectCoverage ? () => "" : getCssPropertyValue
         };
 
+      case "RUNTIME_MISC":
+        return collectCoverage ? fakeRuntimeMisc() : getRuntimeMisc();
+
       case "console":
         return isStoryboardFunction ? getReadOnlyProxy(console) : undefined;
 
@@ -1666,6 +1692,16 @@
     return true;
   }
 
+  function fakeRuntimeMisc() {
+    return {
+      isInIframe: false,
+      isInIframeOfSameSite: false,
+      isInIframeOfNext: false,
+      isInIframeOfVisualBuilder: false,
+      isInIframeOfLegacyConsole: false
+    };
+  }
+
   /** @internal */
 
   /** @internal */
@@ -2004,7 +2040,7 @@
     }
 
     updateValue(name, value, method) {
-      var _item$eventTarget;
+      var _item$eventTarget2;
 
       if (!this.data.has(name)) {
         if (this.tplContextId) {
@@ -2028,6 +2064,22 @@
         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 {
@@ -2040,7 +2092,7 @@
         }
       }
 
-      (_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
       }));
     }
@@ -2121,30 +2173,65 @@
         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__default["default"]({
-              transform: "value",
-              transformMapArray: false
-            }, contextConf.resolve), valueConf, null, mergedContext);
-            value = valueConf.value;
+            refresh = /*#__PURE__*/function () {
+              var _ref = _asyncToGenerator__default["default"](function* () {
+                var valueConf = {};
+                yield _internalApiGetResolver().resolveOne("reference", _objectSpread__default["default"]({
+                  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 (!brickUtils.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 ? brickUtils.trackUsedState : brickUtils.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);
@@ -2175,12 +2262,13 @@
     }
   }
 
-  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) {
@@ -2977,7 +3065,8 @@
   }
 
   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();
@@ -3161,10 +3250,13 @@
         items,
         app
       } = _yield$fetchMenuById,
-          restMenuData = _objectWithoutProperties__default["default"](_yield$fetchMenuById, _excluded2$2);
+          restMenuData = _objectWithoutProperties__default["default"](_yield$fetchMenuById, _excluded3);
 
-      var menuData = _objectSpread__default["default"](_objectSpread__default["default"]({}, yield computeRealValueWithOverrideApp(restMenuData, app[0].appId, context, kernel)), {}, {
-        items: yield computeMenuItemsWithOverrideApp(items, context, kernel)
+      var appIds = collectOverrideApps(items, app[0].appId, context.app.id);
+      yield kernel.fulfilStoryboardI18n(appIds);
+
+      var menuData = _objectSpread__default["default"](_objectSpread__default["default"]({}, computeRealValueWithOverrideApp(restMenuData, app[0].appId, context, kernel)), {}, {
+        items: computeMenuItemsWithOverrideApp(items, context, kernel)
       });
 
       return {
@@ -3196,26 +3288,48 @@
     return _processMenu.apply(this, arguments);
   }
 
-  function computeMenuItemsWithOverrideApp(items, context, kernel) {
-    return Promise.all(items.map( /*#__PURE__*/function () {
-      var _ref2 = _asyncToGenerator__default["default"](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__default["default"](_ref, _excluded$6);
 
-        return _objectSpread__default["default"](_objectSpread__default["default"]({}, 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__default["default"](_ref2, _excluded2$2);
+
+      return _objectSpread__default["default"](_objectSpread__default["default"]({}, computeRealValueWithOverrideApp(rest, rest[symbolAppId], context, kernel)), {}, {
+        children: children && computeMenuItemsWithOverrideApp(children, context, kernel)
+      });
+    });
+  }
+
+  function processMenuTitle(_x16) {
     return _processMenuTitle.apply(this, arguments);
   }
 
@@ -3310,30 +3424,22 @@
     return false;
   }
 
-  function computeRealValueWithOverrideApp(_x18, _x19, _x20, _x21) {
-    return _computeRealValueWithOverrideApp.apply(this, arguments);
-  }
-
-  function _computeRealValueWithOverrideApp() {
-    _computeRealValueWithOverrideApp = _asyncToGenerator__default["default"](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__default["default"](_objectSpread__default["default"]({}, context), {}, {
-            overrideApp: storyboard.app
-          });
-        }
+      if (storyboard) {
+        newContext = _objectSpread__default["default"](_objectSpread__default["default"]({}, 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();
@@ -6233,10 +6339,12 @@
 
         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);
@@ -6380,7 +6488,7 @@
     };
   }
 
-  function builtinStateListenerFactory(args, ifContainer, context) {
+  function builtinStateListenerFactory(method, args, ifContainer, context) {
     return function (event) {
       if (!looseCheckIf(ifContainer, _objectSpread__default["default"](_objectSpread__default["default"]({}, context), {}, {
         event
@@ -6390,7 +6498,7 @@
 
       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");
     };
   }
 
@@ -8987,7 +9095,8 @@
       return _asyncToGenerator__default["default"](function* () {
         if (window.STANDALONE_MICRO_APPS) {
           Object.assign(storyboard, {
-            $$fulfilled: true
+            $$fulfilled: true,
+            $$fulfilling: null
           });
 
           if (!window.NO_AUTH_GUARD) {
@@ -9020,7 +9129,8 @@
             routes,
             meta,
             app: _objectSpread__default["default"](_objectSpread__default["default"]({}, storyboard.app), app),
-            $$fulfilled: true
+            $$fulfilled: true,
+            $$fulfilling: null
           });
         }
 
@@ -9029,9 +9139,12 @@
     }
 
     postProcessStoryboard(storyboard) {
-      var _storyboard$meta;
-
       storyboard.app.$$routeAliasMap = brickUtils.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.
@@ -9044,10 +9157,70 @@
       }
     }
 
+    fulfilStoryboardI18n(appIds) {
+      var _this7 = this;
+
+      return _asyncToGenerator__default["default"](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__default["default"](_objectSpread__default["default"]({}, 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__default["default"](_objectSpread__default["default"]({}, storyboardPatch), {}, {
-        $$fulfilling: Promise.resolve(),
+        $$fulfilling: null,
         $$fulfilled: true,
         $$registerCustomTemplateProcessed: false,
         $$depsProcessed: false
@@ -9057,7 +9230,8 @@
 
     _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);
@@ -9067,7 +9241,8 @@
           brick: templateId
         }, _.pick(settings, "properties", "events", "lifeCycle", "context"))],
         menu: false,
-        exact: true
+        exact: true,
+        hybrid: app.legacy === "iframe"
       };
 
       if (previewRouteIndex === -1) {
@@ -9081,7 +9256,8 @@
       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);
@@ -9091,7 +9267,8 @@
           brick: "span"
         }],
         menu: false,
-        exact: true
+        exact: true,
+        hybrid: app.legacy === "iframe"
       };
 
       if (previewRouteIndex === -1) {
@@ -9170,7 +9347,7 @@
 
     gracefullyLoadDeps(fn) {
       var _arguments = arguments,
-          _this7 = this;
+          _this8 = this;
 
       return _asyncToGenerator__default["default"](function* () {
         for (var _len = _arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
@@ -9184,7 +9361,7 @@
             // 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;
@@ -9233,7 +9410,7 @@
     }
 
     loadDynamicBricksInBrickConf(brickConf) {
-      var _this8 = this;
+      var _this9 = this;
 
       return _asyncToGenerator__default["default"](function* () {
         // Notice: `brickConf` contains runtime data,
@@ -9241,7 +9418,7 @@
         // which could cause stack overflow while traversing.
         var bricks = brickUtils.scanBricksInBrickConf(brickConf);
         var processors = brickUtils.scanProcessorsInAny(brickConf);
-        yield _this8.loadDynamicBricks(bricks, processors);
+        yield _this9.loadDynamicBricks(bricks, processors);
       })();
     }
 
@@ -9350,10 +9527,10 @@
     }
 
     getMicroAppApiOrchestrationMapAsync() {
-      var _this9 = this;
+      var _this10 = this;
 
       return _asyncToGenerator__default["default"](function* () {
-        return yield _this9.allMicroAppApiOrchestrationPromise;
+        return yield _this10.allMicroAppApiOrchestrationPromise;
       })();
     }
 
@@ -9445,14 +9622,14 @@
     }
 
     getRelatedAppsAsync(appId) {
-      var _this10 = this;
+      var _this11 = this;
 
       return _asyncToGenerator__default["default"](function* () {
         if (!appId) {
           return [];
         }
 
-        var allRelatedApps = yield _this10.allRelatedAppsPromise;
+        var allRelatedApps = yield _this11.allRelatedAppsPromise;
         var thisApp = allRelatedApps.find(item => item.microAppId === appId);
 
         if (!thisApp) {
@@ -9464,38 +9641,38 @@
     }
 
     updateWorkspaceStack() {
-      var _this11 = this;
+      var _this12 = this;
 
       return _asyncToGenerator__default["default"](function* () {
-        if (_this11.currentApp && _this11.currentApp.id) {
+        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 = [];
       })();
     }
 
@@ -9542,22 +9719,22 @@
     }
 
     getProviderBrick(provider) {
-      var _this12 = this;
+      var _this13 = this;
 
       return _asyncToGenerator__default["default"](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, "\"."));
@@ -9565,7 +9742,7 @@
 
         var brick = document.createElement(provider);
 
-        _this12.providerRepository.set(provider, brick);
+        _this13.providerRepository.set(provider, brick);
 
         return brick;
       })();
@@ -9737,44 +9914,6 @@
     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);
@@ -10720,7 +10859,7 @@
         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
@@ -11299,19 +11438,33 @@
           }
         }
 
-        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__default["default"](function* () {
             if (useProvider) {
               actualArgs = yield getArgsOfCustomApi(useProvider, actualArgs);