make deprecated properties optional

stenciljs · Feb 21, 2025 · 06f85fd · 06f85fd
1 parent 51b0e22
commit 06f85fd
Show file tree

Hide file tree

Showing 5 changed files with 122 additions and 16 deletions.
diff --git a/src/compiler/types/generate-component-types.ts b/src/compiler/types/generate-component-types.ts
@@ -89,7 +89,7 @@ const attributesToMultiLineString = (attributes: d.TypeInfo, jsxAttributes: bool
             `${padding} */`,
           ].join('\n'),
         );
-        fullList.push(`${padding}"${type.attributeName}"${optional ? '?' : ''}: ${type.type};`);
+        fullList.push(`${padding}"${type.attributeName}"?: ${type.type};`);
       }
 
       return fullList;

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/test/end-to-end/src/components.d.ts b/test/end-to-end/src/components.d.ts
@@ -43,7 +43,7 @@ export namespace Components {
         /**
          * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
          */
-        "initial-counter": number;
+        "initial-counter"?: number;
     }
     interface CmpServerVsClient {
     }
@@ -108,7 +108,7 @@ export namespace Components {
         /**
          * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
          */
-        "some-prop": number;
+        "some-prop"?: number;
     }
     interface MyCmp {
         /**
@@ -120,15 +120,15 @@ export namespace Components {
         /**
          * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
          */
-        "bar-prop": string;
+        "bar-prop"?: string;
         /**
           * foo prop
          */
         "fooProp": string;
         /**
          * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
          */
-        "foo-prop": string;
+        "foo-prop"?: string;
         /**
           * Mode
          */
@@ -144,15 +144,15 @@ export namespace Components {
         /**
          * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
          */
-        "bar-prop": string;
+        "bar-prop"?: string;
         /**
           * foo prop
          */
         "fooProp": string;
         /**
          * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
          */
-        "foo-prop": string;
+        "foo-prop"?: string;
         /**
           * Mode
          */
@@ -186,12 +186,12 @@ export namespace Components {
         /**
          * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
          */
-        "full-name": string;
+        "full-name"?: string;
         "lastName": string;
         /**
          * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
          */
-        "last-name": string;
+        "last-name"?: string;
         /**
           * Mode
          */
@@ -202,17 +202,17 @@ export namespace Components {
         /**
          * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
          */
-        "basic-prop": string;
+        "basic-prop"?: string;
         "decoratedGetterSetterProp": number;
         /**
          * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
          */
-        "decorated-getter-setter-prop": number;
+        "decorated-getter-setter-prop"?: number;
         "decoratedProp": number;
         /**
          * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
          */
-        "decorated-prop": number;
+        "decorated-prop"?: number;
     }
     interface ScopedCarDetail {
         "car": CarData;

diff --git a/test/wdio/src/components.d.ts b/test/wdio/src/components.d.ts
@@ -23,7 +23,7 @@ export namespace Components {
         /**
          * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
          */
-        "unique-id": string;
+        "unique-id"?: string;
     }
     interface CmpScopedA {
     }