fix(types): avoid emitting THREE.XRFrame (#3196)

Author: Methuselah96

packages/fiber/src/core/index.tsx

@@ -17,7 +17,7 @@ import {
   privateKeys,
 } from './store'
 import { createRenderer, extend, prepare, Root } from './renderer'
-import { createLoop, addEffect, addAfterEffect, addTail, flushGlobalEffects } from './loop'
+import { createLoop, addEffect, addAfterEffect, addTail, flushGlobalEffects, Invalidate, Advance } from './loop'
 import { getEventPriority, EventManager, ComputeFunction } from './events'
 import {
   is,
@@ -38,7 +38,7 @@ import type { Properties } from '../three-types'
 type Canvas = HTMLCanvasElement | OffscreenCanvas
 
 const roots = new Map<Canvas, Root>()
-const { invalidate, advance } = createLoop(roots)
+const { invalidate, advance }: { invalidate: Invalidate; advance: Advance } = createLoop(roots)
 const { reconciler, applyProps } = createRenderer(roots, getEventPriority)
 const shallowLoose = { objects: 'shallow', strict: false } as EquConfig
 

packages/fiber/src/core/loop.ts

@@ -78,7 +78,24 @@ function render(timestamp: number, state: RootState, frame?: _XRFrame) {
   return state.frameloop === 'always' ? 1 : state.internal.frames
 }
 
-export function createLoop<TCanvas>(roots: Map<TCanvas, Root>) {
+export type Invalidate = (state?: RootState, frames?: number) => void
+export type Advance = (timestamp: number, runGlobalEffects?: boolean, state?: RootState, frame?: _XRFrame) => void
+
+interface Loop {
+  loop: (timestamp: number) => void
+  /**
+   * Invalidates the view, requesting a frame to be rendered. Will globally invalidate unless passed a root's state.
+   * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#invalidate
+   */
+  invalidate: Invalidate
+  /**
+   * Advances the frameloop and runs render effects, useful for when manually rendering via `frameloop="never"`.
+   * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#advance
+   */
+  advance: Advance
+}
+
+export function createLoop<TCanvas>(roots: Map<TCanvas, Root>): Loop {
   let running = false
   let repeat: number
   let frame: number
@@ -138,17 +155,5 @@ export function createLoop<TCanvas>(roots: Map<TCanvas, Root>) {
     if (runGlobalEffects) flushGlobalEffects('after', timestamp)
   }
 
-  return {
-    loop,
-    /**
-     * Invalidates the view, requesting a frame to be rendered. Will globally invalidate unless passed a root's state.
-     * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#invalidate
-     */
-    invalidate,
-    /**
-     * Advances the frameloop and runs render effects, useful for when manually rendering via `frameloop="never"`.
-     * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#advance
-     */
-    advance,
-  }
+  return { loop, invalidate, advance }
 }

packages/fiber/src/core/store.ts

@@ -3,6 +3,7 @@ import * as React from 'react'
 import create, { GetState, SetState, StoreApi, UseBoundStore } from 'zustand'
 import { DomEvent, EventManager, PointerCaptureTarget, ThreeEvent } from './events'
 import { _XRFrame, calculateDpr, Camera, isOrthographicCamera, updateCamera } from './utils'
+import { Advance, Invalidate } from './loop'
 
 // Keys that shouldn't be copied between R3F stores
 export const privateKeys = [
@@ -164,10 +165,7 @@ export type RootState = {
 
 const context = React.createContext<UseBoundStore<RootState>>(null!)
 
-const createStore = (
-  invalidate: (state?: RootState, frames?: number) => void,
-  advance: (timestamp: number, runGlobalEffects?: boolean, state?: RootState, frame?: _XRFrame) => void,
-): UseBoundStore<RootState> => {
+const createStore = (invalidate: Invalidate, advance: Advance): UseBoundStore<RootState> => {
   const rootState = create<RootState>((set, get) => {
     const position = new THREE.Vector3()
     const defaultTarget = new THREE.Vector3()