chore: update generator to stop using "export *" (#33379)

microsoft · Dec 7, 2024 · c688295 · c688295
1 parent 001b1b3
commit c688295
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 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__
@@ -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
@@ -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
@@ -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);
 }