@next-core/brick-kit 2.111.3 → 2.114.0

package/CHANGELOG.md

@@ -3,6 +3,48 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [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)
+
+
+### Features
+
+* support updating storyboard on the fly ([0a50183](https://github.com/easyops-cn/next-core/commit/0a501838621d44c43ea7c16b211395b511e76c8a))
+
+
+
+
+
 ## [2.111.3](https://github.com/easyops-cn/next-core/compare/@next-core/brick-kit@2.111.2...@next-core/brick-kit@2.111.3) (2022-03-29)
 
 **Note:** Version bump only for package @next-core/brick-kit

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);
   }
@@ -3114,6 +3170,11 @@
       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__default["default"](this, "registerBrickTemplate", registerBrickTemplate);
@@ -7797,9 +7858,9 @@
     }
 
     doFulfilStoryboard(storyboard) {
-      return _asyncToGenerator__default["default"](function* () {
-        var _storyboard$meta;
+      var _this5 = this;
 
+      return _asyncToGenerator__default["default"](function* () {
         if (window.STANDALONE_MICRO_APPS) {
           Object.assign(storyboard, {
             $$fulfilled: true
@@ -7818,28 +7879,43 @@
           });
         }
 
-        storyboard.app.$$routeAliasMap = brickUtils.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__default["default"].addResourceBundle(lang, i18nNamespace, resources);
-          });
-        }
-      })();
+      storyboard.app.$$routeAliasMap = brickUtils.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__default["default"].addResourceBundle(lang, i18nNamespace, resources);
+        });
+      }
+    }
+
+    _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(),
+        $$fulfilled: true
+      }));
+      this.postProcessStoryboard(storyboard);
     }
 
     loadDepsOfStoryboard(storyboard) {
-      var _this5 = this;
+      var _this6 = this;
 
       return _asyncToGenerator__default["default"](function* () {
         var {
           brickPackages,
           templatePackages
-        } = _this5.bootstrapData;
+        } = _this6.bootstrapData;
 
         if (storyboard.dependsAll) {
           var dllPath = window.DLL_PATH || {};
@@ -7905,7 +7981,7 @@
     }
 
     loadDynamicBricksInBrickConf(brickConf) {
-      var _this6 = this;
+      var _this7 = this;
 
       return _asyncToGenerator__default["default"](function* () {
         // Notice: `brickConf` contains runtime data,
@@ -7913,12 +7989,12 @@
         // which could cause stack overflow while traversing.
         var bricks = brickUtils.scanBricksInBrickConf(brickConf);
         var processors = brickUtils.scanProcessorsInAny(brickConf);
-        yield _this6.loadDynamicBricks(bricks, processors);
+        yield _this7.loadDynamicBricks(bricks, processors);
       })();
     }
 
     loadDynamicBricks(bricks, processors) {
-      var _this7 = this;
+      var _this8 = this;
 
       return _asyncToGenerator__default["default"](function* () {
         var filteredBricks = bricks.filter( // Only try to load undefined custom elements.
@@ -7930,7 +8006,7 @@
         } = brickUtils.getDllAndDepsByResource({
           bricks: filteredBricks,
           processors
-        }, _this7.bootstrapData.brickPackages);
+        }, _this8.bootstrapData.brickPackages);
         yield loadScriptOfDll(dll);
         yield loadScriptOfBricksOrTemplates(deps);
         yield loadLazyBricks(filteredBricks);
@@ -7938,7 +8014,7 @@
     }
 
     loadEditorBricks(editorBricks) {
-      var _this8 = this;
+      var _this9 = this;
 
       return _asyncToGenerator__default["default"](function* () {
         var {
@@ -7947,7 +8023,7 @@
         } = brickUtils.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);
       })();
@@ -8051,10 +8127,10 @@
     }
 
     getMicroAppApiOrchestrationMapAsync() {
-      var _this9 = this;
+      var _this10 = this;
 
       return _asyncToGenerator__default["default"](function* () {
-        return yield _this9.allMicroAppApiOrchestrationPromise;
+        return yield _this10.allMicroAppApiOrchestrationPromise;
       })();
     }
 
@@ -8146,14 +8222,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) {
@@ -8165,38 +8241,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 = [];
       })();
     }
 
@@ -8237,22 +8313,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, "\"."));
@@ -8260,7 +8336,7 @@
 
         var brick = document.createElement(provider);
 
-        _this12.providerRepository.set(provider, brick);
+        _this13.providerRepository.set(provider, brick);
 
         return brick;
       })();
@@ -8570,6 +8646,8 @@
 
       _defineProperty__default["default"](this, "anchorUnloadHandlers", []);
 
+      _defineProperty__default["default"](this, "mediaChangeHandlers", []);
+
       _defineProperty__default["default"](this, "messageCloseHandlers", []);
 
       _defineProperty__default["default"](this, "messageHandlers", []);
@@ -9084,6 +9162,7 @@
         onPageLeave,
         onAnchorLoad,
         onAnchorUnload,
+        onMediaChange,
         onMessage,
         onMessageClose
       } = lifeCycle !== null && lifeCycle !== void 0 ? lifeCycle : {};
@@ -9142,6 +9221,15 @@
         });
       }
 
+      if (onMediaChange) {
+        this.mediaChangeHandlers.push({
+          brick,
+          match,
+          tplContextId,
+          handler: onMediaChange
+        });
+      }
+
       if (onMessage) {
         this.messageHandlers.push({
           brick,
@@ -9197,6 +9285,12 @@
       }
     }
 
+    handleMediaChange(detail) {
+      this.dispatchLifeCycleEvent(new CustomEvent("media.change", {
+        detail: getReadOnlyProxy(detail)
+      }), this.mediaChangeHandlers);
+    }
+
     handleMessage() {
       this.messageDispatcher.create(this.messageHandlers, this.getCurrentContext());
     }
@@ -9708,6 +9802,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();
@@ -10015,7 +10111,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();
@@ -10088,6 +10189,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"]({
@@ -12836,7 +12940,8 @@
     getFakeKernel: _dev_only_getFakeKernel,
 
     /** @deprecated Keep it for backward-compatibility. */
-    checkoutTplContext: lodash.noop
+    checkoutTplContext: lodash.noop,
+    updateStoryboard: _dev_only_updateStoryboard
   };
 
   var _excluded$2 = ["type"];