Merge branch 'v9' into refactor/upgrade-zustand

pmndrs · Oct 11, 2022 · 8033b4e · 8033b4e
2 parents 0747446 + e7804f9
commit 8033b4e
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 7 deletions.
diff --git a/packages/fiber/CHANGELOG.md b/packages/fiber/CHANGELOG.md
@@ -1,5 +1,17 @@
 # @react-three/fiber
 
+## 8.8.10
+
+### Patch Changes
+
+- 00c24718: fix: invalidate pierced props
+
+## 8.8.9
+
+### Patch Changes
+
+- 4254400e: fix(createPortal): use correct JSX type
+
 ## 8.8.8
 
 ### Patch Changes

diff --git a/packages/fiber/package.json b/packages/fiber/package.json
@@ -44,7 +44,7 @@
   "dependencies": {
     "@babel/runtime": "^7.17.8",
     "@types/react-reconciler": "^0.26.7",
-    "its-fine": "^1.0.5",
+    "its-fine": "^1.0.6",
     "react-reconciler": "^0.27.0",
     "react-use-measure": "^2.1.1",
     "scheduler": "^0.21.0",

diff --git a/packages/fiber/src/core/index.tsx b/packages/fiber/src/core/index.tsx
@@ -438,7 +438,7 @@ export type InjectState = Partial<
   }
 >
 
-function createPortal(children: React.ReactNode, container: THREE.Object3D, state?: InjectState): React.ReactNode {
+function createPortal(children: React.ReactNode, container: THREE.Object3D, state?: InjectState): JSX.Element {
   return <Portal key={container.uuid} children={children} container={container} state={state} />
 }
 
@@ -450,7 +450,7 @@ function Portal({
   children: React.ReactNode
   state?: InjectState
   container: THREE.Object3D
-}) {
+}): JSX.Element {
   /** This has to be a component because it would not be able to call useThree/useStore otherwise since
    *  if this is our environment, then we are not in r3f's renderer but in react-dom, it would trigger
    *  the "R3F hooks can only be used within the Canvas component!" warning:

diff --git a/packages/fiber/src/core/utils.ts b/packages/fiber/src/core/utils.ts
@@ -254,6 +254,11 @@ export function diffProps<T = any>(
 
     // Props changed, add them
     changedProps[prop] = newProps[prop]
+
+    // Reset pierced props
+    for (const other in newProps) {
+      if (other.startsWith(`${prop}-`)) changedProps[other] = newProps[other]
+    }
   }
 
   // Reset removed props for HMR

diff --git a/packages/fiber/tests/utils.test.ts b/packages/fiber/tests/utils.test.ts
@@ -261,6 +261,18 @@ describe('diffProps', () => {
     expect(filtered).toStrictEqual({ bar: false })
   })
 
+  it('invalidates pierced props when root is changed', async () => {
+    const texture1 = { needsUpdate: false, name: '' } as THREE.Texture
+    const texture2 = { needsUpdate: false, name: '' } as THREE.Texture
+
+    const oldProps = { map: texture1, 'map-needsUpdate': true, 'map-name': 'test' }
+    const newProps = { map: texture2, 'map-needsUpdate': true, 'map-name': 'test' }
+
+    const instance = prepare({}, storeMock, '', oldProps)
+    const filtered = diffProps(instance, newProps)
+    expect(filtered).toStrictEqual(newProps)
+  })
+
   it('should pick removed props for HMR', () => {
     const instance = prepare(new THREE.Object3D(), storeMock, '', { position: [0, 0, 1] })
     const newProps = {}

diff --git a/yarn.lock b/yarn.lock
@@ -5945,10 +5945,10 @@ istanbul-reports@^3.1.3:
     html-escaper "^2.0.0"
     istanbul-lib-report "^3.0.0"
 
-its-fine@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/its-fine/-/its-fine-1.0.5.tgz#dbd8130e021aafe030ca5001085c27ff2a057ab3"
-  integrity sha512-JVqIHuUGRF4mBJWV/o9CS86wU57oWAX+mE2iokFpZ+B1R1tcfRvLZXVFd9tWJgY7gfhBURYyXJs7LcoJl/Af+Q==
+its-fine@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/its-fine/-/its-fine-1.0.6.tgz#087b14d71137816dab676d8b57c35a6cd5d2b021"
+  integrity sha512-VZJZPwVT2kxe5KQv+TxCjojfLiUIut8zXDNLTxcM7gJ/xQ/bSPk5M0neZ+j3myy45KKkltY1mm1jyJgx3Fxsdg==
   dependencies:
     "@types/react-reconciler" "^0.28.0"