fix(theme-classic) extract HomeBreadcrumbItem + fix swizzle bugs (#8445)

Co-authored-by: Sébastien Lorber <slorber@users.noreply.github.com>
Co-authored-by: sebastienlorber <lorber.sebastien@gmail.com>

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',

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;
+}

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 (
+    <li className="breadcrumbs__item">
+      <Link
+        aria-label={translate({
+          id: 'theme.docs.breadcrumbs.home',
+          message: 'Home page',
+          description: 'The ARIA label for the home page in the breadcrumbs',
+        })}
+        className="breadcrumbs__link"
+        href={homeHref}>
+        <IconHome className={styles.breadcrumbHomeIcon} />
+      </Link>
+    </li>
+  );
+}

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;
+}

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 (
-    <li className="breadcrumbs__item">
-      <Link
-        aria-label={translate({
-          id: 'theme.docs.breadcrumbs.home',
-          message: 'Home page',
-          description: 'The ARIA label for the home page in the breadcrumbs',
-        })}
-        className={clsx('breadcrumbs__link', styles.breadcrumbsItemLink)}
-        href={homeHref}>
-        <IconHome className={styles.breadcrumbHomeIcon} />
-      </Link>
-    </li>
-  );
-}
-
 export default function DocBreadcrumbs(): JSX.Element | null {
   const breadcrumbs = useSidebarBreadcrumbs();
   const homePageRoute = useHomePageRoute();

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;
-}

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 <div>ComponentInSubFolder</div>;
+}
+"
+`;
+
+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

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?
+      'ComponentInFolder/ComponentInSubFolder/index.css',
-      // It's hard to filter those reliably
+      'ComponentInFolder/ComponentInSubFolder/index.tsx',
-      // (index.* is not good, we need to include styles.css too)
+      '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

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__}/*',
     ]),
   });