Merge branch 'main' of https://github.com/reactjs/react.dev into sync…

…-e85b71de

.env.development

@@ -1 +0,0 @@
-SANDPACK_BARE_COMPONENTS=true 

.env.production

@@ -1,2 +1 @@
-NEXT_PUBLIC_GA_TRACKING_ID = 'UA-41298772-4'
-SANDPACK_BARE_COMPONENTS=true 
+NEXT_PUBLIC_GA_TRACKING_ID = 'UA-41298772-4'

next.config.js

@@ -14,9 +14,7 @@ const nextConfig = {
     scrollRestoration: true,
     legacyBrowsers: false,
   },
-  env: {
-    SANDPACK_BARE_COMPONENTS: process.env.SANDPACK_BARE_COMPONENTS,
-  },
+  env: {},
   webpack: (config, {dev, isServer, ...options}) => {
     if (process.env.ANALYZE) {
       const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer');
@@ -35,10 +33,6 @@ const nextConfig = {
 
     const {IgnorePlugin, NormalModuleReplacementPlugin} = require('webpack');
     config.plugins.push(
-      new NormalModuleReplacementPlugin(
-        /^@stitches\/core$/,
-        require.resolve('./src/utils/emptyShim.js')
-      ),
       new NormalModuleReplacementPlugin(
         /^raf$/,
         require.resolve('./src/utils/rafShim.js')

package.json

@@ -22,7 +22,7 @@
     "check-all": "npm-run-all prettier lint:fix tsc"
   },
   "dependencies": {
-    "@codesandbox/sandpack-react": "1.15.5",
+    "@codesandbox/sandpack-react": "2.6.0",
     "@docsearch/css": "3.0.0-alpha.41",
     "@docsearch/react": "3.0.0-alpha.41",
     "@headlessui/react": "^1.7.0",
@@ -36,7 +36,7 @@
     "next-remote-watch": "^1.0.0",
     "parse-numeric-range": "^1.2.0",
     "react": "^0.0.0-experimental-16d053d59-20230506",
-    "react-collapsed": "npm:@gaearon/[email protected]",
+    "react-collapsed": "4.0.4",
     "react-dom": "^0.0.0-experimental-16d053d59-20230506",
     "remark-frontmatter": "^4.0.1",
     "remark-gfm": "^3.0.1"

src/components/Layout/HomeContent.js

@@ -1654,8 +1654,8 @@ function LikeButton({video}) {
     <button
       data-hover="LikeButton"
       className={cn(
-        'outline-none focus:bg-red-50/5 focus:text-red-50 relative flex items-center justify-center w-10 h-10 cursor-pointer rounded-full text-tertiary hover:bg-card active:scale-95 active:bg-red-50/5 active:text-red-50',
-        isLiked && 'text-red-50'
+        'outline-none focus:bg-red-50/5 focus:text-red-50 relative flex items-center justify-center w-10 h-10 cursor-pointer rounded-full hover:bg-card active:scale-95 active:bg-red-50/5 active:text-red-50',
+        isLiked ? 'text-red-50' : 'text-tertiary'
       )}
       aria-label={isLiked ? 'Unsave' : 'Save'}
       onClick={() => {

src/components/Layout/Sidebar/SidebarRouteTree.tsx

@@ -7,7 +7,7 @@ import {useRef, useLayoutEffect, Fragment} from 'react';
 import cn from 'classnames';
 import {useRouter} from 'next/router';
 import {SidebarLink} from './SidebarLink';
-import useCollapse from 'react-collapsed';
+import {useCollapse} from 'react-collapsed';
 import usePendingRoute from 'hooks/usePendingRoute';
 import type {RouteItem} from 'components/Layout/getRouteMeta';
 

src/components/Layout/Toc.tsx

@@ -27,8 +27,7 @@ export function Toc({headings}: {headings: Toc}) {
         <ul className="space-y-2 pb-16">
           {headings.length > 0 &&
             headings.map((h, i) => {
-              if (h.url == null) {
-                // TODO: only log in DEV
+              if (!h.url && process.env.NODE_ENV === 'development') {
                 console.error('Heading does not have URL');
               }
               return (

src/components/MDX/CodeBlock/CodeBlock.tsx

@@ -3,11 +3,14 @@
  */
 
 import cn from 'classnames';
-import {highlightTree, HighlightStyle, tags} from '@codemirror/highlight';
+import {HighlightStyle} from '@codemirror/language';
+import {highlightTree} from '@lezer/highlight';
 import {javascript} from '@codemirror/lang-javascript';
 import {html} from '@codemirror/lang-html';
 import {css} from '@codemirror/lang-css';
 import rangeParser from 'parse-numeric-range';
+import {tags} from '@lezer/highlight';
+
 import {CustomTheme} from '../Sandpack/Themes';
 
 interface InlineHighlight {
@@ -52,7 +55,7 @@ const CodeBlock = function CodeBlock({
   let tokenStarts = new Map();
   let tokenEnds = new Map();
   const highlightTheme = getSyntaxHighlight(CustomTheme);
-  highlightTree(tree, highlightTheme.match, (from, to, className) => {
+  highlightTree(tree, highlightTheme, (from, to, className) => {
     tokenStarts.set(from, className);
     tokenEnds.set(to, className);
   });

src/components/MDX/Sandpack/Console.tsx

@@ -5,7 +5,10 @@ import cn from 'classnames';
 import {useState, useRef, useEffect} from 'react';
 import {IconChevron} from 'components/Icon/IconChevron';
 
-import {SandpackCodeViewer, useSandpack} from '@codesandbox/sandpack-react';
+import {
+  SandpackCodeViewer,
+  useSandpack,
+} from '@codesandbox/sandpack-react/unstyled';
 import type {SandpackMessageConsoleMethods} from '@codesandbox/sandpack-client';
 
 const getType = (

src/components/MDX/Sandpack/CustomPreset.tsx

@@ -7,9 +7,8 @@ import {
   useSandpack,
   useActiveCode,
   SandpackCodeEditor,
-  // SandpackReactDevTools,
   SandpackLayout,
-} from '@codesandbox/sandpack-react';
+} from '@codesandbox/sandpack-react/unstyled';
 import cn from 'classnames';
 
 import {IconChevron} from 'components/Icon/IconChevron';
@@ -19,14 +18,8 @@ import {Preview} from './Preview';
 import {useSandpackLint} from './useSandpackLint';
 
 export const CustomPreset = memo(function CustomPreset({
-  showDevTools,
-  onDevToolsLoad,
-  devToolsLoaded,
   providedFiles,
 }: {
-  showDevTools: boolean;
-  devToolsLoaded: boolean;
-  onDevToolsLoad: () => void;
   providedFiles: Array<string>;
 }) {
   const {lintErrors, lintExtensions} = useSandpackLint();
@@ -41,9 +34,6 @@ export const CustomPreset = memo(function CustomPreset({
   const isExpandable = lineCount > 16;
   return (
     <SandboxShell
-      showDevTools={showDevTools}
-      onDevToolsLoad={onDevToolsLoad}
-      devToolsLoaded={devToolsLoaded}
       providedFiles={providedFiles}
       lintErrors={lintErrors}
       lintExtensions={lintExtensions}
@@ -53,16 +43,11 @@ export const CustomPreset = memo(function CustomPreset({
 });
 
 const SandboxShell = memo(function SandboxShell({
-  showDevTools,
-  devToolsLoaded,
   providedFiles,
   lintErrors,
   lintExtensions,
   isExpandable,
 }: {
-  showDevTools: boolean;
-  devToolsLoaded: boolean;
-  onDevToolsLoad: () => void;
   providedFiles: Array<string>;
   lintErrors: Array<any>;
   lintExtensions: Array<any>;
@@ -81,7 +66,6 @@ const SandboxShell = memo(function SandboxShell({
         <NavigationBar providedFiles={providedFiles} />
         <SandpackLayout
           className={cn(
-            showDevTools && devToolsLoaded && 'sp-layout-devtools',
             !(isExpandable || isExpanded) && 'rounded-b-lg overflow-hidden',
             isExpanded && 'sp-layout-expanded'
           )}>
@@ -123,11 +107,6 @@ const SandboxShell = memo(function SandboxShell({
             </button>
           )}
         </SandpackLayout>
-
-        {/* {showDevTools && (
-          // @ts-ignore TODO(@danilowoz): support devtools
-          <SandpackReactDevTools onLoadModule={onDevToolsLoad} />
-        )} */}
       </div>
     </>
   );

src/components/MDX/Sandpack/DownloadButton.tsx

@@ -3,7 +3,7 @@
  */
 
 import {useSyncExternalStore} from 'react';
-import {useSandpack} from '@codesandbox/sandpack-react';
+import {useSandpack} from '@codesandbox/sandpack-react/unstyled';
 import {IconDownload} from '../../Icon/IconDownload';
 export interface DownloadButtonProps {}
 

src/components/MDX/Sandpack/LoadingOverlay.tsx

@@ -4,7 +4,7 @@ import {
   LoadingOverlayState,
   OpenInCodeSandboxButton,
   useSandpack,
-} from '@codesandbox/sandpack-react';
+} from '@codesandbox/sandpack-react/unstyled';
 import {useEffect} from 'react';
 
 const FADE_ANIMATION_DURATION = 200;

src/components/MDX/Sandpack/NavigationBar.tsx

@@ -15,7 +15,7 @@ import {
   FileTabs,
   useSandpack,
   useSandpackNavigation,
-} from '@codesandbox/sandpack-react';
+} from '@codesandbox/sandpack-react/unstyled';
 import {OpenInCodeSandboxButton} from './OpenInCodeSandboxButton';
 import {ResetButton} from './ResetButton';
 import {DownloadButton} from './DownloadButton';

src/components/MDX/Sandpack/OpenInCodeSandboxButton.tsx

@@ -2,7 +2,7 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-import {UnstyledOpenInCodeSandboxButton} from '@codesandbox/sandpack-react';
+import {UnstyledOpenInCodeSandboxButton} from '@codesandbox/sandpack-react/unstyled';
 import {IconNewPage} from '../../Icon/IconNewPage';
 
 export const OpenInCodeSandboxButton = () => {

src/components/MDX/Sandpack/Preview.tsx

@@ -4,7 +4,7 @@
 
 /* eslint-disable react-hooks/exhaustive-deps */
 import {useRef, useState, useEffect, useMemo, useId} from 'react';
-import {useSandpack, SandpackStack} from '@codesandbox/sandpack-react';
+import {useSandpack, SandpackStack} from '@codesandbox/sandpack-react/unstyled';
 import cn from 'classnames';
 import {ErrorMessage} from './ErrorMessage';
 import {SandpackConsole} from './Console';
@@ -42,14 +42,7 @@ export function Preview({
     null
   );
 
-  let {
-    error: rawError,
-    registerBundler,
-    unregisterBundler,
-    errorScreenRegisteredRef,
-    openInCSBRegisteredRef,
-    loadingScreenRegisteredRef,
-  } = sandpack;
+  let {error: rawError, registerBundler, unregisterBundler} = sandpack;
 
   if (
     rawError &&
@@ -88,12 +81,6 @@ export function Preview({
   const clientId = useId();
   const iframeRef = useRef<HTMLIFrameElement | null>(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?
-  openInCSBRegisteredRef.current = true;
-  errorScreenRegisteredRef.current = true;
-  loadingScreenRegisteredRef.current = true;
-
   const sandpackIdle = sandpack.status === 'idle';
 
   useEffect(function createBundler() {

src/components/MDX/Sandpack/SandpackRoot.tsx

@@ -2,9 +2,9 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-import {Children, useState} from 'react';
+import {Children} from 'react';
 import * as React from 'react';
-import {SandpackProvider} from '@codesandbox/sandpack-react';
+import {SandpackProvider} from '@codesandbox/sandpack-react/unstyled';
 import {SandpackLogLevel} from '@codesandbox/sandpack-client';
 import {CustomPreset} from './CustomPreset';
 import {createFileMap} from './createFileMap';
@@ -13,7 +13,6 @@ import {CustomTheme} from './Themes';
 type SandpackProps = {
   children: React.ReactNode;
   autorun?: boolean;
-  showDevTools?: boolean;
 };
 
 const sandboxStyle = `
@@ -67,8 +66,7 @@ ul {
 `.trim();
 
 function SandpackRoot(props: SandpackProps) {
-  let {children, autorun = true, showDevTools = false} = props;
-  const [devToolsLoaded, setDevToolsLoaded] = useState(false);
+  let {children, autorun = true} = props;
   const codeSnippets = Children.toArray(children) as React.ReactElement[];
   const files = createFileMap(codeSnippets);
 
@@ -90,12 +88,7 @@ function SandpackRoot(props: SandpackProps) {
           bundlerURL: 'https://1e4ad8f7.sandpack-bundler-4bw.pages.dev',
           logLevel: SandpackLogLevel.None,
         }}>
-        <CustomPreset
-          showDevTools={showDevTools}
-          onDevToolsLoad={() => setDevToolsLoaded(true)}
-          devToolsLoaded={devToolsLoaded}
-          providedFiles={Object.keys(files)}
-        />
+        <CustomPreset providedFiles={Object.keys(files)} />
       </SandpackProvider>
     </div>
   );

src/components/MDX/Sandpack/createFileMap.ts

@@ -2,7 +2,7 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-import type {SandpackFile} from '@codesandbox/sandpack-react';
+import type {SandpackFile} from '@codesandbox/sandpack-react/unstyled';
 
 export const createFileMap = (codeSnippets: any) => {
   return codeSnippets.reduce(

src/components/Seo.tsx

@@ -21,19 +21,13 @@ const deployedTranslations = [
   'en',
   'zh-hans',
   'es',
+  'fr',
+  'ja',
   // We'll add more languages when they have enough content.
   // Please DO NOT edit this list without a discussion in the reactjs/react.dev repo.
   // It must be the same between all translations.
 ];
 
-let shouldPreventIndexing = false;
-if (
-  siteConfig.languageCode !== 'en' &&
-  !deployedTranslations.includes(siteConfig.languageCode)
-) {
-  shouldPreventIndexing = true;
-}
-
 function getDomain(languageCode: string): string {
   const subdomain = languageCode === 'en' ? '' : languageCode + '.';
   return subdomain + 'react.dev';
@@ -69,7 +63,6 @@ export const Seo = withRouter(
           href={canonicalUrl.replace(siteDomain, getDomain('en'))}
           hrefLang="x-default"
         />
-        {shouldPreventIndexing && <meta name="robots" content="noindex" />}
         {deployedTranslations.map((languageCode) => (
           <link
             key={'alt-' + languageCode}

src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md

@@ -8,7 +8,7 @@ June 15, 2022 by [Andrew Clark](https://twitter.com/acdlite), [Dan Abramov](http
 
 <Intro>
 
-[React 18](https://reactjs.org/blog/2022/03/29/react-v18) was years in the making, and with it brought valuable lessons for the React team. Its release was the result of many years of research and exploring many paths. Some of those paths were successful; many more were dead-ends that led to new insights. One lesson we’ve learned is that it’s frustrating for the community to wait for new features without having insight into these paths that we’re exploring.
+[React 18](https://react.dev/blog/2022/03/29/react-v18) was years in the making, and with it brought valuable lessons for the React team. Its release was the result of many years of research and exploring many paths. Some of those paths were successful; many more were dead-ends that led to new insights. One lesson we’ve learned is that it’s frustrating for the community to wait for new features without having insight into these paths that we’re exploring.
 
 </Intro>