fix: ignore deprecated types, use correct XRFrame definition (#3052)

packages/fiber/package.json

@@ -44,6 +44,7 @@
   "dependencies": {
     "@babel/runtime": "^7.17.8",
     "@types/react-reconciler": "^0.26.7",
+    "@types/webxr": "*",
     "base64-js": "^1.5.1",
     "buffer": "^6.0.3",
     "its-fine": "^1.0.6",

packages/fiber/src/core/index.tsx

@@ -30,6 +30,7 @@ import {
   updateCamera,
   getColorManagement,
   buildGraph,
+  _XRFrame,
 } from './utils'
 import { useStore } from './hooks'
 import type { Properties } from '../three-types'
@@ -245,7 +246,7 @@ function createRoot<TCanvas extends Canvas>(canvas: TCanvas): ReconcilerRoot<TCa
       // Set up XR (one time only!)
       if (!state.xr) {
         // Handle frame behavior in WebXR
-        const handleXRFrame: THREE.XRFrameRequestCallback = (timestamp: number, frame?: THREE.XRFrame) => {
+        const handleXRFrame = (timestamp: number, frame?: _XRFrame) => {
           const state = store.getState()
           if (state.frameloop === 'never') return
           advance(timestamp, true, state, frame)

packages/fiber/src/core/loop.ts

@@ -1,6 +1,6 @@
-import * as THREE from 'three'
 import { Root } from './renderer'
 import { RootState, Subscription } from './store'
+import { _XRFrame } from './utils'
 
 export type GlobalRenderCallback = (timeStamp: number) => void
 type SubItem = { callback: GlobalRenderCallback }
@@ -56,7 +56,7 @@ export function flushGlobalEffects(type: GlobalEffectType, timestamp: number): v
 
 let subscribers: Subscription[]
 let subscription: Subscription
-function render(timestamp: number, state: RootState, frame?: THREE.XRFrame) {
+function render(timestamp: number, state: RootState, frame?: _XRFrame) {
   // Run local effects
   let delta = state.clock.getDelta()
   // In frameloop='never' mode, clock times are updated using the provided timestamp
@@ -131,12 +131,7 @@ export function createLoop<TCanvas>(roots: Map<TCanvas, Root>) {
     }
   }
 
-  function advance(
-    timestamp: number,
-    runGlobalEffects: boolean = true,
-    state?: RootState,
-    frame?: THREE.XRFrame,
-  ): void {
+  function advance(timestamp: number, runGlobalEffects: boolean = true, state?: RootState, frame?: _XRFrame): void {
     if (runGlobalEffects) flushGlobalEffects('before', timestamp)
     if (!state) for (const root of roots.values()) render(timestamp, root.store.getState())
     else render(timestamp, state, frame)

packages/fiber/src/core/store.ts

@@ -1,9 +1,8 @@
 import * as THREE from 'three'
 import * as React from 'react'
 import create, { GetState, SetState, StoreApi, UseBoundStore } from 'zustand'
-import { prepare } from './renderer'
 import { DomEvent, EventManager, PointerCaptureTarget, ThreeEvent } from './events'
-import { calculateDpr, Camera, isOrthographicCamera, updateCamera } from './utils'
+import { _XRFrame, calculateDpr, Camera, isOrthographicCamera, updateCamera } from './utils'
 
 // Keys that shouldn't be copied between R3F stores
 export const privateKeys = [
@@ -53,7 +52,7 @@ export type Viewport = Size & {
   aspect: number
 }
 
-export type RenderCallback = (state: RootState, delta: number, frame?: THREE.XRFrame) => void
+export type RenderCallback = (state: RootState, delta: number, frame?: _XRFrame) => void
 
 export type Performance = {
   /** Current performance normal, between min and max */
@@ -167,7 +166,7 @@ const context = React.createContext<UseBoundStore<RootState>>(null!)
 
 const createStore = (
   invalidate: (state?: RootState, frames?: number) => void,
-  advance: (timestamp: number, runGlobalEffects?: boolean, state?: RootState, frame?: THREE.XRFrame) => void,
+  advance: (timestamp: number, runGlobalEffects?: boolean, state?: RootState, frame?: _XRFrame) => void,
 ): UseBoundStore<RootState> => {
   const rootState = create<RootState>((set, get) => {
     const position = new THREE.Vector3()

packages/fiber/src/core/utils.ts

@@ -1,10 +1,16 @@
+/// <reference types="webxr" />
 import * as THREE from 'three'
 import * as React from 'react'
 import { UseBoundStore } from 'zustand'
 import { EventHandlers } from './events'
 import { AttachType, catalogue, Instance, InstanceProps, LocalState } from './renderer'
 import { Dpr, Renderer, RootState, Size } from './store'
 
+// < r141 shipped vendored types https://github.com/pmndrs/react-three-fiber/issues/2501
+// @ts-ignore
+type _DeprecatedXRFrame = THREE.XRFrame
+export type _XRFrame = THREE.WebGLRenderTargetOptions extends { samples?: number } ? XRFrame : _DeprecatedXRFrame
+
 /**
  * Returns `true` with correct TS type inference if an object has a configurable color space (since r152).
  */

packages/fiber/src/three-types.ts

@@ -98,53 +98,81 @@ export type InstancedBufferGeometryProps = BufferGeometryNode<
   typeof THREE.InstancedBufferGeometry
 >
 export type BufferGeometryProps = BufferGeometryNode<THREE.BufferGeometry, typeof THREE.BufferGeometry>
+// @ts-ignore
 export type BoxBufferGeometryProps = BufferGeometryNode<THREE.BoxBufferGeometry, typeof THREE.BoxBufferGeometry>
 export type CircleBufferGeometryProps = BufferGeometryNode<
+  // @ts-ignore
   THREE.CircleBufferGeometry,
+  // @ts-ignore
   typeof THREE.CircleBufferGeometry
 >
+// @ts-ignore
 export type ConeBufferGeometryProps = BufferGeometryNode<THREE.ConeBufferGeometry, typeof THREE.ConeBufferGeometry>
 export type CylinderBufferGeometryProps = BufferGeometryNode<
+  // @ts-ignore
   THREE.CylinderBufferGeometry,
+  // @ts-ignore
   typeof THREE.CylinderBufferGeometry
 >
 export type DodecahedronBufferGeometryProps = BufferGeometryNode<
+  // @ts-ignore
   THREE.DodecahedronBufferGeometry,
+  // @ts-ignore
   typeof THREE.DodecahedronBufferGeometry
 >
 export type ExtrudeBufferGeometryProps = BufferGeometryNode<
+  // @ts-ignore
   THREE.ExtrudeBufferGeometry,
+  // @ts-ignore
   typeof THREE.ExtrudeBufferGeometry
 >
 export type IcosahedronBufferGeometryProps = BufferGeometryNode<
+  // @ts-ignore
   THREE.IcosahedronBufferGeometry,
+  // @ts-ignore
   typeof THREE.IcosahedronBufferGeometry
 >
+// @ts-ignore
 export type LatheBufferGeometryProps = BufferGeometryNode<THREE.LatheBufferGeometry, typeof THREE.LatheBufferGeometry>
 export type OctahedronBufferGeometryProps = BufferGeometryNode<
+  // @ts-ignore
   THREE.OctahedronBufferGeometry,
+  // @ts-ignore
   typeof THREE.OctahedronBufferGeometry
 >
+// @ts-ignore
 export type PlaneBufferGeometryProps = BufferGeometryNode<THREE.PlaneBufferGeometry, typeof THREE.PlaneBufferGeometry>
 export type PolyhedronBufferGeometryProps = BufferGeometryNode<
+  // @ts-ignore
   THREE.PolyhedronBufferGeometry,
+  // @ts-ignore
   typeof THREE.PolyhedronBufferGeometry
 >
+// @ts-ignore
 export type RingBufferGeometryProps = BufferGeometryNode<THREE.RingBufferGeometry, typeof THREE.RingBufferGeometry>
+// @ts-ignore
 export type ShapeBufferGeometryProps = BufferGeometryNode<THREE.ShapeBufferGeometry, typeof THREE.ShapeBufferGeometry>
 export type SphereBufferGeometryProps = BufferGeometryNode<
+  // @ts-ignore
   THREE.SphereBufferGeometry,
+  // @ts-ignore
   typeof THREE.SphereBufferGeometry
 >
 export type TetrahedronBufferGeometryProps = BufferGeometryNode<
+  // @ts-ignore
   THREE.TetrahedronBufferGeometry,
+  // @ts-ignore
   typeof THREE.TetrahedronBufferGeometry
 >
+// @ts-ignore
 export type TorusBufferGeometryProps = BufferGeometryNode<THREE.TorusBufferGeometry, typeof THREE.TorusBufferGeometry>
 export type TorusKnotBufferGeometryProps = BufferGeometryNode<
+  // @ts-ignore
   THREE.TorusKnotBufferGeometry,
+  // @ts-ignore
   typeof THREE.TorusKnotBufferGeometry
 >
+// @ts-ignore
 export type TubeBufferGeometryProps = BufferGeometryNode<THREE.TubeBufferGeometry, typeof THREE.TubeBufferGeometry>
 export type WireframeGeometryProps = BufferGeometryNode<THREE.WireframeGeometry, typeof THREE.WireframeGeometry>
 export type TetrahedronGeometryProps = BufferGeometryNode<THREE.TetrahedronGeometry, typeof THREE.TetrahedronGeometry>
@@ -169,7 +197,7 @@ export type ConeGeometryProps = BufferGeometryNode<THREE.ConeGeometry, typeof TH
 export type CylinderGeometryProps = BufferGeometryNode<THREE.CylinderGeometry, typeof THREE.CylinderGeometry>
 export type CircleGeometryProps = BufferGeometryNode<THREE.CircleGeometry, typeof THREE.CircleGeometry>
 export type BoxGeometryProps = BufferGeometryNode<THREE.BoxGeometry, typeof THREE.BoxGeometry>
-export type CapsuleGeometryProps = BufferGeometryNode<THREE.CapsuleBufferGeometry, typeof THREE.CapsuleBufferGeometry>
+export type CapsuleGeometryProps = BufferGeometryNode<THREE.CapsuleGeometry, typeof THREE.CapsuleGeometry>
 
 export type MaterialProps = MaterialNode<THREE.Material, [THREE.MaterialParameters]>
 export type ShadowMaterialProps = MaterialNode<THREE.ShadowMaterial, [THREE.ShaderMaterialParameters]>
@@ -202,7 +230,9 @@ export type DirectionalLightShadowProps = Node<THREE.DirectionalLightShadow, typ
 export type DirectionalLightProps = LightNode<THREE.DirectionalLight, typeof THREE.DirectionalLight>
 export type AmbientLightProps = LightNode<THREE.AmbientLight, typeof THREE.AmbientLight>
 export type LightShadowProps = Node<THREE.LightShadow, typeof THREE.LightShadow>
+// @ts-ignore
 export type AmbientLightProbeProps = LightNode<THREE.AmbientLightProbe, typeof THREE.AmbientLightProbe>
+// @ts-ignore
 export type HemisphereLightProbeProps = LightNode<THREE.HemisphereLightProbe, typeof THREE.HemisphereLightProbe>
 export type LightProbeProps = LightNode<THREE.LightProbe, typeof THREE.LightProbe>
 
@@ -226,6 +256,7 @@ export type AxesHelperProps = Object3DNode<THREE.AxesHelper, typeof THREE.AxesHe
 export type TextureProps = Node<THREE.Texture, typeof THREE.Texture>
 export type VideoTextureProps = Node<THREE.VideoTexture, typeof THREE.VideoTexture>
 export type DataTextureProps = Node<THREE.DataTexture, typeof THREE.DataTexture>
+// @ts-ignore
 export type DataTexture3DProps = Node<THREE.DataTexture3D, typeof THREE.DataTexture3D>
 export type CompressedTextureProps = Node<THREE.CompressedTexture, typeof THREE.CompressedTexture>
 export type CubeTextureProps = Node<THREE.CubeTexture, typeof THREE.CubeTexture>

yarn.lock

@@ -2730,6 +2730,11 @@
   resolved "https://registry.yarnpkg.com/@types/three/-/three-0.139.0.tgz#69af1f0c52f8eea390f513e05478af1dd7f49e6f"
   integrity sha512-4V/jZhyq7Mv05coUzxL3bz8AuBOSi/1F0RY7ujisHTV0Amy/fnYJ+s7TSJ1/hXjZukSkpuFRgV+wvWUEMbsMbQ==
 
+"@types/webxr@*":
+  version "0.5.6"
+  resolved "https://registry.yarnpkg.com/@types/webxr/-/webxr-0.5.6.tgz#835c7ac9983a732e2e849d0d302bc735aa455126"
+  integrity sha512-/uWg82/WT+Pl18b2kkG6nlbiiaNIb8RN2mvvcGexGvwLvUrEhDhGBzYHiwa5nQPtin0hISyrXkKOKVScTK+kKg==
+
 "@types/webxr@^0.5.2":
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/@types/webxr/-/webxr-0.5.2.tgz#5d9627b0ffe223aa3b166de7112ac8a9460dc54f"