[v9] refactor(types): export public types (#2559)

packages/fiber/src/core/events.ts

@@ -1,6 +1,6 @@
 import * as THREE from 'three'
 import { ContinuousEventPriority, DiscreteEventPriority, DefaultEventPriority } from 'react-reconciler/constants'
-import { getRootState } from './utils'
+import { Camera, getRootState } from './utils'
 import type { Instance } from './renderer'
 import type { RootState, RootStore } from './store'
 
@@ -9,7 +9,7 @@ export interface Intersection extends THREE.Intersection {
   eventObject: THREE.Object3D
 }
 
-export interface IntersectionEvent<TSourceEvent> extends Intersection {
+export interface ThreeEvent<TEvent> extends Intersection {
   /** The event source (the object which registered the handler) */
   eventObject: THREE.Object3D
   /** An array of intersections */
@@ -27,16 +27,14 @@ export interface IntersectionEvent<TSourceEvent> extends Intersection {
   /** stopPropagation will stop underlying handlers from firing */
   stopPropagation: () => void
   /** The original host event */
-  nativeEvent: TSourceEvent
+  nativeEvent: TEvent
   /** If the event was stopped by calling stopPropagation */
   stopped: boolean
 }
 
-export type Camera = THREE.OrthographicCamera | THREE.PerspectiveCamera
-export type ThreeEvent<TEvent> = IntersectionEvent<TEvent>
 export type DomEvent = PointerEvent | MouseEvent | WheelEvent
 
-export type Events = {
+export interface Events {
   onClick: EventListener
   onContextMenu: EventListener
   onDoubleClick: EventListener
@@ -49,7 +47,7 @@ export type Events = {
   onLostPointerCapture: EventListener
 }
 
-export type EventHandlers = {
+export interface EventHandlers {
   onClick?: (event: ThreeEvent<MouseEvent>) => void
   onContextMenu?: (event: ThreeEvent<MouseEvent>) => void
   onDoubleClick?: (event: ThreeEvent<MouseEvent>) => void

packages/fiber/src/core/hooks.tsx

@@ -2,9 +2,9 @@ import * as THREE from 'three'
 import * as React from 'react'
 import { GLTF } from 'three/examples/jsm/loaders/GLTFLoader'
 import { suspend, preload, clear } from 'suspend-react'
-import { context, RootState, RenderCallback, StageTypes } from './store'
+import { context, RootState, RenderCallback, UpdateCallback, StageTypes } from './store'
 import { buildGraph, ObjectMap, is, useMutableCallback, useIsomorphicLayoutEffect } from './utils'
-import { Stage, Stages, UpdateCallback } from './stages'
+import { Stages } from './stages'
 import { LoadingManager } from 'three'
 import { Instance } from './renderer'
 

packages/fiber/src/core/index.tsx

@@ -590,3 +590,45 @@ export {
   act,
   roots as _roots,
 }
+
+export type {
+  AttachFnType,
+  AttachType,
+  ConstructorRepresentation,
+  Catalogue,
+  Args,
+  InstanceProps,
+  Instance,
+} from './renderer'
+export type {
+  Subscription,
+  Dpr,
+  Size,
+  Viewport,
+  RenderCallback,
+  UpdateCallback,
+  LegacyAlways,
+  FrameloopMode,
+  FrameloopRender,
+  FrameloopLegacy,
+  Frameloop,
+  Performance,
+  Renderer,
+  XRManager,
+  RootState,
+  RootStore,
+} from './store'
+export type {
+  Intersection,
+  ThreeEvent,
+  DomEvent,
+  Events,
+  EventHandlers,
+  FilterFunction,
+  ComputeFunction,
+  EventManager,
+  createEvents,
+} from './events'
+export type { ObjectMap, Camera } from './utils'
+export type { GlobalRenderCallback, GlobalEffectType, flushGlobalEffects } from './loop'
+export { Stage, FixedStage, Stages } from './stages'

packages/fiber/src/core/loop.ts

@@ -2,7 +2,7 @@ import * as THREE from 'three'
 import { Root } from './renderer'
 import { RootState, Subscription } from './store'
 
-type GlobalRenderCallback = (timeStamp: number) => void
+export type GlobalRenderCallback = (timestamp: number) => void
 type SubItem = { callback: GlobalRenderCallback }
 
 function createSubs(callback: GlobalRenderCallback, subs: Set<SubItem>): () => void {

packages/fiber/src/core/stages.ts

@@ -1,15 +1,8 @@
-import { MutableRefObject } from 'react'
-import { RootState, RootStore } from './store'
+import { StoreApi, UseBoundStore } from 'zustand'
+import { RootState, RootStore, Subscription } from './store'
 
-export interface UpdateCallback {
-  (state: RootState, delta: number, frame?: XRFrame): void
-}
-
-export type UpdateCallbackRef = MutableRefObject<UpdateCallback>
-export type UpdateSubscription = { ref: UpdateCallbackRef; store: RootStore }
-
-export type FixedStageOptions = { fixedStep?: number; maxSubsteps?: number }
-export type FixedStageProps = { fixedStep: number; maxSubsteps: number; accumulator: number; alpha: number }
+// TODO: Remove deprecated fields in `Subscription`
+export type UpdateSubscription = Omit<Subscription, 'priority'>
 
 /**
  * Class representing a stage that updates every frame.
@@ -46,7 +39,7 @@ export class Stage {
    * @param store - The store to be used with the callback execution.
    * @returns A function to remove the subscription.
    */
-  add(ref: UpdateCallbackRef, store: RootStore) {
+  add(ref: UpdateSubscription['ref'], store: RootStore) {
     this.subscribers.push({ ref, store })
 
     return () => {

packages/fiber/src/core/store.ts

@@ -21,19 +21,20 @@ export const privateKeys = [
 
 export type PrivateKeys = typeof privateKeys[number]
 
-export interface Intersection extends THREE.Intersection {
-  eventObject: THREE.Object3D
-}
-
-export type Subscription = {
+export interface Subscription {
   ref: React.MutableRefObject<RenderCallback>
   priority: number
   store: RootStore
 }
 
 export type Dpr = number | [min: number, max: number]
-export type Size = { width: number; height: number; top: number; left: number }
-export type Viewport = Size & {
+export interface Size {
+  width: number
+  height: number
+  top: number
+  left: number
+}
+export interface Viewport extends Size {
   /** The initial pixel ratio */
   initialDpr: number
   /** Current pixel ratio */
@@ -47,14 +48,15 @@ export type Viewport = Size & {
 }
 
 export type RenderCallback = (state: RootState, delta: number, frame?: XRFrame) => void
+export type UpdateCallback = RenderCallback
 
-type LegacyAlways = 'always'
+export type LegacyAlways = 'always'
 export type FrameloopMode = LegacyAlways | 'auto' | 'demand' | 'never'
-type FrameloopRender = 'auto' | 'manual'
+export type FrameloopRender = 'auto' | 'manual'
 export type FrameloopLegacy = 'always' | 'demand' | 'never'
 export type Frameloop = FrameloopLegacy | { mode?: FrameloopMode; render?: FrameloopRender; maxDelta?: number }
 
-export type Performance = {
+export interface Performance {
   /** Current performance normal, between min and max */
   current: number
   /** How low the performance can go, between 0 and max */
@@ -67,12 +69,14 @@ export type Performance = {
   regress: () => void
 }
 
-export type Renderer = { render: (scene: THREE.Scene, camera: THREE.Camera) => any }
+export interface Renderer {
+  render: (scene: THREE.Scene, camera: THREE.Camera) => any
+}
 export const isRenderer = (def: any) => !!def?.render
 
 export type StageTypes = Stage | FixedStage
 
-export type InternalState = {
+export interface InternalState {
   interaction: THREE.Object3D[]
   hovered: Map<string, ThreeEvent<DomEvent>>
   subscribers: Subscription[]
@@ -92,7 +96,12 @@ export type InternalState = {
   subscribe: (callback: React.MutableRefObject<RenderCallback>, priority: number, store: RootStore) => () => void
 }
 
-export type RootState = {
+export interface XRManager {
+  connect: () => void
+  disconnect: () => void
+}
+
+export interface RootState {
   /** Set current state */
   set: StoreApi<RootState>['setState']
   /** Get current state */
@@ -110,7 +119,7 @@ export type RootState = {
   /** Event layer interface, contains the event handler and the node they're connected to */
   events: EventManager<any>
   /** XR interface */
-  xr: { connect: () => void; disconnect: () => void }
+  xr: XRManager
   /** Currently used controls */
   controls: THREE.EventDispatcher | null
   /** Normalized event coordinates */
@@ -204,7 +213,7 @@ const createStore = (
       camera: null as unknown as Camera,
       raycaster: null as unknown as THREE.Raycaster,
       events: { priority: 1, enabled: true, connected: false },
-      xr: null as unknown as { connect: () => void; disconnect: () => void },
+      xr: null as unknown as XRManager,
 
       invalidate: (frames = 1) => invalidate(get(), frames),
       advance: (timestamp: number, runGlobalEffects?: boolean) => advance(timestamp, runGlobalEffects, get()),

packages/fiber/src/index.tsx

@@ -1,28 +1,4 @@
+export * from './core'
 export * from './three-types'
-export type {
-  AttachFnType,
-  AttachType,
-  ConstructorRepresentation,
-  Catalogue,
-  Args,
-  InstanceProps,
-  Instance,
-} from './core/renderer'
-export type {
-  Intersection,
-  Subscription,
-  Dpr,
-  Size,
-  Viewport,
-  RenderCallback,
-  Performance,
-  RootState,
-  RootStore,
-} from './core/store'
-export type { ThreeEvent, Events, EventManager, ComputeFunction } from './core/events'
-export type { ObjectMap, Camera } from './core/utils'
 export * from './web/Canvas'
-export { createEvents } from './core/events'
 export { createPointerEvents as events } from './web/events'
-export * from './core'
-export { Stage, FixedStage, Stages } from './core/stages'

packages/fiber/src/native.tsx

@@ -1,26 +1,4 @@
 export * from './three-types'
-export type {
-  AttachFnType,
-  AttachType,
-  ConstructorRepresentation,
-  Catalogue,
-  Args,
-  InstanceProps,
-  Instance,
-} from './core/renderer'
-export type {
-  Intersection,
-  Subscription,
-  Dpr,
-  Size,
-  Viewport,
-  RenderCallback,
-  Performance,
-  RootState,
-  RootStore,
-} from './core/store'
-export type { ThreeEvent, Events, EventManager, ComputeFunction } from './core/events'
-export type { ObjectMap, Camera } from './core/utils'
+export * from './core'
 export * from './native/Canvas'
 export { createTouchEvents as events } from './native/events'
-export * from './core'