From c688295efb1f16317bea6bff67ea6cdf886155ef Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Sun, 8 Dec 2024 00:35:30 +0200 Subject: [PATCH] chore: update generator to stop using "export *" (#33379) --- .../files/component/index.ts__tmpl__ | 10 ++-- .../generators/react-component/index.spec.ts | 48 +++++++++++++++++-- .../src/generators/react-component/index.ts | 25 +++++++++- 3 files changed, 72 insertions(+), 11 deletions(-) diff --git a/tools/workspace-plugin/src/generators/react-component/files/component/index.ts__tmpl__ b/tools/workspace-plugin/src/generators/react-component/files/component/index.ts__tmpl__ index b71d9258498439..b309bf4370bd14 100644 --- a/tools/workspace-plugin/src/generators/react-component/files/component/index.ts__tmpl__ +++ b/tools/workspace-plugin/src/generators/react-component/files/component/index.ts__tmpl__ @@ -1,5 +1,5 @@ -export * from './<%= componentName %>'; -export * from './<%= componentName %>.types'; -export * from './render<%= componentName %>'; -export * from './use<%= componentName %>'; -export * from './use<%= componentName %>Styles.styles'; +export { <%= componentName %> } from './<%= componentName %>'; +export type { <%= componentName %>Props, <%= componentName %>State } from './<%= componentName %>.types'; +export { render<%= componentName %>_unstable } from './render<%= componentName %>'; +export { use<%= componentName %>_unstable } from './use<%= componentName %>'; +export { <%= propertyName %>ClassNames, use<%= componentName %>Styles_unstable } from './use<%= componentName %>Styles.styles'; diff --git a/tools/workspace-plugin/src/generators/react-component/index.spec.ts b/tools/workspace-plugin/src/generators/react-component/index.spec.ts index a43ef4f18dc01a..80f342159309c0 100644 --- a/tools/workspace-plugin/src/generators/react-component/index.spec.ts +++ b/tools/workspace-plugin/src/generators/react-component/index.spec.ts @@ -59,7 +59,14 @@ describe('react-component generator', () => { const rootOffset = offsetFromRoot(componentRootPath); expect(tree.read(joinPathFragments(projectSourceRootPath, 'MyOne.ts'), 'utf-8')).toMatchInlineSnapshot(` - "export * from './components/MyOne/index'; + "export { + myOneClassNames, + MyOne, + renderMyOne_unstable, + useMyOne_unstable, + useMyOneStyles_unstable, + } from './components/MyOne/index'; + export type { MyOneProps, MyOneState } from './components/MyOne/index'; " `); @@ -75,6 +82,18 @@ describe('react-component generator', () => { ] `); + expect(tree.read(joinPathFragments(componentRootPath, 'index.ts'), 'utf-8')).toMatchInlineSnapshot(` + "export { MyOne } from './MyOne'; + export type { MyOneProps, MyOneState } from './MyOne.types'; + export { renderMyOne_unstable } from './renderMyOne'; + export { useMyOne_unstable } from './useMyOne'; + export { + myOneClassNames, + useMyOneStyles_unstable, + } from './useMyOneStyles.styles'; + " + `); + expect(tree.read(joinPathFragments(componentRootPath, 'MyOne.tsx'), 'utf-8')).toMatchInlineSnapshot(` "import * as React from 'react'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; @@ -174,15 +193,36 @@ describe('react-component generator', () => { const barrelPath = joinPathFragments(projectSourceRootPath, 'index.ts'); expect(tree.read(barrelPath, 'utf-8')).toMatchInlineSnapshot(` - "export * from './MyOne'; + "export { + myOneClassNames, + MyOne, + renderMyOne_unstable, + useMyOne_unstable, + useMyOneStyles_unstable, + } from './MyOne'; + export type { MyOneProps, MyOneState } from './MyOne'; " `); await generator(tree, { project: 'react-one', name: 'MyTwo' }); expect(tree.read(barrelPath, 'utf-8')).toMatchInlineSnapshot(` - "export * from './MyOne'; - export * from './MyTwo'; + "export { + myOneClassNames, + MyOne, + renderMyOne_unstable, + useMyOne_unstable, + useMyOneStyles_unstable, + } from './MyOne'; + export type { MyOneProps, MyOneState } from './MyOne'; + export { + myTwoClassNames, + MyTwo, + renderMyTwo_unstable, + useMyTwo_unstable, + useMyTwoStyles_unstable, + } from './MyTwo'; + export type { MyTwoProps, MyTwoState } from './MyTwo'; " `); }); diff --git a/tools/workspace-plugin/src/generators/react-component/index.ts b/tools/workspace-plugin/src/generators/react-component/index.ts index 4f0622dd6b072f..099c53d122e5ea 100644 --- a/tools/workspace-plugin/src/generators/react-component/index.ts +++ b/tools/workspace-plugin/src/generators/react-component/index.ts @@ -81,6 +81,19 @@ function createStoriesTitle(options: NormalizedSchema) { return storiesTitle; } +function createExportsForComponent(options: NormalizedSchema) { + const exports = [ + `${options.propertyName}ClassNames`, + options.componentName, + `render${options.componentName}_unstable`, + `use${options.componentName}_unstable`, + `use${options.componentName}Styles_unstable`, + ]; + const typeExports = [`${options.componentName}Props`, `${options.componentName}State`]; + + return { exports, typeExports }; +} + function addFiles(tree: Tree, options: NormalizedSchema) { const sourceRoot = options.projectConfig.sourceRoot as string; @@ -99,9 +112,12 @@ function addFiles(tree: Tree, options: NormalizedSchema) { templateOptions, ); + const { exports, typeExports } = createExportsForComponent(options); + tree.write( joinPathFragments(sourceRoot, options.componentName + '.ts'), - `export * from './${options.directory}/${options.componentName}/index';`, + `export { ${exports.join(', ')} } from './${options.directory}/${options.componentName}/index'; + export type { ${typeExports.join(', ')} } from './${options.directory}/${options.componentName}/index';`, ); // story @@ -121,8 +137,13 @@ function addFiles(tree: Tree, options: NormalizedSchema) { function updateBarrel(tree: Tree, options: NormalizedSchema) { const indexPath = joinPathFragments(options.paths.sourceRoot, 'index.ts'); const content = tree.read(indexPath, 'utf-8') as string; + + const { exports, typeExports } = createExportsForComponent(options); + let newContent = content.replace('export {}', ''); - newContent = newContent + `export * from './${options.componentName}';` + '\n'; + + newContent += `export { ${exports.join(', ')} } from './${options.componentName}';`; + newContent += `export type { ${typeExports.join(', ')} } from './${options.componentName}';`; tree.write(indexPath, newContent); }