Revert "fix(core): portals should be nestable (pmndrs#2746)"

This reverts commit 620f5a7.

Author: drcmda

packages/fiber/src/core/index.tsx

@@ -4,7 +4,18 @@ import { ConcurrentRoot } from 'react-reconciler/constants'
 import create, { UseBoundStore } from 'zustand'
 
 import * as ReactThreeFiber from '../three-types'
-import { Renderer, createStore, isRenderer, context, RootState, Size, Dpr, Performance } from './store'
+import {
+ Renderer,
+ createStore,
+ isRenderer,
+ context,
+ RootState,
+ Size,
+ Dpr,
+ Performance,
+ PrivateKeys,
+ privateKeys,
+} from './store'
 import { createRenderer, extend, prepare, Root } from './renderer'
 import { createLoop, addEffect, addAfterEffect, addTail, flushGlobalEffects } from './loop'
 import { getEventPriority, EventManager, ComputeFunction } from './events'
@@ -19,7 +30,6 @@ import {
  updateCamera,
  getColorManagement,
  hasColorSpace,
- useMutableCallback,
 } from './utils'
 import { useStore } from './hooks'
 import type { Properties } from '../three-types'
@@ -423,18 +433,19 @@ function unmountComponentAtNode<TCanvas extends Canvas>(canvas: TCanvas, callbac
 }
 
 export type InjectState = Partial<
- Omit<RootState, 'events'> & {
+ Omit<RootState, PrivateKeys> & {
  events?: {
  enabled?: boolean
  priority?: number
  compute?: ComputeFunction
  connected?: any
  }
+ size?: Size
  }
 >
 
 function createPortal(children: React.ReactNode, container: THREE.Object3D, state?: InjectState): JSX.Element {
- return <Portal children={children} container={container} state={state} />
+ return <Portal key={container.uuid} children={children} container={container} state={state} />
 }
 
 function Portal({
@@ -456,52 +467,90 @@ function Portal({
  const [raycaster] = React.useState(() => new THREE.Raycaster())
  const [pointer] = React.useState(() => new THREE.Vector2())
 
- const inject = useMutableCallback((rootState: RootState, injectState: RootState) => {
- let viewport
- if (injectState.camera && size) {
- const camera = injectState.camera
- // Calculate the override viewport, if present
- viewport = rootState.viewport.getCurrentViewport(camera, new THREE.Vector3(), size)
- // Update the portal camera, if it differs from the previous layer
- if (camera !== rootState.camera) updateCamera(camera, size)
- }
+ const inject = React.useCallback(
+ (rootState: RootState, injectState: RootState) => {
+ const intersect: Partial<RootState> = { ...rootState } // all prev state props
+
+ // Only the fields of "rootState" that do not differ from injectState
+ // Some props should be off-limits
+ // Otherwise filter out the props that are different and let the inject layer take precedence
+ Object.keys(rootState).forEach((key) => {
+ if (
+ // Some props should be off-limits
+ privateKeys.includes(key as PrivateKeys) ||
+ // Otherwise filter out the props that are different and let the inject layer take precedence
+ // Unless the inject layer props is undefined, then we keep the root layer
+ (rootState[key as keyof RootState] !== injectState[key as keyof RootState] &&
+ injectState[key as keyof RootState])
+ ) {
+ delete intersect[key as keyof RootState]
+ }
+ })
+
+ let viewport = undefined
+ if (injectState && size) {
+ const camera = injectState.camera
+ // Calculate the override viewport, if present
+ viewport = rootState.viewport.getCurrentViewport(camera, new THREE.Vector3(), size)
+ // Update the portal camera, if it differs from the previous layer
+ if (camera !== rootState.camera) updateCamera(camera, size)
+ }
 
- return {
- // The intersect consists of the previous root state
- ...rootState,
- get: injectState.get,
- set: injectState.set,
- // Portals have their own scene, which forms the root, a raycaster and a pointer
+ return {
+ // The intersect consists of the previous root state
+ ...intersect,
+ // Portals have their own scene, which forms the root, a raycaster and a pointer
+ scene: container as THREE.Scene,
+ raycaster,
+ pointer,
+ mouse: pointer,
+ // Their previous root is the layer before it
+ previousRoot,
+ // Events, size and viewport can be overridden by the inject layer
+ events: { ...rootState.events, ...injectState?.events, ...events },
+ size: { ...rootState.size, ...size },
+ viewport: { ...rootState.viewport, ...viewport },
+ ...rest,
+ } as RootState
+ },
+ [state],
+ )
+
+ const [usePortalStore] = React.useState(() => {
+ // Create a mirrored store, based on the previous root with a few overrides ...
+ const previousState = previousRoot.getState()
+ const store = create<RootState>((set, get) => ({
+ ...previousState,
  scene: container as THREE.Scene,
  raycaster,
  pointer,
  mouse: pointer,
- // Their previous root is the layer before it
  previousRoot,
- // Events, size and viewport can be overridden by the inject layer
- events: { ...rootState.events, ...injectState.events, ...events },
- size: { ...rootState.size, ...size },
- viewport: { ...rootState.viewport, ...viewport },
+ events: { ...previousState.events, ...events },
+ size: { ...previousState.size, ...size },
+ ...rest,
+ // Set and get refer to this root-state
+ set,
+ get,
  // Layers are allowed to override events
  setEvents: (events: Partial<EventManager<any>>) =>
- injectState.set((state) => ({ ...state, events: { ...state.events, ...events } })),
- } as RootState
+ set((state) => ({ ...state, events: { ...state.events, ...events } })),
+ }))
+ return store
  })
 
- const usePortalStore = React.useMemo(() => {
- const store = create((set, get) => ({ ...rest, set, get } as RootState))
-
+ React.useEffect(() => {
  // Subscribe to previous root-state and copy changes over to the mirrored portal-state
- const onMutate = (prev: RootState) => store.setState((state) => inject.current(prev, state))
- onMutate(previousRoot.getState())
- previousRoot.subscribe(onMutate)
+ const unsub = previousRoot.subscribe((prev) => usePortalStore.setState((state) => inject(prev, state)))
+ return () => {
+ unsub()
+ usePortalStore.destroy()
+ }
+ }, [])
 
- return store
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [previousRoot, container])
  React.useEffect(() => {
- return () => usePortalStore.destroy()
- }, [usePortalStore])
+ usePortalStore.setState((injectState) => inject(previousRoot.getState(), injectState))
+ }, [inject])
 
  return (
  <>

packages/fiber/src/core/store.ts

@@ -5,6 +5,22 @@ import { prepare } from './renderer'
 import { DomEvent, EventManager, PointerCaptureTarget, ThreeEvent } from './events'
 import { calculateDpr, Camera, isOrthographicCamera, updateCamera } from './utils'
 
+// Keys that shouldn't be copied between R3F stores
+export const privateKeys = [
+ 'set',
+ 'get',
+ 'setSize',
+ 'setFrameloop',
+ 'setDpr',
+ 'events',
+ 'invalidate',
+ 'advance',
+ 'size',
+ 'viewport',
+] as const
+
+export type PrivateKeys = typeof privateKeys[number]
+
 export interface Intersection extends THREE.Intersection {
  eventObject: THREE.Object3D
 }

packages/fiber/tests/core/renderer.test.tsx

@@ -13,7 +13,7 @@ import {
  createPortal,
 } from '../../src/index'
 import { UseBoundStore } from 'zustand'
-import { RootState } from '../../src/core/store'
+import { privateKeys, RootState } from '../../src/core/store'
 import { Instance } from '../../src/core/renderer'
 
 type ComponentMesh = THREE.Mesh<THREE.BoxBufferGeometry, THREE.MeshBasicMaterial>
@@ -823,6 +823,11 @@ describe('renderer', () => {
  // Creates an isolated state enclave
  expect(state.scene).not.toBe(scene)
  expect(portalState.scene).toBe(scene)
+
+ // Preserves internal keys
+ const overwrittenKeys = ['get', 'set', 'events', 'size', 'viewport']
+ const respectedKeys = privateKeys.filter((key) => overwrittenKeys.includes(key) || state[key] === portalState[key])
+ expect(respectedKeys).toStrictEqual(privateKeys)
  })
 
  it('can handle createPortal on unmounted container', async () => {