feat: React 19 (#4)

CodyJasonBennett · Feb 20, 2025 · cba87d4 · cba87d4
1 parent b661e98
commit cba87d4
Show file tree

Hide file tree

Showing 7 changed files with 1,362 additions and 1,677 deletions.
diff --git a/demo/index.jsx b/demo/index.jsx
@@ -1,3 +1,4 @@
+import * as React from 'preact/compat' // JSX transform
 import { render } from 'preact'
 import { usePlane, useBox, Physics } from '@react-three/cannon'
 import { OrbitControls } from '@react-three/drei'
@@ -25,8 +26,8 @@ function Cube(props) {
 
 render(
   <Canvas shadows camera={{ fov: 50, position: [-5, 5, 5] }}>
-    <ambientLight />
-    <spotLight castShadow angle={0.25} penumbra={0.5} position={[10, 10, 5]} />
+    <ambientLight intensity={Math.PI} />
+    <spotLight intensity={Math.PI} castShadow angle={0.25} penumbra={0.5} decay={0} position={[10, 10, 5]} />
     <OrbitControls />
     <Physics>
       <Plane />

diff --git a/package.json b/package.json
@@ -52,20 +52,20 @@
   },
   "sideEffects": false,
   "devDependencies": {
-    "@preact/preset-vite": "^2.5.0",
-    "@react-three/cannon": "^6.5.2",
-    "@react-three/drei": "^9.57.1",
-    "@react-three/fiber": "^8.12.0",
-    "@types/react": "^18.0.28",
-    "@types/react-dom": "^18.0.11",
-    "jsdom": "^21.1.0",
-    "preact": "^10.16.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "three": "^0.150.1",
-    "typescript": "^4.9.5",
-    "vite": "^4.1.4",
-    "vitest": "^0.29.2"
+    "@react-three/cannon": "^6.6.0",
+    "@react-three/drei": "^10.0.0",
+    "@react-three/fiber": "^9.0.4",
+    "@types/react": "^19.0.4",
+    "@types/react-dom": "^19.0.4",
+    "@types/three": "^0.173.0",
+    "jsdom": "^26.0.0",
+    "preact": "^10.26.2",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "three": "^0.173.0",
+    "typescript": "^5.7.3",
+    "vite": "^6.1.1",
+    "vitest": "^3.0.6"
   },
   "peerDependencies": {
     "preact": ">=10"

diff --git a/src/constants.ts b/src/constants.ts
@@ -3,6 +3,7 @@ const InputContinuousLane = 0b0000000000000000000000000001000
 const DefaultLane = 0b0000000000000000000000000100000
 const IdleLane = 0b0100000000000000000000000000000
 
+export const NoEventPriority = 0
 export const DiscreteEventPriority = SyncLane
 export const ContinuousEventPriority = InputContinuousLane
 export const DefaultEventPriority = DefaultLane

diff --git a/src/index.ts b/src/index.ts
@@ -15,6 +15,10 @@ interface FiberNode<T = any> extends HTMLElement {
   hostConfig: HostConfig
 }
 
+// https://github.com/facebook/react/blob/main/packages/react-reconciler/src/ReactFiberFlags.js
+const NoFlags = 0
+const Update = 4
+
 export interface Fiber<P = any, I = any, R = any> extends VNode<P> {
   __c?: Component & {
     __P: FiberNode<R>
@@ -27,6 +31,8 @@ export interface Fiber<P = any, I = any, R = any> extends VNode<P> {
   container: FiberNode<R>
   props: P & { children: ComponentChildren }
   memoizedProps?: P & { children: ComponentChildren }
+  sibling: Fiber | null
+  flags: number
 }
 
 export interface HostConfig<
@@ -60,7 +66,7 @@ export interface HostConfig<
     rootContainer: Container,
     hostContext: HostContext,
   ): boolean
-  prepareUpdate(
+  prepareUpdate?(
     instance: Instance,
     type: Type,
     oldProps: Props,
@@ -96,6 +102,13 @@ export interface HostConfig<
     nextProps: Props,
     internalHandle: Fiber<Props, Instance, Container>,
   ): void
+  commitUpdate?(
+    instance: Instance,
+    type: Type,
+    prevProps: Props,
+    nextProps: Props,
+    internalHandle: Fiber<Props, Instance, Container>,
+  ): void
   // hideInstance?(instance: Instance): void
   // hideTextInstance?(textInstance: TextInstance): void
   // unhideInstance?(instance: Instance, props: Props): void
@@ -118,17 +131,26 @@ class FiberNode extends HTMLElement {
       fiber.props[name] = value
 
       if (fiber.stateNode) {
-        const update = HostConfig.prepareUpdate(
-          fiber.stateNode,
-          fiber.__type,
-          fiber.memoizedProps,
-          fiber.props,
-          containerInfo,
-          null,
-        )
-        // A payload was specified, update instance
-        if (update)
-          HostConfig.commitUpdate!(fiber.stateNode, update, fiber.__type, fiber.memoizedProps, fiber.props, fiber)
+        // Emulate scheduled work
+        fiber.sibling = (this.nextSibling as FiberNode | null)?.fiber ?? null
+        fiber.flags = this.nextSibling?.nextSibling ? Update : NoFlags
+
+        // React 19 removes prepareUpdate and update payload
+        if (HostConfig.prepareUpdate) {
+          const update = HostConfig.prepareUpdate(
+            fiber.stateNode,
+            fiber.__type,
+            fiber.memoizedProps,
+            fiber.props,
+            containerInfo,
+            null,
+          )
+          // A payload was specified, update instance
+          if (update)
+            HostConfig.commitUpdate!(fiber.stateNode, update, fiber.__type, fiber.memoizedProps, fiber.props, fiber)
+        } else {
+          ;(HostConfig as any).commitUpdate?.(fiber.stateNode, fiber.__type, fiber.memoizedProps, fiber.props, fiber)
+        }
       } else {
         // Cleanup overrides
         this.ownerSVGElement = null