@react-three/fiber 8.0.17 → 8.0.18

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @react-three/fiber
 
+## 8.0.18
+
+### Patch Changes
+
+- be567c1: fix: suspense attach and three compat in webpack
+
 ## 8.0.17
 
 ### Patch Changes

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-acedf326.esm.js}

@@ -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
 
@@ -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;
@@ -857,7 +866,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 +887,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;
@@ -947,7 +955,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,
@@ -1058,7 +1066,7 @@ function createRenderer(roots, getEventPriority) {
       const localState = (_instance$__r3f3 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f3 : {}; // 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) {
@@ -1104,6 +1112,11 @@ function createRenderer(roots, getEventPriority) {
 
       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) {
+        attach(localState.parent, instance, localState.attach);
       }
     },
 
@@ -1117,27 +1130,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);
     },
@@ -1761,11 +1758,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;

package/dist/{index-f3176a33.cjs.dev.js → index-c937c162.cjs.dev.js}

@@ -362,7 +362,7 @@ function applyProps$1(instance, data) {
         // Auto-convert sRGB colors
         // https://github.com/pmndrs/react-three-fiber/issues/344
 
-        const supportsColorManagement = THREE__namespace.ColorManagement;
+        const supportsColorManagement = ('ColorManagement' in THREE__namespace);
         if (!supportsColorManagement && !rootState.linear && isColor) targetProp.convertSRGBToLinear();
       } // Else, just overwrite the value
 
@@ -418,6 +418,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;
@@ -884,7 +893,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
         }
@@ -905,10 +914,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;
@@ -974,7 +982,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,
@@ -1085,7 +1093,7 @@ function createRenderer(roots, getEventPriority) {
       const localState = (_instance$__r3f3 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f3 : {}; // 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) {
@@ -1131,6 +1139,11 @@ function createRenderer(roots, getEventPriority) {
 
       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) {
+        attach(localState.parent, instance, localState.attach);
       }
     },
 
@@ -1144,27 +1157,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);
     },
@@ -1788,11 +1785,12 @@ function createRoot(canvas) {
           if (!isBoolean) Object.assign(gl.shadowMap, shadows);else gl.shadowMap.type = THREE__namespace.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__namespace.ColorManagement) {
-        THREE__namespace.ColorManagement.legacyMode = legacy;
+      if ('ColorManagement' in THREE__namespace) {
+        setDeep(THREE__namespace, legacy, ['ColorManagement', 'legacyMode']);
       }
 
       const outputEncoding = linear ? THREE__namespace.LinearEncoding : THREE__namespace.sRGBEncoding;

package/dist/{index-4e1c76e5.cjs.prod.js → index-e2e71da1.cjs.prod.js}

@@ -362,7 +362,7 @@ function applyProps$1(instance, data) {
         // Auto-convert sRGB colors
         // https://github.com/pmndrs/react-three-fiber/issues/344
 
-        const supportsColorManagement = THREE__namespace.ColorManagement;
+        const supportsColorManagement = ('ColorManagement' in THREE__namespace);
         if (!supportsColorManagement && !rootState.linear && isColor) targetProp.convertSRGBToLinear();
       } // Else, just overwrite the value
 
@@ -418,6 +418,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;
@@ -884,7 +893,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
         }
@@ -905,10 +914,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;
@@ -974,7 +982,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,
@@ -1085,7 +1093,7 @@ function createRenderer(roots, getEventPriority) {
       const localState = (_instance$__r3f3 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f3 : {}; // 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) {
@@ -1131,6 +1139,11 @@ function createRenderer(roots, getEventPriority) {
 
       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) {
+        attach(localState.parent, instance, localState.attach);
       }
     },
 
@@ -1144,27 +1157,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);
     },
@@ -1788,11 +1785,12 @@ function createRoot(canvas) {
           if (!isBoolean) Object.assign(gl.shadowMap, shadows);else gl.shadowMap.type = THREE__namespace.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__namespace.ColorManagement) {
-        THREE__namespace.ColorManagement.legacyMode = legacy;
+      if ('ColorManagement' in THREE__namespace) {
+        setDeep(THREE__namespace, legacy, ['ColorManagement', 'legacyMode']);
       }
 
       const outputEncoding = linear ? THREE__namespace.LinearEncoding : THREE__namespace.sRGBEncoding;

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-f3176a33.cjs.dev.js');
+var index = require('./index-c937c162.cjs.dev.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-4e1c76e5.cjs.prod.js');
+var index = require('./index-e2e71da1.cjs.prod.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');

package/dist/react-three-fiber.esm.js

@@ -1,5 +1,5 @@
-import { c as createEvents, e as extend, u as useMutableCallback, a as createRoot, E as ErrorBoundary, B as Block, b as useIsomorphicLayoutEffect, d as unmountComponentAtNode } from './index-136ca0b0.esm.js';
-export { t as ReactThreeFiber, s as _roots, q as act, n as addAfterEffect, m as addEffect, o as addTail, l as advance, i as applyProps, f as context, g as createPortal, a as createRoot, j as dispose, e as extend, p as getRootState, k as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, x as useFrame, y as useGraph, z as useLoader, v as useStore, w as useThree } from './index-136ca0b0.esm.js';
+import { c as createEvents, e as extend, u as useMutableCallback, a as createRoot, E as ErrorBoundary, B as Block, b as useIsomorphicLayoutEffect, d as unmountComponentAtNode } from './index-acedf326.esm.js';
+export { t as ReactThreeFiber, s as _roots, q as act, n as addAfterEffect, m as addEffect, o as addTail, l as advance, i as applyProps, f as context, g as createPortal, a as createRoot, j as dispose, e as extend, p as getRootState, k as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, x as useFrame, y as useGraph, z as useLoader, v as useStore, w as useThree } from './index-acedf326.esm.js';
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import * as THREE from 'three';

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('../../dist/index-f3176a33.cjs.dev.js');
+var index = require('../../dist/index-c937c162.cjs.dev.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('../../dist/index-4e1c76e5.cjs.prod.js');
+var index = require('../../dist/index-e2e71da1.cjs.prod.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');

package/native/dist/react-three-fiber-native.esm.js

@@ -1,5 +1,5 @@
-import { c as createEvents, e as extend, u as useMutableCallback, a as createRoot, E as ErrorBoundary, B as Block, d as unmountComponentAtNode } from '../../dist/index-136ca0b0.esm.js';
-export { t as ReactThreeFiber, s as _roots, q as act, n as addAfterEffect, m as addEffect, o as addTail, l as advance, i as applyProps, f as context, g as createPortal, a as createRoot, j as dispose, e as extend, p as getRootState, k as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, x as useFrame, y as useGraph, z as useLoader, v as useStore, w as useThree } from '../../dist/index-136ca0b0.esm.js';
+import { c as createEvents, e as extend, u as useMutableCallback, a as createRoot, E as ErrorBoundary, B as Block, d as unmountComponentAtNode } from '../../dist/index-acedf326.esm.js';
+export { t as ReactThreeFiber, s as _roots, q as act, n as addAfterEffect, m as addEffect, o as addTail, l as advance, i as applyProps, f as context, g as createPortal, a as createRoot, j as dispose, e as extend, p as getRootState, k as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, x as useFrame, y as useGraph, z as useLoader, v as useStore, w as useThree } from '../../dist/index-acedf326.esm.js';
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import * as THREE from 'three';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/fiber",
-  "version": "8.0.17",
+  "version": "8.0.18",
   "description": "A React renderer for Threejs",
   "keywords": [
     "react",