refactor: unify export directive style (#6751)

.eslintrc.js

@@ -161,6 +161,12 @@ module.exports = {
         message:
           "Export all does't work well if imported in ESM due to how they are transpiled, and they can also lead to unexpected exposure of internal methods.",
       },
+      // TODO make an internal plugin to ensure this
+      // {
+      //   selector:
+      // @   'ExportDefaultDeclaration > Identifier, ExportNamedDeclaration[source=null] > ExportSpecifier',
+      //   message: 'Export in one statement'
+      // }
     ],
     'no-template-curly-in-string': WARNING,
     'no-unused-expressions': [WARNING, {allowTaggedTemplates: true}],

packages/docusaurus-mdx-loader/src/deps.d.ts

@@ -23,7 +23,8 @@ declare module '@mdx-js/mdx' {
     function createMdxAstCompiler(options?: Options): Processor;
     function createCompiler(options?: Options): Processor;
   }
-  function mdx(content: string, options?: mdx.Options): Promise<string>;
+  export default function mdx(
-
+    content: string,
-  export default mdx;
+    options?: mdx.Options,
+  ): Promise<string>;
 }

packages/docusaurus-mdx-loader/src/remark/headings/index.ts

@@ -8,17 +8,16 @@
 /* Based on remark-slug (https://github.com/remarkjs/remark-slug) and gatsby-remark-autolink-headers (https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-remark-autolink-headers) */
 
 import {parseMarkdownHeadingId, createSlugger} from '@docusaurus/utils';
-import visit, {type Visitor} from 'unist-util-visit';
+import visit from 'unist-util-visit';
 import toString from 'mdast-util-to-string';
 import type {Transformer} from 'unified';
 import type {Parent} from 'unist';
 import type {Heading, Text} from 'mdast';
 
-function headings(): Transformer {
+export default function plugin(): Transformer {
-  const transformer: Transformer = (ast) => {
+  return (root) => {
     const slugs = createSlugger();
-
+    visit(root, 'heading', (headingNode: Heading) => {
-    const visitor: Visitor<Heading> = (headingNode) => {
       const data = headingNode.data || (headingNode.data = {});
       const properties = (data.hProperties || (data.hProperties = {})) as {
         id: string;
@@ -69,12 +68,6 @@ function headings(): Transformer {
 
       data.id = id;
       properties.id = id;
-    };
+    });
-
-    visit(ast, 'heading', visitor);
   };
-
-  return transformer;
 }
-
-export default headings;

packages/docusaurus-mdx-loader/src/remark/toc/index.ts

@@ -16,7 +16,7 @@ import {toValue} from '../utils';
 import type {TOCItem} from '@docusaurus/types';
 import type {Node, Parent} from 'unist';
 import type {Heading, Literal} from 'mdast';
-import type {Plugin, Transformer} from 'unified';
+import type {Transformer} from 'unified';
 
 const parseOptions: ParserOptions = {
   plugins: ['jsx'],
@@ -70,17 +70,17 @@ const getOrCreateExistingTargetIndex = (children: Node[], name: string) => {
   return targetIndex;
 };
 
-const plugin: Plugin<[PluginOptions?]> = (options = {}) => {
+export default function plugin(options: PluginOptions = {}): Transformer {
   const name = options.name || 'toc';
 
-  const transformer: Transformer = (node) => {
+  return (root) => {
     const headings: TOCItem[] = [];
 
-    visit(node, 'heading', (child: Heading, _index, parent) => {
+    visit(root, 'heading', (child: Heading, _index, parent) => {
       const value = toString(child);
 
       // depth:1 headings are titles and not included in the TOC
-      if (parent !== node || !value || child.depth < 2) {
+      if (parent !== root || !value || child.depth < 2) {
         return;
       }
 
@@ -90,7 +90,7 @@ const plugin: Plugin<[PluginOptions?]> = (options = {}) => {
         level: child.depth,
       });
     });
-    const {children} = node as Parent<Literal>;
+    const {children} = root as Parent<Literal>;
     const targetIndex = getOrCreateExistingTargetIndex(children, name);
 
     if (headings && headings.length) {
@@ -99,8 +99,4 @@ const plugin: Plugin<[PluginOptions?]> = (options = {}) => {
       )};`;
     }
   };
-
+}
-  return transformer;
-};
-
-export default plugin;

packages/docusaurus-mdx-loader/src/remark/transformImage/index.ts

@@ -19,7 +19,7 @@ import fs from 'fs-extra';
 import escapeHtml from 'escape-html';
 import sizeOf from 'image-size';
 import {promisify} from 'util';
-import type {Plugin, Transformer} from 'unified';
+import type {Transformer} from 'unified';
 import type {Image, Literal} from 'mdast';
 import logger from '@docusaurus/logger';
 
@@ -147,8 +147,8 @@ async function processImageNode(node: Image, context: Context) {
   await toImageRequireNode(node, imagePath, context.filePath);
 }
 
-const plugin: Plugin<[PluginOptions]> = (options) => {
+export default function plugin(options: PluginOptions): Transformer {
-  const transformer: Transformer = async (root, vfile) => {
+  return async (root, vfile) => {
     const promises: Promise<void>[] = [];
     visit(root, 'image', (node: Image) => {
       promises.push(
@@ -157,7 +157,4 @@ const plugin: Plugin<[PluginOptions]> = (options) => {
     });
     await Promise.all(promises);
   };
-  return transformer;
+}
-};
-
-export default plugin;

packages/docusaurus-mdx-loader/src/remark/transformLinks/index.ts

@@ -18,7 +18,7 @@ import url from 'url';
 import fs from 'fs-extra';
 import escapeHtml from 'escape-html';
 import {stringifyContent} from '../utils';
-import type {Plugin, Transformer} from 'unified';
+import type {Transformer} from 'unified';
 import type {Link, Literal} from 'mdast';
 
 const {
@@ -136,15 +136,12 @@ async function processLinkNode(node: Link, context: Context) {
   }
 }
 
-const plugin: Plugin<[PluginOptions]> = (options) => {
+export default function plugin(options: PluginOptions): Transformer {
-  const transformer: Transformer = async (root, vfile) => {
+  return async (root, vfile) => {
     const promises: Promise<void>[] = [];
     visit(root, 'link', (node: Link) => {
       promises.push(processLinkNode(node, {...options, filePath: vfile.path!}));
     });
     await Promise.all(promises);
   };
-  return transformer;
+}
-};
-
-export default plugin;

packages/docusaurus-mdx-loader/src/remark/unwrapMdxCodeBlocks/index.ts

@@ -15,11 +15,11 @@ import type {Code, Parent} from 'mdast';
 // with the markup, but the JSX inside such code blocks should still be
 // evaluated as JSX
 // See https://github.com/facebook/docusaurus/pull/4278
-function plugin(this: Processor): Transformer {
+export default function plugin(this: Processor): Transformer {
-  const transformer: Transformer = (root) => {
+  return (root) => {
     visit(root, 'code', (node: Code, _index, parent) => {
       if (node.lang === 'mdx-code-block') {
-        const newChildren = (this!.parse(node.value) as Parent).children;
+        const newChildren = (this.parse(node.value) as Parent).children;
 
         // Replace the mdx code block by its content, parsed
         parent!.children.splice(
@@ -30,8 +30,4 @@ function plugin(this: Processor): Transformer {
       }
     });
   };
-
-  return transformer;
 }
-
-export default plugin;

packages/docusaurus-module-type-aliases/src/index.d.ts

@@ -143,8 +143,7 @@ declare module '@docusaurus/Head' {
 
   export type Props = HelmetProps & {children: ReactNode};
 
-  const Head: (props: Props) => JSX.Element;
+  export default function Head(props: Props): JSX.Element;
-  export default Head;
 }
 
 declare module '@docusaurus/Link' {
@@ -163,8 +162,7 @@ declare module '@docusaurus/Link' {
       // escape hatch in case broken links check is annoying for a specific link
       readonly 'data-noBrokenLinkCheck'?: boolean;
     };
-  const Link: (props: Props) => JSX.Element;
+  export default function Link(props: Props): JSX.Element;
-  export default Link;
 }
 
 declare module '@docusaurus/Interpolate' {
@@ -286,11 +284,10 @@ declare module '@docusaurus/ExecutionEnvironment' {
 declare module '@docusaurus/ComponentCreator' {
   import type Loadable from 'react-loadable';
 
-  function ComponentCreator(
+  export default function ComponentCreator(
     path: string,
     hash: string,
   ): ReturnType<typeof Loadable>;
-  export default ComponentCreator;
 }
 
 declare module '@docusaurus/BrowserOnly' {
@@ -298,8 +295,7 @@ declare module '@docusaurus/BrowserOnly' {
     readonly children?: () => JSX.Element;
     readonly fallback?: JSX.Element;
   }
-  const BrowserOnly: (props: Props) => JSX.Element | null;
+  export default function BrowserOnly(props: Props): JSX.Element | null;
-  export default BrowserOnly;
 }
 
 declare module '@docusaurus/isInternalUrl' {
@@ -329,8 +325,7 @@ declare module '@docusaurus/useGlobalData' {
   ): T;
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  function useGlobalData(): Record<string, any>;
+  export default function useGlobalData(): Record<string, any>;
-  export default useGlobalData;
 }
 
 declare module '*.svg' {

packages/docusaurus-plugin-content-blog/src/plugin-content-blog.d.ts

@@ -191,8 +191,7 @@ declare module '@theme/BlogPostPage' {
     readonly content: Content;
   }
 
-  const BlogPostPage: (props: Props) => JSX.Element;
+  export default function BlogPostPage(props: Props): JSX.Element;
-  export default BlogPostPage;
 }
 
 declare module '@theme/BlogListPage' {
@@ -217,8 +216,7 @@ declare module '@theme/BlogListPage' {
     readonly items: readonly {readonly content: Content}[];
   }
 
-  const BlogListPage: (props: Props) => JSX.Element;
+  export default function BlogListPage(props: Props): JSX.Element;
-  export default BlogListPage;
 }
 
 declare module '@theme/BlogTagsListPage' {
@@ -237,8 +235,7 @@ declare module '@theme/BlogTagsListPage' {
     readonly tags: Readonly<Record<string, Tag>>;
   }
 
-  const BlogTagsListPage: (props: Props) => JSX.Element;
+  export default function BlogTagsListPage(props: Props): JSX.Element;
-  export default BlogTagsListPage;
 }
 
 declare module '@theme/BlogTagsPostsPage' {
@@ -254,8 +251,7 @@ declare module '@theme/BlogTagsPostsPage' {
     readonly items: readonly {readonly content: Content}[];
   }
 
-  const BlogTagsPostsPage: (props: Props) => JSX.Element;
+  export default function BlogTagsPostsPage(props: Props): JSX.Element;
-  export default BlogTagsPostsPage;
 }
 
 declare module '@theme/BlogArchivePage' {

packages/docusaurus-plugin-content-docs/src/plugin-content-docs.d.ts

@@ -214,8 +214,7 @@ declare module '@theme/DocItem' {
     };
   }
 
-  const DocItem: (props: Props) => JSX.Element;
+  export default function DocItem(props: Props): JSX.Element;
-  export default DocItem;
 }
 
 declare module '@theme/DocCategoryGeneratedIndexPage' {
@@ -264,8 +263,7 @@ declare module '@theme/DocPage' {
     };
   }
 
-  const DocPage: (props: Props) => JSX.Element;
+  export default function DocPage(props: Props): JSX.Element;
-  export default DocPage;
 }
 
 // TODO until TS supports exports field... hope it's in 4.6

packages/docusaurus-plugin-content-pages/src/plugin-content-pages.d.ts

@@ -63,6 +63,5 @@ declare module '@theme/MDXPage' {
     };
   }
 
-  const MDXPage: (props: Props) => JSX.Element;
+  export default function MDXPage(props: Props): JSX.Element;
-  export default MDXPage;
 }

packages/docusaurus-plugin-debug/src/theme/DebugConfig/index.tsx

@@ -12,7 +12,7 @@ import DebugJsonView from '@theme/DebugJsonView';
 
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 
-function DebugMetadata(): JSX.Element {
+export default function DebugMetadata(): JSX.Element {
   const {siteConfig} = useDocusaurusContext();
   return (
     <DebugLayout>
@@ -21,5 +21,3 @@ function DebugMetadata(): JSX.Element {
     </DebugLayout>
   );
 }
-
-export default DebugMetadata;

packages/docusaurus-plugin-debug/src/theme/DebugContent/index.tsx

@@ -54,7 +54,7 @@ function PluginContent({
   );
 }
 
-function DebugContent({allContent}: Props): JSX.Element {
+export default function DebugContent({allContent}: Props): JSX.Element {
   return (
     <DebugLayout>
       <h2>Plugin content</h2>
@@ -77,5 +77,3 @@ function DebugContent({allContent}: Props): JSX.Element {
     </DebugLayout>
   );
 }
-
-export default DebugContent;

packages/docusaurus-plugin-debug/src/theme/DebugGlobalData/index.tsx

@@ -11,7 +11,7 @@ import DebugLayout from '@theme/DebugLayout';
 import DebugJsonView from '@theme/DebugJsonView';
 import useGlobalData from '@docusaurus/useGlobalData';
 
-function DebugMetadata(): JSX.Element {
+export default function DebugMetadata(): JSX.Element {
   const globalData = useGlobalData();
   return (
     <DebugLayout>
@@ -20,5 +20,3 @@ function DebugMetadata(): JSX.Element {
     </DebugLayout>
   );
 }
-
-export default DebugMetadata;

packages/docusaurus-plugin-debug/src/theme/DebugJsonView/index.tsx

@@ -27,7 +27,10 @@ function BrowserOnlyReactJson(props: ReactJsonViewProps) {
   );
 }
 
-function DebugJsonView({src, collapseDepth}: Props): JSX.Element {
+export default function DebugJsonView({
+  src,
+  collapseDepth,
+}: Props): JSX.Element {
   return (
     <BrowserOnlyReactJson
       src={src as object}
@@ -52,5 +55,3 @@ function DebugJsonView({src, collapseDepth}: Props): JSX.Element {
     />
   );
 }
-
-export default DebugJsonView;

packages/docusaurus-plugin-debug/src/theme/DebugLayout/index.tsx

@@ -25,7 +25,11 @@ function DebugNavLink({to, children}: {to: string; children: ReactNode}) {
   );
 }
 
-function DebugLayout({children}: {children: ReactNode}): JSX.Element {
+export default function DebugLayout({
+  children,
+}: {
+  children: ReactNode;
+}): JSX.Element {
   return (
     <>
       <Head>
@@ -53,5 +57,3 @@ function DebugLayout({children}: {children: ReactNode}): JSX.Element {
     </>
   );
 }
-
-export default DebugLayout;

packages/docusaurus-plugin-debug/src/theme/DebugRegistry/index.tsx

@@ -11,7 +11,7 @@ import DebugLayout from '@theme/DebugLayout';
 import registry from '@generated/registry';
 import styles from './styles.module.css';
 
-function DebugRegistry(): JSX.Element {
+export default function DebugRegistry(): JSX.Element {
   return (
     <DebugLayout>
       <h2>Registry</h2>
@@ -30,5 +30,3 @@ function DebugRegistry(): JSX.Element {
     </DebugLayout>
   );
 }
-
-export default DebugRegistry;

packages/docusaurus-plugin-debug/src/theme/DebugRoutes/index.tsx

@@ -12,7 +12,7 @@ import DebugJsonView from '@theme/DebugJsonView';
 import routes from '@generated/routes';
 import styles from './styles.module.css';
 
-function DebugRoutes(): JSX.Element {
+export default function DebugRoutes(): JSX.Element {
   return (
     <DebugLayout>
       <h2>Routes</h2>
@@ -37,5 +37,3 @@ function DebugRoutes(): JSX.Element {
     </DebugLayout>
   );
 }
-
-export default DebugRoutes;

packages/docusaurus-plugin-debug/src/theme/DebugSiteMetadata/index.tsx

@@ -11,7 +11,7 @@ import DebugLayout from '@theme/DebugLayout';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import styles from './styles.module.css';
 
-function DebugMetadata(): JSX.Element {
+export default function DebugMetadata(): JSX.Element {
   const {siteMetadata} = useDocusaurusContext();
   return (
     <DebugLayout>
@@ -43,5 +43,3 @@ function DebugMetadata(): JSX.Element {
     </DebugLayout>
   );
 }
-
-export default DebugMetadata;

packages/docusaurus-plugin-ideal-image/src/deps.d.ts

@@ -114,6 +114,5 @@ declare module '@endiliey/react-ideal-image' {
     width: number;
   }
 
-  declare const IdealImage: (props: ImageProps) => JSX.Element;
+  export default function IdealImage(props: ImageProps): JSX.Element;
-  export default IdealImage;
 }

packages/docusaurus-plugin-ideal-image/src/theme/IdealImage/index.tsx

@@ -80,7 +80,7 @@ const getMessage = (icon: IconKey, state: State) => {
   }
 };
 
-function IdealImage(props: Props): JSX.Element {
+export default function IdealImage(props: Props): JSX.Element {
   const {alt, className, img} = props;
 
   // In dev env just use regular img with original file
@@ -112,5 +112,3 @@ function IdealImage(props: Props): JSX.Element {
     />
   );
 }
-
-export default IdealImage;

packages/docusaurus-plugin-pwa/src/plugin-pwa.d.ts

@@ -28,7 +28,5 @@ declare module '@theme/PwaReloadPopup' {
   export interface Props {
     readonly onReload: () => void;
   }
-
+  export default function PwaReloadPopup(props: Props): JSX.Element;
-  const PwaReloadPopup: (props: Props) => JSX.Element;
-  export default PwaReloadPopup;
 }

packages/docusaurus-plugin-pwa/src/theme/PwaReloadPopup/index.tsx

@@ -13,7 +13,7 @@ import type {Props} from '@theme/PwaReloadPopup';
 
 import styles from './styles.module.css';
 
-function PwaReloadPopup({onReload}: Props): JSX.Element | false {
+export default function PwaReloadPopup({onReload}: Props): JSX.Element | false {
   const [isVisible, setIsVisible] = useState(true);
 
   return (
@@ -58,5 +58,3 @@ function PwaReloadPopup({onReload}: Props): JSX.Element | false {
     )
   );
 }
-
-export default PwaReloadPopup;

packages/docusaurus-theme-classic/src/theme-classic.d.ts

@@ -24,8 +24,7 @@ declare module '@theme/Admonition' {
 }
 
 declare module '@theme/AnnouncementBar' {
-  const AnnouncementBar: () => JSX.Element | null;
+  export default function AnnouncementBar(): JSX.Element | null;
-  export default AnnouncementBar;
 }
 
 declare module '@theme/BackToTopButton' {
@@ -38,9 +37,7 @@ declare module '@theme/BlogListPaginator' {
   export interface Props {
     readonly metadata: Metadata;
   }
-
+  export default function BlogListPaginator(props: Props): JSX.Element;
-  const BlogListPaginator: (props: Props) => JSX.Element;
-  export default BlogListPaginator;
 }
 
 declare module '@theme/BlogSidebar' {
@@ -54,8 +51,7 @@ declare module '@theme/BlogSidebar' {
     readonly sidebar: BlogSidebar;
   }
 
-  const BlogSidebar: (props: Props) => JSX.Element;
+  export default function BlogSidebar(props: Props): JSX.Element;
-  export default BlogSidebar;
 }
 
 declare module '@theme/BlogPostItem' {
@@ -71,8 +67,7 @@ declare module '@theme/BlogPostItem' {
     readonly children: JSX.Element;
   }
 
-  const BlogPostItem: (props: Props) => JSX.Element;
+  export default function BlogPostItem(props: Props): JSX.Element;
-  export default BlogPostItem;
 }
 
 declare module '@theme/BlogPostAuthor' {
@@ -105,8 +100,7 @@ declare module '@theme/BlogPostPaginator' {
     readonly prevItem?: Item;
   }
 
-  const BlogPostPaginator: (props: Props) => JSX.Element;
+  export default function BlogPostPaginator(props: Props): JSX.Element;
-  export default BlogPostPaginator;
 }
 
 declare module '@theme/BlogLayout' {
@@ -119,8 +113,7 @@ declare module '@theme/BlogLayout' {
     readonly toc?: ReactNode;
   }
 
-  const BlogLayout: (props: Props) => JSX.Element;
+  export default function BlogLayout(props: Props): JSX.Element;
-  export default BlogLayout;
 }
 
 declare module '@theme/CodeBlock' {
@@ -134,8 +127,7 @@ declare module '@theme/CodeBlock' {
     readonly language?: string;
   }
 
-  const CodeBlock: (props: Props) => JSX.Element;
+  export default function CodeBlock(props: Props): JSX.Element;
-  export default CodeBlock;
 }
 
 declare module '@theme/DocCard' {
@@ -185,8 +177,7 @@ declare module '@theme/DocSidebar' {
     readonly [key: string]: unknown;
   }
 
-  const DocSidebar: (props: Props) => JSX.Element;
+  export default function DocSidebar(props: Props): JSX.Element;
-  export default DocSidebar;
 }
 
 declare module '@theme/DocSidebarItem' {
@@ -232,16 +223,14 @@ declare module '@theme/DocVersionBadge' {
 }
 
 declare module '@theme/DocVersionSuggestions' {
-  const DocVersionSuggestions: () => JSX.Element;
+  export default function DocVersionSuggestions(): JSX.Element;
-  export default DocVersionSuggestions;
 }
 
 declare module '@theme/EditThisPage' {
   export interface Props {
     readonly editUrl: string;
   }
-  const EditThisPage: (props: Props) => JSX.Element;
+  export default function EditThisPage(props: Props): JSX.Element;
-  export default EditThisPage;
 }
 
 declare module '@theme/ErrorPageContent' {
@@ -252,8 +241,7 @@ declare module '@theme/ErrorPageContent' {
 }
 
 declare module '@theme/Footer' {
-  const Footer: () => JSX.Element | null;
+  export default function Footer(): JSX.Element | null;
-  export default Footer;
 }
 
 declare module '@theme/Heading' {
@@ -315,8 +303,7 @@ declare module '@theme/SearchMetadata' {
     readonly tag?: string;
   }
 
-  const SearchMetadata: (props: Props) => JSX.Element;
+  export default function SearchMetadata(props: Props): JSX.Element;
-  export default SearchMetadata;
 }
 
 declare module '@theme/LastUpdated' {
@@ -326,13 +313,11 @@ declare module '@theme/LastUpdated' {
     readonly lastUpdatedBy?: string;
   }
 
-  const LastUpdated: (props: Props) => JSX.Element;
+  export default function LastUpdated(props: Props): JSX.Element;
-  export default LastUpdated;
 }
 
 declare module '@theme/SkipToContent' {
-  const SkipToContent: () => JSX.Element;
+  export default function SkipToContent(): JSX.Element;
-  export default SkipToContent;
 }
 
 declare module '@theme/MDXComponents' {
@@ -359,8 +344,7 @@ declare module '@theme/MDXComponents' {
 }
 
 declare module '@theme/Navbar' {
-  const Navbar: () => JSX.Element;
+  export default function Navbar(): JSX.Element;
-  export default Navbar;
 }
 
 declare module '@theme/NavbarItem/DefaultNavbarItem' {
@@ -409,8 +393,7 @@ declare module '@theme/NavbarItem/DropdownNavbarItem' {
     readonly mobile?: boolean;
   }
 
-  const DropdownNavbarItem: (props: Props) => JSX.Element;
+  export default function DropdownNavbarItem(props: Props): JSX.Element;
-  export default DropdownNavbarItem;
 }
 
 declare module '@theme/NavbarItem/SearchNavbarItem' {
@@ -418,8 +401,7 @@ declare module '@theme/NavbarItem/SearchNavbarItem' {
     readonly mobile?: boolean;
   }
 
-  const SearchNavbarItem: (props: Props) => JSX.Element;
+  export default function SearchNavbarItem(props: Props): JSX.Element;
-  export default SearchNavbarItem;
 }
 
 declare module '@theme/NavbarItem/LocaleDropdownNavbarItem' {
@@ -431,8 +413,7 @@ declare module '@theme/NavbarItem/LocaleDropdownNavbarItem' {
     readonly dropdownItemsAfter: LinkLikeNavbarItemProps[];
   }
 
-  const LocaleDropdownNavbarItem: (props: Props) => JSX.Element;
+  export default function LocaleDropdownNavbarItem(props: Props): JSX.Element;
-  export default LocaleDropdownNavbarItem;
 }
 
 declare module '@theme/NavbarItem/DocsVersionDropdownNavbarItem' {
@@ -446,8 +427,9 @@ declare module '@theme/NavbarItem/DocsVersionDropdownNavbarItem' {
     readonly dropdownItemsAfter: LinkLikeNavbarItemProps[];
   }
 
-  const DocsVersionDropdownNavbarItem: (props: Props) => JSX.Element;
+  export default function DocsVersionDropdownNavbarItem(
-  export default DocsVersionDropdownNavbarItem;
+    props: Props,
+  ): JSX.Element;
 }
 
 declare module '@theme/NavbarItem/DocsVersionNavbarItem' {
@@ -457,8 +439,7 @@ declare module '@theme/NavbarItem/DocsVersionNavbarItem' {
     readonly docsPluginId?: string;
   }
 
-  const DocsVersionNavbarItem: (props: Props) => JSX.Element;
+  export default function DocsVersionNavbarItem(props: Props): JSX.Element;
-  export default DocsVersionNavbarItem;
 }
 
 declare module '@theme/NavbarItem/DocNavbarItem' {
@@ -469,8 +450,7 @@ declare module '@theme/NavbarItem/DocNavbarItem' {
     readonly docsPluginId?: string;
   }
 
-  const DocsSidebarNavbarItem: (props: Props) => JSX.Element;
+  export default function DocsSidebarNavbarItem(props: Props): JSX.Element;
-  export default DocsSidebarNavbarItem;
 }
 
 declare module '@theme/NavbarItem/DocSidebarNavbarItem' {
@@ -481,8 +461,7 @@ declare module '@theme/NavbarItem/DocSidebarNavbarItem' {
     readonly docsPluginId?: string;
   }
 
-  const DocSidebarNavbarItem: (props: Props) => JSX.Element;
+  export default function DocSidebarNavbarItem(props: Props): JSX.Element;
-  export default DocSidebarNavbarItem;
 }
 
 declare module '@theme/NavbarItem' {
@@ -518,8 +497,7 @@ declare module '@theme/NavbarItem' {
 
   export type Types = Props['type'];
 
-  const NavbarItem: (props: Props) => JSX.Element;
+  export default function NavbarItem(props: Props): JSX.Element;
-  export default NavbarItem;
 }
 
 declare module '@theme/NavbarItem/utils' {
@@ -555,8 +533,7 @@ declare module '@theme/TabItem' {
     readonly attributes?: Record<string, unknown>;
   }
 
-  const TabItem: (props: Props) => JSX.Element;
+  export default function TabItem(props: Props): JSX.Element;
-  export default TabItem;
 }
 
 declare module '@theme/Tabs' {
@@ -577,8 +554,7 @@ declare module '@theme/Tabs' {
     readonly className?: string;
   }
 
-  const Tabs: (props: Props) => JSX.Element;
+  export default function Tabs(props: Props): JSX.Element;
-  export default Tabs;
 }
 
 declare module '@theme/ThemedImage' {
@@ -591,8 +567,7 @@ declare module '@theme/ThemedImage' {
     };
   }
 
-  const ThemedImage: (props: Props) => JSX.Element;
+  export default function ThemedImage(props: Props): JSX.Element;
-  export default ThemedImage;
 }
 
 declare module '@theme/Details' {
@@ -629,8 +604,7 @@ declare module '@theme/TOC' {
     readonly className?: string;
   }
 
-  const TOC: (props: Props) => JSX.Element;
+  export default function TOC(props: Props): JSX.Element;
-  export default TOC;
 }
 
 declare module '@theme/TOCInline' {
@@ -642,8 +616,7 @@ declare module '@theme/TOCInline' {
     readonly maxHeadingLevel?: number;
   }
 
-  const TOCInline: (props: Props) => JSX.Element;
+  export default function TOCInline(props: Props): JSX.Element;
-  export default TOCInline;
 }
 
 declare module '@theme/TOCCollapsible' {
@@ -656,8 +629,7 @@ declare module '@theme/TOCCollapsible' {
     readonly toc: readonly TOCItem[];
   }
 
-  const TOCCollapsible: (props: Props) => JSX.Element;
+  export default function TOCCollapsible(props: Props): JSX.Element;
-  export default TOCCollapsible;
 }
 
 declare module '@theme/Toggle' {
@@ -669,8 +641,7 @@ declare module '@theme/Toggle' {
     readonly onChange: (e: SyntheticEvent) => void;
   }
 
-  const Toggle: (props: Props) => JSX.Element;
+  export default function Toggle(props: Props): JSX.Element;
-  export default Toggle;
 }
 
 declare module '@theme/Logo' {
@@ -681,8 +652,7 @@ declare module '@theme/Logo' {
     readonly titleClassName?: string;
   }
 
-  const Logo: (props: Props) => JSX.Element;
+  export default function Logo(props: Props): JSX.Element;
-  export default Logo;
 }
 
 declare module '@theme/IconArrow' {
@@ -690,8 +660,7 @@ declare module '@theme/IconArrow' {
 
   export interface Props extends ComponentProps<'svg'> {}
 
-  const IconArrow: (props: Props) => JSX.Element;
+  export default function IconArrow(props: Props): JSX.Element;
-  export default IconArrow;
 }
 
 declare module '@theme/IconEdit' {
@@ -699,8 +668,7 @@ declare module '@theme/IconEdit' {
 
   export interface Props extends ComponentProps<'svg'> {}
 
-  const IconEdit: (props: Props) => JSX.Element;
+  export default function IconEdit(props: Props): JSX.Element;
-  export default IconEdit;
 }
 
 declare module '@theme/IconMenu' {
@@ -708,8 +676,7 @@ declare module '@theme/IconMenu' {
 
   export interface Props extends ComponentProps<'svg'> {}
 
-  const IconMenu: (props: Props) => JSX.Element;
+  export default function IconMenu(props: Props): JSX.Element;
-  export default IconMenu;
 }
 
 declare module '@theme/IconClose' {
@@ -717,8 +684,7 @@ declare module '@theme/IconClose' {
 
   export interface Props extends ComponentProps<'svg'> {}
 
-  const IconClose: (props: Props) => JSX.Element;
+  export default function IconClose(props: Props): JSX.Element;
-  export default IconClose;
 }
 
 declare module '@theme/IconLanguage' {
@@ -726,8 +692,7 @@ declare module '@theme/IconLanguage' {
 
   export interface Props extends ComponentProps<'svg'> {}
 
-  const IconLanguage: (props: Props) => JSX.Element;
+  export default function IconLanguage(props: Props): JSX.Element;
-  export default IconLanguage;
 }
 
 declare module '@theme/IconExternalLink' {
@@ -735,8 +700,7 @@ declare module '@theme/IconExternalLink' {
 
   export interface Props extends ComponentProps<'svg'> {}
 
-  const IconExternalLink: (props: Props) => JSX.Element;
+  export default function IconExternalLink(props: Props): JSX.Element;
-  export default IconExternalLink;
 }
 
 declare module '@theme/TagsListByLetter' {
@@ -787,6 +751,5 @@ declare module '@theme/Seo' {
     readonly children?: ReactNode;
   }
 
-  const Seo: (props: Props) => JSX.Element;
+  export default function Seo(props: Props): JSX.Element;
-  export default Seo;
 }

packages/docusaurus-theme-classic/src/theme/AnnouncementBar/index.tsx

@@ -13,7 +13,7 @@ import IconClose from '@theme/IconClose';
 
 import styles from './styles.module.css';
 
-function AnnouncementBar(): JSX.Element | null {
+export default function AnnouncementBar(): JSX.Element | null {
   const {isActive, close} = useAnnouncementBar();
   const {announcementBar} = useThemeConfig();
 
@@ -51,5 +51,3 @@ function AnnouncementBar(): JSX.Element | null {
     </div>
   );
 }
-
-export default AnnouncementBar;

packages/docusaurus-theme-classic/src/theme/BackToTopButton/index.tsx

@@ -73,7 +73,7 @@ function useSmoothScrollToTop(): UseSmoothScrollTopReturn {
   };
 }
 
-function BackToTopButton(): JSX.Element {
+export default function BackToTopButton(): JSX.Element {
   const [show, setShow] = useState(false);
   const isFocusedAnchor = useRef(false);
   const {smoothScrollTop, cancelScrollToTop} = useSmoothScrollToTop();
@@ -141,5 +141,3 @@ function BackToTopButton(): JSX.Element {
     />
   );
 }
-
-export default BackToTopButton;

packages/docusaurus-theme-classic/src/theme/BlogLayout/index.tsx

@@ -12,7 +12,7 @@ import BlogSidebar from '@theme/BlogSidebar';
 
 import type {Props} from '@theme/BlogLayout';
 
-function BlogLayout(props: Props): JSX.Element {
+export default function BlogLayout(props: Props): JSX.Element {
   const {sidebar, toc, children, ...layoutProps} = props;
   const hasSidebar = sidebar && sidebar.items.length > 0;
 
@@ -40,5 +40,3 @@ function BlogLayout(props: Props): JSX.Element {
     </Layout>
   );
 }
-
-export default BlogLayout;

packages/docusaurus-theme-classic/src/theme/BlogListPage/index.tsx

@@ -14,7 +14,7 @@ import BlogListPaginator from '@theme/BlogListPaginator';
 import type {Props} from '@theme/BlogListPage';
 import {ThemeClassNames} from '@docusaurus/theme-common';
 
-function BlogListPage(props: Props): JSX.Element {
+export default function BlogListPage(props: Props): JSX.Element {
   const {metadata, items, sidebar} = props;
   const {
     siteConfig: {title: siteTitle},
@@ -48,5 +48,3 @@ function BlogListPage(props: Props): JSX.Element {
     </BlogLayout>
   );
 }
-
-export default BlogListPage;

packages/docusaurus-theme-classic/src/theme/BlogListPaginator/index.tsx

@@ -10,7 +10,7 @@ import Translate, {translate} from '@docusaurus/Translate';
 import PaginatorNavLink from '@theme/PaginatorNavLink';
 import type {Props} from '@theme/BlogListPaginator';
 
-function BlogListPaginator(props: Props): JSX.Element {
+export default function BlogListPaginator(props: Props): JSX.Element {
   const {metadata} = props;
   const {previousPage, nextPage} = metadata;
 
@@ -53,5 +53,3 @@ function BlogListPaginator(props: Props): JSX.Element {
     </nav>
   );
 }
-
-export default BlogListPaginator;

packages/docusaurus-theme-classic/src/theme/BlogPostAuthor/index.tsx

@@ -11,7 +11,7 @@ import type {Props} from '@theme/BlogPostAuthor';
 
 import styles from './styles.module.css';
 
-function BlogPostAuthor({author}: Props): JSX.Element {
+export default function BlogPostAuthor({author}: Props): JSX.Element {
   const {name, title, url, imageURL} = author;
   return (
     <div className="avatar margin-bottom--sm">
@@ -42,5 +42,3 @@ function BlogPostAuthor({author}: Props): JSX.Element {
     </div>
   );
 }
-
-export default BlogPostAuthor;

packages/docusaurus-theme-classic/src/theme/BlogPostItem/index.tsx

@@ -41,7 +41,7 @@ function useReadingTimePlural() {
   };
 }
 
-function BlogPostItem(props: Props): JSX.Element {
+export default function BlogPostItem(props: Props): JSX.Element {
   const readingTimePlural = useReadingTimePlural();
   const {withBaseUrl} = useBaseUrlUtils();
   const {
@@ -159,5 +159,3 @@ function BlogPostItem(props: Props): JSX.Element {
     </article>
   );
 }
-
-export default BlogPostItem;

packages/docusaurus-theme-classic/src/theme/BlogPostPage/index.tsx

@@ -14,7 +14,7 @@ import type {Props} from '@theme/BlogPostPage';
 import {ThemeClassNames} from '@docusaurus/theme-common';
 import TOC from '@theme/TOC';
 
-function BlogPostPage(props: Props): JSX.Element {
+export default function BlogPostPage(props: Props): JSX.Element {
   const {content: BlogPostContents, sidebar} = props;
   const {assets, metadata} = BlogPostContents;
   const {
@@ -95,5 +95,3 @@ function BlogPostPage(props: Props): JSX.Element {
     </BlogLayout>
   );
 }
-
-export default BlogPostPage;

packages/docusaurus-theme-classic/src/theme/BlogPostPaginator/index.tsx

@@ -10,7 +10,7 @@ import Translate, {translate} from '@docusaurus/Translate';
 import PaginatorNavLink from '@theme/PaginatorNavLink';
 import type {Props} from '@theme/BlogPostPaginator';
 
-function BlogPostPaginator(props: Props): JSX.Element {
+export default function BlogPostPaginator(props: Props): JSX.Element {
   const {nextItem, prevItem} = props;
 
   return (
@@ -52,5 +52,3 @@ function BlogPostPaginator(props: Props): JSX.Element {
     </nav>
   );
 }
-
-export default BlogPostPaginator;

packages/docusaurus-theme-classic/src/theme/BlogTagsListPage/index.tsx

@@ -15,7 +15,7 @@ import {
   translateTagsPageTitle,
 } from '@docusaurus/theme-common';
 
-function BlogTagsListPage(props: Props): JSX.Element {
+export default function BlogTagsListPage(props: Props): JSX.Element {
   const {tags, sidebar} = props;
   const title = translateTagsPageTitle();
   return (
@@ -33,5 +33,3 @@ function BlogTagsListPage(props: Props): JSX.Element {
     </BlogLayout>
   );
 }
-
-export default BlogTagsListPage;

packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx

@@ -145,7 +145,7 @@ function DocPageContent({
   );
 }
 
-function DocPage(props: Props): JSX.Element {
+export default function DocPage(props: Props): JSX.Element {
   const {
     route: {routes: docRoutes},
     versionMetadata,
@@ -184,5 +184,3 @@ function DocPage(props: Props): JSX.Element {
     </>
   );
 }
-
-export default DocPage;

packages/docusaurus-theme-classic/src/theme/DocPaginator/index.tsx

@@ -10,7 +10,7 @@ import Translate, {translate} from '@docusaurus/Translate';
 import PaginatorNavLink from '@theme/PaginatorNavLink';
 import type {Props} from '@theme/DocPaginator';
 
-function DocPaginator(props: Props): JSX.Element {
+export default function DocPaginator(props: Props): JSX.Element {
   const {previous, next} = props;
 
   return (
@@ -52,5 +52,3 @@ function DocPaginator(props: Props): JSX.Element {
     </nav>
   );
 }
-
-export default DocPaginator;

packages/docusaurus-theme-classic/src/theme/DocTagsListPage/index.tsx

@@ -15,7 +15,7 @@ import {
 import TagsListByLetter from '@theme/TagsListByLetter';
 import type {Props} from '@theme/DocTagsListPage';
 
-function DocTagsListPage({tags}: Props): JSX.Element {
+export default function DocTagsListPage({tags}: Props): JSX.Element {
   const title = translateTagsPageTitle();
   return (
     <Layout
@@ -37,5 +37,3 @@ function DocTagsListPage({tags}: Props): JSX.Element {
     </Layout>
   );
 }
-
-export default DocTagsListPage;

packages/docusaurus-theme-classic/src/theme/IconArrow/index.tsx

@@ -8,7 +8,7 @@
 import React from 'react';
 import type {Props} from '@theme/IconArrow';
 
-function IconArrow(props: Props): JSX.Element {
+export default function IconArrow(props: Props): JSX.Element {
   return (
     <svg width="20" height="20" aria-hidden="true" {...props}>
       <g fill="#7a7a7a">
@@ -18,5 +18,3 @@ function IconArrow(props: Props): JSX.Element {
     </svg>
   );
 }
-
-export default IconArrow;

packages/docusaurus-theme-classic/src/theme/IconEdit/index.tsx

@@ -12,7 +12,10 @@ import type {Props} from '@theme/IconEdit';
 
 import styles from './styles.module.css';
 
-function IconEdit({className, ...restProps}: Props): JSX.Element {
+export default function IconEdit({
+  className,
+  ...restProps
+}: Props): JSX.Element {
   return (
     <svg
       fill="currentColor"
@@ -28,5 +31,3 @@ function IconEdit({className, ...restProps}: Props): JSX.Element {
     </svg>
   );
 }
-
-export default IconEdit;

packages/docusaurus-theme-classic/src/theme/IconExternalLink/index.tsx

@@ -10,7 +10,10 @@ import type {Props} from '@theme/IconExternalLink';
 
 import styles from './styles.module.css';
 
-function IconExternalLink({width = 13.5, height = 13.5}: Props): JSX.Element {
+export default function IconExternalLink({
+  width = 13.5,
+  height = 13.5,
+}: Props): JSX.Element {
   return (
     <svg
       width={width}
@@ -25,5 +28,3 @@ function IconExternalLink({width = 13.5, height = 13.5}: Props): JSX.Element {
     </svg>
   );
 }
-
-export default IconExternalLink;

packages/docusaurus-theme-classic/src/theme/IconLanguage/index.tsx

@@ -8,7 +8,11 @@
 import React from 'react';
 import type {Props} from '@theme/IconLanguage';
 
-function IconLanguage({width = 20, height = 20, ...props}: Props): JSX.Element {
+export default function IconLanguage({
+  width = 20,
+  height = 20,
+  ...props
+}: Props): JSX.Element {
   return (
     <svg
       viewBox="0 0 20 20"
@@ -23,5 +27,3 @@ function IconLanguage({width = 20, height = 20, ...props}: Props): JSX.Element {
     </svg>
   );
 }
-
-export default IconLanguage;

packages/docusaurus-theme-classic/src/theme/IconMenu/index.tsx

@@ -8,7 +8,7 @@
 import React from 'react';
 import type {Props} from '@theme/IconMenu';
 
-function IconMenu({
+export default function IconMenu({
   width = 30,
   height = 30,
   className,
@@ -32,5 +32,3 @@ function IconMenu({
     </svg>
   );
 }
-
-export default IconMenu;

packages/docusaurus-theme-classic/src/theme/Layout/index.tsx

@@ -19,7 +19,7 @@ import {ThemeClassNames, useKeyboardNavigation} from '@docusaurus/theme-common';
 import ErrorPageContent from '@theme/ErrorPageContent';
 import './styles.css';
 
-function Layout(props: Props): JSX.Element {
+export default function Layout(props: Props): JSX.Element {
   const {children, noFooter, wrapperClassName, pageClassName} = props;
 
   useKeyboardNavigation();
@@ -47,5 +47,3 @@ function Layout(props: Props): JSX.Element {
     </LayoutProviders>
   );
 }
-
-export default Layout;

packages/docusaurus-theme-classic/src/theme/Logo/index.tsx

@@ -14,7 +14,7 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import {useThemeConfig} from '@docusaurus/theme-common';
 
-function Logo(props: Props): JSX.Element {
+export default function Logo(props: Props): JSX.Element {
   const {
     siteConfig: {title},
   } = useDocusaurusContext();
@@ -52,5 +52,3 @@ function Logo(props: Props): JSX.Element {
     </Link>
   );
 }
-
-export default Logo;

packages/docusaurus-theme-classic/src/theme/MDXPage/index.tsx

@@ -16,7 +16,7 @@ import {ThemeClassNames} from '@docusaurus/theme-common';
 
 import styles from './styles.module.css';
 
-function MDXPage(props: Props): JSX.Element {
+export default function MDXPage(props: Props): JSX.Element {
   const {content: MDXPageContent} = props;
   const {
     metadata: {title, description, permalink, frontMatter},
@@ -52,5 +52,3 @@ function MDXPage(props: Props): JSX.Element {
     </Layout>
   );
 }
-
-export default MDXPage;

packages/docusaurus-theme-classic/src/theme/Navbar/index.tsx

@@ -220,7 +220,7 @@ function NavbarMobileSidebar({
   );
 }
 
-function Navbar(): JSX.Element {
+export default function Navbar(): JSX.Element {
   const {
     navbar: {hideOnScroll, style},
   } = useThemeConfig();
@@ -296,5 +296,3 @@ function Navbar(): JSX.Element {
     </nav>
   );
 }
-
-export default Navbar;

packages/docusaurus-theme-classic/src/theme/NavbarItem/DefaultNavbarItem.tsx

@@ -51,7 +51,7 @@ function DefaultNavbarItemMobile({
   );
 }
 
-function DefaultNavbarItem({
+export default function DefaultNavbarItem({
   mobile = false,
   position: _position, // Need to destructure position from props so that it doesn't get passed on.
   ...props
@@ -66,5 +66,3 @@ function DefaultNavbarItem({
     />
   );
 }
-
-export default DefaultNavbarItem;

packages/docusaurus-theme-classic/src/theme/NavbarItem/DropdownNavbarItem.tsx

@@ -172,9 +172,10 @@ function DropdownNavbarItemMobile({
   );
 }
 
-function DropdownNavbarItem({mobile = false, ...props}: Props): JSX.Element {
+export default function DropdownNavbarItem({
+  mobile = false,
+  ...props
+}: Props): JSX.Element {
   const Comp = mobile ? DropdownNavbarItemMobile : DropdownNavbarItemDesktop;
   return <Comp {...props} />;
 }
-
-export default DropdownNavbarItem;

packages/docusaurus-theme-classic/src/theme/NotFound.tsx

@@ -9,7 +9,7 @@ import React from 'react';
 import Layout from '@theme/Layout';
 import Translate, {translate} from '@docusaurus/Translate';
 
-function NotFound(): JSX.Element {
+export default function NotFound(): JSX.Element {
   return (
     <Layout
       title={translate({
@@ -47,5 +47,3 @@ function NotFound(): JSX.Element {
     </Layout>
   );
 }
-
-export default NotFound;

packages/docusaurus-theme-classic/src/theme/PaginatorNavLink/index.tsx

@@ -9,7 +9,7 @@ import React from 'react';
 import Link from '@docusaurus/Link';
 import type {Props} from '@theme/PaginatorNavLink';
 
-function PaginatorNavLink(props: Props): JSX.Element {
+export default function PaginatorNavLink(props: Props): JSX.Element {
   const {permalink, title, subLabel} = props;
   return (
     <Link className="pagination-nav__link" to={permalink}>
@@ -18,5 +18,3 @@ function PaginatorNavLink(props: Props): JSX.Element {
     </Link>
   );
 }
-
-export default PaginatorNavLink;

packages/docusaurus-theme-classic/src/theme/SkipToContent/index.tsx

@@ -18,7 +18,7 @@ function programmaticFocus(el: HTMLElement) {
   el.removeAttribute('tabindex');
 }
 
-function SkipToContent(): JSX.Element {
+export default function SkipToContent(): JSX.Element {
   const containerRef = useRef<HTMLDivElement>(null);
   const {action} = useHistory();
   const handleSkip = (e: React.MouseEvent<HTMLAnchorElement>) => {
@@ -52,5 +52,3 @@ function SkipToContent(): JSX.Element {
     </div>
   );
 }
-
-export default SkipToContent;

packages/docusaurus-theme-classic/src/theme/TOC/index.tsx

@@ -16,7 +16,7 @@ import styles from './styles.module.css';
 const LINK_CLASS_NAME = 'table-of-contents__link toc-highlight';
 const LINK_ACTIVE_CLASS_NAME = 'table-of-contents__link--active';
 
-function TOC({className, ...props}: Props): JSX.Element {
+export default function TOC({className, ...props}: Props): JSX.Element {
   return (
     <div className={clsx(styles.tableOfContents, 'thin-scrollbar', className)}>
       <TOCItems
@@ -27,5 +27,3 @@ function TOC({className, ...props}: Props): JSX.Element {
     </div>
   );
 }
-
-export default TOC;

packages/docusaurus-theme-classic/src/theme/TOCInline/index.tsx

@@ -10,7 +10,7 @@ import type {Props} from '@theme/TOCInline';
 import styles from './styles.module.css';
 import TOCItems from '@theme/TOCItems';
 
-function TOCInline({
+export default function TOCInline({
   toc,
   minHeadingLevel,
   maxHeadingLevel,
@@ -27,5 +27,3 @@ function TOCInline({
     </div>
   );
 }
-
-export default TOCInline;

packages/docusaurus-theme-classic/src/theme/TabItem/index.tsx

@@ -8,12 +8,14 @@
 import React from 'react';
 import type {Props} from '@theme/TabItem';
 
-function TabItem({children, hidden, className}: Props): JSX.Element {
+export default function TabItem({
+  children,
+  hidden,
+  className,
+}: Props): JSX.Element {
   return (
     <div role="tabpanel" {...{hidden, className}}>
       {children}
     </div>
   );
 }
-
-export default TabItem;

packages/docusaurus-theme-classic/src/theme/Tag/index.tsx

@@ -12,7 +12,7 @@ import type {Props} from '@theme/Tag';
 
 import styles from './styles.module.css';
 
-function Tag(props: Props): JSX.Element {
+export default function Tag(props: Props): JSX.Element {
   const {permalink, name, count} = props;
 
   return (
@@ -27,5 +27,3 @@ function Tag(props: Props): JSX.Element {
     </Link>
   );
 }
-
-export default Tag;

packages/docusaurus-theme-classic/src/theme/TagsListByLetter/index.tsx

@@ -28,7 +28,7 @@ function TagLetterEntryItem({letterEntry}: {letterEntry: TagLetterEntry}) {
   );
 }
 
-function TagsListByLetter({tags}: Props): JSX.Element {
+export default function TagsListByLetter({tags}: Props): JSX.Element {
   const letterList = listTagsByLetters(tags);
   return (
     <section className="margin-vert--lg">
@@ -41,5 +41,3 @@ function TagsListByLetter({tags}: Props): JSX.Element {
     </section>
   );
 }
-
-export default TagsListByLetter;

packages/docusaurus-theme-classic/src/theme/ThemedImage/index.tsx

@@ -14,7 +14,7 @@ import type {Props} from '@theme/ThemedImage';
 
 import styles from './styles.module.css';
 
-function ThemedImage(props: Props): JSX.Element {
+export default function ThemedImage(props: Props): JSX.Element {
   const isBrowser = useIsBrowser();
   const {isDarkTheme} = useColorMode();
   const {sources, className, alt = '', ...propsRest} = props;
@@ -47,5 +47,3 @@ function ThemedImage(props: Props): JSX.Element {
     </>
   );
 }
-
-export default ThemedImage;

packages/docusaurus-theme-classic/src/theme/prism-include-languages.ts

@@ -8,7 +8,9 @@
 import siteConfig from '@generated/docusaurus.config';
 import type * as PrismNamespace from 'prismjs';
 
-const prismIncludeLanguages = (PrismObject: typeof PrismNamespace): void => {
+export default function prismIncludeLanguages(
+  PrismObject: typeof PrismNamespace,
+): void {
   const {
     themeConfig: {prism},
   } = siteConfig;
@@ -28,6 +30,4 @@ const prismIncludeLanguages = (PrismObject: typeof PrismNamespace): void => {
   });
 
   delete (globalThis as Global & {Prism?: typeof PrismNamespace}).Prism;
-};
+}
-
-export default prismIncludeLanguages;

packages/docusaurus-theme-classic/src/validateThemeConfig.ts

@@ -29,7 +29,7 @@ const DEFAULT_COLOR_MODE_CONFIG = {
   },
 };
 
-const DEFAULT_CONFIG = {
+export const DEFAULT_CONFIG = {
   colorMode: DEFAULT_COLOR_MODE_CONFIG,
   docs: DEFAULT_DOCS_CONFIG,
   metadata: [],
@@ -263,7 +263,7 @@ const CustomCssSchema = Joi.alternatives()
   .try(Joi.array().items(Joi.string().required()), Joi.string().required())
   .optional();
 
-const ThemeConfigSchema = Joi.object({
+export const ThemeConfigSchema = Joi.object({
   // TODO temporary (@alpha-58)
   disableDarkMode: Joi.any().forbidden().messages({
     'any.unknown':
@@ -386,8 +386,6 @@ const ThemeConfigSchema = Joi.object({
   }).default(DEFAULT_CONFIG.tableOfContents),
 });
 
-export {DEFAULT_CONFIG, ThemeConfigSchema};
-
 export function validateThemeConfig({
   validate,
   themeConfig,

packages/docusaurus-theme-common/src/components/Details/index.tsx

@@ -34,7 +34,11 @@ export type DetailsProps = {
   summary?: ReactElement;
 } & ComponentProps<'details'>;
 
-function Details({summary, children, ...props}: DetailsProps): JSX.Element {
+export default function Details({
+  summary,
+  children,
+  ...props
+}: DetailsProps): JSX.Element {
   const isBrowser = useIsBrowser();
   const detailsRef = useRef<HTMLDetailsElement>(null);
 
@@ -96,5 +100,3 @@ function Details({summary, children, ...props}: DetailsProps): JSX.Element {
     </details>
   );
 }
-
-export default Details;

packages/docusaurus-theme-common/src/utils/useTOCHighlight.ts

@@ -122,7 +122,9 @@ export type TOCHighlightConfig = {
   maxHeadingLevel: number;
 };
 
-function useTOCHighlight(config: TOCHighlightConfig | undefined): void {
+export default function useTOCHighlight(
+  config: TOCHighlightConfig | undefined,
+): void {
   const lastActiveLinkRef = useRef<HTMLAnchorElement | undefined>(undefined);
 
   const anchorTopOffsetRef = useAnchorTopOffsetRef();
@@ -179,5 +181,3 @@ function useTOCHighlight(config: TOCHighlightConfig | undefined): void {
     };
   }, [config, anchorTopOffsetRef]);
 }
-
-export default useTOCHighlight;

packages/docusaurus-theme-live-codeblock/src/custom-buble.ts

@@ -10,7 +10,6 @@
 // https://github.com/FormidableLabs/react-live#what-bundle-size-can-i-expect
 import {
   transform as bubleTransform,
-  features as bubleFeatures,
   type TransformOptions,
   type TransformOutput,
 } from '@philpl/buble';
@@ -18,7 +17,7 @@ import {
 // This file is designed to mimic what's written in
 // https://github.com/kitten/buble/blob/mini/src/index.js, with custom transforms options,
 // so that webpack can consume it correctly.
-export {bubleFeatures as features};
+export {features} from '@philpl/buble';
 
 export function transform(
   source: string,

packages/docusaurus-theme-live-codeblock/src/validateThemeConfig.ts

@@ -8,11 +8,11 @@
 import {Joi} from '@docusaurus/utils-validation';
 import type {ThemeConfig, Validate, ValidationResult} from '@docusaurus/types';
 
-const DEFAULT_CONFIG = {
+export const DEFAULT_CONFIG = {
   playgroundPosition: 'bottom',
 };
 
-const Schema = Joi.object({
+export const Schema = Joi.object({
   liveCodeBlock: Joi.object({
     playgroundPosition: Joi.string()
       .equal('top', 'bottom')
@@ -22,7 +22,7 @@ const Schema = Joi.object({
     .default(DEFAULT_CONFIG),
 });
 
-function validateThemeConfig({
+export function validateThemeConfig({
   validate,
   themeConfig,
 }: {
@@ -31,5 +31,3 @@ function validateThemeConfig({
 }): ValidationResult<ThemeConfig> {
   return validate(Schema, themeConfig);
 }
-
-export {DEFAULT_CONFIG, Schema, validateThemeConfig};

packages/docusaurus-theme-search-algolia/src/theme-search-algolia.d.ts

@@ -27,11 +27,9 @@ declare module '@docusaurus/theme-search-algolia/client' {
 }
 
 declare module '@theme/SearchPage' {
-  const SearchPage: () => JSX.Element;
+  export default function SearchPage(): JSX.Element;
-  export default SearchPage;
 }
 
 declare module '@theme/SearchBar' {
-  const SearchBar: () => JSX.Element;
+  export default function SearchBar(): JSX.Element;
-  export default SearchBar;
 }

packages/docusaurus-theme-search-algolia/src/theme/SearchBar/index.tsx

@@ -270,9 +270,7 @@ function DocSearch({
   );
 }
 
-function SearchBar(): JSX.Element {
+export default function SearchBar(): JSX.Element {
   const {siteConfig} = useDocusaurusContext();
   return <DocSearch {...(siteConfig.themeConfig.algolia as DocSearchProps)} />;
 }
-
-export default SearchBar;

packages/docusaurus-theme-search-algolia/src/theme/SearchPage/index.tsx

@@ -149,7 +149,7 @@ type ResultDispatcher =
   | {type: 'update'; value: ResultDispatcherState}
   | {type: 'advance'; value?: undefined};
 
-function SearchPage(): JSX.Element {
+export default function SearchPage(): JSX.Element {
   const {
     siteConfig: {themeConfig},
     i18n: {currentLocale},
@@ -516,5 +516,3 @@ function SearchPage(): JSX.Element {
     </Layout>
   );
 }
-
-export default SearchPage;

packages/docusaurus-utils-common/src/index.ts

@@ -6,5 +6,7 @@
  */
 
 export const blogPostContainerID = 'post-content';
-export {default as applyTrailingSlash} from './applyTrailingSlash';
+export {
-export type {ApplyTrailingSlashParams} from './applyTrailingSlash';
+  default as applyTrailingSlash,
+  type ApplyTrailingSlashParams,
+} from './applyTrailingSlash';

packages/docusaurus/bin/beforeCli.mjs

@@ -36,7 +36,7 @@ const {
  *
  * cache data is stored in `~/.config/configstore/update-notifier-@docusaurus`
  */
-async function beforeCli() {
+export default async function beforeCli() {
   const notifier = updateNotifier({
     pkg: {
       name,
@@ -134,5 +134,3 @@ async function beforeCli() {
     process.exit(1);
   }
 }
-
-export default beforeCli;

packages/docusaurus/src/babel/preset.ts

@@ -70,9 +70,7 @@ function getTransformOptions(isServer: boolean): TransformOptions {
   };
 }
 
-function babelPresets(api: ConfigAPI): TransformOptions {
+export default function babelPresets(api: ConfigAPI): TransformOptions {
   const callerName = api.caller((caller) => caller?.name);
   return getTransformOptions(callerName === 'server');
 }
-
-export default babelPresets;

packages/docusaurus/src/client/App.tsx

@@ -21,7 +21,7 @@ import './client-lifecycles-dispatcher';
 import ErrorBoundary from '@docusaurus/ErrorBoundary';
 import Error from '@theme/Error';
 
-function App(): JSX.Element {
+export default function App(): JSX.Element {
   return (
     <ErrorBoundary fallback={Error}>
       <DocusaurusContextProvider>
@@ -37,5 +37,3 @@ function App(): JSX.Element {
     </ErrorBoundary>
   );
 }
-
-export default App;

packages/docusaurus/src/client/exports/BrowserOnly.tsx

@@ -10,7 +10,7 @@ import useIsBrowser from '@docusaurus/useIsBrowser';
 
 // Similar comp to the one described here:
 // https://www.joshwcomeau.com/react/the-perils-of-rehydration/#abstractions
-function BrowserOnly({
+export default function BrowserOnly({
   children,
   fallback,
 }: {
@@ -32,5 +32,3 @@ Current type: ${isValidElement(children) ? 'React element' : typeof children}`);
 
   return fallback || null;
 }
-
-export default BrowserOnly;

packages/docusaurus/src/client/exports/ComponentCreator.tsx

@@ -14,7 +14,7 @@ import flat from '../flat';
 
 type OptsLoader = Record<string, typeof registry[keyof typeof registry][0]>;
 
-function ComponentCreator(
+export default function ComponentCreator(
   path: string,
   hash: string,
 ): ReturnType<typeof Loadable> {
@@ -89,5 +89,3 @@ function ComponentCreator(
     },
   });
 }
-
-export default ComponentCreator;

packages/docusaurus/src/client/exports/ErrorBoundary.tsx

@@ -15,7 +15,7 @@ interface State {
   error: Error | null;
 }
 
-class ErrorBoundary extends React.Component<Props, State> {
+export default class ErrorBoundary extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props);
     this.state = {error: null};
@@ -47,5 +47,3 @@ class ErrorBoundary extends React.Component<Props, State> {
     );
   }
 }
-
-export default ErrorBoundary;

packages/docusaurus/src/client/exports/Head.tsx

@@ -9,8 +9,6 @@ import React from 'react';
 import {Helmet} from 'react-helmet-async';
 import type {Props} from '@docusaurus/Head';
 
-function Head(props: Props): JSX.Element {
+export default function Head(props: Props): JSX.Element {
   return <Helmet {...props} />;
 }
-
-export default Head;

packages/docusaurus/src/client/exports/renderRoutes.ts

@@ -5,6 +5,4 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {renderRoutes} from 'react-router-config';
+export {renderRoutes as default} from 'react-router-config';
-
-export default renderRoutes;

packages/docusaurus/src/client/exports/useDocusaurusContext.ts

@@ -9,8 +9,6 @@ import {useContext} from 'react';
 import {Context} from './docusaurusContext';
 import type {DocusaurusContext} from '@docusaurus/types';
 
-function useDocusaurusContext(): DocusaurusContext {
+export default function useDocusaurusContext(): DocusaurusContext {
   return useContext(Context);
 }
-
-export default useDocusaurusContext;

packages/docusaurus/src/client/flat.ts

@@ -10,7 +10,7 @@ import type {RouteChunksTree} from '@docusaurus/types';
 const isTree = (x: string | RouteChunksTree): x is RouteChunksTree =>
   typeof x === 'object' && !!x && Object.keys(x).length > 0;
 
-function flat(target: RouteChunksTree): Record<string, string> {
+export default function flat(target: RouteChunksTree): Record<string, string> {
   const delimiter = '.';
   const output: Record<string, string> = {};
 
@@ -30,5 +30,3 @@ function flat(target: RouteChunksTree): Record<string, string> {
   step(target);
   return output;
 }
-
-export default flat;

packages/docusaurus/src/client/normalizeLocation.ts

@@ -10,7 +10,7 @@ import type {Location} from 'history';
 // Memoize previously normalized pathnames.
 const pathnames: Record<string, string> = {};
 
-function normalizeLocation<T extends Location>(location: T): T {
+export default function normalizeLocation<T extends Location>(location: T): T {
   if (pathnames[location.pathname]) {
     return {
       ...location,
@@ -32,5 +32,3 @@ function normalizeLocation<T extends Location>(location: T): T {
     pathname,
   };
 }
-
-export default normalizeLocation;

packages/docusaurus/src/client/prefetch.ts

@@ -67,7 +67,7 @@ const supportedPrefetchStrategy = support('prefetch')
 
 const preFetched: Record<string, boolean> = {};
 
-function prefetch(url: string): Promise<void> {
+export default function prefetch(url: string): Promise<void> {
   return new Promise((resolve) => {
     if (preFetched[url]) {
       resolve();
@@ -82,5 +82,3 @@ function prefetch(url: string): Promise<void> {
       .catch(() => {}); // 404s are logged to the console anyway.
   });
 }
-
-export default prefetch;

packages/docusaurus/src/client/theme-fallback/Error/index.tsx

@@ -31,7 +31,7 @@ function ErrorDisplay({error, tryAgain}: Props): JSX.Element {
   );
 }
 
-function Error({error, tryAgain}: Props): JSX.Element {
+export default function Error({error, tryAgain}: Props): JSX.Element {
   // We wrap the error in its own error boundary because the layout can actually
   // throw too... Only the ErrorDisplay component is simple enough to be
   // considered safe to never throw
@@ -46,5 +46,3 @@ function Error({error, tryAgain}: Props): JSX.Element {
     </ErrorBoundary>
   );
 }
-
-export default Error;

packages/docusaurus/src/client/theme-fallback/Layout/index.tsx

@@ -11,7 +11,11 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import type {Props} from '@theme/Layout';
 
-function Layout({children, title, description}: Props): JSX.Element {
+export default function Layout({
+  children,
+  title,
+  description,
+}: Props): JSX.Element {
   const context = useDocusaurusContext();
   const {siteConfig} = context;
   const {favicon, tagline, title: defaultTitle} = siteConfig;
@@ -30,5 +34,3 @@ function Layout({children, title, description}: Props): JSX.Element {
     </>
   );
 }
-
-export default Layout;

packages/docusaurus/src/client/theme-fallback/NotFound/index.tsx

@@ -8,7 +8,7 @@
 import React from 'react';
 import Layout from '@theme/Layout';
 
-function NotFound(): JSX.Element {
+export default function NotFound(): JSX.Element {
   return (
     <Layout title="Page Not Found">
       <div
@@ -24,5 +24,3 @@ function NotFound(): JSX.Element {
     </Layout>
   );
 }
-
-export default NotFound;

packages/docusaurus/src/client/theme-fallback/Root/index.tsx

@@ -14,8 +14,6 @@ import type {ReactNode} from 'react';
 // and these providers won't reset state when we navigate
 //
 // See https://github.com/facebook/docusaurus/issues/3919
-function Root({children}: {children: ReactNode}): ReactNode {
+export default function Root({children}: {children: ReactNode}): ReactNode {
   return children;
 }
-
-export default Root;

packages/docusaurus/src/deps.d.ts

@@ -30,7 +30,7 @@ declare module 'react-loadable-ssr-addon-v5-slorber' {
     new (props: {filename: string});
   }
 
-  declare const plugin: ReactLoadableSSRAddon;
+  const plugin: ReactLoadableSSRAddon;
   export default plugin;
 }
 
@@ -57,7 +57,7 @@ declare module '@slorber/static-site-generator-webpack-plugin' {
     });
   }
 
-  declare const plugin: StaticSiteGeneratorPlugin;
+  const plugin: StaticSiteGeneratorPlugin;
   export default plugin;
 }
 

packages/docusaurus/src/server/loadSetup.ts

@@ -10,7 +10,7 @@ import {load} from './index';
 import type {Props} from '@docusaurus/types';
 
 // Helper methods to setup dummy/fake projects.
-const loadSetup = async (name: string): Promise<Props> => {
+export default async function loadSetup(name: string): Promise<Props> {
   const fixtures = path.join(__dirname, '__tests__', '__fixtures__');
   const simpleSite = path.join(fixtures, 'simple-site');
   const customSite = path.join(fixtures, 'custom-site');
@@ -22,6 +22,4 @@ const loadSetup = async (name: string): Promise<Props> => {
     default:
       return load(simpleSite);
   }
-};
+}
-
-export default loadSetup;

packages/docusaurus/src/webpack/plugins/ChunkAssetPlugin.ts

@@ -20,7 +20,7 @@ const pluginName = 'chunk-asset-plugin';
  *
  * "gca" stands for "get chunk asset"
  */
-class ChunkAssetPlugin {
+export default class ChunkAssetPlugin {
   apply(compiler: Compiler): void {
     compiler.hooks.thisCompilation.tap(pluginName, ({mainTemplate}) => {
       mainTemplate.hooks.requireExtensions.tap(pluginName, (source, chunk) => {
@@ -52,5 +52,3 @@ class ChunkAssetPlugin {
     });
   }
 }
-
-export default ChunkAssetPlugin;

packages/docusaurus/src/webpack/plugins/CleanWebpackPlugin.ts

@@ -67,7 +67,7 @@ export interface Options {
   cleanOnceBeforeBuildPatterns?: string[];
 }
 
-class CleanWebpackPlugin {
+export default class CleanWebpackPlugin {
   private readonly verbose: boolean;
   private readonly cleanStaleWebpackAssets: boolean;
   private readonly protectWebpackAssets: boolean;
@@ -250,5 +250,3 @@ class CleanWebpackPlugin {
     }
   }
 }
-
-export default CleanWebpackPlugin;

packages/lqip-loader/src/index.ts

@@ -13,7 +13,7 @@ type Options = {
   palette: boolean;
 };
 
-async function lqipLoader(
+export default async function lqipLoader(
   this: LoaderContext<Options>,
   contentBuffer: Buffer,
 ): Promise<void> {
@@ -78,5 +78,3 @@ async function lqipLoader(
 }
 
 lqipLoader.raw = true;
-
-export default lqipLoader;

packages/lqip-loader/src/lqip.ts

@@ -21,7 +21,7 @@ const SUPPORTED_MIMES: Record<string, string> = {
   png: 'image/png',
 };
 
-async function base64(file: string): Promise<string> {
+export async function base64(file: string): Promise<string> {
   let extension = path.extname(file) || '';
   extension = extension.split('.').pop()!;
 
@@ -36,7 +36,7 @@ async function base64(file: string): Promise<string> {
   throw new Error('Unhandled promise rejection in base64 promise');
 }
 
-async function palette(file: string): Promise<string[]> {
+export async function palette(file: string): Promise<string[]> {
   const vibrant = new Vibrant(file, {});
   const pal = await vibrant.getPalette();
   if (pal) {
@@ -48,5 +48,3 @@ async function palette(file: string): Promise<string[]> {
 process.on('unhandledRejection', (up) => {
   throw up;
 });
-
-export {base64, palette};

packages/lqip-loader/src/utils.ts

@@ -12,14 +12,14 @@ import type {Palette} from 'node-vibrant/lib/color';
  * it returns a Base64 image string with required formatting
  * to work on the web (<img src=".." /> or in CSS url('..'))
  */
-const toBase64 = (extMimeType: string, data: Buffer): string =>
+export const toBase64 = (extMimeType: string, data: Buffer): string =>
   `data:${extMimeType};base64,${data.toString('base64')}`;
 
 /**
  * takes a color swatch object, converts it to an array & returns
  * only hex color
  */
-const toPalette = (swatch: Palette): string[] => {
+export const toPalette = (swatch: Palette): string[] => {
   let palette = Object.keys(swatch).reduce((result, key) => {
     if (swatch[key] !== null) {
       result.push({
@@ -32,5 +32,3 @@ const toPalette = (swatch: Palette): string[] => {
   palette = _.sortBy(palette, ['popularity']);
   return palette.map((color) => color.hex).reverse();
 };
-
-export {toBase64, toPalette};

website/src/components/BrowserWindow/index.tsx

@@ -15,7 +15,7 @@ interface Props {
   url: string;
 }
 
-function BrowserWindow({
+export default function BrowserWindow({
   children,
   minHeight,
   url = 'http://localhost:3000',
@@ -42,5 +42,3 @@ function BrowserWindow({
     </div>
   );
 }
-
-export default BrowserWindow;

website/src/components/ColorGenerator/index.tsx

@@ -34,7 +34,7 @@ function wcagContrast(foreground: string, background: string) {
   return contrast > 7 ? 'AAA 🏅' : contrast > 4.5 ? 'AA 👍' : 'Fail 🔴';
 }
 
-function ColorGenerator(): JSX.Element {
+export default function ColorGenerator(): JSX.Element {
   const {isDarkTheme, setDarkTheme, setLightTheme} = useColorMode();
   const DEFAULT_PRIMARY_COLOR = isDarkTheme
     ? DARK_PRIMARY_COLOR
@@ -301,5 +301,3 @@ ${getAdjustedColors(shades, baseColor)
     </div>
   );
 }
-
-export default ColorGenerator;

website/src/pages/index.tsx

@@ -230,7 +230,7 @@ function FeaturesContainer() {
   );
 }
 
-function Home(): JSX.Element {
+export default function Home(): JSX.Element {
   const {
     siteConfig: {customFields, tagline},
   } = useDocusaurusContext();
@@ -250,5 +250,3 @@ function Home(): JSX.Element {
     </Layout>
   );
 }
-
-export default Home;

website/src/pages/showcase/_components/ShowcaseCard/index.tsx

@@ -59,38 +59,40 @@ function ShowcaseCardTag({tags}: {tags: TagType[]}) {
   );
 }
 
-const ShowcaseCard = memo(({user}: {user: User}) => (
+function ShowcaseCard({user}: {user: User}) {
-  <li key={user.title} className="card shadow--md">
+  return (
-    <div className={clsx('card__image', styles.showcaseCardImage)}>
+    <li key={user.title} className="card shadow--md">
-      <Image img={user.preview} alt={user.title} />
+      <div className={clsx('card__image', styles.showcaseCardImage)}>
-    </div>
+        <Image img={user.preview} alt={user.title} />
-    <div className="card__body">
-      <div className={clsx(styles.showcaseCardHeader)}>
-        <h4 className={styles.showcaseCardTitle}>
-          <Link href={user.website} className={styles.showcaseCardLink}>
-            {user.title}
-          </Link>
-        </h4>
-        {user.tags.includes('favorite') && (
-          <FavoriteIcon svgClass={styles.svgIconFavorite} size="small" />
-        )}
-        {user.source && (
-          <Link
-            href={user.source}
-            className={clsx(
-              'button button--secondary button--sm',
-              styles.showcaseCardSrcBtn,
-            )}>
-            <Translate id="showcase.card.sourceLink">source</Translate>
-          </Link>
-        )}
       </div>
-      <p className={styles.showcaseCardBody}>{user.description}</p>
+      <div className="card__body">
-    </div>
+        <div className={clsx(styles.showcaseCardHeader)}>
-    <ul className={clsx('card__footer', styles.cardFooter)}>
+          <h4 className={styles.showcaseCardTitle}>
-      <ShowcaseCardTag tags={user.tags} />
+            <Link href={user.website} className={styles.showcaseCardLink}>
-    </ul>
+              {user.title}
-  </li>
+            </Link>
-));
+          </h4>
+          {user.tags.includes('favorite') && (
+            <FavoriteIcon svgClass={styles.svgIconFavorite} size="small" />
+          )}
+          {user.source && (
+            <Link
+              href={user.source}
+              className={clsx(
+                'button button--secondary button--sm',
+                styles.showcaseCardSrcBtn,
+              )}>
+              <Translate id="showcase.card.sourceLink">source</Translate>
+            </Link>
+          )}
+        </div>
+        <p className={styles.showcaseCardBody}>{user.description}</p>
+      </div>
+      <ul className={clsx('card__footer', styles.cardFooter)}>
+        <ShowcaseCardTag tags={user.tags} />
+      </ul>
+    </li>
+  );
+}
 
-export default ShowcaseCard;
+export default memo(ShowcaseCard);

website/src/pages/showcase/_components/ShowcaseTagSelect/index.tsx

@@ -39,59 +39,58 @@ function replaceSearchTags(search: string, newTags: TagType[]) {
   return searchParams.toString();
 }
 
-const ShowcaseTagSelect = React.forwardRef<HTMLLabelElement, Props>(
+function ShowcaseTagSelect(
-  ({id, icon, label, tag, ...rest}, ref) => {
+  {id, icon, label, tag, ...rest}: Props,
-    const location = useLocation();
+  ref: React.ForwardedRef<HTMLLabelElement>,
-    const history = useHistory();
+) {
-    const [selected, setSelected] = useState(false);
+  const location = useLocation();
-    useEffect(() => {
+  const history = useHistory();
-      const tags = readSearchTags(location.search);
+  const [selected, setSelected] = useState(false);
-      setSelected(tags.includes(tag));
+  useEffect(() => {
-    }, [tag, location]);
+    const tags = readSearchTags(location.search);
-    const toggleTag = useCallback(() => {
+    setSelected(tags.includes(tag));
-      const tags = readSearchTags(location.search);
+  }, [tag, location]);
-      const newTags = toggleListItem(tags, tag);
+  const toggleTag = useCallback(() => {
-      const newSearch = replaceSearchTags(location.search, newTags);
+    const tags = readSearchTags(location.search);
-      history.push({
+    const newTags = toggleListItem(tags, tag);
-        ...location,
+    const newSearch = replaceSearchTags(location.search, newTags);
-        search: newSearch,
+    history.push({
-        state: prepareUserState(),
+      ...location,
-      });
+      search: newSearch,
-    }, [tag, location, history]);
+      state: prepareUserState(),
-    return (
+    });
-      <>
+  }, [tag, location, history]);
-        <input
+  return (
-          type="checkbox"
+    <>
-          id={id}
+      <input
-          className="screen-reader-only"
+        type="checkbox"
-          onKeyDown={(e) => {
+        id={id}
-            if (e.key === 'Enter') {
+        className="screen-reader-only"
-              toggleTag();
+        onKeyDown={(e) => {
-            }
+          if (e.key === 'Enter') {
-          }}
+            toggleTag();
-          onFocus={(e) => {
+          }
-            if (e.relatedTarget) {
+        }}
-              e.target.nextElementSibling?.dispatchEvent(
+        onFocus={(e) => {
-                new KeyboardEvent('focus'),
+          if (e.relatedTarget) {
-              );
-            }
-          }}
-          onBlur={(e) => {
             e.target.nextElementSibling?.dispatchEvent(
-              new KeyboardEvent('blur'),
+              new KeyboardEvent('focus'),
             );
-          }}
+          }
-          onChange={toggleTag}
+        }}
-          checked={selected}
+        onBlur={(e) => {
-          {...rest}
+          e.target.nextElementSibling?.dispatchEvent(new KeyboardEvent('blur'));
-        />
+        }}
-        <label ref={ref} htmlFor={id} className={styles.checkboxLabel}>
+        onChange={toggleTag}
-          {label}
+        checked={selected}
-          {icon}
+        {...rest}
-        </label>
+      />
-      </>
+      <label ref={ref} htmlFor={id} className={styles.checkboxLabel}>
-    );
+        {label}
-  },
+        {icon}
-);
+      </label>
+    </>
+  );
+}
 
-export default ShowcaseTagSelect;
+export default React.forwardRef(ShowcaseTagSelect);

website/src/pages/showcase/index.tsx

@@ -325,7 +325,7 @@ function ShowcaseCards() {
   );
 }
 
-function Showcase(): JSX.Element {
+export default function Showcase(): JSX.Element {
   return (
     <Layout title={TITLE} description={DESCRIPTION}>
       <main className="margin-vert--lg">
@@ -336,5 +336,3 @@ function Showcase(): JSX.Element {
     </Layout>
   );
 }
-
-export default Showcase;

website/src/pages/versions.tsx

@@ -34,7 +34,7 @@ function ReleaseNotesLabel() {
   );
 }
 
-function Version(): JSX.Element {
+export default function Version(): JSX.Element {
   const {
     siteConfig: {organizationName, projectName},
   } = useDocusaurusContext();
@@ -191,5 +191,3 @@ function Version(): JSX.Element {
     </Layout>
   );
 }
-
-export default Version;

website/src/plugins/changelog/theme/ChangelogAuthor/index.tsx

@@ -11,7 +11,7 @@ import type {Props} from '@theme/BlogPostAuthor';
 
 import styles from './styles.module.css';
 
-function ChangelogAuthor({author}: Props): JSX.Element {
+export default function ChangelogAuthor({author}: Props): JSX.Element {
   const {name, url, imageURL} = author;
   return (
     <div className="avatar margin-bottom--sm">
@@ -33,5 +33,3 @@ function ChangelogAuthor({author}: Props): JSX.Element {
     </div>
   );
 }
-
-export default ChangelogAuthor;

website/src/plugins/changelog/theme/ChangelogItem/index.tsx

@@ -18,7 +18,7 @@ import type {Props} from '@theme/BlogPostItem';
 import styles from './styles.module.css';
 import ChangelogAuthors from '@theme/ChangelogAuthors';
 
-function ChangelogItem(props: Props): JSX.Element {
+export default function ChangelogItem(props: Props): JSX.Element {
   const {withBaseUrl} = useBaseUrlUtils();
   const {
     children,
@@ -75,5 +75,3 @@ function ChangelogItem(props: Props): JSX.Element {
     </article>
   );
 }
-
-export default ChangelogItem;

website/src/plugins/changelog/theme/ChangelogList/index.tsx

@@ -15,7 +15,7 @@ import ChangelogItem from '@theme/ChangelogItem';
 
 import styles from './styles.module.css';
 
-function ChangelogList(props: Props): JSX.Element {
+export default function ChangelogList(props: Props): JSX.Element {
   const {metadata, items, sidebar} = props;
   const {blogDescription, blogTitle} = metadata;
 
@@ -88,5 +88,3 @@ function ChangelogList(props: Props): JSX.Element {
     </BlogLayout>
   );
 }
-
-export default ChangelogList;