From 79b3e5359914a654afad49dea789c54ae99f4b50 Mon Sep 17 00:00:00 2001 From: Christoph Knittel Date: Thu, 9 Jul 2026 13:18:23 +0200 Subject: [PATCH] Upgrade react and react-dom to v19 and adapt gentype --- CHANGELOG.md | 1 + compiler/gentype/emit_type.ml | 2 +- .../typescript-react-example/package.json | 8 +- .../src/Hooks.gen.tsx | 4 +- .../src/ImportHooks.gen.tsx | 4 +- .../src/JSXV4.gen.tsx | 6 +- .../typescript-react-example/src/index.tsx | 5 +- yarn.lock | 90 +++++++------------ 8 files changed, 48 insertions(+), 72 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index bd967617f70..441a8dcadc1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -41,6 +41,7 @@ - Fix analysis segmentation fault for references after https://github.com/rescript-lang/rescript/pull/7887. https://github.com/rescript-lang/rescript/pull/8477 - Fix build crash when the compiler emits output that is not valid UTF-8, such as a truncated multibyte character in a code frame. https://github.com/rescript-lang/rescript/pull/8482 - Fix unnecessary boxing of `Some(React.component)`. https://github.com/rescript-lang/rescript/pull/8500 +- Fix GenType React element output to support React 19 typedefs. https://github.com/rescript-lang/rescript/pull/8501 #### :memo: Documentation diff --git a/compiler/gentype/emit_type.ml b/compiler/gentype/emit_type.ml index 52a7eda89f0..79c1d253fde 100644 --- a/compiler/gentype/emit_type.ml +++ b/compiler/gentype/emit_type.ml @@ -26,7 +26,7 @@ let type_react_component ~props_type = let type_react_context ~type_ = "React.Context" |> ident ~builtin:true ~type_args:[type_] -let type_react_element_type_script = ident ~builtin:true "JSX.Element" +let type_react_element_type_script = ident ~builtin:true "React.JSX.Element" let type_react_child_type_script = ident ~builtin:true "React.ReactNode" let type_react_element = type_react_element_type_script let type_react_child = type_react_child_type_script diff --git a/tests/gentype_tests/typescript-react-example/package.json b/tests/gentype_tests/typescript-react-example/package.json index 3d97afe55e4..59f2fd42fa6 100644 --- a/tests/gentype_tests/typescript-react-example/package.json +++ b/tests/gentype_tests/typescript-react-example/package.json @@ -9,13 +9,13 @@ }, "dependencies": { "@rescript/react": "workspace:^", - "react": "^18.3.1", - "react-dom": "^18.3.1", + "react": "^19.2.7", + "react-dom": "^19.2.7", "rescript": "workspace:^" }, "devDependencies": { - "@types/react": "^18.3.3", - "@types/react-dom": "^18.3.0", + "@types/react": "^19.2.17", + "@types/react-dom": "^19.2.3", "typescript": "6.0.3" } } diff --git a/tests/gentype_tests/typescript-react-example/src/Hooks.gen.tsx b/tests/gentype_tests/typescript-react-example/src/Hooks.gen.tsx index 3ebfd588035..da76a0edfcd 100644 --- a/tests/gentype_tests/typescript-react-example/src/Hooks.gen.tsx +++ b/tests/gentype_tests/typescript-react-example/src/Hooks.gen.tsx @@ -81,7 +81,7 @@ export const WithRename_componentWithRenamedArgs: React.ComponentType<{ export const WithRef_make: React.ComponentType<{ readonly vehicle: vehicle; readonly ref?: any }> = HooksJS.WithRef.make as any; -export const ForwardRef_input: (_1:r) => JSX.Element = HooksJS.ForwardRef.input as any; +export const ForwardRef_input: (_1:r) => React.JSX.Element = HooksJS.ForwardRef.input as any; export const Poly_polymorphicComponent: React.ComponentType<{ readonly p: [vehicle, any] }> = HooksJS.Poly.polymorphicComponent as any; @@ -124,7 +124,7 @@ export const WithRename: { componentWithRenamedArgs: React.ComponentType<{ readonly cb: cb }> } = HooksJS.WithRename as any; -export const ForwardRef: { input: (_1:r) => JSX.Element } = HooksJS.ForwardRef as any; +export const ForwardRef: { input: (_1:r) => React.JSX.Element } = HooksJS.ForwardRef as any; export const Fun: { functionReturningReactElement: React.ComponentType<{ readonly name: string }> } = HooksJS.Fun as any; diff --git a/tests/gentype_tests/typescript-react-example/src/ImportHooks.gen.tsx b/tests/gentype_tests/typescript-react-example/src/ImportHooks.gen.tsx index fc7dd23a2e5..b030adf2294 100644 --- a/tests/gentype_tests/typescript-react-example/src/ImportHooks.gen.tsx +++ b/tests/gentype_tests/typescript-react-example/src/ImportHooks.gen.tsx @@ -9,7 +9,7 @@ import {foo as fooNotChecked} from './hookExample'; // In case of type error, check the type of 'makeRenamed' in 'ImportHooks.res' and './hookExample'. export const makeRenamedTypeChecked: React.ComponentType<{ - readonly actions?: JSX.Element; + readonly actions?: React.JSX.Element; readonly person: person; readonly children: React.ReactNode; readonly renderMe: renderMe @@ -17,7 +17,7 @@ export const makeRenamedTypeChecked: React.ComponentType<{ // Export 'makeRenamed' early to allow circular import from the '.bs.js' file. export const makeRenamed: unknown = makeRenamedTypeChecked as React.ComponentType<{ - readonly actions?: JSX.Element; + readonly actions?: React.JSX.Element; readonly person: person; readonly children: React.ReactNode; readonly renderMe: renderMe diff --git a/tests/gentype_tests/typescript-react-example/src/JSXV4.gen.tsx b/tests/gentype_tests/typescript-react-example/src/JSXV4.gen.tsx index 5d138887bf3..310adc4d94c 100644 --- a/tests/gentype_tests/typescript-react-example/src/JSXV4.gen.tsx +++ b/tests/gentype_tests/typescript-react-example/src/JSXV4.gen.tsx @@ -7,7 +7,7 @@ import {make as makeNotChecked} from './hookExample'; // In case of type error, check the type of 'make' in 'JSXV4.res' and './hookExample'. export const makeTypeChecked: React.ComponentType<{ - readonly actions?: JSX.Element; + readonly actions?: React.JSX.Element; readonly person: person; readonly children: React.ReactNode; readonly renderMe: renderMe @@ -15,7 +15,7 @@ export const makeTypeChecked: React.ComponentType<{ // Export 'make' early to allow circular import from the '.bs.js' file. export const make: unknown = makeTypeChecked as React.ComponentType<{ - readonly actions?: JSX.Element; + readonly actions?: React.JSX.Element; readonly person: person; readonly children: React.ReactNode; readonly renderMe: renderMe @@ -29,7 +29,7 @@ export type person = { readonly name: string; readonly age: number }; export type props2 = { readonly randomString: string; readonly poly: a }; -export type renderMe = (_1:props2) => JSX.Element; +export type renderMe = (_1:props2) => React.JSX.Element; export type props = { readonly actions?: actions; diff --git a/tests/gentype_tests/typescript-react-example/src/index.tsx b/tests/gentype_tests/typescript-react-example/src/index.tsx index 1fdcd83b2cc..053cee18a1e 100644 --- a/tests/gentype_tests/typescript-react-example/src/index.tsx +++ b/tests/gentype_tests/typescript-react-example/src/index.tsx @@ -1,5 +1,5 @@ import type * as React from "react"; -import * as ReactDOM from "react-dom"; +import { createRoot } from "react-dom/client"; import App from "./App.tsx"; import * as ImportJsValue from "./ImportJsValue.gen.tsx"; import * as Uncurried from "./Uncurried.gen.tsx"; @@ -62,12 +62,11 @@ Uncurried.sumU2(3)(4); Uncurried.sumCurried(3)(4); Uncurried.sumLblCurried("hello", 3)(4); -ReactDOM.render( +createRoot(document.getElementById("root") as HTMLElement).render(
, - document.getElementById("root") as HTMLElement, ); const x1 = Records.getPayload(Records.payloadValue).v; diff --git a/yarn.lock b/yarn.lock index bbc5e0a2fc0..a760d4d6fdd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -913,10 +913,10 @@ __metadata: resolution: "@tests/gentype-react-example@workspace:tests/gentype_tests/typescript-react-example" dependencies: "@rescript/react": "workspace:^" - "@types/react": "npm:^18.3.3" - "@types/react-dom": "npm:^18.3.0" - react: "npm:^18.3.1" - react-dom: "npm:^18.3.1" + "@types/react": "npm:^19.2.17" + "@types/react-dom": "npm:^19.2.3" + react: "npm:^19.2.7" + react-dom: "npm:^19.2.7" rescript: "workspace:^" typescript: "npm:6.0.3" languageName: unknown @@ -1031,29 +1031,21 @@ __metadata: languageName: node linkType: hard -"@types/prop-types@npm:*": - version: 15.7.14 - resolution: "@types/prop-types@npm:15.7.14" - checksum: 10c0/1ec775160bfab90b67a782d735952158c7e702ca4502968aa82565bd8e452c2de8601c8dfe349733073c31179116cf7340710160d3836aa8a1ef76d1532893b1 - languageName: node - linkType: hard - -"@types/react-dom@npm:^18.3.0": - version: 18.3.5 - resolution: "@types/react-dom@npm:18.3.5" +"@types/react-dom@npm:^19.2.3": + version: 19.2.3 + resolution: "@types/react-dom@npm:19.2.3" peerDependencies: - "@types/react": ^18.0.0 - checksum: 10c0/b163d35a6b32a79f5782574a7aeb12a31a647e248792bf437e6d596e2676961c394c5e3c6e91d1ce44ae90441dbaf93158efb4f051c0d61e2612f1cb04ce4faa + "@types/react": ^19.2.0 + checksum: 10c0/b486ebe0f4e2fb35e2e108df1d8fc0927ca5d6002d5771e8a739de11239fe62d0e207c50886185253c99eb9dedfeeb956ea7429e5ba17f6693c7acb4c02f8cd1 languageName: node linkType: hard -"@types/react@npm:^18.3.3": - version: 18.3.20 - resolution: "@types/react@npm:18.3.20" +"@types/react@npm:^19.2.17": + version: 19.2.17 + resolution: "@types/react@npm:19.2.17" dependencies: - "@types/prop-types": "npm:*" - csstype: "npm:^3.0.2" - checksum: 10c0/65fa867c91357e4c4c646945c8b99044360f8973cb7f928ec4de115fe3207827985d45be236e6fd6c092b09f631c2126ce835c137be30718419e143d73300d8f + csstype: "npm:^3.2.2" + checksum: 10c0/bc2c4af96b3e480604424de70d5ebda90c5f4b485df471858c0bc2d7d70364b606ec3c4d8579f94f01aa0c6c0591f56bcf14cba5689f5eea4b74250ccdc3a232 languageName: node linkType: hard @@ -1384,10 +1376,10 @@ __metadata: languageName: node linkType: hard -"csstype@npm:^3.0.2": - version: 3.1.3 - resolution: "csstype@npm:3.1.3" - checksum: 10c0/80c089d6f7e0c5b2bd83cf0539ab41474198579584fa10d86d0cafe0642202343cbc119e076a0b1aece191989477081415d66c9fefbf3c957fc2fc4b7009f248 +"csstype@npm:^3.2.2": + version: 3.2.3 + resolution: "csstype@npm:3.2.3" + checksum: 10c0/cd29c51e70fa822f1cecd8641a1445bed7063697469d35633b516e60fe8c1bde04b08f6c5b6022136bb669b64c63d4173af54864510fbb4ee23281801841a3ce languageName: node linkType: hard @@ -2009,7 +2001,7 @@ __metadata: languageName: node linkType: hard -"js-tokens@npm:^3.0.0 || ^4.0.0, js-tokens@npm:^4.0.0": +"js-tokens@npm:^4.0.0": version: 4.0.0 resolution: "js-tokens@npm:4.0.0" checksum: 10c0/e248708d377aa058eacf2037b07ded847790e6de892bbad3dac0abba2e759cb9f121b00099a65195616badcb6eca8d14d975cb3e89eb1cfda644756402c8aeed @@ -2219,17 +2211,6 @@ __metadata: languageName: node linkType: hard -"loose-envify@npm:^1.1.0": - version: 1.4.0 - resolution: "loose-envify@npm:1.4.0" - dependencies: - js-tokens: "npm:^3.0.0 || ^4.0.0" - bin: - loose-envify: cli.js - checksum: 10c0/655d110220983c1a4b9c0c679a2e8016d4b67f6e9c7b5435ff5979ecdb20d0813f4dec0a08674fcbdd4846a3f07edbb50a36811fd37930b94aaa0d9daceb017e - languageName: node - linkType: hard - "lru-cache@npm:^10.0.1, lru-cache@npm:^10.2.0": version: 10.4.3 resolution: "lru-cache@npm:10.4.3" @@ -2740,24 +2721,21 @@ __metadata: languageName: node linkType: hard -"react-dom@npm:^18.3.1": - version: 18.3.1 - resolution: "react-dom@npm:18.3.1" +"react-dom@npm:^19.2.7": + version: 19.2.7 + resolution: "react-dom@npm:19.2.7" dependencies: - loose-envify: "npm:^1.1.0" - scheduler: "npm:^0.23.2" + scheduler: "npm:^0.27.0" peerDependencies: - react: ^18.3.1 - checksum: 10c0/a752496c1941f958f2e8ac56239172296fcddce1365ce45222d04a1947e0cc5547df3e8447f855a81d6d39f008d7c32eab43db3712077f09e3f67c4874973e85 + react: ^19.2.7 + checksum: 10c0/970ff600f6e80d47d39e2f226f12f226173b3cba3382efc97c5f0cd663de9af38c7a4c11c213fb936094faeac83060d660247accaa96b752180d5b951b9cfecb languageName: node linkType: hard -"react@npm:^18.3.1": - version: 18.3.1 - resolution: "react@npm:18.3.1" - dependencies: - loose-envify: "npm:^1.1.0" - checksum: 10c0/283e8c5efcf37802c9d1ce767f302dd569dd97a70d9bb8c7be79a789b9902451e0d16334b05d73299b20f048cbc3c7d288bbbde10b701fa194e2089c237dbea3 +"react@npm:^19.2.7": + version: 19.2.7 + resolution: "react@npm:19.2.7" + checksum: 10c0/0bd0e2f1bbd4ba97561c6597bf8a5fec05e6476fe61e165c1065598d16668efc6715205599c94d3ddd49d36cb0f21cbf1b9bcc18ee840b805ce222c3e8d558ac languageName: node linkType: hard @@ -3112,12 +3090,10 @@ __metadata: languageName: node linkType: hard -"scheduler@npm:^0.23.2": - version: 0.23.2 - resolution: "scheduler@npm:0.23.2" - dependencies: - loose-envify: "npm:^1.1.0" - checksum: 10c0/26383305e249651d4c58e6705d5f8425f153211aef95f15161c151f7b8de885f24751b377e4a0b3dd42cce09aad3f87a61dab7636859c0d89b7daf1a1e2a5c78 +"scheduler@npm:^0.27.0": + version: 0.27.0 + resolution: "scheduler@npm:0.27.0" + checksum: 10c0/4f03048cb05a3c8fddc45813052251eca00688f413a3cee236d984a161da28db28ba71bd11e7a3dd02f7af84ab28d39fb311431d3b3772fed557945beb00c452 languageName: node linkType: hard