fix(hydrate): support dash-case case in hydrate mode (#6158)

* fix(hydrate): support kebab case in hydrate mode * deprecate usage of dash-casing in JSX * better deprecation message * prettier * prettier * fix unit test * make deprecated properties optional
stenciljs · Feb 21, 2025 · 30f2a09 · 30f2a09
1 parent 2a1038e
commit 30f2a09
Show file tree

Hide file tree

Showing 14 changed files with 612 additions and 146 deletions.
diff --git a/src/compiler/types/generate-component-types.ts b/src/compiler/types/generate-component-types.ts
@@ -76,6 +76,22 @@ const attributesToMultiLineString = (attributes: d.TypeInfo, jsxAttributes: bool
       }
       const optional = jsxAttributes ? !type.required : type.optional;
       fullList.push(`        "${type.name}"${optional ? '?' : ''}: ${type.type};`);
+
+      /**
+       * deprecated usage of dash-casing in JSX, use camelCase instead
+       */
+      if (type.attributeName && type.attributeName !== type.name) {
+        const padding = ' '.repeat(8);
+        fullList.push(
+          [
+            `${padding}/**`,
+            `${padding} * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.`,
+            `${padding} */`,
+          ].join('\n'),
+        );
+        fullList.push(`${padding}"${type.attributeName}"?: ${type.type};`);
+      }
+
       return fullList;
     }, [] as string[])
     .join(`\n`);

diff --git a/src/compiler/types/generate-prop-types.ts b/src/compiler/types/generate-prop-types.ts
@@ -20,6 +20,7 @@ export const generatePropTypes = (cmpMeta: d.ComponentCompilerMeta, typeImportDa
       }
       return {
         name: cmpProp.name,
+        attributeName: cmpProp.attribute,
         type: getType(cmpProp, typeImportData, cmpMeta.sourceFilePath),
         optional: cmpProp.optional,
         required: cmpProp.required,

diff --git a/src/compiler/types/tests/generate-app-types.spec.ts b/src/compiler/types/tests/generate-app-types.spec.ts
@@ -847,6 +847,10 @@ export namespace Components {
      */
     interface MyComponent {
         "name": UserImplementedPropType;
+        /**
+         * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
+         */
+        "my-cmp"?: UserImplementedPropType;
     }
 }
 declare global {
@@ -869,6 +873,10 @@ declare namespace LocalJSX {
      */
     interface MyComponent {
         "name"?: UserImplementedPropType;
+        /**
+         * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
+         */
+        "my-cmp"?: UserImplementedPropType;
     }
     interface IntrinsicElements {
         "my-component": MyComponent;
@@ -949,7 +957,15 @@ export namespace Components {
      */
     interface MyComponent {
         "email": SecondUserImplementedPropType;
+        /**
+         * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
+         */
+        "my-cmp"?: SecondUserImplementedPropType;
         "name": UserImplementedPropType;
+        /**
+         * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
+         */
+        "my-cmp"?: UserImplementedPropType;
     }
 }
 declare global {
@@ -972,7 +988,15 @@ declare namespace LocalJSX {
      */
     interface MyComponent {
         "email"?: SecondUserImplementedPropType;
+        /**
+         * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
+         */
+        "my-cmp"?: SecondUserImplementedPropType;
         "name"?: UserImplementedPropType;
+        /**
+         * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
+         */
+        "my-cmp"?: UserImplementedPropType;
     }
     interface IntrinsicElements {
         "my-component": MyComponent;
@@ -1063,12 +1087,20 @@ export namespace Components {
      */
     interface MyComponent {
         "name": UserImplementedPropType;
+        /**
+         * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
+         */
+        "my-cmp"?: UserImplementedPropType;
     }
     /**
      * docs
      */
     interface MyNewComponent {
         "fullName": UserImplementedPropType;
+        /**
+         * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
+         */
+        "my-cmp"?: UserImplementedPropType;
     }
 }
 declare global {
@@ -1101,12 +1133,20 @@ declare namespace LocalJSX {
      */
     interface MyComponent {
         "name"?: UserImplementedPropType;
+        /**
+         * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
+         */
+        "my-cmp"?: UserImplementedPropType;
     }
     /**
      * docs
      */
     interface MyNewComponent {
         "fullName"?: UserImplementedPropType;
+        /**
+         * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
+         */
+        "my-cmp"?: UserImplementedPropType;
     }
     interface IntrinsicElements {
         "my-component": MyComponent;
@@ -1207,12 +1247,20 @@ export namespace Components {
      */
     interface MyComponent {
         "name": UserImplementedPropType;
+        /**
+         * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
+         */
+        "my-cmp"?: UserImplementedPropType;
     }
     /**
      * docs
      */
     interface MyNewComponent {
         "newName": UserImplementedPropType1;
+        /**
+         * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
+         */
+        "my-cmp"?: UserImplementedPropType1;
     }
 }
 declare global {
@@ -1245,12 +1293,20 @@ declare namespace LocalJSX {
      */
     interface MyComponent {
         "name"?: UserImplementedPropType;
+        /**
+         * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
+         */
+        "my-cmp"?: UserImplementedPropType;
     }
     /**
      * docs
      */
     interface MyNewComponent {
         "newName"?: UserImplementedPropType1;
+        /**
+         * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
+         */
+        "my-cmp"?: UserImplementedPropType1;
     }
     interface IntrinsicElements {
         "my-component": MyComponent;
@@ -1351,12 +1407,20 @@ export namespace Components {
      */
     interface MyComponent {
         "name": UserImplementedPropType;
+        /**
+         * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
+         */
+        "my-cmp"?: UserImplementedPropType;
     }
     /**
      * docs
      */
     interface MyNewComponent {
         "name": UserImplementedPropType1;
+        /**
+         * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
+         */
+        "my-cmp"?: UserImplementedPropType1;
     }
 }
 declare global {
@@ -1389,12 +1453,20 @@ declare namespace LocalJSX {
      */
     interface MyComponent {
         "name"?: UserImplementedPropType;
+        /**
+         * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
+         */
+        "my-cmp"?: UserImplementedPropType;
     }
     /**
      * docs
      */
     interface MyNewComponent {
         "name"?: UserImplementedPropType1;
+        /**
+         * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
+         */
+        "my-cmp"?: UserImplementedPropType1;
     }
     interface IntrinsicElements {
         "my-component": MyComponent;
@@ -1472,6 +1544,10 @@ export namespace Components {
      */
     interface MyComponent {
         "name": UserImplementedPropType;
+        /**
+         * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
+         */
+        "my-cmp"?: UserImplementedPropType;
     }
 }
 export interface MyComponentCustomEvent<T> extends CustomEvent<T> {
@@ -1509,6 +1585,10 @@ declare namespace LocalJSX {
      */
     interface MyComponent {
         "name"?: UserImplementedPropType;
+        /**
+         * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
+         */
+        "my-cmp"?: UserImplementedPropType;
         "onMyEvent"?: (event: MyComponentCustomEvent<UserImplementedEventType>) => void;
     }
     interface IntrinsicElements {
@@ -1590,6 +1670,10 @@ export namespace Components {
      */
     interface MyComponent {
         "name": UserImplementedPropType;
+        /**
+         * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
+         */
+        "my-cmp"?: UserImplementedPropType;
     }
 }
 declare global {
@@ -1612,6 +1696,10 @@ declare namespace LocalJSX {
      */
     interface MyComponent {
         "name"?: UserImplementedPropType;
+        /**
+         * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
+         */
+        "my-cmp"?: UserImplementedPropType;
     }
     interface IntrinsicElements {
         "my-component": MyComponent;
@@ -1682,6 +1770,10 @@ export namespace Components {
      */
     interface MyComponent {
         "name": UserImplementedPropType;
+        /**
+         * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
+         */
+        "my-cmp"?: UserImplementedPropType;
     }
 }
 declare global {
@@ -1704,6 +1796,10 @@ declare namespace LocalJSX {
      */
     interface MyComponent {
         "name"?: UserImplementedPropType;
+        /**
+         * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
+         */
+        "my-cmp"?: UserImplementedPropType;
     }
     interface IntrinsicElements {
         "my-component": MyComponent;
@@ -1762,6 +1858,8 @@ declare module "@stencil/core" {
 
     await generateAppTypes(config, compilerCtx, buildCtx, 'src');
 
+    console.log(mockWriteFile.mock.calls[0][1]);
+
     expect(mockWriteFile).toHaveBeenCalledWith(
       '/components.d.ts',
       `/* eslint-disable */
@@ -1781,6 +1879,10 @@ export namespace Components {
      */
     interface MyComponent {
         "name": UserImplementedPropType;
+        /**
+         * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
+         */
+        "my-cmp"?: UserImplementedPropType;
     }
 }
 declare global {
@@ -1803,6 +1905,10 @@ declare namespace LocalJSX {
      */
     interface MyComponent {
         "name"?: UserImplementedPropType;
+        /**
+         * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
+         */
+        "my-cmp"?: UserImplementedPropType;
     }
     interface IntrinsicElements {
         "my-component": MyComponent;

diff --git a/src/compiler/types/tests/generate-prop-types.spec.ts b/src/compiler/types/tests/generate-prop-types.spec.ts
@@ -44,6 +44,7 @@ describe('generate-prop-types', () => {
 
       const expectedTypeInfo: d.TypeInfo = [
         {
+          attributeName: 'my-cmp',
           jsdoc: '',
           internal: false,
           name: 'propName',
@@ -69,6 +70,7 @@ describe('generate-prop-types', () => {
 
       const expectedTypeInfo: d.TypeInfo = [
         {
+          attributeName: 'my-cmp',
           jsdoc: '',
           internal: false,
           name: 'propName',
@@ -114,6 +116,7 @@ describe('generate-prop-types', () => {
 
       const expectedTypeInfo: d.TypeInfo = [
         {
+          attributeName: 'my-cmp',
           jsdoc: '',
           internal: false,
           name: 'propName',
@@ -149,6 +152,7 @@ describe('generate-prop-types', () => {
 
       const expectedTypeInfo: d.TypeInfo = [
         {
+          attributeName: 'my-cmp',
           jsdoc: '@readonly',
           internal: false,
           name: 'propName',
@@ -176,6 +180,7 @@ describe('generate-prop-types', () => {
 
       const expectedTypeInfo: d.TypeInfo = [
         {
+          attributeName: 'my-cmp',
           jsdoc: '',
           internal: false,
           name: 'propName',

diff --git a/src/declarations/stencil-private.ts b/src/declarations/stencil-private.ts
@@ -2565,6 +2565,7 @@ export interface TypesModule {
 export type TypeInfo = {
   name: string;
   type: string;
+  attributeName?: string;
   optional: boolean;
   required: boolean;
   internal: boolean;

diff --git a/src/hydrate/platform/proxy-host-element.ts b/src/hydrate/platform/proxy-host-element.ts
@@ -90,17 +90,18 @@ export function proxyHostElement(elm: d.HostElement, cstr: d.ComponentConstructo
         }
 
         // element
-        Object.defineProperty(elm, memberName, {
-          get: function (this: any) {
+        const getterSetterDescriptor: PropertyDescriptor = {
+          get: function (this: d.RuntimeRef) {
             return getValue(this, memberName);
           },
-          set(this: d.RuntimeRef, newValue) {
-            // proxyComponent, set value
+          set: function (this: d.RuntimeRef, newValue: unknown) {
             setValue(this, memberName, newValue, cmpMeta);
           },
           configurable: true,
           enumerable: true,
-        });
+        };
+        Object.defineProperty(elm, memberName, getterSetterDescriptor);
+        Object.defineProperty(elm, metaAttributeName, getterSetterDescriptor);
 
         if (!(cstr as any).prototype.__stencilAugmented) {
           // instance prototype