compatible with react 19 and r3f v9

bbohlender · bbohlender · commit febdc1756b86 · 2025-01-27T01:25:12.000+01:00
diff --git a/examples/demo-controller/app.tsx b/examples/demo-controller/app.tsx
@@ -1,5 +1,5 @@
-import { Canvas, createPortal, GroupProps, useFrame } from '@react-three/fiber'
-import { createXRStore, XR, useLoadXRControllerLayout, useLoadXRControllerModel } from '@react-three/xr'
+import { Canvas, createPortal, ThreeElements, useFrame } from '@react-three/fiber'
+import { useLoadXRControllerLayout, useLoadXRControllerModel } from '@react-three/xr'
 import { XRControllerGamepadComponentId, XRControllerLayout, getXRControllerComponentObject } from '@pmndrs/xr'
 import { PropsWithChildren, Suspense, useEffect, useRef, useState } from 'react'
 import { Group, MeshBasicMaterial, Object3D } from 'three'
@@ -23,7 +23,7 @@ export function App() {
   )
 }
 
-function TutorialController(props: Omit<GroupProps, 'children'>) {
+function TutorialController(props: Omit<ThreeElements['group'], 'children'>) {
   const layout = useLoadXRControllerLayout(['meta-quest-touch-plus'], 'right')
   const model = useLoadXRControllerModel(layout)
   const materialRef = useRef<MeshBasicMaterial>(null)
diff --git a/examples/demo-controller/package.json b/examples/demo-controller/package.json
@@ -1,7 +1,6 @@
 {
     "dependencies": {
         "@pmndrs/xr": "workspace:^",
-        "@react-three/drei": "^9.112.0",
         "@react-three/uikit": "^0.5.3",
         "@react-three/xr": "workspace:^"
     },
diff --git a/examples/editor/app.tsx b/examples/editor/app.tsx
@@ -642,7 +642,7 @@ function Hover({
   children,
   hoverTargetRef,
 }: {
-  hoverTargetRef?: RefObject<Object3D>
+  hoverTargetRef?: RefObject<Object3D | null>
   children?: (hovered: boolean) => ReactNode
 }) {
   const ref = useRef<Group>(null)
@@ -664,7 +664,15 @@ function vibrateOnEvent(e: PointerEvent) {
 
 extend({ MeshLineGeometry, MeshLineMaterial })
 
-function StripedLineToCenter({ fromRef, width, color }: { fromRef: RefObject<Object3D>; width: number; color: Color }) {
+function StripedLineToCenter({
+  fromRef,
+  width,
+  color,
+}: {
+  fromRef: RefObject<Object3D | null>
+  width: number
+  color: Color
+}) {
   const ref = useRef<Mesh>(null)
   const materialRef = useRef<MeshLineMaterial>(null)
   useFrame(() => {
@@ -690,8 +698,8 @@ function StripedLineToCenter({ fromRef, width, color }: { fromRef: RefObject<Obj
   )
 }
 
-const handleStartAudioEffectRef: RefObject<PAudio> = { current: null }
-const handleEndAudioEffectRef: RefObject<PAudio> = { current: null }
+const handleStartAudioEffectRef: RefObject<PAudio | null> = { current: null }
+const handleEndAudioEffectRef: RefObject<PAudio | null> = { current: null }
 
 function AudioEffects() {
   return (
diff --git a/examples/editor/package.json b/examples/editor/package.json
@@ -2,7 +2,6 @@
   "dependencies": {
     "@pmndrs/handle": "workspace:^",
     "@pmndrs/pointer-events": "workspace:^",
-    "@react-three/drei": "^9.118.0",
     "@react-three/handle": "workspace:^",
     "@react-three/xr": "workspace:^",
     "meshline": "^3.3.1",
diff --git a/examples/handheld-ar/package.json b/examples/handheld-ar/package.json
@@ -1,6 +1,5 @@
 {
     "dependencies": {
-        "@react-three/drei": "^9.109.2",
         "@react-three/xr": "workspace:^"
     },
     "scripts": {
diff --git a/examples/handle/package.json b/examples/handle/package.json
@@ -3,7 +3,6 @@
     "@dimforge/rapier3d-compat": "^0.14.0",
     "@pmndrs/handle": "workspace:^",
     "@pmndrs/pointer-events": "workspace:^",
-    "@react-three/drei": "^9.118.0",
     "@react-three/handle": "workspace:^",
     "@react-three/rapier": "^1.5.0",
     "@react-three/xr": "workspace:^"
diff --git a/examples/handle/smoke.tsx b/examples/handle/smoke.tsx
@@ -1,4 +1,4 @@
-import { InstancedMeshProps, useFrame } from '@react-three/fiber'
+import { ThreeElements, useFrame } from '@react-three/fiber'
 import { useEffect, useMemo, useRef } from 'react'
 import {
   BufferGeometry,
@@ -28,7 +28,7 @@ export function Smoke({
   maxSize: number
   minSize: number
   spawnRate: number
-} & InstancedMeshProps) {
+} & Omit<ThreeElements['instancedMesh'], 'args'>) {
   const ref = useRef<InstancedMesh<BufferGeometry, MeshBasicMaterial>>(null)
   const maxLength = (count / spawnRate) * speed
   const opacityAttribute = useMemo(() => {
diff --git a/examples/layers/package.json b/examples/layers/package.json
@@ -1,7 +1,6 @@
 {
   "dependencies": {
     "@pmndrs/pointer-events": "workspace:^",
-    "@react-three/drei": "^9.111.0",
     "@react-three/xr": "workspace:^"
   },
   "scripts": {
diff --git a/examples/minecraft/package.json b/examples/minecraft/package.json
@@ -1,6 +1,5 @@
 {
   "dependencies": {
-    "@react-three/drei": "^9.108.4",
     "@react-three/rapier": "^1.4.0",
     "@react-three/xr": "workspace:^",
     "zustand": "^4.5.4"
diff --git a/examples/minecraft/src/Axe.tsx b/examples/minecraft/src/Axe.tsx
@@ -7,10 +7,10 @@ title: Minecraft Diamond Axe
 */
 
 import { useGLTF } from '@react-three/drei'
-import { GroupProps } from '@react-three/fiber'
+import { ThreeElements } from '@react-three/fiber'
 import { Mesh } from 'three'
 
-export function Axe(props: GroupProps) {
+export function Axe(props: ThreeElements['group']) {
   const { nodes, materials } = useGLTF('axe.glb')
   return (
     <group dispose={null} {...props}>
diff --git a/examples/miniature/package.json b/examples/miniature/package.json
@@ -1,6 +1,5 @@
 {
     "dependencies": {
-        "@react-three/drei": "^9.108.3",
         "@react-three/xr": "workspace:^",
         "zustand": "^4.5.2"
     },
diff --git a/examples/pingpong/package.json b/examples/pingpong/package.json
@@ -1,6 +1,5 @@
 {
   "dependencies": {
-    "@react-three/drei": "^9.108.3",
     "@react-three/rapier": "^1.4.0",
     "@react-three/xr": "workspace:^",
     "valtio": "^1.13.2"
diff --git a/examples/rag-doll/package.json b/examples/rag-doll/package.json
@@ -1,7 +1,6 @@
 {
   "dependencies": {
     "@react-three/cannon": "^6.6.0",
-    "@react-three/drei": "^9.108.3",
     "@react-three/xr": "workspace:^",
     "@pmndrs/pointer-events": "workspace:^"
   },
diff --git a/examples/react-three-xr/smoke.tsx b/examples/react-three-xr/smoke.tsx
@@ -1,4 +1,4 @@
-import { InstancedMeshProps, useFrame } from '@react-three/fiber'
+import { ThreeElements, useFrame } from '@react-three/fiber'
 import { useEffect, useMemo, useRef } from 'react'
 import {
   BufferGeometry,
@@ -28,7 +28,7 @@ export function Smoke({
   maxSize: number
   minSize: number
   spawnRate: number
-} & InstancedMeshProps) {
+} & Omit<ThreeElements['instancedMesh'], 'args'>) {
   const ref = useRef<InstancedMesh<BufferGeometry, MeshBasicMaterial>>(null)
   const maxLength = (count / spawnRate) * speed
   const opacityAttribute = useMemo(() => {
diff --git a/examples/rollercoaster/package.json b/examples/rollercoaster/package.json
@@ -1,6 +1,5 @@
 {
     "dependencies": {
-        "@react-three/drei": "^9.108.3",
         "@react-three/xr": "workspace:^"
     },
     "scripts": {
diff --git a/examples/room-with-shadows/package.json b/examples/room-with-shadows/package.json
@@ -1,6 +1,5 @@
 {
   "dependencies": {
-    "@react-three/drei": "^9.108.3",
     "@react-three/xr": "workspace:^",
     "maath": "^0.10.8"
   },
diff --git a/examples/secondary-input-sources/package.json b/examples/secondary-input-sources/package.json
@@ -1,6 +1,5 @@
 {
   "dependencies": {
-    "@react-three/drei": "^9.109.5",
     "@react-three/uikit": "^0.4.1",
     "@react-three/uikit-lucide": "^0.4.1",
     "@react-three/xr": "workspace:^"
diff --git a/examples/stage/package.json b/examples/stage/package.json
@@ -1,6 +1,5 @@
 {
   "dependencies": {
-    "@react-three/drei": "^9.108.3",
     "@react-three/xr": "workspace:^"
   },
   "type": "module",
diff --git a/examples/uikit/package.json b/examples/uikit/package.json
@@ -1,7 +1,6 @@
 {
   "dependencies": {
     "@pmndrs/pointer-events": "workspace:^",
-    "@react-three/drei": "^9.108.3",
     "@react-three/uikit": "^0.8.3",
     "@react-three/uikit-default": "^0.8.3",
     "@react-three/uikit-lucide": "^0.8.3",
diff --git a/examples/watch/package.json b/examples/watch/package.json
@@ -1,7 +1,6 @@
 {
   "dependencies": {
     "@preact/signals-core": "^1.6.1",
-    "@react-three/drei": "^9.108.3",
     "@react-three/uikit": "^0.4.1",
     "@react-three/uikit-lucide": "^0.4.1",
     "@react-three/xr": "workspace:^"
diff --git a/package.json b/package.json
@@ -4,12 +4,13 @@
   "type": "module",
   "devDependencies": {
     "@react-three/eslint-plugin": "^0.1.1",
-    "@react-three/fiber": "^8.16.6",
+    "@react-three/fiber": "rc",
+    "@react-three/drei": "rc",
     "@types/chai": "^5.0.1",
     "@types/eslint": "^8.56.10",
     "@types/mocha": "^10.0.10",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
     "@types/three": "latest",
     "@types/webxr": "^0.5.16",
     "@typescript-eslint/eslint-plugin": "^7.12.0",
@@ -26,8 +27,8 @@
     "json": "^11.0.0",
     "mocha": "^10.8.2",
     "playwright": "^1.45.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19",
+    "react-dom": "^19",
     "three": "latest",
     "typescript": "^5.5.4",
     "vite": "^5.2.11"
diff --git a/packages/handle/src/handles/scale/index.ts b/packages/handle/src/handles/scale/index.ts
@@ -104,14 +104,14 @@ import {
 import { Group, Vector3Tuple } from 'three'
 import { HandlesContext } from '../context.js'
 import { HandleOptions, HandleTransformOptions } from '@pmndrs/handle'
-import { GroupProps } from '@react-three/fiber'
+import { ThreeElements } from '@react-three/fiber'
 import { FreeScaleControl } from './free.js'
 import { HandlesAxisHighlight } from '../axis.js'
 import { AxisScaleHande } from './axis.js'
 import { PlaneScaleHandle } from './plane.js'
 import { HandlesSize } from '../size.js'
 
-export type ScaleHandlesProperties = GroupProps &
+export type ScaleHandlesProperties = ThreeElements['group'] &
   Pick<HandleOptions<any>, 'alwaysUpdate' | 'apply' | 'stopPropagation'> & {
     enabled?: Exclude<HandleTransformOptions, Array<Vector3Tuple>>
     size?: number
diff --git a/packages/pointer-events/package.json b/packages/pointer-events/package.json
@@ -37,7 +37,6 @@
   "dependencies": {},
   "devDependencies": {
     "@types/node": "^20.12.11",
-    "@react-three/fiber": "^8.17.9",
     "vite": "^5.2.11",
     "vitest": "^2.0.5"
   }
diff --git a/packages/pointer-events/src/index.ts b/packages/pointer-events/src/index.ts
@@ -1,12 +1,12 @@
-import type { Root } from '@react-three/fiber/dist/declarations/src/core/renderer.js'
+import type { createStore } from '@react-three/fiber/dist/declarations/src/core/store.js'
 import type { AllowedPointerEvents, AllowedPointerEventsType } from './pointer.js'
 
 declare module 'three' {
   interface Object3D {
     __r3f?: {
       eventCount: number
       handlers: Record<string, ((e: any) => void) | undefined>
-      root: Root['store']
+      root: ReturnType<typeof createStore>
     }
     /**
      * undefined and true means the transformation is ready
diff --git a/packages/react/handle/package.json b/packages/react/handle/package.json
@@ -31,6 +31,9 @@
     "@pmndrs/pointer-events": "workspace:^",
     "zustand": "^4.5.2"
   },
+  "devDependencies": {
+    "@react-three/fiber": "rc"
+  },
   "scripts": {
     "build": "tsc",
     "check:prettier": "prettier --check src",
diff --git a/packages/react/handle/src/component.tsx b/packages/react/handle/src/component.tsx
@@ -3,7 +3,7 @@ import { HandleOptions, useHandle } from './hook.js'
 import { Group, Object3D } from 'three'
 import { HandleStore } from '@pmndrs/handle'
 
-const HandleTargetRefContext = createContext<RefObject<Object3D> | undefined>(undefined)
+const HandleTargetRefContext = createContext<RefObject<Object3D | null> | undefined>(undefined)
 
 export const HandleTarget = forwardRef<Object3D, { children?: ReactNode; targetRef?: RefObject<Object3D> }>(
   ({ targetRef, children }, ref) => {
@@ -25,7 +25,7 @@ export const Handle = forwardRef<
   {
     children?: ReactNode
     handleRef?: RefObject<Object3D>
-    targetRef?: 'from-context' | RefObject<Object3D>
+    targetRef?: 'from-context' | RefObject<Object3D | null>
     /**
      * @deprecated use `targetRef="from-context"` instead
      */
diff --git a/packages/react/handle/src/handles/pivot.tsx b/packages/react/handle/src/handles/pivot.tsx
@@ -4,17 +4,8 @@ import {
   PivotHandlesHandles as PivotHandlesHandlesImpl,
   HandlesProperties,
 } from '@pmndrs/handle'
-import { GroupProps, useFrame } from '@react-three/fiber'
-import {
-  createContext,
-  forwardRef,
-  ReactNode,
-  useContext,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-} from 'react'
+import { ThreeElements, useFrame } from '@react-three/fiber'
+import { createContext, forwardRef, useContext, useEffect, useImperativeHandle, useMemo, useRef } from 'react'
 import { Group } from 'three'
 
 export type PivotHandlesProperties = PivotHandlesContextProperties & PivotHandlesHandlesProperties
@@ -39,7 +30,7 @@ export const PivotHandles = forwardRef<Group, PivotHandlesProperties>(
 
 const HandlesContext = createContext<HandlesContextImpl | undefined>(undefined)
 
-export type PivotHandlesContextProperties = Omit<GroupProps, 'scale'> &
+export type PivotHandlesContextProperties = Omit<ThreeElements['group'], 'scale'> &
   Pick<HandleOptions<any>, 'alwaysUpdate' | 'apply' | 'stopPropagation'>
 
 export const PivotHandlesContext = forwardRef<Group, PivotHandlesContextProperties>(
diff --git a/packages/react/handle/src/handles/transform.tsx b/packages/react/handle/src/handles/transform.tsx
@@ -8,7 +8,7 @@ import {
   HandleOptions,
   TransformHandlesSpace,
 } from '@pmndrs/handle'
-import { GroupProps, useFrame } from '@react-three/fiber'
+import { ThreeElements, useFrame } from '@react-three/fiber'
 import { createContext, forwardRef, useContext, useEffect, useImperativeHandle, useMemo, useRef } from 'react'
 import { Euler, Group, Vector2Tuple } from 'three'
 
@@ -51,7 +51,7 @@ export const HandlesAxisHighlight = forwardRef<HandlesAxisHighlightImpl, { tag:
 
 const HandlesContext = createContext<HandlesContextImpl | undefined>(undefined)
 
-export type TransformHandlesContextProperties = Omit<GroupProps, 'scale'> &
+export type TransformHandlesContextProperties = Omit<ThreeElements['group'], 'scale'> &
   Pick<HandleOptions<any>, 'alwaysUpdate' | 'apply' | 'stopPropagation'> & {
     context?: HandlesContextImpl
     space?: TransformHandlesSpace | null
diff --git a/packages/react/handle/src/hook.ts b/packages/react/handle/src/hook.ts
@@ -7,7 +7,7 @@ export type HandleOptions<T> = {
   /**
    * @default target
    */
-  handle?: RefObject<Object3D>
+  handle?: RefObject<Object3D | null>
   /**
    * set to `false` to bind the store yourself using `store.bind(handle)` or capture objects yourself using `store.capture(pointerId, handle)`
    * @default true
@@ -16,7 +16,7 @@ export type HandleOptions<T> = {
 } & BaseHandleOptions<T>
 
 export function useHandle<T>(
-  target: RefObject<Object3D>,
+  target: RefObject<Object3D | null>,
   options: HandleOptions<T> = {},
   getHandleOptions?: () => HandleOptions<T>,
 ): HandleStore<T> {
diff --git a/packages/react/xr/package.json b/packages/react/xr/package.json
@@ -28,6 +28,9 @@
     "react-dom": ">=18",
     "three": "*"
   },
+  "devDependencies": {
+    "@react-three/fiber": "rc"
+  },
   "dependencies": {
     "@pmndrs/pointer-events": "workspace:^",
     "@pmndrs/xr": "workspace:^",
diff --git a/packages/react/xr/src/controller-locomotion.ts b/packages/react/xr/src/controller-locomotion.ts
@@ -22,7 +22,7 @@ import { useXRStore } from './xr.js'
  */
 export function useXRControllerLocomotion(
   target:
-    | RefObject<Object3D>
+    | RefObject<Object3D | null>
     | ((velocity: Vector3, rotationVelocityY: number, deltaTime: number, state: RootState, frame?: XRFrame) => void),
   translationOptions: XRControllerLocomotionTranslationOptions = {},
   rotationOptions: XRControllerLocomotionRotationOptions = {},
diff --git a/packages/react/xr/src/controller.tsx b/packages/react/xr/src/controller.tsx
@@ -58,7 +58,7 @@ export function useXRControllerButtonEvent(
   id: XRControllerGamepadComponentId,
   onChange: (state: XRControllerGamepadComponentState['state']) => void,
 ): void {
-  const state = useRef<XRControllerGamepadComponentState['state']>()
+  const state = useRef<XRControllerGamepadComponentState['state']>(undefined)
   useFrame(() => {
     const currentState = controller?.gamepad[id]?.state
     if (currentState != null && currentState != state.current) {
diff --git a/packages/react/xr/src/deprecated/hooks.tsx b/packages/react/xr/src/deprecated/hooks.tsx
diff --git a/packages/react/xr/src/deprecated/ray-grab.tsx b/packages/react/xr/src/deprecated/ray-grab.tsx
diff --git a/packages/react/xr/src/guard/facing-camera.tsx b/packages/react/xr/src/guard/facing-camera.tsx
diff --git a/packages/react/xr/src/hit-test.tsx b/packages/react/xr/src/hit-test.tsx
diff --git a/packages/react/xr/src/hooks.ts b/packages/react/xr/src/hooks.ts
diff --git a/packages/react/xr/src/layer.tsx b/packages/react/xr/src/layer.tsx
diff --git a/packages/react/xr/src/mesh.tsx b/packages/react/xr/src/mesh.tsx
diff --git a/packages/react/xr/src/origin.tsx b/packages/react/xr/src/origin.tsx
diff --git a/packages/react/xr/src/plane.tsx b/packages/react/xr/src/plane.tsx
diff --git a/packages/react/xr/src/pointer.tsx b/packages/react/xr/src/pointer.tsx
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"dependencies": {`
`3`	`3`	`"@pmndrs/xr": "workspace:^",`
`4`		`- "@react-three/drei": "^9.112.0",`
`5`	`4`	`"@react-three/uikit": "^0.5.3",`
`6`	`5`	`"@react-three/xr": "workspace:^"`
`7`	`6`	`},`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,5 @@`
`1`	`1`	`{`
`2`	`2`	`"dependencies": {`
`3`		`- "@react-three/drei": "^9.109.2",`
`4`	`3`	`"@react-three/xr": "workspace:^"`
`5`	`4`	`},`
`6`	`5`	`"scripts": {`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"dependencies": {`
`3`	`3`	`"@pmndrs/pointer-events": "workspace:^",`
`4`		`- "@react-three/drei": "^9.111.0",`
`5`	`4`	`"@react-three/xr": "workspace:^"`
`6`	`5`	`},`
`7`	`6`	`"scripts": {`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,5 @@`
`1`	`1`	`{`
`2`	`2`	`"dependencies": {`
`3`		`- "@react-three/drei": "^9.108.4",`
`4`	`3`	`"@react-three/rapier": "^1.4.0",`
`5`	`4`	`"@react-three/xr": "workspace:^",`
`6`	`5`	`"zustand": "^4.5.4"`