@react-three/fiber 8.0.27 → 8.2.1

package/dist/{index-acc8c265.cjs.dev.js → index-6716e497.cjs.dev.js}

@@ -37,12 +37,19 @@ var threeTypes = /*#__PURE__*/Object.freeze({
   __proto__: null
 });
 
-const isOrthographicCamera = def => def && def.isOrthographicCamera; // React currently throws a warning when using useLayoutEffect on the server.
-// To get around it, we can conditionally useEffect on the server (no-op) and
-// useLayoutEffect on the client.
+var _window$document, _window$navigator;
+const isOrthographicCamera = def => def && def.isOrthographicCamera;
+/**
+ * An SSR-friendly useLayoutEffect.
+ *
+ * React currently throws a warning when using useLayoutEffect on the server.
+ * To get around it, we can conditionally useEffect on the server (no-op) and
+ * useLayoutEffect elsewhere.
+ *
+ * @see https://github.com/facebook/react/issues/14927
+ */
 
-const isSSR = typeof window === 'undefined' || !window.navigator || /ServerSideRendering|^Deno\//.test(window.navigator.userAgent);
-const useIsomorphicLayoutEffect = isSSR ? React__namespace.useEffect : React__namespace.useLayoutEffect;
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' && ((_window$document = window.document) != null && _window$document.createElement || ((_window$navigator = window.navigator) == null ? void 0 : _window$navigator.product) === 'ReactNative') ? React__namespace.useLayoutEffect : React__namespace.useEffect;
 function useMutableCallback(fn) {
   const ref = React__namespace.useRef(fn);
   useIsomorphicLayoutEffect(() => void (ref.current = fn), [fn]);
@@ -855,7 +862,7 @@ let extend = objects => void (catalogue = { ...catalogue,
   ...objects
 });
 
-function createRenderer(roots, getEventPriority) {
+function createRenderer(_roots, _getEventPriority) {
   function createInstance(type, {
     args = [],
     attach,
@@ -1071,10 +1078,10 @@ function createRenderer(roots, getEventPriority) {
     appendChild,
     appendInitialChild: appendChild,
     insertBefore,
-    supportsMicrotask: true,
-    warnsIfNotActing: true,
     supportsMutation: true,
     isPrimaryRenderer: false,
+    supportsPersistence: false,
+    supportsHydration: false,
     noTimeout: -1,
     appendChildToContainer: (container, child) => {
       const scene = container.getState().scene; // Link current root to the default scene
@@ -1093,10 +1100,10 @@ function createRenderer(roots, getEventPriority) {
       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 Boolean(localState.handlers);
     },
 
-    prepareUpdate(instance, type, oldProps, newProps) {
+    prepareUpdate(instance, _type, oldProps, newProps) {
       // Create diff-sets
       if (instance.__r3f.primitive && newProps.object && newProps.object !== instance) {
         return [true];
@@ -1113,7 +1120,7 @@ function createRenderer(roots, getEventPriority) {
           ...restOld
         } = oldProps; // Throw if an object or literal was passed for args
 
-        if (!Array.isArray(argsNew)) throw 'The args prop must be an array!'; // If it has new props or arguments, then it needs to be re-instanciated
+        if (!Array.isArray(argsNew)) throw 'The args prop must be an array!'; // If it has new props or arguments, then it needs to be re-instantiated
 
         if (argsNew.some((value, index) => value !== argsOld[index])) return [true]; // Create a diff-set, flag if there are any changes
 
@@ -1124,13 +1131,13 @@ function createRenderer(roots, getEventPriority) {
       }
     },
 
-    commitUpdate(instance, [reconstruct, diff], type, oldProps, newProps, fiber) {
+    commitUpdate(instance, [reconstruct, diff], type, _oldProps, newProps, fiber) {
       // Reconstruct when args or <primitive object={...} have changes
       if (reconstruct) switchInstance(instance, type, newProps, fiber); // Otherwise just overwrite props
       else applyProps$1(instance, diff);
     },
 
-    commitMount(instance, type, props, int) {
+    commitMount(instance, _type, _props, _int) {
       var _instance$__r3f3;
 
       // https://github.com/facebook/react/issues/20271
@@ -1143,13 +1150,11 @@ function createRenderer(roots, getEventPriority) {
     },
 
     getPublicInstance: instance => instance,
-    shouldDeprioritizeSubtree: () => false,
     prepareForCommit: () => null,
     preparePortalMount: container => prepare(container.getState().scene),
     resetAfterCommit: () => {},
     shouldSetTextContent: () => false,
     clearContainer: () => false,
-    detachDeletedInstance: () => {},
 
     hideInstance(instance) {
       var _instance$__r3f4;
@@ -1177,20 +1182,23 @@ function createRenderer(roots, getEventPriority) {
       invalidateInstance(instance);
     },
 
-    createTextInstance: () => {},
+    createTextInstance: () => {
+      throw new Error('Text is not allowed in the R3F tree! This could be stray whitespace or characters.');
+    },
     hideTextInstance: () => {
-      throw new Error('Text is not allowed in the R3F tree.');
+      throw new Error('Text is not allowed in the R3F tree! This could be stray whitespace or characters.');
     },
     unhideTextInstance: () => {},
-    getCurrentEventPriority: () => getEventPriority ? getEventPriority() : constants.DefaultEventPriority,
-    // @ts-ignore
-    now: typeof performance !== 'undefined' && is.fun(performance.now) ? performance.now : is.fun(Date.now) ? Date.now : undefined,
+    // https://github.com/pmndrs/react-three-fiber/pull/2360#discussion_r916356874
     // @ts-ignore
+    getCurrentEventPriority: () => _getEventPriority ? _getEventPriority() : constants.DefaultEventPriority,
+    beforeActiveInstanceBlur: () => {},
+    afterActiveInstanceBlur: () => {},
+    detachDeletedInstance: () => {},
+    now: typeof performance !== 'undefined' && is.fun(performance.now) ? performance.now : is.fun(Date.now) ? Date.now : () => 0,
+    // https://github.com/pmndrs/react-three-fiber/pull/2360#discussion_r920883503
     scheduleTimeout: is.fun(setTimeout) ? setTimeout : undefined,
-    // @ts-ignore
-    cancelTimeout: is.fun(clearTimeout) ? clearTimeout : undefined,
-    setTimeout: is.fun(setTimeout) ? setTimeout : undefined,
-    clearTimeout: is.fun(clearTimeout) ? clearTimeout : undefined
+    cancelTimeout: is.fun(clearTimeout) ? clearTimeout : undefined
   });
   return {
     reconciler,
@@ -1211,7 +1219,9 @@ const createStore = (invalidate, advance) => {
     function getCurrentViewport(camera = get().camera, target = defaultTarget, size = get().size) {
       const {
         width,
-        height
+        height,
+        top,
+        left
       } = size;
       const aspect = width / height;
       if (target instanceof THREE__namespace.Vector3) tempTarget.copy(target);else tempTarget.set(...target);
@@ -1221,6 +1231,8 @@ const createStore = (invalidate, advance) => {
         return {
           width: width / camera.zoom,
           height: height / camera.zoom,
+          top,
+          left,
           factor: 1,
           distance,
           aspect
@@ -1234,6 +1246,8 @@ const createStore = (invalidate, advance) => {
         return {
           width: w,
           height: h,
+          top,
+          left,
           factor: width / w,
           distance,
           aspect
@@ -1250,7 +1264,7 @@ const createStore = (invalidate, advance) => {
     }));
 
     const pointer = new THREE__namespace.Vector2();
-    return {
+    const rootState = {
       set,
       get,
       // Mock objects that have to be configured
@@ -1293,6 +1307,8 @@ const createStore = (invalidate, advance) => {
       size: {
         width: 0,
         height: 0,
+        top: 0,
+        left: 0,
         updateStyle: false
       },
       viewport: {
@@ -1300,6 +1316,8 @@ const createStore = (invalidate, advance) => {
         dpr: 0,
         width: 0,
         height: 0,
+        top: 0,
+        left: 0,
         aspect: 0,
         distance: 0,
         factor: 0,
@@ -1310,11 +1328,13 @@ const createStore = (invalidate, advance) => {
           ...events
         }
       })),
-      setSize: (width, height, updateStyle) => {
+      setSize: (width, height, updateStyle, top, left) => {
         const camera = get().camera;
         const size = {
           width,
           height,
+          top: top || 0,
+          left: left || 0,
           updateStyle
         };
         set(state => ({
@@ -1388,6 +1408,7 @@ const createStore = (invalidate, advance) => {
         }
       }
     };
+    return rootState;
   });
   const state = rootState.getState();
   let oldSize = state.size;
@@ -1429,15 +1450,17 @@ const createStore = (invalidate, advance) => {
 };
 
 function createSubs(callback, subs) {
-  const index = subs.length;
-  subs.push(callback);
-  return () => void subs.splice(index, 1);
+  const sub = {
+    callback
+  };
+  subs.add(sub);
+  return () => void subs.delete(sub);
 }
 
 let i;
-let globalEffects = [];
-let globalAfterEffects = [];
-let globalTailEffects = [];
+let globalEffects = new Set();
+let globalAfterEffects = new Set();
+let globalTailEffects = new Set();
 /**
  * Adds a global render callback which is called each frame.
  * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addEffect
@@ -1458,7 +1481,9 @@ const addAfterEffect = callback => createSubs(callback, globalAfterEffects);
 const addTail = callback => createSubs(callback, globalTailEffects);
 
 function run(effects, timestamp) {
-  for (i = 0; i < effects.length; i++) effects[i](timestamp);
+  effects.forEach(({
+    callback
+  }) => callback(timestamp));
 }
 
 let subscribers;
@@ -1500,7 +1525,7 @@ function createLoop(roots) {
     running = true;
     repeat = 0; // Run effects
 
-    if (globalEffects.length) run(globalEffects, timestamp); // Render all roots
+    if (globalEffects.size) run(globalEffects, timestamp); // Render all roots
 
     roots.forEach(root => {
       var _state$gl$xr;
@@ -1512,11 +1537,11 @@ function createLoop(roots) {
       }
     }); // Run after-effects
 
-    if (globalAfterEffects.length) run(globalAfterEffects, timestamp); // Stop the loop if nothing invalidates it
+    if (globalAfterEffects.size) run(globalAfterEffects, timestamp); // Stop the loop if nothing invalidates it
 
     if (repeat === 0) {
       // Tail call effects, they are called when rendering stops
-      if (globalTailEffects.length) run(globalTailEffects, timestamp); // Flag end of operation
+      if (globalTailEffects.size) run(globalTailEffects, timestamp); // Flag end of operation
 
       running = false;
       return cancelAnimationFrame(frame);
@@ -1695,8 +1720,6 @@ function createRoot(canvas) {
   let configured = false;
   return {
     configure(props = {}) {
-      var _canvas$parentElement, _canvas$parentElement2, _canvas$parentElement3, _canvas$parentElement4;
-
       let {
         gl: glConfig,
         size,
@@ -1834,11 +1857,22 @@ function createRoot(canvas) {
 
       if (dpr && state.viewport.dpr !== calculateDpr(dpr)) state.setDpr(dpr); // Check size, allow it to take on container bounds initially
 
-      size = size || {
-        width: (_canvas$parentElement = (_canvas$parentElement2 = canvas.parentElement) == null ? void 0 : _canvas$parentElement2.clientWidth) != null ? _canvas$parentElement : 0,
-        height: (_canvas$parentElement3 = (_canvas$parentElement4 = canvas.parentElement) == null ? void 0 : _canvas$parentElement4.clientHeight) != null ? _canvas$parentElement3 : 0
-      };
-      if (!is.equ(size, state.size, shallowLoose)) state.setSize(size.width, size.height, size.updateStyle); // Check frameloop
+      size = size || (canvas.parentElement ? {
+        width: canvas.parentElement.clientWidth,
+        height: canvas.parentElement.clientHeight,
+        top: canvas.parentElement.clientTop,
+        left: canvas.parentElement.clientLeft
+      } : {
+        width: 0,
+        height: 0,
+        top: 0,
+        left: 0
+      });
+
+      if (!is.equ(size, state.size, shallowLoose)) {
+        state.setSize(size.width, size.height, size.updateStyle, size.top, size.left);
+      } // Check frameloop
+
 
       if (state.frameloop !== frameloop) state.setFrameloop(frameloop); // Check pointer missed
 

package/dist/{index-c30de6b8.cjs.prod.js → index-8296e46a.cjs.prod.js}

@@ -37,12 +37,19 @@ var threeTypes = /*#__PURE__*/Object.freeze({
   __proto__: null
 });
 
-const isOrthographicCamera = def => def && def.isOrthographicCamera; // React currently throws a warning when using useLayoutEffect on the server.
-// To get around it, we can conditionally useEffect on the server (no-op) and
-// useLayoutEffect on the client.
+var _window$document, _window$navigator;
+const isOrthographicCamera = def => def && def.isOrthographicCamera;
+/**
+ * An SSR-friendly useLayoutEffect.
+ *
+ * React currently throws a warning when using useLayoutEffect on the server.
+ * To get around it, we can conditionally useEffect on the server (no-op) and
+ * useLayoutEffect elsewhere.
+ *
+ * @see https://github.com/facebook/react/issues/14927
+ */
 
-const isSSR = typeof window === 'undefined' || !window.navigator || /ServerSideRendering|^Deno\//.test(window.navigator.userAgent);
-const useIsomorphicLayoutEffect = isSSR ? React__namespace.useEffect : React__namespace.useLayoutEffect;
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' && ((_window$document = window.document) != null && _window$document.createElement || ((_window$navigator = window.navigator) == null ? void 0 : _window$navigator.product) === 'ReactNative') ? React__namespace.useLayoutEffect : React__namespace.useEffect;
 function useMutableCallback(fn) {
   const ref = React__namespace.useRef(fn);
   useIsomorphicLayoutEffect(() => void (ref.current = fn), [fn]);
@@ -855,7 +862,7 @@ let extend = objects => void (catalogue = { ...catalogue,
   ...objects
 });
 
-function createRenderer(roots, getEventPriority) {
+function createRenderer(_roots, _getEventPriority) {
   function createInstance(type, {
     args = [],
     attach,
@@ -1071,10 +1078,10 @@ function createRenderer(roots, getEventPriority) {
     appendChild,
     appendInitialChild: appendChild,
     insertBefore,
-    supportsMicrotask: true,
-    warnsIfNotActing: true,
     supportsMutation: true,
     isPrimaryRenderer: false,
+    supportsPersistence: false,
+    supportsHydration: false,
     noTimeout: -1,
     appendChildToContainer: (container, child) => {
       const scene = container.getState().scene; // Link current root to the default scene
@@ -1093,10 +1100,10 @@ function createRenderer(roots, getEventPriority) {
       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 Boolean(localState.handlers);
     },
 
-    prepareUpdate(instance, type, oldProps, newProps) {
+    prepareUpdate(instance, _type, oldProps, newProps) {
       // Create diff-sets
       if (instance.__r3f.primitive && newProps.object && newProps.object !== instance) {
         return [true];
@@ -1113,7 +1120,7 @@ function createRenderer(roots, getEventPriority) {
           ...restOld
         } = oldProps; // Throw if an object or literal was passed for args
 
-        if (!Array.isArray(argsNew)) throw 'The args prop must be an array!'; // If it has new props or arguments, then it needs to be re-instanciated
+        if (!Array.isArray(argsNew)) throw 'The args prop must be an array!'; // If it has new props or arguments, then it needs to be re-instantiated
 
         if (argsNew.some((value, index) => value !== argsOld[index])) return [true]; // Create a diff-set, flag if there are any changes
 
@@ -1124,13 +1131,13 @@ function createRenderer(roots, getEventPriority) {
       }
     },
 
-    commitUpdate(instance, [reconstruct, diff], type, oldProps, newProps, fiber) {
+    commitUpdate(instance, [reconstruct, diff], type, _oldProps, newProps, fiber) {
       // Reconstruct when args or <primitive object={...} have changes
       if (reconstruct) switchInstance(instance, type, newProps, fiber); // Otherwise just overwrite props
       else applyProps$1(instance, diff);
     },
 
-    commitMount(instance, type, props, int) {
+    commitMount(instance, _type, _props, _int) {
       var _instance$__r3f3;
 
       // https://github.com/facebook/react/issues/20271
@@ -1143,13 +1150,11 @@ function createRenderer(roots, getEventPriority) {
     },
 
     getPublicInstance: instance => instance,
-    shouldDeprioritizeSubtree: () => false,
     prepareForCommit: () => null,
     preparePortalMount: container => prepare(container.getState().scene),
     resetAfterCommit: () => {},
     shouldSetTextContent: () => false,
     clearContainer: () => false,
-    detachDeletedInstance: () => {},
 
     hideInstance(instance) {
       var _instance$__r3f4;
@@ -1177,20 +1182,23 @@ function createRenderer(roots, getEventPriority) {
       invalidateInstance(instance);
     },
 
-    createTextInstance: () => {},
+    createTextInstance: () => {
+      throw new Error('Text is not allowed in the R3F tree! This could be stray whitespace or characters.');
+    },
     hideTextInstance: () => {
-      throw new Error('Text is not allowed in the R3F tree.');
+      throw new Error('Text is not allowed in the R3F tree! This could be stray whitespace or characters.');
     },
     unhideTextInstance: () => {},
-    getCurrentEventPriority: () => getEventPriority ? getEventPriority() : constants.DefaultEventPriority,
-    // @ts-ignore
-    now: typeof performance !== 'undefined' && is.fun(performance.now) ? performance.now : is.fun(Date.now) ? Date.now : undefined,
+    // https://github.com/pmndrs/react-three-fiber/pull/2360#discussion_r916356874
     // @ts-ignore
+    getCurrentEventPriority: () => _getEventPriority ? _getEventPriority() : constants.DefaultEventPriority,
+    beforeActiveInstanceBlur: () => {},
+    afterActiveInstanceBlur: () => {},
+    detachDeletedInstance: () => {},
+    now: typeof performance !== 'undefined' && is.fun(performance.now) ? performance.now : is.fun(Date.now) ? Date.now : () => 0,
+    // https://github.com/pmndrs/react-three-fiber/pull/2360#discussion_r920883503
     scheduleTimeout: is.fun(setTimeout) ? setTimeout : undefined,
-    // @ts-ignore
-    cancelTimeout: is.fun(clearTimeout) ? clearTimeout : undefined,
-    setTimeout: is.fun(setTimeout) ? setTimeout : undefined,
-    clearTimeout: is.fun(clearTimeout) ? clearTimeout : undefined
+    cancelTimeout: is.fun(clearTimeout) ? clearTimeout : undefined
   });
   return {
     reconciler,
@@ -1211,7 +1219,9 @@ const createStore = (invalidate, advance) => {
     function getCurrentViewport(camera = get().camera, target = defaultTarget, size = get().size) {
       const {
         width,
-        height
+        height,
+        top,
+        left
       } = size;
       const aspect = width / height;
       if (target instanceof THREE__namespace.Vector3) tempTarget.copy(target);else tempTarget.set(...target);
@@ -1221,6 +1231,8 @@ const createStore = (invalidate, advance) => {
         return {
           width: width / camera.zoom,
           height: height / camera.zoom,
+          top,
+          left,
           factor: 1,
           distance,
           aspect
@@ -1234,6 +1246,8 @@ const createStore = (invalidate, advance) => {
         return {
           width: w,
           height: h,
+          top,
+          left,
           factor: width / w,
           distance,
           aspect
@@ -1250,7 +1264,7 @@ const createStore = (invalidate, advance) => {
     }));
 
     const pointer = new THREE__namespace.Vector2();
-    return {
+    const rootState = {
       set,
       get,
       // Mock objects that have to be configured
@@ -1293,6 +1307,8 @@ const createStore = (invalidate, advance) => {
       size: {
         width: 0,
         height: 0,
+        top: 0,
+        left: 0,
         updateStyle: false
       },
       viewport: {
@@ -1300,6 +1316,8 @@ const createStore = (invalidate, advance) => {
         dpr: 0,
         width: 0,
         height: 0,
+        top: 0,
+        left: 0,
         aspect: 0,
         distance: 0,
         factor: 0,
@@ -1310,11 +1328,13 @@ const createStore = (invalidate, advance) => {
           ...events
         }
       })),
-      setSize: (width, height, updateStyle) => {
+      setSize: (width, height, updateStyle, top, left) => {
         const camera = get().camera;
         const size = {
           width,
           height,
+          top: top || 0,
+          left: left || 0,
           updateStyle
         };
         set(state => ({
@@ -1388,6 +1408,7 @@ const createStore = (invalidate, advance) => {
         }
       }
     };
+    return rootState;
   });
   const state = rootState.getState();
   let oldSize = state.size;
@@ -1429,15 +1450,17 @@ const createStore = (invalidate, advance) => {
 };
 
 function createSubs(callback, subs) {
-  const index = subs.length;
-  subs.push(callback);
-  return () => void subs.splice(index, 1);
+  const sub = {
+    callback
+  };
+  subs.add(sub);
+  return () => void subs.delete(sub);
 }
 
 let i;
-let globalEffects = [];
-let globalAfterEffects = [];
-let globalTailEffects = [];
+let globalEffects = new Set();
+let globalAfterEffects = new Set();
+let globalTailEffects = new Set();
 /**
  * Adds a global render callback which is called each frame.
  * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addEffect
@@ -1458,7 +1481,9 @@ const addAfterEffect = callback => createSubs(callback, globalAfterEffects);
 const addTail = callback => createSubs(callback, globalTailEffects);
 
 function run(effects, timestamp) {
-  for (i = 0; i < effects.length; i++) effects[i](timestamp);
+  effects.forEach(({
+    callback
+  }) => callback(timestamp));
 }
 
 let subscribers;
@@ -1500,7 +1525,7 @@ function createLoop(roots) {
     running = true;
     repeat = 0; // Run effects
 
-    if (globalEffects.length) run(globalEffects, timestamp); // Render all roots
+    if (globalEffects.size) run(globalEffects, timestamp); // Render all roots
 
     roots.forEach(root => {
       var _state$gl$xr;
@@ -1512,11 +1537,11 @@ function createLoop(roots) {
       }
     }); // Run after-effects
 
-    if (globalAfterEffects.length) run(globalAfterEffects, timestamp); // Stop the loop if nothing invalidates it
+    if (globalAfterEffects.size) run(globalAfterEffects, timestamp); // Stop the loop if nothing invalidates it
 
     if (repeat === 0) {
       // Tail call effects, they are called when rendering stops
-      if (globalTailEffects.length) run(globalTailEffects, timestamp); // Flag end of operation
+      if (globalTailEffects.size) run(globalTailEffects, timestamp); // Flag end of operation
 
       running = false;
       return cancelAnimationFrame(frame);
@@ -1695,8 +1720,6 @@ function createRoot(canvas) {
   let configured = false;
   return {
     configure(props = {}) {
-      var _canvas$parentElement, _canvas$parentElement2, _canvas$parentElement3, _canvas$parentElement4;
-
       let {
         gl: glConfig,
         size,
@@ -1834,11 +1857,22 @@ function createRoot(canvas) {
 
       if (dpr && state.viewport.dpr !== calculateDpr(dpr)) state.setDpr(dpr); // Check size, allow it to take on container bounds initially
 
-      size = size || {
-        width: (_canvas$parentElement = (_canvas$parentElement2 = canvas.parentElement) == null ? void 0 : _canvas$parentElement2.clientWidth) != null ? _canvas$parentElement : 0,
-        height: (_canvas$parentElement3 = (_canvas$parentElement4 = canvas.parentElement) == null ? void 0 : _canvas$parentElement4.clientHeight) != null ? _canvas$parentElement3 : 0
-      };
-      if (!is.equ(size, state.size, shallowLoose)) state.setSize(size.width, size.height, size.updateStyle); // Check frameloop
+      size = size || (canvas.parentElement ? {
+        width: canvas.parentElement.clientWidth,
+        height: canvas.parentElement.clientHeight,
+        top: canvas.parentElement.clientTop,
+        left: canvas.parentElement.clientLeft
+      } : {
+        width: 0,
+        height: 0,
+        top: 0,
+        left: 0
+      });
+
+      if (!is.equ(size, state.size, shallowLoose)) {
+        state.setSize(size.width, size.height, size.updateStyle, size.top, size.left);
+      } // Check frameloop
+
 
       if (state.frameloop !== frameloop) state.setFrameloop(frameloop); // Check pointer missed
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-acc8c265.cjs.dev.js');
+var index = require('./index-6716e497.cjs.dev.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
@@ -144,10 +144,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   // This will include the entire THREE namespace by default, users can extend
   // their own elements by using the createRoot API instead
   React__namespace.useMemo(() => index.extend(THREE__namespace), []);
-  const [containerRef, {
-    width,
-    height
-  }] = useMeasure__default["default"]({
+  const [containerRef, containerRect] = useMeasure__default["default"]({
     scroll: true,
     debounce: {
       scroll: 50,
@@ -168,7 +165,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   if (error) throw error;
   const root = React__namespace.useRef(null);
 
-  if (width > 0 && height > 0 && canvas) {
+  if (containerRect.width > 0 && containerRect.height > 0 && canvas) {
     if (!root.current) root.current = index.createRoot(canvas);
     root.current.configure({
       gl,
@@ -183,10 +180,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
       performance,
       raycaster,
       camera,
-      size: {
-        width,
-        height
-      },
+      size: containerRect,
       // Pass mutable reference to onPointerMissed so it's free to update
       onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
       onCreated: state => {

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-c30de6b8.cjs.prod.js');
+var index = require('./index-8296e46a.cjs.prod.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
@@ -144,10 +144,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   // This will include the entire THREE namespace by default, users can extend
   // their own elements by using the createRoot API instead
   React__namespace.useMemo(() => index.extend(THREE__namespace), []);
-  const [containerRef, {
-    width,
-    height
-  }] = useMeasure__default["default"]({
+  const [containerRef, containerRect] = useMeasure__default["default"]({
     scroll: true,
     debounce: {
       scroll: 50,
@@ -168,7 +165,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   if (error) throw error;
   const root = React__namespace.useRef(null);
 
-  if (width > 0 && height > 0 && canvas) {
+  if (containerRect.width > 0 && containerRect.height > 0 && canvas) {
     if (!root.current) root.current = index.createRoot(canvas);
     root.current.configure({
       gl,
@@ -183,10 +180,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
       performance,
       raycaster,
       camera,
-      size: {
-        width,
-        height
-      },
+      size: containerRect,
       // Pass mutable reference to onPointerMissed so it's free to update
       onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
       onCreated: state => {