From 896fff152e095ba84aa172d47a4ceea5f426443e Mon Sep 17 00:00:00 2001 From: Jon Koops Date: Wed, 21 Sep 2022 15:27:36 +0200 Subject: [PATCH] BREAKING CHANGE Add support for React 18 --- packages/documentation-framework/README.md | 8 ++--- packages/documentation-framework/app.js | 13 +++++++-- .../helpers/codesandbox.js | 12 ++++---- packages/documentation-framework/package.json | 4 +-- .../scripts/webpack/webpack.server.config.js | 2 +- packages/v4/package.json | 4 +-- yarn.lock | 29 +++++++++---------- 7 files changed, 39 insertions(+), 33 deletions(-) diff --git a/packages/documentation-framework/README.md b/packages/documentation-framework/README.md index 1898a80fb3..bd36d05b34 100644 --- a/packages/documentation-framework/README.md +++ b/packages/documentation-framework/README.md @@ -28,10 +28,10 @@ We publish this theme [on npm.](https://www.npmjs.com/package/@patternfly/docume This should not be needed, but if you encounter errors installing the above devDependencies, try adding one or more of these resolutions to your package.json file: ``` "resolutions": { - "@types/react": "^16.8.0", - "@types/react-dom": "^16.8.0", - "react": "16.8.0", - "react-dom": "16.8.0", + "@types/react": "^18", + "@types/react-dom": "^18", + "react": "^18", + "react-dom": "^18", "chromedriver": "102.0.0", "node-sass": "7.0.1", "puppeteer": "14.3.0", diff --git a/packages/documentation-framework/app.js b/packages/documentation-framework/app.js index 58bb924916..a5577ce802 100644 --- a/packages/documentation-framework/app.js +++ b/packages/documentation-framework/app.js @@ -1,5 +1,5 @@ import React from 'react'; -import ReactDOM from 'react-dom'; +import { createRoot, hydrateRoot } from 'react-dom/client'; import { Router, useLocation } from '@reach/router'; import 'client-styles'; // Webpack replaces this import: patternfly-docs.css.js import { SideNavLayout } from '@patternfly/documentation-framework/layouts'; @@ -107,8 +107,15 @@ const isPrerender = process.env.PRERENDER; // Don't use ReactDOM in SSR if (!isPrerender) { function render() { - const renderFn = isProd ? ReactDOM.hydrate : ReactDOM.render; - renderFn(, document.getElementById('root')); + const container = document.getElementById('root'); + // TODO: Enable StrictMode: https://reactjs.org/docs/strict-mode.html + const app = ; + + if (isProd) { + hydrateRoot(container, app); + } else { + createRoot(container).render(app); + } } // On first load, await promise for the current page to avoid flashing a "Loading..." state const Component = getAsyncComponent(null); diff --git a/packages/documentation-framework/helpers/codesandbox.js b/packages/documentation-framework/helpers/codesandbox.js index 42f149bc37..853b90ab4e 100644 --- a/packages/documentation-framework/helpers/codesandbox.js +++ b/packages/documentation-framework/helpers/codesandbox.js @@ -179,14 +179,16 @@ function getReactParams(title, code, scope, lang, relativeImports) { `, }, [lang === 'ts' ? 'index.tsx' : 'index.js']: { - content: `import ReactDOM from 'react-dom'; + content: `import { StrictMode } from "react"; +import { createRoot } from "react-dom/client"; import "@patternfly/react-core/dist/styles/base.css"; import './fonts.css'; ${code} -const rootElement = document.getElementById("root"); -ReactDOM.render(<${toRender} />, rootElement);` +const container = document.getElementById("root"); +const root = createRoot(container); +root.render(<${toRender} />);` }, 'fonts.css': { content: overpass @@ -195,8 +197,8 @@ ReactDOM.render(<${toRender} />, rootElement);` content: { dependencies: { ...dependencies, - 'react': '^16.8.0', - 'react-dom': '^16.8.0' + 'react': '^18', + 'react-dom': '^18' } }, }, diff --git a/packages/documentation-framework/package.json b/packages/documentation-framework/package.json index 1aa9173296..83972bb2bd 100644 --- a/packages/documentation-framework/package.json +++ b/packages/documentation-framework/package.json @@ -81,7 +81,7 @@ "@patternfly/react-code-editor": ">=4.43.16", "@patternfly/react-core": ">=4.202.16", "@patternfly/react-table": ">=4.71.16", - "react": "^16.8.0 || ^17.0.0", - "react-dom": "^16.8.0 || ^17.0.0" + "react": "^16.8 || ^17 || ^18", + "react-dom": "^16.8 || ^17 || ^18" } } diff --git a/packages/documentation-framework/scripts/webpack/webpack.server.config.js b/packages/documentation-framework/scripts/webpack/webpack.server.config.js index dd959d5792..90a9a48837 100644 --- a/packages/documentation-framework/scripts/webpack/webpack.server.config.js +++ b/packages/documentation-framework/scripts/webpack/webpack.server.config.js @@ -12,7 +12,7 @@ const serverConfig = () => { target: 'node', // Load chunks using require plugins: [ new webpack.DefinePlugin({ - 'process.env.PRERENDER': true // In app.js don't call ReactDOM.render + 'process.env.PRERENDER': true // In app.js don't call render }), ], optimization: { diff --git a/packages/v4/package.json b/packages/v4/package.json index 4c0bcfac9a..062561a561 100644 --- a/packages/v4/package.json +++ b/packages/v4/package.json @@ -20,8 +20,8 @@ "@patternfly/documentation-framework": "^1.3.7", "@patternfly/quickstarts": "^2.2.4", "@patternfly/react-docs": "5.103.22", - "react": "^16.8.0 || ^17.0.0", - "react-dom": "^16.8.0 || ^17.0.0" + "react": "^16.8 || ^17 || ^18", + "react-dom": "^16.8 || ^17 || ^18" }, "devDependencies": { "@patternfly/patternfly-a11y": "4.3.0", diff --git a/yarn.lock b/yarn.lock index 644a00ebb2..7de7e1acf3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11224,14 +11224,13 @@ react-docgen@5.3.1: node-dir "^0.1.10" strip-indent "^3.0.0" -"react-dom@^16.8.0 || ^17.0.0": - version "17.0.2" - resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23" - integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA== +"react-dom@^16.8 || ^17 || ^18": + version "18.2.0" + resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d" + integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g== dependencies: loose-envify "^1.1.0" - object-assign "^4.1.1" - scheduler "^0.20.2" + scheduler "^0.23.0" react-dropzone@9.0.0: version "9.0.0" @@ -11294,13 +11293,12 @@ react-virtualized@^9.21.1: prop-types "^15.7.2" react-lifecycles-compat "^3.0.4" -"react@^16.8.0 || ^17.0.0": - version "17.0.2" - resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037" - integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA== +"react@^16.8 || ^17 || ^18": + version "18.2.0" + resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5" + integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ== dependencies: loose-envify "^1.1.0" - object-assign "^4.1.1" read-cmd-shim@^1.0.1: version "1.0.5" @@ -11962,13 +11960,12 @@ sax@^1.2.1: resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9" integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw== -scheduler@^0.20.2: - version "0.20.2" - resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91" - integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ== +scheduler@^0.23.0: + version "0.23.0" + resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe" + integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw== dependencies: loose-envify "^1.1.0" - object-assign "^4.1.1" schema-utils@^1.0.0: version "1.0.0"