refactor: prepare types for React 19 (#10746)

This commit is contained in:
Sébastien Lorber 2024-12-06 18:03:04 +01:00 committed by GitHub
parent e9f0641620
commit f9825af43e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
296 changed files with 1105 additions and 915 deletions

View file

@ -84,7 +84,7 @@ const APITableRowComp = React.forwardRef(APITableRow);
* assumptions about how the children looks; however, those assumptions
* should be generally correct in the MDX context.
*/
export default function APITable({children, name}: Props): JSX.Element {
export default function APITable({children, name}: Props): ReactNode {
if (children.type !== 'table') {
throw new Error(
'Bad usage of APITable component.\nIt is probably that your Markdown table is malformed.\nMake sure to double-check you have the appropriate number of columns for each table row.',

View file

@ -5,12 +5,12 @@
* LICENSE file in the root directory of this source tree.
*/
import React from 'react';
import React, {type ReactNode} from 'react';
import BrowserWindow from './index';
// Quick and dirty component, to improve later if needed
export default function IframeWindow({url}: {url: string}): JSX.Element {
export default function IframeWindow({url}: {url: string}): ReactNode {
return (
<div style={{padding: 10}}>
<BrowserWindow

View file

@ -24,7 +24,7 @@ export default function BrowserWindow({
url = 'http://localhost:3000',
style,
bodyStyle,
}: Props): JSX.Element {
}: Props): ReactNode {
return (
<div className={styles.browserWindow} style={{...style, minHeight}}>
<div className={styles.browserWindowHeader}>

View file

@ -5,7 +5,7 @@
* LICENSE file in the root directory of this source tree.
*/
import React, {useEffect, useState} from 'react';
import React, {type ReactNode, useEffect, useState} from 'react';
import clsx from 'clsx';
import Color from 'color';
import Link from '@docusaurus/Link';
@ -33,7 +33,7 @@ function wcagContrast(foreground: string, background: string) {
return contrast > 7 ? 'AAA 🏅' : contrast > 4.5 ? 'AA 👍' : 'Fail 🔴';
}
export default function ColorGenerator(): JSX.Element {
export default function ColorGenerator(): ReactNode {
const {colorMode, setColorMode} = useColorMode();
const isDarkTheme = colorMode === 'dark';

View file

@ -5,7 +5,7 @@
* LICENSE file in the root directory of this source tree.
*/
import React from 'react';
import React, {type ReactNode} from 'react';
import Link from '@docusaurus/Link';
import {useActiveVersion} from '@docusaurus/plugin-content-docs/client';
import Translate, {translate} from '@docusaurus/Translate';
@ -25,7 +25,7 @@ export default function ConfigTabs({
code,
pluginName,
presetOptionName,
}: Props): JSX.Element {
}: Props): ReactNode {
const versionPath = useActiveVersion(docsPluginId)!.path;
return (

View file

@ -15,7 +15,7 @@ export default function ErrorBoundaryTestButton({
children?: ReactNode;
message?: string;
cause?: string;
}): JSX.Element {
}): ReactNode {
const [state, setState] = useState(false);
if (state) {
throw new Error(message, {

View file

@ -5,14 +5,14 @@
* LICENSE file in the root directory of this source tree.
*/
import React from 'react';
import React, {type ReactNode} from 'react';
import Link from '@docusaurus/Link';
export default function HackerNewsIcon({
size = 54,
}: {
size?: number;
}): JSX.Element {
}): ReactNode {
return (
<Link
to="https://news.ycombinator.com/item?id=32303052"

View file

@ -13,7 +13,7 @@ export default function Highlight({
}: {
children: ReactNode;
color: string;
}): JSX.Element {
}): ReactNode {
return (
<span
style={{

View file

@ -5,7 +5,7 @@
* LICENSE file in the root directory of this source tree.
*/
import React from 'react';
import React, {type ReactNode} from 'react';
import {useLocation} from '@docusaurus/router';
// used to dogfood custom navbar elements are possible
@ -13,7 +13,7 @@ import {useLocation} from '@docusaurus/router';
export default function CustomDogfoodNavbarItem(props: {
content: string;
mobile?: boolean;
}): JSX.Element | null {
}): ReactNode {
const {pathname} = useLocation();
const shouldRender = pathname === '/tests' || pathname.startsWith('/tests/');
if (!shouldRender) {

View file

@ -7,7 +7,7 @@
/* eslint-disable global-require */
import React from 'react';
import React, {type ReactNode} from 'react';
import clsx from 'clsx';
import Translate from '@docusaurus/Translate';
import Link from '@docusaurus/Link';
@ -56,7 +56,7 @@ interface Props {
image: string;
url: string;
urlTS: string;
description: JSX.Element;
description: ReactNode;
}
function PlaygroundCard({name, image, url, urlTS, description}: Props) {
@ -92,7 +92,7 @@ function PlaygroundCard({name, image, url, urlTS, description}: Props) {
);
}
export function PlaygroundCardsRow(): JSX.Element {
export function PlaygroundCardsRow(): ReactNode {
return (
<div className="row">
{Playgrounds.map((playground) => (

View file

@ -5,7 +5,7 @@
* LICENSE file in the root directory of this source tree.
*/
import type {ComponentProps} from 'react';
import type {ComponentProps, ReactNode} from 'react';
import React from 'react';
import clsx from 'clsx';
import Link from '@docusaurus/Link';
@ -16,7 +16,7 @@ export default function ProductHuntCard({
}: {
className?: string;
style?: ComponentProps<'a'>['style'];
}): JSX.Element {
}): ReactNode {
return (
<Link
to="https://www.producthunt.com/posts/docusaurus-2-0?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-docusaurus-2-0"

View file

@ -18,7 +18,7 @@ export type SvgIconProps = ComponentProps<'svg'> & {
children: ReactNode; // Node passed into the SVG element.
};
export default function Svg(props: SvgIconProps): JSX.Element {
export default function Svg(props: SvgIconProps): ReactNode {
const {
svgClass,
colorAttr,

View file

@ -78,7 +78,7 @@ function TeamProfileCardCol(props: ProfileProps) {
);
}
export function ActiveTeamRow(): JSX.Element {
export function ActiveTeamRow(): ReactNode {
return (
<div className="row">
<TeamProfileCardCol
@ -117,7 +117,7 @@ export function ActiveTeamRow(): JSX.Element {
);
}
export function HonoraryAlumniTeamRow(): JSX.Element {
export function HonoraryAlumniTeamRow(): ReactNode {
return (
<div className="row">
<TeamProfileCardCol
@ -168,7 +168,7 @@ export function HonoraryAlumniTeamRow(): JSX.Element {
);
}
export function StudentFellowsTeamRow(): JSX.Element {
export function StudentFellowsTeamRow(): ReactNode {
return (
<div className="row">
<TeamProfileCardCol

View file

@ -28,7 +28,7 @@ export default function Tweet({
content,
date,
githubUsername,
}: Props): JSX.Element {
}: Props): ReactNode {
return (
<div className={clsx('card', styles.tweet)}>
<div className="card__header">

View file

@ -26,7 +26,7 @@ export default function TweetQuote({
name,
job,
children,
}: Props): JSX.Element {
}: Props): ReactNode {
const avatar = `https://unavatar.io/x/${handle}`;
const profileUrl = `https://x.com/${handle}`;
return (

View file

@ -5,7 +5,7 @@
* LICENSE file in the root directory of this source tree.
*/
import React from 'react';
import React, {type ReactNode} from 'react';
import {
useLatestVersion,
useActiveDocContext,
@ -114,7 +114,7 @@ function VersionNotice() {
return null;
}
export default function UpgradeGuide(): JSX.Element {
export default function UpgradeGuide(): ReactNode {
return (
<>
<VersionNotice />

View file

@ -27,11 +27,7 @@ type ContextValue = {
const Context = React.createContext<ContextValue | null>(null);
export function VersionsProvider({
children,
}: {
children: ReactNode;
}): JSX.Element {
export function VersionsProvider({children}: {children: ReactNode}): ReactNode {
const [canaryVersion, setCanaryVersion] = useState<ContextValue | null>(null);
const mounted = useRef(true);
useEffect(() => {
@ -70,7 +66,7 @@ function useStableVersion(): string {
: lastVersion;
}
export function CanaryVersion(): JSX.Element {
export function CanaryVersion(): ReactNode {
const canaryVersion = useContext(Context);
// Show a sensible name
return canaryVersion ? (
@ -90,7 +86,7 @@ export function CanaryVersion(): JSX.Element {
);
}
export function StableVersion(): JSX.Element {
export function StableVersion(): ReactNode {
const currentVersion = useStableVersion();
return <span>{currentVersion}</span>;
}
@ -104,17 +100,17 @@ function useStableMajorVersionNumber(): number {
return useNextMajorVersionNumber() - 1;
}
export function NextMajorVersion(): JSX.Element {
export function NextMajorVersion(): ReactNode {
const majorVersionNumber = useNextMajorVersionNumber();
return <span>{majorVersionNumber}</span>;
}
export function StableMajorVersion(): JSX.Element {
export function StableMajorVersion(): ReactNode {
const majorVersionNumber = useStableMajorVersionNumber();
return <span>{majorVersionNumber}</span>;
}
function GitBranchLink({branch}: {branch: string}): JSX.Element {
function GitBranchLink({branch}: {branch: string}): ReactNode {
return (
<Link to={`https://github.com/facebook/docusaurus/tree/${branch}`}>
<code>{branch}</code>
@ -122,13 +118,13 @@ function GitBranchLink({branch}: {branch: string}): JSX.Element {
);
}
export function StableMajorBranchLink(): JSX.Element {
export function StableMajorBranchLink(): ReactNode {
const majorVersionNumber = useStableMajorVersionNumber();
const branch = `docusaurus-v${majorVersionNumber}`;
return <GitBranchLink branch={branch} />;
}
export function NextMajorBranchLink(): JSX.Element {
export function NextMajorBranchLink(): ReactNode {
return <GitBranchLink branch="main" />;
}
@ -156,7 +152,7 @@ export function InsertIfCanaryVersionKnown({
return null;
}
export function PackageJSONDiff(): JSX.Element {
export function PackageJSONDiff(): ReactNode {
const canaryVersion = useContext(Context)?.name ?? '0.0.0-4922';
const stableVersion = useStableVersion();
return (
@ -170,7 +166,7 @@ export function PackageJSONDiff(): JSX.Element {
);
}
export function PublishTime(): JSX.Element | null {
export function PublishTime(): ReactNode {
const time = useContext(Context)?.time;
if (!time) {
return null;

View file

@ -5,7 +5,7 @@
* LICENSE file in the root directory of this source tree.
*/
import React from 'react';
import React, {type ReactNode} from 'react';
import Translate, {translate} from '@docusaurus/Translate';
export type FeatureItem = {
@ -15,7 +15,7 @@ export type FeatureItem = {
width: number;
height: number;
};
text: JSX.Element;
text: ReactNode;
};
const FEATURES: FeatureItem[] = [

View file

@ -5,6 +5,7 @@
* LICENSE file in the root directory of this source tree.
*/
import type {ReactNode} from 'react';
import clsx from 'clsx';
import LiteYouTubeEmbed from 'react-lite-youtube-embed';
import Link from '@docusaurus/Link';
@ -257,7 +258,7 @@ function TopBanner() {
);
}
export default function Home(): JSX.Element {
export default function Home(): ReactNode {
const {
siteConfig: {customFields, tagline},
} = useDocusaurusContext();

View file

@ -5,6 +5,7 @@
* LICENSE file in the root directory of this source tree.
*/
import type {ReactNode} from 'react';
import Translate, {translate} from '@docusaurus/Translate';
import Link from '@docusaurus/Link';
@ -35,7 +36,7 @@ function ShowcaseHeader() {
);
}
export default function Showcase(): JSX.Element {
export default function Showcase(): ReactNode {
return (
<Layout title={TITLE} description={DESCRIPTION}>
<main className="margin-vert--lg">

View file

@ -5,6 +5,7 @@
* LICENSE file in the root directory of this source tree.
*/
import type {ReactNode} from 'react';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import Link from '@docusaurus/Link';
import Translate from '@docusaurus/Translate';
@ -34,7 +35,7 @@ function ReleaseNotesLabel() {
);
}
export default function Version(): JSX.Element {
export default function Version(): ReactNode {
const {
siteConfig: {organizationName, projectName},
} = useDocusaurusContext();

View file

@ -5,17 +5,14 @@
* LICENSE file in the root directory of this source tree.
*/
import React from 'react';
import React, {type ReactNode} from 'react';
import clsx from 'clsx';
import Link from '@docusaurus/Link';
import type {Props} from '@theme/Blog/Components/Author';
import styles from './styles.module.css';
export default function ChangelogAuthor({
author,
className,
}: Props): JSX.Element {
export default function ChangelogAuthor({author, className}: Props): ReactNode {
const {name, url, imageURL} = author;
return (
<div className={clsx('avatar margin-bottom--sm', className)}>

View file

@ -5,7 +5,7 @@
* LICENSE file in the root directory of this source tree.
*/
import React, {useState} from 'react';
import React, {type ReactNode, useState} from 'react';
import clsx from 'clsx';
import {useBlogPost} from '@docusaurus/plugin-content-blog/client';
import ChangelogItemHeaderAuthor from '@theme/ChangelogItem/Header/Author';
@ -15,9 +15,7 @@ import type {Props} from '@theme/BlogPostItem/Header/Authors';
import styles from './styles.module.css';
// Component responsible for the authors layout
export default function BlogPostAuthors({
className,
}: Props): JSX.Element | null {
export default function BlogPostAuthors({className}: Props): ReactNode {
const {
metadata: {authors},
assets,

View file

@ -5,7 +5,7 @@
* LICENSE file in the root directory of this source tree.
*/
import React from 'react';
import React, {type ReactNode} from 'react';
import {useBlogPost} from '@docusaurus/plugin-content-blog/client';
import BlogPostItemHeaderTitle from '@theme/BlogPostItem/Header/Title';
@ -24,7 +24,7 @@ function ChangelogTitle() {
);
}
export default function ChangelogItemHeader(): JSX.Element {
export default function ChangelogItemHeader(): ReactNode {
return (
<header>
<ChangelogTitle />

View file

@ -5,7 +5,7 @@
* LICENSE file in the root directory of this source tree.
*/
import React from 'react';
import React, {type ReactNode} from 'react';
import ChangelogItemHeader from '@theme/ChangelogItem/Header';
import type {Props} from '@theme/BlogPostItem';
import BlogPostItemContainer from '@theme/BlogPostItem/Container';
@ -13,7 +13,7 @@ import BlogPostItemContent from '@theme/BlogPostItem/Content';
import styles from './styles.module.css';
export default function ChangelogItem({children}: Props): JSX.Element {
export default function ChangelogItem({children}: Props): ReactNode {
return (
<BlogPostItemContainer className={styles.changelogItemContainer}>
<ChangelogItemHeader />

View file

@ -5,7 +5,7 @@
* LICENSE file in the root directory of this source tree.
*/
import React from 'react';
import React, {type ReactNode} from 'react';
import Translate from '@docusaurus/Translate';
import Link from '@docusaurus/Link';
import Heading from '@theme/Heading';
@ -61,7 +61,7 @@ export default function ChangelogListHeader({
blogTitle,
}: {
blogTitle: string;
}): JSX.Element {
}): ReactNode {
return (
<header className="margin-bottom--lg">
<Heading as="h1" style={{fontSize: '3rem'}}>

View file

@ -5,7 +5,7 @@
* LICENSE file in the root directory of this source tree.
*/
import React from 'react';
import React, {type ReactNode} from 'react';
import clsx from 'clsx';
import {
PageMetadata,
@ -20,7 +20,7 @@ import ChangelogItem from '@theme/ChangelogItem';
import ChangelogListHeader from '@theme/ChangelogList/Header';
import type {Props} from '@theme/BlogListPage';
function ChangelogListMetadata(props: Props): JSX.Element {
function ChangelogListMetadata(props: Props): ReactNode {
const {metadata} = props;
const {blogTitle, blogDescription} = metadata;
return (
@ -31,7 +31,7 @@ function ChangelogListMetadata(props: Props): JSX.Element {
);
}
function ChangelogListContent(props: Props): JSX.Element {
function ChangelogListContent(props: Props): ReactNode {
const {metadata, items, sidebar} = props;
const {blogTitle} = metadata;
return (
@ -43,7 +43,7 @@ function ChangelogListContent(props: Props): JSX.Element {
);
}
export default function ChangelogList(props: Props): JSX.Element {
export default function ChangelogList(props: Props): ReactNode {
return (
<HtmlClassNameProvider
className={clsx(

View file

@ -39,7 +39,7 @@ function ChangelogPageContent({
}: {
sidebar: BlogSidebar;
children: ReactNode;
}): JSX.Element {
}): ReactNode {
const {metadata, toc} = useBlogPost();
const {nextItem, prevItem, frontMatter} = metadata;
const {
@ -73,7 +73,7 @@ function ChangelogPageContent({
// This page doesn't change anything. It's just swapping BlogPostItem with our
// own ChangelogItem. We don't want to apply the swizzled item to the actual
// blog.
export default function ChangelogPage(props: Props): JSX.Element {
export default function ChangelogPage(props: Props): ReactNode {
const ChangelogContent = props.content;
return (
<BlogPostProvider content={props.content} isBlogPostPage>

View file

@ -7,12 +7,12 @@
// Changed the text labels.
import React from 'react';
import React, {type ReactNode} from 'react';
import Translate, {translate} from '@docusaurus/Translate';
import PaginatorNavLink from '@theme/PaginatorNavLink';
import type {Props} from '@theme/BlogPostPaginator';
export default function ChangelogPaginator(props: Props): JSX.Element {
export default function ChangelogPaginator(props: Props): ReactNode {
const {nextItem, prevItem} = props;
return (

View file

@ -5,11 +5,11 @@
* LICENSE file in the root directory of this source tree.
*/
import React from 'react';
import React, {type ReactNode} from 'react';
import type {Props} from '@theme/Icon/Expand';
export default function IconExpand({expanded, ...props}: Props): JSX.Element {
export default function IconExpand({expanded, ...props}: Props): ReactNode {
if (expanded) {
return (
<svg

View file

@ -16,11 +16,11 @@ declare module '@theme/ChangelogList';
declare module '@theme/ChangelogList/Header';
declare module '@theme/Icon/Expand' {
import type {ComponentProps} from 'react';
import type {ComponentProps, ReactNode} from 'react';
export interface Props extends ComponentProps<'svg'> {
expanded?: boolean;
}
export default function IconExpand(props: Props): JSX.Element;
export default function IconExpand(props: Props): ReactNode;
}

View file

@ -5,7 +5,7 @@
* LICENSE file in the root directory of this source tree.
*/
import React, {useEffect} from 'react';
import React, {type ReactNode, useEffect} from 'react';
import clsx from 'clsx';
import {useColorMode} from '@docusaurus/theme-common';
import Layout from '@theme/Layout';
@ -48,7 +48,7 @@ export default function FeatureRequests({
basePath,
}: {
basePath: string;
}): JSX.Element {
}): ReactNode {
return (
<Layout title="Feedback" description="Docusaurus 2 Feature Requests page">
<CannyWidget basePath={basePath} />

View file

@ -5,12 +5,12 @@
* LICENSE file in the root directory of this source tree.
*/
import React from 'react';
import React, {type ReactNode} from 'react';
import type {Props} from '@theme/Admonition';
import DefaultAdmonitionTypes from '@theme-original/Admonition/Types';
import Heading from '@theme/Heading';
function MyCustomAdmonition(props: Props): JSX.Element {
function MyCustomAdmonition(props: Props): ReactNode {
return (
<div style={{border: 'solid red', padding: 10}}>
<Heading as="h5" style={{color: 'blue', fontSize: 30}}>

View file

@ -5,13 +5,13 @@
* LICENSE file in the root directory of this source tree.
*/
import React from 'react';
import React, {type ReactNode} from 'react';
import CodeBlock from '@theme-original/CodeBlock';
import type {Props} from '@theme/CodeBlock';
// This component does nothing on purpose
// Dogfood: wrapping a theme component already enhanced by another theme
// See https://github.com/facebook/docusaurus/pull/5983
export default function CodeBlockWrapper(props: Props): JSX.Element {
export default function CodeBlockWrapper(props: Props): ReactNode {
return <CodeBlock {...props} />;
}

View file

@ -5,7 +5,7 @@
* LICENSE file in the root directory of this source tree.
*/
import React from 'react';
import React, {type ReactNode} from 'react';
import OriginalToggle from '@theme-original/ColorModeToggle';
import {
lightStorage,
@ -24,7 +24,7 @@ import type {Props} from '@theme/ColorModeToggle';
// session storage, and we need to apply the same style when toggling modes even
// when we are not on the styling-layout page. The only way to do this so far is
// by hooking into the Toggle component.
export default function ColorModeToggle(props: Props): JSX.Element {
export default function ColorModeToggle(props: Props): ReactNode {
return (
<OriginalToggle
{...props}

View file

@ -5,7 +5,7 @@
* LICENSE file in the root directory of this source tree.
*/
import React from 'react';
import React, {type ReactNode} from 'react';
import {useLayoutDoc} from '@docusaurus/plugin-content-docs/client';
import Link from '@docusaurus/Link';
import Translate from '@docusaurus/Translate';
@ -34,7 +34,7 @@ function HintFooter() {
export default function DocCategoryGeneratedIndexPageWrapper(
props: Props,
): JSX.Element {
): ReactNode {
return (
<>
<DocCategoryGeneratedIndexPage {...props} />

View file

@ -5,13 +5,13 @@
* LICENSE file in the root directory of this source tree.
*/
import React from 'react';
import React, {type ReactNode} from 'react';
import Layout from '@theme-original/Layout';
import type {Props} from '@theme/Layout';
// This component is only used to test for CSS insertion order
import './styles.module.css';
export default function LayoutWrapper(props: Props): JSX.Element {
export default function LayoutWrapper(props: Props): ReactNode {
return <Layout {...props} />;
}

View file

@ -5,9 +5,9 @@
* LICENSE file in the root directory of this source tree.
*/
import React, {type ComponentProps} from 'react';
import React, {type ComponentProps, type ReactNode} from 'react';
export function ButtonExample(props: ComponentProps<'button'>): JSX.Element {
export function ButtonExample(props: ComponentProps<'button'>): ReactNode {
return (
<button
type="button"