feat: R3F v9, React 19 support

pmndrs · Jan 1, 2025 · 49bc2bf · 49bc2bf
1 parent d5ee732
commit 49bc2bf
Show file tree

Hide file tree

Showing 136 changed files with 10,025 additions and 14,897 deletions.
diff --git a/.storybook/stories/CubeCamera.stories.tsx b/.storybook/stories/CubeCamera.stories.tsx
@@ -22,11 +22,9 @@ export default {
 
 type Story = StoryObj<typeof CubeCamera>
 
-declare global {
-  namespace JSX {
-    interface IntrinsicElements {
-      axisHelper: object
-    }
+declare module '@react-three/fiber' {
+  interface ThreeElements {
+    axisHelper: object
   }
 }
 

diff --git a/.storybook/stories/CurveModifier.stories.tsx b/.storybook/stories/CurveModifier.stories.tsx
@@ -9,15 +9,13 @@ import { CurveModifier, CurveModifierRef } from '../../src'
 
 extend({ StdText: TextGeometry })
 
-type TextGeometryImpl = JSX.IntrinsicElements['extrudeGeometry'] & {
+type TextGeometryImpl = ThreeElements['extrudeGeometry'] & {
   args: [string, TextGeometryParameters]
 }
 
-declare global {
-  namespace JSX {
-    interface IntrinsicElements {
-      stdText: TextGeometryImpl
-    }
+declare module '@react-three/fiber' {
+  interface ThreeElements {
+    stdText: TextGeometryImpl
   }
 }
 

diff --git a/.storybook/stories/ScreenQuad.stories.tsx b/.storybook/stories/ScreenQuad.stories.tsx
@@ -50,13 +50,11 @@ extend({ ColorShiftMaterial })
 type ColorShiftMaterialImpl = {
   time: number
   resolution: number[]
-} & JSX.IntrinsicElements['shaderMaterial']
+} & ThreeElements['shaderMaterial']
 
-declare global {
-  namespace JSX {
-    interface IntrinsicElements {
-      colorShiftMaterial: ColorShiftMaterialImpl
-    }
+declare module '@react-three/fiber' {
+  interface ThreeElements {
+    colorShiftMaterial: ColorShiftMaterialImpl
   }
 }
 

diff --git a/.storybook/stories/shaderMaterial.stories.tsx b/.storybook/stories/shaderMaterial.stories.tsx
@@ -50,13 +50,11 @@ extend({ MyMaterial })
 type MyMaterialImpl = {
   repeats: number
   map: Texture | Texture[]
-} & JSX.IntrinsicElements['shaderMaterial']
+} & ThreeElements['shaderMaterial']
 
-declare global {
-  namespace JSX {
-    interface IntrinsicElements {
-      myMaterial: MyMaterialImpl
-    }
+declare module '@react-three/fiber' {
+  interface ThreeElements {
+    myMaterial: MyMaterialImpl
   }
 }
 

diff --git a/docs/abstractions/image.mdx b/docs/abstractions/image.mdx
@@ -24,7 +24,7 @@ sourcecode: src/core/Image.tsx
 A shader-based image component with auto-cover (similar to css/background: cover).
 
 ```tsx
-export type ImageProps = Omit<JSX.IntrinsicElements['mesh'], 'scale'> & {
+export type ImageProps = Omit<ThreeElements['mesh'], 'scale'> & {
   segments?: number
   scale?: number | [number, number]
   color?: Color

diff --git a/docs/abstractions/outlines.mdx b/docs/abstractions/outlines.mdx
@@ -12,7 +12,7 @@ sourcecode: src/core/Outlines.tsx
 An ornamental component that extracts the geometry from its parent and displays an [inverted-hull outline](https://bnpr.gitbook.io/bnpr/outline/inverse-hull-method). Supported parents are `<mesh>`, `<skinnedMesh>` and `<instancedMesh>`.
 
 ```tsx
-type OutlinesProps = JSX.IntrinsicElements['group'] & {
+type OutlinesProps = ThreeElements['group'] & {
   /** Outline color, default: black */
   color: ReactThreeFiber.Color
   /** Line thickness is independent of zoom, default: false */

diff --git a/docs/abstractions/splat.mdx b/docs/abstractions/splat.mdx
@@ -23,7 +23,7 @@ type SplatProps = {
   alphaHash?: boolean
   /** Chunk size for lazy loading, prevents chokings the worker, default: 25000 (25kb) */
   chunkSize?: number
-} & JSX.IntrinsicElements['mesh']
+} & ThreeElements['mesh']
 ```
 
 ```jsx

diff --git a/docs/cameras/cube-camera.mdx b/docs/cameras/cube-camera.mdx
@@ -8,7 +8,7 @@ sourcecode: src/core/CubeCamera.tsx
 A [THREE.CubeCamera](https://threejs.org/docs/#api/en/cameras/CubeCamera) that returns its texture as a render-prop. It makes children invisible while rendering to the internal buffer so that they are not included in the reflection.
 
 ```tsx
-type Props = JSX.IntrinsicElements['group'] & {
+type Props = ThreeElements['group'] & {
   /** Number of frames to render, Infinity */
   frames?: number
   /** Resolution of the FBO, 256 */

diff --git a/docs/cameras/perspective-camera.mdx b/docs/cameras/perspective-camera.mdx
@@ -6,7 +6,7 @@ sourcecode: src/core/PerspectiveCamera.tsx
 [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/camera-perspectivecamera--perspective-camera-scene-st)
 
 ```tsx
-type Props = Omit<JSX.IntrinsicElements['perspectiveCamera'], 'children'> & {
+type Props = Omit<ThreeElements['perspectiveCamera'], 'children'> & {
   /** Registers the camera as the system default, fiber will start rendering with it */
   makeDefault?: boolean
   /** Making it manual will stop responsiveness and you have to calculate aspect ratio yourself. */

diff --git a/docs/controls/motion-path-controls.mdx b/docs/controls/motion-path-controls.mdx
@@ -12,15 +12,15 @@ sourcecode: src/core/MotionPathControls.tsx
 Motion path controls, it takes a path of bezier curves or catmull-rom curves as input and animates the passed `object` along that path. It can be configured to look upon an external object for staging or presentation purposes by adding a `focusObject` property (ref).
 
 ```tsx
-type MotionPathProps = JSX.IntrinsicElements['group'] & {
+type MotionPathProps = ThreeElements['group'] & {
   /** An optional array of THREE curves */
   curves?: THREE.Curve<THREE.Vector3>[]
   /** Show debug helpers */
   debug?: boolean
   /** The target object that is moved, default: null (the default camera) */
-  object?: React.MutableRefObject<THREE.Object3D>
+  object?: React.RefObject<THREE.Object3D>
   /** An object where the target looks towards, can also be a vector, default: null */
-  focus?: [x: number, y: number, z: number] | React.MutableRefObject<THREE.Object3D>
+  focus?: [x: number, y: number, z: number] | React.RefObject<THREE.Object3D>
   /** Position between 0 (start) and end (1), if this is not set useMotion().current must be used, default: null */
   offset?: number
   /** Optionally smooth the curve, default: false */
@@ -83,9 +83,9 @@ type MotionState = {
   /** The combined curve */
   path: THREE.CurvePath<THREE.Vector3>
   /** The focus object */
-  focus: React.MutableRefObject<THREE.Object3D<THREE.Event>> | [x: number, y: number, z: number] | undefined
+  focus: React.RefObject<THREE.Object3D<THREE.Event>> | [x: number, y: number, z: number] | undefined
   /** The target object that is moved along the curve */
-  object: React.MutableRefObject<THREE.Object3D<THREE.Event>>
+  object: React.RefObject<THREE.Object3D<THREE.Event>>
   /** The automated, 0-1 normalised and damped current goal position along curve */
   offset: number
   /** The current point on the curve */

diff --git a/docs/gizmos/transform-controls.mdx b/docs/gizmos/transform-controls.mdx
@@ -21,7 +21,7 @@ You can wrap objects which then receive a transform gizmo.
 </TransformControls>
 ```
 
-You could also reference the object which might make it easier to exchange the target. Now the object does not have to be part of the same sub-graph. References can be plain objects or React.MutableRefObjects.
+You could also reference the object which might make it easier to exchange the target. Now the object does not have to be part of the same sub-graph. References can be plain objects or React.RefObjects.
 
 ```jsx
 <TransformControls object={mesh} mode="translate" />

diff --git a/docs/misc/trail-use-trail.mdx b/docs/misc/trail-use-trail.mdx
@@ -7,7 +7,7 @@ sourcecode: src/core/Trail.tsx
 
 A hook to obtain an array of points that make up a [Trail](#trail). You can use this array to drive your own `MeshLine` or make a trail out of anything you please.
 
-Note: The hook returns a ref (`MutableRefObject<Vector3[]>`) this means updates to it will not trigger a re-draw, thus keeping this cheap.
+Note: The hook returns a ref (`RefObject<Vector3[]>`) this means updates to it will not trigger a re-draw, thus keeping this cheap.
 
 ```js
 const points = useTrail(

diff --git a/docs/performances/bvh.mdx b/docs/performances/bvh.mdx
@@ -30,7 +30,7 @@ export interface BVHOptions {
 }
 
 export type BvhProps = BVHOptions &
-  JSX.IntrinsicElements['group'] & {
+  ThreeElements['group'] & {
     /**Enabled, default: true */
     enabled?: boolean
     /** Use .raycastFirst to retrieve hits which is generally faster, default: false */

diff --git a/docs/portals/fisheye.mdx b/docs/portals/fisheye.mdx
@@ -10,7 +10,7 @@ sourcecode: src/core/Fisheye.tsx
 </Grid>
 
 ```tsx
-export type FisheyeProps = JSX.IntrinsicElements['mesh'] & {
+export type FisheyeProps = ThreeElements['mesh'] & {
   /** Zoom factor, 0..1, 0 */
   zoom?: number
   /** Number of segments, 64 */

diff --git a/docs/portals/mesh-portal-material.mdx b/docs/portals/mesh-portal-material.mdx
@@ -19,7 +19,7 @@ sourcecode: src/core/MeshPortalMaterial.tsx
 </Grid>
 
 ```tsx
-export type PortalProps = JSX.IntrinsicElements['shaderMaterial'] & {
+export type PortalProps = ThreeElements['shaderMaterial'] & {
   /** Mix the portals own scene with the world scene, 0 = world scene render,
    *  0.5 = both scenes render, 1 = portal scene renders, defaults to 0 */
   blend?: number

diff --git a/docs/portals/render-cube-texture.mdx b/docs/portals/render-cube-texture.mdx
@@ -6,7 +6,7 @@ sourcecode: src/core/RenderCubeTexture.tsx
 This component allows you to render a live scene into a cubetexture which you can then apply to a material, for instance as an environment map (via the envMap property). The contents of it run inside a portal and are separate from the rest of the canvas, therefore you can have events in there, environment maps, etc.
 
 ```tsx
-export type RenderCubeTextureProps = Omit<JSX.IntrinsicElements['texture'], 'rotation'> & {
+export type RenderCubeTextureProps = Omit<ThreeElements['texture'], 'rotation'> & {
   /** Optional stencil buffer, defaults to false */
   stencilBuffer?: boolean
   /** Optional depth buffer, defaults to true */

diff --git a/docs/portals/render-texture.mdx b/docs/portals/render-texture.mdx
@@ -12,7 +12,7 @@ sourcecode: src/core/RenderTexture.tsx
 This component allows you to render a live scene into a texture which you can then apply to a material. The contents of it run inside a portal and are separate from the rest of the canvas, therefore you can have events in there, environment maps, etc.
 
 ```tsx
-type Props = JSX.IntrinsicElements['texture'] & {
+type Props = ThreeElements['texture'] & {
   /** Optional width of the texture, defaults to viewport bounds */
   width?: number
   /** Optional height of the texture, defaults to viewport bounds */

diff --git a/docs/portals/view.mdx b/docs/portals/view.mdx
@@ -49,7 +49,7 @@ export type ViewProps = {
   /** The tracking element, the view will be cut according to its whereabouts
    * @deprecated You can use inline Views now, see: https://github.com/pmndrs/drei/pull/1784
    */
-  track?: React.MutableRefObject<HTMLElement>
+  track?: React.RefObject<HTMLElement>
 }
 
 export type ViewportProps = { Port: () => React.ReactNode } & React.ForwardRefExoticComponent<

diff --git a/docs/shaders/mesh-refraction-material.mdx b/docs/shaders/mesh-refraction-material.mdx
@@ -12,7 +12,7 @@ sourcecode: src/core/MeshRefractionMaterial.tsx
 A convincing Glass/Diamond refraction material.
 
 ```tsx
-type MeshRefractionMaterialProps = JSX.IntrinsicElements['shaderMaterial'] & {
+type MeshRefractionMaterialProps = ThreeElements['shaderMaterial'] & {
   /** Environment map */
   envMap: THREE.CubeTexture | THREE.Texture
   /** Number of ray-cast bounces, it can be expensive to have too many, 2 */

diff --git a/docs/shaders/mesh-transmission-material.mdx b/docs/shaders/mesh-transmission-material.mdx
@@ -16,7 +16,7 @@ Although it should be faster than MPM keep in mind that it can still be expensiv
 For performance and visual reasons the host mesh gets removed from the render-stack temporarily. If you have other objects that you don't want to see reflected in the material just add them to the parent mesh as children.
 
 ```tsx
-type MeshTransmissionMaterialProps = JSX.IntrinsicElements['meshPhysicalMaterial'] & {
+type MeshTransmissionMaterialProps = ThreeElements['meshPhysicalMaterial'] & {
   /* Transmission, default: 1 */
   transmission?: number
   /* Thickness (refraction), default: 0 */

diff --git a/docs/staging/accumulative-shadows.mdx b/docs/staging/accumulative-shadows.mdx
@@ -14,7 +14,7 @@ A planar, Y-up oriented shadow-catcher that can accumulate into soft shadows and
 You must pair it with lightsources (and scene objects!) that cast shadows, which go into the children slot. Best use it with the `RandomizedLight` component, which jiggles a set of lights around, creating realistic raycast-like shadows and ambient occlusion.
 
 ```tsx
-type AccumulativeShadowsProps = JSX.IntrinsicElements['group'] & {
+type AccumulativeShadowsProps = ThreeElements['group'] & {
   /** How many frames it can render, more yields cleaner results but takes more time, 40 */
   frames?: number
   /** If frames === Infinity blend controls the refresh ratio, 100 */

diff --git a/docs/staging/caustics.mdx b/docs/staging/caustics.mdx
@@ -15,7 +15,7 @@ sourcecode: src/core/Caustics.tsx
 Caustics are swirls of light that appear when light passes through transmissive surfaces. This component uses a raymarching technique to project caustics onto a catcher plane. It is based on [github/N8python/caustics](https://github.com/N8python/caustics).
 
 ```tsx
-type CausticsProps = JSX.IntrinsicElements['group'] & {
+type CausticsProps = ThreeElements['group'] & {
   /** How many frames it will render, set it to Infinity for runtime, default: 1 */
   frames?: number
   /** Enables visual cues to help you stage your scene, default: false */
@@ -37,7 +37,7 @@ type CausticsProps = JSX.IntrinsicElements['group'] & {
   /** Buffer resolution, default: 2048 */
   resolution?: number
   /** Camera position, it will point towards the contents bounds center, default: [5, 5, 5] */
-  lightSource?: [x: number, y: number, z: number] | React.MutableRefObject<THREE.Object3D>
+  lightSource?: [x: number, y: number, z: number] | React.RefObject<THREE.Object3D>
 }
 ```
 

diff --git a/docs/staging/center.mdx b/docs/staging/center.mdx
@@ -17,7 +17,7 @@ sourcecode: src/core/Center.tsx
 Calculates a boundary box and centers its children accordingly.
 
 ```tsx
-export type Props = JSX.IntrinsicElements['group'] & {
+export type Props = ThreeElements['group'] & {
   top?: boolean
   right?: boolean
   bottom?: boolean

diff --git a/docs/staging/cloud.mdx b/docs/staging/cloud.mdx
@@ -19,7 +19,7 @@ sourcecode: src/core/Cloud.tsx
 Particle based cloud.
 
 ```tsx
-type CloudsProps = JSX.IntrinsicElements['group'] & {
+type CloudsProps = ThreeElements['group'] & {
   /** Optional cloud texture, points to a default hosted on rawcdn.githack */
   texture?: string
   /** Maximum number of segments, default: 200 (make this tight to save memory!) */
@@ -32,7 +32,7 @@ type CloudsProps = JSX.IntrinsicElements['group'] & {
   frustumCulled?: boolean
 }
 
-type CloudProps = JSX.IntrinsicElements['group'] & {
+type CloudProps = ThreeElements['group'] & {
   /** A seeded random will show the same cloud consistently, default: Math.random() */
   seed?: number
   /** How many segments or particles the cloud will have, default: 20 */

diff --git a/docs/staging/randomized-light.mdx b/docs/staging/randomized-light.mdx
@@ -5,7 +5,7 @@ title: RandomizedLight
 A randomized light that internally runs multiple lights and jiggles them. See below, you would normally pair it with `AccumulativeShadows`. This component is context aware, paired with AccumulativeShadows it will take the number of frames from its parent.
 
 ```tsx
-type RandomizedLightProps = JSX.IntrinsicElements['group'] & {
+type RandomizedLightProps = ThreeElements['group'] & {
   /** How many frames it will jiggle the lights, 1.
    *  Frames is context aware, if a provider like AccumulativeShadows exists, frames will be taken from there!  */
   frames?: number

diff --git a/docs/staging/resize.mdx b/docs/staging/resize.mdx
@@ -14,7 +14,7 @@ sourcecode: src/core/Resize.tsx
 Calculates a boundary box and scales its children so the highest dimension is constrained by 1. NB: proportions are preserved.
 
 ```tsx
-export type ResizeProps = JSX.IntrinsicElements['group'] & {
+export type ResizeProps = ThreeElements['group'] & {
   /** constrained by width dimension (x axis), undefined */
   width?: boolean
   /** constrained by height dimension (y axis), undefined */

diff --git a/package.json b/package.json
@@ -83,7 +83,7 @@
     "@eslint/eslintrc": "^3.2.0",
     "@eslint/js": "^9.15.0",
     "@playwright/test": "^1.45.2",
-    "@react-three/fiber": "^8.0.8",
+    "@react-three/fiber": "9.0.0-rc.1",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^19.0.0",
     "@rollup/plugin-json": "^4.1.0",
@@ -96,8 +96,8 @@
     "@storybook/react": "^8.4.4",
     "@storybook/react-vite": "^8.4.4",
     "@storybook/theming": "^8.4.4",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
+    "@types/react": "npm:types-react@19.0.0-rc.1",
+    "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1",
     "@types/three": "^0.151.0",
     "@typescript-eslint/eslint-plugin": "^8.15.0",
     "@typescript-eslint/parser": "^8.15.0",
@@ -114,8 +114,8 @@
     "json": "^11.0.0",
     "prettier": "^3.3.3",
     "pretty-quick": "^4.0.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "react": "19.0.0-rc.1",
+    "react-dom": "19.0.0-rc.1",
     "rimraf": "^6.0.1",
     "rollup": "^2.79.2",
     "rollup-plugin-glslify": "^1.3.0",
@@ -131,15 +131,19 @@
     "vite-plugin-glslify": "^2.1.0"
   },
   "peerDependencies": {
-    "@react-three/fiber": "^8 || ^9.0.0-0",
-    "react": "^18",
-    "react-dom": "^18",
+    "@react-three/fiber": "^9",
+    "react": "^19",
+    "react-dom": "^19",
     "three": ">=0.137"
   },
   "peerDependenciesMeta": {
     "react-dom": {
       "optional": true
     }
   },
+  "overrides": {
+    "@types/react": "npm:types-react@19.0.0-rc.1",
+    "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1"
+  },
   "packageManager": "yarn@4.3.1"
 }