@mantou/gem 1.6.18 → 1.7.0

package/dist/gem.es.js

@@ -1552,6 +1552,7 @@ const tick = (timeStamp = performance.now()) => {
   }
 };
 asyncRenderTaskList.addEventListener("start", () => addMicrotask(tick));
+const constructorSymbol = Symbol("constructor");
 const initSymbol = Symbol("init");
 const updateSymbol = Symbol("update");
 class GemElement extends HTMLElement {
@@ -1595,7 +1596,8 @@ class GemElement extends HTMLElement {
         callback,
         getDep,
         values: void 0,
-        initialized: !!__privateGet$1(this, _isMounted)
+        initialized: __privateGet$1(this, _isMounted),
+        inConstructor: this[constructorSymbol]
       };
       if (__privateGet$1(this, _isMounted)) {
         effectItem.values = getDep == null ? void 0 : getDep();
@@ -1610,7 +1612,7 @@ class GemElement extends HTMLElement {
         callback,
         getDep,
         values: [Symbol()],
-        initialized: !!__privateGet$1(this, _isMounted)
+        inConstructor: this[constructorSymbol]
       });
     };
     __privateAdd$1(this, _initEffect, () => {
@@ -1665,6 +1667,7 @@ class GemElement extends HTMLElement {
     });
     __privateAdd$1(this, _connectedCallback, () => {
       var _a2, _b, _c;
+      this[constructorSymbol] = false;
       if (__privateGet$1(this, _isAppendReason)) {
         __privateSet$1(this, _isAppendReason, false);
         return;
@@ -1683,6 +1686,7 @@ class GemElement extends HTMLElement {
         throw new GemError(`not allow current root type`);
       }
     });
+    this[constructorSymbol] = true;
     addMicrotask(() => this[initSymbol] = false);
     this[initSymbol] = true;
     this[updateSymbol] = () => {
@@ -1733,25 +1737,20 @@ class GemElement extends HTMLElement {
     }
   }
   get internals() {
+    var _a2, _b;
     if (!__privateGet$1(this, _internals)) {
-      const getCustomStateSet = () => {
-        const getV = (v) => v.replace(/-/g, "");
-        return {
-          has: (v) => getV(v) in this.dataset,
-          add: (v) => {
-            this.dataset[getV(v)] = "";
-          },
-          delete: (v) => delete this.dataset[getV(v)]
-        };
-      };
-      if (!this.attachInternals) {
-        this.attachInternals = () => {
-          return { states: getCustomStateSet() };
-        };
-      }
       __privateSet$1(this, _internals, this.attachInternals());
-      if (!__privateGet$1(this, _internals).states) {
-        __privateGet$1(this, _internals).states = getCustomStateSet();
+      try {
+        (_a2 = __privateGet$1(this, _internals).states) == null ? void 0 : _a2.add("foo");
+        (_b = __privateGet$1(this, _internals).states) == null ? void 0 : _b.delete("foo");
+      } catch {
+        Reflect.defineProperty(__privateGet$1(this, _internals), "states", {
+          value: new Proxy(__privateGet$1(this, _internals).states, {
+            get(target, p) {
+              return (str) => target[p](`--${str}`);
+            }
+          })
+        });
       }
     }
     return __privateGet$1(this, _internals);
@@ -1787,7 +1786,7 @@ class GemElement extends HTMLElement {
     }
   }
   disconnectedCallback() {
-    var _a2, _b, _c;
+    var _a2, _b, _c, _d;
     if (this.isConnected) {
       __privateSet$1(this, _isAppendReason, true);
       return;
@@ -1802,7 +1801,8 @@ class GemElement extends HTMLElement {
     (_b = __privateGet$1(this, _effectList)) == null ? void 0 : _b.forEach((effectItem) => {
       execCallback(effectItem.preCallback);
     });
-    __privateSet$1(this, _memoList, (_c = __privateGet$1(this, _memoList)) == null ? void 0 : _c.filter(({ initialized }) => !initialized));
+    __privateSet$1(this, _effectList, (_c = __privateGet$1(this, _effectList)) == null ? void 0 : _c.filter(({ inConstructor }) => inConstructor));
+    __privateSet$1(this, _memoList, (_d = __privateGet$1(this, _memoList)) == null ? void 0 : _d.filter(({ inConstructor }) => inConstructor));
   }
 }
 _renderRoot = new WeakMap();
@@ -1907,7 +1907,7 @@ function defineRef(target, prop, ref) {
             return ref;
           },
           get element() {
-            const gemReflects = [...ele.querySelectorAll("[data-gemreflect]")].map((e) => e.target);
+            const gemReflects = [...ele.querySelectorAll("[data-gem-reflect]")].map((e) => e.target);
             for (const e of [ele, ...gemReflects]) {
               const result = e.querySelector(`[ref=${ref}]`);
               if (result)
@@ -1925,18 +1925,17 @@ function defineCSSState(target, prop, state2) {
   Object.defineProperty(target, prop, {
     configurable: true,
     get() {
-      var _a2;
       const that = this;
       const { states } = that.internals;
-      return (_a2 = states.has) == null ? void 0 : _a2.call(states, state2);
+      return states == null ? void 0 : states.has(state2);
     },
     set(v) {
       const that = this;
       const { states } = that.internals;
       if (v) {
-        states.add(state2);
+        states == null ? void 0 : states.add(state2);
       } else {
-        states.delete(state2);
+        states == null ? void 0 : states.delete(state2);
       }
     }
   });
@@ -1944,11 +1943,11 @@ function defineCSSState(target, prop, state2) {
 const nativeDefineElement = customElements.define.bind(customElements);
 customElements.define = (name, cls, options) => {
   if (cls.prototype instanceof GemElement) {
-    const { observedAttributes, observedPropertys, defineEvents, defineCSSStates, defineRefs } = cls;
+    const { observedAttributes, observedProperties, defineEvents, defineCSSStates, defineRefs } = cls;
     observedAttributes == null ? void 0 : observedAttributes.forEach((attr) => defineAttribute(cls.prototype, kebabToCamelCase(attr), attr));
-    observedPropertys == null ? void 0 : observedPropertys.forEach((prop) => defineProperty(cls.prototype, prop));
+    observedProperties == null ? void 0 : observedProperties.forEach((prop) => defineProperty(cls.prototype, prop));
     defineEvents == null ? void 0 : defineEvents.forEach((event) => defineProperty(cls.prototype, kebabToCamelCase(event), event));
-    defineCSSStates == null ? void 0 : defineCSSStates.forEach((state2) => defineCSSState(cls.prototype, kebabToCamelCase(state2), `--${state2}`));
+    defineCSSStates == null ? void 0 : defineCSSStates.forEach((state2) => defineCSSState(cls.prototype, kebabToCamelCase(state2), state2));
     defineRefs == null ? void 0 : defineRefs.forEach((ref) => defineRef(cls.prototype, kebabToCamelCase(ref), ref));
   }
   nativeDefineElement(name, cls, options);
@@ -1986,13 +1985,13 @@ function numattribute(target, prop) {
   defineAttr(target, prop, attr);
 }
 function property(target, prop) {
-  pushStaticField(target, "observedPropertys", prop);
+  pushStaticField(target, "observedProperties", prop);
   defineProperty(target, prop);
 }
 function state(target, prop) {
   const attr = camelToKebabCase(prop);
   pushStaticField(target, "defineCSSStates", attr);
-  defineCSSState(target, prop, `--${attr}`);
+  defineCSSState(target, prop, attr);
 }
 function slot(target, prop) {
   const attr = camelToKebabCase(target[prop] || prop);
@@ -2063,13 +2062,13 @@ function validData(data) {
   if ($hasShouldCloseHandle)
     throw new GemError("`$hasShouldCloseHandle` is not allowed");
 }
-function getUrlbarPath(internalPath) {
+function getUrlBarPath(internalPath) {
   return gemHistory.basePath ? gemHistory.basePath + internalPath : internalPath;
 }
-function getInternalPath(urlbarPath) {
-  if (urlbarPath === gemHistory.basePath)
+function getInternalPath(urlBarPath) {
+  if (urlBarPath === gemHistory.basePath)
     return "/";
-  return urlbarPath.replace(new RegExp(`^${gemHistory.basePath}/`), "/");
+  return urlBarPath.replace(new RegExp(`^${gemHistory.basePath}/`), "/");
 }
 function normalizeParams(params) {
   const current = paramsMap.get(store.$key) || {};
@@ -2093,7 +2092,7 @@ function updateHistory(p, native) {
   }, data);
   paramsMap.set(state2.$key, params);
   updateStore(cleanObject(store), state2);
-  const url = getUrlbarPath(path) + new QueryString(query) + hash;
+  const url = getUrlBarPath(path) + new QueryString(query) + hash;
   const prevHash = decodeURIComponent(location.hash);
   native(state2, title, url);
   if (prevHash !== hash)
@@ -2108,7 +2107,7 @@ function updateHistoryByNative(data, title, originUrl, native) {
   const params = normalizeParams({ path: pathname, query: new QueryString(search), hash, title, data });
   paramsMap.set(state2.$key, params);
   updateStore(cleanObject(store), state2);
-  const url = getUrlbarPath(pathname) + params.query + hash;
+  const url = getUrlBarPath(pathname) + params.query + hash;
   const prevHash = location.hash;
   native(state2, title, url);
   if (prevHash !== hash)
@@ -2222,7 +2221,8 @@ if (!window._GEMHISTORY) {
       });
     }
     const prevState = store;
-    if (parseFloat(newState.$key) > parseFloat(prevState.$key) && newState.$hasOpenHandle) {
+    const isForward = parseFloat(newState.$key) > parseFloat(prevState.$key);
+    if (isForward && newState.$hasOpenHandle) {
       (_b = (_a2 = paramsMap.get(newState.$key)) == null ? void 0 : _a2.open) == null ? void 0 : _b.call(_a2);
     } else if (prevState.$hasCloseHandle) {
       const prevParams = paramsMap.get(prevState.$key);
@@ -2339,9 +2339,17 @@ let GemRouteElement = class extends GemElement {
       __privateSet2(this, _lastLoader, void 0);
       this.currentRoute = route;
       this.currentParams = params;
-      this.setState({ content });
-      this.routechange(this.currentRoute);
-      __privateGet2(this, _updateLocationStore).call(this);
+      const changeContent = () => {
+        this.setState({ content });
+        this.routechange(this.currentRoute);
+        __privateGet2(this, _updateLocationStore).call(this);
+        return Promise.resolve();
+      };
+      if (this.transition && "startViewTransition" in document) {
+        document.startViewTransition(changeContent);
+      } else {
+        changeContent();
+      }
     });
     this.routes = routes;
   }
@@ -2427,6 +2435,9 @@ GemRouteElement.findRoute = (target = [], path) => {
   }
   return { route: defaultRoute };
 };
+__decorateClass$6([
+  boolattribute
+], GemRouteElement.prototype, "transition", 2);
 __decorateClass$6([
   property
 ], GemRouteElement.prototype, "routes", 2);
@@ -2791,13 +2802,12 @@ var __decorateClass$1 = (decorators, target, key2, kind) => {
     __defProp$1(target, key2, result);
   return result;
 };
-document.querySelectorAll("[data-reflect]").forEach((e) => e.remove());
 class GemReflectElement extends GemElement {
   constructor() {
     super({ isLight: true });
     this.target = document.head;
     this.hidden = true;
-    this.dataset.gemreflect = "";
+    this.dataset.gemReflect = "";
     this.effect(() => {
       const childNodes = [...this.childNodes];
       childNodes.forEach((node) => {
@@ -3273,7 +3283,7 @@ const mediaQuery = {
     return matche(this.DATA_REDUCE);
   }
 };
-const version = "1.6.18";
+const version = "1.7.0";
 if (window.__GEM_DEVTOOLS__HOOK__) {
   Object.assign(window.__GEM_DEVTOOLS__HOOK__, __spreadValues({}, Gem));
 }