From f4b7cc2853c0eef85b22d9bde140f4819ab4bae9 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Fri, 18 Feb 2022 05:41:39 +0000 Subject: [PATCH 1/9] Fix sync updates in third party --- beta/package.json | 2 +- ...ox+sandpack-react+0.13.16-experimental.0.patch | 15 +++++++++++++++ beta/yarn.lock | 8 ++++---- 3 files changed, 20 insertions(+), 5 deletions(-) create mode 100644 beta/patches/@codesandbox+sandpack-react+0.13.16-experimental.0.patch diff --git a/beta/package.json b/beta/package.json index 84bfad19e7b..3a674513d6d 100644 --- a/beta/package.json +++ b/beta/package.json @@ -36,7 +36,7 @@ "next": "^12.0.10", "parse-numeric-range": "^1.2.0", "react": "experimental", - "react-collapsed": "3.1.0", + "react-collapsed": "npm:@gaearon/react-collapsed@3.3.0-patched-react-18", "react-dom": "experimental", "scroll-into-view-if-needed": "^2.2.25" }, diff --git a/beta/patches/@codesandbox+sandpack-react+0.13.16-experimental.0.patch b/beta/patches/@codesandbox+sandpack-react+0.13.16-experimental.0.patch new file mode 100644 index 00000000000..c97dd6dc983 --- /dev/null +++ b/beta/patches/@codesandbox+sandpack-react+0.13.16-experimental.0.patch @@ -0,0 +1,15 @@ +diff --git a/node_modules/@codesandbox/sandpack-react/dist/esm/index.js b/node_modules/@codesandbox/sandpack-react/dist/esm/index.js +index 53841ee..ae52c77 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") { diff --git a/beta/yarn.lock b/beta/yarn.lock index 272f133c63c..b33240f19a6 100644 --- a/beta/yarn.lock +++ b/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" From 31abb7541abd975b37ce816479fbce3e4c1304ac Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Fri, 18 Feb 2022 05:44:22 +0000 Subject: [PATCH 2/9] Fix mismatches with useId --- ...andpack-react+0.13.16-experimental.0.patch | 34 ++++++++++++++++++- 1 file changed, 33 insertions(+), 1 deletion(-) diff --git a/beta/patches/@codesandbox+sandpack-react+0.13.16-experimental.0.patch b/beta/patches/@codesandbox+sandpack-react+0.13.16-experimental.0.patch index c97dd6dc983..0edd6063082 100644 --- a/beta/patches/@codesandbox+sandpack-react+0.13.16-experimental.0.patch +++ b/beta/patches/@codesandbox+sandpack-react+0.13.16-experimental.0.patch @@ -1,5 +1,19 @@ +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..ae52c77 100644 +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 { @@ -13,3 +27,21 @@ index 53841ee..ae52c77 100644 } 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 From 0fc1763bf13b4d0cc28062843a5ed8bd291fb10c Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Fri, 18 Feb 2022 05:45:50 +0000 Subject: [PATCH 3/9] Bump React --- beta/package.json | 4 ++-- beta/yarn.lock | 26 +++++++++++++------------- 2 files changed, 15 insertions(+), 15 deletions(-) diff --git a/beta/package.json b/beta/package.json index 3a674513d6d..eb2d2362e5a 100644 --- a/beta/package.json +++ b/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": "0.0.0-experimental-79ed5e18f-20220217", "react-collapsed": "npm:@gaearon/react-collapsed@3.3.0-patched-react-18", - "react-dom": "experimental", + "react-dom": "0.0.0-experimental-79ed5e18f-20220217", "scroll-into-view-if-needed": "^2.2.25" }, "devDependencies": { diff --git a/beta/yarn.lock b/beta/yarn.lock index b33240f19a6..fd5c25a80d5 100644 --- a/beta/yarn.lock +++ b/beta/yarn.lock @@ -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" From e736981a8fcf40b606874a98bb0bd36dfff1bcb4 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Fri, 18 Feb 2022 06:12:36 +0000 Subject: [PATCH 4/9] Async hydrate --- beta/src/pages/_app.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/beta/src/pages/_app.tsx b/beta/src/pages/_app.tsx index df1e15f2559..625b96875b2 100644 --- a/beta/src/pages/_app.tsx +++ b/beta/src/pages/_app.tsx @@ -47,8 +47,11 @@ export default function MyApp({Component, pageProps}: AppProps) { } return ( - - - + // @ts-ignore + + + + + ); } From ac4d30f24b2f961125621d6d584a8e66f7b32c57 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Fri, 18 Feb 2022 06:25:41 +0000 Subject: [PATCH 5/9] Move Suspense down --- beta/src/components/Layout/MarkdownPage.tsx | 24 ++++++++++++--------- beta/src/pages/_app.tsx | 9 +++----- 2 files changed, 17 insertions(+), 16 deletions(-) diff --git a/beta/src/components/Layout/MarkdownPage.tsx b/beta/src/components/Layout/MarkdownPage.tsx index 746efe9929d..5c21b1990b2 100644 --- a/beta/src/components/Layout/MarkdownPage.tsx +++ b/beta/src/components/Layout/MarkdownPage.tsx @@ -127,16 +127,20 @@ export function MarkdownPage< /> )}
-
- - {finalChildren} - -
- + } + unstable_avoidThisFallback={true}> +
+ + {finalChildren} + +
+ +
diff --git a/beta/src/pages/_app.tsx b/beta/src/pages/_app.tsx index 625b96875b2..df1e15f2559 100644 --- a/beta/src/pages/_app.tsx +++ b/beta/src/pages/_app.tsx @@ -47,11 +47,8 @@ export default function MyApp({Component, pageProps}: AppProps) { } return ( - // @ts-ignore - - - - - + + + ); } From 41d8178fa04496603faa46f0315c2b3ae5ba34fc Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Fri, 18 Feb 2022 06:37:01 +0000 Subject: [PATCH 6/9] Wrap left nav in Suspense too --- .../src/components/Layout/Sidebar/Sidebar.tsx | 36 ++++++++++--------- 1 file changed, 19 insertions(+), 17 deletions(-) diff --git a/beta/src/components/Layout/Sidebar/Sidebar.tsx b/beta/src/components/Layout/Sidebar/Sidebar.tsx index a1295dc5a42..4ad176550b3 100644 --- a/beta/src/components/Layout/Sidebar/Sidebar.tsx +++ b/beta/src/components/Layout/Sidebar/Sidebar.tsx @@ -32,23 +32,25 @@ export function Sidebar({isMobileOnly}: {isMobileOnly?: boolean}) { isOpen ? 'block z-40' : 'hidden lg:block' )} aria-hidden={isHidden}> -
- -
- -
- -
+ +
+ +
+ +
+ +
+ ); } From 4e9179f5b44cc06564e3073e6e8a4b6dadb30afe Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Fri, 18 Feb 2022 06:39:49 +0000 Subject: [PATCH 7/9] Fix TS --- beta/src/components/Layout/MarkdownPage.tsx | 1 + beta/src/components/Layout/Sidebar/Sidebar.tsx | 1 + 2 files changed, 2 insertions(+) diff --git a/beta/src/components/Layout/MarkdownPage.tsx b/beta/src/components/Layout/MarkdownPage.tsx index 5c21b1990b2..acce25244ad 100644 --- a/beta/src/components/Layout/MarkdownPage.tsx +++ b/beta/src/components/Layout/MarkdownPage.tsx @@ -129,6 +129,7 @@ export function MarkdownPage<
} + // @ts-ignore unstable_avoidThisFallback={true}>
diff --git a/beta/src/components/Layout/Sidebar/Sidebar.tsx b/beta/src/components/Layout/Sidebar/Sidebar.tsx index 4ad176550b3..61adef4a1b0 100644 --- a/beta/src/components/Layout/Sidebar/Sidebar.tsx +++ b/beta/src/components/Layout/Sidebar/Sidebar.tsx @@ -32,6 +32,7 @@ export function Sidebar({isMobileOnly}: {isMobileOnly?: boolean}) { isOpen ? 'block z-40' : 'hidden lg:block' )} aria-hidden={isHidden}> + {/* @ts-ignore */}
From 9ce63445239f76ce2741be5f1c9b8f422b3303db Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Fri, 18 Feb 2022 07:08:10 +0000 Subject: [PATCH 8/9] Fix unnecessary context update --- beta/patches/next+12.0.10.patch | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) create mode 100644 beta/patches/next+12.0.10.patch diff --git a/beta/patches/next+12.0.10.patch b/beta/patches/next+12.0.10.patch new file mode 100644 index 00000000000..badcf7e0b5a --- /dev/null +++ b/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)))); From 8c67264833b7b51451292a2f7e6f2433853b1303 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Fri, 18 Feb 2022 16:08:35 +0000 Subject: [PATCH 9/9] Add CPU suspense --- beta/src/components/MDX/CodeBlock/index.tsx | 2 ++ beta/src/components/MDX/Sandpack/index.tsx | 5 ++++- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/beta/src/components/MDX/CodeBlock/index.tsx b/beta/src/components/MDX/CodeBlock/index.tsx index e380cc84fd5..b6ca642910d 100644 --- a/beta/src/components/MDX/CodeBlock/index.tsx +++ b/beta/src/components/MDX/CodeBlock/index.tsx @@ -16,6 +16,8 @@ export default React.memo(function CodeBlockWrapper(props: { const {children, isFromPackageImport} = props; return ( }> + } + // @ts-ignore + unstable_expectedLoadTime={1}> );