@react-three/fiber 8.0.17 → 8.0.20

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @react-three/fiber
 
+## 8.0.20
+
+### Patch Changes
+
+- 4c87bce: fix: attach, devtools, and perf fixes
+
+## 8.0.19
+
+### Patch Changes
+
+- 360b45a: fix: handle attach on reconstruct
+
+## 8.0.18
+
+### Patch Changes
+
+- be567c1: fix: suspense attach and three compat in webpack
+
 ## 8.0.17
 
 ### Patch Changes

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

@@ -12,7 +12,7 @@ export declare type LocalState = {
     type: string;
     root: UseBoundStore<RootState>;
     objects: Instance[];
-    parent: Instance | null;
+    parents: Instance[];
     primitive?: boolean;
     eventCount: number;
     handlers: Partial<EventHandlers>;

package/dist/declarations/src/core/utils.d.ts

@@ -79,3 +79,4 @@ export declare function updateInstance(instance: Instance): void;
 export declare function updateCamera(camera: Camera & {
     manual?: boolean;
 }, size: Size): void;
+export declare function setDeep(obj: any, value: any, keys: string[]): any;

package/dist/{index-136ca0b0.esm.js → index-2de7e188.esm.js}

@@ -137,7 +137,7 @@ function dispose(obj) {
 function prepare(object, state) {
   const instance = object;
 
-  if (state != null && state.primitive || !instance.__r3f) {
+  if (!instance.__r3f) {
     instance.__r3f = {
       type: '',
       root: null,
@@ -146,7 +146,7 @@ function prepare(object, state) {
       eventCount: 0,
       handlers: {},
       objects: [],
-      parent: null,
+      parents: [],
       ...state
     };
   }
@@ -260,10 +260,10 @@ function diffProps(instance, {
 } // This function applies a set of changes to the instance
 
 function applyProps$1(instance, data) {
-  var _instance$__r3f3, _root$getState;
+  var _instance$__r3f3, _root$getState, _localState$parents;
 
   // Filter equals, events and reserved props
-  const localState = (_instance$__r3f3 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f3 : {};
+  const localState = (_instance$__r3f3 = instance.__r3f) != null ? _instance$__r3f3 : {};
   const root = localState.root;
   const rootState = (_root$getState = root == null ? void 0 : root.getState == null ? void 0 : root.getState()) != null ? _root$getState : {};
   const {
@@ -335,7 +335,7 @@ function applyProps$1(instance, data) {
         // Auto-convert sRGB colors
         // https://github.com/pmndrs/react-three-fiber/issues/344
 
-        const supportsColorManagement = THREE.ColorManagement;
+        const supportsColorManagement = ('ColorManagement' in THREE);
         if (!supportsColorManagement && !rootState.linear && isColor) targetProp.convertSRGBToLinear();
       } // Else, just overwrite the value
 
@@ -351,7 +351,7 @@ function applyProps$1(instance, data) {
     invalidateInstance(instance);
   });
 
-  if (localState.parent && rootState.internal && instance.raycast && prevHandlers !== localState.eventCount) {
+  if ((_localState$parents = localState.parents) != null && _localState$parents.length && rootState.internal && instance.raycast && prevHandlers !== localState.eventCount) {
     // Pre-emptively remove the instance from the interaction manager
     const index = rootState.internal.interaction.indexOf(instance);
     if (index > -1) rootState.internal.interaction.splice(index, 1); // Add the instance to the interaction manager only when it has handlers
@@ -391,6 +391,15 @@ function updateCamera(camera, size) {
     camera.updateMatrixWorld();
   }
 }
+/**
+ * Safely sets a deeply-nested value on an object.
+ */
+
+function setDeep(obj, value, keys) {
+  const key = keys.pop();
+  const target = keys.reduce((acc, key) => acc[key], obj);
+  return target[key] = value;
+}
 
 function makeId(event) {
   return (event.eventObject || event.object).uuid + '/' + event.index + event.instanceId;
@@ -444,7 +453,6 @@ function releaseInternalPointerCapture(capturedMap, obj, captures, pointerId) {
 
 function removeInteractivity(store, object) {
   const {
-    events,
     internal
   } = store.getState(); // Removes every trace of an object from the data store
 
@@ -671,14 +679,14 @@ function createEvents(store) {
     return intersections;
   }
 
-  function cancelPointer(hits) {
+  function cancelPointer(intersections) {
     const {
       internal
     } = store.getState();
     Array.from(internal.hovered.values()).forEach(hoveredObj => {
       // When no objects were hit or the the hovered object wasn't found underneath the cursor
       // we call onPointerOut and delete the object from the hovered-elements map
-      if (!hits.length || !hits.find(hit => hit.object === hoveredObj.object && hit.index === hoveredObj.index && hit.instanceId === hoveredObj.instanceId)) {
+      if (!intersections.length || !intersections.find(hit => hit.object === hoveredObj.object && hit.index === hoveredObj.index && hit.instanceId === hoveredObj.instanceId)) {
         const eventObject = hoveredObj.eventObject;
         const instance = eventObject.__r3f;
         const handlers = instance == null ? void 0 : instance.handlers;
@@ -687,7 +695,7 @@ function createEvents(store) {
         if (instance != null && instance.eventCount) {
           // Clear out intersects, they are outdated by now
           const data = { ...hoveredObj,
-            intersections: hits || []
+            intersections
           };
           handlers.onPointerOut == null ? void 0 : handlers.onPointerOut(data);
           handlers.onPointerLeave == null ? void 0 : handlers.onPointerLeave(data);
@@ -857,7 +865,7 @@ function createRenderer(roots, getEventPriority) {
         type,
         root,
         attach,
-        // TODO: Figure out what this is for
+        // Save args in case we need to reconstruct later for HMR
         memoizedProps: {
           args
         }
@@ -878,10 +886,9 @@ function createRenderer(roots, getEventPriority) {
     if (child) {
       var _child$__r3f, _parentInstance$__r3f;
 
-      // The attach attribute implies that the object attaches itself on the parent
-      if ((_child$__r3f = child.__r3f) != null && _child$__r3f.attach) {
-        attach(parentInstance, child, child.__r3f.attach);
-      } else if (child.isObject3D && parentInstance.isObject3D) {
+      // The attach attribute implies that the object attaches itself on the parent.
+      // That is handled at commit to avoid duplication during Suspense
+      if (!((_child$__r3f = child.__r3f) != null && _child$__r3f.attach) && child.isObject3D && parentInstance.isObject3D) {
         // add in the usual parent-child way
         parentInstance.add(child);
         added = true;
@@ -891,7 +898,9 @@ function createRenderer(roots, getEventPriority) {
 
       if (!added) (_parentInstance$__r3f = parentInstance.__r3f) == null ? void 0 : _parentInstance$__r3f.objects.push(child);
       if (!child.__r3f) prepare(child, {});
-      child.__r3f.parent = parentInstance;
+
+      child.__r3f.parents.push(parentInstance);
+
       updateInstance(child);
       invalidateInstance(child);
     }
@@ -903,9 +912,7 @@ function createRenderer(roots, getEventPriority) {
     if (child) {
       var _child$__r3f2, _parentInstance$__r3f2;
 
-      if ((_child$__r3f2 = child.__r3f) != null && _child$__r3f2.attach) {
-        attach(parentInstance, child, child.__r3f.attach);
-      } else if (child.isObject3D && parentInstance.isObject3D) {
+      if (!((_child$__r3f2 = child.__r3f) != null && _child$__r3f2.attach) && child.isObject3D && parentInstance.isObject3D) {
         child.parent = parentInstance;
         child.dispatchEvent({
           type: 'added'
@@ -918,7 +925,9 @@ function createRenderer(roots, getEventPriority) {
 
       if (!added) (_parentInstance$__r3f2 = parentInstance.__r3f) == null ? void 0 : _parentInstance$__r3f2.objects.push(child);
       if (!child.__r3f) prepare(child, {});
-      child.__r3f.parent = parentInstance;
+
+      child.__r3f.parents.push(parentInstance);
+
       updateInstance(child);
       invalidateInstance(child);
     }
@@ -933,7 +942,7 @@ function createRenderer(roots, getEventPriority) {
       var _parentInstance$__r3f3, _child$__r3f3, _child$__r3f5;
 
       // Clear the parent reference
-      if (child.__r3f) child.__r3f.parent = null; // Remove child from the parents objects
+      if (child.__r3f) child.__r3f.parents = child.__r3f.parents.filter(parent => parent !== parentInstance); // Remove child from the parents objects
 
       if ((_parentInstance$__r3f3 = parentInstance.__r3f) != null && _parentInstance$__r3f3.objects) parentInstance.__r3f.objects = parentInstance.__r3f.objects.filter(x => x !== child); // Remove attachment
 
@@ -947,7 +956,7 @@ function createRenderer(roots, getEventPriority) {
         if ((_child$__r3f4 = child.__r3f) != null && _child$__r3f4.root) {
           removeInteractivity(child.__r3f.root, child);
         }
-      } // Allow objects to bail out of recursive dispose alltogether by passing dispose={null}
+      } // Allow objects to bail out of recursive dispose altogether by passing dispose={null}
       // Never dispose of primitives because their state may be kept outside of React!
       // In order for an object to be able to dispose it has to have
       //   - a dispose method,
@@ -994,11 +1003,11 @@ function createRenderer(roots, getEventPriority) {
   }
 
   function switchInstance(instance, type, newProps, fiber) {
-    var _instance$__r3f, _instance$__r3f2;
+    var _instance$__r3f, _newInstance$__r3f;
 
-    const parent = (_instance$__r3f = instance.__r3f) == null ? void 0 : _instance$__r3f.parent;
-    if (!parent) return;
-    const newInstance = createInstance(type, newProps, (_instance$__r3f2 = instance.__r3f) == null ? void 0 : _instance$__r3f2.root); // https://github.com/pmndrs/react-three-fiber/issues/1348
+    const parents = (_instance$__r3f = instance.__r3f) == null ? void 0 : _instance$__r3f.parents;
+    if (!(parents != null && parents.length)) return;
+    const newInstance = createInstance(type, newProps, instance.__r3f.root); // https://github.com/pmndrs/react-three-fiber/issues/1348
     // When args change the instance has to be re-constructed, which then
     // forces r3f to re-parent the children and non-scene objects
     // This can not include primitives, which should not have declarative children
@@ -1011,13 +1020,24 @@ function createRenderer(roots, getEventPriority) {
     instance.__r3f.objects.forEach(child => appendChild(newInstance, child));
 
     instance.__r3f.objects = [];
-    removeChild(parent, instance);
-    appendChild(parent, newInstance); // Re-bind event handlers
+
+    for (const parent of parents) {
+      removeChild(parent, instance);
+      appendChild(parent, newInstance);
+    } // Re-bind event handlers
+
 
     if (newInstance.raycast && newInstance.__r3f.eventCount) {
       const rootState = newInstance.__r3f.root.getState();
 
       rootState.internal.interaction.push(newInstance);
+    } // The attach attribute implies that the object attaches itself on the parent
+
+
+    if ((_newInstance$__r3f = newInstance.__r3f) != null && _newInstance$__r3f.attach) {
+      for (const parent of parents) {
+        attach(parent, newInstance, newInstance.__r3f.attach);
+      }
     } // This evil hack switches the react-internal fiber node
     [fiber, fiber.alternate].forEach(fiber => {
       if (fiber !== null) {
@@ -1053,12 +1073,12 @@ function createRenderer(roots, getEventPriority) {
     getChildHostContext: parentHostContext => parentHostContext,
 
     finalizeInitialChildren(instance) {
-      var _instance$__r3f3;
+      var _instance$__r3f2;
 
-      const localState = (_instance$__r3f3 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f3 : {}; // https://github.com/facebook/react/issues/20271
+      const localState = (_instance$__r3f2 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f2 : {}; // https://github.com/facebook/react/issues/20271
       // Returning true will trigger commitMount
 
-      return !!localState.handlers;
+      return !!localState.handlers || !!localState.attach;
     },
 
     prepareUpdate(instance, type, oldProps, newProps) {
@@ -1096,14 +1116,21 @@ function createRenderer(roots, getEventPriority) {
     },
 
     commitMount(instance, type, props, int) {
-      var _instance$__r3f4;
+      var _instance$__r3f3;
 
       // https://github.com/facebook/react/issues/20271
       // This will make sure events are only added once to the central container
-      const localState = (_instance$__r3f4 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f4 : {};
+      const localState = (_instance$__r3f3 = instance.__r3f) != null ? _instance$__r3f3 : {};
 
       if (instance.raycast && localState.handlers && localState.eventCount) {
         instance.__r3f.root.getState().internal.interaction.push(instance);
+      } // The attach attribute implies that the object attaches itself on the parent
+
+
+      if (localState.attach) {
+        for (const parent of localState.parents) {
+          attach(parent, instance, localState.attach);
+        }
       }
     },
 
@@ -1117,27 +1144,11 @@ function createRenderer(roots, getEventPriority) {
     detachDeletedInstance: () => {},
 
     hideInstance(instance) {
-      var _instance$__r3f5;
-
-      // Deatch while the instance is hidden
-      const {
-        attach: type,
-        parent
-      } = (_instance$__r3f5 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f5 : {};
-      if (type && parent) detach(parent, instance, type);
       if (instance.isObject3D) instance.visible = false;
       invalidateInstance(instance);
     },
 
     unhideInstance(instance, props) {
-      var _instance$__r3f6;
-
-      // Re-attach when the instance is unhidden
-      const {
-        attach: type,
-        parent
-      } = (_instance$__r3f6 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f6 : {};
-      if (type && parent) attach(parent, instance, type);
       if (instance.isObject3D && props.visible == null || props.visible) instance.visible = true;
       invalidateInstance(instance);
     },
@@ -1324,35 +1335,29 @@ const createStore = (invalidate, advance) => {
         initialHits: [],
         capturedMap: new Map(),
         subscribe: (ref, priority, store) => {
-          set(({
-            internal
-          }) => ({
-            internal: { ...internal,
-              // If this subscription was given a priority, it takes rendering into its own hands
-              // For that reason we switch off automatic rendering and increase the manual flag
-              // As long as this flag is positive there can be no internal rendering at all
-              // because there could be multiple render subscriptions
-              priority: internal.priority + (priority > 0 ? 1 : 0),
-              // Register subscriber and sort layers from lowest to highest, meaning,
-              // highest priority renders last (on top of the other frames)
-              subscribers: [...internal.subscribers, {
-                ref,
-                priority,
-                store
-              }].sort((a, b) => a.priority - b.priority)
-            }
-          }));
+          const internal = get().internal; // If this subscription was given a priority, it takes rendering into its own hands
+          // For that reason we switch off automatic rendering and increase the manual flag
+          // As long as this flag is positive there can be no internal rendering at all
+          // because there could be multiple render subscriptions
+
+          internal.priority = internal.priority + (priority > 0 ? 1 : 0);
+          internal.subscribers.push({
+            ref,
+            priority,
+            store
+          }); // Register subscriber and sort layers from lowest to highest, meaning,
+          // highest priority renders last (on top of the other frames)
+
+          internal.subscribers = internal.subscribers.sort((a, b) => a.priority - b.priority);
           return () => {
-            set(({
-              internal
-            }) => ({
-              internal: { ...internal,
-                // Decrease manual flag if this subscription had a priority
-                priority: internal.priority - (priority > 0 ? 1 : 0),
-                // Remove subscriber from list
-                subscribers: internal.subscribers.filter(s => s.ref !== ref)
-              }
-            }));
+            const internal = get().internal;
+
+            if (internal != null && internal.subscribers) {
+              // Decrease manual flag if this subscription had a priority
+              internal.priority = internal.priority - (priority > 0 ? 1 : 0); // Remove subscriber from list
+
+              internal.subscribers = internal.subscribers.filter(s => s.ref !== ref);
+            }
           };
         }
       }
@@ -1761,11 +1766,12 @@ function createRoot(canvas) {
           if (!isBoolean) Object.assign(gl.shadowMap, shadows);else gl.shadowMap.type = THREE.PCFSoftShadowMap;
           if (old !== gl.shadowMap.enabled) gl.shadowMap.needsUpdate = true;
         }
-      } // Set color management
+      } // Safely set color management if available.
+      // Avoid accessing THREE.ColorManagement to play nice with older versions
 
 
-      if (THREE.ColorManagement) {
-        THREE.ColorManagement.legacyMode = legacy;
+      if ('ColorManagement' in THREE) {
+        setDeep(THREE, legacy, ['ColorManagement', 'legacyMode']);
       }
 
       const outputEncoding = linear ? THREE.LinearEncoding : THREE.sRGBEncoding;
@@ -2015,7 +2021,7 @@ function Portal({
 reconciler.injectIntoDevTools({
   bundleType: process.env.NODE_ENV === 'production' ? 0 : 1,
   rendererPackageName: '@react-three/fiber',
-  version: '18.0.0'
+  version: React.version
 });
 const act = React.unstable_act;