fix(compiler): components typedef path aliases

src/compiler/types/generate-app-types.ts

@@ -78,7 +78,13 @@ const generateComponentTypesFile = (config: d.Config, buildCtx: d.BuildCtx, areT
      * data structure for each Stencil component in series, therefore the memory footprint of this entity will likely
      * grow as more components (with additional types) are processed.
      */
-    typeImportData = updateReferenceTypeImports(typeImportData, allTypes, cmp, cmp.sourceFilePath);
+    typeImportData = updateReferenceTypeImports(
+      typeImportData,
+      allTypes,
+      cmp,
+      cmp.sourceFilePath,
+      config.tsCompilerOptions
+    );
     if (cmp.events.length > 0) {
       /**
        * Only generate event detail types for components that have events.

src/compiler/types/tests/generate-app-types.spec.ts

@@ -1,4 +1,5 @@
 import { mockBuildCtx, mockCompilerCtx, mockValidatedConfig } from '@stencil/core/testing';
+import ts, { Extension } from 'typescript';
 
 import type * as d from '../../../declarations';
 import { generateAppTypes } from '../generate-app-types';
@@ -1406,6 +1407,106 @@ declare module "@stencil/core" {
                 }
         }
 }
+`,
+      {
+        immediateWrite: true,
+      }
+    );
+  });
+
+  it('should transform aliased paths', async () => {
+    // TODO(STENCIL-223): remove spy to test actual resolution behavior
+    jest.spyOn(ts, 'resolveModuleName').mockReturnValue({
+      resolvedModule: {
+        isExternalLibraryImport: false,
+        extension: Extension.Dts,
+        resolvedFileName: 'utils',
+      },
+    });
+
+    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: {
+                location: 'import',
+                path: '@utils',
+              },
+            },
+          },
+        }),
+      ],
+    });
+    buildCtx.components = [compilerComponentMeta];
+    config.tsCompilerOptions = {};
+
+    await generateAppTypes(config, compilerCtx, buildCtx, 'src');
+
+    expect(mockFs.writeFile).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 { UserImplementedPropType } from "utils";
+export { 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,

src/compiler/types/update-import-refs.ts

@@ -1,4 +1,5 @@
 import { dirname, resolve } from 'path';
+import ts from 'typescript';
 
 import type * as d from '../../declarations';
 
@@ -8,15 +9,17 @@ import type * as d from '../../declarations';
  * @param typeCounts a map of seen types and the number of times the type has been seen
  * @param cmp the metadata associated with the component whose types are being inspected
  * @param filePath the path of the component file
+ * @param tsOptions The TS compiler options to be used for resolving aliased module paths
  * @returns the updated import data
  */
 export const updateReferenceTypeImports = (
   importDataObj: d.TypesImportData,
   typeCounts: Map<string, number>,
   cmp: d.ComponentCompilerMeta,
-  filePath: string
+  filePath: string,
+  tsOptions: ts.CompilerOptions
 ): d.TypesImportData => {
-  const updateImportReferences = updateImportReferenceFactory(typeCounts, filePath);
+  const updateImportReferences = updateImportReferenceFactory(typeCounts, filePath, tsOptions);
 
   return [...cmp.properties, ...cmp.events, ...cmp.methods]
     .filter(
@@ -44,9 +47,14 @@ type ImportReferenceUpdater = (
  * Factory function to create an `ImportReferenceUpdater` instance
  * @param typeCounts a key-value store of seen type names and the number of times the type name has been seen
  * @param filePath the path of the file containing the component whose imports are being inspected
+ * @param tsOptions The TS compiler options to be used for resolving aliased module paths
  * @returns an `ImportReferenceUpdater` instance for updating import references in the provided `filePath`
  */
-const updateImportReferenceFactory = (typeCounts: Map<string, number>, filePath: string): ImportReferenceUpdater => {
+const updateImportReferenceFactory = (
+  typeCounts: Map<string, number>,
+  filePath: string,
+  tsOptions: ts.CompilerOptions
+): ImportReferenceUpdater => {
   /**
    * Determines the number of times that a type identifier (name) has been used. If an identifier has been used before,
    * append the number of times the identifier has been seen to its name to avoid future naming collisions
@@ -83,6 +91,21 @@ const updateImportReferenceFactory = (typeCounts: Map<string, number>, filePath:
           importResolvedFile = filePath;
         } else if (typeReference.location === 'import') {
           importResolvedFile = typeReference.path;
+
+          // We only care to resolve any _potential_ aliased
+          // modules if we're not already certain the path isn't an alias
+          if (!importResolvedFile.startsWith('.')) {
+            const { resolvedModule } = ts.resolveModuleName(
+              typeReference.path,
+              filePath,
+              tsOptions,
+              ts.createCompilerHost(tsOptions)
+            );
+
+            if (!resolvedModule.isExternalLibraryImport && resolvedModule.resolvedFileName) {
+              importResolvedFile = resolvedModule.resolvedFileName;
+            }
+          }
         }
 
         // If this is a relative path make it absolute