Merge branch 'main' of https://github.com/reactjs/reactjs.org into sync-ee754727

Author: docschina-bot

beta/package.json

@@ -48,8 +48,8 @@
     "@types/mdx-js__react": "^1.5.2",
     "@types/node": "^14.6.4",
     "@types/parse-numeric-range": "^0.0.1",
-    "@types/react": "^16.9.46",
-    "@types/react-dom": "^16.9.8",
+    "@types/react": "^18.0.9",
+    "@types/react-dom": "^18.0.5",
     "@typescript-eslint/eslint-plugin": "2.x",
     "@typescript-eslint/parser": "2.x",
     "asyncro": "^3.0.0",

beta/src/components/Layout/Toc.tsx

@@ -28,7 +28,7 @@ export function Toc({
       <h2 className="mb-3 lg:mb-3 uppercase tracking-wide font-bold text-sm text-secondary dark:text-secondary-dark px-4 w-full">
         On this page
       </h2>
-      <div className="toc h-full overflow-y-auto pl-4">
+      <div className="h-full overflow-y-auto pl-4 max-h-[calc(100vh-7.5rem)]">
         <ul className="space-y-2 pb-16">
           {headings &&
             headings.length > 0 &&
@@ -65,17 +65,6 @@ export function Toc({
             })}
         </ul>
       </div>
-      <style jsx global>{`
-        .toc {
-          /** Screen - nav - toc offset */
-          max-height: calc(100vh - 7.5rem);
-        }
-        .toc-link > code {
-          overflow-wrap: break-word;
-          white-space: pre-wrap;
-          font-size: 90%;
-        }
-      `}</style>
     </nav>
   );
 }

beta/src/components/Layout/useMediaQuery.tsx

@@ -7,7 +7,7 @@ import {useState, useCallback, useEffect} from 'react';
 const useMediaQuery = (width: number) => {
   const [targetReached, setTargetReached] = useState(false);
 
-  const updateTarget = useCallback((e) => {
+  const updateTarget = useCallback((e: MediaQueryListEvent) => {
     if (e.matches) {
       setTargetReached(true);
     } else {

beta/src/components/Layout/useTocHighlight.tsx

@@ -9,7 +9,7 @@ const TOP_OFFSET = 75;
 
 export function getHeaderAnchors(): HTMLAnchorElement[] {
   return Array.prototype.filter.call(
-    document.getElementsByClassName(siteConfig.headerIdConfig.className),
+    document.getElementsByClassName('mdx-header-anchor'),
     function (testElement) {
       return (
         testElement.parentNode.nodeName === 'H1' ||

beta/src/components/MDX/Heading.tsx

@@ -14,8 +14,6 @@ export interface HeadingProps {
   as?: any;
 }
 
-const anchorClassName = siteConfig.headerIdConfig.className;
-
 const Heading = forwardRefWithAs<HeadingProps, 'div'>(function Heading(
   {as: Comp = 'div', className, children, id, isPageAnchor = true, ...props},
   ref
@@ -26,71 +24,31 @@ const Heading = forwardRefWithAs<HeadingProps, 'div'>(function Heading(
   }
 
   return (
-    <>
-      <Comp id={id} {...props} ref={ref} className={cn('heading', className)}>
-        {children}
-        {isPageAnchor && (
-          <a
-            href={`#${id}`}
-            aria-label={label}
-            title={label}
-            className={cn(
-              anchorClassName,
-              Comp === 'h1' ? 'hidden' : 'inline-block'
-            )}>
-            <svg
-              width="1em"
-              height="1em"
-              viewBox="0 0 13 13"
-              xmlns="http://www.w3.org/2000/svg"
-              className="text-gray-70 ml-2 h-5 w-5">
-              <g fill="currentColor" fillRule="evenodd">
-                <path d="M7.778 7.975a2.5 2.5 0 0 0 .347-3.837L6.017 2.03a2.498 2.498 0 0 0-3.542-.007 2.5 2.5 0 0 0 .006 3.543l1.153 1.15c.07-.29.154-.563.25-.773.036-.077.084-.16.14-.25L3.18 4.85a1.496 1.496 0 0 1 .002-2.12 1.496 1.496 0 0 1 2.12 0l2.124 2.123a1.496 1.496 0 0 1-.333 2.37c.16.246.42.504.685.752z" />
-                <path d="M5.657 4.557a2.5 2.5 0 0 0-.347 3.837l2.108 2.108a2.498 2.498 0 0 0 3.542.007 2.5 2.5 0 0 0-.006-3.543L9.802 5.815c-.07.29-.154.565-.25.774-.036.076-.084.16-.14.25l.842.84c.585.587.59 1.532 0 2.122-.587.585-1.532.59-2.12 0L6.008 7.68a1.496 1.496 0 0 1 .332-2.372c-.16-.245-.42-.503-.685-.75z" />
-              </g>
-            </svg>
-          </a>
-        )}
-      </Comp>
-      <style jsx>
-        {`
-          .heading {
-            scroll-margin-top: 2.5em;
-            /* Space for the anchor */
-            padding-right: 1em;
-          }
-          .heading:before {
-            height: 6rem;
-            margin-top: -6rem;
-            visibility: hidden;
-            content: '';
-          }
-
-          .heading .${anchorClassName} {
-            /* Prevent the anchor from
-               overflowing to its own line */
-            height: 0px;
-            width: 0px;
-          }
-
-          .heading .${anchorClassName} svg {
-            display: inline;
-          }
-
-          .heading .${anchorClassName} svg {
-            visibility: hidden;
-          }
-
-          .heading:hover .${anchorClassName} svg {
-            visibility: visible;
-          }
-
-          .heading .${anchorClassName}:focus svg {
-            visibility: visible;
-          }
-        `}
-      </style>
-    </>
+    <Comp id={id} {...props} ref={ref} className={cn('mdx-heading', className)}>
+      {children}
+      {isPageAnchor && (
+        <a
+          href={`#${id}`}
+          aria-label={label}
+          title={label}
+          className={cn(
+            'mdx-header-anchor',
+            Comp === 'h1' ? 'hidden' : 'inline-block'
+          )}>
+          <svg
+            width="1em"
+            height="1em"
+            viewBox="0 0 13 13"
+            xmlns="http://www.w3.org/2000/svg"
+            className="text-gray-70 ml-2 h-5 w-5">
+            <g fill="currentColor" fillRule="evenodd">
+              <path d="M7.778 7.975a2.5 2.5 0 0 0 .347-3.837L6.017 2.03a2.498 2.498 0 0 0-3.542-.007 2.5 2.5 0 0 0 .006 3.543l1.153 1.15c.07-.29.154-.563.25-.773.036-.077.084-.16.14-.25L3.18 4.85a1.496 1.496 0 0 1 .002-2.12 1.496 1.496 0 0 1 2.12 0l2.124 2.123a1.496 1.496 0 0 1-.333 2.37c.16.246.42.504.685.752z" />
+              <path d="M5.657 4.557a2.5 2.5 0 0 0-.347 3.837l2.108 2.108a2.498 2.498 0 0 0 3.542.007 2.5 2.5 0 0 0-.006-3.543L9.802 5.815c-.07.29-.154.565-.25.774-.036.076-.084.16-.14.25l.842.84c.585.587.59 1.532 0 2.122-.587.585-1.532.59-2.12 0L6.008 7.68a1.496 1.496 0 0 1 .332-2.372c-.16-.245-.42-.503-.685-.75z" />
+            </g>
+          </svg>
+        </a>
+      )}
+    </Comp>
   );
 });
 

beta/src/components/MDX/MDXComponents.tsx

@@ -80,21 +80,11 @@ const Blockquote = ({
   ...props
 }: JSX.IntrinsicElements['blockquote']) => {
   return (
-    <>
-      <blockquote
-        className="mdx-blockquote py-4 px-8 my-8 shadow-inner bg-highlight dark:bg-highlight-dark bg-opacity-50 rounded-lg leading-6 flex relative"
-        {...props}>
-        <span className="block relative">{children}</span>
-      </blockquote>
-      <style jsx global>{`
-        .mdx-blockquote > span > p:first-of-type {
-          margin-bottom: 0;
-        }
-        .mdx-blockquote > span > p:last-of-type {
-          margin-bottom: 1rem;
-        }
-      `}</style>
-    </>
+    <blockquote
+      className="mdx-blockquote py-4 px-8 my-8 shadow-inner bg-highlight dark:bg-highlight-dark bg-opacity-50 rounded-lg leading-6 flex relative"
+      {...props}>
+      <span className="block relative">{children}</span>
+    </blockquote>
   );
 };
 
@@ -274,72 +264,6 @@ function IllustrationBlock({
         <div className="mdx-illustration-block">{images}</div>
       )}
       {author ? <AuthorCredit author={author} authorLink={authorLink} /> : null}
-      <style jsx global>{`
-        .mdx-illustration-block {
-          display: flex;
-          flex-direction: row;
-          flex-wrap: nowrap;
-          justify-content: center;
-          align-content: stretch;
-          align-items: stretch;
-          gap: 42px;
-        }
-        ol.mdx-illustration-block {
-          gap: 60px;
-        }
-        .mdx-illustration-block li {
-          display: flex;
-          align-items: flex-start;
-          align-content: stretch;
-          justify-content: space-around;
-          position: relative;
-          padding: 1rem;
-        }
-        .mdx-illustration-block figure {
-          display: flex;
-          flex-direction: column;
-          align-content: center;
-          align-items: center;
-
-          justify-content: space-between;
-          position: relative;
-          height: 100%;
-        }
-        .mdx-illustration-block li:after {
-          content: ' ';
-          display: block;
-          position: absolute;
-          top: 50%;
-          right: 100%;
-          transform: translateY(-50%);
-          width: 60px;
-          height: 49px;
-          background: center / contain no-repeat url('/images/g_arrow.png');
-        }
-        .mdx-illustration-block li:first-child:after {
-          content: ' ';
-          display: none;
-        }
-        .mdx-illustration-block img {
-          max-height: 250px;
-          width: 100%;
-        }
-        @media (max-width: 680px) {
-          .mdx-illustration-block {
-            flex-direction: column;
-          }
-          .mdx-illustration-block img {
-            max-height: 200px;
-            width: auto;
-          }
-          .mdx-illustration-block li:after {
-            top: 0;
-            left: 50%;
-            right: auto;
-            transform: translateX(-50%) translateY(-100%) rotate(90deg);
-          }
-        }
-      `}</style>
     </div>
   );
 }

beta/src/components/MDX/Sandpack/DownloadButton.tsx

@@ -12,6 +12,7 @@ let supportsImportMap: boolean | void;
 function useSupportsImportMap() {
   function subscribe() {
     // It never updates.
+    return () => {};
   }
   function getCurrentValue() {
     if (supportsImportMap === undefined) {
@@ -24,7 +25,7 @@ function useSupportsImportMap() {
   function getServerSnapshot() {
     return false;
   }
-  // @ts-ignore
+
   return React.useSyncExternalStore(
     subscribe,
     getCurrentValue,

beta/src/components/MDX/Sandpack/Preview.tsx

@@ -61,16 +61,23 @@ export function Preview({
     rawError = null;
   }
 
-  if (lintErrors.length > 0) {
-    if (rawError == null || rawError.title === 'Runtime Exception') {
-      // When there's a lint error, show it -- even over a runtime error.
-      // (However, when there's a build error, we keep showing the build one.)
+  // Memoized because it's fed to debouncing.
+  const firstLintError = React.useMemo(() => {
+    if (lintErrors.length === 0) {
+      return null;
+    } else {
       const {line, column, message} = lintErrors[0];
-      rawError = {
+      return {
         title: 'Lint Error',
         message: `${line}:${column} - ${message}`,
       };
     }
+  }, [lintErrors]);
+
+  if (rawError == null || rawError.title === 'Runtime Exception') {
+    if (firstLintError !== null) {
+      rawError = firstLintError;
+    }
   }
 
   // It changes too fast, causing flicker.

beta/src/components/MDX/Sandpack/SandpackRoot.tsx

@@ -11,7 +11,7 @@ import {createFileMap} from './createFileMap';
 import type {SandpackSetup} from '@codesandbox/sandpack-react';
 
 type SandpackProps = {
-  children: React.ReactChildren;
+  children: React.ReactNode;
   autorun?: boolean;
   setup?: SandpackSetup;
   showDevTools?: boolean;

beta/src/components/MDX/Sandpack/index.tsx

@@ -3,10 +3,9 @@
  */
 
 import * as React from 'react';
-import dynamic from 'next/dynamic';
 import {createFileMap} from './createFileMap';
 
-const SandpackRoot = dynamic(() => import('./SandpackRoot'), {suspense: true});
+const SandpackRoot = React.lazy(() => import('./SandpackRoot'));
 
 const SandpackGlimmer = ({code}: {code: string}) => (
   <div className="sandpack-container my-8">