diff --git a/src/compiler/types/generate-app-types.ts b/src/compiler/types/generate-app-types.ts index 1584de585b5..bff21008d3c 100644 --- 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 index 8274ecafa04..a9798297f5c 100644 --- 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 index 58301fb6d08..234202f6dd9 100644 --- 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; + } + } +} `, { immediateWrite: true, diff --git a/src/compiler/types/tests/stencil-types.spec.ts b/src/compiler/types/tests/stencil-types.spec.ts index 8ea6168fcf9..08b445a63bd 100644 --- 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 index a534bdd59e5..60aa81d44b7 100644 --- 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 index 2809e873ccc..317875fb904 100644 --- 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. */