From 704365c00b38c044c10fbe4eabf4492af2508564 Mon Sep 17 00:00:00 2001 From: Riccardo Date: Thu, 29 Dec 2022 13:48:25 +0100 Subject: [PATCH] fix(theme-classic) extract HomeBreadcrumbItem + fix swizzle bugs (#8445) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Sébastien Lorber Co-authored-by: sebastienlorber --- .../src/getSwizzleConfig.ts | 8 +++ .../src/theme-classic.d.ts | 4 ++ .../theme/DocBreadcrumbs/Items/Home/index.tsx | 33 ++++++++++ .../Items/Home/styles.module.css | 14 +++++ .../src/theme/DocBreadcrumbs/index.tsx | 21 +------ .../theme/DocBreadcrumbs/styles.module.css | 8 --- .../__snapshots__/index.test.ts.snap | 60 +++++++++++++++++++ .../swizzle/__tests__/actions.test.ts | 12 +++- .../src/commands/swizzle/actions.ts | 3 +- 9 files changed, 131 insertions(+), 32 deletions(-) create mode 100644 packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/Items/Home/index.tsx create mode 100644 packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/Items/Home/styles.module.css diff --git a/packages/docusaurus-theme-classic/src/getSwizzleConfig.ts b/packages/docusaurus-theme-classic/src/getSwizzleConfig.ts index 3a800e8617d7..833c28465c89 100644 --- a/packages/docusaurus-theme-classic/src/getSwizzleConfig.ts +++ b/packages/docusaurus-theme-classic/src/getSwizzleConfig.ts @@ -28,6 +28,14 @@ export default function getSwizzleConfig(): SwizzleConfig { description: 'The color mode toggle to switch between light and dark mode.', }, + 'DocBreadcrumbs/Items': { + actions: { + eject: 'unsafe', + wrap: 'forbidden', // Can't wrap a folder + }, + description: + 'The components responsible for rendering the breadcrumb items', + }, DocCardList: { actions: { eject: 'safe', diff --git a/packages/docusaurus-theme-classic/src/theme-classic.d.ts b/packages/docusaurus-theme-classic/src/theme-classic.d.ts index b3b5a250a256..eac330fc4e6d 100644 --- a/packages/docusaurus-theme-classic/src/theme-classic.d.ts +++ b/packages/docusaurus-theme-classic/src/theme-classic.d.ts @@ -1371,3 +1371,7 @@ declare module '@theme/prism-include-languages' { PrismObject: typeof PrismNamespace, ): void; } + +declare module '@theme/DocBreadcrumbs/Items/Home' { + export default function HomeBreadcrumbItem(): JSX.Element; +} diff --git a/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/Items/Home/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/Items/Home/index.tsx new file mode 100644 index 000000000000..cb8ae8d518b3 --- /dev/null +++ b/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/Items/Home/index.tsx @@ -0,0 +1,33 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import React from 'react'; +import Link from '@docusaurus/Link'; +import useBaseUrl from '@docusaurus/useBaseUrl'; +import {translate} from '@docusaurus/Translate'; +import IconHome from '@theme/Icon/Home'; + +import styles from './styles.module.css'; + +export default function HomeBreadcrumbItem(): JSX.Element { + const homeHref = useBaseUrl('/'); + + return ( +
  • + + + +
    • + ); +} diff --git a/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/Items/Home/styles.module.css b/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/Items/Home/styles.module.css new file mode 100644 index 000000000000..81c9f729b749 --- /dev/null +++ b/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/Items/Home/styles.module.css @@ -0,0 +1,14 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +.breadcrumbHomeIcon { + position: relative; + top: 1px; + vertical-align: top; + height: 1.1rem; + width: 1.1rem; +} diff --git a/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/index.tsx index 1e296be0bded..74e02efdf119 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/index.tsx @@ -13,9 +13,8 @@ import { useHomePageRoute, } from '@docusaurus/theme-common/internal'; import Link from '@docusaurus/Link'; -import useBaseUrl from '@docusaurus/useBaseUrl'; import {translate} from '@docusaurus/Translate'; -import IconHome from '@theme/Icon/Home'; +import HomeBreadcrumbItem from '@theme/DocBreadcrumbs/Items/Home'; import styles from './styles.module.css'; @@ -79,24 +78,6 @@ function BreadcrumbsItem({ ); } -function HomeBreadcrumbItem() { - const homeHref = useBaseUrl('/'); - return ( -
  • - - - -
    • - ); -} - export default function DocBreadcrumbs(): JSX.Element | null { const breadcrumbs = useSidebarBreadcrumbs(); const homePageRoute = useHomePageRoute(); diff --git a/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/styles.module.css b/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/styles.module.css index 5794e1b3c9fa..a400c5d9e622 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/styles.module.css +++ b/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/styles.module.css @@ -9,11 +9,3 @@ --ifm-breadcrumb-size-multiplier: 0.8; margin-bottom: 0.8rem; } - -.breadcrumbHomeIcon { - position: relative; - top: 1px; - vertical-align: top; - height: 1.1rem; - width: 1.1rem; -} 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 2971f6e9f8c7..31c20d35685a 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 @@ -1,5 +1,26 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`swizzle eject ComponentInFolder JS: ComponentInFolder/ComponentInSubFolder/index.css 1`] = ` +".testClass { + background: black; +} +" +`; + +exports[`swizzle eject ComponentInFolder JS: ComponentInFolder/ComponentInSubFolder/styles.css 1`] = ` +".testClass { + background: black; +} +" +`; + +exports[`swizzle eject ComponentInFolder JS: ComponentInFolder/ComponentInSubFolder/styles.module.css 1`] = ` +".testClass { + background: black; +} +" +`; + exports[`swizzle eject ComponentInFolder JS: ComponentInFolder/Sibling.css 1`] = ` ".testClass { background: black; @@ -17,10 +38,44 @@ exports[`swizzle eject ComponentInFolder JS: ComponentInFolder/index.css 1`] = ` exports[`swizzle eject ComponentInFolder JS: theme dir tree 1`] = ` "theme └── ComponentInFolder + ├── ComponentInSubFolder + │ ├── index.css + │ ├── styles.css + │ └── styles.module.css ├── Sibling.css └── index.css" `; +exports[`swizzle eject ComponentInFolder TS: ComponentInFolder/ComponentInSubFolder/index.css 1`] = ` +".testClass { + background: black; +} +" +`; + +exports[`swizzle eject ComponentInFolder TS: ComponentInFolder/ComponentInSubFolder/index.tsx 1`] = ` +"import React from 'react'; + +export default function ComponentInSubFolder() { + return
    ComponentInSubFolder
    ; +} +" +`; + +exports[`swizzle eject ComponentInFolder TS: ComponentInFolder/ComponentInSubFolder/styles.css 1`] = ` +".testClass { + background: black; +} +" +`; + +exports[`swizzle eject ComponentInFolder TS: ComponentInFolder/ComponentInSubFolder/styles.module.css 1`] = ` +".testClass { + background: black; +} +" +`; + exports[`swizzle eject ComponentInFolder TS: ComponentInFolder/Sibling.css 1`] = ` ".testClass { background: black; @@ -56,6 +111,11 @@ export default function ComponentInFolder() { exports[`swizzle eject ComponentInFolder TS: theme dir tree 1`] = ` "theme └── ComponentInFolder + ├── ComponentInSubFolder + │ ├── index.css + │ ├── index.tsx + │ ├── styles.css + │ └── styles.module.css ├── Sibling.css ├── Sibling.tsx ├── index.css diff --git a/packages/docusaurus/src/commands/swizzle/__tests__/actions.test.ts b/packages/docusaurus/src/commands/swizzle/__tests__/actions.test.ts index b6e7bed38bde..d13a32cc5bd6 100644 --- a/packages/docusaurus/src/commands/swizzle/__tests__/actions.test.ts +++ b/packages/docusaurus/src/commands/swizzle/__tests__/actions.test.ts @@ -110,9 +110,10 @@ describe('eject', () => { it(`eject ${Components.ComponentInFolder}`, async () => { const result = await testEject('eject', Components.ComponentInFolder); expect(result.createdFiles).toEqual([ - // TODO do we really want to copy those Sibling components? - // It's hard to filter those reliably - // (index.* is not good, we need to include styles.css too) + 'ComponentInFolder/ComponentInSubFolder/index.css', + 'ComponentInFolder/ComponentInSubFolder/index.tsx', + 'ComponentInFolder/ComponentInSubFolder/styles.css', + 'ComponentInFolder/ComponentInSubFolder/styles.module.css', 'ComponentInFolder/Sibling.css', 'ComponentInFolder/Sibling.tsx', 'ComponentInFolder/index.css', @@ -121,6 +122,11 @@ describe('eject', () => { expect(result.tree).toMatchInlineSnapshot(` "theme └── ComponentInFolder + ├── ComponentInSubFolder + │ ├── index.css + │ ├── index.tsx + │ ├── styles.css + │ └── styles.module.css ├── Sibling.css ├── Sibling.tsx ├── index.css diff --git a/packages/docusaurus/src/commands/swizzle/actions.ts b/packages/docusaurus/src/commands/swizzle/actions.ts index a9082737c104..1bbdb6f47d79 100644 --- a/packages/docusaurus/src/commands/swizzle/actions.ts +++ b/packages/docusaurus/src/commands/swizzle/actions.ts @@ -56,7 +56,7 @@ export async function eject({ const isDirectory = await isDir(fromPath); const globPattern = isDirectory ? // Do we really want to copy all components? - path.join(fromPath, '*') + path.join(fromPath, '**/*') : `${fromPath}.*`; const globPatternPosix = posixPath(globPattern); @@ -67,6 +67,7 @@ export async function eject({ // 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}', + '**/{__fixtures__,__tests__}/*', ]), });