refactor: prepare types for React 19

packages/create-docusaurus/templates/classic-typescript/src/components/HomepageFeatures/index.tsx

@@ -1,11 +1,12 @@
+import type {ReactNode} from 'react';
 import clsx from 'clsx';
 import Heading from '@theme/Heading';
 import styles from './styles.module.css';
 
 type FeatureItem = {
   title: string;
   Svg: React.ComponentType<React.ComponentProps<'svg'>>;
-  description: JSX.Element;
+  description: ReactNode;
 };
 
 const FeatureList: FeatureItem[] = [
@@ -55,7 +56,7 @@ function Feature({title, Svg, description}: FeatureItem) {
   );
 }
 
-export default function HomepageFeatures(): JSX.Element {
+export default function HomepageFeatures(): ReactNode {
   return (
     <section className={styles.features}>
       <div className="container">

packages/create-docusaurus/templates/classic-typescript/src/pages/index.tsx

@@ -1,3 +1,4 @@
+import type {ReactNode} from 'react';
 import clsx from 'clsx';
 import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
@@ -28,7 +29,7 @@ function HomepageHeader() {
   );
 }
 
-export default function Home(): JSX.Element {
+export default function Home(): ReactNode {
   const {siteConfig} = useDocusaurusContext();
   return (
     <Layout

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

@@ -5,6 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import type {ReactNode} from 'react';
+
 import {mdxLoader} from './loader';
 
 import type {TOCItem as TOCItemImported} from './remark/toc/types';
@@ -34,7 +36,7 @@ export type LoadedMDXContent<FrontMatter, Metadata, Assets = undefined> = {
    * in priority.
    */
   readonly assets: Assets;
-  (): JSX.Element;
+  (): ReactNode;
 };
 
 export type {MDXPlugin} from './loader';

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

@@ -84,10 +84,11 @@ declare module '@theme-original/*';
 declare module '@theme-init/*';
 
 declare module '@theme/Error' {
+  import type {ReactNode} from 'react';
   import type {FallbackParams} from '@docusaurus/ErrorBoundary';
 
   export interface Props extends FallbackParams {}
-  export default function Error(props: Props): JSX.Element;
+  export default function Error(props: Props): ReactNode;
 }
 
 declare module '@theme/Layout' {
@@ -96,17 +97,20 @@ declare module '@theme/Layout' {
   export interface Props {
     readonly children?: ReactNode;
   }
-  export default function Layout(props: Props): JSX.Element;
+  export default function Layout(props: Props): ReactNode;
 }
 
 declare module '@theme/Loading' {
+  import type {ReactNode} from 'react';
   import type {LoadingComponentProps} from 'react-loadable';
 
-  export default function Loading(props: LoadingComponentProps): JSX.Element;
+  export default function Loading(props: LoadingComponentProps): ReactNode;
 }
 
 declare module '@theme/NotFound' {
-  export default function NotFound(): JSX.Element;
+  import type {ReactNode} from 'react';
+
+  export default function NotFound(): ReactNode;
 }
 
 declare module '@theme/Root' {
@@ -115,11 +119,13 @@ declare module '@theme/Root' {
   export interface Props {
     readonly children: ReactNode;
   }
-  export default function Root({children}: Props): JSX.Element;
+  export default function Root({children}: Props): ReactNode;
 }
 
 declare module '@theme/SiteMetadata' {
-  export default function SiteMetadata(): JSX.Element;
+  import type {ReactNode} from 'react';
+
+  export default function SiteMetadata(): ReactNode;
 }
 
 declare module '@docusaurus/constants' {
@@ -134,13 +140,13 @@ declare module '@docusaurus/ErrorBoundary' {
     readonly tryAgain: () => void;
   };
 
-  export type FallbackFunction = (params: FallbackParams) => JSX.Element;
+  export type FallbackFunction = (params: FallbackParams) => ReactNode;
 
   export interface Props {
     readonly fallback?: FallbackFunction;
     readonly children: ReactNode;
   }
-  export default function ErrorBoundary(props: Props): JSX.Element;
+  export default function ErrorBoundary(props: Props): ReactNode;
 }
 
 declare module '@docusaurus/Head' {
@@ -149,11 +155,11 @@ declare module '@docusaurus/Head' {
 
   export type Props = HelmetProps & {children: ReactNode};
 
-  export default function Head(props: Props): JSX.Element;
+  export default function Head(props: Props): ReactNode;
 }
 
 declare module '@docusaurus/Link' {
-  import type {CSSProperties, ComponentProps} from 'react';
+  import type {CSSProperties, ComponentProps, ReactNode} from 'react';
   import type {NavLinkProps as RRNavLinkProps} from 'react-router-dom';
 
   type NavLinkProps = Partial<RRNavLinkProps>;
@@ -169,7 +175,7 @@ declare module '@docusaurus/Link' {
       /** Escape hatch in case broken links check doesn't make sense. */
       readonly 'data-noBrokenLinkCheck'?: boolean;
     };
-  export default function Link(props: Props): JSX.Element;
+  export default function Link(props: Props): ReactNode;
 }
 
 declare module '@docusaurus/Interpolate' {
@@ -203,7 +209,7 @@ declare module '@docusaurus/Interpolate' {
 
   export default function Interpolate<Str extends string>(
     props: InterpolateProps<Str>,
-  ): JSX.Element;
+  ): ReactNode;
 }
 
 declare module '@docusaurus/Translate' {
@@ -241,7 +247,7 @@ declare module '@docusaurus/Translate' {
 
   export default function Translate<Str extends string>(
     props: TranslateProps<Str>,
-  ): JSX.Element;
+  ): ReactNode;
 }
 
 declare module '@docusaurus/router' {
@@ -318,11 +324,13 @@ declare module '@docusaurus/ComponentCreator' {
 }
 
 declare module '@docusaurus/BrowserOnly' {
+  import type {ReactNode} from 'react';
+
   export interface Props {
-    readonly children?: () => JSX.Element;
-    readonly fallback?: JSX.Element;
+    readonly children?: () => ReactNode;
+    readonly fallback?: ReactNode;
   }
-  export default function BrowserOnly(props: Props): JSX.Element | null;
+  export default function BrowserOnly(props: Props): ReactNode | null;
 }
 
 declare module '@docusaurus/isInternalUrl' {

packages/docusaurus-plugin-content-blog/src/client/contexts.tsx

@@ -74,7 +74,7 @@ export function BlogPostProvider({
   children: ReactNode;
   content: PropBlogPostContent;
   isBlogPostPage?: boolean;
-}): JSX.Element {
+}): ReactNode {
   const contextValue = useContextValue({content, isBlogPostPage});
   return <Context.Provider value={contextValue}>{children}</Context.Provider>;
 }

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

@@ -663,6 +663,7 @@ declare module '@docusaurus/plugin-content-blog' {
 }
 
 declare module '@theme/BlogPostPage' {
+  import type {ReactNode} from 'react';
   import type {
     BlogPostFrontMatter,
     BlogSidebar,
@@ -683,18 +684,23 @@ declare module '@theme/BlogPostPage' {
     readonly blogMetadata: BlogMetadata;
   }
 
-  export default function BlogPostPage(props: Props): JSX.Element;
+  export default function BlogPostPage(props: Props): ReactNode;
 }
 
 declare module '@theme/BlogPostPage/Metadata' {
-  export default function BlogPostPageMetadata(): JSX.Element;
+  import type {ReactNode} from 'react';
+
+  export default function BlogPostPageMetadata(): ReactNode;
 }
 
 declare module '@theme/BlogPostPage/StructuredData' {
-  export default function BlogPostStructuredData(): JSX.Element;
+  import type {ReactNode} from 'react';
+
+  export default function BlogPostStructuredData(): ReactNode;
 }
 
 declare module '@theme/BlogListPage' {
+  import type {ReactNode} from 'react';
   import type {Content} from '@theme/BlogPostPage';
   import type {
     BlogSidebar,
@@ -713,10 +719,11 @@ declare module '@theme/BlogListPage' {
     readonly items: readonly {readonly content: Content}[];
   }
 
-  export default function BlogListPage(props: Props): JSX.Element;
+  export default function BlogListPage(props: Props): ReactNode;
 }
 
 declare module '@theme/BlogListPage/StructuredData' {
+  import type {ReactNode} from 'react';
   import type {Content} from '@theme/BlogPostPage';
   import type {
     BlogSidebar,
@@ -735,10 +742,11 @@ declare module '@theme/BlogListPage/StructuredData' {
     readonly items: readonly {readonly content: Content}[];
   }
 
-  export default function BlogListPageStructuredData(props: Props): JSX.Element;
+  export default function BlogListPageStructuredData(props: Props): ReactNode;
 }
 
 declare module '@theme/BlogTagsListPage' {
+  import type {ReactNode} from 'react';
   import type {BlogSidebar} from '@docusaurus/plugin-content-blog';
   import type {TagsListItem} from '@docusaurus/utils';
 
@@ -749,10 +757,11 @@ declare module '@theme/BlogTagsListPage' {
     readonly tags: TagsListItem[];
   }
 
-  export default function BlogTagsListPage(props: Props): JSX.Element;
+  export default function BlogTagsListPage(props: Props): ReactNode;
 }
 
 declare module '@theme/Blog/Pages/BlogAuthorsListPage' {
+  import type {ReactNode} from 'react';
   import type {
     AuthorItemProp,
     BlogSidebar,
@@ -765,10 +774,11 @@ declare module '@theme/Blog/Pages/BlogAuthorsListPage' {
     readonly authors: AuthorItemProp[];
   }
 
-  export default function BlogAuthorsListPage(props: Props): JSX.Element;
+  export default function BlogAuthorsListPage(props: Props): ReactNode;
 }
 
 declare module '@theme/Blog/Pages/BlogAuthorsPostsPage' {
+  import type {ReactNode} from 'react';
   import type {Content} from '@theme/BlogPostPage';
   import type {
     AuthorItemProp,
@@ -790,10 +800,11 @@ declare module '@theme/Blog/Pages/BlogAuthorsPostsPage' {
     readonly items: readonly {readonly content: Content}[];
   }
 
-  export default function BlogAuthorsPostsPage(props: Props): JSX.Element;
+  export default function BlogAuthorsPostsPage(props: Props): ReactNode;
 }
 
 declare module '@theme/BlogTagsPostsPage' {
+  import type {ReactNode} from 'react';
   import type {Content} from '@theme/BlogPostPage';
   import type {
     BlogSidebar,
@@ -815,10 +826,11 @@ declare module '@theme/BlogTagsPostsPage' {
     readonly items: readonly {readonly content: Content}[];
   }
 
-  export default function BlogTagsPostsPage(props: Props): JSX.Element;
+  export default function BlogTagsPostsPage(props: Props): ReactNode;
 }
 
 declare module '@theme/BlogArchivePage' {
+  import type {ReactNode} from 'react';
   import type {Content} from '@theme/BlogPostPage';
 
   /** We may add extra metadata or prune some metadata from here */
@@ -832,5 +844,5 @@ declare module '@theme/BlogArchivePage' {
     };
   }
 
-  export default function BlogArchivePage(props: Props): JSX.Element;
+  export default function BlogArchivePage(props: Props): ReactNode;
 }

packages/docusaurus-plugin-content-docs/src/client/doc.tsx

@@ -50,7 +50,7 @@ export function DocProvider({
 }: {
   children: ReactNode;
   content: PropDocContent;
-}): JSX.Element {
+}): ReactNode {
   const contextValue = useContextValue(content);
   return <Context.Provider value={contextValue}>{children}</Context.Provider>;
 }

packages/docusaurus-plugin-content-docs/src/client/docSidebarItemsExpandedState.tsx

@@ -36,7 +36,7 @@ export function DocSidebarItemsExpandedStateProvider({
   children,
 }: {
   children: ReactNode;
-}): JSX.Element {
+}): ReactNode {
   const [expandedItem, setExpandedItem] = useState<number | null>(null);
   const contextValue = useMemo(
     () => ({expandedItem, setExpandedItem}),

packages/docusaurus-plugin-content-docs/src/client/docsPreferredVersion.tsx

@@ -163,7 +163,7 @@ function DocsPreferredVersionContextProviderUnsafe({
   children,
 }: {
   children: ReactNode;
-}): JSX.Element {
+}): ReactNode {
   const value = useContextValue();
   return <Context.Provider value={value}>{children}</Context.Provider>;
 }
@@ -176,7 +176,7 @@ export function DocsPreferredVersionContextProvider({
   children,
 }: {
   children: ReactNode;
-}): JSX.Element {
+}): ReactNode {
   return (
     <DocsPreferredVersionContextProviderUnsafe>
       {children}

packages/docusaurus-plugin-content-docs/src/client/docsSidebar.tsx

@@ -30,7 +30,7 @@ export function DocsSidebarProvider({
   children: ReactNode;
   name: string | undefined;
   items: PropSidebar | undefined;
-}): JSX.Element {
+}): ReactNode {
   const stableValue: ContextValue | null = useMemo(
     () => (name && items ? {name, items} : null),
     [name, items],

packages/docusaurus-plugin-content-docs/src/client/docsUtils.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {useMemo} from 'react';
+import {type ReactNode, useMemo} from 'react';
 import {matchPath, useLocation} from '@docusaurus/router';
 import renderRoutes from '@docusaurus/renderRoutes';
 import {
@@ -363,7 +363,7 @@ Available doc ids are:
  */
 export function useDocRootMetadata({route}: DocRootProps): null | {
   /** The element that should be rendered at the current location. */
-  docElement: JSX.Element;
+  docElement: ReactNode;
   /**
    * The name of the sidebar associated with the current doc. `sidebarName` and
    * `sidebarItems` correspond to the value of {@link useDocsSidebar}.

packages/docusaurus-plugin-content-docs/src/client/docsVersion.tsx

@@ -20,7 +20,7 @@ export function DocsVersionProvider({
 }: {
   children: ReactNode;
   version: PropVersionMetadata | null;
-}): JSX.Element {
+}): ReactNode {
   return <Context.Provider value={version}>{children}</Context.Provider>;
 }