Skip to content

Commit 7ffb25d

Browse files
tanner-reitstanner-reits
authored
feat(complier): support type import aliasing (#5836)
* correctly reference type aliases when generating `components.d.ts` * fix/add tests
1 parent 2c91b8c commit 7ffb25d

6 files changed

Lines changed: 133 additions & 20 deletions

File tree

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -108,10 +108,10 @@ const generateComponentTypesFile = (
108108
return `{ ${typeData
109109
.sort(sortImportNames)
110110
.map((td) => {
111-
if (td.localName === td.importName) {
112-
return `${td.importName}`;
111+
if (td.originalName === td.importName) {
112+
return `${td.originalName}`;
113113
} else {
114-
return `${td.localName} as ${td.importName}`;
114+
return `${td.originalName} as ${td.importName}`;
115115
}
116116
})
117117
.join(`, `)} } from "${importFilePath}";`;

‎src/compiler/types/tests/ComponentCompilerEvent.stub.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export const stubComponentCompilerEvent = (
2222
resolved: '"foo" | "bar"',
2323
references: {
2424
UserImplementedEventType: {
25-
id: 'placeholder',
25+
id: './resources.ts::UserImplementedEventType',
2626
location: 'import',
2727
path: './resources',
2828
},

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

Lines changed: 108 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -206,7 +206,7 @@ declare module "@stencil/core" {
206206
resolved: '"wee" | "woo"',
207207
references: {
208208
SecondUserImplementedEventType: {
209-
id: 'placeholder',
209+
id: './resources.ts::SecondUserImplementedEventType',
210210
location: 'import',
211211
path: './resources',
212212
},
@@ -310,7 +310,7 @@ declare module "@stencil/core" {
310310
references: {
311311
UserImplementedEventType: {
312312
location: 'import',
313-
id: 'placeholder',
313+
id: './resources.ts::UserImplementedEventType',
314314
path: './resources',
315315
},
316316
},
@@ -479,7 +479,7 @@ declare module "@stencil/core" {
479479
UserImplementedEventType: {
480480
location: 'import',
481481
path: './resources',
482-
id: 'placeholder',
482+
id: './resources::UserImplementedEventType',
483483
},
484484
},
485485
},
@@ -502,7 +502,7 @@ declare module "@stencil/core" {
502502
UserImplementedEventType: {
503503
location: 'import',
504504
path: './resources',
505-
id: 'placeholder',
505+
id: './resources::UserImplementedEventType',
506506
},
507507
},
508508
},
@@ -649,7 +649,7 @@ declare module "@stencil/core" {
649649
UserImplementedEventType: {
650650
location: 'local',
651651
path: '/some/stubbed/path/a/my-component.tsx',
652-
id: 'placeholder',
652+
id: '/some/stubbed/path/a/my-component.tsx::UserImplementedEventType',
653653
},
654654
},
655655
},
@@ -671,7 +671,7 @@ declare module "@stencil/core" {
671671
references: {
672672
UserImplementedEventType: {
673673
location: 'local',
674-
id: 'placeholder',
674+
id: '/some/stubbed/path/b/my-new-component.tsx::UserImplementedEventType',
675675
path: '/some/stubbed/path/b/my-new-component.tsx',
676676
},
677677
},
@@ -819,7 +819,7 @@ declare module "@stencil/core" {
819819
UserImplementedPropType: {
820820
location: 'import',
821821
path: './resources',
822-
id: 'placeholder',
822+
id: './resources::UserImplementedPropType',
823823
},
824824
},
825825
},
@@ -907,7 +907,7 @@ declare module "@stencil/core" {
907907
UserImplementedPropType: {
908908
location: 'import',
909909
path: './resources',
910-
id: 'placeholder',
910+
id: './resources::UserImplementedPropType',
911911
},
912912
},
913913
},
@@ -921,7 +921,7 @@ declare module "@stencil/core" {
921921
SecondUserImplementedPropType: {
922922
location: 'import',
923923
path: './resources',
924-
id: 'placeholder',
924+
id: './resources::SecondUserImplementedPropType',
925925
},
926926
},
927927
},
@@ -1011,7 +1011,7 @@ declare module "@stencil/core" {
10111011
UserImplementedPropType: {
10121012
location: 'import',
10131013
path: './resources',
1014-
id: 'placeholder',
1014+
id: './resources::UserImplementedPropType',
10151015
},
10161016
},
10171017
},
@@ -1035,7 +1035,7 @@ declare module "@stencil/core" {
10351035
UserImplementedPropType: {
10361036
location: 'import',
10371037
path: '../resources',
1038-
id: 'placeholder',
1038+
id: '../resources::UserImplementedPropType',
10391039
},
10401040
},
10411041
},
@@ -1152,7 +1152,7 @@ declare module "@stencil/core" {
11521152
references: {
11531153
UserImplementedPropType: {
11541154
location: 'import',
1155-
id: 'placeholder',
1155+
id: './resources.ts::UserImplementedPropType',
11561156
path: './resources',
11571157
},
11581158
},
@@ -1177,7 +1177,7 @@ declare module "@stencil/core" {
11771177
UserImplementedPropType: {
11781178
location: 'import',
11791179
path: './resources',
1180-
id: 'placeholder',
1180+
id: './resources.ts::UserImplementedPropType',
11811181
},
11821182
},
11831183
},
@@ -1297,7 +1297,7 @@ declare module "@stencil/core" {
12971297
UserImplementedPropType: {
12981298
location: 'local',
12991299
path: '/some/stubbed/path/a/my-component.tsx',
1300-
id: 'placeholder',
1300+
id: '/some/stubbed/path/a/my-component.tsx::UserImplementedPropType',
13011301
},
13021302
},
13031303
},
@@ -1321,7 +1321,7 @@ declare module "@stencil/core" {
13211321
UserImplementedPropType: {
13221322
location: 'local',
13231323
path: '/some/stubbed/path/b/my-new-component.tsx',
1324-
id: 'placeholder',
1324+
id: '/some/stubbed/path/b/my-new-component.tsx::UserImplementedPropType',
13251325
},
13261326
},
13271327
},
@@ -1444,7 +1444,7 @@ declare module "@stencil/core" {
14441444
UserImplementedPropType: {
14451445
location: 'import',
14461446
path: './resources',
1447-
id: 'placeholder',
1447+
id: './resources.ts::UserImplementedPropType',
14481448
},
14491449
},
14501450
},
@@ -1720,6 +1720,98 @@ declare module "@stencil/core" {
17201720
}
17211721
}
17221722
}
1723+
`,
1724+
{
1725+
immediateWrite: true,
1726+
},
1727+
);
1728+
});
1729+
1730+
it('should handle type import aliases', async () => {
1731+
const compilerComponentMeta = stubComponentCompilerMeta({
1732+
tagName: 'my-component',
1733+
componentClassName: 'MyComponent',
1734+
jsFilePath: '/some/stubbed/path/a/my-component.js',
1735+
sourceFilePath: '/some/stubbed/path/a/my-component.tsx',
1736+
sourceMapPath: '/some/stubbed/path/a/my-component.js.map',
1737+
hasProp: true,
1738+
properties: [
1739+
stubComponentCompilerProperty({
1740+
name: 'name',
1741+
complexType: {
1742+
original: 'UserImplementedPropType',
1743+
resolved: '"foo" | "bar"',
1744+
references: {
1745+
UserImplementedPropType: {
1746+
id: 'some-file.ts::MyType',
1747+
location: 'import',
1748+
path: '@utils',
1749+
},
1750+
},
1751+
},
1752+
}),
1753+
],
1754+
});
1755+
buildCtx.components = [compilerComponentMeta];
1756+
config.tsCompilerOptions = {};
1757+
1758+
await generateAppTypes(config, compilerCtx, buildCtx, 'src');
1759+
1760+
expect(mockWriteFile).toHaveBeenCalledWith(
1761+
'/components.d.ts',
1762+
`/* eslint-disable */
1763+
/* tslint:disable */
1764+
/**
1765+
* This is an autogenerated file created by the Stencil compiler.
1766+
* It contains typing information for all components that exist in this project.
1767+
*/
1768+
import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
1769+
import { MyType as UserImplementedPropType } from "@utils";
1770+
export { MyType as UserImplementedPropType } from "@utils";
1771+
export namespace Components {
1772+
/**
1773+
* docs
1774+
*/
1775+
interface MyComponent {
1776+
"name": UserImplementedPropType;
1777+
}
1778+
}
1779+
declare global {
1780+
/**
1781+
* docs
1782+
*/
1783+
interface HTMLMyComponentElement extends Components.MyComponent, HTMLStencilElement {
1784+
}
1785+
var HTMLMyComponentElement: {
1786+
prototype: HTMLMyComponentElement;
1787+
new (): HTMLMyComponentElement;
1788+
};
1789+
interface HTMLElementTagNameMap {
1790+
"my-component": HTMLMyComponentElement;
1791+
}
1792+
}
1793+
declare namespace LocalJSX {
1794+
/**
1795+
* docs
1796+
*/
1797+
interface MyComponent {
1798+
"name"?: UserImplementedPropType;
1799+
}
1800+
interface IntrinsicElements {
1801+
"my-component": MyComponent;
1802+
}
1803+
}
1804+
export { LocalJSX as JSX };
1805+
declare module "@stencil/core" {
1806+
export namespace JSX {
1807+
interface IntrinsicElements {
1808+
/**
1809+
* docs
1810+
*/
1811+
"my-component": LocalJSX.MyComponent & JSXBase.HTMLAttributes<HTMLMyComponentElement>;
1812+
}
1813+
}
1814+
}
17231815
`,
17241816
{
17251817
immediateWrite: true,

‎src/compiler/types/tests/stencil-types.spec.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,7 @@ describe('stencil-types', () => {
111111
[typePath]: [
112112
{
113113
localName: 'SomeOtherType',
114+
originalName: 'SomeOtherType',
114115
},
115116
],
116117
});
@@ -176,6 +177,7 @@ describe('stencil-types', () => {
176177
[typePath]: [
177178
{
178179
localName: initialType,
180+
originalName: initialType,
179181
importName: expectedType,
180182
},
181183
],
@@ -198,6 +200,7 @@ describe('stencil-types', () => {
198200
const typeMemberNames = [
199201
{
200202
localName: 'SomeType',
203+
originalName: 'SomeType',
201204
importName: 'SomeOtherType',
202205
},
203206
];
@@ -211,6 +214,7 @@ describe('stencil-types', () => {
211214
const typeMemberNames = [
212215
{
213216
localName: 'Ar',
217+
originalName: 'Ar',
214218
importName: 'Ar1',
215219
},
216220
];
@@ -224,6 +228,7 @@ describe('stencil-types', () => {
224228
const typeMemberNames = [
225229
{
226230
localName: 'Ar',
231+
originalName: 'Ar',
227232
importName: 'Ar1',
228233
},
229234
];
@@ -237,10 +242,12 @@ describe('stencil-types', () => {
237242
const typeMemberNames = [
238243
{
239244
localName: 'SomeType',
245+
originalName: 'SomeType',
240246
importName: 'SomeType1',
241247
},
242248
{
243249
localName: 'AnotherType',
250+
originalName: 'AnotherType',
244251
importName: 'AnotherType1',
245252
},
246253
];
@@ -254,6 +261,7 @@ describe('stencil-types', () => {
254261
const typeMemberNames = [
255262
{
256263
localName: 'SomeType',
264+
originalName: 'SomeType',
257265
importName: 'SomeType1',
258266
},
259267
];
@@ -279,6 +287,7 @@ describe('stencil-types', () => {
279287
const typeMemberNames = [
280288
{
281289
localName: 'SomeType',
290+
originalName: 'SomeType',
282291
importName: 'SomeType1',
283292
},
284293
];

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,9 @@ const updateImportReferenceFactory = (
124124

125125
const newTypeName = getIncrementTypeName(typeName);
126126
existingTypeImportData[importResolvedFile].push({
127+
// Since we create a unique ID for each type for documentation generation purposes, we can parse
128+
// that ID to get the original name for the export
129+
originalName: typeReference.id.split('::').pop(),
127130
localName: typeName,
128131
importName: newTypeName,
129132
});

‎src/declarations/stencil-private.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2360,6 +2360,15 @@ export interface TypesImportData {
23602360
* as generating `components.d.ts` files.
23612361
*/
23622362
export interface TypesMemberNameData {
2363+
/**
2364+
* The original name of the import before any aliasing was applied.
2365+
*
2366+
* i.e. if a component imports a type as follows:
2367+
* `import { MyType as MyCoolType } from './my-type';`
2368+
*
2369+
* the `originalName` would be 'MyType'. If the import is not aliased, then `originalName` and `localName` will be the same.
2370+
*/
2371+
originalName: string;
23632372
/**
23642373
* The name of the type as it's used within a file.
23652374
*/

0 commit comments

Comments
 (0)