Merge branch 'main' into sacaling-up-with-reducer-and-context

Author: carburo

README.md

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

TRANSLATION.md

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

beta/.env.development

@@ -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/.env.production

@@ -22,7 +22,7 @@
     "check-all": "npm-run-all prettier lint:fix tsc"
   },
   "dependencies": {
-    "@codesandbox/sandpack-react": "1.7.2",
+    "@codesandbox/sandpack-react": "1.15.5",
     "@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": {
@@ -66,7 +67,7 @@
     "eslint-plugin-import": "2.x",
     "eslint-plugin-jsx-a11y": "6.x",
     "eslint-plugin-react": "7.x",
-    "eslint-plugin-react-hooks": "experimental",
+    "eslint-plugin-react-hooks": "^0.0.0-experimental-fabef7a6b-20221215",
     "fs-extra": "^9.0.1",
     "globby": "^11.0.1",
     "gray-matter": "^4.0.2",

beta/next.config.js

@@ -0,0 +1,30 @@
+diff --git a/node_modules/@codemirror/lang-javascript/dist/index.cjs b/node_modules/@codemirror/lang-javascript/dist/index.cjs
+index 4475e4f..e1255c9 100644
+--- a/node_modules/@codemirror/lang-javascript/dist/index.cjs
++++ b/node_modules/@codemirror/lang-javascript/dist/index.cjs
+@@ -135,7 +135,9 @@ const javascriptLanguage = language.LRLanguage.define({
+                 JSXText: highlight.tags.content,
+                 "JSXStartTag JSXStartCloseTag JSXSelfCloseEndTag JSXEndTag": highlight.tags.angleBracket,
+                 "JSXIdentifier JSXNameSpacedName": highlight.tags.tagName,
+-                "JSXAttribute/JSXIdentifier JSXAttribute/JSXNameSpacedName": highlight.tags.attributeName
++                "JSXAttribute/JSXIdentifier JSXAttribute/JSXNameSpacedName": highlight.tags.attributeName,
++                "JSXAttribute/JSXLowerIdentifier JSXAttribute/JSXNameSpacedName": highlight.tags.attributeName,
++                "JSXBuiltin/JSXIdentifier": highlight.tags.standard(highlight.tags.tagName)
+             })
+         ]
+     }),
+diff --git a/node_modules/@codemirror/lang-javascript/dist/index.js b/node_modules/@codemirror/lang-javascript/dist/index.js
+index d089f6b..db09ea6 100644
+--- a/node_modules/@codemirror/lang-javascript/dist/index.js
++++ b/node_modules/@codemirror/lang-javascript/dist/index.js
+@@ -131,7 +131,9 @@ const javascriptLanguage = /*@__PURE__*/LRLanguage.define({
+                 JSXText: tags.content,
+                 "JSXStartTag JSXStartCloseTag JSXSelfCloseEndTag JSXEndTag": tags.angleBracket,
+                 "JSXIdentifier JSXNameSpacedName": tags.tagName,
+-                "JSXAttribute/JSXIdentifier JSXAttribute/JSXNameSpacedName": tags.attributeName
++                "JSXAttribute/JSXIdentifier JSXAttribute/JSXNameSpacedName": tags.attributeName,
++                "JSXAttribute/JSXLowerIdentifier JSXAttribute/JSXNameSpacedName": tags.attributeName,
++                "JSXBuiltin/JSXIdentifier": tags.standard(tags.tagName),
+             })
+         ]
+     }),

beta/package.json

@@ -10,7 +10,7 @@ function Breadcrumbs() {
   const {breadcrumbs} = useRouteMeta();
   if (!breadcrumbs) return null;
   return (
-    <div className="flex">
+    <div className="flex flex-wrap">
       {breadcrumbs.map(
         (crumb, i) =>
           crumb.path && (

beta/patches/@codemirror+lang-javascript+0.19.6.patch

@@ -8,10 +8,11 @@ export const IconGitHub = memo<JSX.IntrinsicElements['svg']>(
   function IconGitHub(props) {
     return (
       <svg
-        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+        width="1.33em"
+        height="1.33em"
+        viewBox="0 -2 24 24"
         fill="currentColor"
-        height="1em"
-        viewBox="0 0 20 20"
         {...props}>
         <path d="M10 0a10 10 0 0 0-3.16 19.49c.5.1.68-.22.68-.48l-.01-1.7c-2.78.6-3.37-1.34-3.37-1.34-.46-1.16-1.11-1.47-1.11-1.47-.9-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.9 1.52 2.34 1.08 2.91.83.1-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.94 0-1.1.39-1.99 1.03-2.69a3.6 3.6 0 0 1 .1-2.64s.84-.27 2.75 1.02a9.58 9.58 0 0 1 5 0c1.91-1.3 2.75-1.02 2.75-1.02.55 1.37.2 2.4.1 2.64.64.7 1.03 1.6 1.03 2.69 0 3.84-2.34 4.68-4.57 4.93.36.31.68.92.68 1.85l-.01 2.75c0 .26.18.58.69.48A10 10 0 0 0 10 0"></path>
       </svg>

beta/patches/@codesandbox+sandpack-react+1.15.5.patch

@@ -0,0 +1,25 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {memo} from 'react';
+
+export const IconLink = memo<JSX.IntrinsicElements['svg']>(function IconLink(
+  props
+) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1.33em"
+      height="1.33em"
+      viewBox="0 -2 24 24"
+      fill="currentColor"
+      {...props}>
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244"
+      />
+    </svg>
+  );
+});

beta/patches/@lezer+javascript+0.15.2.patch

@@ -4,8 +4,8 @@
 
 import {memo} from 'react';
 
-export const IconGotcha = memo<JSX.IntrinsicElements['svg']>(
-  function IconGotcha({className}) {
+export const IconPitfall = memo<JSX.IntrinsicElements['svg']>(
+  function IconPitfall({className}) {
     return (
       <svg
         className={className}

beta/public/images/docs/illustrations/i_puritea-recipe.png

@@ -9,6 +9,7 @@ import ButtonLink from 'components/ButtonLink';
 import {ExternalLink} from 'components/ExternalLink';
 import {IconFacebookCircle} from 'components/Icon/IconFacebookCircle';
 import {IconTwitter} from 'components/Icon/IconTwitter';
+import {IconGitHub} from 'components/Icon/IconGitHub';
 import {IconNavArrow} from 'components/Icon/IconNavArrow';
 
 export function Footer() {
@@ -111,11 +112,13 @@ export function Footer() {
               </FooterLink>
             </div>
             <div className="flex flex-col">
-              <FooterLink href="/apis/react" isHeader={true}>
+              <FooterLink href="/reference/react" isHeader={true}>
                 API Reference
               </FooterLink>
-              <FooterLink href="/apis/react">React APIs</FooterLink>
-              <FooterLink href="/apis/react-dom">React DOM APIs</FooterLink>
+              <FooterLink href="/reference/react">React APIs</FooterLink>
+              <FooterLink href="/reference/react-dom">
+                React DOM APIs
+              </FooterLink>
             </div>
             <div className="flex flex-col sm:col-start-2 xl:col-start-4">
               <FooterLink href="/" isHeader={true}>
@@ -124,12 +127,13 @@ export function Footer() {
               <FooterLink href="https://github.com/facebook/react/blob/main/CODE_OF_CONDUCT.md">
                 Code of Conduct
               </FooterLink>
-              <FooterLink href="/community/acknowledgements">
+              <FooterLink href="/learn/acknowledgements">
                 Acknowledgements
               </FooterLink>
-              <FooterLink href="/community/meet-the-team">
-                Meet the Team
+              <FooterLink href="/learn/docs-contributors">
+                Docs Contributors
               </FooterLink>
+              <FooterLink href="/learn/meet-the-team">Meet the Team</FooterLink>
               <FooterLink href="https://reactjs.org/blog">Blog</FooterLink>
               {/* <FooterLink href="/">Community Resources</FooterLink> */}
             </div>
@@ -160,6 +164,12 @@ export function Footer() {
                   className={socialLinkClasses}>
                   <IconTwitter />
                 </ExternalLink>
+                <ExternalLink
+                  aria-label="React on Github"
+                  href="https://github.com/facebook/react"
+                  className={socialLinkClasses}>
+                  <IconGitHub />
+                </ExternalLink>
               </div>
             </div>
           </div>

beta/public/images/docs/react-devtools-usedebugvalue.png

@@ -3,12 +3,16 @@
  */
 
 import * as React from 'react';
+import {useRouter} from 'next/router';
 import {DocsPageFooter} from 'components/DocsFooter';
 import {Seo} from 'components/Seo';
 import PageHeading from 'components/PageHeading';
 import {useRouteMeta} from './useRouteMeta';
+import {useActiveSection} from '../../hooks/useActiveSection';
 import {TocContext} from '../MDX/TocContext';
 
+import(/* webpackPrefetch: true */ '../MDX/CodeBlock/CodeBlock');
+
 export interface MarkdownProps<Frontmatter> {
   meta: Frontmatter & {description?: string};
   children?: React.ReactNode;
@@ -23,13 +27,10 @@ export function MarkdownPage<
   T extends {title: string; status?: string} = {title: string; status?: string}
 >({children, meta, toc}: MarkdownProps<T>) {
   const {route, nextRoute, prevRoute} = useRouteMeta();
+  const section = useActiveSection();
   const title = meta.title || route?.title || '';
   const description = meta.description || route?.description || '';
-
-  if (!route) {
-    console.error('This page was not added to one of the sidebar JSON files.');
-  }
-  const isHomePage = route?.path === '/';
+  const isHomePage = section === 'home';
   return (
     <>
       <div className="pl-0">