From 4c37115f3fe246fad7f6bd079f9204ca04827910 Mon Sep 17 00:00:00 2001 From: dan Date: Sat, 24 Sep 2022 12:30:19 +0100 Subject: [PATCH] [Beta] Code style tweaks (#5104) * Use named React imports * More manual edits * Remove displayNames * rm dead code --- beta/src/components/Breadcrumbs.tsx | 6 +- beta/src/components/ButtonLink.tsx | 1 - beta/src/components/DocsFooter.tsx | 6 +- beta/src/components/ExternalLink.tsx | 4 -- beta/src/components/Icon/IconArrow.tsx | 6 +- beta/src/components/Icon/IconArrowSmall.tsx | 6 +- beta/src/components/Icon/IconChevron.tsx | 6 +- beta/src/components/Icon/IconClose.tsx | 44 +++++++-------- beta/src/components/Icon/IconCodeBlock.tsx | 6 +- beta/src/components/Icon/IconCopy.tsx | 56 +++++++++---------- beta/src/components/Icon/IconDeepDive.tsx | 6 +- beta/src/components/Icon/IconDownload.tsx | 6 +- beta/src/components/Icon/IconError.tsx | 36 ++++++------ .../components/Icon/IconFacebookCircle.tsx | 4 +- beta/src/components/Icon/IconGitHub.tsx | 6 +- beta/src/components/Icon/IconGotcha.tsx | 6 +- beta/src/components/Icon/IconHamburger.tsx | 6 +- beta/src/components/Icon/IconHint.tsx | 38 ++++++------- beta/src/components/Icon/IconInstagram.tsx | 4 +- beta/src/components/Icon/IconNavArrow.tsx | 6 +- beta/src/components/Icon/IconNewPage.tsx | 6 +- beta/src/components/Icon/IconNote.tsx | 40 +++++++------ beta/src/components/Icon/IconRestart.tsx | 6 +- beta/src/components/Icon/IconRss.tsx | 46 ++++++++------- beta/src/components/Icon/IconSearch.tsx | 6 +- beta/src/components/Icon/IconSolution.tsx | 6 +- beta/src/components/Icon/IconTerminal.tsx | 6 +- beta/src/components/Icon/IconTwitter.tsx | 6 +- beta/src/components/Icon/IconWarning.tsx | 6 +- beta/src/components/Layout/Feedback.tsx | 4 +- beta/src/components/Layout/Nav/Nav.tsx | 29 +++++----- beta/src/components/Layout/Page.tsx | 5 +- .../components/Layout/Sidebar/SidebarLink.tsx | 5 +- .../Layout/Sidebar/SidebarRouteTree.tsx | 10 ++-- beta/src/components/Layout/Toc.tsx | 1 - beta/src/components/Layout/useRouteMeta.tsx | 6 +- .../src/components/Layout/useTocHighlight.tsx | 8 +-- beta/src/components/Layout/useTwitter.tsx | 49 ---------------- beta/src/components/Logo.tsx | 4 -- .../components/MDX/Challenges/Challenge.tsx | 6 +- .../components/MDX/Challenges/Challenges.tsx | 11 ++-- .../components/MDX/Challenges/Navigation.tsx | 10 ++-- beta/src/components/MDX/Challenges/index.tsx | 2 +- beta/src/components/MDX/CodeBlock/index.tsx | 10 ++-- beta/src/components/MDX/CodeDiagram.tsx | 5 +- beta/src/components/MDX/ConsoleBlock.tsx | 4 +- beta/src/components/MDX/Diagram.tsx | 1 - beta/src/components/MDX/DiagramGroup.tsx | 1 - beta/src/components/MDX/ExpandableCallout.tsx | 3 +- beta/src/components/MDX/Heading.tsx | 2 - beta/src/components/MDX/HomepageHero.tsx | 1 - beta/src/components/MDX/InlineCode.tsx | 3 - beta/src/components/MDX/Intro.tsx | 4 +- beta/src/components/MDX/Link.tsx | 20 +++---- beta/src/components/MDX/MDXComponents.tsx | 7 ++- beta/src/components/MDX/PackageImport.tsx | 5 +- beta/src/components/MDX/Sandpack/Console.tsx | 12 ++-- .../components/MDX/Sandpack/CustomPreset.tsx | 8 +-- .../MDX/Sandpack/DownloadButton.tsx | 8 +-- beta/src/components/MDX/Sandpack/Error.tsx | 2 - .../components/MDX/Sandpack/NavigationBar.tsx | 32 ++++++----- .../MDX/Sandpack/OpenInCodeSandboxButton.tsx | 1 - beta/src/components/MDX/Sandpack/Preview.tsx | 26 ++++----- .../components/MDX/Sandpack/ResetButton.tsx | 4 +- .../components/MDX/Sandpack/SandpackRoot.tsx | 9 ++- beta/src/components/MDX/Sandpack/index.tsx | 12 ++-- beta/src/components/MDX/TerminalBlock.tsx | 7 ++- beta/src/components/PageHeading.tsx | 1 - beta/src/components/Search.tsx | 19 +++---- beta/src/components/Seo.tsx | 2 +- beta/src/components/SocialBanner.tsx | 6 +- beta/src/components/Tag.tsx | 1 - beta/src/hooks/usePendingRoute.ts | 8 +-- beta/src/pages/_app.tsx | 6 +- beta/src/pages/_document.tsx | 1 - beta/src/utils/toCommaSeparatedList.tsx | 2 +- 76 files changed, 325 insertions(+), 445 deletions(-) delete mode 100644 beta/src/components/Layout/useTwitter.tsx diff --git a/beta/src/components/Breadcrumbs.tsx b/beta/src/components/Breadcrumbs.tsx index bc8078bf..beed182a 100644 --- a/beta/src/components/Breadcrumbs.tsx +++ b/beta/src/components/Breadcrumbs.tsx @@ -2,7 +2,7 @@ * Copyright (c) Facebook, Inc. and its affiliates. */ -import * as React from 'react'; +import {Fragment} from 'react'; import {useRouteMeta} from 'components/Layout/useRouteMeta'; import Link from 'next/link'; @@ -15,7 +15,7 @@ function Breadcrumbs() { (crumb, i) => crumb.path && (
- + {crumb.title} @@ -34,7 +34,7 @@ function Breadcrumbs() { /> - +
) )} diff --git a/beta/src/components/ButtonLink.tsx b/beta/src/components/ButtonLink.tsx index 964056ed..b3fe73ad 100644 --- a/beta/src/components/ButtonLink.tsx +++ b/beta/src/components/ButtonLink.tsx @@ -2,7 +2,6 @@ * Copyright (c) Facebook, Inc. and its affiliates. */ -import * as React from 'react'; import cn from 'classnames'; import NextLink from 'next/link'; diff --git a/beta/src/components/DocsFooter.tsx b/beta/src/components/DocsFooter.tsx index c2ab0225..6a859770 100644 --- a/beta/src/components/DocsFooter.tsx +++ b/beta/src/components/DocsFooter.tsx @@ -3,7 +3,7 @@ */ import NextLink from 'next/link'; -import * as React from 'react'; +import {memo} from 'react'; import cn from 'classnames'; import {removeFromLast} from 'utils/removeFromLast'; import {IconNavArrow} from './Icon/IconNavArrow'; @@ -18,7 +18,7 @@ function areEqual(prevProps: DocsPageFooterProps, props: DocsPageFooterProps) { return prevProps.route?.path === props.route?.path; } -export const DocsPageFooter = React.memo( +export const DocsPageFooter = memo( function DocsPageFooter({nextRoute, prevRoute, route}) { if (!route || route?.heading) { return null; @@ -89,5 +89,3 @@ function FooterLink({ ); } - -DocsPageFooter.displayName = 'DocsPageFooter'; diff --git a/beta/src/components/ExternalLink.tsx b/beta/src/components/ExternalLink.tsx index 4ab7831d..38b1f2c5 100644 --- a/beta/src/components/ExternalLink.tsx +++ b/beta/src/components/ExternalLink.tsx @@ -2,8 +2,6 @@ * Copyright (c) Facebook, Inc. and its affiliates. */ -import * as React from 'react'; - export function ExternalLink({ href, target, @@ -16,5 +14,3 @@ export function ExternalLink({ ); } - -ExternalLink.displayName = 'ExternalLink'; diff --git a/beta/src/components/Icon/IconArrow.tsx b/beta/src/components/Icon/IconArrow.tsx index 942f8a2d..53bde132 100644 --- a/beta/src/components/Icon/IconArrow.tsx +++ b/beta/src/components/Icon/IconArrow.tsx @@ -2,10 +2,10 @@ * Copyright (c) Facebook, Inc. and its affiliates. */ -import * as React from 'react'; +import {memo} from 'react'; import cn from 'classnames'; -export const IconArrow = React.memo< +export const IconArrow = memo< JSX.IntrinsicElements['svg'] & { displayDirection: 'left' | 'right' | 'up' | 'down'; } @@ -26,5 +26,3 @@ export const IconArrow = React.memo< ); }); - -IconArrow.displayName = 'IconArrow'; diff --git a/beta/src/components/Icon/IconArrowSmall.tsx b/beta/src/components/Icon/IconArrowSmall.tsx index ed838882..cf85988d 100644 --- a/beta/src/components/Icon/IconArrowSmall.tsx +++ b/beta/src/components/Icon/IconArrowSmall.tsx @@ -2,10 +2,10 @@ * Copyright (c) Facebook, Inc. and its affiliates. */ -import * as React from 'react'; +import {memo} from 'react'; import cn from 'classnames'; -export const IconArrowSmall = React.memo< +export const IconArrowSmall = memo< JSX.IntrinsicElements['svg'] & { displayDirection: 'left' | 'right' | 'up' | 'down'; } @@ -29,5 +29,3 @@ export const IconArrowSmall = React.memo< ); }); - -IconArrowSmall.displayName = 'IconArrowSmall'; diff --git a/beta/src/components/Icon/IconChevron.tsx b/beta/src/components/Icon/IconChevron.tsx index 53416a0e..1184d77d 100644 --- a/beta/src/components/Icon/IconChevron.tsx +++ b/beta/src/components/Icon/IconChevron.tsx @@ -2,10 +2,10 @@ * Copyright (c) Facebook, Inc. and its affiliates. */ -import * as React from 'react'; +import {memo} from 'react'; import cn from 'classnames'; -export const IconChevron = React.memo< +export const IconChevron = memo< JSX.IntrinsicElements['svg'] & { displayDirection: 'up' | 'down' | 'left' | 'right'; } @@ -38,5 +38,3 @@ export const IconChevron = React.memo< ); }); - -IconChevron.displayName = 'IconChevron'; diff --git a/beta/src/components/Icon/IconClose.tsx b/beta/src/components/Icon/IconClose.tsx index c3109030..5ad352cf 100644 --- a/beta/src/components/Icon/IconClose.tsx +++ b/beta/src/components/Icon/IconClose.tsx @@ -2,27 +2,25 @@ * Copyright (c) Facebook, Inc. and its affiliates. */ -import * as React from 'react'; +import {memo} from 'react'; -export const IconClose = React.memo( - function IconClose(props) { - return ( - - - - - ); - } -); - -IconClose.displayName = 'IconClose'; +export const IconClose = memo(function IconClose( + props +) { + return ( + + + + + ); +}); diff --git a/beta/src/components/Icon/IconCodeBlock.tsx b/beta/src/components/Icon/IconCodeBlock.tsx index 9bb678c4..755a2ae3 100644 --- a/beta/src/components/Icon/IconCodeBlock.tsx +++ b/beta/src/components/Icon/IconCodeBlock.tsx @@ -2,9 +2,9 @@ * Copyright (c) Facebook, Inc. and its affiliates. */ -import * as React from 'react'; +import {memo} from 'react'; -export const IconCodeBlock = React.memo( +export const IconCodeBlock = memo( function IconCodeBlock({className}) { return ( ( ); } ); - -IconCodeBlock.displayName = 'IconCodeBlock'; diff --git a/beta/src/components/Icon/IconCopy.tsx b/beta/src/components/Icon/IconCopy.tsx index 552b30c6..500cd4fd 100644 --- a/beta/src/components/Icon/IconCopy.tsx +++ b/beta/src/components/Icon/IconCopy.tsx @@ -2,33 +2,31 @@ * Copyright (c) Facebook, Inc. and its affiliates. */ -import * as React from 'react'; +import {memo} from 'react'; -export const IconCopy = React.memo( - function IconCopy({className}) { - return ( - - {' '} - - - ); - } -); - -IconCopy.displayName = 'IconCopy'; +export const IconCopy = memo(function IconCopy({ + className, +}) { + return ( + + {' '} + + + ); +}); diff --git a/beta/src/components/Icon/IconDeepDive.tsx b/beta/src/components/Icon/IconDeepDive.tsx index c6863535..fe3e7774 100644 --- a/beta/src/components/Icon/IconDeepDive.tsx +++ b/beta/src/components/Icon/IconDeepDive.tsx @@ -2,9 +2,9 @@ * Copyright (c) Facebook, Inc. and its affiliates. */ -import * as React from 'react'; +import {memo} from 'react'; -export const IconDeepDive = React.memo( +export const IconDeepDive = memo( function IconDeepDive({className}) { return ( ( ); } ); - -IconDeepDive.displayName = 'IconDeepDive'; diff --git a/beta/src/components/Icon/IconDownload.tsx b/beta/src/components/Icon/IconDownload.tsx index 32056ae1..c0e7f49c 100644 --- a/beta/src/components/Icon/IconDownload.tsx +++ b/beta/src/components/Icon/IconDownload.tsx @@ -2,9 +2,9 @@ * Copyright (c) Facebook, Inc. and its affiliates. */ -import * as React from 'react'; +import {memo} from 'react'; -export const IconDownload = React.memo( +export const IconDownload = memo( function IconDownload({className}) { return ( ( ); } ); - -IconDownload.displayName = 'IconDownload'; diff --git a/beta/src/components/Icon/IconError.tsx b/beta/src/components/Icon/IconError.tsx index 71c4a7c9..f101f62b 100644 --- a/beta/src/components/Icon/IconError.tsx +++ b/beta/src/components/Icon/IconError.tsx @@ -2,23 +2,21 @@ * Copyright (c) Facebook, Inc. and its affiliates. */ -import * as React from 'react'; +import {memo} from 'react'; -export const IconError = React.memo( - function IconError({className}) { - return ( - - - - - - ); - } -); - -IconError.displayName = 'IconError'; +export const IconError = memo(function IconError({ + className, +}) { + return ( + + + + + + ); +}); diff --git a/beta/src/components/Icon/IconFacebookCircle.tsx b/beta/src/components/Icon/IconFacebookCircle.tsx index d04017b3..0900d681 100644 --- a/beta/src/components/Icon/IconFacebookCircle.tsx +++ b/beta/src/components/Icon/IconFacebookCircle.tsx @@ -2,9 +2,9 @@ * Copyright (c) Facebook, Inc. and its affiliates. */ -import * as React from 'react'; +import {memo} from 'react'; -export const IconFacebookCircle = React.memo( +export const IconFacebookCircle = memo( function IconFacebookCircle(props) { return ( ( +export const IconGitHub = memo( function IconGitHub(props) { return ( ( ); } ); - -IconGitHub.displayName = 'IconGitHub'; diff --git a/beta/src/components/Icon/IconGotcha.tsx b/beta/src/components/Icon/IconGotcha.tsx index 8342cbb6..7dd4c78d 100644 --- a/beta/src/components/Icon/IconGotcha.tsx +++ b/beta/src/components/Icon/IconGotcha.tsx @@ -2,9 +2,9 @@ * Copyright (c) Facebook, Inc. and its affiliates. */ -import * as React from 'react'; +import {memo} from 'react'; -export const IconGotcha = React.memo( +export const IconGotcha = memo( function IconGotcha({className}) { return ( ( ); } ); - -IconGotcha.displayName = 'IconGotcha'; diff --git a/beta/src/components/Icon/IconHamburger.tsx b/beta/src/components/Icon/IconHamburger.tsx index c4653d58..5e6aa725 100644 --- a/beta/src/components/Icon/IconHamburger.tsx +++ b/beta/src/components/Icon/IconHamburger.tsx @@ -2,9 +2,9 @@ * Copyright (c) Facebook, Inc. and its affiliates. */ -import * as React from 'react'; +import {memo} from 'react'; -export const IconHamburger = React.memo( +export const IconHamburger = memo( function IconHamburger(props) { return ( ( ); } ); - -IconHamburger.displayName = 'IconHamburger'; diff --git a/beta/src/components/Icon/IconHint.tsx b/beta/src/components/Icon/IconHint.tsx index d27b7e11..b802bc79 100644 --- a/beta/src/components/Icon/IconHint.tsx +++ b/beta/src/components/Icon/IconHint.tsx @@ -2,25 +2,23 @@ * Copyright (c) Facebook, Inc. and its affiliates. */ -import * as React from 'react'; +import {memo} from 'react'; import cn from 'classnames'; -export const IconHint = React.memo( - function IconHint({className}) { - return ( - - - - ); - } -); - -IconHint.displayName = 'IconHint'; +export const IconHint = memo(function IconHint({ + className, +}) { + return ( + + + + ); +}); diff --git a/beta/src/components/Icon/IconInstagram.tsx b/beta/src/components/Icon/IconInstagram.tsx index cda96a67..6868a0a7 100644 --- a/beta/src/components/Icon/IconInstagram.tsx +++ b/beta/src/components/Icon/IconInstagram.tsx @@ -2,9 +2,9 @@ * Copyright (c) Facebook, Inc. and its affiliates. */ -import * as React from 'react'; +import {memo} from 'react'; -export const IconInstagram = React.memo( +export const IconInstagram = memo( function IconInstagram(props) { return ( ); }); - -IconNavArrow.displayName = 'IconNavArrow'; diff --git a/beta/src/components/Icon/IconNewPage.tsx b/beta/src/components/Icon/IconNewPage.tsx index 22888b60..e32901c5 100644 --- a/beta/src/components/Icon/IconNewPage.tsx +++ b/beta/src/components/Icon/IconNewPage.tsx @@ -2,9 +2,9 @@ * Copyright (c) Facebook, Inc. and its affiliates. */ -import * as React from 'react'; +import {memo} from 'react'; -export const IconNewPage = React.memo( +export const IconNewPage = memo( function IconNewPage(props) { return ( ( ); } ); - -IconNewPage.displayName = 'IconNewPage'; diff --git a/beta/src/components/Icon/IconNote.tsx b/beta/src/components/Icon/IconNote.tsx index 7ddf9252..a0ac1293 100644 --- a/beta/src/components/Icon/IconNote.tsx +++ b/beta/src/components/Icon/IconNote.tsx @@ -2,25 +2,23 @@ * Copyright (c) Facebook, Inc. and its affiliates. */ -import * as React from 'react'; +import {memo} from 'react'; -export const IconNote = React.memo( - function IconNote({className}) { - return ( - - - - ); - } -); - -IconNote.displayName = 'IconNote'; +export const IconNote = memo(function IconNote({ + className, +}) { + return ( + + + + ); +}); diff --git a/beta/src/components/Icon/IconRestart.tsx b/beta/src/components/Icon/IconRestart.tsx index 021a40bb..b4a6b62f 100644 --- a/beta/src/components/Icon/IconRestart.tsx +++ b/beta/src/components/Icon/IconRestart.tsx @@ -2,9 +2,9 @@ * Copyright (c) Facebook, Inc. and its affiliates. */ -import * as React from 'react'; +import {memo} from 'react'; -export const IconRestart = React.memo( +export const IconRestart = memo( function IconRestart({className}) { return ( ( ); } ); - -IconRestart.displayName = 'IconRestart'; diff --git a/beta/src/components/Icon/IconRss.tsx b/beta/src/components/Icon/IconRss.tsx index 4cd10de4..f2a52ee2 100644 --- a/beta/src/components/Icon/IconRss.tsx +++ b/beta/src/components/Icon/IconRss.tsx @@ -2,28 +2,26 @@ * Copyright (c) Facebook, Inc. and its affiliates. */ -import * as React from 'react'; +import {memo} from 'react'; -export const IconRss = React.memo( - function IconRss(props) { - return ( - - - - - - ); - } -); - -IconRss.displayName = 'IconLogo'; +export const IconRss = memo(function IconRss( + props +) { + return ( + + + + + + ); +}); diff --git a/beta/src/components/Icon/IconSearch.tsx b/beta/src/components/Icon/IconSearch.tsx index a13fbfad..a2816991 100644 --- a/beta/src/components/Icon/IconSearch.tsx +++ b/beta/src/components/Icon/IconSearch.tsx @@ -2,9 +2,9 @@ * Copyright (c) Facebook, Inc. and its affiliates. */ -import * as React from 'react'; +import {memo} from 'react'; -export const IconSearch = React.memo( +export const IconSearch = memo( function IconSearch(props) { return ( @@ -20,5 +20,3 @@ export const IconSearch = React.memo( ); } ); - -IconSearch.displayName = 'IconSearch'; diff --git a/beta/src/components/Icon/IconSolution.tsx b/beta/src/components/Icon/IconSolution.tsx index bdc09726..668e41af 100644 --- a/beta/src/components/Icon/IconSolution.tsx +++ b/beta/src/components/Icon/IconSolution.tsx @@ -2,10 +2,10 @@ * Copyright (c) Facebook, Inc. and its affiliates. */ -import * as React from 'react'; +import {memo} from 'react'; import cn from 'classnames'; -export const IconSolution = React.memo( +export const IconSolution = memo( function IconSolution({className}) { return ( ( ); } ); - -IconSolution.displayName = 'IconSolution'; diff --git a/beta/src/components/Icon/IconTerminal.tsx b/beta/src/components/Icon/IconTerminal.tsx index 8f31199e..7b3a97a8 100644 --- a/beta/src/components/Icon/IconTerminal.tsx +++ b/beta/src/components/Icon/IconTerminal.tsx @@ -2,9 +2,9 @@ * Copyright (c) Facebook, Inc. and its affiliates. */ -import * as React from 'react'; +import {memo} from 'react'; -export const IconTerminal = React.memo( +export const IconTerminal = memo( function IconTerminal({className}) { return ( ( ); } ); - -IconTerminal.displayName = 'IconTerminal'; diff --git a/beta/src/components/Icon/IconTwitter.tsx b/beta/src/components/Icon/IconTwitter.tsx index 1e113c9e..95117152 100644 --- a/beta/src/components/Icon/IconTwitter.tsx +++ b/beta/src/components/Icon/IconTwitter.tsx @@ -2,9 +2,9 @@ * Copyright (c) Facebook, Inc. and its affiliates. */ -import * as React from 'react'; +import {memo} from 'react'; -export const IconTwitter = React.memo( +export const IconTwitter = memo( function IconTwitter(props) { return ( ( ); } ); - -IconTwitter.displayName = 'IconTwitter'; diff --git a/beta/src/components/Icon/IconWarning.tsx b/beta/src/components/Icon/IconWarning.tsx index 09a4e03e..d89b5678 100644 --- a/beta/src/components/Icon/IconWarning.tsx +++ b/beta/src/components/Icon/IconWarning.tsx @@ -2,9 +2,9 @@ * Copyright (c) Facebook, Inc. and its affiliates. */ -import * as React from 'react'; +import {memo} from 'react'; -export const IconWarning = React.memo( +export const IconWarning = memo( function IconWarning({className}) { return ( ( ); } ); - -IconWarning.displayName = 'IconWarning'; diff --git a/beta/src/components/Layout/Feedback.tsx b/beta/src/components/Layout/Feedback.tsx index f0697f24..0832be68 100644 --- a/beta/src/components/Layout/Feedback.tsx +++ b/beta/src/components/Layout/Feedback.tsx @@ -2,7 +2,7 @@ * Copyright (c) Facebook, Inc. and its affiliates. */ -import * as React from 'react'; +import {useState} from 'react'; import {useRouter} from 'next/router'; import {ga} from '../../utils/analytics'; @@ -58,7 +58,7 @@ function sendGAEvent(isPositive: boolean) { } function SendFeedback({onSubmit}: {onSubmit: () => void}) { - const [isSubmitted, setIsSubmitted] = React.useState(false); + const [isSubmitted, setIsSubmitted] = useState(false); return (

diff --git a/beta/src/components/Layout/Nav/Nav.tsx b/beta/src/components/Layout/Nav/Nav.tsx index 633f0364..098b14a4 100644 --- a/beta/src/components/Layout/Nav/Nav.tsx +++ b/beta/src/components/Layout/Nav/Nav.tsx @@ -2,6 +2,7 @@ * Copyright (c) Facebook, Inc. and its affiliates. */ +import {useState, useRef, useContext, useEffect, Suspense} from 'react'; import * as React from 'react'; import cn from 'classnames'; import NextLink from 'next/link'; @@ -93,20 +94,20 @@ const lightIcon = ( ); export default function Nav() { - const [isOpen, setIsOpen] = React.useState(false); - const [showFeedback, setShowFeedback] = React.useState(false); - const scrollParentRef = React.useRef(null); - const feedbackAutohideRef = React.useRef(null); + const [isOpen, setIsOpen] = useState(false); + const [showFeedback, setShowFeedback] = useState(false); + const scrollParentRef = useRef(null); + const feedbackAutohideRef = useRef(null); const section = useActiveSection(); const {asPath} = useRouter(); - const feedbackPopupRef = React.useRef(null); + const feedbackPopupRef = useRef(null); // In desktop mode, use the route tree for current route. - let routeTree: RouteItem = React.useContext(SidebarContext); + let routeTree: RouteItem = useContext(SidebarContext); // In mobile mode, let the user switch tabs there and back without navigating. // Seed the tab state from the router, but keep it independent. - const [tab, setTab] = React.useState(section); - const [prevSection, setPrevSection] = React.useState(section); + const [tab, setTab] = useState(section); + const [prevSection, setPrevSection] = useState(section); if (prevSection !== section) { setPrevSection(section); setTab(section); @@ -130,7 +131,7 @@ export default function Nav() { } // While the overlay is open, disable body scroll. - React.useEffect(() => { + useEffect(() => { if (isOpen) { const preferredScrollParent = scrollParentRef.current!; disableBodyScroll(preferredScrollParent); @@ -141,13 +142,13 @@ export default function Nav() { }, [isOpen]); // Close the overlay on any navigation. - React.useEffect(() => { + useEffect(() => { setIsOpen(false); }, [asPath]); // Also close the overlay if the window gets resized past mobile layout. // (This is also important because we don't want to keep the body locked!) - React.useEffect(() => { + useEffect(() => { const media = window.matchMedia(`(max-width: 1023px)`); function closeIfNeeded() { if (!media.matches) { @@ -167,7 +168,7 @@ export default function Nav() { } // Hide the Feedback widget on any click outside. - React.useEffect(() => { + useEffect(() => { if (!showFeedback) { return; } @@ -346,7 +347,7 @@ export default function Nav() { style={{'--bg-opacity': '.2'} as React.CSSProperties} // Need to cast here because CSS vars aren't considered valid in TS types (cuz they could be anything) className="w-full lg:h-auto grow pr-0 lg:pr-5 pt-6 lg:py-6 md:pt-4 lg:pt-4 scrolling-touch scrolling-gpu"> {/* No fallback UI so need to be careful not to suspend directly inside. */} - + - +

diff --git a/beta/src/components/Layout/Page.tsx b/beta/src/components/Layout/Page.tsx index b0a5a34f..cdea03b6 100644 --- a/beta/src/components/Layout/Page.tsx +++ b/beta/src/components/Layout/Page.tsx @@ -2,6 +2,7 @@ * Copyright (c) Facebook, Inc. and its affiliates. */ +import {Suspense} from 'react'; import * as React from 'react'; import {useRouter} from 'next/router'; import {Nav} from './Nav'; @@ -41,7 +42,7 @@ export function Page({children, toc}: PageProps) {
{/* No fallback UI so need to be careful not to suspend directly inside. */} - +
@@ -49,7 +50,7 @@ export function Page({children, toc}: PageProps) {
- +
{toc.length > 0 && }
diff --git a/beta/src/components/Layout/Sidebar/SidebarLink.tsx b/beta/src/components/Layout/Sidebar/SidebarLink.tsx index 3ee35fa1..de5ea8ea 100644 --- a/beta/src/components/Layout/Sidebar/SidebarLink.tsx +++ b/beta/src/components/Layout/Sidebar/SidebarLink.tsx @@ -4,6 +4,7 @@ /* eslint-disable jsx-a11y/no-static-element-interactions */ /* eslint-disable jsx-a11y/click-events-have-key-events */ +import {useRef, useEffect} from 'react'; import * as React from 'react'; import cn from 'classnames'; import {IconNavArrow} from 'components/Icon/IconNavArrow'; @@ -35,9 +36,9 @@ export function SidebarLink({ hideArrow, isPending, }: SidebarLinkProps) { - const ref = React.useRef(null); + const ref = useRef(null); - React.useEffect(() => { + useEffect(() => { if (selected && ref && ref.current) { // @ts-ignore if (typeof ref.current.scrollIntoViewIfNeeded === 'function') { diff --git a/beta/src/components/Layout/Sidebar/SidebarRouteTree.tsx b/beta/src/components/Layout/Sidebar/SidebarRouteTree.tsx index dbc08caa..3d27d05d 100644 --- a/beta/src/components/Layout/Sidebar/SidebarRouteTree.tsx +++ b/beta/src/components/Layout/Sidebar/SidebarRouteTree.tsx @@ -2,7 +2,8 @@ * Copyright (c) Facebook, Inc. and its affiliates. */ -import * as React from 'react'; +import {useRef, useLayoutEffect} from 'react'; + import cn from 'classnames'; import {RouteItem} from 'components/Layout/useRouteMeta'; import {useRouter} from 'next/router'; @@ -10,7 +11,6 @@ import {removeFromLast} from 'utils/removeFromLast'; import {useRouteMeta} from '../useRouteMeta'; import {SidebarLink} from './SidebarLink'; import useCollapse from 'react-collapsed'; -import {useLayoutEffect} from 'react'; import usePendingRoute from 'hooks/usePendingRoute'; interface SidebarRouteTreeProps { @@ -28,15 +28,15 @@ function CollapseWrapper({ duration: number; children: any; }) { - const ref = React.useRef(null); - const timeoutRef = React.useRef(null); + const ref = useRef(null); + const timeoutRef = useRef(null); const {getCollapseProps} = useCollapse({ isExpanded, duration, }); // Disable pointer events while animating. - const isExpandedRef = React.useRef(isExpanded); + const isExpandedRef = useRef(isExpanded); if (typeof window !== 'undefined') { // eslint-disable-next-line react-hooks/rules-of-hooks useLayoutEffect(() => { diff --git a/beta/src/components/Layout/Toc.tsx b/beta/src/components/Layout/Toc.tsx index dabadddd..2ff77953 100644 --- a/beta/src/components/Layout/Toc.tsx +++ b/beta/src/components/Layout/Toc.tsx @@ -3,7 +3,6 @@ */ import cx from 'classnames'; -import * as React from 'react'; import {useTocHighlight} from './useTocHighlight'; import type {Toc} from '../MDX/TocContext'; diff --git a/beta/src/components/Layout/useRouteMeta.tsx b/beta/src/components/Layout/useRouteMeta.tsx index a007e5a9..d333a1e6 100644 --- a/beta/src/components/Layout/useRouteMeta.tsx +++ b/beta/src/components/Layout/useRouteMeta.tsx @@ -2,7 +2,7 @@ * Copyright (c) Facebook, Inc. and its affiliates. */ -import * as React from 'react'; +import {useContext, createContext} from 'react'; import {useRouter} from 'next/router'; /** @@ -54,7 +54,7 @@ export interface RouteMeta { } export function useRouteMeta(rootRoute?: RouteItem) { - const sidebarContext = React.useContext(SidebarContext); + const sidebarContext = useContext(SidebarContext); const routeTree = rootRoute || sidebarContext; const router = useRouter(); if (router.pathname === '/404') { @@ -70,7 +70,7 @@ export function useRouteMeta(rootRoute?: RouteItem) { }; } -export const SidebarContext = React.createContext({title: 'root'}); +export const SidebarContext = createContext({title: 'root'}); // Performs a depth-first search to find the current route and its previous/next route function getRouteMeta( diff --git a/beta/src/components/Layout/useTocHighlight.tsx b/beta/src/components/Layout/useTocHighlight.tsx index ee72f649..b0879a14 100644 --- a/beta/src/components/Layout/useTocHighlight.tsx +++ b/beta/src/components/Layout/useTocHighlight.tsx @@ -2,7 +2,7 @@ * Copyright (c) Facebook, Inc. and its affiliates. */ -import React from 'react'; +import {useState, useRef, useEffect} from 'react'; const TOP_OFFSET = 75; @@ -23,10 +23,10 @@ export function getHeaderAnchors(): HTMLAnchorElement[] { * Sets up Table of Contents highlighting. */ export function useTocHighlight() { - const [currentIndex, setCurrentIndex] = React.useState(0); - const timeoutRef = React.useRef(null); + const [currentIndex, setCurrentIndex] = useState(0); + const timeoutRef = useRef(null); - React.useEffect(() => { + useEffect(() => { function updateActiveLink() { const pageHeight = document.body.scrollHeight; const scrollPosition = window.scrollY + window.innerHeight; diff --git a/beta/src/components/Layout/useTwitter.tsx b/beta/src/components/Layout/useTwitter.tsx deleted file mode 100644 index ee76a6a5..00000000 --- a/beta/src/components/Layout/useTwitter.tsx +++ /dev/null @@ -1,49 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -/** - * Ported from gatsby-plugin-twitter - * https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-twitter - */ -import * as React from 'react'; - -const injectTwitterScript = function injectTwitterScript() { - function addJS(jsCode: any) { - const s = document.createElement('script'); - s.type = 'text/javascript'; - s.innerText = jsCode; - document.getElementsByTagName('head')[0].appendChild(s); - } - - addJS( - '\n window.twttr = (function(d, s, id) {\n var js,\n fjs = d.getElementsByTagName(s)[0],\n t = window.twttr || {};\n if (d.getElementById(id)) return t;\n js = d.createElement(s);\n js.id = id;\n js.src = "https://platform.twitter.com/widgets.js";\n fjs.parentNode.insertBefore(js, fjs);\n t._e = [];\n t.ready = function(f) {\n t._e.push(f);\n };\n return t;\n })(document, "script", "twitter-wjs");\n ' - ); -}; - -let injectedTwitterScript = false; -const embedClasses = [ - '.twitter-tweet', - '.twitter-timeline', - '.twitter-follow-button', - '.twitter-share-button', -].join(','); - -export function useTwitter() { - React.useEffect(() => { - if (document.querySelector(embedClasses) !== null) { - if (!injectedTwitterScript) { - injectTwitterScript(); - injectedTwitterScript = true; - } - - if ( - typeof (window as any).twttr !== 'undefined' && - (window as any).twttr.widgets && - typeof (window as any).twttr.widgets.load === 'function' - ) { - (window as any).twttr.widgets.load(); - } - } - }, []); -} diff --git a/beta/src/components/Logo.tsx b/beta/src/components/Logo.tsx index 0efa7acc..67469c0e 100644 --- a/beta/src/components/Logo.tsx +++ b/beta/src/components/Logo.tsx @@ -2,8 +2,6 @@ * Copyright (c) Facebook, Inc. and its affiliates. */ -import * as React from 'react'; - export function Logo(props: JSX.IntrinsicElements['svg']) { return ( ); } - -Logo.displayName = 'Logo'; diff --git a/beta/src/components/MDX/Challenges/Challenge.tsx b/beta/src/components/MDX/Challenges/Challenge.tsx index 83f7fc4b..82b3535c 100644 --- a/beta/src/components/MDX/Challenges/Challenge.tsx +++ b/beta/src/components/MDX/Challenges/Challenge.tsx @@ -2,7 +2,7 @@ * Copyright (c) Facebook, Inc. and its affiliates. */ -import * as React from 'react'; +import {useState} from 'react'; import cn from 'classnames'; import {Button} from 'components/Button'; import {ChallengeContents} from './Challenges'; @@ -25,8 +25,8 @@ export function Challenge({ hasNextChallenge, handleClickNextChallenge, }: ChallengeProps) { - const [showHint, setShowHint] = React.useState(false); - const [showSolution, setShowSolution] = React.useState(false); + const [showHint, setShowHint] = useState(false); + const [showSolution, setShowSolution] = useState(false); const toggleHint = () => { if (showSolution && !showHint) { diff --git a/beta/src/components/MDX/Challenges/Challenges.tsx b/beta/src/components/MDX/Challenges/Challenges.tsx index 05d39e13..70df4228 100644 --- a/beta/src/components/MDX/Challenges/Challenges.tsx +++ b/beta/src/components/MDX/Challenges/Challenges.tsx @@ -2,6 +2,7 @@ * Copyright (c) Facebook, Inc. and its affiliates. */ +import {Children, useRef, useEffect, useState} from 'react'; import * as React from 'react'; import cn from 'classnames'; import {H2} from 'components/MDX/Heading'; @@ -36,7 +37,7 @@ const parseChallengeContents = ( let challenge: Partial = {}; let content: React.ReactElement[] = []; - React.Children.forEach(children, (child) => { + Children.forEach(children, (child) => { const {props, type} = child; switch ((type as any).mdxName) { case 'Solution': { @@ -74,12 +75,12 @@ export function Challenges({ }: ChallengesProps) { const challenges = parseChallengeContents(children); const totalChallenges = challenges.length; - const scrollAnchorRef = React.useRef(null); - const queuedScrollRef = React.useRef(false); - const [activeIndex, setActiveIndex] = React.useState(0); + const scrollAnchorRef = useRef(null); + const queuedScrollRef = useRef(false); + const [activeIndex, setActiveIndex] = useState(0); const currentChallenge = challenges[activeIndex]; - React.useEffect(() => { + useEffect(() => { if (queuedScrollRef.current === true) { queuedScrollRef.current = false; scrollAnchorRef.current!.scrollIntoView({ diff --git a/beta/src/components/MDX/Challenges/Navigation.tsx b/beta/src/components/MDX/Challenges/Navigation.tsx index 07b0bdf2..51cf5cb5 100644 --- a/beta/src/components/MDX/Challenges/Navigation.tsx +++ b/beta/src/components/MDX/Challenges/Navigation.tsx @@ -2,7 +2,7 @@ * Copyright (c) Facebook, Inc. and its affiliates. */ -import React, {createRef} from 'react'; +import {useRef, useCallback, useEffect, createRef} from 'react'; import cn from 'classnames'; import {IconChevron} from 'components/Icon/IconChevron'; import {ChallengeContents} from './Challenges'; @@ -19,8 +19,8 @@ export function Navigation({ currentChallenge: ChallengeContents; isRecipes?: boolean; }) { - const containerRef = React.useRef(null); - const challengesNavRef = React.useRef( + const containerRef = useRef(null); + const challengesNavRef = useRef( challenges.map(() => createRef()) ); const scrollPos = currentChallenge.order - 1; @@ -61,7 +61,7 @@ export function Navigation({ handleChange(index); }; - const handleResize = React.useCallback(() => { + const handleResize = useCallback(() => { if (containerRef.current) { const el = containerRef.current; el.scrollLeft = @@ -69,7 +69,7 @@ export function Navigation({ } }, [containerRef, challengesNavRef, scrollPos]); - React.useEffect(() => { + useEffect(() => { handleResize(); window.addEventListener('resize', debounce(handleResize, 200)); return () => { diff --git a/beta/src/components/MDX/Challenges/index.tsx b/beta/src/components/MDX/Challenges/index.tsx index b39b2f22..413fd461 100644 --- a/beta/src/components/MDX/Challenges/index.tsx +++ b/beta/src/components/MDX/Challenges/index.tsx @@ -2,7 +2,7 @@ * Copyright (c) Facebook, Inc. and its affiliates. */ -import React from 'react'; +import * as React from 'react'; export {Challenges} from './Challenges'; export function Hint({children}: {children: React.ReactNode}) { diff --git a/beta/src/components/MDX/CodeBlock/index.tsx b/beta/src/components/MDX/CodeBlock/index.tsx index e380cc84..3811d626 100644 --- a/beta/src/components/MDX/CodeBlock/index.tsx +++ b/beta/src/components/MDX/CodeBlock/index.tsx @@ -2,10 +2,10 @@ * Copyright (c) Facebook, Inc. and its affiliates. */ import cn from 'classnames'; -import * as React from 'react'; -const CodeBlock = React.lazy(() => import('./CodeBlock')); +import {lazy, memo, Suspense} from 'react'; +const CodeBlock = lazy(() => import('./CodeBlock')); -export default React.memo(function CodeBlockWrapper(props: { +export default memo(function CodeBlockWrapper(props: { isFromPackageImport: boolean; children: string; className?: string; @@ -15,7 +15,7 @@ export default React.memo(function CodeBlockWrapper(props: { }): any { const {children, isFromPackageImport} = props; return ( - }> - + ); }); diff --git a/beta/src/components/MDX/CodeDiagram.tsx b/beta/src/components/MDX/CodeDiagram.tsx index 5c7bc64e..3b849034 100644 --- a/beta/src/components/MDX/CodeDiagram.tsx +++ b/beta/src/components/MDX/CodeDiagram.tsx @@ -2,6 +2,7 @@ * Copyright (c) Facebook, Inc. and its affiliates. */ +import {Children} from 'react'; import * as React from 'react'; import CodeBlock from './CodeBlock'; @@ -11,10 +12,10 @@ interface CodeDiagramProps { } export function CodeDiagram({children, flip = false}: CodeDiagramProps) { - const illustration = React.Children.toArray(children).filter((child: any) => { + const illustration = Children.toArray(children).filter((child: any) => { return child.type === 'img'; }); - const content = React.Children.toArray(children).map((child: any) => { + const content = Children.toArray(children).map((child: any) => { if (child.type?.mdxName === 'pre') { return ( (
); -Box.displayName = 'Box'; function ConsoleBlock({level = 'error', children}: ConsoleBlockProps) { let message: React.ReactNode | null; if (typeof children === 'string') { message = children; - } else if (React.isValidElement(children)) { + } else if (isValidElement(children)) { message = children.props.children; } diff --git a/beta/src/components/MDX/Diagram.tsx b/beta/src/components/MDX/Diagram.tsx index f45b8f76..7920661d 100644 --- a/beta/src/components/MDX/Diagram.tsx +++ b/beta/src/components/MDX/Diagram.tsx @@ -2,7 +2,6 @@ * Copyright (c) Facebook, Inc. and its affiliates. */ -import * as React from 'react'; import Image from 'next/image'; interface DiagramProps { diff --git a/beta/src/components/MDX/DiagramGroup.tsx b/beta/src/components/MDX/DiagramGroup.tsx index 932e7207..6c5130a3 100644 --- a/beta/src/components/MDX/DiagramGroup.tsx +++ b/beta/src/components/MDX/DiagramGroup.tsx @@ -2,7 +2,6 @@ * Copyright (c) Facebook, Inc. and its affiliates. */ -import * as React from 'react'; import {ReactNode} from 'react'; interface DiagramGroupProps { diff --git a/beta/src/components/MDX/ExpandableCallout.tsx b/beta/src/components/MDX/ExpandableCallout.tsx index 835cf9a2..216f4542 100644 --- a/beta/src/components/MDX/ExpandableCallout.tsx +++ b/beta/src/components/MDX/ExpandableCallout.tsx @@ -2,6 +2,7 @@ * Copyright (c) Facebook, Inc. and its affiliates. */ +import {useRef} from 'react'; import * as React from 'react'; import cn from 'classnames'; import {IconNote} from '../Icon/IconNote'; @@ -43,7 +44,7 @@ const variantMap = { }; function ExpandableCallout({children, type}: ExpandableCalloutProps) { - const contentRef = React.useRef(null); + const contentRef = useRef(null); const variant = variantMap[type]; return ( diff --git a/beta/src/components/MDX/Heading.tsx b/beta/src/components/MDX/Heading.tsx index 1a337f88..58fed55f 100644 --- a/beta/src/components/MDX/Heading.tsx +++ b/beta/src/components/MDX/Heading.tsx @@ -51,8 +51,6 @@ const Heading = forwardRefWithAs(function Heading( ); }); -Heading.displayName = 'Heading'; - export const H1 = ({className, ...props}: HeadingProps) => ( { - if (child.type?.mdxName && child.type?.mdxName === 'inlineCode') { - return React.cloneElement(child, { - isLink: true, - }); - } - return child; + const modifiedChildren = Children.toArray(children).map((child: any) => { + if (child.type?.mdxName && child.type?.mdxName === 'inlineCode') { + return cloneElement(child, { + isLink: true, + }); } - ); + return child; + }); if (!href) { // eslint-disable-next-line jsx-a11y/anchor-has-content @@ -54,6 +52,4 @@ function Link({ ); } -Link.displayName = 'Link'; - export default Link; diff --git a/beta/src/components/MDX/MDXComponents.tsx b/beta/src/components/MDX/MDXComponents.tsx index b86cacf9..91b583d3 100644 --- a/beta/src/components/MDX/MDXComponents.tsx +++ b/beta/src/components/MDX/MDXComponents.tsx @@ -2,6 +2,7 @@ * Copyright (c) Facebook, Inc. and its affiliates. */ +import {Children, useContext, useMemo} from 'react'; import * as React from 'react'; import cn from 'classnames'; @@ -238,7 +239,7 @@ function IllustrationBlock({ sequential: boolean; children: any; }) { - const imageInfos = React.Children.toArray(children).map( + const imageInfos = Children.toArray(children).map( (child: any) => child.props ); const images = imageInfos.map((info, index) => ( @@ -308,8 +309,8 @@ function calculateNestedToc(toc: Toc): NestedTocRoot { } function InlineToc() { - const toc = React.useContext(TocContext); - const root = React.useMemo(() => calculateNestedToc(toc), [toc]); + const toc = useContext(TocContext); + const root = useMemo(() => calculateNestedToc(toc), [toc]); return ; } diff --git a/beta/src/components/MDX/PackageImport.tsx b/beta/src/components/MDX/PackageImport.tsx index 092b319f..d7a7129e 100644 --- a/beta/src/components/MDX/PackageImport.tsx +++ b/beta/src/components/MDX/PackageImport.tsx @@ -2,6 +2,7 @@ * Copyright (c) Facebook, Inc. and its affiliates. */ +import {Children} from 'react'; import * as React from 'react'; import CodeBlock from './CodeBlock'; @@ -10,10 +11,10 @@ interface PackageImportProps { } export function PackageImport({children}: PackageImportProps) { - const terminal = React.Children.toArray(children).filter((child: any) => { + const terminal = Children.toArray(children).filter((child: any) => { return child.type?.mdxName !== 'pre'; }); - const code = React.Children.toArray(children).map((child: any, i: number) => { + const code = Children.toArray(children).map((child: any, i: number) => { if (child.type?.mdxName === 'pre') { return ( { const {listen} = useSandpack(); - const [logs, setLogs] = React.useState([]); - const wrapperRef = React.useRef(null); + const [logs, setLogs] = useState([]); + const wrapperRef = useRef(null); - React.useEffect(() => { + useEffect(() => { let isActive = true; const unsubscribe = listen((message) => { if (!isActive) { @@ -140,9 +140,9 @@ export const SandpackConsole = ({visible}: {visible: boolean}) => { }; }, [listen]); - const [isExpanded, setIsExpanded] = React.useState(true); + const [isExpanded, setIsExpanded] = useState(true); - React.useEffect(() => { + useEffect(() => { if (wrapperRef.current) { wrapperRef.current.scrollTop = wrapperRef.current.scrollHeight; } diff --git a/beta/src/components/MDX/Sandpack/CustomPreset.tsx b/beta/src/components/MDX/Sandpack/CustomPreset.tsx index 47eb57de..58822245 100644 --- a/beta/src/components/MDX/Sandpack/CustomPreset.tsx +++ b/beta/src/components/MDX/Sandpack/CustomPreset.tsx @@ -1,7 +1,7 @@ /* * Copyright (c) Facebook, Inc. and its affiliates. */ -import React from 'react'; +import {useRef, useState} from 'react'; import {flushSync} from 'react-dom'; import { useSandpack, @@ -30,11 +30,11 @@ export function CustomPreset({ providedFiles: Array; }) { const {lintErrors, lintExtensions} = useSandpackLint(); - const lineCountRef = React.useRef<{[key: string]: number}>({}); - const containerRef = React.useRef(null); + const lineCountRef = useRef<{[key: string]: number}>({}); + const containerRef = useRef(null); const {sandpack} = useSandpack(); const {code} = useActiveCode(); - const [isExpanded, setIsExpanded] = React.useState(false); + const [isExpanded, setIsExpanded] = useState(false); const {activeFile} = sandpack; if (!lineCountRef.current[activeFile]) { diff --git a/beta/src/components/MDX/Sandpack/DownloadButton.tsx b/beta/src/components/MDX/Sandpack/DownloadButton.tsx index 56f01936..ef974b1a 100644 --- a/beta/src/components/MDX/Sandpack/DownloadButton.tsx +++ b/beta/src/components/MDX/Sandpack/DownloadButton.tsx @@ -2,7 +2,7 @@ * Copyright (c) Facebook, Inc. and its affiliates. */ -import * as React from 'react'; +import {useSyncExternalStore} from 'react'; import {useSandpack} from '@codesandbox/sandpack-react'; import {IconDownload} from '../../Icon/IconDownload'; export interface DownloadButtonProps {} @@ -26,11 +26,7 @@ function useSupportsImportMap() { return false; } - return React.useSyncExternalStore( - subscribe, - getCurrentValue, - getServerSnapshot - ); + return useSyncExternalStore(subscribe, getCurrentValue, getServerSnapshot); } const SUPPORTED_FILES = ['/App.js', '/styles.css']; diff --git a/beta/src/components/MDX/Sandpack/Error.tsx b/beta/src/components/MDX/Sandpack/Error.tsx index 257ce036..61344eba 100644 --- a/beta/src/components/MDX/Sandpack/Error.tsx +++ b/beta/src/components/MDX/Sandpack/Error.tsx @@ -2,8 +2,6 @@ * Copyright (c) Facebook, Inc. and its affiliates. */ -import * as React from 'react'; - interface ErrorType { title?: string; message: string; diff --git a/beta/src/components/MDX/Sandpack/NavigationBar.tsx b/beta/src/components/MDX/Sandpack/NavigationBar.tsx index ff7ac23d..acc972fb 100644 --- a/beta/src/components/MDX/Sandpack/NavigationBar.tsx +++ b/beta/src/components/MDX/Sandpack/NavigationBar.tsx @@ -2,7 +2,14 @@ * Copyright (c) Facebook, Inc. and its affiliates. */ -import * as React from 'react'; +import { + useRef, + useInsertionEffect, + useCallback, + useState, + useEffect, + Fragment, +} from 'react'; import cn from 'classnames'; import { FileTabs, @@ -17,11 +24,11 @@ import {Listbox} from '@headlessui/react'; // TODO: Replace with real useEvent. export function useEvent(fn: any): any { - const ref = React.useRef(null); - React.useInsertionEffect(() => { + const ref = useRef(null); + useInsertionEffect(() => { ref.current = fn; }, [fn]); - return React.useCallback((...args: any) => { + return useCallback((...args: any) => { const f = ref.current!; // @ts-ignore return f(...args); @@ -35,16 +42,16 @@ const getFileName = (filePath: string): string => { export function NavigationBar({providedFiles}: {providedFiles: Array}) { const {sandpack} = useSandpack(); - const containerRef = React.useRef(null); - const tabsRef = React.useRef(null); + const containerRef = useRef(null); + const tabsRef = useRef(null); // By default, show the dropdown because all tabs may not fit. // We don't know whether they'll fit or not until after hydration: - const [showDropdown, setShowDropdown] = React.useState(true); + const [showDropdown, setShowDropdown] = useState(true); const {activeFile, setActiveFile, visibleFiles, clients} = sandpack; const clientId = Object.keys(clients)[0]; const {refresh} = useSandpackNavigation(clientId); const isMultiFile = visibleFiles.length > 1; - const hasJustToggledDropdown = React.useRef(false); + const hasJustToggledDropdown = useRef(false); // Keep track of whether we can show all tabs or just the dropdown. const onContainerResize = useEvent((containerWidth: number) => { @@ -65,7 +72,7 @@ export function NavigationBar({providedFiles}: {providedFiles: Array}) { } }); - React.useEffect(() => { + useEffect(() => { if (isMultiFile) { const resizeObserver = new ResizeObserver((entries) => { for (const entry of entries) { @@ -111,7 +118,7 @@ export function NavigationBar({providedFiles}: {providedFiles: Array}) { )}>
- + {({open}) => ( // If tabs don't fit, display the dropdown instead. // The dropdown is absolutely positioned inside the @@ -143,10 +150,7 @@ export function NavigationBar({providedFiles}: {providedFiles: Array}) { {isMultiFile && showDropdown && ( {visibleFiles.map((filePath: string) => ( - + {({active}) => (
  • (null); - const [saved, setSaved] = React.useState(value); - React.useEffect(() => { + const ref = useRef(null); + const [saved, setSaved] = useState(value); + useEffect(() => { clearTimeout(ref.current); ref.current = setTimeout(() => { setSaved(value); @@ -46,10 +46,10 @@ export function Preview({ lintErrors, }: CustomPreviewProps) { const {sandpack, listen} = useSandpack(); - const [isReady, setIsReady] = React.useState(false); - const [iframeComputedHeight, setComputedAutoHeight] = React.useState< - number | null - >(null); + const [isReady, setIsReady] = useState(false); + const [iframeComputedHeight, setComputedAutoHeight] = useState( + null + ); let { error: rawError, @@ -70,7 +70,7 @@ export function Preview({ } // Memoized because it's fed to debouncing. - const firstLintError = React.useMemo(() => { + const firstLintError = useMemo(() => { if (lintErrors.length === 0) { return null; } else { @@ -95,8 +95,8 @@ export function Preview({ // It changes too fast, causing flicker. const error = useDebounced(rawError); - const clientId = React.useRef(generateRandomId()); - const iframeRef = React.useRef(null); + const clientId = useRef(generateRandomId()); + const iframeRef = useRef(null); // SandpackPreview immediately registers the custom screens/components so the bundler does not render any of them // TODO: why are we doing this during render? @@ -104,7 +104,7 @@ export function Preview({ errorScreenRegisteredRef.current = true; loadingScreenRegisteredRef.current = true; - React.useEffect(function createBundler() { + useEffect(function createBundler() { const iframeElement = iframeRef.current!; registerBundler(iframeElement, clientId.current); @@ -113,7 +113,7 @@ export function Preview({ }; }, []); - React.useEffect( + useEffect( function bundlerListener() { const unsubscribe = listen((message: any) => { if (message.type === 'resize') { diff --git a/beta/src/components/MDX/Sandpack/ResetButton.tsx b/beta/src/components/MDX/Sandpack/ResetButton.tsx index db7c5156..1ac41313 100644 --- a/beta/src/components/MDX/Sandpack/ResetButton.tsx +++ b/beta/src/components/MDX/Sandpack/ResetButton.tsx @@ -8,7 +8,7 @@ export interface ResetButtonProps { onReset: () => void; } -export const ResetButton: React.FC = ({onReset}) => { +export function ResetButton({onReset}: ResetButtonProps) { return ( ); -}; +} diff --git a/beta/src/components/MDX/Sandpack/SandpackRoot.tsx b/beta/src/components/MDX/Sandpack/SandpackRoot.tsx index 2a32e013..e05bdb14 100644 --- a/beta/src/components/MDX/Sandpack/SandpackRoot.tsx +++ b/beta/src/components/MDX/Sandpack/SandpackRoot.tsx @@ -2,6 +2,7 @@ * Copyright (c) Facebook, Inc. and its affiliates. */ +import {Children, useState} from 'react'; import * as React from 'react'; import {SandpackProvider} from '@codesandbox/sandpack-react'; import {SandpackLogLevel} from '@codesandbox/sandpack-client'; @@ -68,8 +69,8 @@ ul { function SandpackRoot(props: SandpackProps) { let {children, autorun = true, showDevTools = false} = props; - const [devToolsLoaded, setDevToolsLoaded] = React.useState(false); - const codeSnippets = React.Children.toArray(children) as React.ReactElement[]; + const [devToolsLoaded, setDevToolsLoaded] = useState(false); + const codeSnippets = Children.toArray(children) as React.ReactElement[]; const files = createFileMap(codeSnippets); files['/styles.css'] = { @@ -77,7 +78,7 @@ function SandpackRoot(props: SandpackProps) { hidden: true, }; - let setup; + let setup: SandpackSetup | undefined; if (files['/package.json']) { setup = { dependencies: JSON.parse(files['/package.json'].code).dependencies, @@ -109,6 +110,4 @@ function SandpackRoot(props: SandpackProps) { ); } -SandpackRoot.displayName = 'Sandpack'; - export default SandpackRoot; diff --git a/beta/src/components/MDX/Sandpack/index.tsx b/beta/src/components/MDX/Sandpack/index.tsx index 5a2795ea..a30f9c38 100644 --- a/beta/src/components/MDX/Sandpack/index.tsx +++ b/beta/src/components/MDX/Sandpack/index.tsx @@ -2,10 +2,10 @@ * Copyright (c) Facebook, Inc. and its affiliates. */ -import * as React from 'react'; +import {lazy, memo, Children, Suspense} from 'react'; import {createFileMap} from './createFileMap'; -const SandpackRoot = React.lazy(() => import('./SandpackRoot')); +const SandpackRoot = lazy(() => import('./SandpackRoot')); const SandpackGlimmer = ({code}: {code: string}) => (
    @@ -45,8 +45,8 @@ const SandpackGlimmer = ({code}: {code: string}) => (
    ); -export default React.memo(function SandpackWrapper(props: any): any { - const codeSnippet = createFileMap(React.Children.toArray(props.children)); +export default memo(function SandpackWrapper(props: any): any { + const codeSnippet = createFileMap(Children.toArray(props.children)); // To set the active file in the fallback we have to find the active file first. // If there are no active files we fallback to App.js as default. @@ -63,8 +63,8 @@ export default React.memo(function SandpackWrapper(props: any): any { } return ( - }> + }> - + ); }); diff --git a/beta/src/components/MDX/TerminalBlock.tsx b/beta/src/components/MDX/TerminalBlock.tsx index bdd07b6b..9fb5ff35 100644 --- a/beta/src/components/MDX/TerminalBlock.tsx +++ b/beta/src/components/MDX/TerminalBlock.tsx @@ -2,6 +2,7 @@ * Copyright (c) Facebook, Inc. and its affiliates. */ +import {isValidElement, useState, useEffect} from 'react'; import * as React from 'react'; import {IconTerminal} from '../Icon/IconTerminal'; import {IconCopy} from 'components/Icon/IconCopy'; @@ -29,7 +30,7 @@ function TerminalBlock({level = 'info', children}: TerminalBlockProps) { if (typeof children === 'string') { message = children; } else if ( - React.isValidElement(children) && + isValidElement(children) && typeof children.props.children === 'string' ) { message = children.props.children; @@ -37,8 +38,8 @@ function TerminalBlock({level = 'info', children}: TerminalBlockProps) { throw Error('Expected TerminalBlock children to be a plain string.'); } - const [copied, setCopied] = React.useState(false); - React.useEffect(() => { + const [copied, setCopied] = useState(false); + useEffect(() => { if (!copied) { return; } else { diff --git a/beta/src/components/PageHeading.tsx b/beta/src/components/PageHeading.tsx index 6429eaf7..a238fceb 100644 --- a/beta/src/components/PageHeading.tsx +++ b/beta/src/components/PageHeading.tsx @@ -2,7 +2,6 @@ * Copyright (c) Facebook, Inc. and its affiliates. */ -import * as React from 'react'; import Breadcrumbs from 'components/Breadcrumbs'; import Tag from 'components/Tag'; import {RouteTag} from './Layout/useRouteMeta'; diff --git a/beta/src/components/Search.tsx b/beta/src/components/Search.tsx index 0cdd8a29..abafaefa 100644 --- a/beta/src/components/Search.tsx +++ b/beta/src/components/Search.tsx @@ -7,6 +7,7 @@ import {IconSearch} from 'components/Icon/IconSearch'; import Head from 'next/head'; import Link from 'next/link'; import Router from 'next/router'; +import {useState, useCallback, useEffect} from 'react'; import * as React from 'react'; import {createPortal} from 'react-dom'; import {siteConfig} from 'siteConfig'; @@ -58,7 +59,7 @@ function useDocSearchKeyboardEvents({ onOpen: () => void; onClose: () => void; }) { - React.useEffect(() => { + useEffect(() => { function onKeyDown(event: any) { function open() { // We check that no other DocSearch modal is showing before opening @@ -94,14 +95,14 @@ const options = { indexName: siteConfig.algolia.indexName, }; let DocSearchModal: any = null; -export const Search: React.FC = ({ +export function Search({ searchParameters = { hitsPerPage: 5, }, -}) => { - const [isShowing, setIsShowing] = React.useState(false); +}: SearchProps) { + const [isShowing, setIsShowing] = useState(false); - const importDocSearchModalIfNeeded = React.useCallback( + const importDocSearchModalIfNeeded = useCallback( function importDocSearchModalIfNeeded() { if (DocSearchModal) { return Promise.resolve(); @@ -117,7 +118,7 @@ export const Search: React.FC = ({ [] ); - const onOpen = React.useCallback( + const onOpen = useCallback( function onOpen() { importDocSearchModalIfNeeded().then(() => { setIsShowing(true); @@ -126,7 +127,7 @@ export const Search: React.FC = ({ [importDocSearchModalIfNeeded, setIsShowing] ); - const onClose = React.useCallback( + const onClose = useCallback( function onClose() { setIsShowing(false); }, @@ -191,6 +192,4 @@ export const Search: React.FC = ({ )} ); -}; - -Search.displayName = 'Search'; +} diff --git a/beta/src/components/Seo.tsx b/beta/src/components/Seo.tsx index 1b851609..9150bcfe 100644 --- a/beta/src/components/Seo.tsx +++ b/beta/src/components/Seo.tsx @@ -2,7 +2,7 @@ * Copyright (c) Facebook, Inc. and its affiliates. */ -import React from 'react'; +import * as React from 'react'; import Head from 'next/head'; import {withRouter, Router} from 'next/router'; diff --git a/beta/src/components/SocialBanner.tsx b/beta/src/components/SocialBanner.tsx index 1ea63d2a..826119c1 100644 --- a/beta/src/components/SocialBanner.tsx +++ b/beta/src/components/SocialBanner.tsx @@ -3,7 +3,7 @@ * */ -import React from 'react'; +import {useRef, useEffect} from 'react'; import cn from 'classnames'; import {ExternalLink} from './ExternalLink'; @@ -12,8 +12,8 @@ const bannerLink = 'https://opensource.fb.com/support-ukraine'; const bannerLinkText = 'Help Provide Humanitarian Aid to Ukraine'; export default function SocialBanner() { - const ref = React.useRef(null); - React.useEffect(() => { + const ref = useRef(null); + useEffect(() => { function patchedScrollTo(x: number, y: number) { if (y === 0) { // We're trying to reset scroll. diff --git a/beta/src/components/Tag.tsx b/beta/src/components/Tag.tsx index d5687c86..e86226f8 100644 --- a/beta/src/components/Tag.tsx +++ b/beta/src/components/Tag.tsx @@ -2,7 +2,6 @@ * Copyright (c) Facebook, Inc. and its affiliates. */ -import * as React from 'react'; import cn from 'classnames'; import {RouteTag} from './Layout/useRouteMeta'; diff --git a/beta/src/hooks/usePendingRoute.ts b/beta/src/hooks/usePendingRoute.ts index 19d7b0ac..73ff0b8a 100644 --- a/beta/src/hooks/usePendingRoute.ts +++ b/beta/src/hooks/usePendingRoute.ts @@ -3,13 +3,13 @@ */ import {useRouter} from 'next/router'; -import React from 'react'; +import {useState, useRef, useEffect} from 'react'; const usePendingRoute = () => { const {events} = useRouter(); - const [pendingRoute, setPendingRoute] = React.useState(null); - const currentRoute = React.useRef(null); - React.useEffect(() => { + const [pendingRoute, setPendingRoute] = useState(null); + const currentRoute = useRef(null); + useEffect(() => { let routeTransitionTimer: any = null; const handleRouteChangeStart = (url: string) => { diff --git a/beta/src/pages/_app.tsx b/beta/src/pages/_app.tsx index 716af975..18bd9b2f 100644 --- a/beta/src/pages/_app.tsx +++ b/beta/src/pages/_app.tsx @@ -2,7 +2,7 @@ * Copyright (c) Facebook, Inc. and its affiliates. */ -import * as React from 'react'; +import {useEffect} from 'react'; import {AppProps} from 'next/app'; import {useRouter} from 'next/router'; import {ga} from '../utils/analytics'; @@ -25,7 +25,7 @@ if (typeof window !== 'undefined') { export default function MyApp({Component, pageProps}: AppProps) { const router = useRouter(); - React.useEffect(() => { + useEffect(() => { // Taken from StackOverflow. Trying to detect both Safari desktop and mobile. const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent); if (isSafari) { @@ -40,7 +40,7 @@ export default function MyApp({Component, pageProps}: AppProps) { } }, []); - React.useEffect(() => { + useEffect(() => { const handleRouteChange = (url: string) => { ga('set', 'page', url); ga('send', 'pageview'); diff --git a/beta/src/pages/_document.tsx b/beta/src/pages/_document.tsx index b7b5bd45..4a8e9220 100644 --- a/beta/src/pages/_document.tsx +++ b/beta/src/pages/_document.tsx @@ -2,7 +2,6 @@ * Copyright (c) Facebook, Inc. and its affiliates. */ -import * as React from 'react'; import {Html, Head, Main, NextScript} from 'next/document'; import {getSandpackCssText} from '@codesandbox/sandpack-react'; diff --git a/beta/src/utils/toCommaSeparatedList.tsx b/beta/src/utils/toCommaSeparatedList.tsx index 341e8a5a..e95ee179 100644 --- a/beta/src/utils/toCommaSeparatedList.tsx +++ b/beta/src/utils/toCommaSeparatedList.tsx @@ -2,7 +2,7 @@ * Copyright (c) Facebook, Inc. and its affiliates. */ -import React from 'react'; +import * as React from 'react'; const addString = (list: React.ReactNode[], string: string) => list.push({string});