From af6f08ae0f5aa8cb28a9bf6ecf9f4e16aeedee46 Mon Sep 17 00:00:00 2001 From: Hichem Fantar Date: Sun, 16 Feb 2025 15:36:09 +0100 Subject: [PATCH 1/9] Add TypeScript type annotations to components for improved type safety --- website/src/pages/Home/Platforms/FoxFact.tsx | 2 +- .../pages/Home/components/Section/index.tsx | 2 +- .../Home/components/ThemeImage/index.tsx | 12 +++++++++- website/src/pages/showcase.tsx | 23 ++++++++++++++----- website/src/theme/Badge/index.tsx | 8 ++++++- .../theme/Blog/Components/Author/index.tsx | 23 +++++++++++++++---- .../src/theme/BlogSidebar/Mobile/index.tsx | 2 +- website/src/theme/BoxLink/index.tsx | 8 ++++++- website/src/theme/DocItem/Footer/index.tsx | 10 +++++++- website/src/theme/DocVersionBanner/index.tsx | 13 +++++++++-- website/src/theme/Icon/ExternalLink/index.tsx | 10 +++++++- website/src/theme/MDXComponents/Code.tsx | 3 ++- .../src/theme/MDXComponents/InlineCode.tsx | 10 +++++--- .../DocsVersionDropdownNavbarItem.tsx | 4 +++- 14 files changed, 104 insertions(+), 26 deletions(-) diff --git a/website/src/pages/Home/Platforms/FoxFact.tsx b/website/src/pages/Home/Platforms/FoxFact.tsx index e62580a92d1..501c0607c31 100644 --- a/website/src/pages/Home/Platforms/FoxFact.tsx +++ b/website/src/pages/Home/Platforms/FoxFact.tsx @@ -7,7 +7,7 @@ import React from 'react'; -function FoxFact({className}) { +function FoxFact({className}: {className: string}) { return (
{children}
diff --git a/website/src/pages/Home/components/ThemeImage/index.tsx b/website/src/pages/Home/components/ThemeImage/index.tsx index 1b50f92d5af..e711b581cf9 100644 --- a/website/src/pages/Home/components/ThemeImage/index.tsx +++ b/website/src/pages/Home/components/ThemeImage/index.tsx @@ -7,7 +7,17 @@ import React, {useState, useEffect} from 'react'; -function ThemeImage({lightSrc, darkSrc, className, alt}) { +function ThemeImage({ + lightSrc, + darkSrc, + className, + alt, +}: { + lightSrc: string; + darkSrc: string; + className?: string; + alt: string; +}) { const [theme, setTheme] = useState('light'); useEffect(() => { diff --git a/website/src/pages/showcase.tsx b/website/src/pages/showcase.tsx index c7c102b5b25..a7baebdd7f2 100644 --- a/website/src/pages/showcase.tsx +++ b/website/src/pages/showcase.tsx @@ -13,7 +13,18 @@ import type users from '../../showcase.json'; import IconExternalLink from '../theme/Icon/ExternalLink'; import ThemedImage from '@theme/ThemedImage'; -const renderApp = (app, i) => ; +type UserType = + | typeof users.meta + | typeof users.microsoft + | typeof users.amazon + | typeof users.shopify + | typeof users.wix + | typeof users.others; +type UserAppType = UserType[number]; + +const renderApp = (app: UserAppType, i: number) => ( + +); function Section({ children, @@ -24,7 +35,7 @@ function Section({ return
{children}
; } -const AppBox = ({app}) => { +const AppBox = ({app}: {app: UserAppType}) => { const imgSource = useBaseUrl( app.icon.startsWith('http') ? app.icon : 'img/showcase/' + app.icon ); @@ -40,7 +51,7 @@ const AppBox = ({app}) => {

{app.name}

{renderLinks(app)} - {app.infoLink && ( + {'infoTitle' in app && 'infoLink' in app && app.infoLink && ( { ); }; -const renderLinks = app => { +const renderLinks = (app: UserAppType) => { const links = [ app.linkAppStore ? ( @@ -67,12 +78,12 @@ const renderLinks = app => { Android ) : null, - app.linkDesktop ? ( + 'linkDesktop' in app && app.linkDesktop ? ( Desktop ) : null, - app.linkMetaQuest ? ( + 'linkMetaQuest' in app && app.linkMetaQuest ? ( Meta Quest diff --git a/website/src/theme/Badge/index.tsx b/website/src/theme/Badge/index.tsx index 6c88272a42e..7ac836d5414 100644 --- a/website/src/theme/Badge/index.tsx +++ b/website/src/theme/Badge/index.tsx @@ -8,7 +8,13 @@ import React from 'react'; import styles from './styles.module.css'; -export default function Badge({icon, title}) { +export default function Badge({ + icon, + title, +}: { + icon: React.ReactNode; + title: React.ReactNode; +}) { return (
{icon} diff --git a/website/src/theme/Blog/Components/Author/index.tsx b/website/src/theme/Blog/Components/Author/index.tsx index 8c550c24da2..bbf4c5fbf09 100644 --- a/website/src/theme/Blog/Components/Author/index.tsx +++ b/website/src/theme/Blog/Components/Author/index.tsx @@ -2,23 +2,26 @@ import React from 'react'; import clsx from 'clsx'; import Link from '@docusaurus/Link'; import AuthorSocials from '@theme/Blog/Components/Author/Socials'; +import {Props as AuthorSocialsProps} from '@theme/Blog/Components/Author/Socials'; +import {Props as LinkProps} from '@docusaurus/Link'; +import {Props as HeadingProps} from '@theme/Heading'; import Heading from '@theme/Heading'; import styles from './styles.module.css'; -function MaybeLink(props) { +function MaybeLink(props: LinkProps & {children: React.ReactNode}) { if (props.href) { return ; } return <>{props.children}; } -function AuthorTitle({title}) { +function AuthorTitle({title}: {title: string}) { return ( {title} ); } -function AuthorName({name, as}) { +function AuthorName({name, as}: {name: string; as?: HeadingProps['as']}) { if (!as) { return {name}; } else { @@ -29,14 +32,24 @@ function AuthorName({name, as}) { ); } } -function AuthorBlogPostCount({count}) { +function AuthorBlogPostCount({count}: {count: number}) { return {count}; } // Note: in the future we might want to have multiple "BlogAuthor" components // Creating different display modes with the "as" prop may not be the best idea // Explainer: https://kyleshevlin.com/prefer-multiple-compositions/ // For now, we almost use the same design for all cases, so it's good enough -export default function BlogAuthor({as, author, className, count}) { +export default function BlogAuthor({ + as, + author, + className, + count, +}: { + as: HeadingProps['as']; + author: AuthorSocialsProps['author']; + className?: string; + count?: number; +}) { const {name, title, url, imageURL, email, page} = author; const link = page?.permalink || url || (email && `mailto:${email}`) || undefined; diff --git a/website/src/theme/BlogSidebar/Mobile/index.tsx b/website/src/theme/BlogSidebar/Mobile/index.tsx index e14c9664e1f..d0e3986f036 100644 --- a/website/src/theme/BlogSidebar/Mobile/index.tsx +++ b/website/src/theme/BlogSidebar/Mobile/index.tsx @@ -39,7 +39,7 @@ function BlogSidebarMobileSecondaryMenu({sidebar}: Props) { ); } -export default function BlogSidebarMobile(props) { +export default function BlogSidebarMobile(props: Props) { return (
diff --git a/website/src/theme/DocItem/Footer/index.tsx b/website/src/theme/DocItem/Footer/index.tsx index c5a226154a4..c992e71c993 100644 --- a/website/src/theme/DocItem/Footer/index.tsx +++ b/website/src/theme/DocItem/Footer/index.tsx @@ -39,7 +39,15 @@ function EditPage({label, href}: {label: string; href: string}) { ); } -function EditMetaRow({editUrl, lastUpdatedAt, lastUpdatedBy}) { +function EditMetaRow({ + editUrl, + lastUpdatedAt, + lastUpdatedBy, +}: { + editUrl: string; + lastUpdatedAt: number; + lastUpdatedBy: string; +}) { const buttons = React.useMemo((): EditUrlButton[] => { try { return JSON.parse(editUrl); diff --git a/website/src/theme/DocVersionBanner/index.tsx b/website/src/theme/DocVersionBanner/index.tsx index 3d649f195b7..6154bfa9af7 100644 --- a/website/src/theme/DocVersionBanner/index.tsx +++ b/website/src/theme/DocVersionBanner/index.tsx @@ -44,6 +44,7 @@ function UnmaintainedVersionLabel({siteTitle, versionMetadata}) { ); } + const BannerLabelComponents = { unreleased: UnreleasedVersionLabel, unmaintained: UnmaintainedVersionLabel, @@ -55,7 +56,15 @@ function BannerLabel(props) { return ; } -function LatestVersionSuggestionLabel({versionLabel, to, onClick}) { +function LatestVersionSuggestionLabel({ + versionLabel, + to, + onClick, +}: { + versionLabel: string; + to: string; + onClick: () => void; +}) { return ( typeof el === 'string' && !el.includes('\n') ); diff --git a/website/src/theme/MDXComponents/InlineCode.tsx b/website/src/theme/MDXComponents/InlineCode.tsx index d2eec0bddab..88444b0dcf8 100644 --- a/website/src/theme/MDXComponents/InlineCode.tsx +++ b/website/src/theme/MDXComponents/InlineCode.tsx @@ -5,7 +5,7 @@ import Link from '@docusaurus/Link'; const MarkdownInlineCodePrefix = 'md '; -export default function InlineCode(props) { +export default function InlineCode(props: {children?: React.ReactNode}) { if ( typeof props.children === 'string' && props.children.startsWith(MarkdownInlineCodePrefix) @@ -34,14 +34,18 @@ const MarkdownInlineCode = React.memo(function MarkdownInlineCodeInner( // Gives the ability to use basic Markdown links inside inline code blocks // We use RegExp because a full Markdown parser would be quite heavy // See https://github.com/facebook/react-native-website/pull/3807 -function linkify(input) { +function linkify(input: React.ReactNode): React.ReactNode { + if (typeof input !== 'string') { + return input; + } + // Inspired by https://github.com/gakimball/transform-markdown-links // Thank you: http://stackoverflow.com/a/32382702 (with some modifications) const linkRegExp = /(?\[(?[^\]]+)?\]\((?[^)]+)\))/g; const linkSplitRegExp = /\[[^\]]+?\]\([^)]+\)/g; const links = []; - let match; + let match: RegExpExecArray | null; while ((match = linkRegExp.exec(input)) !== null) { const link = match.groups.link; const text = match.groups.text; diff --git a/website/src/theme/NavbarItem/DocsVersionDropdownNavbarItem.tsx b/website/src/theme/NavbarItem/DocsVersionDropdownNavbarItem.tsx index 868b8bd7ef0..f00eed3f913 100644 --- a/website/src/theme/NavbarItem/DocsVersionDropdownNavbarItem.tsx +++ b/website/src/theme/NavbarItem/DocsVersionDropdownNavbarItem.tsx @@ -9,7 +9,9 @@ import React from 'react'; import DocsVersionDropdownNavbarItem from '@theme-original/NavbarItem/DocsVersionDropdownNavbarItem'; import {useActiveDocContext} from '@docusaurus/plugin-content-docs/client'; -export default function DocsVersionDropdownNavbarItemWrapper(props) { +export default function DocsVersionDropdownNavbarItemWrapper(props: { + docsPluginId: string; +}) { // (CUSTOM) Hide version dropdown on non-versioned pages const activeDocContext = useActiveDocContext(props.docsPluginId); if (!activeDocContext.activeDoc) { From 361ba8ad8e57e4f8f594a8564cadf93a5869102c Mon Sep 17 00:00:00 2001 From: Hichem Fantar Date: Sun, 16 Feb 2025 15:39:09 +0100 Subject: [PATCH 2/9] Refactor UserAppType definition for improved type inference --- website/src/pages/showcase.tsx | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/website/src/pages/showcase.tsx b/website/src/pages/showcase.tsx index a7baebdd7f2..bf2d9f61434 100644 --- a/website/src/pages/showcase.tsx +++ b/website/src/pages/showcase.tsx @@ -13,14 +13,7 @@ import type users from '../../showcase.json'; import IconExternalLink from '../theme/Icon/ExternalLink'; import ThemedImage from '@theme/ThemedImage'; -type UserType = - | typeof users.meta - | typeof users.microsoft - | typeof users.amazon - | typeof users.shopify - | typeof users.wix - | typeof users.others; -type UserAppType = UserType[number]; +type UserAppType = (typeof users)[keyof typeof users][number]; const renderApp = (app: UserAppType, i: number) => ( From 9fe57d3f573ba58331a4cc03acb835f0fdc47fbb Mon Sep 17 00:00:00 2001 From: Hichem Fantar Date: Sun, 16 Feb 2025 15:50:05 +0100 Subject: [PATCH 3/9] Refactor InlineCode component to enhance linkify function type safety --- website/src/theme/MDXComponents/InlineCode.tsx | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/website/src/theme/MDXComponents/InlineCode.tsx b/website/src/theme/MDXComponents/InlineCode.tsx index 88444b0dcf8..543515ea545 100644 --- a/website/src/theme/MDXComponents/InlineCode.tsx +++ b/website/src/theme/MDXComponents/InlineCode.tsx @@ -27,18 +27,17 @@ export default function InlineCode(props: {children?: React.ReactNode}) { const MarkdownInlineCode = React.memo(function MarkdownInlineCodeInner( props: React.PropsWithChildren ) { - const children = linkify(props.children); + const children = + typeof props.children !== 'string' + ? props.children + : linkify(props.children); return ; }); // Gives the ability to use basic Markdown links inside inline code blocks // We use RegExp because a full Markdown parser would be quite heavy // See https://github.com/facebook/react-native-website/pull/3807 -function linkify(input: React.ReactNode): React.ReactNode { - if (typeof input !== 'string') { - return input; - } - +function linkify(input: string): React.ReactNode { // Inspired by https://github.com/gakimball/transform-markdown-links // Thank you: http://stackoverflow.com/a/32382702 (with some modifications) const linkRegExp = /(?\[(?[^\]]+)?\]\((?[^)]+)\))/g; From 667af81ca1a534abf1c6b49742778cb8c322387c Mon Sep 17 00:00:00 2001 From: Hichem Fantar Date: Sun, 16 Feb 2025 15:51:48 +0100 Subject: [PATCH 4/9] Add TypeScript type annotations to PlatformSupport component for improved type safety --- website/src/theme/PlatformSupport/index.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/website/src/theme/PlatformSupport/index.tsx b/website/src/theme/PlatformSupport/index.tsx index 6dc398a0889..45e7648e07a 100644 --- a/website/src/theme/PlatformSupport/index.tsx +++ b/website/src/theme/PlatformSupport/index.tsx @@ -16,7 +16,11 @@ import Windows from '@site/src/theme/Icon/Windows'; import TV from '@site/src/theme/Icon/TV'; import Web from '@site/src/theme/Icon/Web'; -export default function PlatformSupport({platforms}) { +export default function PlatformSupport({ + platforms, +}: { + platforms: Array; +}) { return (
Platform support From 0614f4954ed6d138d1a034f4e6325d5148eca566 Mon Sep 17 00:00:00 2001 From: Hichem Fantar Date: Sun, 16 Feb 2025 15:56:22 +0100 Subject: [PATCH 5/9] Add TypeScript type annotations to DocVersionBanner components for improved type safety --- website/src/theme/DocVersionBanner/index.tsx | 25 +++++++++++++++++--- 1 file changed, 22 insertions(+), 3 deletions(-) diff --git a/website/src/theme/DocVersionBanner/index.tsx b/website/src/theme/DocVersionBanner/index.tsx index 6154bfa9af7..71d2aaafa89 100644 --- a/website/src/theme/DocVersionBanner/index.tsx +++ b/website/src/theme/DocVersionBanner/index.tsx @@ -12,8 +12,15 @@ import { useDocsVersion, useDocsPreferredVersion, } from '@docusaurus/plugin-content-docs/client'; +import {type PropVersionMetadata} from '@docusaurus/plugin-content-docs'; -function UnreleasedVersionLabel({siteTitle, versionMetadata}) { +function UnreleasedVersionLabel({ + siteTitle, + versionMetadata, +}: { + siteTitle: string; + versionMetadata: PropVersionMetadata; +}) { return ( Date: Sun, 16 Feb 2025 16:01:35 +0100 Subject: [PATCH 6/9] Refactor AppBox component to simplify infoLink condition --- website/src/pages/showcase.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/src/pages/showcase.tsx b/website/src/pages/showcase.tsx index bf2d9f61434..f30b43f2894 100644 --- a/website/src/pages/showcase.tsx +++ b/website/src/pages/showcase.tsx @@ -44,7 +44,7 @@ const AppBox = ({app}: {app: UserAppType}) => {

{app.name}

{renderLinks(app)}
- {'infoTitle' in app && 'infoLink' in app && app.infoLink && ( + {'infoTitle' in app && app.infoLink && ( Date: Tue, 18 Feb 2025 13:59:50 +0100 Subject: [PATCH 7/9] Refactor components to improve type safety and simplify props usage --- .../theme/Blog/Components/Author/index.tsx | 34 ++++-------- website/src/theme/DocItem/Footer/index.tsx | 12 ++--- website/src/theme/DocVersionBanner/index.tsx | 54 +++++++++++-------- website/src/theme/MDXComponents/Code.tsx | 4 +- .../src/theme/MDXComponents/InlineCode.tsx | 5 +- 5 files changed, 51 insertions(+), 58 deletions(-) diff --git a/website/src/theme/Blog/Components/Author/index.tsx b/website/src/theme/Blog/Components/Author/index.tsx index bbf4c5fbf09..7f64e9dcdea 100644 --- a/website/src/theme/Blog/Components/Author/index.tsx +++ b/website/src/theme/Blog/Components/Author/index.tsx @@ -1,14 +1,11 @@ -import React from 'react'; -import clsx from 'clsx'; -import Link from '@docusaurus/Link'; +import Link, {type Props as LinkProps} from '@docusaurus/Link'; +import type {Props} from '@theme/Blog/Components/Author'; import AuthorSocials from '@theme/Blog/Components/Author/Socials'; -import {Props as AuthorSocialsProps} from '@theme/Blog/Components/Author/Socials'; -import {Props as LinkProps} from '@docusaurus/Link'; -import {Props as HeadingProps} from '@theme/Heading'; import Heading from '@theme/Heading'; +import clsx from 'clsx'; import styles from './styles.module.css'; -function MaybeLink(props: LinkProps & {children: React.ReactNode}) { +function MaybeLink(props: LinkProps) { if (props.href) { return ; } @@ -21,7 +18,7 @@ function AuthorTitle({title}: {title: string}) { ); } -function AuthorName({name, as}: {name: string; as?: HeadingProps['as']}) { +function AuthorName({name, as}: {name: string; as: Props['as']}) { if (!as) { return {name}; } else { @@ -39,20 +36,11 @@ function AuthorBlogPostCount({count}: {count: number}) { // Creating different display modes with the "as" prop may not be the best idea // Explainer: https://kyleshevlin.com/prefer-multiple-compositions/ // For now, we almost use the same design for all cases, so it's good enough -export default function BlogAuthor({ - as, - author, - className, - count, -}: { - as: HeadingProps['as']; - author: AuthorSocialsProps['author']; - className?: string; - count?: number; -}) { +export default function BlogAuthor({as, author, className, count}: Props) { const {name, title, url, imageURL, email, page} = author; const link = page?.permalink || url || (email && `mailto:${email}`) || undefined; + return (
)} - {count && } + {count !== undefined && }
{!!title && } {/* - We always render AuthorSocials even if there's none - This keeps other things aligned with flexbox layout - */} + We always render AuthorSocials even if there's none + This keeps other things aligned with flexbox layout + */}
)} diff --git a/website/src/theme/DocItem/Footer/index.tsx b/website/src/theme/DocItem/Footer/index.tsx index c992e71c993..4e00b381745 100644 --- a/website/src/theme/DocItem/Footer/index.tsx +++ b/website/src/theme/DocItem/Footer/index.tsx @@ -13,6 +13,7 @@ import TagsListInline, { import type {EditUrlButton} from '../../../../docusaurus.config'; import styles from './styles.module.css'; import DocsRating from '../../../../core/DocsRating'; +import type {Props} from '@theme/EditMetaRow'; function TagsRow(props: TagsListInlineProps) { return ( @@ -39,15 +40,7 @@ function EditPage({label, href}: {label: string; href: string}) { ); } -function EditMetaRow({ - editUrl, - lastUpdatedAt, - lastUpdatedBy, -}: { - editUrl: string; - lastUpdatedAt: number; - lastUpdatedBy: string; -}) { +function EditMetaRow({editUrl, lastUpdatedAt, lastUpdatedBy}: Props) { const buttons = React.useMemo((): EditUrlButton[] => { try { return JSON.parse(editUrl); @@ -95,6 +88,7 @@ export default function DocItemFooter() { editUrl={editUrl} lastUpdatedAt={lastUpdatedAt} lastUpdatedBy={lastUpdatedBy} + className="" /> )} diff --git a/website/src/theme/DocVersionBanner/index.tsx b/website/src/theme/DocVersionBanner/index.tsx index 71d2aaafa89..d1a40f44480 100644 --- a/website/src/theme/DocVersionBanner/index.tsx +++ b/website/src/theme/DocVersionBanner/index.tsx @@ -1,9 +1,10 @@ -import React from 'react'; +import React, {ComponentType} from 'react'; import clsx from 'clsx'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import Link from '@docusaurus/Link'; import Translate from '@docusaurus/Translate'; import { + GlobalVersion, useActivePlugin, useDocVersionSuggestions, } from '@docusaurus/plugin-content-docs/client'; @@ -12,15 +13,21 @@ import { useDocsVersion, useDocsPreferredVersion, } from '@docusaurus/plugin-content-docs/client'; -import {type PropVersionMetadata} from '@docusaurus/plugin-content-docs'; +import type {Props} from '@theme/DocVersionBanner'; +import type { + VersionBanner, + PropVersionMetadata, +} from '@docusaurus/plugin-content-docs'; + +type BannerLabelComponentProps = { + siteTitle: string; + versionMetadata: PropVersionMetadata; +}; function UnreleasedVersionLabel({ siteTitle, versionMetadata, -}: { - siteTitle: string; - versionMetadata: PropVersionMetadata; -}) { +}: BannerLabelComponentProps) { return ( {versionMetadata.label}, }}> { - 'This is documentation for {siteTitle} {versionLabel}, which is no longer in active development.' + 'This is documentation for {siteTitle} {versionLabel}, which is no longer actively maintained.' } ); } -const BannerLabelComponents = { +const BannerLabelComponents: { + [banner in VersionBanner]: ComponentType; +} = { unreleased: UnreleasedVersionLabel, unmaintained: UnmaintainedVersionLabel, }; -function BannerLabel(props) { +function BannerLabel(props: BannerLabelComponentProps) { const BannerLabelComponent = - BannerLabelComponents[props.versionMetadata.banner]; + BannerLabelComponents[props.versionMetadata.banner!]; return ; } @@ -74,9 +80,9 @@ function LatestVersionSuggestionLabel({ to, onClick, }: { - versionLabel: string; to: string; onClick: () => void; + versionLabel: string; }) { return ( - version.docs.find(doc => doc.id === version.mainDocId); + const {pluginId} = useActivePlugin({failfast: true})!; + + const getVersionMainDoc = (version: GlobalVersion) => + version.docs.find(doc => doc.id === version.mainDocId)!; + const {savePreferredVersionName} = useDocsPreferredVersion(pluginId); + const {latestDocSuggestion, latestVersionSuggestion} = useDocVersionSuggestions(pluginId); @@ -133,7 +141,9 @@ function DocVersionBannerEnabled({ 'alert alert--warning margin-bottom--md' )} role="alert"> - +
+ +
typeof el === 'string' && !el.includes('\n') ); diff --git a/website/src/theme/MDXComponents/InlineCode.tsx b/website/src/theme/MDXComponents/InlineCode.tsx index 543515ea545..ae137948231 100644 --- a/website/src/theme/MDXComponents/InlineCode.tsx +++ b/website/src/theme/MDXComponents/InlineCode.tsx @@ -1,11 +1,12 @@ import React from 'react'; import Link from '@docusaurus/Link'; +import type {Props} from '@theme/CodeInline'; // Note: this component is a custom React-Native-Website feature const MarkdownInlineCodePrefix = 'md '; -export default function InlineCode(props: {children?: React.ReactNode}) { +export default function InlineCode(props: Props) { if ( typeof props.children === 'string' && props.children.startsWith(MarkdownInlineCodePrefix) @@ -25,7 +26,7 @@ export default function InlineCode(props: {children?: React.ReactNode}) { // To enable Markdown support, use the "`md " prefix // Syntax example: `md ({nativeEvent: [PressEvent](pressevent)})` const MarkdownInlineCode = React.memo(function MarkdownInlineCodeInner( - props: React.PropsWithChildren + props: Props ) { const children = typeof props.children !== 'string' From 7dedc60866152a28e339ccd2b937c5bd9f5c23f2 Mon Sep 17 00:00:00 2001 From: Hichem Fantar Date: Tue, 18 Mar 2025 04:20:31 +0100 Subject: [PATCH 8/9] Add TypeScript type annotation to commonDocsOptions for improved type safety --- website/docusaurus.config.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/docusaurus.config.ts b/website/docusaurus.config.ts index 537bf29bc78..0faa296d589 100644 --- a/website/docusaurus.config.ts +++ b/website/docusaurus.config.ts @@ -21,7 +21,7 @@ export interface EditUrlButton { href: string; } -const commonDocsOptions = { +const commonDocsOptions: PluginContentDocs.Options = { breadcrumbs: false, showLastUpdateAuthor: false, showLastUpdateTime: true, From 72c70dd12bc585bbb5d34af7cc94fe145a0f2aaf Mon Sep 17 00:00:00 2001 From: Hichem Fantar Date: Tue, 18 Mar 2025 04:28:56 +0100 Subject: [PATCH 9/9] Update import syntax in .remarkrc.mjs for compatibility with new JSON module handling --- website/.remarkrc.mjs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/.remarkrc.mjs b/website/.remarkrc.mjs index f019fea1116..d03910747d8 100644 --- a/website/.remarkrc.mjs +++ b/website/.remarkrc.mjs @@ -1,4 +1,4 @@ -import packageJson from "./package.json" assert { type: "json" }; +import packageJson from "./package.json" with { type: "json" }; export default { plugins: [