refactor(RTTR): get memoized props from instance fiber

pmndrs · Feb 14, 2023 · bce99ae · bce99ae
1 parent 151abf0
commit bce99ae
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 8 deletions.
diff --git a/packages/fiber/src/core/renderer.ts b/packages/fiber/src/core/renderer.ts
@@ -21,6 +21,7 @@ export type Root = { fiber: Reconciler.FiberRoot; store: UseBoundStore<RootState
 
 export type LocalState = {
   type: string
+  fiber: Reconciler.Fiber | null
   root: UseBoundStore<RootState>
   // objects and parent are used when children are added with `attach` instead of being added to the Object3D scene graph
   objects: Instance[]
@@ -88,6 +89,8 @@ function createRenderer<TCanvas>(_roots: Map<TCanvas, Root>, _getEventPriority?:
     type: string,
     { args = [], attach, ...props }: InstanceProps,
     root: UseBoundStore<RootState>,
+    _hostContext: null,
+    fiber: Reconciler.Fiber,
   ) {
     let name = `${type[0].toUpperCase()}${type.slice(1)}`
     let instance: Instance
@@ -113,6 +116,7 @@ function createRenderer<TCanvas>(_roots: Map<TCanvas, Root>, _getEventPriority?:
         type,
         root,
         attach,
+        fiber,
       })
     }
 
@@ -127,6 +131,7 @@ function createRenderer<TCanvas>(_roots: Map<TCanvas, Root>, _getEventPriority?:
     // why it passes "true" here
     // There is no reason to apply props to injects
     if (name !== 'inject') applyProps(instance, props)
+    instance.__r3f.fiber = fiber
     return instance
   }
 
@@ -250,7 +255,7 @@ function createRenderer<TCanvas>(_roots: Map<TCanvas, Root>, _getEventPriority?:
     const parent = instance.__r3f?.parent
     if (!parent) return
 
-    const newInstance = createInstance(type, newProps, instance.__r3f.root)
+    const newInstance = createInstance(type, newProps, instance.__r3f.root, null, fiber)
 
     // https://github.com/pmndrs/react-three-fiber/issues/1348
     // When args change the instance has to be re-constructed, which then

diff --git a/packages/fiber/src/core/utils.ts b/packages/fiber/src/core/utils.ts
@@ -156,6 +156,7 @@ export function prepare<T = THREE.Object3D>(object: T, state?: Partial<LocalStat
       handlers: {},
       objects: [],
       parent: null,
+      fiber: null,
       ...state,
     }
   }

diff --git a/packages/test-renderer/src/__tests__/__snapshots__/RTTR.core.test.tsx.snap b/packages/test-renderer/src/__tests__/__snapshots__/RTTR.core.test.tsx.snap
@@ -32,6 +32,7 @@ Array [
                     -1,
                     1,
                   ],
+                  "attach": "attributes-position",
                   "count": 6,
                   "itemSize": 3,
                 },
@@ -40,13 +41,15 @@ Array [
             ],
             "props": Object {
               "args": Array [],
+              "attach": "geometry",
             },
             "type": "bufferGeometry",
           },
           Object {
             "children": Array [],
             "props": Object {
               "args": Array [],
+              "attach": "material",
               "color": "hotpink",
             },
             "type": "meshBasicMaterial",
@@ -65,6 +68,7 @@ Array [
             0,
             255,
           ],
+          "attach": "background",
         },
         "type": "color",
       },
@@ -94,6 +98,7 @@ Array [
             0,
             0,
           ],
+          "attach": "background",
         },
         "type": "color",
       },
@@ -113,6 +118,7 @@ Array [
             0,
             255,
           ],
+          "attach": "background",
         },
         "type": "color",
       },
@@ -132,6 +138,7 @@ Array [
             0,
             0,
           ],
+          "attach": "background",
         },
         "type": "color",
       },
@@ -304,8 +311,8 @@ Array [
             "children": Array [],
             "props": Object {
               "args": Array [
-                2,
-                2,
+                6,
+                6,
               ],
             },
             "type": "boxGeometry",

diff --git a/packages/test-renderer/src/createTestInstance.ts b/packages/test-renderer/src/createTestInstance.ts
@@ -2,7 +2,7 @@ import { Object3D } from 'three'
 
 import type { MockInstance, MockScene, Obj, TestInstanceChildOpts } from './types/internal'
 
-import { expectOne, matchProps, findAll } from './helpers/testInstance'
+import { expectOne, matchProps, findAll, getMemoizedProps } from './helpers/testInstance'
 
 export class ReactThreeTestInstance<TInstance extends Object3D = Object3D> {
   _fiber: MockInstance
@@ -20,7 +20,7 @@ export class ReactThreeTestInstance<TInstance extends Object3D = Object3D> {
   }
 
   public get props(): Obj {
-    return this._fiber.__r3f.memoizedProps
+    return getMemoizedProps(this._fiber)
   }
 
   public get parent(): ReactThreeTestInstance | null {

diff --git a/packages/test-renderer/src/helpers/testInstance.ts b/packages/test-renderer/src/helpers/testInstance.ts
@@ -1,5 +1,21 @@
 import { ReactThreeTestInstance } from '../createTestInstance'
-import type { Obj } from '../types/internal'
+import type { MockInstance, Obj } from '../types/internal'
+
+const REACT_INTERNAL_PROPS = ['children', 'key', 'ref']
+
+export function getMemoizedProps(instance: MockInstance): Record<string, unknown> {
+  const props: Record<string, unknown> = { args: [] }
+
+  // Gets only instance props from instance Fiber
+  const fiber = instance.__r3f.fiber?.alternate ?? instance.__r3f.fiber
+  if (fiber) {
+    for (const key in fiber.memoizedProps) {
+      if (!REACT_INTERNAL_PROPS.includes(key)) props[key] = fiber.memoizedProps[key]
+    }
+  }
+
+  return props
+}
 
 export const expectOne = <TItem>(items: TItem[], msg: string) => {
   if (items.length === 1) {

diff --git a/packages/test-renderer/src/helpers/tree.ts b/packages/test-renderer/src/helpers/tree.ts
@@ -1,6 +1,7 @@
 import type { TreeNode, Tree } from '../types/public'
 import type { MockSceneChild, MockScene } from '../types/internal'
 import { lowerCaseFirstLetter } from './strings'
+import { getMemoizedProps } from './testInstance'
 
 const treeObjectFactory = (
   type: TreeNode['type'],
@@ -16,7 +17,7 @@ const toTreeBranch = (obj: MockSceneChild[]): TreeNode[] =>
   obj.map((child) => {
     return treeObjectFactory(
       lowerCaseFirstLetter(child.type || child.constructor.name),
-      { ...child.__r3f.memoizedProps },
+      { ...getMemoizedProps(child) },
       toTreeBranch([...(child.children || []), ...child.__r3f.objects]),
     )
   })
@@ -25,7 +26,7 @@ export const toTree = (root: MockScene): Tree =>
   root.children.map((obj) =>
     treeObjectFactory(
       lowerCaseFirstLetter(obj.type),
-      { ...obj.__r3f.memoizedProps },
+      { ...getMemoizedProps(obj) },
       toTreeBranch([...(obj.children as MockSceneChild[]), ...(obj.__r3f.objects as MockSceneChild[])]),
     ),
   )