@react-three/fiber 8.0.16 → 8.0.19

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @react-three/fiber
 
+## 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
+
+- 9e3369e: fix dom resize, improve native tree shaking
+
 ## 8.0.16
 
 ### 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/declarations/src/native/polyfills.d.ts

@@ -0,0 +1 @@
+export declare function polyfills(): (() => void) | undefined;

package/dist/{index-136ca0b0.esm.js → index-1e2a4313.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,
@@ -994,7 +1002,7 @@ function createRenderer(roots, getEventPriority) {
   }
 
   function switchInstance(instance, type, newProps, fiber) {
-    var _instance$__r3f, _instance$__r3f2;
+    var _instance$__r3f, _instance$__r3f2, _newInstance$__r3f;
 
     const parent = (_instance$__r3f = instance.__r3f) == null ? void 0 : _instance$__r3f.parent;
     if (!parent) return;
@@ -1018,6 +1026,11 @@ function createRenderer(roots, getEventPriority) {
       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) {
+      attach(parent, newInstance, newInstance.__r3f.attach);
     } // This evil hack switches the react-internal fiber node
     [fiber, fiber.alternate].forEach(fiber => {
       if (fiber !== null) {
@@ -1058,7 +1071,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 +1117,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 +1135,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 +1763,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-88f08658.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,
@@ -1021,7 +1029,7 @@ function createRenderer(roots, getEventPriority) {
   }
 
   function switchInstance(instance, type, newProps, fiber) {
-    var _instance$__r3f, _instance$__r3f2;
+    var _instance$__r3f, _instance$__r3f2, _newInstance$__r3f;
 
     const parent = (_instance$__r3f = instance.__r3f) == null ? void 0 : _instance$__r3f.parent;
     if (!parent) return;
@@ -1045,6 +1053,11 @@ function createRenderer(roots, getEventPriority) {
       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) {
+      attach(parent, newInstance, newInstance.__r3f.attach);
     } // This evil hack switches the react-internal fiber node
     [fiber, fiber.alternate].forEach(fiber => {
       if (fiber !== null) {
@@ -1085,7 +1098,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 +1144,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 +1162,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 +1790,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-dcd9befe.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,
@@ -1021,7 +1029,7 @@ function createRenderer(roots, getEventPriority) {
   }
 
   function switchInstance(instance, type, newProps, fiber) {
-    var _instance$__r3f, _instance$__r3f2;
+    var _instance$__r3f, _instance$__r3f2, _newInstance$__r3f;
 
     const parent = (_instance$__r3f = instance.__r3f) == null ? void 0 : _instance$__r3f.parent;
     if (!parent) return;
@@ -1045,6 +1053,11 @@ function createRenderer(roots, getEventPriority) {
       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) {
+      attach(parent, newInstance, newInstance.__r3f.attach);
     } // This evil hack switches the react-internal fiber node
     [fiber, fiber.alternate].forEach(fiber => {
       if (fiber !== null) {
@@ -1085,7 +1098,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 +1144,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 +1162,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 +1790,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,11 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-f3176a33.cjs.dev.js');
+var index = require('./index-88f08658.cjs.dev.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
-var mergeRefs = require('react-merge-refs');
 var useMeasure = require('react-use-measure');
 require('react-reconciler/constants');
 require('zustand');
@@ -36,7 +35,6 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
-var mergeRefs__default = /*#__PURE__*/_interopDefault(mergeRefs);
 var useMeasure__default = /*#__PURE__*/_interopDefault(useMeasure);
 
 const DOM_EVENTS = {
@@ -158,8 +156,9 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
     ...resize
   });
   const canvasRef = React__namespace.useRef(null);
-  const meshRef = React__namespace.useRef(null);
+  const divRef = React__namespace.useRef(null);
   const [canvas, setCanvas] = React__namespace.useState(null);
+  React__namespace.useImperativeHandle(forwardedRef, () => canvasRef.current);
   const handlePointerMissed = index.useMutableCallback(onPointerMissed);
   const [block, setBlock] = React__namespace.useState(false);
   const [error, setError] = React__namespace.useState(false); // Suspend this component if block is a promise (2nd run)
@@ -191,7 +190,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
       // Pass mutable reference to onPointerMissed so it's free to update
       onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
       onCreated: state => {
-        state.events.connect == null ? void 0 : state.events.connect(meshRef.current);
+        state.events.connect == null ? void 0 : state.events.connect(divRef.current);
         onCreated == null ? void 0 : onCreated(state);
       }
     });
@@ -211,7 +210,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
     if (canvas) return () => index.unmountComponentAtNode(canvas);
   }, [canvas]);
   return /*#__PURE__*/React__namespace.createElement("div", _extends({
-    ref: mergeRefs__default["default"]([meshRef, containerRef]),
+    ref: divRef,
     style: {
       position: 'relative',
       width: '100%',
@@ -219,12 +218,18 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
       overflow: 'hidden',
       ...style
     }
-  }, props), /*#__PURE__*/React__namespace.createElement("canvas", {
-    ref: mergeRefs__default["default"]([canvasRef, forwardedRef]),
+  }, props), /*#__PURE__*/React__namespace.createElement("div", {
+    ref: containerRef,
+    style: {
+      width: '100%',
+      height: '100%'
+    }
+  }, /*#__PURE__*/React__namespace.createElement("canvas", {
+    ref: canvasRef,
     style: {
       display: 'block'
     }
-  }, fallback));
+  }, fallback)));
 });
 
 exports.ReactThreeFiber = index.threeTypes;

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

@@ -2,11 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-4e1c76e5.cjs.prod.js');
+var index = require('./index-dcd9befe.cjs.prod.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
-var mergeRefs = require('react-merge-refs');
 var useMeasure = require('react-use-measure');
 require('react-reconciler/constants');
 require('zustand');
@@ -36,7 +35,6 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
-var mergeRefs__default = /*#__PURE__*/_interopDefault(mergeRefs);
 var useMeasure__default = /*#__PURE__*/_interopDefault(useMeasure);
 
 const DOM_EVENTS = {
@@ -158,8 +156,9 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
     ...resize
   });
   const canvasRef = React__namespace.useRef(null);
-  const meshRef = React__namespace.useRef(null);
+  const divRef = React__namespace.useRef(null);
   const [canvas, setCanvas] = React__namespace.useState(null);
+  React__namespace.useImperativeHandle(forwardedRef, () => canvasRef.current);
   const handlePointerMissed = index.useMutableCallback(onPointerMissed);
   const [block, setBlock] = React__namespace.useState(false);
   const [error, setError] = React__namespace.useState(false); // Suspend this component if block is a promise (2nd run)
@@ -191,7 +190,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
       // Pass mutable reference to onPointerMissed so it's free to update
       onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
       onCreated: state => {
-        state.events.connect == null ? void 0 : state.events.connect(meshRef.current);
+        state.events.connect == null ? void 0 : state.events.connect(divRef.current);
         onCreated == null ? void 0 : onCreated(state);
       }
     });
@@ -211,7 +210,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
     if (canvas) return () => index.unmountComponentAtNode(canvas);
   }, [canvas]);
   return /*#__PURE__*/React__namespace.createElement("div", _extends({
-    ref: mergeRefs__default["default"]([meshRef, containerRef]),
+    ref: divRef,
     style: {
       position: 'relative',
       width: '100%',
@@ -219,12 +218,18 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
       overflow: 'hidden',
       ...style
     }
-  }, props), /*#__PURE__*/React__namespace.createElement("canvas", {
-    ref: mergeRefs__default["default"]([canvasRef, forwardedRef]),
+  }, props), /*#__PURE__*/React__namespace.createElement("div", {
+    ref: containerRef,
+    style: {
+      width: '100%',
+      height: '100%'
+    }
+  }, /*#__PURE__*/React__namespace.createElement("canvas", {
+    ref: canvasRef,
     style: {
       display: 'block'
     }
-  }, fallback));
+  }, fallback)));
 });
 
 exports.ReactThreeFiber = index.threeTypes;

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

@@ -1,9 +1,8 @@
-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-1e2a4313.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-1e2a4313.esm.js';
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import * as THREE from 'three';
-import mergeRefs from 'react-merge-refs';
 import useMeasure from 'react-use-measure';
 import 'react-reconciler/constants';
 import 'zustand';
@@ -130,8 +129,9 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
     ...resize
   });
   const canvasRef = React.useRef(null);
-  const meshRef = React.useRef(null);
+  const divRef = React.useRef(null);
   const [canvas, setCanvas] = React.useState(null);
+  React.useImperativeHandle(forwardedRef, () => canvasRef.current);
   const handlePointerMissed = useMutableCallback(onPointerMissed);
   const [block, setBlock] = React.useState(false);
   const [error, setError] = React.useState(false); // Suspend this component if block is a promise (2nd run)
@@ -163,7 +163,7 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
       // Pass mutable reference to onPointerMissed so it's free to update
       onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
       onCreated: state => {
-        state.events.connect == null ? void 0 : state.events.connect(meshRef.current);
+        state.events.connect == null ? void 0 : state.events.connect(divRef.current);
         onCreated == null ? void 0 : onCreated(state);
       }
     });
@@ -183,7 +183,7 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
     if (canvas) return () => unmountComponentAtNode(canvas);
   }, [canvas]);
   return /*#__PURE__*/React.createElement("div", _extends({
-    ref: mergeRefs([meshRef, containerRef]),
+    ref: divRef,
     style: {
       position: 'relative',
       width: '100%',
@@ -191,12 +191,18 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
       overflow: 'hidden',
       ...style
     }
-  }, props), /*#__PURE__*/React.createElement("canvas", {
-    ref: mergeRefs([canvasRef, forwardedRef]),
+  }, props), /*#__PURE__*/React.createElement("div", {
+    ref: containerRef,
+    style: {
+      width: '100%',
+      height: '100%'
+    }
+  }, /*#__PURE__*/React.createElement("canvas", {
+    ref: canvasRef,
     style: {
       display: 'block'
     }
-  }, fallback));
+  }, fallback)));
 });
 
 export { Canvas, createPointerEvents as events };