Fix React 19 compat

preactjs · Dec 6, 2024 · f338044 · f338044
1 parent 2d359bb
commit f338044
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 4 deletions.
diff --git a/.changeset/angry-stingrays-tease.md b/.changeset/angry-stingrays-tease.md
@@ -0,0 +1,6 @@
+---
+"@preact/signals-react-transform": minor
+"@preact/signals-react": minor
+---
+
+Bump `peerDependency` on React to support 19.x
diff --git a/.changeset/sweet-glasses-thank.md b/.changeset/sweet-glasses-thank.md
@@ -0,0 +1,5 @@
+---
+"@preact/signals-react": patch
+---
+
+Fix the stubbed ReactElementType to use the newly added traditional element in v19
diff --git a/packages/react-transform/package.json b/packages/react-transform/package.json
@@ -53,7 +53,7 @@
   },
   "peerDependencies": {
     "@babel/core": "^7.0.0",
-    "react": "^16.14.0 || 17.x || 18.x"
+    "react": "^16.14.0 || 17.x || 18.x || 19.x"
   },
   "devDependencies": {
     "@babel/core": "^7.22.8",

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -68,7 +68,7 @@
     "use-sync-external-store": "^1.2.0"
   },
   "peerDependencies": {
-    "react": "^16.14.0 || 17.x || 18.x"
+    "react": "^16.14.0 || 17.x || 18.x || 19.x"
   },
   "devDependencies": {
     "@types/react": "^18.0.18",

diff --git a/packages/react/runtime/src/index.ts b/packages/react/runtime/src/index.ts
@@ -5,14 +5,26 @@ import {
 	Signal,
 	ReadonlySignal,
 } from "@preact/signals-core";
-import { useRef, useMemo, useEffect, useLayoutEffect } from "react";
+import {
+	useRef,
+	useMemo,
+	useEffect,
+	useLayoutEffect,
+	version as reactVersion,
+} from "react";
 import { useSyncExternalStore } from "use-sync-external-store/shim/index.js";
 import { isAutoSignalTrackingInstalled } from "./auto";
 
 export { installAutoSignalTracking } from "./auto";
 
+const [major] = reactVersion.split(".").map(Number);
 const Empty = [] as const;
-const ReactElemType = Symbol.for("react.element"); // https://github.com/facebook/react/blob/346c7d4c43a0717302d446da9e7423a8e28d8996/packages/shared/ReactSymbols.js#L15
+// V19 https://github.com/facebook/react/blob/346c7d4c43a0717302d446da9e7423a8e28d8996/packages/shared/ReactSymbols.js#L15
+// V18 https://github.com/facebook/react/blob/346c7d4c43a0717302d446da9e7423a8e28d8996/packages/shared/ReactSymbols.js#L15
+const ReactElemType = Symbol.for(
+	major >= 19 ? "react.transitional.element" : "react.element"
+);
+
 const noop = () => {};
 
 export function wrapJsx<T>(jsx: T): T {