@stencil/core 4.37.1 → 4.38.0

package/internal/testing/index.js

@@ -134,8 +134,10 @@ var registerHost = (elm, cmpMeta) => {
     $hostElement$: elm,
     $cmpMeta$: cmpMeta,
     $instanceValues$: /* @__PURE__ */ new Map(),
+    $serializerValues$: /* @__PURE__ */ new Map(),
     $renderCount$: 0
   };
+  hostRef.$fetchedCbList$ = [];
   hostRef.$onInstancePromise$ = new Promise((r) => hostRef.$onInstanceResolve$ = r);
   hostRef.$onReadyPromise$ = new Promise((r) => hostRef.$onReadyResolve$ = r);
   elm["s-p"] = [];
@@ -1242,11 +1244,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$,
@@ -1543,7 +1547,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 = [];
@@ -1552,23 +1556,6 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
   const shadowRootNodes = import_app_data7.BUILD.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,
-        import_app_data7.BUILD.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 (import_app_data7.BUILD.scoped) {
     const cmpMeta = hostRef.$cmpMeta$;
@@ -1607,7 +1594,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(
@@ -1678,7 +1665,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 (import_app_data7.BUILD.experimentalSlotFixes) {
@@ -3101,9 +3088,13 @@ render() {
   }
   if (import_app_data13.BUILD.reflect && cmpMeta.$attrsToReflect$) {
     rootVnode.$attrs$ = rootVnode.$attrs$ || {};
-    cmpMeta.$attrsToReflect$.map(
-      ([propName, attribute]) => rootVnode.$attrs$[attribute] = hostElm[propName]
-    );
+    cmpMeta.$attrsToReflect$.forEach(([propName, attribute]) => {
+      if (import_app_data13.BUILD.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$)) {
@@ -3258,11 +3249,16 @@ var dispatchHooks = (hostRef, isInitialLoad) => {
   }
   let maybePromise;
   if (isInitialLoad) {
-    if (import_app_data14.BUILD.lazyLoad && import_app_data14.BUILD.hostListener) {
-      hostRef.$flags$ |= 256 /* isListenReady */;
-      if (hostRef.$queuedListeners$) {
-        hostRef.$queuedListeners$.map(([methodName, event]) => safeCall(instance, methodName, event, elm));
-        hostRef.$queuedListeners$ = void 0;
+    if (import_app_data14.BUILD.lazyLoad) {
+      if (import_app_data14.BUILD.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");
@@ -3510,6 +3506,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 (import_app_data15.BUILD.serializer && hostRef.$serializerValues$.has(propName) && hostRef.$serializerValues$.get(propName) === newVal) {
+    return;
+  }
   const elm = import_app_data15.BUILD.lazyLoad ? hostRef.$hostElement$ : ref;
   const oldVal = hostRef.$instanceValues$.get(propName);
   const flags = hostRef.$flags$;
@@ -3523,6 +3522,15 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
   const didValueChange = newVal !== oldVal && !areBothNaN;
   if ((!import_app_data15.BUILD.lazyLoad || !(flags & 8 /* isConstructingInstance */) || oldVal === void 0) && didValueChange) {
     hostRef.$instanceValues$.set(propName, newVal);
+    if (import_app_data15.BUILD.serializer && import_app_data15.BUILD.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 (import_app_data15.BUILD.isDev) {
       if (hostRef.$flags$ & 1024 /* devOnRender */) {
         consoleDevWarn(
@@ -3547,7 +3555,7 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
       }
     }
     if (!import_app_data15.BUILD.lazyLoad || instance) {
-      if (import_app_data15.BUILD.watchCallback && cmpMeta.$watchers$ && flags & 128 /* isWatchReady */) {
+      if (import_app_data15.BUILD.propChangeCallback && cmpMeta.$watchers$ && flags & 128 /* isWatchReady */) {
         const watchMethods = cmpMeta.$watchers$[propName];
         if (watchMethods) {
           watchMethods.map((watchMethodName) => {
@@ -3602,9 +3610,17 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
       });
     });
   }
-  if (import_app_data16.BUILD.member && cmpMeta.$members$ || import_app_data16.BUILD.watchCallback && (cmpMeta.$watchers$ || Cstr.watchers)) {
-    if (import_app_data16.BUILD.watchCallback && Cstr.watchers && !cmpMeta.$watchers$) {
-      cmpMeta.$watchers$ = Cstr.watchers;
+  if (import_app_data16.BUILD.member && cmpMeta.$members$ || import_app_data16.BUILD.propChangeCallback) {
+    if (import_app_data16.BUILD.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]]) => {
@@ -3657,8 +3673,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(
@@ -3679,7 +3693,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;
                     }
@@ -3702,7 +3716,9 @@ More information: https://stenciljs.com/docs/properties#prop-mutability`
               if (ref.$lazyInstance$) {
                 setterSetVal();
               } else {
-                ref.$onReadyPromise$.then(() => setterSetVal());
+                ref.$fetchedCbList$.push(() => {
+                  setterSetVal();
+                });
               }
             }
           }
@@ -3726,14 +3742,39 @@ More information: https://stenciljs.com/docs/properties#prop-mutability`
         plt.jmp(() => {
           var _a2;
           const propName = attrNameToPropName.get(attrName);
+          const hostRef = getHostRef(this);
+          if (import_app_data16.BUILD.serializer && hostRef.$serializerValues$.has(propName) && hostRef.$serializerValues$.get(propName) === newValue) {
+            return;
+          }
           if (this.hasOwnProperty(propName) && import_app_data16.BUILD.lazyLoad) {
             newValue = this[propName];
             delete this[propName];
+          }
+          if (import_app_data16.BUILD.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 (import_app_data16.BUILD.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 = import_app_data16.BUILD.lazyLoad ? hostRef.$hostElement$ : this;
@@ -3749,7 +3790,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;
           }
         });
@@ -3795,8 +3836,10 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
         throw new Error(`Constructor for "${cmpMeta.$tagName$}#${hostRef.$modeName$}" was not found`);
       }
       if (import_app_data17.BUILD.member && !Cstr.isProxied) {
-        if (import_app_data17.BUILD.watchCallback) {
+        if (import_app_data17.BUILD.propChangeCallback) {
           cmpMeta.$watchers$ = Cstr.watchers;
+          cmpMeta.$serializers$ = Cstr.serializers;
+          cmpMeta.$deserializers$ = Cstr.deserializers;
         }
         proxyComponent(Cstr, cmpMeta, 2 /* proxyState */);
         Cstr.isProxied = true;
@@ -3813,7 +3856,7 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
       if (import_app_data17.BUILD.member) {
         hostRef.$flags$ &= ~8 /* isConstructingInstance */;
       }
-      if (import_app_data17.BUILD.watchCallback) {
+      if (import_app_data17.BUILD.propChangeCallback) {
         hostRef.$flags$ |= 128 /* isWatchReady */;
       }
       endNewInstance();
@@ -3910,7 +3953,7 @@ var connectedCallback = (elm) => {
       }
       if (import_app_data18.BUILD.prop && !import_app_data18.BUILD.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;
@@ -3991,8 +4034,10 @@ var proxyCustomElement = (Cstr, compactMeta) => {
   if (import_app_data20.BUILD.hostListener) {
     cmpMeta.$listeners$ = compactMeta[3];
   }
-  if (import_app_data20.BUILD.watchCallback) {
+  if (import_app_data20.BUILD.propChangeCallback) {
     cmpMeta.$watchers$ = Cstr.$watchers$;
+    cmpMeta.$deserializers$ = Cstr.$deserializers$;
+    cmpMeta.$serializers$ = Cstr.$serializers$;
   }
   if (import_app_data20.BUILD.reflect) {
     cmpMeta.$attrsToReflect$ = [];
@@ -4140,7 +4185,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],
@@ -4159,8 +4204,10 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
       if (import_app_data21.BUILD.reflect) {
         cmpMeta.$attrsToReflect$ = [];
       }
-      if (import_app_data21.BUILD.watchCallback) {
+      if (import_app_data21.BUILD.propChangeCallback) {
         cmpMeta.$watchers$ = (_a2 = compactMeta[4]) != null ? _a2 : {};
+        cmpMeta.$serializers$ = (_b = compactMeta[5]) != null ? _b : {};
+        cmpMeta.$deserializers$ = (_c = compactMeta[6]) != null ? _c : {};
       }
       if (import_app_data21.BUILD.shadowDom && !supportsShadow && cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
         cmpMeta.$flags$ |= 8 /* needsShadowDomShim */;

package/internal/testing/package.json

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

package/mock-doc/index.cjs

@@ -1,5 +1,5 @@
 /*!
- Stencil Mock Doc (CommonJS) v4.37.1 | MIT Licensed | https://stenciljs.com
+ Stencil Mock Doc (CommonJS) v4.38.0 | MIT Licensed | https://stenciljs.com
  */
 "use strict";
 var __defProp = Object.defineProperty;

package/mock-doc/index.js

@@ -1,5 +1,5 @@
 /*!
- Stencil Mock Doc v4.37.1 | MIT Licensed | https://stenciljs.com
+ Stencil Mock Doc v4.38.0 | MIT Licensed | https://stenciljs.com
  */
 
 // src/runtime/runtime-constants.ts

package/mock-doc/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stencil/core/mock-doc",
-  "version": "4.37.1",
+  "version": "4.38.0",
   "description": "Mock window, document and DOM outside of a browser environment.",
   "main": "./index.cjs",
   "module": "./index.js",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stencil/core",
-  "version": "4.37.1",
+  "version": "4.38.0",
   "license": "MIT",
   "main": "./internal/stencil-core/index.cjs",
   "module": "./internal/stencil-core/index.js",

package/screenshot/index.js

@@ -1,5 +1,5 @@
 /*
- Stencil Screenshot v4.37.1 | MIT Licensed | https://stenciljs.com
+ Stencil Screenshot v4.38.0 | MIT Licensed | https://stenciljs.com
  */
 "use strict";
 var __create = Object.create;
@@ -626,7 +626,7 @@ var BUILD = {
   vdomRender: true,
   vdomStyle: true,
   vdomText: true,
-  watchCallback: true,
+  propChangeCallback: true,
   taskQueue: true,
   hotModuleReplacement: false,
   isDebug: false,

package/screenshot/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stencil/core/screenshot",
-  "version": "4.37.1",
+  "version": "4.38.0",
   "description": "Stencil Screenshot.",
   "main": "./index.js",
   "types": "./index.d.ts",

package/screenshot/pixel-match.js

@@ -1,5 +1,5 @@
 /*
- Stencil Screenshot Pixel Match v4.37.1 | MIT Licensed | https://stenciljs.com
+ Stencil Screenshot Pixel Match v4.38.0 | MIT Licensed | https://stenciljs.com
  */
 "use strict";
 var __create = Object.create;