refactor: declare all props as interfaces (#6730)

* refactor: declare all props as interfaces

* fix

* fix...

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

@@ -140,9 +140,9 @@ declare module '@docusaurus/Head' {
   import type {HelmetProps} from 'react-helmet-async';
   import type {ReactNode} from 'react';
 
-  export type HeadProps = HelmetProps & {children: ReactNode};
+  export type Props = HelmetProps & {children: ReactNode};
 
-  const Head: (props: HeadProps) => JSX.Element;
+  const Head: (props: Props) => JSX.Element;
   export default Head;
 }
 
@@ -150,7 +150,7 @@ declare module '@docusaurus/Link' {
   import type {CSSProperties, ComponentProps} from 'react';
 
   type NavLinkProps = Partial<import('react-router-dom').NavLinkProps>;
-  export type LinkProps = NavLinkProps &
+  export type Props = NavLinkProps &
     ComponentProps<'a'> & {
       readonly className?: string;
       readonly style?: CSSProperties;
@@ -162,7 +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: LinkProps) => JSX.Element;
+  const Link: (props: Props) => JSX.Element;
   export default Link;
 }
 

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

@@ -66,8 +66,8 @@ declare module '@theme/IdealImage' {
     images: SrcType[];
   };
 
-  export type Props = ComponentProps<'img'> & {
+  export interface Props extends ComponentProps<'img'> {
-    img: {default: string} | {src: SrcImage; preSrc: string} | string;
+    readonly img: {default: string} | {src: SrcImage; preSrc: string} | string;
-  };
+  }
   export default function IdealImage(props: Props): JSX.Element;
 }

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

@@ -25,10 +25,10 @@ declare module '@docusaurus/plugin-pwa' {
 }
 
 declare module '@theme/PwaReloadPopup' {
-  export type PwaReloadPopupProps = {
+  export interface Props {
     readonly onReload: () => void;
-  };
+  }
 
-  const PwaReloadPopup: (props: PwaReloadPopupProps) => JSX.Element;
+  const PwaReloadPopup: (props: Props) => JSX.Element;
   export default PwaReloadPopup;
 }

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

@@ -9,11 +9,11 @@ import React, {useState} from 'react';
 import clsx from 'clsx';
 import Translate, {translate} from '@docusaurus/Translate';
 
-import type {PwaReloadPopupProps} from '@theme/PwaReloadPopup';
+import type {Props} from '@theme/PwaReloadPopup';
 
 import styles from './styles.module.css';
 
-function PwaReloadPopup({onReload}: PwaReloadPopupProps): JSX.Element | false {
+function PwaReloadPopup({onReload}: Props): JSX.Element | false {
   const [isVisible, setIsVisible] = useState(true);
 
   return (

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

@@ -208,9 +208,9 @@ declare module '@theme/DocSidebarItems' {
   import type {Props as DocSidebarItemProps} from '@theme/DocSidebarItem';
   import type {PropSidebarItem} from '@docusaurus/plugin-content-docs';
 
-  export type Props = Omit<DocSidebarItemProps, 'item' | 'index'> & {
+  export interface Props extends Omit<DocSidebarItemProps, 'item' | 'index'> {
     readonly items: readonly PropSidebarItem[];
-  };
+  }
 
   export default function DocSidebarItems(props: Props): JSX.Element;
 }
@@ -381,15 +381,15 @@ declare module '@theme/NavbarItem/DefaultNavbarItem' {
 
 declare module '@theme/NavbarItem/NavbarNavLink' {
   import type {ReactNode} from 'react';
-  import type {LinkProps} from '@docusaurus/Link';
+  import type {Props as LinkProps} from '@docusaurus/Link';
 
-  export type Props = LinkProps & {
+  export interface Props extends LinkProps {
     readonly activeBasePath?: string;
     readonly activeBaseRegex?: string;
     readonly exact?: boolean;
     readonly label?: ReactNode;
     readonly prependBaseUrlToHref?: string;
-  };
+  }
 
   export default function NavbarNavLink(props: Props): JSX.Element;
 }
@@ -605,67 +605,58 @@ declare module '@theme/Details' {
 declare module '@theme/TOCItems' {
   import type {TOCItem} from '@docusaurus/types';
 
-  export type TOCItemsProps = {
+  export interface Props {
     readonly toc: readonly TOCItem[];
     readonly minHeadingLevel?: number;
     readonly maxHeadingLevel?: number;
     readonly className?: string;
     readonly linkClassName?: string | null;
     readonly linkActiveClassName?: string;
-  };
+  }
 
-  export default function TOCItems(props: TOCItemsProps): JSX.Element;
+  export default function TOCItems(props: Props): JSX.Element;
 }
 
 declare module '@theme/TOC' {
   import type {TOCItem} from '@docusaurus/types';
 
-  // minHeadingLevel only exists as a per-doc option,
+  // minHeadingLevel only exists as a per-doc option, and won't have a default
-  // and won't have a default set by Joi. See TOC, TOCInline,
+  // set by Joi. See TOC, TOCInline, TOCCollapsible for examples
-  // TOCCollapsible for examples
+  export interface Props {
-  export type TOCProps = {
     readonly toc: readonly TOCItem[];
     readonly minHeadingLevel?: number;
     readonly maxHeadingLevel?: number;
     readonly className?: string;
-  };
+  }
 
-  export type TOCHeadingsProps = {
+  const TOC: (props: Props) => JSX.Element;
-    readonly toc: readonly TOCItem[];
-    readonly minHeadingLevel?: number;
-    readonly maxHeadingLevel?: number;
-  };
-
-  export const TOCHeadings: (props: TOCHeadingsProps) => JSX.Element;
-
-  const TOC: (props: TOCProps) => JSX.Element;
   export default TOC;
 }
 
 declare module '@theme/TOCInline' {
   import type {TOCItem} from '@docusaurus/types';
 
-  export type TOCInlineProps = {
+  export interface Props {
     readonly toc: readonly TOCItem[];
     readonly minHeadingLevel?: number;
     readonly maxHeadingLevel?: number;
-  };
+  }
 
-  const TOCInline: (props: TOCInlineProps) => JSX.Element;
+  const TOCInline: (props: Props) => JSX.Element;
   export default TOCInline;
 }
 
 declare module '@theme/TOCCollapsible' {
   import type {TOCItem} from '@docusaurus/types';
 
-  export type TOCCollapsibleProps = {
+  export interface Props {
     readonly className?: string;
     readonly minHeadingLevel?: number;
     readonly maxHeadingLevel?: number;
     readonly toc: readonly TOCItem[];
-  };
+  }
 
-  const TOCCollapsible: (props: TOCCollapsibleProps) => JSX.Element;
+  const TOCCollapsible: (props: Props) => JSX.Element;
   export default TOCCollapsible;
 }
 

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

@@ -7,7 +7,7 @@
 
 import React from 'react';
 import clsx from 'clsx';
-import type {TOCProps} from '@theme/TOC';
+import type {Props} from '@theme/TOC';
 import TOCItems from '@theme/TOCItems';
 import styles from './styles.module.css';
 
@@ -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}: TOCProps): JSX.Element {
+function TOC({className, ...props}: Props): JSX.Element {
   return (
     <div className={clsx(styles.tableOfContents, 'thin-scrollbar', className)}>
       <TOCItems

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

@@ -11,14 +11,14 @@ import Translate from '@docusaurus/Translate';
 import {useCollapsible, Collapsible} from '@docusaurus/theme-common';
 import styles from './styles.module.css';
 import TOCItems from '@theme/TOCItems';
-import type {TOCCollapsibleProps} from '@theme/TOCCollapsible';
+import type {Props} from '@theme/TOCCollapsible';
 
 export default function TOCCollapsible({
   toc,
   className,
   minHeadingLevel,
   maxHeadingLevel,
-}: TOCCollapsibleProps): JSX.Element {
+}: Props): JSX.Element {
   const {collapsed, toggleCollapsed} = useCollapsible({
     initialState: true,
   });

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

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import type {TOCInlineProps} from '@theme/TOCInline';
+import type {Props} from '@theme/TOCInline';
 import styles from './styles.module.css';
 import TOCItems from '@theme/TOCItems';
 
@@ -14,7 +14,7 @@ function TOCInline({
   toc,
   minHeadingLevel,
   maxHeadingLevel,
-}: TOCInlineProps): JSX.Element {
+}: Props): JSX.Element {
   return (
     <div className={styles.tableOfContentsInline}>
       <TOCItems

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

@@ -6,7 +6,7 @@
  */
 
 import React, {useMemo} from 'react';
-import type {TOCItemsProps} from '@theme/TOCItems';
+import type {Props} from '@theme/TOCItems';
 import type {TOCItem} from '@docusaurus/types';
 import {
   type TOCHighlightConfig,
@@ -62,7 +62,7 @@ export default function TOCItems({
   minHeadingLevel: minHeadingLevelOption,
   maxHeadingLevel: maxHeadingLevelOption,
   ...props
-}: TOCItemsProps): JSX.Element | null {
+}: Props): JSX.Element | null {
   const themeConfig = useThemeConfig();
 
   const minHeadingLevel =

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

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

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

@@ -20,7 +20,7 @@ import {useLinksCollector} from '../LinksCollector';
 import {useBaseUrlUtils} from './useBaseUrl';
 import {applyTrailingSlash} from '@docusaurus/utils-common';
 
-import type {LinkProps} from '@docusaurus/Link';
+import type {Props} from '@docusaurus/Link';
 import type docusaurus from '../docusaurus';
 
 declare global {
@@ -46,7 +46,7 @@ function Link(
     'data-noBrokenLinkCheck': noBrokenLinkCheck,
     autoAddBaseUrl = true,
     ...props
-  }: LinkProps,
+  }: Props,
   forwardedRef: React.ForwardedRef<HTMLAnchorElement>,
 ): JSX.Element {
   const {
@@ -98,9 +98,7 @@ function Link(
   }
 
   const preloaded = useRef(false);
-  const LinkComponent = (
+  const LinkComponent = (isNavLink ? NavLink : RRLink) as ComponentType<Props>;
-    isNavLink ? NavLink : RRLink
-  ) as ComponentType<LinkProps>;
 
   const IOSupported = ExecutionEnvironment.canUseIntersectionObserver;