feat(complier): support type import aliasing (#5836)

* correctly reference type aliases when generating `components.d.ts` * fix/add tests
ionic-team · Jun 18, 2024 · 7ffb25d · 7ffb25d
1 parent 2c91b8c
commit 7ffb25d
Show file tree

Hide file tree

Showing 6 changed files with 133 additions and 20 deletions.
diff --git a/src/compiler/types/generate-app-types.ts b/src/compiler/types/generate-app-types.ts
@@ -108,10 +108,10 @@ const generateComponentTypesFile = (
     return `{ ${typeData
       .sort(sortImportNames)
       .map((td) => {
-        if (td.localName === td.importName) {
-          return `${td.importName}`;
+        if (td.originalName === td.importName) {
+          return `${td.originalName}`;
         } else {
-          return `${td.localName} as ${td.importName}`;
+          return `${td.originalName} as ${td.importName}`;
         }
       })
       .join(`, `)} } from "${importFilePath}";`;

diff --git a/src/compiler/types/tests/ComponentCompilerEvent.stub.ts b/src/compiler/types/tests/ComponentCompilerEvent.stub.ts
@@ -22,7 +22,7 @@ export const stubComponentCompilerEvent = (
       resolved: '"foo" | "bar"',
       references: {
         UserImplementedEventType: {
-          id: 'placeholder',
+          id: './resources.ts::UserImplementedEventType',
           location: 'import',
           path: './resources',
         },

diff --git a/src/compiler/types/tests/generate-app-types.spec.ts b/src/compiler/types/tests/generate-app-types.spec.ts
@@ -206,7 +206,7 @@ declare module "@stencil/core" {
               resolved: '"wee" | "woo"',
               references: {
                 SecondUserImplementedEventType: {
-                  id: 'placeholder',
+                  id: './resources.ts::SecondUserImplementedEventType',
                   location: 'import',
                   path: './resources',
                 },
@@ -310,7 +310,7 @@ declare module "@stencil/core" {
               references: {
                 UserImplementedEventType: {
                   location: 'import',
-                  id: 'placeholder',
+                  id: './resources.ts::UserImplementedEventType',
                   path: './resources',
                 },
               },
@@ -479,7 +479,7 @@ declare module "@stencil/core" {
                 UserImplementedEventType: {
                   location: 'import',
                   path: './resources',
-                  id: 'placeholder',
+                  id: './resources::UserImplementedEventType',
                 },
               },
             },
@@ -502,7 +502,7 @@ declare module "@stencil/core" {
                 UserImplementedEventType: {
                   location: 'import',
                   path: './resources',
-                  id: 'placeholder',
+                  id: './resources::UserImplementedEventType',
                 },
               },
             },
@@ -649,7 +649,7 @@ declare module "@stencil/core" {
                 UserImplementedEventType: {
                   location: 'local',
                   path: '/some/stubbed/path/a/my-component.tsx',
-                  id: 'placeholder',
+                  id: '/some/stubbed/path/a/my-component.tsx::UserImplementedEventType',
                 },
               },
             },
@@ -671,7 +671,7 @@ declare module "@stencil/core" {
               references: {
                 UserImplementedEventType: {
                   location: 'local',
-                  id: 'placeholder',
+                  id: '/some/stubbed/path/b/my-new-component.tsx::UserImplementedEventType',
                   path: '/some/stubbed/path/b/my-new-component.tsx',
                 },
               },
@@ -819,7 +819,7 @@ declare module "@stencil/core" {
                 UserImplementedPropType: {
                   location: 'import',
                   path: './resources',
-                  id: 'placeholder',
+                  id: './resources::UserImplementedPropType',
                 },
               },
             },
@@ -907,7 +907,7 @@ declare module "@stencil/core" {
                 UserImplementedPropType: {
                   location: 'import',
                   path: './resources',
-                  id: 'placeholder',
+                  id: './resources::UserImplementedPropType',
                 },
               },
             },
@@ -921,7 +921,7 @@ declare module "@stencil/core" {
                 SecondUserImplementedPropType: {
                   location: 'import',
                   path: './resources',
-                  id: 'placeholder',
+                  id: './resources::SecondUserImplementedPropType',
                 },
               },
             },
@@ -1011,7 +1011,7 @@ declare module "@stencil/core" {
                 UserImplementedPropType: {
                   location: 'import',
                   path: './resources',
-                  id: 'placeholder',
+                  id: './resources::UserImplementedPropType',
                 },
               },
             },
@@ -1035,7 +1035,7 @@ declare module "@stencil/core" {
                 UserImplementedPropType: {
                   location: 'import',
                   path: '../resources',
-                  id: 'placeholder',
+                  id: '../resources::UserImplementedPropType',
                 },
               },
             },
@@ -1152,7 +1152,7 @@ declare module "@stencil/core" {
               references: {
                 UserImplementedPropType: {
                   location: 'import',
-                  id: 'placeholder',
+                  id: './resources.ts::UserImplementedPropType',
                   path: './resources',
                 },
               },
@@ -1177,7 +1177,7 @@ declare module "@stencil/core" {
                 UserImplementedPropType: {
                   location: 'import',
                   path: './resources',
-                  id: 'placeholder',
+                  id: './resources.ts::UserImplementedPropType',
                 },
               },
             },
@@ -1297,7 +1297,7 @@ declare module "@stencil/core" {
                 UserImplementedPropType: {
                   location: 'local',
                   path: '/some/stubbed/path/a/my-component.tsx',
-                  id: 'placeholder',
+                  id: '/some/stubbed/path/a/my-component.tsx::UserImplementedPropType',
                 },
               },
             },
@@ -1321,7 +1321,7 @@ declare module "@stencil/core" {
                 UserImplementedPropType: {
                   location: 'local',
                   path: '/some/stubbed/path/b/my-new-component.tsx',
-                  id: 'placeholder',
+                  id: '/some/stubbed/path/b/my-new-component.tsx::UserImplementedPropType',
                 },
               },
             },
@@ -1444,7 +1444,7 @@ declare module "@stencil/core" {
               UserImplementedPropType: {
                 location: 'import',
                 path: './resources',
-                id: 'placeholder',
+                id: './resources.ts::UserImplementedPropType',
               },
             },
           },
@@ -1720,6 +1720,98 @@ declare module "@stencil/core" {
         }
     }
 }
+`,
+      {
+        immediateWrite: true,
+      },
+    );
+  });
+
+  it('should handle type import aliases', async () => {
+    const compilerComponentMeta = stubComponentCompilerMeta({
+      tagName: 'my-component',
+      componentClassName: 'MyComponent',
+      jsFilePath: '/some/stubbed/path/a/my-component.js',
+      sourceFilePath: '/some/stubbed/path/a/my-component.tsx',
+      sourceMapPath: '/some/stubbed/path/a/my-component.js.map',
+      hasProp: true,
+      properties: [
+        stubComponentCompilerProperty({
+          name: 'name',
+          complexType: {
+            original: 'UserImplementedPropType',
+            resolved: '"foo" | "bar"',
+            references: {
+              UserImplementedPropType: {
+                id: 'some-file.ts::MyType',
+                location: 'import',
+                path: '@utils',
+              },
+            },
+          },
+        }),
+      ],
+    });
+    buildCtx.components = [compilerComponentMeta];
+    config.tsCompilerOptions = {};
+
+    await generateAppTypes(config, compilerCtx, buildCtx, 'src');
+
+    expect(mockWriteFile).toHaveBeenCalledWith(
+      '/components.d.ts',
+      `/* eslint-disable */
+/* tslint:disable */
+/**
+ * This is an autogenerated file created by the Stencil compiler.
+ * It contains typing information for all components that exist in this project.
+ */
+import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
+import { MyType as UserImplementedPropType } from "@utils";
+export { MyType as UserImplementedPropType } from "@utils";
+export namespace Components {
+    /**
+     * docs
+     */
+    interface MyComponent {
+        "name": UserImplementedPropType;
+    }
+}
+declare global {
+    /**
+     * docs
+     */
+    interface HTMLMyComponentElement extends Components.MyComponent, HTMLStencilElement {
+    }
+    var HTMLMyComponentElement: {
+        prototype: HTMLMyComponentElement;
+        new (): HTMLMyComponentElement;
+    };
+    interface HTMLElementTagNameMap {
+        "my-component": HTMLMyComponentElement;
+    }
+}
+declare namespace LocalJSX {
+    /**
+     * docs
+     */
+    interface MyComponent {
+        "name"?: UserImplementedPropType;
+    }
+    interface IntrinsicElements {
+        "my-component": MyComponent;
+    }
+}
+export { LocalJSX as JSX };
+declare module "@stencil/core" {
+    export namespace JSX {
+        interface IntrinsicElements {
+            /**
+             * docs
+             */
+            "my-component": LocalJSX.MyComponent & JSXBase.HTMLAttributes<HTMLMyComponentElement>;
+        }
+    }
+}
 `,
       {
         immediateWrite: true,

diff --git a/src/compiler/types/tests/stencil-types.spec.ts b/src/compiler/types/tests/stencil-types.spec.ts
@@ -111,6 +111,7 @@ describe('stencil-types', () => {
           [typePath]: [
             {
               localName: 'SomeOtherType',
+              originalName: 'SomeOtherType',
             },
           ],
         });
@@ -176,6 +177,7 @@ describe('stencil-types', () => {
           [typePath]: [
             {
               localName: initialType,
+              originalName: initialType,
               importName: expectedType,
             },
           ],
@@ -198,6 +200,7 @@ describe('stencil-types', () => {
       const typeMemberNames = [
         {
           localName: 'SomeType',
+          originalName: 'SomeType',
           importName: 'SomeOtherType',
         },
       ];
@@ -211,6 +214,7 @@ describe('stencil-types', () => {
       const typeMemberNames = [
         {
           localName: 'Ar',
+          originalName: 'Ar',
           importName: 'Ar1',
         },
       ];
@@ -224,6 +228,7 @@ describe('stencil-types', () => {
       const typeMemberNames = [
         {
           localName: 'Ar',
+          originalName: 'Ar',
           importName: 'Ar1',
         },
       ];
@@ -237,10 +242,12 @@ describe('stencil-types', () => {
       const typeMemberNames = [
         {
           localName: 'SomeType',
+          originalName: 'SomeType',
           importName: 'SomeType1',
         },
         {
           localName: 'AnotherType',
+          originalName: 'AnotherType',
           importName: 'AnotherType1',
         },
       ];
@@ -254,6 +261,7 @@ describe('stencil-types', () => {
       const typeMemberNames = [
         {
           localName: 'SomeType',
+          originalName: 'SomeType',
           importName: 'SomeType1',
         },
       ];
@@ -279,6 +287,7 @@ describe('stencil-types', () => {
       const typeMemberNames = [
         {
           localName: 'SomeType',
+          originalName: 'SomeType',
           importName: 'SomeType1',
         },
       ];

diff --git a/src/compiler/types/update-import-refs.ts b/src/compiler/types/update-import-refs.ts
@@ -124,6 +124,9 @@ const updateImportReferenceFactory = (
 
         const newTypeName = getIncrementTypeName(typeName);
         existingTypeImportData[importResolvedFile].push({
+          // Since we create a unique ID for each type for documentation generation purposes, we can parse
+          // that ID to get the original name for the export
+          originalName: typeReference.id.split('::').pop(),
           localName: typeName,
           importName: newTypeName,
         });

diff --git a/src/declarations/stencil-private.ts b/src/declarations/stencil-private.ts
@@ -2360,6 +2360,15 @@ export interface TypesImportData {
  * as generating `components.d.ts` files.
  */
 export interface TypesMemberNameData {
+  /**
+   * The original name of the import before any aliasing was applied.
+   *
+   * i.e. if a component imports a type as follows:
+   * `import { MyType as MyCoolType } from './my-type';`
+   *
+   * the `originalName` would be 'MyType'. If the import is not aliased, then `originalName` and `localName` will be the same.
+   */
+  originalName: string;
   /**
    * The name of the type as it's used within a file.
    */