From c48f33800c75d12613d3bf382586576d822da064 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Lorber?= 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
NoIndexComp1
; +} 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
Sibling
; -} -" -`; - 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
ComponentInFolder
; -} -" -`; - 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
ComponentInSubFolder
; -} -" -`; - 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
Sibling
; -} -" -`; - 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
First level component
; -} -" -`; - 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 { 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 { 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);