[feat] update for R3F v9

.husky/commit-msg

@@ -1,4 +1,4 @@
 #!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
+# . "$(dirname "$0")/_/husky.sh"
 
-npx --no-install commitlint --edit $1
+# npx --no-install commitlint --edit $1

package.json

@@ -65,6 +65,7 @@
     "cross-env": "^7.0.3",
     "detect-gpu": "^5.0.28",
     "glsl-noise": "^0.0.0",
+    "hls.js": "1.3.5",
     "maath": "^0.10.7",
     "meshline": "^3.1.6",
     "react-composer": "^5.0.3",
@@ -77,20 +78,20 @@
     "tunnel-rat": "^0.1.2",
     "utility-types": "^3.10.0",
     "uuid": "^9.0.1",
-    "zustand": "^3.7.1",
-    "hls.js": "1.3.5"
+    "zustand": "^3.7.1"
   },
   "devDependencies": {
     "@babel/core": "^7.14.3",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
     "@babel/plugin-transform-modules-commonjs": "^7.14.0",
     "@babel/plugin-transform-runtime": "^7.14.3",
     "@babel/preset-env": "^7.21.5",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.5",
     "@commitlint/cli": "^12.0.1",
     "@commitlint/config-conventional": "^12.0.1",
-    "@react-three/fiber": "^8.0.8",
+    "@react-three/fiber": "^9.0.0-alpha.5",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^19.0.0",
     "@rollup/plugin-json": "^4.1.0",
@@ -127,8 +128,8 @@
     "prettier": "^2.4.1",
     "pretty-quick": "^3.1.0",
     "puppeteer": "^20.7.4",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "react": "19.0.0-beta-94eed63c49-20240425",
+    "react-dom": "19.0.0-beta-94eed63c49-20240425",
     "rimraf": "^3.0.2",
     "rollup": "^2.78.1",
     "rollup-plugin-glslify": "^1.3.0",
@@ -145,14 +146,18 @@
     "yarn": "^1.22.17"
   },
   "peerDependencies": {
-    "@react-three/fiber": ">=8.0",
-    "react": ">=18.0",
-    "react-dom": ">=18.0",
+    "@react-three/fiber": ">=9.0.0-alpha.5",
+    "react": ">=19.0",
+    "react-dom": ">=19.0",
     "three": ">=0.137"
   },
   "peerDependenciesMeta": {
     "react-dom": {
       "optional": true
     }
+  },
+  "overrides": {
+    "@types/react": "npm:types-react@beta",
+    "@types/react-dom": "npm:types-react-dom@beta"
   }
 }

src/core/AccumulativeShadows.tsx

@@ -1,6 +1,6 @@
 import * as THREE from 'three'
 import * as React from 'react'
-import { extend, ReactThreeFiber, useFrame, useThree } from '@react-three/fiber'
+import { extend, ReactThreeFiber, ThreeElements, useFrame, useThree } from '@react-three/fiber'
 import { shaderMaterial } from './shaderMaterial'
 import { DiscardMaterial } from '../materials/DiscardMaterial'
 import { ForwardRefComponent } from '../helpers/ts-utils'
@@ -65,11 +65,9 @@ type SoftShadowMaterialProps = {
   blend?: number
 }
 
-declare global {
-  namespace JSX {
-    interface IntrinsicElements {
-      softShadowMaterial: JSX.IntrinsicElements['shaderMaterial'] & SoftShadowMaterialProps
-    }
+declare module '@react-three/fiber' {
+  interface ThreeElements {
+    softShadowMaterial: ThreeElements['shaderMaterial'] & SoftShadowMaterialProps
   }
 }
 
@@ -105,7 +103,7 @@ const SoftShadowMaterial = /* @__PURE__ */ shaderMaterial(
 )
 
 export const AccumulativeShadows: ForwardRefComponent<
-  JSX.IntrinsicElements['group'] & AccumulativeShadowsProps,
+  ThreeElements['group'] & AccumulativeShadowsProps,
   AccumulativeContext
 > = /* @__PURE__ */ React.forwardRef(
   (
@@ -123,7 +121,7 @@ export const AccumulativeShadows: ForwardRefComponent<
       resolution = 1024,
       toneMapped = true,
       ...props
-    }: JSX.IntrinsicElements['group'] & AccumulativeShadowsProps,
+    }: ThreeElements['group'] & AccumulativeShadowsProps,
     forwardRef: React.ForwardedRef<AccumulativeContext>
   ) => {
     extend({ SoftShadowMaterial })
@@ -254,7 +252,7 @@ export type RandomizedLightProps = {
 }
 
 export const RandomizedLight: ForwardRefComponent<
-  JSX.IntrinsicElements['group'] & RandomizedLightProps,
+  ThreeElements['group'] & RandomizedLightProps,
   AccumulativeLightContext
 > = /* @__PURE__ */ React.forwardRef(
   (
@@ -265,14 +263,13 @@ export const RandomizedLight: ForwardRefComponent<
       size = 5,
       near = 0.5,
       far = 500,
-      frames = 1,
       position = [0, 0, 0],
       radius = 1,
       amount = 8,
       intensity = version >= 155 ? Math.PI : 1,
       ambient = 0.5,
       ...props
-    }: JSX.IntrinsicElements['group'] & RandomizedLightProps,
+    }: ThreeElements['group'] & RandomizedLightProps,
     forwardRef: React.ForwardedRef<AccumulativeLightContext>
   ) => {
     const gLights = React.useRef<THREE.Group>(null!)
@@ -291,8 +288,8 @@ export const RandomizedLight: ForwardRefComponent<
               position[2] + THREE.MathUtils.randFloatSpread(radius)
             )
           } else {
-            let lambda = Math.acos(2 * Math.random() - 1) - Math.PI / 2.0
-            let phi = 2 * Math.PI * Math.random()
+            const lambda = Math.acos(2 * Math.random() - 1) - Math.PI / 2.0
+            const phi = 2 * Math.PI * Math.random()
             light.position.set(
               Math.cos(lambda) * Math.cos(phi) * length,
               Math.abs(Math.cos(lambda) * Math.sin(phi) * length),

src/core/AdaptiveDpr.tsx

@@ -7,6 +7,7 @@ export function AdaptiveDpr({ pixelated }: { pixelated?: boolean }) {
   const current = useThree((state) => state.performance.current)
   const initialDpr = useThree((state) => state.viewport.initialDpr)
   const setDpr = useThree((state) => state.setDpr)
+
   // Restore initial pixelratio on unmount
   React.useEffect(() => {
     const domElement = gl.domElement
@@ -15,6 +16,7 @@ export function AdaptiveDpr({ pixelated }: { pixelated?: boolean }) {
       if (pixelated && domElement) domElement.style.imageRendering = 'auto'
     }
   }, [])
+
   // Set adaptive pixelratio
   React.useEffect(() => {
     setDpr(current * initialDpr)

src/core/ArcballControls.tsx

@@ -1,4 +1,4 @@
-import { EventManager, ReactThreeFiber, useFrame, useThree } from '@react-three/fiber'
+import { EventManager, ReactThreeFiber, ThreeElement, useFrame, useThree } from '@react-three/fiber'
 import * as React from 'react'
 import { forwardRef, useEffect, useMemo } from 'react'
 import { ArcballControls as ArcballControlsImpl } from 'three-stdlib'
@@ -8,7 +8,7 @@ import { ForwardRefComponent } from '../helpers/ts-utils'
 
 export type ArcballControlsProps = Omit<
   ReactThreeFiber.Overwrite<
-    ReactThreeFiber.Object3DNode<ArcballControlsImpl, typeof ArcballControlsImpl>,
+    ThreeElement<typeof ArcballControlsImpl>,
     {
       target?: ReactThreeFiber.Vector3
       camera?: OrthographicCamera | PerspectiveCamera

src/core/BBAnchor.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react'
 import * as THREE from 'three'
-import { useFrame, GroupProps } from '@react-three/fiber'
+import { type ThreeElements, useFrame } from '@react-three/fiber'
 
 const boundingBox = /* @__PURE__ */ new THREE.Box3()
 const boundingBoxSize = /* @__PURE__ */ new THREE.Vector3()
 
-export interface BBAnchorProps extends GroupProps {
+export type BBAnchorProps = {
   anchor: THREE.Vector3 | [number, number, number]
-}
+} & ThreeElements['group']
 
 export const BBAnchor = ({ anchor, ...props }: BBAnchorProps) => {
   const ref = React.useRef<THREE.Group>(null!)

src/core/Backdrop.tsx

@@ -1,9 +1,10 @@
+import { ThreeElements } from '@react-three/fiber'
 import * as React from 'react'
 import { PlaneGeometry, BufferAttribute } from 'three'
 
 const easeInExpo = (x: number) => (x === 0 ? 0 : Math.pow(2, 10 * x - 10))
 
-export type BackdropProps = JSX.IntrinsicElements['group'] & {
+export type BackdropProps = ThreeElements['group'] & {
   floor?: number
   segments?: number
   receiveShadow?: boolean

src/core/Billboard.tsx

@@ -1,14 +1,14 @@
 import * as React from 'react'
 import { Group, Quaternion } from 'three'
-import { useFrame } from '@react-three/fiber'
+import { ThreeElements, useFrame } from '@react-three/fiber'
 import { ForwardRefComponent } from '../helpers/ts-utils'
 
 export type BillboardProps = {
   follow?: boolean
   lockX?: boolean
   lockY?: boolean
   lockZ?: boolean
-} & JSX.IntrinsicElements['group']
+} & ThreeElements['group']
 
 /**
  * Wraps children in a billboarded group. Sample usage:

src/core/Bounds.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import * as THREE from 'three'
 
-import { useFrame, useThree } from '@react-three/fiber'
+import { ThreeElements, useFrame, useThree } from '@react-three/fiber'
 
 export type SizeProps = {
   box: THREE.Box3
@@ -27,7 +27,7 @@ export type BoundsApi = {
   clip(): BoundsApi
 }
 
-export type BoundsProps = JSX.IntrinsicElements['group'] & {
+export type BoundsProps = ThreeElements['group'] & {
   maxDuration?: number
   margin?: number
   observe?: boolean
@@ -127,8 +127,9 @@ export function Bounds({
     return {
       getSize,
       refresh(object?: THREE.Object3D | THREE.Box3) {
-        if (isBox3(object)) box.copy(object)
-        else {
+        if (isBox3(object)) {
+          box.copy(object)
+        } else {
           const target = object || ref.current
           if (!target) return this
           target.updateWorldMatrix(true, true)

src/core/CameraControls.tsx

@@ -16,14 +16,14 @@ import {
 
 import * as React from 'react'
 import { forwardRef, useMemo, useEffect } from 'react'
-import { extend, useFrame, useThree, ReactThreeFiber, EventManager } from '@react-three/fiber'
+import { extend, useFrame, useThree, ReactThreeFiber, EventManager, ThreeElement } from '@react-three/fiber'
 
 import CameraControlsImpl from 'camera-controls'
 import { ForwardRefComponent } from '../helpers/ts-utils'
 
 export type CameraControlsProps = Omit<
   ReactThreeFiber.Overwrite<
-    ReactThreeFiber.Node<CameraControlsImpl, typeof CameraControlsImpl>,
+    ThreeElement<typeof CameraControlsImpl>,
     {
       camera?: PerspectiveCamera | OrthographicCamera
       domElement?: HTMLElement

src/core/Caustics.tsx

@@ -4,7 +4,7 @@
 
 import * as THREE from 'three'
 import * as React from 'react'
-import { extend, ReactThreeFiber, useFrame, useThree } from '@react-three/fiber'
+import { extend, ReactThreeFiber, ThreeElements, useFrame, useThree } from '@react-three/fiber'
 import { useFBO } from './useFBO'
 import { useHelper } from './useHelper'
 import { shaderMaterial } from './shaderMaterial'
@@ -41,7 +41,7 @@ type CausticsProjectionMaterialType = THREE.MeshNormalMaterial & {
   lightViewMatrix?: THREE.Matrix4
 }
 
-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 */
@@ -69,7 +69,7 @@ type CausticsProps = JSX.IntrinsicElements['group'] & {
 declare global {
   namespace JSX {
     interface IntrinsicElements {
-      causticsProjectionMaterial: ReactThreeFiber.MeshNormalMaterialProps & {
+      causticsProjectionMaterial: ThreeElements['meshNormalMaterial'] & {
         viewMatrix?: { value: THREE.Matrix4 }
         color?: ReactThreeFiber.Color
         causticsTexture?: THREE.Texture
@@ -277,8 +277,6 @@ const CAUSTICPROPS = {
   generateMipmaps: true,
 }
 
-const causticsContext = /* @__PURE__ */ React.createContext(null)
-
 export const Caustics: ForwardRefComponent<CausticsProps, THREE.Group> = /* @__PURE__ */ React.forwardRef(
   (
     {

src/core/Center.tsx

@@ -1,6 +1,6 @@
 import { Box3, Vector3, Sphere, Group, Object3D } from 'three'
 import * as React from 'react'
-import { useThree } from '@react-three/fiber'
+import { ThreeElements } from '@react-three/fiber'
 import { ForwardRefComponent } from '../helpers/ts-utils'
 
 export type OnCenterCallbackProps = {
@@ -42,8 +42,8 @@ export type CenterProps = {
   cacheKey?: any
 }
 
-export const Center: ForwardRefComponent<JSX.IntrinsicElements['group'] & CenterProps, Group> =
-  /* @__PURE__ */ React.forwardRef<Group, JSX.IntrinsicElements['group'] & CenterProps>(function Center(
+export const Center: ForwardRefComponent<ThreeElements['group'] & CenterProps, Group> =
+  /* @__PURE__ */ React.forwardRef<Group, ThreeElements['group'] & CenterProps>(function Center(
     {
       children,
       disable,

src/core/Clone.tsx

@@ -1,8 +1,8 @@
 import * as THREE from 'three'
 import * as React from 'react'
-import { MeshProps } from '@react-three/fiber'
 import { SkeletonUtils } from 'three-stdlib'
 import { ForwardRefComponent } from '../helpers/ts-utils'
+import { ThreeElements } from '@react-three/fiber'
 
 export type CloneProps = {
   /** Any pre-existing THREE.Object3D (groups, meshes, ...), or an array of objects */
@@ -14,7 +14,7 @@ export type CloneProps = {
   /** The property keys it will shallow-clone (material, geometry, visible, ...) */
   keys?: string[]
   /** Can either spread over props or fill in JSX children, applies to every mesh within */
-  inject?: MeshProps | React.ReactNode | ((object: THREE.Object3D) => React.ReactNode)
+  inject?: ThreeElements['mesh'] | React.ReactNode | ((object: THREE.Object3D) => React.ReactNode)
   /** Short access castShadow, applied to every mesh within */
   castShadow?: boolean
   /** Short access receiveShadow, applied to every mesh within */
@@ -57,7 +57,7 @@ function createSpread(
     inject,
     castShadow,
     receiveShadow,
-  }: Omit<JSX.IntrinsicElements['group'], 'children'> & Partial<CloneProps>
+  }: Omit<ThreeElements['group'], 'children'> & Partial<CloneProps>
 ) {
   let spread: Record<(typeof keys)[number], any> = {}
   for (const key of keys) {
@@ -81,7 +81,7 @@ function createSpread(
   return spread
 }
 
-export const Clone: ForwardRefComponent<Omit<JSX.IntrinsicElements['group'], 'children'> & CloneProps, THREE.Group> =
+export const Clone: ForwardRefComponent<Omit<ThreeElements['group'], 'children'> & CloneProps, THREE.Group> =
   /* @__PURE__ */ React.forwardRef(
     (
       {
@@ -94,7 +94,7 @@ export const Clone: ForwardRefComponent<Omit<JSX.IntrinsicElements['group'], 'ch
         inject,
         keys,
         ...props
-      }: Omit<JSX.IntrinsicElements['group'], 'children'> & CloneProps,
+      }: Omit<ThreeElements['group'], 'children'> & CloneProps,
       forwardRef: React.Ref<THREE.Group>
     ) => {
       const config = { keys, deep, inject, castShadow, receiveShadow }