@next-core/brick-kit 2.112.0 → 2.115.0

package/CHANGELOG.md

@@ -3,6 +3,51 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.115.0](https://github.com/easyops-cn/next-core/compare/@next-core/brick-kit@2.114.0...@next-core/brick-kit@2.115.0) (2022-03-30)
+
+
+### Features
+
+* APP.getMenu support scan template & routes ([5498846](https://github.com/easyops-cn/next-core/commit/54988465a5357a97834aaca317b41b3fcb2c6a65))
+* loactionContext preFetchMenu ([9a0ec7b](https://github.com/easyops-cn/next-core/commit/9a0ec7b0a19e26633772a71de829f014574ec735))
+* support walkAny unit function ([8adff8e](https://github.com/easyops-cn/next-core/commit/8adff8e2538a43676c5eef1f275e1c5a8127171a))
+* unit test update ([00b3606](https://github.com/easyops-cn/next-core/commit/00b3606c2a2d7ba9a26f3a0255721a11e225c7d9))
+
+
+
+
+
+# [2.114.0](https://github.com/easyops-cn/next-core/compare/@next-core/brick-kit@2.113.0...@next-core/brick-kit@2.114.0) (2022-03-29)
+
+
+### Features
+
+* add MEDIA gloabl object and onMediaChange life cycle ([3192ee4](https://github.com/easyops-cn/next-core/commit/3192ee4e595e2edc78d05b68d6cf0431905296fb))
+
+
+
+
+
+# [2.113.0](https://github.com/easyops-cn/next-core/compare/@next-core/brick-kit@2.112.1...@next-core/brick-kit@2.113.0) (2022-03-29)
+
+
+### Features
+
+* cache fetchMenu, and APP.getMenu change ([07ede47](https://github.com/easyops-cn/next-core/commit/07ede4778f012fbbb7e72d30b1c41d6478660aec))
+* update type ([d7b480e](https://github.com/easyops-cn/next-core/commit/d7b480ecc287263345415c536bd263b7fb317b1e))
+
+
+
+
+
+## [2.112.1](https://github.com/easyops-cn/next-core/compare/@next-core/brick-kit@2.112.0...@next-core/brick-kit@2.112.1) (2022-03-29)
+
+**Note:** Version bump only for package @next-core/brick-kit
+
+
+
+
+
 # [2.112.0](https://github.com/easyops-cn/next-core/compare/@next-core/brick-kit@2.111.3...@next-core/brick-kit@2.112.0) (2022-03-29)
 
 

package/dist/index.bundle.js

@@ -2186,6 +2186,56 @@
     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) {
@@ -2422,6 +2472,9 @@
         case "SYS":
           return getReadOnlyProxy(sys);
 
+        case "MEDIA":
+          return getReadOnlyProxy(getMedia());
+
         case "__WIDGET_FN__":
           return widgetFunctions;
 
@@ -2663,6 +2716,7 @@
   // 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);
   }
@@ -2699,12 +2753,14 @@
 
   function _constructMenuByMenusList() {
     _constructMenuByMenusList = _asyncToGenerator__default["default"](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);
   }
@@ -8590,6 +8646,8 @@
 
       _defineProperty__default["default"](this, "anchorUnloadHandlers", []);
 
+      _defineProperty__default["default"](this, "mediaChangeHandlers", []);
+
       _defineProperty__default["default"](this, "messageCloseHandlers", []);
 
       _defineProperty__default["default"](this, "messageHandlers", []);
@@ -8779,15 +8837,11 @@
             }
 
             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 = brickUtils.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);
@@ -9043,6 +9097,9 @@
         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__default["default"](_objectSpread__default["default"]({}, brickConf), {}, {
             brick: tplTagName,
             // Properties are computed for custom templates.
@@ -9104,6 +9161,7 @@
         onPageLeave,
         onAnchorLoad,
         onAnchorUnload,
+        onMediaChange,
         onMessage,
         onMessageClose
       } = lifeCycle !== null && lifeCycle !== void 0 ? lifeCycle : {};
@@ -9162,6 +9220,15 @@
         });
       }
 
+      if (onMediaChange) {
+        this.mediaChangeHandlers.push({
+          brick,
+          match,
+          tplContextId,
+          handler: onMediaChange
+        });
+      }
+
       if (onMessage) {
         this.messageHandlers.push({
           brick,
@@ -9217,6 +9284,12 @@
       }
     }
 
+    handleMediaChange(detail) {
+      this.dispatchLifeCycleEvent(new CustomEvent("media.change", {
+        detail: getReadOnlyProxy(detail)
+      }), this.mediaChangeHandlers);
+    }
+
     handleMessage() {
       this.messageDispatcher.create(this.messageHandlers, this.getCurrentContext());
     }
@@ -9247,6 +9320,18 @@
       }
     }
 
+    preFetchMenu(data) {
+      var _this7 = this;
+
+      return _asyncToGenerator__default["default"](function* () {
+        var useMenus = brickUtils.scanAppGetMenuInAny(data);
+
+        if (useMenus.length) {
+          yield constructMenuByMenusList(useMenus, _this7.getCurrentContext(), _this7.kernel);
+        }
+      })();
+    }
+
   }
 
   function unmountTree(mountPoint) {
@@ -9728,6 +9813,8 @@
 
       _defineProperty__default["default"](this, "navConfig", void 0);
 
+      _defineProperty__default["default"](this, "mediaEventTargetHandler", void 0);
+
       this.kernel = kernel;
       this.featureFlags = this.kernel.getFeatureFlags();
       var history = getHistory();
@@ -10035,7 +10122,12 @@
           _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();
@@ -10108,6 +10200,9 @@
               _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
 
             easyopsAnalytics.userAnalytics.event("page_view", _objectSpread__default["default"]({