Upgrade react and react-dom to v19 and adapt gentype

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
 

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

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"
   }
 }

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;
 

tests/gentype_tests/typescript-react-example/src/ImportHooks.gen.tsx

@@ -9,15 +9,15 @@ 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<any>
 }> = makeRenamedNotChecked as any;
 
 // 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<any>

tests/gentype_tests/typescript-react-example/src/JSXV4.gen.tsx

@@ -7,15 +7,15 @@ 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<any>
 }> = makeNotChecked as any;
 
 // 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<any>
@@ -29,7 +29,7 @@ export type person = { readonly name: string; readonly age: number };
 
 export type props2<a> = { readonly randomString: string; readonly poly: a };
 
-export type renderMe<a> = (_1:props2<a>) => JSX.Element;
+export type renderMe<a> = (_1:props2<a>) => React.JSX.Element;
 
 export type props<actions,person,children,renderMe> = {
   readonly actions?: actions; 

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(
   <div>
     <App name={"Hello"} />
     <Hooks vehicle={{ name: "Car" }} />
   </div>,
-  document.getElementById("root") as HTMLElement,
 );
 
 const x1 = Records.getPayload(Records.payloadValue).v;

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