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

packages/docusaurus/src/commands/swizzle/__tests__/__snapshots__/index.test.ts.snap

@@ -7,38 +7,18 @@ exports[`swizzle eject ComponentInFolder JS: ComponentInFolder/Sibling.css 1`] =
 "
 `;
 
-exports[`swizzle eject ComponentInFolder JS: ComponentInFolder/Sibling.tsx 1`] = `
-"import React from 'react';
-
-export default function Sibling() {
-  return <div>Sibling</div>;
-}
-"
-`;
-
 exports[`swizzle eject ComponentInFolder JS: ComponentInFolder/index.css 1`] = `
 ".testClass {
   background: black;
 }
 "
 `;
 
-exports[`swizzle eject ComponentInFolder JS: ComponentInFolder/index.tsx 1`] = `
-"import React from 'react';
-
-export default function ComponentInFolder() {
-  return <div>ComponentInFolder</div>;
-}
-"
-`;
-
 exports[`swizzle eject ComponentInFolder JS: theme dir tree 1`] = `
 "theme
 └── ComponentInFolder
     ├── Sibling.css
-    ├── Sibling.tsx
-    ├── index.css
-    └── index.tsx"
+    └── index.css"
 `;
 
 exports[`swizzle eject ComponentInFolder TS: ComponentInFolder/Sibling.css 1`] = `
@@ -89,15 +69,6 @@ exports[`swizzle eject ComponentInFolder/ComponentInSubFolder JS: ComponentInFol
 "
 `;
 
-exports[`swizzle eject ComponentInFolder/ComponentInSubFolder JS: ComponentInFolder/ComponentInSubFolder/index.tsx 1`] = `
-"import React from 'react';
-
-export default function ComponentInSubFolder() {
-  return <div>ComponentInSubFolder</div>;
-}
-"
-`;
-
 exports[`swizzle eject ComponentInFolder/ComponentInSubFolder JS: ComponentInFolder/ComponentInSubFolder/styles.css 1`] = `
 ".testClass {
   background: black;
@@ -117,7 +88,6 @@ exports[`swizzle eject ComponentInFolder/ComponentInSubFolder JS: theme dir tree
 └── ComponentInFolder
     └── ComponentInSubFolder
         ├── index.css
-        ├── index.tsx
         ├── styles.css
         └── styles.module.css"
 `;
@@ -169,20 +139,10 @@ exports[`swizzle eject ComponentInFolder/Sibling JS: ComponentInFolder/Sibling.c
 "
 `;
 
-exports[`swizzle eject ComponentInFolder/Sibling JS: ComponentInFolder/Sibling.tsx 1`] = `
-"import React from 'react';
-
-export default function Sibling() {
-  return <div>Sibling</div>;
-}
-"
-`;
-
 exports[`swizzle eject ComponentInFolder/Sibling JS: theme dir tree 1`] = `
 "theme
 └── ComponentInFolder
-    ├── Sibling.css
-    └── Sibling.tsx"
+    └── Sibling.css"
 `;
 
 exports[`swizzle eject ComponentInFolder/Sibling TS: ComponentInFolder/Sibling.css 1`] = `
@@ -215,19 +175,9 @@ exports[`swizzle eject FirstLevelComponent JS: FirstLevelComponent.css 1`] = `
 "
 `;
 
-exports[`swizzle eject FirstLevelComponent JS: FirstLevelComponent.tsx 1`] = `
-"import React from 'react';
-
-export default function FirstLevelComponent() {
-  return <div>First level component</div>;
-}
-"
-`;
-
 exports[`swizzle eject FirstLevelComponent JS: theme dir tree 1`] = `
 "theme
-├── FirstLevelComponent.css
-└── FirstLevelComponent.tsx"
+└── FirstLevelComponent.css"
 `;
 
 exports[`swizzle eject FirstLevelComponent TS: FirstLevelComponent.css 1`] = `

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__/components.test.ts

@@ -19,6 +19,7 @@ describe('readComponentNames', () => {
       Components.ComponentInSubFolder,
       Components.Sibling,
       Components.FirstLevelComponent,
+      Components.JsComponent,
       Components.NoIndexComp1,
       Components.NoIndexComp2,
       Components.NoIndexSubComp,
@@ -69,6 +70,7 @@ describe('getThemeComponents', () => {
       Components.ComponentInSubFolder,
       Components.Sibling,
       Components.FirstLevelComponent,
+      Components.JsComponent,
       Components.NoIndex,
       Components.NoIndexComp1,
       Components.NoIndexComp2,

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}

website/_dogfooding/testSwizzleThemeClassic.mjs

@@ -30,7 +30,7 @@ const classicThemePathBase = path.join(
   '../../packages/docusaurus-theme-classic',
 );
 
-const themePath = swizzleConfig
+const themePath = typescript
   ? path.join(classicThemePathBase, 'src/theme')
   : path.join(classicThemePathBase, 'lib/theme');
 
@@ -98,13 +98,13 @@ for (const componentName of componentNames) {
       siteDir: toPath,
       themePath,
       componentName,
+      typescript,
     };
     switch (action) {
       case 'wrap':
         return wrap({
           ...baseParams,
           importType: 'init', // For these tests, "theme-original" imports are causing an expected infinite loop
-          typescript,
         });
       case 'eject':
         return eject(baseParams);