[Beta] Fewer sync calls

beta/package.json

@@ -35,9 +35,9 @@
     "github-slugger": "^1.3.0",
     "next": "^12.0.10",
     "parse-numeric-range": "^1.2.0",
-    "react": "experimental",
-    "react-collapsed": "3.1.0",
-    "react-dom": "experimental",
+    "react": "0.0.0-experimental-79ed5e18f-20220217",
+    "react-collapsed": "npm:@gaearon/react-collapsed@3.3.0-patched-react-18",
+    "react-dom": "0.0.0-experimental-79ed5e18f-20220217",
     "scroll-into-view-if-needed": "^2.2.25"
   },
   "devDependencies": {

beta/patches/@codesandbox+sandpack-react+0.13.16-experimental.0.patch

@@ -0,0 +1,47 @@
+diff --git a/node_modules/@codesandbox/sandpack-react/dist/cjs/index.js b/node_modules/@codesandbox/sandpack-react/dist/cjs/index.js
+index 50f068a..8b05387 100644
+--- a/node_modules/@codesandbox/sandpack-react/dist/cjs/index.js
++++ b/node_modules/@codesandbox/sandpack-react/dist/cjs/index.js
+@@ -2124,7 +2124,8 @@ var CodeMirror = React11.forwardRef(({
+   const [shouldInitEditor, setShouldInitEditor] = React11.useState(initMode === "immediate");
+   const c = (0, import_classer6.useClasser)("sp");
+   const { listen } = useSandpack();
+-  const ariaId = React11.useRef(id != null ? id : generateRandomId());
++  const reactId = React11.useId();
++  const ariaId = React11.useRef(id != null ? id : reactId);
+   const { isIntersecting } = (0, import_intersection_observer.default)(wrapper, {
+     rootMargin: "600px 0px",
+     threshold: 0.2
+diff --git a/node_modules/@codesandbox/sandpack-react/dist/esm/index.js b/node_modules/@codesandbox/sandpack-react/dist/esm/index.js
+index 53841ee..fdba9e3 100644
+--- a/node_modules/@codesandbox/sandpack-react/dist/esm/index.js
++++ b/node_modules/@codesandbox/sandpack-react/dist/esm/index.js
+@@ -1504,7 +1504,9 @@ var SandpackProvider = class extends PureComponent {
+       }));
+     }
+     const editorState = isEqual(files, this.state.files) ? "pristine" : "dirty";
+-    this.setState({ editorState });
++    if (editorState !== this.state.editorState) {
++      this.setState({ editorState });
++    }
+   }
+   componentWillUnmount() {
+     if (typeof this.unsubscribe === "function") {
+@@ -1816,6 +1818,7 @@ import {
+   createElement as createElement8,
+   forwardRef,
+   useEffect,
++  useId,
+   useImperativeHandle,
+   useRef,
+   useState
+@@ -2082,7 +2085,8 @@ var CodeMirror = forwardRef(({
+   const [shouldInitEditor, setShouldInitEditor] = useState(initMode === "immediate");
+   const c = useClasser6("sp");
+   const { listen } = useSandpack();
+-  const ariaId = useRef(id != null ? id : generateRandomId());
++  const reactId = useId();
++  const ariaId = useRef(id != null ? id : reactId);
+   const { isIntersecting } = useIntersectionObserver(wrapper, {
+     rootMargin: "600px 0px",
+     threshold: 0.2

beta/patches/next+12.0.10.patch

@@ -0,0 +1,23 @@
+diff --git a/node_modules/next/dist/client/index.js b/node_modules/next/dist/client/index.js
+index 73c36a5..94c39a1 100644
+--- a/node_modules/next/dist/client/index.js
++++ b/node_modules/next/dist/client/index.js
+@@ -562,6 +562,9 @@ function clearMarks() {
+     );
+ }
+ function AppContainer({ children  }) {
++    const publicRouter = (0, _router1).makePublicRouterInstance(router)
++    // HACK
++    const memoizedRouter = _react.default.useMemo(() => publicRouter, [publicRouter.asPath])
+     return(/*#__PURE__*/ _react.default.createElement(Container, {
+         fn: (error)=>renderError({
+                 App: CachedApp,
+@@ -569,7 +572,7 @@ function AppContainer({ children  }) {
+             }).catch((err)=>console.error('Error rendering page: ', err)
+             )
+     }, /*#__PURE__*/ _react.default.createElement(_routerContext.RouterContext.Provider, {
+-        value: (0, _router1).makePublicRouterInstance(router)
++        value: memoizedRouter
+     }, /*#__PURE__*/ _react.default.createElement(_headManagerContext.HeadManagerContext.Provider, {
+         value: headManager
+     }, children))));

beta/src/components/Layout/MarkdownPage.tsx

@@ -127,16 +127,21 @@ export function MarkdownPage<
           />
         )}
         <div className="px-5 sm:px-12">
-          <div className="max-w-7xl mx-auto">
-            <MDXContext.Provider value={MDXComponents}>
-              {finalChildren}
-            </MDXContext.Provider>
-          </div>
-          <DocsPageFooter
-            route={route}
-            nextRoute={nextRoute}
-            prevRoute={prevRoute}
-          />
+          <React.Suspense
+            fallback={<div className="h-screen" />}
+            // @ts-ignore
+            unstable_avoidThisFallback={true}>
+            <div className="max-w-7xl mx-auto">
+              <MDXContext.Provider value={MDXComponents}>
+                {finalChildren}
+              </MDXContext.Provider>
+            </div>
+            <DocsPageFooter
+              route={route}
+              nextRoute={nextRoute}
+              prevRoute={prevRoute}
+            />
+          </React.Suspense>
         </div>
       </div>
       <div className="w-full lg:max-w-xs hidden 2xl:block">

beta/src/components/Layout/Sidebar/Sidebar.tsx

@@ -32,23 +32,26 @@ export function Sidebar({isMobileOnly}: {isMobileOnly?: boolean}) {
         isOpen ? 'block z-40' : 'hidden lg:block'
       )}
       aria-hidden={isHidden}>
-      <div className="px-5">
-        <Search />
-      </div>
-      <nav
-        role="navigation"
-        ref={menuRef}
-        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)
-        className="w-full h-screen lg:h-auto flex-grow pr-0 lg:pr-5 pt-6 pb-44 lg:pb-0 lg:py-6 md:pt-4 lg:pt-4 overflow-y-scroll lg:overflow-y-auto scrolling-touch scrolling-gpu">
-        {isMobileSidebar ? (
-          <MobileNav />
-        ) : (
-          <SidebarRouteTree routeTree={routeTree} />
-        )}
-      </nav>
-      <div className="sticky bottom-0 hidden lg:block">
-        <Feedback />
-      </div>
+      {/* @ts-ignore */}
+      <React.Suspense unstable_avoidThisFallback={true} fallback={null}>
+        <div className="px-5">
+          <Search />
+        </div>
+        <nav
+          role="navigation"
+          ref={menuRef}
+          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)
+          className="w-full h-screen lg:h-auto flex-grow pr-0 lg:pr-5 pt-6 pb-44 lg:pb-0 lg:py-6 md:pt-4 lg:pt-4 overflow-y-scroll lg:overflow-y-auto scrolling-touch scrolling-gpu">
+          {isMobileSidebar ? (
+            <MobileNav />
+          ) : (
+            <SidebarRouteTree routeTree={routeTree} />
+          )}
+        </nav>
+        <div className="sticky bottom-0 hidden lg:block">
+          <Feedback />
+        </div>
+      </React.Suspense>
     </aside>
   );
 }

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

@@ -16,6 +16,8 @@ export default React.memo(function CodeBlockWrapper(props: {
   const {children, isFromPackageImport} = props;
   return (
     <React.Suspense
+      // @ts-ignore
+      unstable_expectedLoadTime={1}
       fallback={
         <pre
           className={cn(

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

@@ -64,7 +64,10 @@ export default React.memo(function SandpackWrapper(props: any): any {
   }
 
   return (
-    <React.Suspense fallback={<SandpackGlimmer code={activeCode} />}>
+    <React.Suspense
+      fallback={<SandpackGlimmer code={activeCode} />}
+      // @ts-ignore
+      unstable_expectedLoadTime={1}>
       <SandpackRoot {...props} />
     </React.Suspense>
   );

beta/yarn.lock

@@ -4128,10 +4128,10 @@ raf@^3.4.1:
   dependencies:
     performance-now "^2.1.0"
 
-react-collapsed@3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/react-collapsed/-/react-collapsed-3.1.0.tgz#5fee8db3743d2b1139bddc43bf8cc36df1872d49"
-  integrity sha512-Pr4JqeQVPfkPPJk07Est1QxH5h4TxvHc/Q9AHt87ubxUVMu34hj08a+wx+JWTW7Al0CLwP4YTjZQ5KILprAKGQ==
+"react-collapsed@npm:@gaearon/react-collapsed@3.3.0-patched-react-18":
+  version "3.3.0-patched-react-18"
+  resolved "https://registry.yarnpkg.com/@gaearon/react-collapsed/-/react-collapsed-3.3.0-patched-react-18.tgz#f60725775b9e05f5953fc071166fc7d850a05a50"
+  integrity sha512-yXYBaheQg/1veh1M8lS+KIcQ4fkVIWCHy50/CuoPHovLfK2xUMT4AhA7q9wRbep6XWuRUzqvGaWuem5KfSzTQQ==
   dependencies:
     raf "^3.4.1"
     tiny-warning "^1.0.3"
@@ -4144,14 +4144,14 @@ react-devtools-inline@4.22.1:
     source-map-js "^0.6.2"
     sourcemap-codec "^1.4.8"
 
-react-dom@experimental:
-  version "0.0.0-experimental-13036bfbc-20220121"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-0.0.0-experimental-13036bfbc-20220121.tgz#e86308353e79131695c7964f3d27efd8d9c3df67"
-  integrity sha512-46kguwVBG7W1w5jtdISkM8fLdQzuw5kKo11CvfWCnqSjzJyNf/1tJ56lZ3H41mUkI5AM7sU76J2e9uoXbld3MQ==
+react-dom@0.0.0-experimental-79ed5e18f-20220217:
+  version "0.0.0-experimental-79ed5e18f-20220217"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-0.0.0-experimental-79ed5e18f-20220217.tgz#be3438de7e41b13e49c24c78cdf1a6489adb833a"
+  integrity sha512-38qSW7YNV82kYhjnm4xngMZqSmt3qfYNkuobw0jEE1KiJqHTGAn52N5vvFuYowTCNLhoHXcb6AkLDIsvacdOvA==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
-    scheduler "0.0.0-experimental-13036bfbc-20220121"
+    scheduler "0.0.0-experimental-79ed5e18f-20220217"
 
 react-is@^16.13.1:
   version "16.13.1"
@@ -4163,10 +4163,10 @@ react-is@^17.0.2:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
-react@experimental:
-  version "0.0.0-experimental-13036bfbc-20220121"
-  resolved "https://registry.yarnpkg.com/react/-/react-0.0.0-experimental-13036bfbc-20220121.tgz#88daa7086c93a5d99bb7c2582ea7eb59a44f8a32"
-  integrity sha512-6Pz9rm1GmEWFUGK4jN8oRr3KoT5td/Zdc28nvVT3BcKaaYVcN3oIcd9CV2pj6CdR4V3r38zO3xbnT0YVskmdXg==
+react@0.0.0-experimental-79ed5e18f-20220217:
+  version "0.0.0-experimental-79ed5e18f-20220217"
+  resolved "https://registry.yarnpkg.com/react/-/react-0.0.0-experimental-79ed5e18f-20220217.tgz#25ac0fcfe80879fbbe17b97bed1badd72e377eb0"
+  integrity sha512-nrfQLPh5l2wNva+hoeVMosPpgIevR3RVz2Hm8AY0GZ12wFk4OyQv7pu8+nBwzHTEsvZPhEqpskiJGxCtnd0sqg==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
@@ -4478,10 +4478,10 @@ safe-buffer@~5.1.1:
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
   integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
 
-scheduler@0.0.0-experimental-13036bfbc-20220121:
-  version "0.0.0-experimental-13036bfbc-20220121"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.0.0-experimental-13036bfbc-20220121.tgz#4c0bb55523a4a01d7643ef0c3c3641cd24e00765"
-  integrity sha512-JClqq9+auS4rrr10SqKiGTWdK6/RQ1qhWwEt5IhrM5fHbh7QOuBv4wZwgO9elZBQwzYMYpz25rMS2wYe3ETpOA==
+scheduler@0.0.0-experimental-79ed5e18f-20220217:
+  version "0.0.0-experimental-79ed5e18f-20220217"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.0.0-experimental-79ed5e18f-20220217.tgz#4da46ae78ffa18457603c93969c3f927ffe99858"
+  integrity sha512-mjc9Z8k+8HPcPPz1/Oy0bBRKlaxMRkC6hhg3St2PHZAThJws+gRN31Yhv+u8Mlja3hd27fTINQU5OuRIEtykiQ==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"