@samitouri / QOS-React / commits / e63d3d1491

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"