@stencil/core 4.37.1 → 4.38.0

package/internal/client/index.js

@@ -1,5 +1,5 @@
 /*
- Stencil Client Platform v4.37.1 | MIT Licensed | https://stenciljs.com
+ Stencil Client Platform v4.38.0 | MIT Licensed | https://stenciljs.com
  */
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -104,7 +104,8 @@ var registerHost = (hostElement, cmpMeta) => {
     $flags$: 0,
     $hostElement$: hostElement,
     $cmpMeta$: cmpMeta,
-    $instanceValues$: /* @__PURE__ */ new Map()
+    $instanceValues$: /* @__PURE__ */ new Map(),
+    $serializerValues$: /* @__PURE__ */ new Map()
   };
   if (BUILD3.isDev) {
     hostRef.$renderCount$ = 0;
@@ -117,6 +118,9 @@ var registerHost = (hostElement, cmpMeta) => {
     hostElement["s-p"] = [];
     hostElement["s-rc"] = [];
   }
+  if (BUILD3.lazyLoad) {
+    hostRef.$fetchedCbList$ = [];
+  }
   const ref = hostRef;
   hostElement.__stencil__getHostRef = () => ref;
   if (!BUILD3.lazyLoad && BUILD3.modernPropertyDecls && (BUILD3.state || BUILD3.prop)) {
@@ -1140,11 +1144,13 @@ var inspect = (ref) => {
       needsRerender: !!(flags & 512 /* needsRerender */)
     },
     instanceValues: hostRef.$instanceValues$,
+    serializerValues: hostRef.$serializerValues$,
     ancestorComponent: hostRef.$ancestorComponent$,
     hostElement,
     lazyInstance: hostRef.$lazyInstance$,
     vnode: hostRef.$vnode$,
     modeName: hostRef.$modeName$,
+    fetchedCbList: hostRef.$fetchedCbList$,
     onReadyPromise: hostRef.$onReadyPromise$,
     onReadyResolve: hostRef.$onReadyResolve$,
     onInstancePromise: hostRef.$onInstancePromise$,
@@ -1441,7 +1447,7 @@ var validateInputProperties = (inputElm) => {
 
 // src/runtime/client-hydrate.ts
 var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
-  var _a, _b, _c;
+  var _a, _b;
   const endHydrate = createTime("hydrateClient", tagName);
   const shadowRoot = hostElm.shadowRoot;
   const childRenderNodes = [];
@@ -1450,23 +1456,6 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
   const shadowRootNodes = BUILD14.shadowDom && shadowRoot ? [] : null;
   const vnode = newVNode(tagName, null);
   vnode.$elm$ = hostElm;
-  const members = Object.entries(((_a = hostRef.$cmpMeta$) == null ? void 0 : _a.$members$) || {});
-  members.forEach(([memberName, [memberFlags, metaAttributeName]]) => {
-    var _a2, _b2;
-    if (!(memberFlags & 31 /* Prop */)) {
-      return;
-    }
-    const attributeName = metaAttributeName || memberName;
-    const attrVal = hostElm.getAttribute(attributeName);
-    if (attrVal !== null) {
-      const attrPropVal = parsePropertyValue(
-        attrVal,
-        memberFlags,
-        BUILD14.formAssociated && !!(((_a2 = hostRef.$cmpMeta$) == null ? void 0 : _a2.$flags$) & 64 /* formAssociated */)
-      );
-      (_b2 = hostRef == null ? void 0 : hostRef.$instanceValues$) == null ? void 0 : _b2.set(memberName, attrPropVal);
-    }
-  });
   let scopeId2;
   if (BUILD14.scoped) {
     const cmpMeta = hostRef.$cmpMeta$;
@@ -1505,7 +1494,7 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
       if (childRenderNode.$tag$ === "slot") {
         node["s-cr"] = hostElm["s-cr"];
       }
-    } else if (((_b = childRenderNode.$tag$) == null ? void 0 : _b.toString().includes("-")) && childRenderNode.$tag$ !== "slot-fb" && !childRenderNode.$elm$.shadowRoot) {
+    } else if (((_a = childRenderNode.$tag$) == null ? void 0 : _a.toString().includes("-")) && childRenderNode.$tag$ !== "slot-fb" && !childRenderNode.$elm$.shadowRoot) {
       const cmpMeta = getHostRef(childRenderNode.$elm$);
       if (cmpMeta) {
         const scopeId3 = getScopeId(
@@ -1576,7 +1565,7 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
           }
         }
         addSlotRelocateNode(slottedItem.node, slottedItem.slot, false, slottedItem.node["s-oo"]);
-        if (((_c = slottedItem.node.parentElement) == null ? void 0 : _c.shadowRoot) && slottedItem.node["getAttribute"] && slottedItem.node.getAttribute("slot")) {
+        if (((_b = slottedItem.node.parentElement) == null ? void 0 : _b.shadowRoot) && slottedItem.node["getAttribute"] && slottedItem.node.getAttribute("slot")) {
           slottedItem.node.removeAttribute("slot");
         }
         if (BUILD14.experimentalSlotFixes) {
@@ -2999,9 +2988,13 @@ render() {
   }
   if (BUILD20.reflect && cmpMeta.$attrsToReflect$) {
     rootVnode.$attrs$ = rootVnode.$attrs$ || {};
-    cmpMeta.$attrsToReflect$.map(
-      ([propName, attribute]) => rootVnode.$attrs$[attribute] = hostElm[propName]
-    );
+    cmpMeta.$attrsToReflect$.forEach(([propName, attribute]) => {
+      if (BUILD20.serializer && hostRef.$serializerValues$.has(propName)) {
+        rootVnode.$attrs$[attribute] = hostRef.$serializerValues$.get(propName);
+      } else {
+        rootVnode.$attrs$[attribute] = hostElm[propName];
+      }
+    });
   }
   if (isInitialLoad && rootVnode.$attrs$) {
     for (const key of Object.keys(rootVnode.$attrs$)) {
@@ -3156,11 +3149,16 @@ var dispatchHooks = (hostRef, isInitialLoad) => {
   }
   let maybePromise;
   if (isInitialLoad) {
-    if (BUILD21.lazyLoad && BUILD21.hostListener) {
-      hostRef.$flags$ |= 256 /* isListenReady */;
-      if (hostRef.$queuedListeners$) {
-        hostRef.$queuedListeners$.map(([methodName, event]) => safeCall(instance, methodName, event, elm));
-        hostRef.$queuedListeners$ = void 0;
+    if (BUILD21.lazyLoad) {
+      if (BUILD21.hostListener) {
+        hostRef.$flags$ |= 256 /* isListenReady */;
+        if (hostRef.$queuedListeners$) {
+          hostRef.$queuedListeners$.map(([methodName, event]) => safeCall(instance, methodName, event, elm));
+          hostRef.$queuedListeners$ = void 0;
+        }
+      }
+      if (hostRef.$fetchedCbList$.length) {
+        hostRef.$fetchedCbList$.forEach((cb) => cb(elm));
       }
     }
     emitLifecycleEvent(elm, "componentWillLoad");
@@ -3408,6 +3406,9 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
       `Couldn't find host element for "${cmpMeta.$tagName$}" as it is unknown to this Stencil runtime. This usually happens when integrating a 3rd party Stencil component with another Stencil component or application. Please reach out to the maintainers of the 3rd party Stencil component or report this on the Stencil Discord server (https://chat.stenciljs.com) or comment on this similar [GitHub issue](https://github.com/stenciljs/core/issues/5457).`
     );
   }
+  if (BUILD22.serializer && hostRef.$serializerValues$.has(propName) && hostRef.$serializerValues$.get(propName) === newVal) {
+    return;
+  }
   const elm = BUILD22.lazyLoad ? hostRef.$hostElement$ : ref;
   const oldVal = hostRef.$instanceValues$.get(propName);
   const flags = hostRef.$flags$;
@@ -3421,6 +3422,15 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
   const didValueChange = newVal !== oldVal && !areBothNaN;
   if ((!BUILD22.lazyLoad || !(flags & 8 /* isConstructingInstance */) || oldVal === void 0) && didValueChange) {
     hostRef.$instanceValues$.set(propName, newVal);
+    if (BUILD22.serializer && BUILD22.reflect && cmpMeta.$attrsToReflect$) {
+      if (instance && cmpMeta.$serializers$ && cmpMeta.$serializers$[propName]) {
+        let attrVal = newVal;
+        for (const methodName of cmpMeta.$serializers$[propName]) {
+          attrVal = instance[methodName](attrVal, propName);
+        }
+        hostRef.$serializerValues$.set(propName, attrVal);
+      }
+    }
     if (BUILD22.isDev) {
       if (hostRef.$flags$ & 1024 /* devOnRender */) {
         consoleDevWarn(
@@ -3445,7 +3455,7 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
       }
     }
     if (!BUILD22.lazyLoad || instance) {
-      if (BUILD22.watchCallback && cmpMeta.$watchers$ && flags & 128 /* isWatchReady */) {
+      if (BUILD22.propChangeCallback && cmpMeta.$watchers$ && flags & 128 /* isWatchReady */) {
         const watchMethods = cmpMeta.$watchers$[propName];
         if (watchMethods) {
           watchMethods.map((watchMethodName) => {
@@ -3500,9 +3510,17 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
       });
     });
   }
-  if (BUILD23.member && cmpMeta.$members$ || BUILD23.watchCallback && (cmpMeta.$watchers$ || Cstr.watchers)) {
-    if (BUILD23.watchCallback && Cstr.watchers && !cmpMeta.$watchers$) {
-      cmpMeta.$watchers$ = Cstr.watchers;
+  if (BUILD23.member && cmpMeta.$members$ || BUILD23.propChangeCallback) {
+    if (BUILD23.propChangeCallback) {
+      if (Cstr.watchers && !cmpMeta.$watchers$) {
+        cmpMeta.$watchers$ = Cstr.watchers;
+      }
+      if (Cstr.deserializers && !cmpMeta.$deserializers$) {
+        cmpMeta.$deserializers$ = Cstr.deserializers;
+      }
+      if (Cstr.serializers && !cmpMeta.$serializers$) {
+        cmpMeta.$serializers$ = Cstr.serializers;
+      }
     }
     const members = Object.entries((_a = cmpMeta.$members$) != null ? _a : {});
     members.map(([memberName, [memberFlags]]) => {
@@ -3555,8 +3573,6 @@ More information: https://stenciljs.com/docs/properties#prop-mutability`
               const currentValue = memberFlags & 32 /* State */ ? this[memberName] : ref.$hostElement$[memberName];
               if (typeof currentValue === "undefined" && ref.$instanceValues$.get(memberName)) {
                 newValue = ref.$instanceValues$.get(memberName);
-              } else if (!ref.$instanceValues$.get(memberName) && currentValue) {
-                ref.$instanceValues$.set(memberName, currentValue);
               }
               origSetter.apply(this, [
                 parsePropertyValue(
@@ -3577,7 +3593,7 @@ More information: https://stenciljs.com/docs/properties#prop-mutability`
               if ((flags & 1 /* isElementConstructor */) === 0 || (cmpMeta.$members$[memberName][0] & 4096 /* Setter */) === 0) {
                 setValue(this, memberName, newValue, cmpMeta);
                 if (flags & 1 /* isElementConstructor */ && !ref.$lazyInstance$) {
-                  ref.$onReadyPromise$.then(() => {
+                  ref.$fetchedCbList$.push(() => {
                     if (cmpMeta.$members$[memberName][0] & 4096 /* Setter */ && ref.$lazyInstance$[memberName] !== ref.$instanceValues$.get(memberName)) {
                       ref.$lazyInstance$[memberName] = newValue;
                     }
@@ -3600,7 +3616,9 @@ More information: https://stenciljs.com/docs/properties#prop-mutability`
               if (ref.$lazyInstance$) {
                 setterSetVal();
               } else {
-                ref.$onReadyPromise$.then(() => setterSetVal());
+                ref.$fetchedCbList$.push(() => {
+                  setterSetVal();
+                });
               }
             }
           }
@@ -3624,14 +3642,39 @@ More information: https://stenciljs.com/docs/properties#prop-mutability`
         plt.jmp(() => {
           var _a2;
           const propName = attrNameToPropName.get(attrName);
+          const hostRef = getHostRef(this);
+          if (BUILD23.serializer && hostRef.$serializerValues$.has(propName) && hostRef.$serializerValues$.get(propName) === newValue) {
+            return;
+          }
           if (this.hasOwnProperty(propName) && BUILD23.lazyLoad) {
             newValue = this[propName];
             delete this[propName];
+          }
+          if (BUILD23.deserializer && cmpMeta.$deserializers$ && cmpMeta.$deserializers$[propName]) {
+            const setVal = (methodName, instance) => {
+              const deserializeVal = instance == null ? void 0 : instance[methodName](newValue, propName);
+              if (deserializeVal !== this[propName]) {
+                this[propName] = deserializeVal;
+              }
+            };
+            for (const methodName of cmpMeta.$deserializers$[propName]) {
+              if (BUILD23.lazyLoad) {
+                if (hostRef.$lazyInstance$) {
+                  setVal(methodName, hostRef.$lazyInstance$);
+                } else {
+                  hostRef.$fetchedCbList$.push(() => {
+                    setVal(methodName, hostRef.$lazyInstance$);
+                  });
+                }
+              } else {
+                setVal(methodName, this);
+              }
+            }
+            return;
           } else if (prototype.hasOwnProperty(propName) && typeof this[propName] === "number" && // cast type to number to avoid TS compiler issues
           this[propName] == newValue) {
             return;
           } else if (propName == null) {
-            const hostRef = getHostRef(this);
             const flags2 = hostRef == null ? void 0 : hostRef.$flags$;
             if (hostRef && flags2 && !(flags2 & 8 /* isConstructingInstance */) && flags2 & 128 /* isWatchReady */ && newValue !== oldValue) {
               const elm = BUILD23.lazyLoad ? hostRef.$hostElement$ : this;
@@ -3647,7 +3690,7 @@ More information: https://stenciljs.com/docs/properties#prop-mutability`
           }
           const propDesc = Object.getOwnPropertyDescriptor(prototype, propName);
           newValue = newValue === null && typeof this[propName] === "boolean" ? false : newValue;
-          if (newValue !== this[propName] && (!propDesc.get || !!propDesc.set)) {
+          if (newValue != this[propName] && (!propDesc.get || !!propDesc.set)) {
             this[propName] = newValue;
           }
         });
@@ -3693,8 +3736,10 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
         throw new Error(`Constructor for "${cmpMeta.$tagName$}#${hostRef.$modeName$}" was not found`);
       }
       if (BUILD24.member && !Cstr.isProxied) {
-        if (BUILD24.watchCallback) {
+        if (BUILD24.propChangeCallback) {
           cmpMeta.$watchers$ = Cstr.watchers;
+          cmpMeta.$serializers$ = Cstr.serializers;
+          cmpMeta.$deserializers$ = Cstr.deserializers;
         }
         proxyComponent(Cstr, cmpMeta, 2 /* proxyState */);
         Cstr.isProxied = true;
@@ -3711,7 +3756,7 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
       if (BUILD24.member) {
         hostRef.$flags$ &= ~8 /* isConstructingInstance */;
       }
-      if (BUILD24.watchCallback) {
+      if (BUILD24.propChangeCallback) {
         hostRef.$flags$ |= 128 /* isWatchReady */;
       }
       endNewInstance();
@@ -3808,7 +3853,7 @@ var connectedCallback = (elm) => {
       }
       if (BUILD25.prop && !BUILD25.hydrateServerSide && cmpMeta.$members$) {
         Object.entries(cmpMeta.$members$).map(([memberName, [memberFlags]]) => {
-          if (memberFlags & 31 /* Prop */ && elm.hasOwnProperty(memberName)) {
+          if (memberFlags & 31 /* Prop */ && memberName in elm && elm[memberName] !== Object.prototype[memberName]) {
             const value = elm[memberName];
             delete elm[memberName];
             elm[memberName] = value;
@@ -3889,8 +3934,10 @@ var proxyCustomElement = (Cstr, compactMeta) => {
   if (BUILD27.hostListener) {
     cmpMeta.$listeners$ = compactMeta[3];
   }
-  if (BUILD27.watchCallback) {
+  if (BUILD27.propChangeCallback) {
     cmpMeta.$watchers$ = Cstr.$watchers$;
+    cmpMeta.$deserializers$ = Cstr.$deserializers$;
+    cmpMeta.$serializers$ = Cstr.$serializers$;
   }
   if (BUILD27.reflect) {
     cmpMeta.$attrsToReflect$ = [];
@@ -4038,7 +4085,7 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
   let hasSlotRelocation = false;
   lazyBundles.map((lazyBundle) => {
     lazyBundle[1].map((compactMeta) => {
-      var _a2;
+      var _a2, _b, _c;
       const cmpMeta = {
         $flags$: compactMeta[0],
         $tagName$: compactMeta[1],
@@ -4057,8 +4104,10 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
       if (BUILD28.reflect) {
         cmpMeta.$attrsToReflect$ = [];
       }
-      if (BUILD28.watchCallback) {
+      if (BUILD28.propChangeCallback) {
         cmpMeta.$watchers$ = (_a2 = compactMeta[4]) != null ? _a2 : {};
+        cmpMeta.$serializers$ = (_b = compactMeta[5]) != null ? _b : {};
+        cmpMeta.$deserializers$ = (_c = compactMeta[6]) != null ? _c : {};
       }
       if (BUILD28.shadowDom && !supportsShadow && cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
         cmpMeta.$flags$ |= 8 /* needsShadowDomShim */;

package/internal/client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stencil/core/internal/client",
-  "version": "4.37.1",
+  "version": "4.38.0",
   "description": "Stencil internal client platform to be imported by the Stencil Compiler and internal runtime. Breaking changes can and will happen at any time.",
   "main": "./index.js",
   "exports": "./index.js",

package/internal/client/patch-browser.js

@@ -1,5 +1,5 @@
 /*
- Stencil Client Patch Browser v4.37.1 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v4.38.0 | MIT Licensed | https://stenciljs.com
  */
 
 // src/client/client-patch-browser.ts