[v9] refactor!: instance descriptors, dynamically map ThreeElements

example/src/demos/Lines.tsx

@@ -1,5 +1,5 @@
 import React, { useRef, useEffect, useState, useCallback, useContext, useMemo } from 'react'
-import { extend, Canvas, useThree, ReactThreeFiber } from '@react-three/fiber'
+import { extend, Canvas, useThree } from '@react-three/fiber'
 import { OrbitControls } from 'three-stdlib'
 extend({ OrbitControls })
 

example/src/demos/Pointcloud.tsx

@@ -1,5 +1,5 @@
 import React, { useRef, useEffect, useState, useCallback, useContext, useMemo } from 'react'
-import { extend, Canvas, useThree, ReactThreeFiber } from '@react-three/fiber'
+import { extend, Canvas, useThree } from '@react-three/fiber'
 import * as THREE from 'three'
 import { OrbitControls } from 'three-stdlib'
 extend({ OrbitControls })

example/typings/global.d.ts

@@ -1,11 +1,10 @@
-import { ReactThreeFiber } from '@react-three/fiber'
+import { Node } from '@react-three/fiber'
 import { OrbitControls } from 'three-stdlib'
-
 import { DotMaterial } from '../src/demos/Pointcloud'
 
 declare module '@react-three/fiber' {
   interface ThreeElements {
-    orbitControls: ReactThreeFiber.Node<OrbitControls, typeof OrbitControls>
-    dotMaterial: ReactThreeFiber.MaterialNode<DotMaterial, typeof DotMaterial>
+    orbitControls: Node<typeof OrbitControls>
+    dotMaterial: Node<typeof DotMaterial>
   }
 }

packages/fiber/src/core/events.ts

@@ -2,7 +2,7 @@ import * as THREE from 'three'
 import { ContinuousEventPriority, DiscreteEventPriority, DefaultEventPriority } from 'react-reconciler/constants'
 import { getRootState } from './utils'
 import type { UseBoundStore } from 'zustand'
-import type { Instance } from './renderer'
+import type { Instance } from './types'
 import type { RootState } from './store'
 
 export interface Intersection extends THREE.Intersection {
@@ -173,7 +173,7 @@ export function createEvents(store: UseBoundStore<RootState>) {
   function filterPointerEvents(objects: THREE.Object3D[]) {
     return objects.filter((obj) =>
       ['Move', 'Over', 'Enter', 'Out', 'Leave'].some(
-        (name) => (obj as unknown as Instance).__r3f?.handlers[('onPointer' + name) as keyof EventHandlers],
+        (name) => ((obj as any).__r3f as Instance | undefined)?.handlers[('onPointer' + name) as keyof EventHandlers],
       ),
     )
   }
@@ -239,7 +239,8 @@ export function createEvents(store: UseBoundStore<RootState>) {
       let eventObject: THREE.Object3D | null = hit.object
       // Bubble event up
       while (eventObject) {
-        if ((eventObject as unknown as Instance).__r3f?.eventCount) intersections.push({ ...hit, eventObject })
+        if (((eventObject as any).__r3f as Instance | undefined)?.eventCount)
+          intersections.push({ ...hit, eventObject })
         eventObject = eventObject.parent
       }
     }
@@ -369,10 +370,10 @@ export function createEvents(store: UseBoundStore<RootState>) {
         )
       ) {
         const eventObject = hoveredObj.eventObject
-        const instance = (eventObject as unknown as Instance).__r3f
-        const handlers = instance?.handlers
+        const instance = (eventObject as any).__r3f as Instance | undefined
         internal.hovered.delete(makeId(hoveredObj))
         if (instance?.eventCount) {
+          const handlers = instance.handlers
           // Clear out intersects, they are outdated by now
           const data = { ...hoveredObj, intersections }
           handlers.onPointerOut?.(data as ThreeEvent<PointerEvent>)
@@ -434,10 +435,11 @@ export function createEvents(store: UseBoundStore<RootState>) {
 
       handleIntersects(hits, event, delta, (data: ThreeEvent<DomEvent>) => {
         const eventObject = data.eventObject
-        const instance = (eventObject as unknown as Instance).__r3f
-        const handlers = instance?.handlers
+        const instance = (eventObject as any).__r3f as Instance | undefined
+
         // Check presence of handlers
         if (!instance?.eventCount) return
+        const handlers = instance.handlers
 
         if (isPointerMove) {
           // Move event ...
@@ -488,7 +490,7 @@ export function createEvents(store: UseBoundStore<RootState>) {
 
   function pointerMissed(event: MouseEvent, objects: THREE.Object3D[]) {
     objects.forEach((object: THREE.Object3D) =>
-      (object as unknown as Instance).__r3f?.handlers.onPointerMissed?.(event),
+      ((object as any).__r3f as Instance | undefined)?.handlers.onPointerMissed?.(event),
     )
   }
 

packages/fiber/src/core/index.tsx

@@ -3,7 +3,6 @@ import * as React from 'react'
 import { ConcurrentRoot } from 'react-reconciler/constants'
 import create, { StoreApi, UseBoundStore } from 'zustand'
 
-import * as ReactThreeFiber from '../three-types'
 import {
   Renderer,
   createStore,
@@ -19,9 +18,9 @@ import {
   FrameloopLegacy,
   Frameloop,
 } from './store'
-import { createRenderer, extend, Root } from './renderer'
+import { reconciler, extend, Root } from './renderer'
 import { createLoop, addEffect, addAfterEffect, addTail } from './loop'
-import { getEventPriority, EventManager, ComputeFunction } from './events'
+import { EventManager, ComputeFunction } from './events'
 import {
   is,
   dispose,
@@ -31,14 +30,15 @@ import {
   useIsomorphicLayoutEffect,
   Camera,
   updateCamera,
+  applyProps,
 } from './utils'
 import { useStore } from './hooks'
 import { Stage, Lifecycle, Stages } from './stages'
 import { OffscreenCanvas } from 'three'
+import { InstanceProps } from './types'
 
 const roots = new Map<Element, Root>()
 const { invalidate, advance } = createLoop(roots)
-const { reconciler, applyProps } = createRenderer(roots, getEventPriority)
 const shallowLoose = { objects: 'shallow', strict: false } as EquConfig
 
 type Properties<T> = Pick<T, { [K in keyof T]: T[K] extends (_: any) => any ? never : K }[keyof T]>
@@ -87,11 +87,9 @@ export type RenderProps<TCanvas extends Element> = {
   /** A `THREE.Camera` instance or props that go into the default camera */
   camera?: (
     | Camera
-    | Partial<
-        ReactThreeFiber.Object3DNode<THREE.Camera, typeof THREE.Camera> &
-          ReactThreeFiber.Object3DNode<THREE.PerspectiveCamera, typeof THREE.PerspectiveCamera> &
-          ReactThreeFiber.Object3DNode<THREE.OrthographicCamera, typeof THREE.OrthographicCamera>
-      >
+    | InstanceProps<typeof THREE.Camera>
+    | InstanceProps<typeof THREE.PerspectiveCamera>
+    | InstanceProps<typeof THREE.OrthographicCamera>
   ) & {
     /** Flags the camera as manual, putting projection into your own hands */
     manual?: boolean