@stencil/core 4.37.1 → 4.38.0

package/internal/hydrate/index.js

@@ -1,5 +1,5 @@
 /*
- Stencil Hydrate Platform v4.37.1 | MIT Licensed | https://stenciljs.com
+ Stencil Hydrate Platform v4.38.0 | MIT Licensed | https://stenciljs.com
  */
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -906,11 +906,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$,
@@ -1207,7 +1209,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 = [];
@@ -1216,23 +1218,6 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
   const shadowRootNodes = BUILD8.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,
-        BUILD8.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 (BUILD8.scoped) {
     const cmpMeta = hostRef.$cmpMeta$;
@@ -1271,7 +1256,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(
@@ -1342,7 +1327,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 (BUILD8.experimentalSlotFixes) {
@@ -2765,9 +2750,13 @@ render() {
   }
   if (BUILD14.reflect && cmpMeta.$attrsToReflect$) {
     rootVnode.$attrs$ = rootVnode.$attrs$ || {};
-    cmpMeta.$attrsToReflect$.map(
-      ([propName, attribute]) => rootVnode.$attrs$[attribute] = hostElm[propName]
-    );
+    cmpMeta.$attrsToReflect$.forEach(([propName, attribute]) => {
+      if (BUILD14.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$)) {
@@ -2922,11 +2911,16 @@ var dispatchHooks = (hostRef, isInitialLoad) => {
   }
   let maybePromise;
   if (isInitialLoad) {
-    if (BUILD15.lazyLoad && BUILD15.hostListener) {
-      hostRef.$flags$ |= 256 /* isListenReady */;
-      if (hostRef.$queuedListeners$) {
-        hostRef.$queuedListeners$.map(([methodName, event]) => safeCall(instance, methodName, event, elm));
-        hostRef.$queuedListeners$ = void 0;
+    if (BUILD15.lazyLoad) {
+      if (BUILD15.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");
@@ -3174,6 +3168,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 (BUILD16.serializer && hostRef.$serializerValues$.has(propName) && hostRef.$serializerValues$.get(propName) === newVal) {
+    return;
+  }
   const elm = BUILD16.lazyLoad ? hostRef.$hostElement$ : ref;
   const oldVal = hostRef.$instanceValues$.get(propName);
   const flags = hostRef.$flags$;
@@ -3187,6 +3184,15 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
   const didValueChange = newVal !== oldVal && !areBothNaN;
   if ((!BUILD16.lazyLoad || !(flags & 8 /* isConstructingInstance */) || oldVal === void 0) && didValueChange) {
     hostRef.$instanceValues$.set(propName, newVal);
+    if (BUILD16.serializer && BUILD16.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 (BUILD16.isDev) {
       if (hostRef.$flags$ & 1024 /* devOnRender */) {
         consoleDevWarn(
@@ -3211,7 +3217,7 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
       }
     }
     if (!BUILD16.lazyLoad || instance) {
-      if (BUILD16.watchCallback && cmpMeta.$watchers$ && flags & 128 /* isWatchReady */) {
+      if (BUILD16.propChangeCallback && cmpMeta.$watchers$ && flags & 128 /* isWatchReady */) {
         const watchMethods = cmpMeta.$watchers$[propName];
         if (watchMethods) {
           watchMethods.map((watchMethodName) => {
@@ -3266,9 +3272,17 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
       });
     });
   }
-  if (BUILD17.member && cmpMeta.$members$ || BUILD17.watchCallback && (cmpMeta.$watchers$ || Cstr.watchers)) {
-    if (BUILD17.watchCallback && Cstr.watchers && !cmpMeta.$watchers$) {
-      cmpMeta.$watchers$ = Cstr.watchers;
+  if (BUILD17.member && cmpMeta.$members$ || BUILD17.propChangeCallback) {
+    if (BUILD17.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]]) => {
@@ -3321,8 +3335,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(
@@ -3343,7 +3355,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;
                     }
@@ -3366,7 +3378,9 @@ More information: https://stenciljs.com/docs/properties#prop-mutability`
               if (ref.$lazyInstance$) {
                 setterSetVal();
               } else {
-                ref.$onReadyPromise$.then(() => setterSetVal());
+                ref.$fetchedCbList$.push(() => {
+                  setterSetVal();
+                });
               }
             }
           }
@@ -3390,14 +3404,39 @@ More information: https://stenciljs.com/docs/properties#prop-mutability`
         plt.jmp(() => {
           var _a2;
           const propName = attrNameToPropName.get(attrName);
+          const hostRef = getHostRef(this);
+          if (BUILD17.serializer && hostRef.$serializerValues$.has(propName) && hostRef.$serializerValues$.get(propName) === newValue) {
+            return;
+          }
           if (this.hasOwnProperty(propName) && BUILD17.lazyLoad) {
             newValue = this[propName];
             delete this[propName];
+          }
+          if (BUILD17.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 (BUILD17.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 = BUILD17.lazyLoad ? hostRef.$hostElement$ : this;
@@ -3413,7 +3452,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;
           }
         });
@@ -3459,8 +3498,10 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
         throw new Error(`Constructor for "${cmpMeta.$tagName$}#${hostRef.$modeName$}" was not found`);
       }
       if (BUILD18.member && !Cstr.isProxied) {
-        if (BUILD18.watchCallback) {
+        if (BUILD18.propChangeCallback) {
           cmpMeta.$watchers$ = Cstr.watchers;
+          cmpMeta.$serializers$ = Cstr.serializers;
+          cmpMeta.$deserializers$ = Cstr.deserializers;
         }
         proxyComponent(Cstr, cmpMeta, 2 /* proxyState */);
         Cstr.isProxied = true;
@@ -3477,7 +3518,7 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
       if (BUILD18.member) {
         hostRef.$flags$ &= ~8 /* isConstructingInstance */;
       }
-      if (BUILD18.watchCallback) {
+      if (BUILD18.propChangeCallback) {
         hostRef.$flags$ |= 128 /* isWatchReady */;
       }
       endNewInstance();
@@ -3574,7 +3615,7 @@ var connectedCallback = (elm) => {
       }
       if (BUILD19.prop && !BUILD19.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;
@@ -3655,8 +3696,10 @@ var proxyCustomElement = (Cstr, compactMeta) => {
   if (BUILD21.hostListener) {
     cmpMeta.$listeners$ = compactMeta[3];
   }
-  if (BUILD21.watchCallback) {
+  if (BUILD21.propChangeCallback) {
     cmpMeta.$watchers$ = Cstr.$watchers$;
+    cmpMeta.$deserializers$ = Cstr.$deserializers$;
+    cmpMeta.$serializers$ = Cstr.$serializers$;
   }
   if (BUILD21.reflect) {
     cmpMeta.$attrsToReflect$ = [];
@@ -3804,7 +3847,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],
@@ -3823,8 +3866,10 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
       if (BUILD22.reflect) {
         cmpMeta.$attrsToReflect$ = [];
       }
-      if (BUILD22.watchCallback) {
+      if (BUILD22.propChangeCallback) {
         cmpMeta.$watchers$ = (_a2 = compactMeta[4]) != null ? _a2 : {};
+        cmpMeta.$serializers$ = (_b = compactMeta[5]) != null ? _b : {};
+        cmpMeta.$deserializers$ = (_c = compactMeta[6]) != null ? _c : {};
       }
       if (BUILD22.shadowDom && !supportsShadow && cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
         cmpMeta.$flags$ |= 8 /* needsShadowDomShim */;
@@ -4198,6 +4243,9 @@ import { globalScripts } from "@stencil/core/internal/app-globals";
 // src/hydrate/platform/proxy-host-element.ts
 function proxyHostElement(elm, cstr) {
   const cmpMeta = cstr.cmpMeta;
+  cmpMeta.$watchers$ = cmpMeta.$watchers$ || cstr.watchers;
+  cmpMeta.$deserializers$ = cmpMeta.$deserializers$ || cstr.deserializers;
+  cmpMeta.$serializers$ = cmpMeta.$serializers$ || cstr.serializers;
   if (typeof elm.componentOnReady !== "function") {
     elm.componentOnReady = componentOnReady;
   }
@@ -4211,7 +4259,7 @@ function proxyHostElement(elm, cstr) {
     const hostRef = getHostRef(elm);
     const members = Object.entries(cmpMeta.$members$);
     members.forEach(([memberName, [memberFlags, metaAttributeName]]) => {
-      var _a;
+      var _a, _b;
       if (memberFlags & 31 /* Prop */) {
         const attributeName = metaAttributeName || memberName;
         const attrValue = elm.getAttribute(attributeName);
@@ -4219,7 +4267,13 @@ function proxyHostElement(elm, cstr) {
         let attrPropVal;
         const { get: origGetter, set: origSetter } = Object.getOwnPropertyDescriptor(cstr.prototype, memberName) || {};
         if (attrValue != null) {
-          attrPropVal = parsePropertyValue(attrValue, memberFlags, !!(cmpMeta.$flags$ & 64 /* formAssociated */));
+          if ((_a = cmpMeta.$deserializers$) == null ? void 0 : _a[memberName]) {
+            for (const methodName of cmpMeta.$deserializers$[memberName]) {
+              attrPropVal = cstr.prototype[methodName](attrValue, memberName);
+            }
+          } else {
+            attrPropVal = parsePropertyValue(attrValue, memberFlags, !!(cmpMeta.$flags$ & 64 /* formAssociated */));
+          }
         }
         if (propValue !== void 0) {
           attrPropVal = propValue;
@@ -4230,7 +4284,7 @@ function proxyHostElement(elm, cstr) {
             origSetter.apply(elm, [attrPropVal]);
             attrPropVal = origGetter ? origGetter.apply(elm) : attrPropVal;
           }
-          (_a = hostRef == null ? void 0 : hostRef.$instanceValues$) == null ? void 0 : _a.set(memberName, attrPropVal);
+          (_b = hostRef == null ? void 0 : hostRef.$instanceValues$) == null ? void 0 : _b.set(memberName, attrPropVal);
         }
         const getterSetterDescriptor = {
           get: function() {
@@ -4244,21 +4298,18 @@ function proxyHostElement(elm, cstr) {
         };
         Object.defineProperty(elm, memberName, getterSetterDescriptor);
         Object.defineProperty(elm, metaAttributeName, getterSetterDescriptor);
-        if (!cstr.prototype.__stencilAugmented) {
-          Object.defineProperty(cstr.prototype, memberName, {
-            get: function() {
-              var _a2;
-              const ref = getHostRef(this);
-              const attrPropVal2 = (_a2 = ref == null ? void 0 : ref.$instanceValues$) == null ? void 0 : _a2.get(memberName);
-              if (origGetter && attrPropVal2 === void 0 && !getValue(this, memberName)) {
-                setValue(this, memberName, origGetter.apply(this), cmpMeta);
-              }
-              return attrPropVal2 !== void 0 ? attrPropVal2 : origGetter ? origGetter.apply(this) : getValue(this, memberName);
-            },
-            configurable: true,
-            enumerable: true
-          });
-        }
+        hostRef.$fetchedCbList$.push(() => {
+          var _a2;
+          if (!((_a2 = hostRef == null ? void 0 : hostRef.$instanceValues$) == null ? void 0 : _a2.has(memberName))) {
+            setValue(
+              elm,
+              memberName,
+              attrPropVal !== void 0 ? attrPropVal : hostRef.$lazyInstance$[memberName],
+              cmpMeta
+            );
+          }
+          Object.defineProperty(hostRef.$lazyInstance$, memberName, getterSetterDescriptor);
+        });
       } else if (memberFlags & 64 /* Method */) {
         Object.defineProperty(elm, memberName, {
           value(...args) {
@@ -4274,7 +4325,6 @@ function proxyHostElement(elm, cstr) {
         });
       }
     });
-    cstr.prototype.__stencilAugmented = true;
   }
 }
 function componentOnReady() {
@@ -4675,8 +4725,10 @@ var registerHost = (elm, cmpMeta) => {
     $cmpMeta$: cmpMeta,
     $hostElement$: elm,
     $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"] = [];

package/internal/hydrate/package.json

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

package/internal/hydrate/runner.d.ts

@@ -7,12 +7,14 @@ export declare function createWindowFromHtml(templateHtml: string, uniqueId: str
  * Serialize a value to a string that can be deserialized later.
  * @param {unknown} value - The value to serialize.
  * @returns {string} A string that can be deserialized later.
+ * @deprecated will be removed in v5. Use `@PropSerialize()` decorator instead.
  */
 export declare function serializeProperty(value: unknown): string | number | boolean;
 /**
  * Deserialize a value from a string that was serialized earlier.
  * @param {string} value - The string to deserialize.
  * @returns {unknown} The deserialized value.
+ * @deprecated will be removed in v5. Use `@AttrDeserialize()` decorator instead.
  */
 export declare function deserializeProperty(value: string): any;
 export type ResolutionHandler = (elm: HTMLElement) => string | undefined | null;

package/internal/hydrate/runner.js

@@ -1,5 +1,5 @@
 /*
- Stencil Hydrate Runner v4.37.1 | MIT Licensed | https://stenciljs.com
+ Stencil Hydrate Runner v4.38.0 | MIT Licensed | https://stenciljs.com
  */
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {

package/internal/package.json

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

package/internal/stencil-core/index.d.ts

@@ -23,6 +23,8 @@ export type {
   VNodeData,
 } from '../stencil-public-runtime';
 export {
+  AttrDeserialize,
+  PropSerialize,
   AttachInternals,
   Build,
   Component,

package/internal/stencil-private.d.ts

@@ -90,20 +90,22 @@ export interface BuildFeatures {
     hostListenerTarget: boolean;
     method: boolean;
     prop: boolean;
+    propChangeCallback: boolean;
     propMutable: boolean;
     state: boolean;
-    watchCallback: boolean;
     member: boolean;
     updatable: boolean;
     propBoolean: boolean;
     propNumber: boolean;
     propString: boolean;
-    modernPropertyDecls: boolean;
+    serializer: boolean;
+    deserializer: boolean;
     lifecycle: boolean;
     asyncLoading: boolean;
     observeAttribute: boolean;
     reflect: boolean;
     taskQueue: boolean;
+    modernPropertyDecls: boolean;
 }
 export interface BuildConditionals extends Partial<BuildFeatures> {
     hotModuleReplacement?: boolean;
@@ -442,6 +444,7 @@ export interface ComponentCompilerFeatures {
     hasComponentWillRenderFn: boolean;
     hasComponentDidRenderFn: boolean;
     hasConnectedCallbackFn: boolean;
+    hasDeserializer: boolean;
     hasDisconnectedCallbackFn: boolean;
     hasElement: boolean;
     hasEvent: boolean;
@@ -466,6 +469,7 @@ export interface ComponentCompilerFeatures {
     hasPropMutable: boolean;
     hasReflect: boolean;
     hasRenderFn: boolean;
+    hasSerializer: boolean;
     hasState: boolean;
     hasStyle: boolean;
     hasVdomAttribute: boolean;
@@ -523,6 +527,7 @@ export interface ComponentCompilerMeta extends ComponentCompilerFeatures {
      * - indirectly/transitively reference the current component directly in their JSX/h() function
      */
     dependents: string[];
+    deserializers: ComponentCompilerChangeHandler[];
     /**
      * A list of web component tag names that are directly referenced in a Stencil component's JSX/h() function
      */
@@ -547,6 +552,7 @@ export interface ComponentCompilerMeta extends ComponentCompilerFeatures {
     listeners: ComponentCompilerListener[];
     methods: ComponentCompilerMethod[];
     properties: ComponentCompilerProperty[];
+    serializers: ComponentCompilerChangeHandler[];
     shadowDelegatesFocus: boolean;
     sourceFilePath: string;
     sourceMapPath: string;
@@ -555,7 +561,7 @@ export interface ComponentCompilerMeta extends ComponentCompilerFeatures {
     styles: StyleCompiler[];
     tagName: string;
     virtualProperties: ComponentCompilerVirtualProperty[];
-    watchers: ComponentCompilerWatch[];
+    watchers: ComponentCompilerChangeHandler[];
 }
 /**
  * The supported style encapsulation modes on a Stencil component:
@@ -698,7 +704,7 @@ export interface ComponentCompilerMethodComplexType {
     references: ComponentCompilerTypeReferences;
     return: string;
 }
-export interface ComponentCompilerWatch {
+export interface ComponentCompilerChangeHandler {
     propName: string;
     methodName: string;
 }
@@ -774,7 +780,7 @@ export interface ComponentCompilerData {
 export interface ComponentConstructor {
     is?: string;
     properties?: ComponentConstructorProperties;
-    watchers?: ComponentConstructorWatchers;
+    watchers?: ComponentConstructorChangeHandlers;
     events?: ComponentConstructorEvent[];
     listeners?: ComponentConstructorListener[];
     style?: string;
@@ -784,12 +790,14 @@ export interface ComponentConstructor {
     cmpMeta?: ComponentRuntimeMeta;
     isProxied?: boolean;
     isStyleRegistered?: boolean;
+    serializers?: ComponentConstructorChangeHandlers;
+    deserializers?: ComponentConstructorChangeHandlers;
 }
 /**
  * A mapping from class member names to a list of methods which are watching
  * them.
  */
-export interface ComponentConstructorWatchers {
+export interface ComponentConstructorChangeHandlers {
     [propName: string]: string[];
 }
 export interface ComponentTestingConstructor extends ComponentConstructor {
@@ -1412,7 +1420,11 @@ export type ComponentRuntimeMetaCompact = [
     /** listeners */
     ComponentRuntimeHostListener[]?,
     /** watchers */
-    ComponentConstructorWatchers?
+    ComponentConstructorChangeHandlers?,
+    /** serializers */
+    ComponentConstructorChangeHandlers?,
+    /** deserializers */
+    ComponentConstructorChangeHandlers?
 ];
 /**
  * Runtime metadata for a Stencil component
@@ -1447,11 +1459,19 @@ export interface ComponentRuntimeMeta {
     /**
      * Information about which class members have watchers attached on the component.
      */
-    $watchers$?: ComponentConstructorWatchers;
+    $watchers$?: ComponentConstructorChangeHandlers;
     /**
      * A bundle ID used for lazy loading.
      */
     $lazyBundleId$?: string;
+    /**
+     * Information about which class members have prop > attribute serializers attached on the component.
+     */
+    $serializers$?: ComponentConstructorChangeHandlers;
+    /**
+     * Information about which class members have attribute > prop deserializers attached on the component.
+     */
+    $deserializers$?: ComponentConstructorChangeHandlers;
 }
 /**
  * A mapping of the names of members on the component to some runtime-specific
@@ -1508,7 +1528,12 @@ export interface HostRef {
     $cmpMeta$: ComponentRuntimeMeta;
     $hostElement$: HostElement;
     $instanceValues$?: Map<string, any>;
+    $serializerValues$?: Map<string, string>;
     $lazyInstance$?: ComponentInterface;
+    /**
+     * A list of callback functions called immediately after a lazy component module has been fetched.
+     */
+    $fetchedCbList$?: ((elm: HostElement) => void)[];
     /**
      * A promise that gets resolved if `BUILD.asyncLoading` is enabled and after the `componentDidLoad`
      * and before the `componentDidUpdate` lifecycle events are triggered.

package/internal/stencil-public-compiler.d.ts

@@ -138,6 +138,11 @@ export interface StencilConfig {
      * This behavior defaults to `true`, but may be opted-out of by setting this flag to `false`.
      */
     transformAliasedImportPaths?: boolean;
+    /**
+     * When `true`, Stencil will suppress diagnostics which warn about public members using reserved names
+     * (for example, decorating a method named `focus` with `@Method()`). Defaults to `false`.
+     */
+    suppressReservedPublicNameWarnings?: boolean;
     /**
      * When `true`, we will validate a project's `package.json` based on the output target the user has designated
      * as `isPrimaryPackageOutputTarget: true` in their Stencil config.

package/internal/stencil-public-runtime.d.ts

@@ -1,4 +1,4 @@
-declare type CustomMethodDecorator<T> = (target: Object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor<T>) => TypedPropertyDescriptor<T> | void;
+type CustomMethodDecorator<T> = (target: object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor<T>) => TypedPropertyDescriptor<T> | void;
 type UnionToIntersection<U> = (U extends any ? (x: U) => void : never) extends (x: infer I) => void ? I : never;
 export interface ComponentDecorator {
     (opts?: ComponentOptions): ClassDecorator;
@@ -152,7 +152,13 @@ export interface StateDecorator {
     (): PropertyDecorator;
 }
 export interface WatchDecorator {
-    (propName: string): CustomMethodDecorator<any>;
+    (propName: any): CustomMethodDecorator<(newValue?: any, oldValue?: any, propName?: any, ...args: any[]) => any | void>;
+}
+export interface PropSerializeDecorator {
+    (propName: any): CustomMethodDecorator<(newValue?: any, propName?: string, ...args: any[]) => string | null>;
+}
+export interface AttrDeserializeDecorator {
+    (propName: any): CustomMethodDecorator<(newValue?: any, propName?: string, ...args: any[]) => any>;
 }
 export interface UserBuildConditionals {
     isDev: boolean;
@@ -234,6 +240,14 @@ export declare const State: StateDecorator;
  * https://stenciljs.com/docs/reactive-data#watch-decorator
  */
 export declare const Watch: WatchDecorator;
+/**
+ * Decorator to serialize a property to an attribute string.
+ */
+export declare const PropSerialize: PropSerializeDecorator;
+/**
+ * Decorator to deserialize an attribute string to a property.
+ */
+export declare const AttrDeserialize: AttrDeserializeDecorator;
 export type ResolutionHandler = (elm: HTMLElement) => string | undefined | null;
 export type ErrorHandler = (err: any, element?: HTMLElement) => void;
 /**