@next-core/brick-kit 2.113.0 → 2.115.1

package/CHANGELOG.md

@@ -3,6 +3,39 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.115.1](https://github.com/easyops-cn/next-core/compare/@next-core/brick-kit@2.115.0...@next-core/brick-kit@2.115.1) (2022-03-30)
+
+**Note:** Version bump only for package @next-core/brick-kit
+
+
+
+
+
+# [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)
 
 

package/dist/index.bundle.js

@@ -2186,6 +2186,56 @@
     return tplContextMap.get(tplContextId);
   }
 
+  var MediaBreakpoint;
+
+  (function (MediaBreakpoint) {
+    MediaBreakpoint["xLarge"] = "xLarge";
+    MediaBreakpoint["large"] = "large";
+    MediaBreakpoint["medium"] = "medium";
+    MediaBreakpoint["small"] = "small";
+    MediaBreakpoint["xSmall"] = "xSmall";
+  })(MediaBreakpoint || (MediaBreakpoint = {}));
+
+  var mediaBreakpointMinWidthMap = new Map([[MediaBreakpoint.xLarge, "1920px"], [MediaBreakpoint.large, "1600px"], [MediaBreakpoint.medium, "1280px"], [MediaBreakpoint.small, "1024px"], [MediaBreakpoint.xSmall, 0]]);
+  var mediaEventTarget = new EventTarget$1();
+  var breakpointMatchesMap = {};
+  var MEDIA = {};
+
+  function handleMatchesChange(data, breakpoint) {
+    var changed = false;
+    breakpointMatchesMap[breakpoint] = data.matches;
+
+    for (var [_breakpoint] of mediaBreakpointMinWidthMap) {
+      if (breakpointMatchesMap[_breakpoint] && MEDIA.breakpoint !== _breakpoint) {
+        MEDIA.breakpoint = _breakpoint;
+        changed = true;
+        break;
+      }
+    }
+
+    if (changed) {
+      mediaEventTarget.dispatchEvent(new CustomEvent("change", {
+        detail: MEDIA
+      }));
+    }
+  }
+
+  mediaBreakpointMinWidthMap.forEach((minWidth, breakpoint) => {
+    var mediaQueryList = window.matchMedia("(min-width: ".concat(minWidth, ")"));
+    handleMatchesChange(mediaQueryList, breakpoint);
+
+    if (mediaQueryList.addEventListener) {
+      mediaQueryList.addEventListener("change", event => {
+        handleMatchesChange(event, breakpoint);
+      });
+    } else {
+      mediaQueryList.addListener(event => {
+        handleMatchesChange(event, breakpoint);
+      });
+    }
+  });
+  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;
 
@@ -8593,6 +8646,8 @@
 
       _defineProperty__default["default"](this, "anchorUnloadHandlers", []);
 
+      _defineProperty__default["default"](this, "mediaChangeHandlers", []);
+
       _defineProperty__default["default"](this, "messageCloseHandlers", []);
 
       _defineProperty__default["default"](this, "messageHandlers", []);
@@ -8782,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);
@@ -9046,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.
@@ -9107,6 +9161,7 @@
         onPageLeave,
         onAnchorLoad,
         onAnchorUnload,
+        onMediaChange,
         onMessage,
         onMessageClose
       } = lifeCycle !== null && lifeCycle !== void 0 ? lifeCycle : {};
@@ -9165,6 +9220,15 @@
         });
       }
 
+      if (onMediaChange) {
+        this.mediaChangeHandlers.push({
+          brick,
+          match,
+          tplContextId,
+          handler: onMediaChange
+        });
+      }
+
       if (onMessage) {
         this.messageHandlers.push({
           brick,
@@ -9220,6 +9284,12 @@
       }
     }
 
+    handleMediaChange(detail) {
+      this.dispatchLifeCycleEvent(new CustomEvent("media.change", {
+        detail: getReadOnlyProxy(detail)
+      }), this.mediaChangeHandlers);
+    }
+
     handleMessage() {
       this.messageDispatcher.create(this.messageHandlers, this.getCurrentContext());
     }
@@ -9250,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) {
@@ -9731,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();
@@ -10038,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();
@@ -10111,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"]({