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

docs/API/events.mdx

@@ -6,8 +6,6 @@ nav: 8
 
 `three.js` objects that implement their own `raycast` method (meshes, lines, etc) can be interacted with by declaring events on them. We support pointer events, clicks and wheel-scroll. Events contain the browser event as well as the `three.js` event data (object, point, distance, etc). You may want to [polyfill](https://github.com/jquery/PEP) them, if that's a concern.
 
-Additionally, there's a special `onUpdate` that is called every time the object gets fresh props, which is good for things like `self => (self.verticesNeedUpdate = true)`.
-
 Also notice the `onPointerMissed` on the canvas element, which fires on clicks that haven't hit _any_ meshes.
 
 ```jsx
@@ -24,7 +22,6 @@ Also notice the `onPointerMissed` on the canvas element, which fires on clicks t
   onPointerLeave={(e) => console.log('leave')} // see note 1
   onPointerMove={(e) => console.log('move')}
   onPointerMissed={() => console.log('missed')}
-  onUpdate={(self) => console.log('props have been updated')}
 />
 ```
 

docs/tutorials/events-and-interaction.mdx

@@ -26,7 +26,6 @@ Any mesh in React Three Fiber has a large number of events, 13 to be more precis
   onPointerLeave={(e) => console.log('leave')}
   onPointerMove={(e) => console.log('move')}
   onPointerMissed={() => console.log('missed')}
-  onUpdate={(self) => console.log('props have been updated')}
 />
 ```
 

docs/tutorials/typescript.mdx

@@ -89,26 +89,14 @@ You can then declaratively create custom elements with primitives, but TypeScrip
 <customElement />
 ```
 
-### Node Helpers
-
-react-three-fiber exports helpers that you can use to define different types of nodes. These nodes will type an element that we'll attach to the global JSX namespace.
-
-```tsx
-Node
-Object3DNode
-BufferGeometryNode
-MaterialNode
-LightNode
-```
-
 ### Extending ThreeElements
 
-Since our custom element is an object, we'll use `Object3DNode` to define it.
+To define our element in JSX, we'll use the `Node` interface to extend `ThreeElements`. This interface describes three.js classes that are available in the R3F catalog and can be used as native elements.
 
 ```tsx
 import { useRef, useEffect } from 'react'
 import { GridHelper } from 'three'
-import { extend, Object3DNode } from '@react-three/fiber'
+import { extend, Node } from '@react-three/fiber'
 
 // Create our custom element
 class CustomElement extends GridHelper {}
@@ -119,7 +107,7 @@ extend({ CustomElement })
 // Add types to ThreeElements elements so primitives pick up on it
 declare module '@react-three/fiber' {
   interface ThreeElements {
-    customElement: Object3DNode<CustomElement, typeof CustomElement>
+    customElement: Node<typeof CustomElement>
   }
 }
 

example/typings/global.d.ts

@@ -1,11 +1,10 @@
 import { ReactThreeFiber } 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: ReactThreeFiber.Node<typeof OrbitControls>
+    dotMaterial: ReactThreeFiber.Node<typeof DotMaterial>
   }
 }

packages/fiber/src/core/events.ts

@@ -173,7 +173,8 @@ 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 Instance<THREE.Object3D>['object']).__r3f?.handlers[('onPointer' + name) as keyof EventHandlers],
       ),
     )
   }
@@ -239,7 +240,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 Instance<THREE.Object3D>['object']).__r3f?.eventCount)
+          intersections.push({ ...hit, eventObject })
         eventObject = eventObject.parent
       }
     }
@@ -369,10 +371,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 Instance<THREE.Object3D>['object']).__r3f
         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 +436,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 Instance<THREE.Object3D>['object']).__r3f
+
         // Check presence of handlers
         if (!instance?.eventCount) return
+        const handlers = instance.handlers
 
         if (isPointerMove) {
           // Move event ...
@@ -488,7 +491,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 Instance<THREE.Object3D>['object']).__r3f?.handlers.onPointerMissed?.(event),
     )
   }
 

packages/fiber/src/core/index.tsx

@@ -19,9 +19,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 +31,14 @@ import {
   useIsomorphicLayoutEffect,
   Camera,
   updateCamera,
+  applyProps,
 } from './utils'
 import { useStore } from './hooks'
 import { Stage, Lifecycle, Stages } from './stages'
 import { OffscreenCanvas } from 'three'
 
 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]>
@@ -88,9 +88,9 @@ export type RenderProps<TCanvas extends Element> = {
   camera?: (
     | Camera
     | Partial<
-        ReactThreeFiber.Object3DNode<THREE.Camera, typeof THREE.Camera> &
-          ReactThreeFiber.Object3DNode<THREE.PerspectiveCamera, typeof THREE.PerspectiveCamera> &
-          ReactThreeFiber.Object3DNode<THREE.OrthographicCamera, typeof THREE.OrthographicCamera>
+        ReactThreeFiber.Node<typeof THREE.Camera> &
+          ReactThreeFiber.Node<typeof THREE.PerspectiveCamera> &
+          ReactThreeFiber.Node<typeof THREE.OrthographicCamera>
       >
   ) & {
     /** Flags the camera as manual, putting projection into your own hands */
@@ -242,9 +242,9 @@ function createRoot<TCanvas extends Element>(canvas: TCanvas): ReconcilerRoot<TC
 
       // Set raycaster options
       const { params, ...options } = raycastOptions || {}
-      if (!is.equ(options, raycaster, shallowLoose)) applyProps(raycaster as any, { ...options })
+      if (!is.equ(options, raycaster, shallowLoose)) applyProps(raycaster, { ...options } as any)
       if (!is.equ(params, raycaster.params, shallowLoose))
-        applyProps(raycaster as any, { params: { ...raycaster.params, ...params } })
+        applyProps(raycaster, { params: { ...raycaster.params, ...params } } as any)
 
       // Create default camera (one time only!)
       if (!state.camera) {
@@ -256,7 +256,7 @@ function createRoot<TCanvas extends Element>(canvas: TCanvas): ReconcilerRoot<TC
           : new THREE.PerspectiveCamera(75, 0, 0.1, 1000)
         if (!isCamera) {
           camera.position.z = 5
-          if (cameraOptions) applyProps(camera as any, cameraOptions as any)
+          if (cameraOptions) applyProps(camera, cameraOptions as any)
           // Always look at center by default
           if (!cameraOptions?.rotation) camera.lookAt(0, 0, 0)
         }
@@ -326,7 +326,7 @@ function createRoot<TCanvas extends Element>(canvas: TCanvas): ReconcilerRoot<TC
 
       // Set gl props
       if (glConfig && !is.fun(glConfig) && !isRenderer(glConfig) && !is.equ(glConfig, gl, shallowLoose))
-        applyProps(gl as any, glConfig as any)
+        applyProps(gl, glConfig as any)
       // Store events internally
       if (events && !state.events.handlers) state.set({ events: events(store) })
       // Check pixelratio
@@ -422,7 +422,7 @@ function unmountComponentAtNode<TElement extends Element>(canvas: TElement, call
             state.gl?.renderLists?.dispose?.()
             state.gl?.forceContextLoss?.()
             if (state.gl?.xr) state.xr.disconnect()
-            dispose(state)
+            dispose(state.scene)
             roots.delete(canvas)
             if (callback) callback(canvas)
           } catch (e) {