@next-core/brick-kit 2.111.3 → 2.114.0

package/dist/index.esm.js

@@ -2187,6 +2187,56 @@ function getCustomTemplateContext(tplContextId) {
   return tplContextMap.get(tplContextId);
 }
 
+var MediaSize;
+
+(function (MediaSize) {
+  MediaSize["xLarge"] = "xLarge";
+  MediaSize["large"] = "large";
+  MediaSize["medium"] = "medium";
+  MediaSize["small"] = "small";
+  MediaSize["xSmall"] = "xSmall";
+})(MediaSize || (MediaSize = {}));
+
+var mediaSizeBreakpointMap = new Map([[MediaSize.xLarge, "1920px"], [MediaSize.large, "1600px"], [MediaSize.medium, "1280px"], [MediaSize.small, "1024px"], [MediaSize.xSmall, 0]]);
+var mediaEventTarget = new EventTarget$1();
+var sizeMatchesMap = {};
+var MEDIA = {};
+
+function handleMatchesChange(data, size) {
+  var changed = false;
+  sizeMatchesMap[size] = data.matches;
+
+  for (var [_size] of mediaSizeBreakpointMap) {
+    if (sizeMatchesMap[_size] && MEDIA.size !== _size) {
+      MEDIA.size = _size;
+      changed = true;
+      break;
+    }
+  }
+
+  if (changed) {
+    mediaEventTarget.dispatchEvent(new CustomEvent("change", {
+      detail: MEDIA
+    }));
+  }
+}
+
+mediaSizeBreakpointMap.forEach((breakpoint, size) => {
+  var mediaQueryList = window.matchMedia("(min-width: ".concat(breakpoint, ")"));
+  handleMatchesChange(mediaQueryList, size);
+
+  if (mediaQueryList.addEventListener) {
+    mediaQueryList.addEventListener("change", event => {
+      handleMatchesChange(event, size);
+    });
+  } else {
+    mediaQueryList.addListener(event => {
+      handleMatchesChange(event, size);
+    });
+  }
+});
+var getMedia = () => MEDIA;
+
 var symbolForRaw = Symbol.for("pre.evaluated.raw");
 var symbolForContext = Symbol.for("pre.evaluated.context");
 function isPreEvaluated(raw) {
@@ -2423,6 +2473,9 @@ function evaluate(raw) {
       case "SYS":
         return getReadOnlyProxy(sys);
 
+      case "MEDIA":
+        return getReadOnlyProxy(getMedia());
+
       case "__WIDGET_FN__":
         return widgetFunctions;
 
@@ -2664,6 +2717,7 @@ var symbolAppId = Symbol("appId");
 // Caching menu requests to avoid flicker.
 var menuCache = new Map();
 var menuTitleCache = new Map();
+var processMenuCache = new Map();
 function constructMenu(_x, _x2, _x3) {
   return _constructMenu.apply(this, arguments);
 }
@@ -2700,12 +2754,14 @@ function constructMenuByMenusList(_x4, _x5, _x6) {
 
 function _constructMenuByMenusList() {
   _constructMenuByMenusList = _asyncToGenerator$4(function* (menus, context, kernel) {
-    yield Promise.all(menus.map(menuId => processMenu(menuId, context, kernel)));
+    processMenuCache.clear();
+    var data = yield Promise.all(menus.map(menuId => processMenu(menuId, context, kernel)));
+    data.forEach((item, index) => processMenuCache.set(menus[index], item));
   });
   return _constructMenuByMenusList.apply(this, arguments);
 }
 
-var getMenu = menuId => menuCache.get(menuId);
+var getMenu = menuId => processMenuCache.get(menuId);
 function fetchMenuById(_x7, _x8) {
   return _fetchMenuById.apply(this, arguments);
 }
@@ -3115,6 +3171,11 @@ function _dev_only_getFakeKernel(overrides) {
     getProviderBrick: kernel.getProviderBrick.bind(kernel)
   }, overrides);
 }
+/* istanbul ignore next */
+
+function _dev_only_updateStoryboard(appId, storyboardPatch) {
+  kernel._dev_only_updateStoryboard(appId, storyboardPatch);
+}
 class Runtime {
   constructor() {
     _defineProperty$1(this, "registerBrickTemplate", registerBrickTemplate);
@@ -7798,9 +7859,9 @@ class Kernel {
   }
 
   doFulfilStoryboard(storyboard) {
-    return _asyncToGenerator$4(function* () {
-      var _storyboard$meta;
+    var _this5 = this;
 
+    return _asyncToGenerator$4(function* () {
       if (window.STANDALONE_MICRO_APPS) {
         Object.assign(storyboard, {
           $$fulfilled: true
@@ -7819,28 +7880,43 @@ class Kernel {
         });
       }
 
-      storyboard.app.$$routeAliasMap = scanRouteAliasInStoryboard(storyboard);
+      _this5.postProcessStoryboard(storyboard);
+    })();
+  }
 
-      if ((_storyboard$meta = storyboard.meta) !== null && _storyboard$meta !== void 0 && _storyboard$meta.i18n) {
-        // Prefix to avoid conflict between brick package's i18n namespace.
-        var i18nNamespace = getI18nNamespace("app", storyboard.app.id); // Support any language in `meta.i18n`.
+  postProcessStoryboard(storyboard) {
+    var _storyboard$meta;
 
-        Object.entries(storyboard.meta.i18n).forEach(_ref => {
-          var [lang, resources] = _ref;
-          i18next.addResourceBundle(lang, i18nNamespace, resources);
-        });
-      }
-    })();
+    storyboard.app.$$routeAliasMap = scanRouteAliasInStoryboard(storyboard);
+
+    if ((_storyboard$meta = storyboard.meta) !== null && _storyboard$meta !== void 0 && _storyboard$meta.i18n) {
+      // Prefix to avoid conflict between brick package's i18n namespace.
+      var i18nNamespace = getI18nNamespace("app", storyboard.app.id); // Support any language in `meta.i18n`.
+
+      Object.entries(storyboard.meta.i18n).forEach(_ref => {
+        var [lang, resources] = _ref;
+        i18next.addResourceBundle(lang, i18nNamespace, resources);
+      });
+    }
+  }
+
+  _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(),
+      $$fulfilled: true
+    }));
+    this.postProcessStoryboard(storyboard);
   }
 
   loadDepsOfStoryboard(storyboard) {
-    var _this5 = this;
+    var _this6 = this;
 
     return _asyncToGenerator$4(function* () {
       var {
         brickPackages,
         templatePackages
-      } = _this5.bootstrapData;
+      } = _this6.bootstrapData;
 
       if (storyboard.dependsAll) {
         var dllPath = window.DLL_PATH || {};
@@ -7906,7 +7982,7 @@ class Kernel {
   }
 
   loadDynamicBricksInBrickConf(brickConf) {
-    var _this6 = this;
+    var _this7 = this;
 
     return _asyncToGenerator$4(function* () {
       // Notice: `brickConf` contains runtime data,
@@ -7914,12 +7990,12 @@ class Kernel {
       // which could cause stack overflow while traversing.
       var bricks = scanBricksInBrickConf(brickConf);
       var processors = scanProcessorsInAny(brickConf);
-      yield _this6.loadDynamicBricks(bricks, processors);
+      yield _this7.loadDynamicBricks(bricks, processors);
     })();
   }
 
   loadDynamicBricks(bricks, processors) {
-    var _this7 = this;
+    var _this8 = this;
 
     return _asyncToGenerator$4(function* () {
       var filteredBricks = bricks.filter( // Only try to load undefined custom elements.
@@ -7931,7 +8007,7 @@ class Kernel {
       } = getDllAndDepsByResource({
         bricks: filteredBricks,
         processors
-      }, _this7.bootstrapData.brickPackages);
+      }, _this8.bootstrapData.brickPackages);
       yield loadScriptOfDll(dll);
       yield loadScriptOfBricksOrTemplates(deps);
       yield loadLazyBricks(filteredBricks);
@@ -7939,7 +8015,7 @@ class Kernel {
   }
 
   loadEditorBricks(editorBricks) {
-    var _this8 = this;
+    var _this9 = this;
 
     return _asyncToGenerator$4(function* () {
       var {
@@ -7948,7 +8024,7 @@ class Kernel {
       } = getDllAndDepsByResource({
         editorBricks: editorBricks.filter( // Only try to load undefined custom elements.
         item => !customElements.get(item))
-      }, _this8.bootstrapData.brickPackages);
+      }, _this9.bootstrapData.brickPackages);
       yield loadScriptOfDll(dll);
       yield loadScriptOfBricksOrTemplates(deps);
     })();
@@ -8052,10 +8128,10 @@ class Kernel {
   }
 
   getMicroAppApiOrchestrationMapAsync() {
-    var _this9 = this;
+    var _this10 = this;
 
     return _asyncToGenerator$4(function* () {
-      return yield _this9.allMicroAppApiOrchestrationPromise;
+      return yield _this10.allMicroAppApiOrchestrationPromise;
     })();
   }
 
@@ -8147,14 +8223,14 @@ class Kernel {
   }
 
   getRelatedAppsAsync(appId) {
-    var _this10 = this;
+    var _this11 = this;
 
     return _asyncToGenerator$4(function* () {
       if (!appId) {
         return [];
       }
 
-      var allRelatedApps = yield _this10.allRelatedAppsPromise;
+      var allRelatedApps = yield _this11.allRelatedAppsPromise;
       var thisApp = allRelatedApps.find(item => item.microAppId === appId);
 
       if (!thisApp) {
@@ -8166,38 +8242,38 @@ class Kernel {
   }
 
   updateWorkspaceStack() {
-    var _this11 = this;
+    var _this12 = this;
 
     return _asyncToGenerator$4(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 = [];
     })();
   }
 
@@ -8238,22 +8314,22 @@ class Kernel {
   }
 
   getProviderBrick(provider) {
-    var _this12 = this;
+    var _this13 = this;
 
     return _asyncToGenerator$4(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, "\"."));
@@ -8261,7 +8337,7 @@ class Kernel {
 
       var brick = document.createElement(provider);
 
-      _this12.providerRepository.set(provider, brick);
+      _this13.providerRepository.set(provider, brick);
 
       return brick;
     })();
@@ -8571,6 +8647,8 @@ class LocationContext {
 
     _defineProperty$1(this, "anchorUnloadHandlers", []);
 
+    _defineProperty$1(this, "mediaChangeHandlers", []);
+
     _defineProperty$1(this, "messageCloseHandlers", []);
 
     _defineProperty$1(this, "messageHandlers", []);
@@ -9085,6 +9163,7 @@ class LocationContext {
       onPageLeave,
       onAnchorLoad,
       onAnchorUnload,
+      onMediaChange,
       onMessage,
       onMessageClose
     } = lifeCycle !== null && lifeCycle !== void 0 ? lifeCycle : {};
@@ -9143,6 +9222,15 @@ class LocationContext {
       });
     }
 
+    if (onMediaChange) {
+      this.mediaChangeHandlers.push({
+        brick,
+        match,
+        tplContextId,
+        handler: onMediaChange
+      });
+    }
+
     if (onMessage) {
       this.messageHandlers.push({
         brick,
@@ -9198,6 +9286,12 @@ class LocationContext {
     }
   }
 
+  handleMediaChange(detail) {
+    this.dispatchLifeCycleEvent(new CustomEvent("media.change", {
+      detail: getReadOnlyProxy(detail)
+    }), this.mediaChangeHandlers);
+  }
+
   handleMessage() {
     this.messageDispatcher.create(this.messageHandlers, this.getCurrentContext());
   }
@@ -9709,6 +9803,8 @@ class Router {
 
     _defineProperty$1(this, "navConfig", void 0);
 
+    _defineProperty$1(this, "mediaEventTargetHandler", void 0);
+
     this.kernel = kernel;
     this.featureFlags = this.kernel.getFeatureFlags();
     var history = getHistory();
@@ -10016,7 +10112,12 @@ class Router {
         _this3.kernel.unsetBars({
           appChanged,
           legacy: actualLegacy
-        }); // There is a window to set theme and mode by `lifeCycle.onBeforePageLoad`.
+        });
+
+        if (_this3.mediaEventTargetHandler) {
+          mediaEventTarget.removeEventListener("change", _this3.mediaEventTargetHandler);
+          _this3.mediaEventTargetHandler = undefined;
+        } // There is a window to set theme and mode by `lifeCycle.onBeforePageLoad`.
 
 
         _this3.locationContext.handleBeforePageLoad();
@@ -10089,6 +10190,9 @@ class Router {
             _this3.locationContext.handleMessage();
           }
 
+          _this3.mediaEventTargetHandler = event => _this3.locationContext.handleMediaChange(event.detail);
+
+          mediaEventTarget.addEventListener("change", _this3.mediaEventTargetHandler);
           pageTracker === null || pageTracker === void 0 ? void 0 : pageTracker(locationContext.getCurrentMatch().path); // analytics page_view event
 
           userAnalytics.event("page_view", _objectSpread({
@@ -12837,7 +12941,8 @@ var developHelper = {
   getFakeKernel: _dev_only_getFakeKernel,
 
   /** @deprecated Keep it for backward-compatibility. */
-  checkoutTplContext: noop
+  checkoutTplContext: noop,
+  updateStoryboard: _dev_only_updateStoryboard
 };
 
 var _excluded$2 = ["type"];