Merge branch 'main' of github.com:reactjs/reactjs.org

Author: carburo

beta/.env.development

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

beta/.env.production

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

beta/next.config.js

@@ -2,7 +2,6 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-const path = require('path');
 const redirects = require('./src/redirects.json');
 
 /**
@@ -17,6 +16,9 @@ const nextConfig = {
     legacyBrowsers: false,
     browsersListForSwc: true,
   },
+  env: {
+    SANDPACK_BARE_COMPONENTS: process.env.SANDPACK_BARE_COMPONENTS,
+  },
   async redirects() {
     return redirects.redirects;
   },
@@ -49,8 +51,16 @@ const nextConfig = {
     const {IgnorePlugin, NormalModuleReplacementPlugin} = require('webpack');
     config.plugins.push(
       new NormalModuleReplacementPlugin(
-        /@codemirror\/lang-markdown/,
-        require.resolve('./src/utils/codemirrorMarkdownShim.js')
+        /^@stitches\/core$/,
+        require.resolve('./src/utils/emptyShim.js')
+      ),
+      new NormalModuleReplacementPlugin(
+        /^raf$/,
+        require.resolve('./src/utils/rafShim.js')
+      ),
+      new NormalModuleReplacementPlugin(
+        /^process$/,
+        require.resolve('./src/utils/processShim.js')
       ),
       new IgnorePlugin({
         checkResource(resource, context) {

beta/package.json

@@ -22,7 +22,7 @@
     "check-all": "npm-run-all prettier lint:fix tsc"
   },
   "dependencies": {
-    "@codesandbox/sandpack-react": "1.7.2",
+    "@codesandbox/sandpack-react": "1.14.1",
     "@docsearch/css": "3.0.0-alpha.41",
     "@docsearch/react": "3.0.0-alpha.41",
     "@headlessui/react": "^1.7.0",
@@ -38,6 +38,7 @@
     "react": "0.0.0-experimental-cb5084d1c-20220924",
     "react-collapsed": "npm:@gaearon/[email protected]",
     "react-dom": "0.0.0-experimental-cb5084d1c-20220924",
+    "remark-frontmatter": "^4.0.1",
     "remark-gfm": "^3.0.1"
   },
   "devDependencies": {

beta/src/components/Layout/MarkdownPage.tsx

@@ -9,6 +9,8 @@ import PageHeading from 'components/PageHeading';
 import {useRouteMeta} from './useRouteMeta';
 import {TocContext} from '../MDX/TocContext';
 
+import(/* webpackPrefetch: true */ '../MDX/CodeBlock/CodeBlock');
+
 export interface MarkdownProps<Frontmatter> {
   meta: Frontmatter & {description?: string};
   children?: React.ReactNode;

beta/src/components/MDX/Challenges/Navigation.tsx

@@ -71,9 +71,10 @@ export function Navigation({
 
   useEffect(() => {
     handleResize();
-    window.addEventListener('resize', debounce(handleResize, 200));
+    const debouncedHandleResize = debounce(handleResize, 200);
+    window.addEventListener('resize', debouncedHandleResize);
     return () => {
-      window.removeEventListener('resize', handleResize);
+      window.removeEventListener('resize', debouncedHandleResize);
     };
   }, [handleResize]);
 

beta/src/components/MDX/ConsoleBlock.tsx

@@ -38,7 +38,7 @@ function ConsoleBlock({level = 'error', children}: ConsoleBlockProps) {
   }
 
   return (
-    <div className="mb-4" translate="no">
+    <div className="mb-4 text-secondary" translate="no">
       <div className="flex w-full rounded-t-lg bg-gray-200 dark:bg-gray-80">
         <div className="px-4 py-2 border-gray-300 dark:border-gray-90 border-r">
           <Box className="bg-gray-300 dark:bg-gray-90" width="15px" />

beta/src/components/MDX/ExpandableCallout.tsx

@@ -6,16 +6,25 @@ import {useRef} from 'react';
 import * as React from 'react';
 import cn from 'classnames';
 import {IconNote} from '../Icon/IconNote';
+import {IconWarning} from '../Icon/IconWarning';
 import {IconGotcha} from '../Icon/IconGotcha';
 
-type CalloutVariants = 'gotcha' | 'note' | 'wip';
+type CalloutVariants = 'deprecated' | 'gotcha' | 'note' | 'wip';
 
 interface ExpandableCalloutProps {
   children: React.ReactNode;
   type: CalloutVariants;
 }
 
 const variantMap = {
+  deprecated: {
+    title: 'Deprecated',
+    Icon: IconWarning,
+    containerClasses: 'bg-red-5 dark:bg-red-60 dark:bg-opacity-20',
+    textColor: 'text-red-50 dark:text-red-40',
+    overlayGradient:
+      'linear-gradient(rgba(249, 247, 243, 0), rgba(249, 247, 243, 1)',
+  },
   note: {
     title: 'Nota',
     Icon: IconNote,

beta/src/components/MDX/MDXComponents.tsx

@@ -79,6 +79,9 @@ const Wip = ({children}: {children: React.ReactNode}) => (
 const Gotcha = ({children}: {children: React.ReactNode}) => (
   <ExpandableCallout type="gotcha">{children}</ExpandableCallout>
 );
+const Deprecated = ({children}: {children: React.ReactNode}) => (
+  <ExpandableCallout type="deprecated">{children}</ExpandableCallout>
+);
 const Note = ({children}: {children: React.ReactNode}) => (
   <ExpandableCallout type="note">{children}</ExpandableCallout>
 );
@@ -369,6 +372,7 @@ export const MDXComponents = {
     return <div className="max-w-4xl ml-0 2xl:mx-auto">{children}</div>;
   },
   Gotcha,
+  Deprecated,
   Wip,
   HomepageHero,
   Illustration,

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

@@ -181,14 +181,14 @@ export const SandpackConsole = ({visible}: {visible: boolean}) => {
         </button>
       </div>
       {isExpanded && (
-        <div className="w-full h-full border-y bg-white dark:border-gray-700 dark:bg-gray-95 min-h-[28px] console">
+        <div className="w-full h-full border-t bg-white dark:border-gray-700 dark:bg-gray-95 min-h-[28px] console">
           <div className="max-h-40 h-auto overflow-auto" ref={wrapperRef}>
             {logs.map(({data, id, method}) => {
               return (
                 <div
                   key={id}
                   className={cn(
-                    'last:border-none border-b dark:border-gray-700 text-md p-1 pl-2 leading-6 font-mono min-h-[32px] whitespace-pre-wrap',
+                    'first:border-none border-t dark:border-gray-700 text-md p-1 pl-2 leading-6 font-mono min-h-[32px] whitespace-pre-wrap',
                     `console-${getType(method)}`,
                     getColor(method)
                   )}>

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

@@ -111,7 +111,7 @@ const SandboxShell = memo(function SandboxShell({
                   }
                 }
               }}>
-              <span className="flex p-2 focus:outline-none text-primary dark:text-primary-dark">
+              <span className="flex p-2 focus:outline-none text-primary dark:text-primary-dark leading-[20px]">
                 <IconChevron
                   className="inline mr-1.5 text-xl"
                   displayDirection={isExpanded ? 'up' : 'down'}

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

@@ -125,7 +125,7 @@ export function NavigationBar({providedFiles}: {providedFiles: Array<string>}) {
                   // space that's taken by the (invisible) tab list.
                   <button
                     className={cn(
-                      'absolute top-0 left-0',
+                      'absolute top-0 left-[2px]',
                       !showDropdown && 'invisible'
                     )}>
                     <span

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

@@ -11,7 +11,7 @@ export const OpenInCodeSandboxButton = () => {
       className="text-sm text-primary dark:text-primary-dark inline-flex items-center hover:text-link duration-100 ease-in transition mx-1 ml-2 md:ml-1"
       title="Open in CodeSandbox">
       <IconNewPage
-        className="inline ml-1 mr-1 relative"
+        className="inline ml-1 mr-1 relative top-[1px]"
         width="1em"
         height="1em"
       />

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

@@ -9,7 +9,6 @@ import {SandpackLogLevel} from '@codesandbox/sandpack-client';
 import {CustomPreset} from './CustomPreset';
 import {createFileMap} from './createFileMap';
 import {CustomTheme} from './Themes';
-import type {SandpackSetup} from '@codesandbox/sandpack-react';
 
 type SandpackProps = {
   children: React.ReactNode;
@@ -78,19 +77,11 @@ function SandpackRoot(props: SandpackProps) {
     hidden: true,
   };
 
-  let setup: SandpackSetup | undefined;
-  if (files['/package.json']) {
-    setup = {
-      dependencies: JSON.parse(files['/package.json'].code).dependencies,
-    };
-  }
-
   return (
-    <div className="sandpack sandpack--playground sandbox my-8">
+    <div className="sandpack sandpack--playground my-8">
       <SandpackProvider
         template="react"
         files={files}
-        customSetup={setup}
         theme={CustomTheme}
         options={{
           autorun,

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

@@ -8,7 +8,7 @@ import {createFileMap} from './createFileMap';
 const SandpackRoot = lazy(() => import('./SandpackRoot'));
 
 const SandpackGlimmer = ({code}: {code: string}) => (
-  <div className="sandpack sandpack--playground sandbox my-8">
+  <div className="sandpack sandpack--playground my-8">
     <div className="sp-wrapper">
       <div className="shadow-lg dark:shadow-lg-dark rounded-lg">
         <div className="bg-wash h-10 dark:bg-card-dark flex justify-between items-center relative z-10 border-b border-border dark:border-border-dark rounded-t-lg rounded-b-none">