@next-core/brick-kit 2.112.0 → 2.115.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);
 }
@@ -8591,6 +8647,8 @@ class LocationContext {
 
     _defineProperty$1(this, "anchorUnloadHandlers", []);
 
+    _defineProperty$1(this, "mediaChangeHandlers", []);
+
     _defineProperty$1(this, "messageCloseHandlers", []);
 
     _defineProperty$1(this, "messageHandlers", []);
@@ -8780,15 +8838,11 @@ class LocationContext {
           }
 
           if (isRouteConfOfRoutes(route) && Array.isArray(route.routes)) {
+            yield _this.preFetchMenu(route.context);
             yield _this.mountRoutes(route.routes, slotId, mountRoutesResult);
           } else if (isRouteConfOfBricks(route) && Array.isArray(route.bricks)) {
-            var useMenus = scanAppGetMenuInAny(route);
-
-            if (useMenus.length) {
-              yield constructMenuByMenusList(useMenus, _this.getCurrentContext(), _this.kernel);
-            }
-
-            yield _this.mountBricks(route.bricks, matched.match, slotId, mountRoutesResult); // analytics data (page_view event)
+            yield _this.mountBricks(route.bricks, matched.match, slotId, mountRoutesResult);
+            yield _this.preFetchMenu(route); // analytics data (page_view event)
 
             if (route.analyticsData) {
               mountRoutesResult.analyticsData = computeRealValue(route.analyticsData, context, true);
@@ -9044,6 +9098,9 @@ class LocationContext {
       var expandedBrickConf = brickConf;
 
       if (tplTagName) {
+        var _customTemplateRegist;
+
+        yield _this6.preFetchMenu((_customTemplateRegist = customTemplateRegistry.get(tplTagName)) === null || _customTemplateRegist === void 0 ? void 0 : _customTemplateRegist.bricks);
         expandedBrickConf = yield asyncExpandCustomTemplate(_objectSpread(_objectSpread({}, brickConf), {}, {
           brick: tplTagName,
           // Properties are computed for custom templates.
@@ -9105,6 +9162,7 @@ class LocationContext {
       onPageLeave,
       onAnchorLoad,
       onAnchorUnload,
+      onMediaChange,
       onMessage,
       onMessageClose
     } = lifeCycle !== null && lifeCycle !== void 0 ? lifeCycle : {};
@@ -9163,6 +9221,15 @@ class LocationContext {
       });
     }
 
+    if (onMediaChange) {
+      this.mediaChangeHandlers.push({
+        brick,
+        match,
+        tplContextId,
+        handler: onMediaChange
+      });
+    }
+
     if (onMessage) {
       this.messageHandlers.push({
         brick,
@@ -9218,6 +9285,12 @@ class LocationContext {
     }
   }
 
+  handleMediaChange(detail) {
+    this.dispatchLifeCycleEvent(new CustomEvent("media.change", {
+      detail: getReadOnlyProxy(detail)
+    }), this.mediaChangeHandlers);
+  }
+
   handleMessage() {
     this.messageDispatcher.create(this.messageHandlers, this.getCurrentContext());
   }
@@ -9248,6 +9321,18 @@ class LocationContext {
     }
   }
 
+  preFetchMenu(data) {
+    var _this7 = this;
+
+    return _asyncToGenerator$4(function* () {
+      var useMenus = scanAppGetMenuInAny(data);
+
+      if (useMenus.length) {
+        yield constructMenuByMenusList(useMenus, _this7.getCurrentContext(), _this7.kernel);
+      }
+    })();
+  }
+
 }
 
 function unmountTree(mountPoint) {
@@ -9729,6 +9814,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();
@@ -10036,7 +10123,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();
@@ -10109,6 +10201,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({