@react-three/fiber - npm Package Compare versions

Comparing version 7.0.8 to 7.0.9

CHANGELOG.md

 # @react-three/fiber
 
+## 7.0.9
+
+### Patch Changes
+
+- cd266e4: Fix diffProps dashed keys
+
 ## 7.0.8
@@ -4,0 +10,0 @@

dist/declarations/src/core/renderer.d.ts

@@ -53,3 +53,3 @@ import * as THREE from 'three';
     };
-    changes: [key: string, value: unknown, isEvent: boolean, instance: Instance, prop: any][];
+    changes: [key: string, value: unknown, isEvent: boolean, keys: string[]][];
 };
@@ -56,0 +56,0 @@ export declare const isDiffSet: (def: any) => def is DiffSet;

dist/react-three-fiber.cjs.dev.js

@@ -505,20 +505,9 @@ 'use strict';
 
-      if (checkShallow(value, previous[key])) return;
-      let currentInstance = instance;
-      let targetProp = currentInstance[key]; // Collect handlers and bail out
+      if (checkShallow(value, previous[key])) return; // Collect handlers and bail out
 
-      if (/^on(Pointer|Click|DoubleClick|ContextMenu|Wheel)/.test(key)) return changes.push([key, value, true, currentInstance, targetProp]); // Revolve dashed props
+      if (/^on(Pointer|Click|DoubleClick|ContextMenu|Wheel)/.test(key)) return changes.push([key, value, true, []]); // Split dashed props
 
-      if (key.includes('-')) {
-        const entries = key.split('-');
-        targetProp = entries.reduce((acc, key) => acc[key], instance); // If the target is atomic, it forces us to switch the root
-
-        if (!(targetProp && targetProp.set)) {
-          const [name, ...reverseEntries] = entries.reverse();
-          currentInstance = reverseEntries.reverse().reduce((acc, key) => acc[key], instance);
-          key = name;
-        }
-      }
-
-      changes.push([key, value, false, currentInstance, targetProp]);
+      let entries = [];
+      if (key.includes('-')) entries = key.split('-');
+      changes.push([key, value, false, entries]);
     });
@@ -550,4 +539,15 @@ const memoized = { ...props
     if (instance.__r3f) instance.__r3f.memoizedProps = memoized;
-    changes.forEach(([key, value, isEvent, currentInstance, targetProp]) => {
-      // https://github.com/mrdoob/three.js/issues/21209
+    changes.forEach(([key, value, isEvent, keys]) => {
+      let currentInstance = instance;
+      let targetProp = currentInstance[key]; // Revolve dashed props
+
+      if (keys.length) {
+        targetProp = keys.reduce((acc, key) => acc[key], instance); // If the target is atomic, it forces us to switch the root
+
+        if (!(targetProp && targetProp.set)) {
+          const [name, ...reverseEntries] = keys.reverse();
+          currentInstance = reverseEntries.reverse().reduce((acc, key) => acc[key], instance);
+          key = name;
+        }
+      } // https://github.com/mrdoob/three.js/issues/21209
       // HMR/fast-refresh relies on the ability to cancel out props, but threejs
@@ -557,2 +557,4 @@ // has no means to do this. Hence we curate a small collection of value-classes
       // For removed props, try to set default values, if possible
+
+
       if (value === DEFAULT + 'remove') {
@@ -559,0 +561,0 @@ if (targetProp && targetProp.constructor) {

dist/react-three-fiber.cjs.prod.js

@@ -505,20 +505,9 @@ 'use strict';
 
-      if (checkShallow(value, previous[key])) return;
-      let currentInstance = instance;
-      let targetProp = currentInstance[key]; // Collect handlers and bail out
+      if (checkShallow(value, previous[key])) return; // Collect handlers and bail out
 
-      if (/^on(Pointer|Click|DoubleClick|ContextMenu|Wheel)/.test(key)) return changes.push([key, value, true, currentInstance, targetProp]); // Revolve dashed props
+      if (/^on(Pointer|Click|DoubleClick|ContextMenu|Wheel)/.test(key)) return changes.push([key, value, true, []]); // Split dashed props
 
-      if (key.includes('-')) {
-        const entries = key.split('-');
-        targetProp = entries.reduce((acc, key) => acc[key], instance); // If the target is atomic, it forces us to switch the root
-
-        if (!(targetProp && targetProp.set)) {
-          const [name, ...reverseEntries] = entries.reverse();
-          currentInstance = reverseEntries.reverse().reduce((acc, key) => acc[key], instance);
-          key = name;
-        }
-      }
-
-      changes.push([key, value, false, currentInstance, targetProp]);
+      let entries = [];
+      if (key.includes('-')) entries = key.split('-');
+      changes.push([key, value, false, entries]);
     });
@@ -550,4 +539,15 @@ const memoized = { ...props
     if (instance.__r3f) instance.__r3f.memoizedProps = memoized;
-    changes.forEach(([key, value, isEvent, currentInstance, targetProp]) => {
-      // https://github.com/mrdoob/three.js/issues/21209
+    changes.forEach(([key, value, isEvent, keys]) => {
+      let currentInstance = instance;
+      let targetProp = currentInstance[key]; // Revolve dashed props
+
+      if (keys.length) {
+        targetProp = keys.reduce((acc, key) => acc[key], instance); // If the target is atomic, it forces us to switch the root
+
+        if (!(targetProp && targetProp.set)) {
+          const [name, ...reverseEntries] = keys.reverse();
+          currentInstance = reverseEntries.reverse().reduce((acc, key) => acc[key], instance);
+          key = name;
+        }
+      } // https://github.com/mrdoob/three.js/issues/21209
       // HMR/fast-refresh relies on the ability to cancel out props, but threejs
@@ -557,2 +557,4 @@ // has no means to do this. Hence we curate a small collection of value-classes
       // For removed props, try to set default values, if possible
+
+
       if (value === DEFAULT + 'remove') {
@@ -559,0 +561,0 @@ if (targetProp && targetProp.constructor) {

dist/react-three-fiber.esm.js

@@ -471,20 +471,9 @@ import * as THREE from 'three';
 
-      if (checkShallow(value, previous[key])) return;
-      let currentInstance = instance;
-      let targetProp = currentInstance[key]; // Collect handlers and bail out
+      if (checkShallow(value, previous[key])) return; // Collect handlers and bail out
 
-      if (/^on(Pointer|Click|DoubleClick|ContextMenu|Wheel)/.test(key)) return changes.push([key, value, true, currentInstance, targetProp]); // Revolve dashed props
+      if (/^on(Pointer|Click|DoubleClick|ContextMenu|Wheel)/.test(key)) return changes.push([key, value, true, []]); // Split dashed props
 
-      if (key.includes('-')) {
-        const entries = key.split('-');
-        targetProp = entries.reduce((acc, key) => acc[key], instance); // If the target is atomic, it forces us to switch the root
-
-        if (!(targetProp && targetProp.set)) {
-          const [name, ...reverseEntries] = entries.reverse();
-          currentInstance = reverseEntries.reverse().reduce((acc, key) => acc[key], instance);
-          key = name;
-        }
-      }
-
-      changes.push([key, value, false, currentInstance, targetProp]);
+      let entries = [];
+      if (key.includes('-')) entries = key.split('-');
+      changes.push([key, value, false, entries]);
     });
@@ -516,4 +505,15 @@ const memoized = { ...props
     if (instance.__r3f) instance.__r3f.memoizedProps = memoized;
-    changes.forEach(([key, value, isEvent, currentInstance, targetProp]) => {
-      // https://github.com/mrdoob/three.js/issues/21209
+    changes.forEach(([key, value, isEvent, keys]) => {
+      let currentInstance = instance;
+      let targetProp = currentInstance[key]; // Revolve dashed props
+
+      if (keys.length) {
+        targetProp = keys.reduce((acc, key) => acc[key], instance); // If the target is atomic, it forces us to switch the root
+
+        if (!(targetProp && targetProp.set)) {
+          const [name, ...reverseEntries] = keys.reverse();
+          currentInstance = reverseEntries.reverse().reduce((acc, key) => acc[key], instance);
+          key = name;
+        }
+      } // https://github.com/mrdoob/three.js/issues/21209
       // HMR/fast-refresh relies on the ability to cancel out props, but threejs
@@ -523,2 +523,4 @@ // has no means to do this. Hence we curate a small collection of value-classes
       // For removed props, try to set default values, if possible
+
+
       if (value === DEFAULT + 'remove') {
@@ -525,0 +527,0 @@ if (targetProp && targetProp.constructor) {

package.json

 {
   "name": "@react-three/fiber",
-  "version": "7.0.8",
+  "version": "7.0.9",
   "description": "A React renderer for Threejs",
@@ -5,0 +5,0 @@ "keywords": [

No alert changes

Worsened metrics

Total package byte prevSize

233167

decreased by-0.01%

No dependency changes