Merge branch 'main' into pr/Radapls/610

Author: carburo

beta/package.json

@@ -67,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/patches/@codemirror+lang-javascript+0.19.6.patch

@@ -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/patches/@codesandbox+sandpack-react+1.15.5.patch

@@ -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/@lezer+javascript+0.15.2.patch

@@ -112,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}>

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

@@ -20,7 +20,7 @@ import {SidebarContext} from 'components/Layout/useRouteMeta';
 import {SidebarRouteTree} from '../Sidebar/SidebarRouteTree';
 import type {RouteItem} from '../useRouteMeta';
 import sidebarLearn from '../../../sidebarLearn.json';
-import sidebarAPIs from '../../../sidebarAPIs.json';
+import sidebarReference from '../../../sidebarReference.json';
 
 declare global {
   interface Window {
@@ -117,8 +117,8 @@ export default function Nav() {
       case 'learn':
         routeTree = sidebarLearn as RouteItem;
         break;
-      case 'apis':
-        routeTree = sidebarAPIs as RouteItem;
+      case 'reference':
+        routeTree = sidebarReference as RouteItem;
         break;
     }
   }
@@ -185,7 +185,7 @@ export default function Nav() {
       });
   }, [showFeedback]);
 
-  function selectTab(nextTab: 'learn' | 'apis') {
+  function selectTab(nextTab: 'learn' | 'reference') {
     setTab(nextTab);
     scrollParentRef.current!.scrollTop = 0;
   }
@@ -214,7 +214,7 @@ export default function Nav() {
             </a>
           </NextLink>
           <div className="lg:w-full leading-loose hidden sm:flex flex-initial items-center h-auto pr-5 lg:pr-5 pt-0.5">
-            <div className="px-1 mb-px bg-highlight dark:bg-highlight-dark rounded text-link dark:text-link-dark uppercase font-bold tracking-wide text-xs whitespace-nowrap">
+            <div className="px-1 mb-px bg-highlight dark:bg-highlight-dark rounded uppercase text-link dark:text-link-dark font-bold tracking-wide text-xs whitespace-nowrap">
               Beta
             </div>
           </div>
@@ -241,14 +241,19 @@ export default function Nav() {
             </button>
           </div>
         </div>
+        {!isOpen && (
+          <div className="hidden lg:block sm:pt-10 lg:pt-4">
+            <Search />
+          </div>
+        )}
         <div className="px-0 pt-2 w-full 2xl:max-w-xs hidden lg:flex items-center self-center border-b-0 lg:border-b border-border dark:border-border-dark">
           <NavLink
             href="/learn"
             isActive={section === 'learn' || section === 'home'}>
             Aprende
           </NavLink>
-          <NavLink href="/apis/react" isActive={section === 'apis'}>
-            API
+          <NavLink href="/reference/react" isActive={section === 'reference'}>
+            Referencia
           </NavLink>
         </div>
         <div className="flex my-4 h-10 mx-0 w-full lg:hidden justify-end lg:max-w-sm">
@@ -313,9 +318,9 @@ export default function Nav() {
             Aprende
           </TabButton>
           <TabButton
-            isActive={tab === 'apis'}
-            onClick={() => selectTab('apis')}>
-            API
+            isActive={tab === 'reference'}
+            onClick={() => selectTab('reference')}>
+            Referencia
           </TabButton>
         </div>
       )}
@@ -328,11 +333,6 @@ export default function Nav() {
             `lg:grow lg:flex flex-col w-full pb-8 lg:pb-0 lg:max-w-xs z-10`,
             isOpen ? 'block z-40' : 'hidden lg:block'
           )}>
-          {!isOpen && (
-            <div className="px-5 sm:pt-10 lg:pt-4">
-              <Search />
-            </div>
-          )}
           <nav
             role="navigation"
             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)

beta/public/images/tutorial/board-filled-with-ones.png

@@ -12,7 +12,7 @@ import {Footer} from './Footer';
 import {Toc} from './Toc';
 import SocialBanner from '../SocialBanner';
 import sidebarLearn from '../../sidebarLearn.json';
-import sidebarAPIs from '../../sidebarAPIs.json';
+import sidebarReference from '../../sidebarReference.json';
 import type {TocItem} from 'components/MDX/TocContext';
 
 interface PageProps {
@@ -25,8 +25,8 @@ export function Page({children, toc}: PageProps) {
   const section = useActiveSection();
   let routeTree = sidebarLearn as RouteItem;
   switch (section) {
-    case 'apis':
-      routeTree = sidebarAPIs as RouteItem;
+    case 'reference':
+      routeTree = sidebarReference as RouteItem;
       break;
   }
   return (

beta/public/images/tutorial/board-filled-with-value.png

@@ -100,7 +100,10 @@ export function SidebarRouteTree({
   return (
     <ul>
       {currentRoutes.map(
-        ({path, title, routes, wip, heading, hasSeparator}) => {
+        (
+          {path, title, routes, wip, heading, hasSectionHeader, sectionHeader},
+          index
+        ) => {
           const pagePath = path && removeFromLast(path, '.');
           const selected = slug === pagePath;
 
@@ -155,15 +158,22 @@ export function SidebarRouteTree({
               </li>
             );
           }
-
-          if (hasSeparator) {
+          if (hasSectionHeader) {
             return (
-              <Fragment key={`${title}-${path}-${level}-separator`}>
-                <li
-                  role="separator"
-                  className="my-2 ml-5 border-b border-border dark:border-border-dark"
-                />
-                {listItem}
+              <Fragment key={`${sectionHeader}-${level}-separator`}>
+                {index !== 0 && (
+                  <li
+                    role="separator"
+                    className="mt-4 mb-2 ml-5 border-b border-border dark:border-border-dark"
+                  />
+                )}
+                <h3
+                  className={cn(
+                    'mb-1 text-sm font-bold ml-5 text-gray-400 dark:text-gray-500',
+                    index !== 0 && 'mt-2'
+                  )}>
+                  {sectionHeader}
+                </h3>
               </Fragment>
             );
           } else {

beta/public/images/tutorial/codesandbox-devtools.png

@@ -34,8 +34,10 @@ export interface RouteItem {
   wip?: boolean;
   /** List of sub-routes */
   routes?: RouteItem[];
-  /** Adds a separator above the route item */
-  hasSeparator?: boolean;
+  /** Adds a section header above the route item */
+  hasSectionHeader?: boolean;
+  /** Title of section header */
+  sectionHeader?: string;
 }
 
 export interface Routes {

beta/public/images/tutorial/devtools-select.gif

@@ -3,11 +3,10 @@
  */
 
 import cn from 'classnames';
-import {highlightTree} from '@codemirror/highlight';
+import {highlightTree, HighlightStyle, tags} from '@codemirror/highlight';
 import {javascript} from '@codemirror/lang-javascript';
 import {html} from '@codemirror/lang-html';
 import {css} from '@codemirror/lang-css';
-import {HighlightStyle, tags} from '@codemirror/highlight';
 import rangeParser from 'parse-numeric-range';
 import {CustomTheme} from '../Sandpack/Themes';
 
@@ -233,7 +232,7 @@ function getSyntaxHighlight(theme: any): HighlightStyle {
       class: classNameToken('static'),
     },
     {
-      tag: tags.tagName,
+      tag: tags.standard(tags.tagName),
       class: classNameToken('tag'),
     },
     {tag: tags.variableName, class: classNameToken('plain')},
@@ -244,7 +243,7 @@ function getSyntaxHighlight(theme: any): HighlightStyle {
     },
     {
       // Highlight function definition differently (eg: functional component def in React)
-      tag: tags.definition(tags.function(tags.variableName)),
+      tag: [tags.definition(tags.function(tags.variableName)), tags.tagName],
       class: classNameToken('definition'),
     },
     {

beta/public/images/tutorial/devtools.png

@@ -58,7 +58,8 @@ function ConsoleBlock({level = 'error', children}: ConsoleBlockProps) {
         className={cn(
           'flex px-4 pt-4 pb-6 items-center content-center font-mono text-code rounded-b-md',
           {
-            'bg-red-30 text-red-40 bg-opacity-10': level === 'error',
+            'bg-red-30 text-red-50 dark:text-red-30 bg-opacity-5':
+              level === 'error',
             'bg-yellow-5 text-yellow-50': level === 'warning',
             'bg-gray-5 text-secondary dark:text-secondary-dark':
               level === 'info',

beta/public/images/tutorial/empty-board.png

@@ -28,20 +28,17 @@ function ExpandableExample({children, excerpt, type}: ExpandableExampleProps) {
   const isExample = type === 'Example';
   const id = children[0].props.id;
 
-  const queuedExpandRef = useRef<boolean>(true);
   const {asPath} = useRouter();
-  // init as expanded to prevent flash
-  const [isExpanded, setIsExpanded] = useState(true);
+  const shouldAutoExpand = id === asPath.split('#')[1];
+  const queuedExpandRef = useRef<boolean>(shouldAutoExpand);
+  const [isExpanded, setIsExpanded] = useState(false);
 
-  // asPath would mismatch between server and client, reset here instead of put it into init state
   useEffect(() => {
     if (queuedExpandRef.current) {
       queuedExpandRef.current = false;
-      if (id !== asPath.split('#')[1]) {
-        setIsExpanded(false);
-      }
+      setIsExpanded(true);
     }
-  }, [asPath, id]);
+  }, []);
 
   return (
     <details

beta/public/images/tutorial/nine-x-filled-squares.png

@@ -21,15 +21,15 @@ function HomepageHero() {
       </div>
       <section className="my-8 sm:my-10 grid grid-cols-1 lg:grid-cols-2 gap-x-8 gap-y-4">
         <div className="flex flex-col justify-center">
-          <YouWillLearnCard title="Learn React" path="/learn">
+          <YouWillLearnCard title="Quick Start" path="/learn">
             <p>
               Learn how to think in React with step-by-step explanations and
               interactive examples.
             </p>
           </YouWillLearnCard>
         </div>
         <div className="flex flex-col justify-center">
-          <YouWillLearnCard title="API Reference" path="/apis/react">
+          <YouWillLearnCard title="API Reference" path="/reference/react">
             <p>
               Look up the API of React Hooks, and see their shape with
               color-coded signatures.

beta/public/images/tutorial/number-filled-board.png

@@ -72,7 +72,7 @@ const UL = (p: JSX.IntrinsicElements['ul']) => (
 );
 
 const Divider = () => (
-  <hr className="my-6 block border-b border-border dark:border-border-dark" />
+  <hr className="my-6 block border-b border-t-0 border-border dark:border-border-dark" />
 );
 const Wip = ({children}: {children: React.ReactNode}) => (
   <ExpandableCallout type="wip">{children}</ExpandableCallout>
@@ -325,6 +325,9 @@ function calculateNestedToc(toc: Toc): NestedTocRoot {
 function InlineToc() {
   const toc = useContext(TocContext);
   const root = useMemo(() => calculateNestedToc(toc), [toc]);
+  if (root.children.length < 2) {
+    return null;
+  }
   return <InlineTocItem items={root.children} />;
 }
 

beta/public/images/tutorial/o-replaces-x.gif

@@ -109,6 +109,9 @@ export const SandpackConsole = ({visible}: {visible: boolean}) => {
         setLogs((prev) => {
           const newLogs = message.log
             .filter((consoleData) => {
+              if (!consoleData.method) {
+                return false;
+              }
               if (
                 typeof consoleData.data[0] === 'string' &&
                 consoleData.data[0].indexOf('The above error occurred') !== -1

beta/public/images/tutorial/react-starter-code-codesandbox.png

@@ -74,7 +74,7 @@ function SandpackRoot(props: SandpackProps) {
 
   files['/styles.css'] = {
     code: [sandboxStyle, files['/styles.css']?.code ?? ''].join('\n\n'),
-    hidden: true,
+    hidden: !files['/styles.css']?.visible,
   };
 
   return (

beta/public/images/tutorial/tictac-adding-x-s.gif

@@ -155,7 +155,7 @@ export function Search({
 
       <button
         type="button"
-        className="hidden md:flex relative pl-4 pr-0.5 py-1 h-10 bg-secondary-button dark:bg-gray-80 outline-none focus:ring focus:outline-none betterhover:hover:bg-opacity-80 pointer items-center shadow-inner text-left w-full text-gray-30 rounded-lg align-middle text-sm"
+        className="hidden md:flex relative pl-4 pr-1 py-1 h-10 bg-secondary-button dark:bg-gray-80 outline-none focus:ring focus:outline-none betterhover:hover:bg-opacity-80 pointer items-center shadow-inner text-left w-full text-gray-30 rounded-md align-middle text-sm"
         onClick={onOpen}>
         <IconSearch className="mr-3 align-middle text-gray-30 shrink-0 group-betterhover:hover:text-gray-70" />
         Search