fix(core): swizzle --eject js should not copy theme .d.ts files

packages/docusaurus/src/commands/swizzle/__tests__/actions.test.ts

@@ -24,13 +24,18 @@ function stableCreatedFiles(
 }
 
 describe('eject', () => {
-  async function testEject(action: SwizzleAction, componentName: string) {
+  async function testEject(
+    action: SwizzleAction,
+    componentName: string,
+    {typescript}: {typescript: boolean} = {typescript: true},
+  ) {
     const siteDir = await createTempSiteDir();
     const siteThemePath = path.join(siteDir, 'src/theme');
     const result = await eject({
       siteDir,
       componentName,
       themePath: ThemePath,
+      typescript,
     });
     return {
       siteDir,
@@ -53,6 +58,22 @@ describe('eject', () => {
     `);
   });
 
+  it(`eject ${Components.JsComponent} JS`, async () => {
+    const result = await testEject('eject', Components.JsComponent, {
+      typescript: false,
+    });
+    expect(result.createdFiles).toEqual([
+      'JsComponent/index.css',
+      'JsComponent/index.js',
+    ]);
+    expect(result.tree).toMatchInlineSnapshot(`
+      "theme
+      └── JsComponent
+          ├── index.css
+          └── index.js"
+    `);
+  });
+
   it(`eject ${Components.ComponentInSubFolder}`, async () => {
     const result = await testEject('eject', Components.ComponentInSubFolder);
     expect(result.createdFiles).toEqual([

packages/docusaurus/src/commands/swizzle/__tests__/testUtils.ts

@@ -16,6 +16,7 @@ export const Components = {
   Sibling: 'ComponentInFolder/Sibling',
   ComponentInFolder: 'ComponentInFolder',
   FirstLevelComponent: 'FirstLevelComponent',
+  JsComponent: 'JsComponent',
   NoIndex: 'NoIndex',
   NoIndexComp1: 'NoIndex/NoIndexComp1',
   NoIndexComp2: 'NoIndex/NoIndexComp2',

packages/docusaurus/src/commands/swizzle/actions.ts

@@ -33,6 +33,7 @@ export type ActionParams = {
   siteDir: string;
   themePath: string;
   componentName: string;
+  typescript: boolean;
 };
 
 export type ActionResult = {
@@ -49,6 +50,7 @@ export async function eject({
   siteDir,
   themePath,
   componentName,
+  typescript,
 }: ActionParams): Promise<ActionResult> {
   const fromPath = path.join(themePath, componentName);
   const isDirectory = await isDir(fromPath);
@@ -60,7 +62,12 @@ export async function eject({
   const globPatternPosix = posixPath(globPattern);
 
   const filesToCopy = await Globby(globPatternPosix, {
-    ignore: ['**/*.{story,stories,test,tests}.{js,jsx,ts,tsx}'],
+    ignore: _.compact([
+      '**/*.{story,stories,test,tests}.{js,jsx,ts,tsx}',
+      // When ejecting JS components, we want to avoid emitting TS files
+      // In particular the .d.ts files that theme build output contains
+      typescript ? null : '**/*.{d.ts,ts,tsx}',
+    ]),
   });
 
   if (filesToCopy.length === 0) {
@@ -103,7 +110,6 @@ export async function wrap({
   typescript,
   importType = 'original',
 }: ActionParams & {
-  typescript: boolean;
   importType?: 'original' | 'init';
 }): Promise<ActionResult> {
   const isDirectory = await isDir(path.join(themePath, themeComponentName));

packages/docusaurus/src/commands/swizzle/index.ts

@@ -145,6 +145,7 @@ Created wrapper of name=${componentName} from name=${themeName} in path=${result
           siteDir,
           themePath,
           componentName,
+          typescript,
         });
         logger.success`
 Ejected name=${componentName} from name=${themeName} to path=${result.createdFiles}