The library for web and native user interfaces.
Upgrade to React 19 beta (#2938)
- Updated all directly defined dependencies to the latest React 19 Beta - `package.json`: used `resolutions` to force React 19 for `react-is` transitive dependency - `package.json`: postinstall script to patch fbt for the React 19 element Symbol - Match on the message in Snap to exclude a React 19 warning that `act` should be imported from `react` instead (from inside `@testing-library/react`) - Some updated snapshots, I think due to now recovering behavior of `useMemoCache`, please review. In a next step, we can do the following. I excluded it since it from here as it made the PR unreviewable on GitHub. - Snapshots now use `react/compiler-runtime` as in prod, so the different default in Snap is no longer needed.
Jan Kassens committed
May 6, 2024 at 19:48 UTC
e63d3d14915b4516cd201f3eb588e7249272f793
9 files changed
+79
-56
compiler/package.json
+5
-1
@@ -25,7 +25,8 @@
25
"dev": "concurrently --kill-others -n compiler,runtime,playground \"yarn workspace babel-plugin-react-compiler run build --watch\" \"yarn workspace react-compiler-runtime run build --watch\" \"yarn workspace playground run dev\"",
26
"test": "yarn workspaces run test",
27
"snap": "yarn workspace babel-plugin-react-compiler run snap",
28
- "snap:build": "yarn workspace snap run build"
28
+ "snap:build": "yarn workspace snap run build",
29
+ "postinstall": "perl -p -i -e 's/react\\.element/react.transitional.element/' packages/snap/node_modules/fbt/lib/FbtReactUtil.js && perl -p -i -e 's/didWarnAboutUsingAct = false;/didWarnAboutUsingAct = true;/' packages/babel-plugin-react-compiler/node_modules/react-dom/cjs/react-dom-test-utils.development.js"
30
},
31
"dependencies": {},
32
"devDependencies": {
@@ -40,5 +41,8 @@
41
"rollup-plugin-banner2": "^1.2.3",
42
"rollup-plugin-prettier": "^4.1.1",
43
"typescript": "^5.4.3"
44
+ },
45
+ "resolutions": {
46
+ "react-is": "19.0.0-beta-b498834eab-20240506"
47
}
48
}
compiler/packages/babel-plugin-react-compiler/package.json
+2
-2
@@ -54,8 +54,8 @@
54
"jest": "^29.0.3",
55
"jest-environment-jsdom": "^29.0.3",
56
"prettier": "2.8.8",
57
- "react": "^0.0.0-experimental-493f72b0a-20230727",
58
- "react-dom": "^0.0.0-experimental-493f72b0a-20230727",
57
+ "react": "19.0.0-beta-b498834eab-20240506",
58
+ "react-dom": "19.0.0-beta-b498834eab-20240506",
59
"rimraf": "^3.0.2",
60
"ts-jest": "^29.1.1",
61
"ts-node": "^10.9.2"
compiler/packages/babel-plugin-react-compiler/scripts/jest/setupEnvE2E.js
+2
-3
@@ -5,12 +5,11 @@
5
* LICENSE file in the root directory of this source tree.
6
*/
7
8
-const React = require("react");
8
+const ReactCompilerRuntime = require("react/compiler-runtime");
9
10
/*
11
* Our e2e babel transform currently only compiles functions, not programs.
12
* As a result, our e2e transpiled code does not contain an import for `useMemoCache`
13
* This is a hack.
14
*/
15
-React.c = React.unstable_useMemoCache;
16
-globalThis.useMemoCache = React.unstable_useMemoCache;
15
+globalThis.useMemoCache = ReactCompilerRuntime.c;
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/skip-useMemoCache.expect.md
+2
-2
@@ -2,7 +2,7 @@
2
## Input
3
4
```javascript
5
-import { unstable_useMemoCache as useMemoCache } from "react";
5
+import { c as useMemoCache } from "react/compiler-runtime";
6
7
function Component(props) {
8
const $ = useMemoCache();
@@ -26,7 +26,7 @@ export const FIXTURE_ENTRYPOINT = {
26
## Code
27
28
```javascript
29
-import { unstable_useMemoCache as useMemoCache } from "react";
29
+import { c as useMemoCache } from "react/compiler-runtime";
30
31
function Component(props) {
32
const $ = useMemoCache();
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/skip-useMemoCache.js
+1
-1
@@ -1,4 +1,4 @@
1
-import { unstable_useMemoCache as useMemoCache } from "react";
1
+import { c as useMemoCache } from "react/compiler-runtime";
2
3
function Component(props) {
4
const $ = useMemoCache();
compiler/packages/react-compiler-runtime/package.json
+2
-2
@@ -7,8 +7,8 @@
7
"files": [
8
"src"
9
],
10
- "dependencies": {
11
- "react": "^18.2.0"
10
+ "peerDependencies": {
11
+ "react": "^18.2.0 | ^19.0.0"
12
},
13
"scripts": {
14
"build": "rimraf dist && rollup --config --bundleConfigAsCjs",
compiler/packages/snap/package.json
+2
-2
@@ -33,8 +33,8 @@
33
"hermes-parser": "^0.19.1",
34
"jsdom": "^22.1.0",
35
"prettier": "2.8.8",
36
- "react": "^0.0.0-experimental-493f72b0a-20230727",
37
- "react-dom": "^0.0.0-experimental-493f72b0a-20230727",
36
+ "react": "19.0.0-beta-b498834eab-20240506",
37
+ "react-dom": "19.0.0-beta-b498834eab-20240506",
38
"readline": "^1.3.0",
39
"yargs": "^17.7.1"
40
},
compiler/packages/snap/src/sprout/evaluator.ts
+14
-4
@@ -8,13 +8,15 @@
8
import { render } from "@testing-library/react";
9
import { JSDOM } from "jsdom";
10
import React, { MutableRefObject } from "react";
11
+// @ts-ignore
12
+import { c as useMemoCache } from "react/compiler-runtime";
13
import util from "util";
14
import { z } from "zod";
15
import { fromZodError } from "zod-validation-error";
16
import { initFbt, toJSON } from "./shared-runtime";
17
18
// @ts-ignore
17
-React.c = React.unstable_useMemoCache;
19
+React.c = useMemoCache;
20
21
/**
22
* Set up the global environment for JSDOM tests.
@@ -210,15 +212,23 @@ export function doEval(source: string): EvaluatorResult {
212
log: mockedLog,
213
warn: mockedLog,
214
error: (...args: Array<any>) => {
215
+ if (
216
+ typeof args[0] === "string" &&
217
+ args[0].includes("ReactDOMTestUtils.act` is deprecated")
218
+ ) {
219
+ // remove this once @testing-library/react is upgraded to React 19.
220
+ return;
221
+ }
222
+
223
const stack = new Error().stack?.split("\n", 5) ?? [];
224
for (const stackFrame of stack) {
225
// React warns on exceptions thrown during render, we avoid printing
226
// here to reduce noise in test fixture outputs.
227
if (
218
- (stackFrame.includes("at logCapturedError") &&
219
- stackFrame.includes("react-dom.development")) ||
228
+ (stackFrame.includes("at logCaughtError") &&
229
+ stackFrame.includes("react-dom-client.development.js")) ||
230
(stackFrame.includes("at defaultOnRecoverableError") &&
221
- stackFrame.includes("react-dom.development"))
231
+ stackFrame.includes("react-dom-client.development.js"))
232
) {
233
return;
234
}
compiler/yarn.lock
+49
-39
@@ -8427,42 +8427,29 @@ react-dom@18.2.0:
8427
loose-envify "^1.1.0"
8428
scheduler "^0.23.0"
8429
8430
-react-dom@^0.0.0-experimental-493f72b0a-20230727:
8431
- version "0.0.0-experimental-493f72b0a-20230727"
8432
- resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-0.0.0-experimental-493f72b0a-20230727.tgz#02b95966cbccafdb5eff411bd77cf9a99b4ac38c"
8433
- integrity sha512-Ms+rLKteABVNHRjqj2VIQg7biJYb3jB2paJJGGF579Mi22UQnyAVypbCTedzFUDhtpxs+LDR45QNFT5kDIEeaw==
8430
+react-dom@19.0.0-beta-b498834eab-20240506:
8431
+ version "19.0.0-beta-b498834eab-20240506"
8432
+ resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-19.0.0-beta-b498834eab-20240506.tgz#1860706b1b5b68850fad0f44d08ae43311fe1171"
8433
+ integrity sha512-k+o/NB0245cUhJXQj8S9YWlGc+3aNNRMUwhmSP22UA422jucLYg5N5eHYwNTr7EWNR/xJ1uZXodX+Ur9JvKCuQ==
8434
dependencies:
8435
- loose-envify "^1.1.0"
8436
- scheduler "0.0.0-experimental-493f72b0a-20230727"
8437
-
8438
-react-is@^16.13.1, react-is@^16.8.4:
8439
- version "16.13.1"
8440
- resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
8441
- integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
8435
+ scheduler "0.25.0-beta-b498834eab-20240506"
8436
8443
-react-is@^17.0.1:
8444
- version "17.0.2"
8445
- resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
8446
- integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
8447
-
8448
-react-is@^18.0.0:
8449
- version "18.2.0"
8450
- resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
8451
- integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
8437
+react-is@19.0.0-beta-b498834eab-20240506, react-is@^16.13.1, react-is@^16.8.4, react-is@^17.0.1, react-is@^18.0.0:
8438
+ version "19.0.0-beta-b498834eab-20240506"
8439
+ resolved "https://registry.yarnpkg.com/react-is/-/react-is-19.0.0-beta-b498834eab-20240506.tgz#772f7d3ff4997997730f54cad28282214b487294"
8440
+ integrity sha512-n4bHxssA5Y0y1Vx4P0aBybxp0VviakagM9wgP961sVCj2hndZqb/NcVEmIkwxAL2ha4kv/l1zaUiIH+4fSZJkg==
8441
8453
-react@18.2.0, react@^18.2.0:
8442
+react@18.2.0:
8443
version "18.2.0"
8444
resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
8445
integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
8446
dependencies:
8447
loose-envify "^1.1.0"
8448
8460
-react@^0.0.0-experimental-493f72b0a-20230727:
8461
- version "0.0.0-experimental-493f72b0a-20230727"
8462
- resolved "https://registry.yarnpkg.com/react/-/react-0.0.0-experimental-493f72b0a-20230727.tgz#c1e165db1d1c2dc944e5e1759a860807b06503ed"
8463
- integrity sha512-AivNXEA/rd+x9Oe+5JIgsAFGaBQZg0c85upbziIYbgxW1BT6iOFUFA38i+SMfd1ktD82E1yj4nH/OpfA8kC3Cg==
8464
- dependencies:
8465
- loose-envify "^1.1.0"
8449
+react@19.0.0-beta-b498834eab-20240506:
8450
+ version "19.0.0-beta-b498834eab-20240506"
8451
+ resolved "https://registry.yarnpkg.com/react/-/react-19.0.0-beta-b498834eab-20240506.tgz#36a99a1160ca055725a092630641c2dd77b62f33"
8452
+ integrity sha512-mK8kVx7e0M6bVvjc+G+48Oo4TJJ1Y84JUrs60MbIw8WoqqHmG9qPFz3IwhXqzVtugqBMog5UA4KEZW+nHxewkw==
8453
8454
read-cache@^1.0.0:
8455
version "1.0.0"
@@ -8789,17 +8776,15 @@ saxes@^6.0.0:
8776
dependencies:
8777
xmlchars "^2.2.0"
8778
8792
-scheduler@0.0.0-experimental-493f72b0a-20230727:
8793
- version "0.0.0-experimental-493f72b0a-20230727"
8794
- resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.0.0-experimental-493f72b0a-20230727.tgz#a4d1fd57d9bfbd68b1b3e3c3249765f92c1a7b34"
8795
- integrity sha512-6bKnt2pR0XjH4ix7rYCp8+KR5eutR0hDpCiU++14SuImTH0uMYa3Gp4ayLeMyAvOEFTCgewDS/faZF1J14sRew==
8796
- dependencies:
8797
- loose-envify "^1.1.0"
8779
+scheduler@0.25.0-beta-b498834eab-20240506:
8780
+ version "0.25.0-beta-b498834eab-20240506"
8781
+ resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.25.0-beta-b498834eab-20240506.tgz#ddbdfe82bdf7a4dda551974c54b9b68e75cb9ba1"
8782
+ integrity sha512-fw52C9FJ90xSu8R2vRfYX8WiI3sz4zo/ya98DRdRqkkgek6WYofI7AJRM5ZZxFtVKuJZOUjV+4uoVK9Al1XadA==
8783
8784
scheduler@^0.23.0:
8800
- version "0.23.0"
8801
- resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
8802
- integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==
8785
+ version "0.23.2"
8786
+ resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.2.tgz#414ba64a3b282892e944cf2108ecc078d115cdc3"
8787
+ integrity sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==
8788
dependencies:
8789
loose-envify "^1.1.0"
8790
@@ -9004,7 +8989,16 @@ string-length@^4.0.1:
8989
char-regex "^1.0.2"
8990
strip-ansi "^6.0.0"
8991
9007
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
8992
+"string-width-cjs@npm:string-width@^4.2.0":
8993
+ version "4.2.3"
8994
+ resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
8995
+ integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
8996
+ dependencies:
8997
+ emoji-regex "^8.0.0"
8998
+ is-fullwidth-code-point "^3.0.0"
8999
+ strip-ansi "^6.0.1"
9000
+
9001
+string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
9002
version "4.2.3"
9003
resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
9004
integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -9097,7 +9091,14 @@ string_decoder@^1.1.1:
9091
dependencies:
9092
safe-buffer "~5.2.0"
9093
9100
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
9094
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
9095
+ version "6.0.1"
9096
+ resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
9097
+ integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
9098
+ dependencies:
9099
+ ansi-regex "^5.0.1"
9100
+
9101
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
9102
version "6.0.1"
9103
resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
9104
integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -9747,7 +9748,7 @@ wordwrap@>=0.0.2:
9748
resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
9749
integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==
9750
9750
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
9751
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
9752
version "7.0.0"
9753
resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
9754
integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -9765,6 +9766,15 @@ wrap-ansi@^6.2.0:
9766
string-width "^4.1.0"
9767
strip-ansi "^6.0.0"
9768
9769
+wrap-ansi@^7.0.0:
9770
+ version "7.0.0"
9771
+ resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
9772
+ integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
9773
+ dependencies:
9774
+ ansi-styles "^4.0.0"
9775
+ string-width "^4.1.0"
9776
+ strip-ansi "^6.0.0"
9777
+
9778
wrap-ansi@^8.1.0:
9779
version "8.1.0"
9780
resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"