From c48f33800c75d12613d3bf382586576d822da064 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Lorber?= <slorber@users.noreply.github.com>
Date: Thu, 14 Jul 2022 12:23:06 +0200
Subject: [PATCH] fix(core): swizzle --eject js should not copy theme .d.ts
 files (#7776)

---
 .../__fixtures__/theme/JsComponent/index.css  |  3 +
 .../__fixtures__/theme/JsComponent/index.d.ts |  1 +
 .../__fixtures__/theme/JsComponent/index.js   |  5 ++
 .../__snapshots__/index.test.ts.snap          | 56 +------------------
 .../swizzle/__tests__/actions.test.ts         | 23 +++++++-
 .../swizzle/__tests__/components.test.ts      |  2 +
 .../commands/swizzle/__tests__/testUtils.ts   |  1 +
 .../src/commands/swizzle/actions.ts           | 10 +++-
 .../docusaurus/src/commands/swizzle/index.ts  |  1 +
 .../_dogfooding/testSwizzleThemeClassic.mjs   |  4 +-
 10 files changed, 48 insertions(+), 58 deletions(-)
 create mode 100644 packages/docusaurus/src/commands/swizzle/__tests__/__fixtures__/theme/JsComponent/index.css
 create mode 100644 packages/docusaurus/src/commands/swizzle/__tests__/__fixtures__/theme/JsComponent/index.d.ts
 create mode 100644 packages/docusaurus/src/commands/swizzle/__tests__/__fixtures__/theme/JsComponent/index.js

diff --git a/packages/docusaurus/src/commands/swizzle/__tests__/__fixtures__/theme/JsComponent/index.css b/packages/docusaurus/src/commands/swizzle/__tests__/__fixtures__/theme/JsComponent/index.css
new file mode 100644
index 000000000000..7aa192f3b39f
--- /dev/null
+++ b/packages/docusaurus/src/commands/swizzle/__tests__/__fixtures__/theme/JsComponent/index.css
@@ -0,0 +1,3 @@
+.testClass {
+  background: black;
+}
diff --git a/packages/docusaurus/src/commands/swizzle/__tests__/__fixtures__/theme/JsComponent/index.d.ts b/packages/docusaurus/src/commands/swizzle/__tests__/__fixtures__/theme/JsComponent/index.d.ts
new file mode 100644
index 000000000000..ee6b81b544ad
--- /dev/null
+++ b/packages/docusaurus/src/commands/swizzle/__tests__/__fixtures__/theme/JsComponent/index.d.ts
@@ -0,0 +1 @@
+export default function JsComponent(props: {}): JSX.Element;
diff --git a/packages/docusaurus/src/commands/swizzle/__tests__/__fixtures__/theme/JsComponent/index.js b/packages/docusaurus/src/commands/swizzle/__tests__/__fixtures__/theme/JsComponent/index.js
new file mode 100644
index 000000000000..dcf3086a302e
--- /dev/null
+++ b/packages/docusaurus/src/commands/swizzle/__tests__/__fixtures__/theme/JsComponent/index.js
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function NoIndexComp1() {
+  return <div>NoIndexComp1</div>;
+}
diff --git a/packages/docusaurus/src/commands/swizzle/__tests__/__snapshots__/index.test.ts.snap b/packages/docusaurus/src/commands/swizzle/__tests__/__snapshots__/index.test.ts.snap
index 31fa888fe07c..2971f6e9f8c7 100644
--- a/packages/docusaurus/src/commands/swizzle/__tests__/__snapshots__/index.test.ts.snap
+++ b/packages/docusaurus/src/commands/swizzle/__tests__/__snapshots__/index.test.ts.snap
@@ -7,15 +7,6 @@ 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;
@@ -23,22 +14,11 @@ exports[`swizzle eject ComponentInFolder JS: ComponentInFolder/index.css 1`] = `
 "
 `;
 
-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`] = `
diff --git a/packages/docusaurus/src/commands/swizzle/__tests__/actions.test.ts b/packages/docusaurus/src/commands/swizzle/__tests__/actions.test.ts
index 2bbfca6407ab..b6e7bed38bde 100644
--- a/packages/docusaurus/src/commands/swizzle/__tests__/actions.test.ts
+++ b/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([
diff --git a/packages/docusaurus/src/commands/swizzle/__tests__/components.test.ts b/packages/docusaurus/src/commands/swizzle/__tests__/components.test.ts
index c16a7a0d619a..140c973fe5dc 100644
--- a/packages/docusaurus/src/commands/swizzle/__tests__/components.test.ts
+++ b/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,
diff --git a/packages/docusaurus/src/commands/swizzle/__tests__/testUtils.ts b/packages/docusaurus/src/commands/swizzle/__tests__/testUtils.ts
index e0e9acf7958a..c13d4804f5ef 100644
--- a/packages/docusaurus/src/commands/swizzle/__tests__/testUtils.ts
+++ b/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',
diff --git a/packages/docusaurus/src/commands/swizzle/actions.ts b/packages/docusaurus/src/commands/swizzle/actions.ts
index 3bc38febcd75..a9082737c104 100644
--- a/packages/docusaurus/src/commands/swizzle/actions.ts
+++ b/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));
diff --git a/packages/docusaurus/src/commands/swizzle/index.ts b/packages/docusaurus/src/commands/swizzle/index.ts
index df5e06605511..1c76f59d7c62 100644
--- a/packages/docusaurus/src/commands/swizzle/index.ts
+++ b/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}
diff --git a/website/_dogfooding/testSwizzleThemeClassic.mjs b/website/_dogfooding/testSwizzleThemeClassic.mjs
index 6f635bea5718..0f6af4da0609 100644
--- a/website/_dogfooding/testSwizzleThemeClassic.mjs
+++ b/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);