jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Migrate to React 18

Browse Source 
Summary:
Sadly, we have to use the experimental version of React to decapitate React Devtools.
See https://fb.workplace.com/groups/react.devtools/posts/3135684459978453/?comment_id=3135711763309056&reply_comment_id=3135760513304181

On the bright side, Replay.io and Code Sandbox also use experimental React without any problem.

Reviewed By: lblasa

Differential Revision: D34926473

fbshipit-source-id: 5cd63cc065c2535f0583464c7b5e37891dadaf14
This commit is contained in:
Andrey Goncharov
2022-03-31 04:01:33 -07:00
committed by Facebook GitHub Bot
parent b1bc31044d
commit 1f83b4b414
8 changed files with 50 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
desktop/flipper-plugin/src/__tests__/test-utils.node.tsx
View File

@@ -355,6 +355,9 @@ test('plugins can handle import errors', async () => {
"An error occurred when importing data for plugin 'TestPlugin': 'Error: Oops",
[Error: Oops],
],
Array [
"Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot",
],
]
`);
} finally {

2
desktop/flipper-plugin/tsconfig.json
View File

@@ -4,7 +4,7 @@
"outDir": "lib",
"rootDir": "src",
"lib": ["dom", "ES2019"],
"types": ["jest", "../types/jest-extensions"]
"types": ["jest", "../types/jest-extensions", "react/next", "react-dom/next"]
},
"references": [
{

2
desktop/flipper-ui-browser/tsconfig.json
View File

@@ -4,7 +4,7 @@
"outDir": "lib",
"rootDir": "src",
"lib": ["dom", "ES2019"],
"types": ["../types/flipperGlobals"]
"types": ["../types/flipperGlobals", "react/next", "react-dom/next"]
},
"references": [
{

8
desktop/flipper-ui-core/package.json
View File

@@ -30,15 +30,15 @@
"lodash": "^4.17.21",
"lodash.memoize": "^4.1.2",
"p-map": "^4.0.0",
"react": "17.0.2",
"react": "^0.0.0-experimental-14c2be8da-20220304",
"react-async": "^10.0.0",
"react-debounce-render": "^7.0.1",
"react-dom": "^17.0.1",
"react-dom": "^0.0.0-experimental-14c2be8da-20220304",
"react-element-to-jsx-string": "^14.3.4",
"react-markdown": "^6.0.3",
"react-player": "^2.10.0",
"react-redux": "^7.2.6",
"react-test-renderer": "^17.0.1",
"react-test-renderer": "^0.0.0-experimental-2bf7c02f0-20220314",
"react-virtualized-auto-sizer": "^1.0.6",
"react-window": "^1.8.6",
"redux": "^4.1.2",
@@ -52,6 +52,8 @@
"@testing-library/react": "^12.1.4",
"@types/deep-equal": "^1.0.1",
"@types/lodash.memoize": "^4.1.6",
"@types/react": "^17.0.39",
"@types/react-dom": "^17.0.12",
"@types/react-test-renderer": "^17.0.1",
"@types/react-virtualized-auto-sizer": "^1.0.1",
"@types/react-window": "^1.8.5",

8
desktop/flipper-ui-core/src/startFlipperDesktop.tsx
View File

@@ -8,7 +8,7 @@
*/
import {Provider} from 'react-redux';
import ReactDOM from 'react-dom';
import {createRoot} from 'react-dom/client';
import {init as initLogger} from './fb-stubs/Logger';
import {SandyApp} from './sandy-chrome/SandyApp';
@@ -164,10 +164,8 @@ function init(flipperServer: FlipperServer) {
connectFlipperServerToStore(flipperServer, store, logger);
ReactDOM.render(
<AppFrame logger={logger} persistor={persistor} />,
document.getElementById('root'),
);
const root = createRoot(document.getElementById('root')!);
root.render(<AppFrame logger={logger} persistor={persistor} />);
enableConsoleHook();

2
desktop/flipper-ui-core/tsconfig.json
View File

@@ -6,7 +6,7 @@
"esModuleInterop": true,
"emitDeclarationOnly": true,
"lib": ["dom", "es2019"],
"types": ["../types/ReactDebounceRender", "../types/flipperGlobals"]
"types": ["react/next", "react-dom/next", "../types/ReactDebounceRender", "../types/flipperGlobals"]
},
"references": [
{

4
desktop/plugins/tsconfig.json
View File

@@ -11,7 +11,9 @@
"../types/ReactDebounceRender",
"../types/json-format-highlight",
"../types/memoize-weak",
"../types/XmlBeautifier"
"../types/XmlBeautifier",
"react/next",
"react-dom/next"
]
},
"include": ["public/", "fb/"],

58
desktop/yarn.lock
View File

@@ -2728,7 +2728,7 @@
dependencies:
"@types/react" "*"
"@types/react-dom@^17.0.13":
"@types/react-dom@^17.0.12", "@types/react-dom@^17.0.13":
version "17.0.13"
resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.13.tgz#a3323b974ee4280070982b3112351bb1952a7809"
integrity sha512-wEP+B8hzvy6ORDv1QBhcQia4j6ea4SFIBttHYpXKPFZRviBvknq0FRh3VrIxeXUmsPkwuXVZrVGG7KUVONmXCQ==
@@ -2766,7 +2766,7 @@
dependencies:
"@types/react" "*"
"@types/react@*", "@types/react@17.0.39":
"@types/react@*", "@types/react@17.0.39", "@types/react@^17.0.39":
version "17.0.39"
resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.39.tgz#d0f4cde092502a6db00a1cded6e6bf2abb7633ce"
integrity sha512-UVavlfAxDd/AgAacMa60Azl7ygyQNRwC/DsHZmKgNvPmRR5p70AJ5Q9EAmL2NWOJmeV+vVUI4IAP7GZrN8h8Ug==
@@ -10416,14 +10416,13 @@ react-debounce-render@^7.0.1:
hoist-non-react-statics "^3.3.2"
lodash.debounce "^4.0.8"
react-dom@^17.0.1:
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@^0.0.0-experimental-14c2be8da-20220304:
version "0.0.0-experimental-14c2be8da-20220304"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-0.0.0-experimental-14c2be8da-20220304.tgz#fb2372884b98f0f3951022425b56643142aa8086"
integrity sha512-JpSxGu7O64k06pgzJHZTEFLHB/TMY00QngL1Xi2Nb0f+TvIB3t0bpJD2nZlyOpHIZfNPW5plGTS/XUUgawF2pQ==
dependencies:
loose-envify "^1.1.0"
object-assign "^4.1.1"
scheduler "^0.20.2"
scheduler "0.0.0-experimental-14c2be8da-20220304"
react-element-to-jsx-string@^14.3.4:
version "14.3.4"
@@ -10448,6 +10447,11 @@ react-inspector@^5.1.0:
is-dom "^1.0.0"
prop-types "^15.0.0"
react-is@0.0.0-experimental-2bf7c02f0-20220314:
version "0.0.0-experimental-2bf7c02f0-20220314"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-0.0.0-experimental-2bf7c02f0-20220314.tgz#6d99e4a3ba89084565e45641717a1b7af84f7f90"
integrity sha512-WdzbJs3ugXn+2K0lZtRReQ+ONDrJ3EeoSEWwdlrFEVF2VWwXztOnNIZGLc1EgP7WA3wBrHV2/isJY1wRs3tVug==
react-is@17.0.2, "react-is@^16.12.0 || ^17.0.0", react-is@^17.0.0, react-is@^17.0.1, react-is@^17.0.2:
version "17.0.2"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
@@ -10523,15 +10527,14 @@ react-shallow-renderer@^16.13.1:
object-assign "^4.1.1"
react-is "^16.12.0 || ^17.0.0"
react-test-renderer@^17.0.1:
version "17.0.2"
resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-17.0.2.tgz#4cd4ae5ef1ad5670fc0ef776e8cc7e1231d9866c"
integrity sha512-yaQ9cB89c17PUb0x6UfWRs7kQCorVdHlutU1boVPEsB8IDZH6n9tHxMacc3y0JoXOJUsZb/t/Mb8FUWMKaM7iQ==
react-test-renderer@^0.0.0-experimental-2bf7c02f0-20220314:
version "0.0.0-experimental-2bf7c02f0-20220314"
resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-0.0.0-experimental-2bf7c02f0-20220314.tgz#6b64c9d7bcd70157a01d71fdb3ef0d03208def8b"
integrity sha512-5Ebiv1FEXKky/s85kep84GAc8zGQgkRu5oQIHN+ZzXL054f/1EmpcVffddEjGaUYcoX1QWK3LrHrCh71rhAJtw==
dependencies:
object-assign "^4.1.1"
react-is "^17.0.2"
react-is "0.0.0-experimental-2bf7c02f0-20220314"
react-shallow-renderer "^16.13.1"
scheduler "^0.20.2"
scheduler "0.0.0-experimental-2bf7c02f0-20220314"
react-virtual@^2.10.4:
version "2.10.4"
@@ -10553,13 +10556,12 @@ react-window@^1.8.6:
"@babel/runtime" "^7.0.0"
memoize-one ">=3.1.1 <6"
react@17.0.2:
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@^0.0.0-experimental-14c2be8da-20220304:
version "0.0.0-experimental-14c2be8da-20220304"
resolved "https://registry.yarnpkg.com/react/-/react-0.0.0-experimental-14c2be8da-20220304.tgz#a8a7a99d81f9313f9f6c1bdf13233a31fff35e32"
integrity sha512-vKXFJCe7tNRzWpsrR55OZCHypfBPmo7P51tAER7rjsg7Kn0oILnhERyfKHyWos8dSudf7aOZdPb1DWVBk7v7sw==
dependencies:
loose-envify "^1.1.0"
object-assign "^4.1.1"
reactcss@^1.2.0:
version "1.2.3"
@@ -11058,13 +11060,19 @@ saxes@^5.0.1:
dependencies:
xmlchars "^2.2.0"
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.0.0-experimental-14c2be8da-20220304:
version "0.0.0-experimental-14c2be8da-20220304"
resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.0.0-experimental-14c2be8da-20220304.tgz#9144f2a7acf9315e754cdf566fa1b8a5853a9876"
integrity sha512-/2/ars7jto7FA643UmaBWKyIlofeYoWNVggZw94rCBBH7OGnVIPt3q4ajbj8kwu/VlW1HZ7cyX+jWBxVJ4KgSA==
dependencies:
loose-envify "^1.1.0"
scheduler@0.0.0-experimental-2bf7c02f0-20220314:
version "0.0.0-experimental-2bf7c02f0-20220314"
resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.0.0-experimental-2bf7c02f0-20220314.tgz#0c47b7356b64040f285806f72b27f9fb4790232b"
integrity sha512-RVBx9wfkLek9qsdlWRb5QRdtz4E5wouRbSWrSoNyQXUL96so75ZXhe6E5iNLhDnjOoP9m/s1Ga00KunDUYjcFg==
dependencies:
loose-envify "^1.1.0"
object-assign "^4.1.1"
scroll-into-view-if-needed@^2.2.25:
version "2.2.26"