feat: React 19 support

lib/makeWebpackConfig.js

@@ -30,7 +30,7 @@ module.exports = async (playroomConfig, options) => {
       }
     );
     const { version } = JSON.parse(pkgContents);
-    isLegacyReact = !(version.startsWith('18') || version.startsWith('0.0.0'));
+    isLegacyReact = !(version.startsWith('18') || version.startsWith('19') || version.startsWith('0.0.0'));
   } catch (e) {
     throw new Error('Unable to read `react-dom` package json');
   }

package.json

@@ -73,8 +73,8 @@
     "@types/base64-url": "^2.2.0",
     "@types/codemirror": "^5.60.5",
     "@types/prettier": "^2.7.1",
-    "@types/react": "^18.0.26",
-    "@types/react-dom": "^18.0.9",
+    "@types/react": "19.0.8",
+    "@types/react-dom": "19.0.3",
     "@vanilla-extract/css": "^1.9.2",
     "@vanilla-extract/css-utils": "^0.1.3",
     "@vanilla-extract/dynamic": "^2.1.2",
@@ -132,21 +132,26 @@
     "husky": "^8.0.2",
     "jest": "^29.3.1",
     "lint-staged": "^15.2.2",
-    "react": "^18.0.1",
-    "react-dom": "^18.0.1",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "serve": "^14.1.2",
     "start-server-and-test": "^1.15.2",
     "surge": "^0.23.1"
   },
   "peerDependencies": {
-    "react": "^17 || ^18",
-    "react-dom": "^17 || ^18"
+    "react": "^17 || ^18 || ^19",
+    "react-dom": "^17 || ^18 || ^19"
   },
   "engines": {
     "node": ">=18.12.0"
   },
   "packageManager": "[email protected]",
   "volta": {
     "node": "18.19.1"
+  },
+  "pnpm": {
+    "patchedDependencies": {
+      "[email protected]": "patches/[email protected]"
+    }
   }
 }

patches/react-use@17.4.0.patch

@@ -0,0 +1,21 @@
+diff --git a/CHANGELOG.md b/CHANGELOG.md
+deleted file mode 100644
+index 9b28df0e8aa4734af2c7006fd077ff17e2281db5..0000000000000000000000000000000000000000
+diff --git a/esm/useIntersection.d.ts b/esm/useIntersection.d.ts
+index 9d3ac04942d2f3118e5fb5bf3c1758e4513d1fa5..62d128868aa774d80674896a3ce532a6125526aa 100644
+--- a/esm/useIntersection.d.ts
++++ b/esm/useIntersection.d.ts
+@@ -1,3 +1,3 @@
+ import { RefObject } from 'react';
+-declare const useIntersection: (ref: RefObject<HTMLElement>, options: IntersectionObserverInit) => IntersectionObserverEntry | null;
++declare const useIntersection: (ref: RefObject<HTMLElement | null>, options: IntersectionObserverInit) => IntersectionObserverEntry | null;
+ export default useIntersection;
+diff --git a/lib/useIntersection.d.ts b/lib/useIntersection.d.ts
+index 9d3ac04942d2f3118e5fb5bf3c1758e4513d1fa5..62d128868aa774d80674896a3ce532a6125526aa 100644
+--- a/lib/useIntersection.d.ts
++++ b/lib/useIntersection.d.ts
+@@ -1,3 +1,3 @@
+ import { RefObject } from 'react';
+-declare const useIntersection: (ref: RefObject<HTMLElement>, options: IntersectionObserverInit) => IntersectionObserverEntry | null;
++declare const useIntersection: (ref: RefObject<HTMLElement | null>, options: IntersectionObserverInit) => IntersectionObserverEntry | null;
+ export default useIntersection;