@atlaskit/forge-react-types 0.13.0 → 0.14.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (31) hide show
  1. package/CHANGELOG.md +93 -80
  2. package/LICENSE.md +6 -8
  3. package/dist/types/components/__generated__/ButtonProps.codegen.d.ts +1 -1
  4. package/dist/types/components/__generated__/CheckboxGroupProps.codegen.d.ts +2 -2
  5. package/dist/types/components/__generated__/DatePickerProps.codegen.d.ts +1 -1
  6. package/dist/types/components/__generated__/FormProps.codegen.d.ts +2 -2
  7. package/dist/types/components/__generated__/IconProps.codegen.d.ts +2 -2
  8. package/dist/types/components/__generated__/ListItemProps.codegen.d.ts +2 -2
  9. package/dist/types/components/__generated__/ListProps.codegen.d.ts +2 -2
  10. package/dist/types/components/__generated__/types.codegen.d.ts +2 -2
  11. package/dist/types-ts4.5/components/__generated__/ButtonProps.codegen.d.ts +1 -1
  12. package/dist/types-ts4.5/components/__generated__/CheckboxGroupProps.codegen.d.ts +2 -2
  13. package/dist/types-ts4.5/components/__generated__/DatePickerProps.codegen.d.ts +1 -1
  14. package/dist/types-ts4.5/components/__generated__/FormProps.codegen.d.ts +2 -2
  15. package/dist/types-ts4.5/components/__generated__/IconProps.codegen.d.ts +2 -2
  16. package/dist/types-ts4.5/components/__generated__/ListItemProps.codegen.d.ts +2 -2
  17. package/dist/types-ts4.5/components/__generated__/ListProps.codegen.d.ts +2 -2
  18. package/dist/types-ts4.5/components/__generated__/types.codegen.d.ts +2 -2
  19. package/package.json +8 -10
  20. package/scripts/codegen/codeGenerator.ts +306 -347
  21. package/scripts/codegen/componentPropTypes.ts +167 -212
  22. package/scripts/codegen-runner.ts +4 -4
  23. package/src/components/__generated__/ButtonProps.codegen.tsx +358 -358
  24. package/src/components/__generated__/CheckboxGroupProps.codegen.tsx +8 -8
  25. package/src/components/__generated__/DatePickerProps.codegen.tsx +12 -12
  26. package/src/components/__generated__/FormProps.codegen.tsx +4 -4
  27. package/src/components/__generated__/IconProps.codegen.tsx +364 -364
  28. package/src/components/__generated__/ListItemProps.codegen.tsx +3 -3
  29. package/src/components/__generated__/ListProps.codegen.tsx +4 -4
  30. package/src/components/__generated__/types.codegen.ts +20 -20
  31. package/src/index.ts +58 -58
@@ -1,24 +1,22 @@
1
1
  // eslint-disable-next-line import/no-extraneous-dependencies
2
2
  import {
3
- Symbol,
4
- SourceFile,
5
- TypeAliasDeclaration,
6
- ImportDeclaration,
3
+ type Symbol,
4
+ type SourceFile,
5
+ type TypeAliasDeclaration,
6
+ type ImportDeclaration,
7
7
  } from 'ts-morph';
8
8
 
9
9
  const getNames = (symbol: Symbol) => {
10
- const name = symbol.getName();
11
- return [name, symbol.getAliasedSymbol()?.getName() ?? name];
10
+ const name = symbol.getName();
11
+ return [name, symbol.getAliasedSymbol()?.getName() ?? name];
12
12
  };
13
13
 
14
14
  const getDeclaration = (symbol: Symbol) => {
15
- const declaration = symbol.getDeclarations()[0];
16
- if (!declaration) {
17
- throw new Error(
18
- 'Could not find declaration for symbol: ' + symbol.getName(),
19
- );
20
- }
21
- return declaration;
15
+ const declaration = symbol.getDeclarations()[0];
16
+ if (!declaration) {
17
+ throw new Error('Could not find declaration for symbol: ' + symbol.getName());
18
+ }
19
+ return declaration;
22
20
  };
23
21
 
24
22
  /**
@@ -29,22 +27,18 @@ const getDeclaration = (symbol: Symbol) => {
29
27
  * that was extracted from the component index file.
30
28
  * @return {Symbol} the base component symbol that is defined in the source file.
31
29
  */
32
- const getBaseComponentSymbol = (
33
- componentSymbol: Symbol,
34
- sourceFile: SourceFile,
35
- ) => {
36
- const symbol = sourceFile.getExportSymbols().find((symbol) => {
37
- // The base component symbol can be aliased, so we need to check both the
38
- // symbol name and the aliased symbol name.
39
- return getNames(componentSymbol).includes(symbol.getName());
40
- });
41
- if (!symbol) {
42
- throw new Error(
43
- 'Could not find base component symbol for component: ' +
44
- componentSymbol.getName(),
45
- );
46
- }
47
- return symbol;
30
+ const getBaseComponentSymbol = (componentSymbol: Symbol, sourceFile: SourceFile) => {
31
+ const symbol = sourceFile.getExportSymbols().find((symbol) => {
32
+ // The base component symbol can be aliased, so we need to check both the
33
+ // symbol name and the aliased symbol name.
34
+ return getNames(componentSymbol).includes(symbol.getName());
35
+ });
36
+ if (!symbol) {
37
+ throw new Error(
38
+ 'Could not find base component symbol for component: ' + componentSymbol.getName(),
39
+ );
40
+ }
41
+ return symbol;
48
42
  };
49
43
 
50
44
  /**
@@ -57,20 +51,17 @@ const getBaseComponentSymbol = (
57
51
  *
58
52
  * This function will extract the PlatformButtonProps type declaration.
59
53
  */
60
- const getDependentTypeDeclarations = (
61
- baseComponentPropSymbol: Symbol,
62
- sourceFile: SourceFile,
63
- ) => {
64
- return sourceFile.getTypeAliases().reduce((declarations, typeAlias) => {
65
- const typeAliasName = typeAlias.getName();
66
- if (
67
- typeAliasName !== baseComponentPropSymbol.getName() &&
68
- getDeclaration(baseComponentPropSymbol).getText().includes(typeAliasName)
69
- ) {
70
- declarations.push(typeAlias);
71
- }
72
- return declarations;
73
- }, [] as Array<TypeAliasDeclaration>);
54
+ const getDependentTypeDeclarations = (baseComponentPropSymbol: Symbol, sourceFile: SourceFile) => {
55
+ return sourceFile.getTypeAliases().reduce((declarations, typeAlias) => {
56
+ const typeAliasName = typeAlias.getName();
57
+ if (
58
+ typeAliasName !== baseComponentPropSymbol.getName() &&
59
+ getDeclaration(baseComponentPropSymbol).getText().includes(typeAliasName)
60
+ ) {
61
+ declarations.push(typeAlias);
62
+ }
63
+ return declarations;
64
+ }, [] as Array<TypeAliasDeclaration>);
74
65
  };
75
66
 
76
67
  /**
@@ -83,20 +74,20 @@ const getDependentTypeDeclarations = (
83
74
  * }
84
75
  */
85
76
  const getImportedNames = (importDeclaration: ImportDeclaration) => {
86
- return {
87
- default: importDeclaration.getDefaultImport()?.getText() ?? null,
88
- named: importDeclaration
89
- .getNamedImports()
90
- .map((specifier) => {
91
- return specifier.getAliasNode()?.getText() ?? specifier.getName();
92
- })
93
- .filter((name) => !!name) as string[],
94
- };
77
+ return {
78
+ default: importDeclaration.getDefaultImport()?.getText() ?? null,
79
+ named: importDeclaration
80
+ .getNamedImports()
81
+ .map((specifier) => {
82
+ return specifier.getAliasNode()?.getText() ?? specifier.getName();
83
+ })
84
+ .filter((name) => !!name) as string[],
85
+ };
95
86
  };
96
87
 
97
88
  const isTokenUsed = (token: string, codes: string[]) => {
98
- const check = new RegExp(`\\b${token}\\b`);
99
- return codes.some((code) => check.test(code));
89
+ const check = new RegExp(`\\b${token}\\b`);
90
+ return codes.some((code) => check.test(code));
100
91
  };
101
92
 
102
93
  /**
@@ -105,163 +96,146 @@ const isTokenUsed = (token: string, codes: string[]) => {
105
96
  * This is for solving the edge case raised from DynamicTableProps.
106
97
  */
107
98
  class ImportDeclarationProxy {
108
- private readonly base: ImportDeclaration;
109
-
110
- private removedNamedImports = new Set<string>();
111
-
112
- constructor(base: ImportDeclaration) {
113
- this.base = base;
114
- }
115
-
116
- public removeNamedImport(namedImport: string) {
117
- const target = this.base
118
- .getNamedImports()
119
- .find((tar) =>
120
- [tar.getName(), tar.getAliasNode()?.getText()].includes(namedImport),
121
- );
122
- if (target) {
123
- this.removedNamedImports.add(namedImport);
124
- }
125
- }
126
-
127
- public getText() {
128
- const code = this.base.getText();
129
- const match = code.match(
130
- /^(import |import type ){(.+)} from ['"](.+)['"];$/,
131
- );
132
- if (!match) {
133
- return this.base.getText();
134
- }
135
- let [_, importStatement, importedNames, packageName] = match;
136
- importedNames = importedNames.trim();
137
-
138
- if (isSharedUIKit2TypesImport(this.base)) {
139
- packageName = './types.codegen';
140
- }
141
- if (this.removedNamedImports.size > 0) {
142
- importedNames = importedNames!
143
- .split(',')
144
- .map((text) => text.trim())
145
- .filter((text) => !this.removedNamedImports.has(text))
146
- .join(', ');
147
- }
148
- return `${importStatement}{ ${importedNames} } from '${packageName}';`;
149
- }
99
+ private readonly base: ImportDeclaration;
100
+
101
+ private removedNamedImports = new Set<string>();
102
+
103
+ constructor(base: ImportDeclaration) {
104
+ this.base = base;
105
+ }
106
+
107
+ public removeNamedImport(namedImport: string) {
108
+ const target = this.base
109
+ .getNamedImports()
110
+ .find((tar) => [tar.getName(), tar.getAliasNode()?.getText()].includes(namedImport));
111
+ if (target) {
112
+ this.removedNamedImports.add(namedImport);
113
+ }
114
+ }
115
+
116
+ public getText() {
117
+ const code = this.base.getText();
118
+ const match = code.match(/^(import |import type ){(.+)} from ['"](.+)['"];$/);
119
+ if (!match) {
120
+ return this.base.getText();
121
+ }
122
+ let [_, importStatement, importedNames, packageName] = match;
123
+ importedNames = importedNames.trim();
124
+
125
+ if (isSharedUIKit2TypesImport(this.base)) {
126
+ packageName = './types.codegen';
127
+ }
128
+ if (this.removedNamedImports.size > 0) {
129
+ importedNames = importedNames!
130
+ .split(',')
131
+ .map((text) => text.trim())
132
+ .filter((text) => !this.removedNamedImports.has(text))
133
+ .join(', ');
134
+ }
135
+ return `${importStatement}{ ${importedNames} } from '${packageName}';`;
136
+ }
150
137
  }
151
138
 
152
139
  const isSharedUIKit2TypesImport = (importDeclaration: ImportDeclaration) => {
153
- return (
154
- importDeclaration.isTypeOnly() &&
155
- importDeclaration.getModuleSpecifierValue() === '../../types'
156
- );
140
+ return (
141
+ importDeclaration.isTypeOnly() && importDeclaration.getModuleSpecifierValue() === '../../types'
142
+ );
157
143
  };
158
144
 
159
145
  const extractImportDeclarations = (
160
- sourceFile: SourceFile,
161
- componentPropSymbol: Symbol,
162
- dependentTypeDeclarations: TypeAliasDeclaration[],
146
+ sourceFile: SourceFile,
147
+ componentPropSymbol: Symbol,
148
+ dependentTypeDeclarations: TypeAliasDeclaration[],
163
149
  ) => {
164
- const componentDeclarationCode =
165
- getDeclaration(componentPropSymbol).getText();
166
-
167
- const targetCodes = [
168
- componentDeclarationCode,
169
- ...dependentTypeDeclarations
170
- .map((typeAlias) => typeAlias.getText())
171
- .filter((code) => !!code),
172
- ];
173
- return sourceFile
174
- .getImportDeclarations()
175
- .filter((declaration) => {
176
- const moduleSpecifier = declaration.getModuleSpecifierValue();
177
- // only keep dependencies from
178
- // - @atlaskit
179
- // - react
180
- // - or '../../types'
181
- return (
182
- moduleSpecifier.startsWith('@atlaskit/') ||
183
- moduleSpecifier === 'react' ||
184
- isSharedUIKit2TypesImport(declaration)
185
- );
186
- })
187
- .reduce<ImportDeclarationProxy[]>((declarations, declaration) => {
188
- // further filter out the the imports that are not used in the component specified.
189
- const importedNames = getImportedNames(declaration);
190
- const declarationProxy = new ImportDeclarationProxy(declaration);
191
- let used = false;
192
- if (
193
- importedNames.default &&
194
- isTokenUsed(importedNames.default, targetCodes)
195
- ) {
196
- used = true;
197
- }
198
- importedNames.named.forEach((namedImport) => {
199
- if (isTokenUsed(namedImport, targetCodes)) {
200
- used = true;
201
- } else {
202
- declarationProxy.removeNamedImport(namedImport);
203
- }
204
- });
205
- if (used) {
206
- declarations.push(declarationProxy);
207
- }
208
- return declarations;
209
- }, []);
150
+ const componentDeclarationCode = getDeclaration(componentPropSymbol).getText();
151
+
152
+ const targetCodes = [
153
+ componentDeclarationCode,
154
+ ...dependentTypeDeclarations.map((typeAlias) => typeAlias.getText()).filter((code) => !!code),
155
+ ];
156
+ return sourceFile
157
+ .getImportDeclarations()
158
+ .filter((declaration) => {
159
+ const moduleSpecifier = declaration.getModuleSpecifierValue();
160
+ // only keep dependencies from
161
+ // - @atlaskit
162
+ // - react
163
+ // - or '../../types'
164
+ return (
165
+ moduleSpecifier.startsWith('@atlaskit/') ||
166
+ moduleSpecifier === 'react' ||
167
+ isSharedUIKit2TypesImport(declaration)
168
+ );
169
+ })
170
+ .reduce<ImportDeclarationProxy[]>((declarations, declaration) => {
171
+ // further filter out the the imports that are not used in the component specified.
172
+ const importedNames = getImportedNames(declaration);
173
+ const declarationProxy = new ImportDeclarationProxy(declaration);
174
+ let used = false;
175
+ if (importedNames.default && isTokenUsed(importedNames.default, targetCodes)) {
176
+ used = true;
177
+ }
178
+ importedNames.named.forEach((namedImport) => {
179
+ if (isTokenUsed(namedImport, targetCodes)) {
180
+ used = true;
181
+ } else {
182
+ declarationProxy.removeNamedImport(namedImport);
183
+ }
184
+ });
185
+ if (used) {
186
+ declarations.push(declarationProxy);
187
+ }
188
+ return declarations;
189
+ }, []);
210
190
  };
211
191
 
212
192
  const getTypeDeclarationCodeFromImport = (
213
- sourceFile: SourceFile,
214
- packageName: string,
215
- typeName: string,
193
+ sourceFile: SourceFile,
194
+ packageName: string,
195
+ typeName: string,
216
196
  ) => {
217
- const importDeclaration = sourceFile.getImportDeclarationOrThrow(packageName);
218
- const importSpecifier = importDeclaration
219
- .getNamedImports()
220
- .find(
221
- (specifier) =>
222
- specifier.getName() === typeName ||
223
- specifier.getAliasNode()?.getText() === typeName,
224
- );
225
- const importTypeSymbol = importSpecifier?.getSymbol()?.getAliasedSymbol();
226
- if (!importTypeSymbol) {
227
- throw new Error(`Could not find type for ${typeName} in ${packageName}`);
228
- }
229
- const importSourcePath = importTypeSymbol
230
- .getDeclarations()[0]
231
- .getType()
232
- .getText()
233
- .match(/import\("(.+)"\)/)?.[1];
234
- if (!importSourcePath) {
235
- throw new Error(
236
- `Could not find import source for ${typeName} in ${packageName}`,
237
- );
238
- }
239
-
240
- const importSource = sourceFile
241
- .getProject()
242
- .addSourceFileAtPath(importSourcePath + '.ts');
243
- try {
244
- const typeDeclarationCode = importSource
245
- .getExportSymbols()
246
- .find(
247
- (symbol) =>
248
- symbol.getName() === typeName ||
249
- symbol.getName() === importTypeSymbol.getName(),
250
- )
251
- ?.getDeclarations()[0]
252
- ?.getText();
253
- if (!typeDeclarationCode) {
254
- return null;
255
- }
256
- if (importTypeSymbol.getName() !== typeName) {
257
- return `${typeDeclarationCode}
197
+ const importDeclaration = sourceFile.getImportDeclarationOrThrow(packageName);
198
+ const importSpecifier = importDeclaration
199
+ .getNamedImports()
200
+ .find(
201
+ (specifier) =>
202
+ specifier.getName() === typeName || specifier.getAliasNode()?.getText() === typeName,
203
+ );
204
+ const importTypeSymbol = importSpecifier?.getSymbol()?.getAliasedSymbol();
205
+ if (!importTypeSymbol) {
206
+ throw new Error(`Could not find type for ${typeName} in ${packageName}`);
207
+ }
208
+ const importSourcePath = importTypeSymbol
209
+ .getDeclarations()[0]
210
+ .getType()
211
+ .getText()
212
+ .match(/import\("(.+)"\)/)?.[1];
213
+ if (!importSourcePath) {
214
+ throw new Error(`Could not find import source for ${typeName} in ${packageName}`);
215
+ }
216
+
217
+ const importSource = sourceFile.getProject().addSourceFileAtPath(importSourcePath + '.ts');
218
+ try {
219
+ const typeDeclarationCode = importSource
220
+ .getExportSymbols()
221
+ .find(
222
+ (symbol) =>
223
+ symbol.getName() === typeName || symbol.getName() === importTypeSymbol.getName(),
224
+ )
225
+ ?.getDeclarations()[0]
226
+ ?.getText();
227
+ if (!typeDeclarationCode) {
228
+ return null;
229
+ }
230
+ if (importTypeSymbol.getName() !== typeName) {
231
+ return `${typeDeclarationCode}
258
232
  type ${typeName} = ${importTypeSymbol.getName()};
259
233
  `;
260
- }
261
- return typeDeclarationCode;
262
- } finally {
263
- sourceFile.getProject().removeSourceFile(importSource);
264
- }
234
+ }
235
+ return typeDeclarationCode;
236
+ } finally {
237
+ sourceFile.getProject().removeSourceFile(importSource);
238
+ }
265
239
  };
266
240
 
267
241
  /**
@@ -270,178 +244,163 @@ type ${typeName} = ${importTypeSymbol.getName()};
270
244
  * types and not on any other package types.
271
245
  */
272
246
  const resolveExternalTypesCode = (
273
- sourceFile: SourceFile,
274
- componentPropSymbol: Symbol,
275
- dependentTypeDeclarations: TypeAliasDeclaration[],
247
+ sourceFile: SourceFile,
248
+ componentPropSymbol: Symbol,
249
+ dependentTypeDeclarations: TypeAliasDeclaration[],
276
250
  ) => {
277
- // resolve types from @atlassian/forge-ui-types
278
- const forgeUITypesImports = sourceFile
279
- .getImportDeclarations()
280
- .filter((declaration) => {
281
- const moduleSpecifier = declaration.getModuleSpecifierValue();
282
- return moduleSpecifier === '@atlassian/forge-ui-types';
283
- });
284
- if (forgeUITypesImports.length === 0) {
285
- return null;
286
- }
287
-
288
- // only the type name that are used in the component prop type should be
289
- // resolved
290
- const targetImportedTypeNames = forgeUITypesImports.reduce<string[]>(
291
- (importedTypeNames, imports) => {
292
- const names = getImportedNames(imports);
293
- const targetCodes = [
294
- getDeclaration(componentPropSymbol).getText(),
295
- ...dependentTypeDeclarations.map((typeAlias) => typeAlias.getText()),
296
- ];
297
- [names.default, ...names.named].forEach((importName) => {
298
- if (
299
- importName &&
300
- !importedTypeNames.includes(importName) &&
301
- isTokenUsed(importName, targetCodes)
302
- ) {
303
- importedTypeNames.push(importName);
304
- }
305
- });
306
- return importedTypeNames;
307
- },
308
- [],
309
- );
310
- const declarationCode = targetImportedTypeNames
311
- .map((typeName) => {
312
- return getTypeDeclarationCodeFromImport(
313
- sourceFile,
314
- '@atlassian/forge-ui-types',
315
- typeName,
316
- );
317
- })
318
- .filter((code) => !!code)
319
- .join('\n');
320
-
321
- return !!declarationCode ? declarationCode : null;
251
+ // resolve types from @atlassian/forge-ui-types
252
+ const forgeUITypesImports = sourceFile.getImportDeclarations().filter((declaration) => {
253
+ const moduleSpecifier = declaration.getModuleSpecifierValue();
254
+ return moduleSpecifier === '@atlassian/forge-ui-types';
255
+ });
256
+ if (forgeUITypesImports.length === 0) {
257
+ return null;
258
+ }
259
+
260
+ // only the type name that are used in the component prop type should be
261
+ // resolved
262
+ const targetImportedTypeNames = forgeUITypesImports.reduce<string[]>(
263
+ (importedTypeNames, imports) => {
264
+ const names = getImportedNames(imports);
265
+ const targetCodes = [
266
+ getDeclaration(componentPropSymbol).getText(),
267
+ ...dependentTypeDeclarations.map((typeAlias) => typeAlias.getText()),
268
+ ];
269
+ [names.default, ...names.named].forEach((importName) => {
270
+ if (
271
+ importName &&
272
+ !importedTypeNames.includes(importName) &&
273
+ isTokenUsed(importName, targetCodes)
274
+ ) {
275
+ importedTypeNames.push(importName);
276
+ }
277
+ });
278
+ return importedTypeNames;
279
+ },
280
+ [],
281
+ );
282
+ const declarationCode = targetImportedTypeNames
283
+ .map((typeName) => {
284
+ return getTypeDeclarationCodeFromImport(sourceFile, '@atlassian/forge-ui-types', typeName);
285
+ })
286
+ .filter((code) => !!code)
287
+ .join('\n');
288
+
289
+ return !!declarationCode ? declarationCode : null;
322
290
  };
323
291
 
324
292
  type CodeConsolidator = (context: {
325
- sourceFile: SourceFile;
326
- importCode?: string | null;
327
- externalTypesCode?: string | null;
328
- dependentTypeCode?: string | null;
329
- componentPropCode?: string | null;
293
+ sourceFile: SourceFile;
294
+ importCode?: string | null;
295
+ externalTypesCode?: string | null;
296
+ dependentTypeCode?: string | null;
297
+ componentPropCode?: string | null;
330
298
  }) => string;
331
299
 
332
300
  const consolidateCodeSections: CodeConsolidator = ({
333
- importCode,
334
- externalTypesCode,
335
- dependentTypeCode,
336
- componentPropCode,
301
+ importCode,
302
+ externalTypesCode,
303
+ dependentTypeCode,
304
+ componentPropCode,
337
305
  }) => {
338
- return [importCode, externalTypesCode, dependentTypeCode, componentPropCode]
339
- .filter((code) => !!code)
340
- .join('\n\n');
306
+ return [importCode, externalTypesCode, dependentTypeCode, componentPropCode]
307
+ .filter((code) => !!code)
308
+ .join('\n\n');
341
309
  };
342
310
 
343
311
  const baseGenerateComponentPropTypeSourceCode = (
344
- componentPropSymbol: Symbol,
345
- sourceFile: SourceFile,
346
- customConsolidator?: CodeConsolidator,
312
+ componentPropSymbol: Symbol,
313
+ sourceFile: SourceFile,
314
+ customConsolidator?: CodeConsolidator,
347
315
  ) => {
348
- // 1) extract the prop types from the source file
349
- const baseComponentPropSymbol = getBaseComponentSymbol(
350
- componentPropSymbol,
351
- sourceFile,
352
- );
353
-
354
- // 2) from the prop type code further extract other relevant types in the source file
355
- const dependentTypeDeclarations = getDependentTypeDeclarations(
356
- baseComponentPropSymbol,
357
- sourceFile,
358
- );
359
-
360
- // 3) extract the import statement
361
- const importDeclarations = extractImportDeclarations(
362
- sourceFile,
363
- baseComponentPropSymbol,
364
- dependentTypeDeclarations,
365
- );
366
-
367
- // 4) resolve other types definition (not part of the ADS components)
368
- const externalTypesCode = resolveExternalTypesCode(
369
- sourceFile,
370
- baseComponentPropSymbol,
371
- dependentTypeDeclarations,
372
- );
373
-
374
- // 5) generate the source file
375
- const importCode = importDeclarations
376
- .map((declaration) => declaration.getText())
377
- .join('\n');
378
- const dependentTypeCode = dependentTypeDeclarations
379
- .map((typeAlias) => typeAlias.getText())
380
- .join('\n');
381
- const componentPropCode = getDeclaration(baseComponentPropSymbol).getText();
382
-
383
- return (customConsolidator ?? consolidateCodeSections)({
384
- sourceFile,
385
- importCode,
386
- externalTypesCode,
387
- dependentTypeCode,
388
- componentPropCode,
389
- });
316
+ // 1) extract the prop types from the source file
317
+ const baseComponentPropSymbol = getBaseComponentSymbol(componentPropSymbol, sourceFile);
318
+
319
+ // 2) from the prop type code further extract other relevant types in the source file
320
+ const dependentTypeDeclarations = getDependentTypeDeclarations(
321
+ baseComponentPropSymbol,
322
+ sourceFile,
323
+ );
324
+
325
+ // 3) extract the import statement
326
+ const importDeclarations = extractImportDeclarations(
327
+ sourceFile,
328
+ baseComponentPropSymbol,
329
+ dependentTypeDeclarations,
330
+ );
331
+
332
+ // 4) resolve other types definition (not part of the ADS components)
333
+ const externalTypesCode = resolveExternalTypesCode(
334
+ sourceFile,
335
+ baseComponentPropSymbol,
336
+ dependentTypeDeclarations,
337
+ );
338
+
339
+ // 5) generate the source file
340
+ const importCode = importDeclarations.map((declaration) => declaration.getText()).join('\n');
341
+ const dependentTypeCode = dependentTypeDeclarations
342
+ .map((typeAlias) => typeAlias.getText())
343
+ .join('\n');
344
+ const componentPropCode = getDeclaration(baseComponentPropSymbol).getText();
345
+
346
+ return (customConsolidator ?? consolidateCodeSections)({
347
+ sourceFile,
348
+ importCode,
349
+ externalTypesCode,
350
+ dependentTypeCode,
351
+ componentPropCode,
352
+ });
390
353
  };
391
354
 
392
355
  const boxPropsCodeConsolidator: CodeConsolidator = ({
393
- sourceFile,
394
- importCode,
395
- externalTypesCode,
396
- dependentTypeCode,
397
- componentPropCode,
356
+ sourceFile,
357
+ importCode,
358
+ externalTypesCode,
359
+ dependentTypeCode,
360
+ componentPropCode,
398
361
  }) => {
399
- const xcssValidator = sourceFile
400
- .getVariableDeclarationOrThrow('xcssValidator')
401
- .getText();
402
-
403
- const utilsFile = sourceFile
404
- .getProject()
405
- .addSourceFileAtPath(
406
- require.resolve('@atlassian/forge-ui/utils/xcssValidate'),
407
- );
408
- try {
409
- const xcssValidatorDeclarationCode = utilsFile.getEmitOutput({
410
- emitOnlyDtsFiles: true,
411
- }).compilerObject.outputFiles[0].text;
412
- const xcssValidatorVariableDeclarationCode = [
413
- xcssValidatorDeclarationCode,
414
- `const ${xcssValidator};`,
415
- ].join('\n');
416
-
417
- return [
418
- '/* eslint-disable @atlaskit/design-system/ensure-design-token-usage/preview */',
419
- importCode,
420
- xcssValidatorVariableDeclarationCode,
421
- externalTypesCode,
422
- dependentTypeCode,
423
- componentPropCode,
424
- ]
425
- .filter((code) => !!code)
426
- .join('\n\n');
427
- } finally {
428
- sourceFile.getProject().removeSourceFile(utilsFile);
429
- }
362
+ const xcssValidator = sourceFile.getVariableDeclarationOrThrow('xcssValidator').getText();
363
+
364
+ const utilsFile = sourceFile
365
+ .getProject()
366
+ .addSourceFileAtPath(require.resolve('@atlassian/forge-ui/utils/xcssValidate'));
367
+ try {
368
+ const xcssValidatorDeclarationCode = utilsFile.getEmitOutput({
369
+ emitOnlyDtsFiles: true,
370
+ }).compilerObject.outputFiles[0].text;
371
+ const xcssValidatorVariableDeclarationCode = [
372
+ xcssValidatorDeclarationCode,
373
+ `const ${xcssValidator};`,
374
+ ].join('\n');
375
+
376
+ return [
377
+ '/* eslint-disable @atlaskit/design-system/ensure-design-token-usage/preview */',
378
+ importCode,
379
+ xcssValidatorVariableDeclarationCode,
380
+ externalTypesCode,
381
+ dependentTypeCode,
382
+ componentPropCode,
383
+ ]
384
+ .filter((code) => !!code)
385
+ .join('\n\n');
386
+ } finally {
387
+ sourceFile.getProject().removeSourceFile(utilsFile);
388
+ }
430
389
  };
431
390
 
432
391
  const codeConsolidators: Record<string, CodeConsolidator> = {
433
- BoxProps: boxPropsCodeConsolidator,
392
+ BoxProps: boxPropsCodeConsolidator,
434
393
  };
435
394
 
436
395
  const generateComponentPropTypeSourceCode = (
437
- componentPropSymbol: Symbol,
438
- sourceFile: SourceFile,
396
+ componentPropSymbol: Symbol,
397
+ sourceFile: SourceFile,
439
398
  ) => {
440
- return baseGenerateComponentPropTypeSourceCode(
441
- componentPropSymbol,
442
- sourceFile,
443
- codeConsolidators[componentPropSymbol.getName()],
444
- );
399
+ return baseGenerateComponentPropTypeSourceCode(
400
+ componentPropSymbol,
401
+ sourceFile,
402
+ codeConsolidators[componentPropSymbol.getName()],
403
+ );
445
404
  };
446
405
 
447
406
  export { generateComponentPropTypeSourceCode };