@next-core/brick-kit 2.115.0 → 2.116.1

package/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.116.1](https://github.com/easyops-cn/next-core/compare/@next-core/brick-kit@2.116.0...@next-core/brick-kit@2.116.1) (2022-04-06)
+
+**Note:** Version bump only for package @next-core/brick-kit
+
+
+
+
+
+# [2.116.0](https://github.com/easyops-cn/next-core/compare/@next-core/brick-kit@2.115.1...@next-core/brick-kit@2.116.0) (2022-04-01)
+
+
+### Features
+
+* support re-registering custom templates ([ea91d7d](https://github.com/easyops-cn/next-core/commit/ea91d7de23e0a9d3a935c01a9a103fb44b8cdfb3))
+
+
+
+
+
+## [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)
 
 

package/dist/index.bundle.js

@@ -2186,28 +2186,28 @@
     return tplContextMap.get(tplContextId);
   }
 
-  var MediaSize;
+  var MediaBreakpoint;
 
-  (function (MediaSize) {
-    MediaSize["xLarge"] = "xLarge";
-    MediaSize["large"] = "large";
-    MediaSize["medium"] = "medium";
-    MediaSize["small"] = "small";
-    MediaSize["xSmall"] = "xSmall";
-  })(MediaSize || (MediaSize = {}));
+  (function (MediaBreakpoint) {
+    MediaBreakpoint["xLarge"] = "xLarge";
+    MediaBreakpoint["large"] = "large";
+    MediaBreakpoint["medium"] = "medium";
+    MediaBreakpoint["small"] = "small";
+    MediaBreakpoint["xSmall"] = "xSmall";
+  })(MediaBreakpoint || (MediaBreakpoint = {}));
 
-  var mediaSizeBreakpointMap = new Map([[MediaSize.xLarge, "1920px"], [MediaSize.large, "1600px"], [MediaSize.medium, "1280px"], [MediaSize.small, "1024px"], [MediaSize.xSmall, 0]]);
+  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 sizeMatchesMap = {};
+  var breakpointMatchesMap = {};
   var MEDIA = {};
 
-  function handleMatchesChange(data, size) {
+  function handleMatchesChange(data, breakpoint) {
     var changed = false;
-    sizeMatchesMap[size] = data.matches;
+    breakpointMatchesMap[breakpoint] = data.matches;
 
-    for (var [_size] of mediaSizeBreakpointMap) {
-      if (sizeMatchesMap[_size] && MEDIA.size !== _size) {
-        MEDIA.size = _size;
+    for (var [_breakpoint] of mediaBreakpointMinWidthMap) {
+      if (breakpointMatchesMap[_breakpoint] && MEDIA.breakpoint !== _breakpoint) {
+        MEDIA.breakpoint = _breakpoint;
         changed = true;
         break;
       }
@@ -2220,17 +2220,17 @@
     }
   }
 
-  mediaSizeBreakpointMap.forEach((breakpoint, size) => {
-    var mediaQueryList = window.matchMedia("(min-width: ".concat(breakpoint, ")"));
-    handleMatchesChange(mediaQueryList, size);
+  mediaBreakpointMinWidthMap.forEach((minWidth, breakpoint) => {
+    var mediaQueryList = window.matchMedia("(min-width: ".concat(minWidth, ")"));
+    handleMatchesChange(mediaQueryList, breakpoint);
 
     if (mediaQueryList.addEventListener) {
       mediaQueryList.addEventListener("change", event => {
-        handleMatchesChange(event, size);
+        handleMatchesChange(event, breakpoint);
       });
     } else {
       mediaQueryList.addListener(event => {
-        handleMatchesChange(event, size);
+        handleMatchesChange(event, breakpoint);
       });
     }
   });
@@ -7903,7 +7903,9 @@
       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
+        $$fulfilled: true,
+        $$registerCustomTemplateProcessed: false,
+        $$depsProcessed: false
       }));
       this.postProcessStoryboard(storyboard);
     }
@@ -10966,37 +10968,37 @@
   }
 
   function registerCustomTemplate(tplName, tplConstructor, appId) {
-    var _tplConstructor$proxy;
-
     var tagName = tplName; // When a template is registered by an app, its namespace maybe missed.
 
     if (appId && !tplName.includes(".")) {
       tagName = "".concat(appId, ".").concat(tplName);
     }
 
-    if (customTemplateRegistry.has(tagName)) {
+    var registered = customTemplateRegistry.has(tagName);
+
+    if (registered) {
       // When open launchpad, the storyboard will be updated.
       // However, we can't *undefine* a custom element.
       // Just ignore re-registering custom templates.
       if (!appId || appRegistered.has(appId)) {
         // eslint-disable-next-line no-console
-        console.error("Custom template of \"".concat(tagName, "\" already registered."));
+        console.warn("Custom template of \"".concat(tagName, "\" already registered."));
       }
+    } else {
+      registered = !!customElements.get(tagName);
 
-      return;
-    }
+      if (registered) {
+        // eslint-disable-next-line no-console
+        console.warn("Custom template of \"".concat(tagName, "\" already defined by customElements."));
+      }
+    } // Now we allow re-register custom template
 
-    if (customElements.get(tagName)) {
-      // eslint-disable-next-line no-console
-      console.error("Custom template of \"".concat(tagName, "\" already defined by customElements."));
-      return;
-    }
 
     customTemplateRegistry.set(tagName, _objectSpread__default["default"](_objectSpread__default["default"]({}, tplConstructor), {}, {
       name: tagName
     })); // Collect defined properties of the template.
 
-    var props = Object.keys(((_tplConstructor$proxy = tplConstructor.proxy) === null || _tplConstructor$proxy === void 0 ? void 0 : _tplConstructor$proxy.properties) || {});
+    var props = getPropsOfCustomTemplate(tagName);
     var nativeProp = props.find(prop => prop in HTMLElement.prototype); // istanbul ignore if
 
     if (nativeProp !== undefined) {
@@ -11004,13 +11006,17 @@
       console.error("In custom template \"".concat(tagName, "\", \"").concat(nativeProp, "\" is a native HTMLElement property, and should be avoid to be used as a brick property."));
     }
 
+    if (registered) {
+      return;
+    }
+
     customElements.define(tagName, class TplElement extends HTMLElement {
       get $$typeof() {
         return "custom-template";
       }
 
       static get _dev_only_definedProperties() {
-        return props;
+        return getPropsOfCustomTemplate(tagName);
       }
 
       connectedCallback() {
@@ -11028,6 +11034,16 @@
     }
   }
 
+  function getPropsOfCustomTemplate(tagName) {
+    var _state$map, _proxy$properties;
+
+    var {
+      state,
+      proxy
+    } = customTemplateRegistry.get(tagName);
+    return ((_state$map = state === null || state === void 0 ? void 0 : state.map(item => item.name)) !== null && _state$map !== void 0 ? _state$map : []).concat(Object.keys((_proxy$properties = proxy === null || proxy === void 0 ? void 0 : proxy.properties) !== null && _proxy$properties !== void 0 ? _proxy$properties : {}));
+  }
+
   var customProcessorRegistry = new Map();
   function registerCustomProcessor(processorFullName, processorFunc) {
     // `namespace` should be the camelCase of the package name.