diff --git a/beta/package.json b/beta/package.json index 84bfad19e7b..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-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": { 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..0edd6063082 --- /dev/null +++ b/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 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)))); diff --git a/beta/src/components/Layout/MarkdownPage.tsx b/beta/src/components/Layout/MarkdownPage.tsx index 746efe9929d..acce25244ad 100644 --- a/beta/src/components/Layout/MarkdownPage.tsx +++ b/beta/src/components/Layout/MarkdownPage.tsx @@ -127,16 +127,21 @@ export function MarkdownPage< /> )}
-
- - {finalChildren} - -
- + } + // @ts-ignore + unstable_avoidThisFallback={true}> +
+ + {finalChildren} + +
+ +
diff --git a/beta/src/components/Layout/Sidebar/Sidebar.tsx b/beta/src/components/Layout/Sidebar/Sidebar.tsx index a1295dc5a42..61adef4a1b0 100644 --- a/beta/src/components/Layout/Sidebar/Sidebar.tsx +++ b/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}> -
- -
- -
- -
+ {/* @ts-ignore */} + +
+ +
+ +
+ +
+ ); } 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}> ); diff --git a/beta/yarn.lock b/beta/yarn.lock index 272f133c63c..fd5c25a80d5 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" @@ -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"