Update React to v19 (#1677)

* Update React in root to v19

* Upgrade React to v19 in spec/dummy

* Upgrade ReScript

* Replace .bs.js with preferred .res.js

---------

Co-authored-by: Alexey Romanov <[email protected]>

Author: alexeyr-ci

.prettierignore

@@ -11,4 +11,4 @@ spec/dummy/lib/bs/**
 spec/dummy/public
 **/.yalc/**
 **/generated/**
-*.bs.js
+*.res.js

node_package/tests/jest.setup.js

@@ -5,9 +5,31 @@ if (typeof window !== 'undefined' && typeof window.TextEncoder !== 'undefined')
   throw new Error('TextEncoder is already defined, remove the polyfill');
 }
 
+// Similarly for MessageChannel
+if (typeof window !== 'undefined' && typeof window.MessageChannel !== 'undefined') {
+  throw new Error('MessageChannel is already defined, remove the polyfill');
+}
+
 if (typeof window !== 'undefined') {
   // eslint-disable-next-line global-require
   const { TextEncoder, TextDecoder } = require('util');
   global.TextEncoder = TextEncoder;
   global.TextDecoder = TextDecoder;
+
+  // https://github.com/jsdom/jsdom/issues/2448#issuecomment-1703763542
+  global.MessageChannel = jest.fn().mockImplementation(() => {
+    let onmessage;
+    return {
+      port1: {
+        set onmessage(cb) {
+          onmessage = cb;
+        },
+      },
+      port2: {
+        postMessage: (data) => {
+          onmessage?.({ data });
+        },
+      },
+    };
+  });
 }

package.json

@@ -20,8 +20,8 @@
     "@babel/preset-react": "^7.18.6",
     "@babel/types": "^7.20.7",
     "@types/jest": "^29.5.14",
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.0",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
     "@types/turbolinks": "^5.2.2",
     "@types/webpack-env": "^1.18.4",
     "@typescript-eslint/eslint-plugin": "^6.18.1",
@@ -42,8 +42,8 @@
     "prettier": "^2.8.8",
     "prettier-eslint-cli": "^5.0.0",
     "prop-types": "^15.8.1",
-    "react": "18.3.0-canary-670811593-20240322",
-    "react-dom": "18.3.0-canary-670811593-20240322",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-transform-hmr": "^1.0.4",
     "redux": "^4.2.1",
     "ts-jest": "^29.2.5",

spec/dummy/.gitignore

@@ -34,7 +34,7 @@ yarn-debug.log*
 /.merlin
 /lib/bs/
 /.bsb.lock
-*.bs.js
+*.res.js
 
 # File Generated by ROR FS-based Registry
 **/generated

spec/dummy/.prettierignore

@@ -1,6 +1,6 @@
 node_modules
 public/webpack/
-*.bs.js
+*.res.js
 lib/bs/**
 
 # File Generated by ROR FS-based Registry

spec/dummy/babel.config.js

@@ -10,6 +10,7 @@ module.exports = function (api) {
         '@babel/preset-react',
         {
           development: !isProductionEnv,
+          runtime: 'automatic',
           useBuiltIns: true,
         },
       ],

spec/dummy/client/app/packs/rescript-components.js

@@ -1,7 +1,7 @@
 // This file is used to import your compiled rescript files
-// As per the current configuration, all files are compiled to .bs.js
+// As per the current configuration, all files are compiled to .res.js
 // and they are generated on the same directory as the .res file
 
-import HelloWorldReScript from '../components/HelloWorldReScript.bs.js';
+import HelloWorldReScript from '../components/HelloWorldReScript.res.js';
 
 export { HelloWorldReScript };

spec/dummy/client/app/startup/HelloWorldReScript.jsx

@@ -1,3 +1,3 @@
-import HelloWorldReScript from '../components/HelloWorldReScript.bs.js';
+import HelloWorldReScript from '../components/HelloWorldReScript.res.js';
 
 export default HelloWorldReScript;

spec/dummy/package.json

@@ -13,7 +13,7 @@
     "@babel/preset-react": "^7.10.4",
     "@babel/runtime": "7.17.9",
     "@hotwired/turbo-rails": "^8.0.4",
-    "@rescript/react": "^0.10.3",
+    "@rescript/react": "^0.13.0",
     "babel-loader": "8.2.4",
     "babel-plugin-macros": "^3.1.0",
     "babel-plugin-module-resolver": "^4.0.0",
@@ -37,16 +37,15 @@
     "nps": "^5.10.0",
     "null-loader": "^4.0.0",
     "prop-types": "^15.7.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-helmet": "^6.1.0",
     "react-on-rails": "link:.yalc/react-on-rails",
-    "react-proptypes": "^1.0.0",
     "react-redux": "^8.0.2",
     "react-router-dom": "^5.2.0",
     "redux": "^4.0.1",
     "redux-thunk": "^2.2.0",
-    "rescript": "^9.1.4",
+    "rescript": "^11.1.4",
     "resolve-url-loader": "^3.1.1",
     "sass": "^1.43.4",
     "sass-loader": "^12.3.0",
@@ -62,8 +61,8 @@
   },
   "devDependencies": {
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.1",
-    "@types/react": "^18.0.14",
-    "@types/react-dom": "^18.0.5",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "@types/react-helmet": "^6.1.5",
     "react-refresh": "^0.11.0",
     "webpack-dev-server": "^4.9.0"

spec/dummy/bsconfig.json renamed to spec/dummy/rescript.json

@@ -6,13 +6,11 @@
       "subdirs": true
     }
   ],
-  "reason": {
-    "react-jsx": 3
-  },
-  "suffix": ".bs.js",
+  "jsx": { "version": 4 },
+  "suffix": ".res.js",
   "package-specs": [
     {
-      "module": "es6",
+      "module": "esmodule",
       "in-source": true
     }
   ],