chore: resolve conflicts

a4a31ed
#3214
Misc transient Zustand changes

packages/fiber/src/core/hooks.tsx

@@ -35,7 +35,8 @@ export function useThree<T = RootState>(
   selector: (state: RootState) => T = (state) => state as unknown as T,
   equalityFn?: <T>(state: T, newState: T) => boolean,
 ): T {
-  return useStore()(selector, equalityFn)
+  // TODO: fix this type
+  return useStore()(selector, equalityFn as any)
 }
 
 /**

packages/fiber/src/core/reconciler.tsx

@@ -3,7 +3,17 @@ import * as React from 'react'
 import Reconciler from 'react-reconciler'
 import { ContinuousEventPriority, DiscreteEventPriority, DefaultEventPriority } from 'react-reconciler/constants'
 import { unstable_IdlePriority as idlePriority, unstable_scheduleCallback as scheduleCallback } from 'scheduler'
-import { diffProps, applyProps, invalidateInstance, attach, detach, prepare, globalScope, isObject3D } from './utils'
+import {
+  diffProps,
+  applyProps,
+  invalidateInstance,
+  attach,
+  detach,
+  prepare,
+  globalScope,
+  isObject3D,
+  findInitialRoot,
+} from './utils'
 import type { RootStore } from './store'
 import { removeInteractivity, type EventHandlers } from './events'
 import type { ThreeElement } from '../three-types'
@@ -143,6 +153,7 @@ function handleContainerEffects(parent: Instance, child: Instance, beforeChild?:
       child.object.parent = parent.object
       parent.object.children.splice(childIndex, 0, child.object)
       child.object.dispatchEvent({ type: 'added' })
+      parent.object.dispatchEvent({ type: 'childadded', child: child.object })
     } else {
       parent.object.add(child.object)
     }
@@ -203,7 +214,7 @@ function removeChild(
     detach(parent, child)
   } else if (isObject3D(child.object) && isObject3D(parent.object)) {
     parent.object.remove(child.object)
-    removeInteractivity(child.root, child.object)
+    removeInteractivity(findInitialRoot(child), child.object)
   }
 
   // Allow objects to bail out of unmount disposal with dispose={null}

packages/fiber/src/core/renderer.tsx

@@ -1,7 +1,7 @@
 import * as THREE from 'three'
 import * as React from 'react'
 import { ConcurrentRoot } from 'react-reconciler/constants'
-import create from 'zustand'
+import { create } from 'zustand'
 
 import type { Properties, ThreeElement } from '../three-types'
 import {
@@ -567,9 +567,6 @@ function Portal({ state = {}, children, container }: PortalProps): JSX.Element {
     return store
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [previousRoot, container])
-  React.useEffect(() => {
-    return () => usePortalStore.destroy()
-  }, [usePortalStore])
 
   return (
     <>

packages/fiber/src/core/store.ts

@@ -1,6 +1,6 @@
 import * as THREE from 'three'
 import * as React from 'react'
-import create, { type StoreApi, type UseBoundStore } from 'zustand'
+import { create, type StoreApi, type UseBoundStore } from 'zustand'
 import type { DomEvent, EventManager, PointerCaptureTarget, ThreeEvent } from './events'
 import { calculateDpr, type Camera, isOrthographicCamera, prepare, updateCamera } from './utils'
 import type { FixedStage, Stage } from './stages'

packages/fiber/src/core/utils.tsx

@@ -1,11 +1,20 @@
 import * as THREE from 'three'
 import * as React from 'react'
 import { useFiber, traverseFiber, useContextBridge } from 'its-fine'
-import { catalogue } from './reconciler'
+import { Instance, catalogue } from './reconciler'
 import type { Fiber } from 'react-reconciler'
 import type { EventHandlers } from './events'
-import type { Dpr, Renderer, RootState, RootStore, Size } from './store'
-import type { ConstructorRepresentation, Instance } from './reconciler'
+import type { Dpr, Renderer, RootStore, Size } from './store'
+
+/**
+ * Returns the instance's initial (outmost) root.
+ */
+export function findInitialRoot<T>(instance: Instance<T>): RootStore {
+  let root = instance.root
+  // TODO: this needs testing https://github.com/pmndrs/react-three-fiber/commit/a4a31ed93c48d1e6dac91329bb5f2ca6a25e5f9c
+  // while (root.getState().previousRoot) root = root.getState().previousRoot!
+  return root
+}
 
 /**
  * Returns `true` with correct TS type inference if an object has a configurable color space (since r152).
@@ -366,7 +375,7 @@ const __DEV__ = typeof process !== 'undefined' && process.env.NODE_ENV !== 'prod
 // This function applies a set of changes to the instance
 export function applyProps<T = any>(object: Instance<T>['object'], props: Instance<T>['props']): Instance<T>['object'] {
   const instance = object.__r3f
-  const rootState = instance?.root.getState()
+  const rootState = instance && findInitialRoot(instance).getState()
   const prevHandlers = instance?.eventCount
 
   for (const prop in props) {

packages/fiber/tests/hooks.test.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react'
 import * as THREE from 'three'
-import * as Stdlib from 'three-stdlib'
 import { createCanvas } from '@react-three/test-renderer/src/createTestCanvas'
 
 import {
@@ -88,22 +87,21 @@ describe('hooks', () => {
   })
 
   it('can handle useLoader hook', async () => {
-    let gltf!: Stdlib.GLTF & ObjectMap
-
     const MockMesh = new THREE.Mesh()
     MockMesh.name = 'Scene'
 
-    jest.spyOn(Stdlib, 'GLTFLoader').mockImplementation(
-      () =>
-        ({
-          load: jest.fn().mockImplementation((_url, onLoad) => {
-            onLoad({ scene: MockMesh })
-          }),
-        } as unknown as Stdlib.GLTFLoader),
-    )
+    interface GLTF {
+      scene: THREE.Object3D
+    }
+    class GLTFLoader extends THREE.Loader {
+      load(url: string, onLoad: (gltf: GLTF) => void): void {
+        onLoad({ scene: MockMesh })
+      }
+    }
 
+    let gltf!: GLTF & ObjectMap
     const Component = () => {
-      gltf = useLoader(Stdlib.GLTFLoader, '/suzanne.glb')
+      gltf = useLoader(GLTFLoader, '/suzanne.glb')
       return <primitive object={gltf.scene} />
     }
 
@@ -147,8 +145,8 @@ describe('hooks', () => {
 
       return (
         <>
-          <primitive object={mockMesh} />
-          <primitive object={mockScene} />
+          <primitive object={mockMesh as THREE.Mesh} />
+          <primitive object={mockScene as THREE.Scene} />
         </>
       )
     }

packages/fiber/tests/utils.test.ts

@@ -16,12 +16,11 @@ import {
 } from '../src/core/utils'
 
 // Mocks a Zustand store
-const storeMock: RootStore = Object.assign(() => null!, {
+const storeMock = Object.assign(() => null!, {
   getState: () => null!,
   setState() {},
   subscribe: () => () => {},
-  destroy() {},
-})
+}) as unknown as RootStore
 
 describe('is', () => {
   const myFunc = () => null

packages/test-renderer/src/__tests__/RTTR.hooks.test.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react'
-import * as Stdlib from 'three-stdlib'
 import * as THREE from 'three'
 import { useFrame, useLoader, useThree } from '@react-three/fiber'
 
@@ -37,17 +36,14 @@ describe('ReactThreeTestRenderer Hooks', () => {
 
   it('can handle useLoader hook', async () => {
     const MockMesh = new THREE.Mesh()
-    jest.spyOn(Stdlib, 'GLTFLoader').mockImplementation(
-      () =>
-        ({
-          load: jest.fn().mockImplementation((_url, onLoad) => {
-            onLoad(MockMesh)
-          }),
-        } as unknown as Stdlib.GLTFLoader),
-    )
+    class Loader extends THREE.Loader {
+      load(url: string, onLoad: (mesh: THREE.Mesh) => void): void {
+        onLoad(MockMesh)
+      }
+    }
 
     const Component = () => {
-      const model = useLoader(Stdlib.GLTFLoader, '/suzanne.glb')
+      const model = useLoader(Loader, '/suzanne.glb')
 
       return <primitive object={model} />
     }