@react-three/fiber 8.0.25 → 8.1.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @react-three/fiber
 
+## 8.1.0
+
+### Minor Changes
+
+- 8d0f708c: Expose position information in state.size
+
+## 8.0.27
+
+### Patch Changes
+
+- 7940995: fix: resume on xrsession end, export internal events
+
+## 8.0.26
+
+### Patch Changes
+
+- 7b6df9df: fix: infinite loop updating cam viewport
+
 ## 8.0.25
 
 ### Patch Changes

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

@@ -49,10 +49,7 @@ export declare type InjectState = Partial<Omit<RootState, PrivateKeys> & {
         compute?: ComputeFunction;
         connected?: any;
     };
-    size?: {
-        width: number;
-        height: number;
-    };
+    size?: Size;
 }>;
 declare function createPortal(children: React.ReactNode, container: THREE.Object3D, state?: InjectState): React.ReactNode;
 declare const act: any;

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

@@ -17,6 +17,8 @@ export declare type Dpr = number | [min: number, max: number];
 export declare type Size = {
     width: number;
     height: number;
+    top: number;
+    left: number;
     updateStyle?: boolean;
 };
 export declare type Viewport = Size & {
@@ -81,7 +83,7 @@ export declare type RootState = {
     invalidate: (frames?: number) => void;
     advance: (timestamp: number, runGlobalEffects?: boolean) => void;
     setEvents: (events: Partial<EventManager<any>>) => void;
-    setSize: (width: number, height: number, updateStyle?: boolean) => void;
+    setSize: (width: number, height: number, updateStyle?: boolean, top?: number, left?: number) => void;
     setDpr: (dpr: Dpr) => void;
     setFrameloop: (frameloop?: 'always' | 'demand' | 'never') => void;
     onPointerMissed?: (event: MouseEvent) => void;

package/dist/declarations/src/index.d.ts

@@ -6,5 +6,6 @@ export type { Intersection, Subscription, Dpr, Size, Viewport, RenderCallback, P
 export type { ThreeEvent, Events, EventManager, ComputeFunction } from './core/events';
 export type { ObjectMap, Camera } from './core/utils';
 export * from './web/Canvas';
+export { createEvents } from './core/events';
 export { createPointerEvents as events } from './web/events';
 export * from './core';

package/dist/{index-8d5cf4a3.esm.js → index-9b4af973.esm.js}

@@ -1184,7 +1184,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.Vector3) tempTarget.copy(target);else tempTarget.set(...target);
@@ -1194,6 +1196,8 @@ const createStore = (invalidate, advance) => {
         return {
           width: width / camera.zoom,
           height: height / camera.zoom,
+          top,
+          left,
           factor: 1,
           distance,
           aspect
@@ -1207,6 +1211,8 @@ const createStore = (invalidate, advance) => {
         return {
           width: w,
           height: h,
+          top,
+          left,
           factor: width / w,
           distance,
           aspect
@@ -1223,7 +1229,7 @@ const createStore = (invalidate, advance) => {
     }));
 
     const pointer = new THREE.Vector2();
-    return {
+    const rootState = {
       set,
       get,
       // Mock objects that have to be configured
@@ -1266,6 +1272,8 @@ const createStore = (invalidate, advance) => {
       size: {
         width: 0,
         height: 0,
+        top: 0,
+        left: 0,
         updateStyle: false
       },
       viewport: {
@@ -1273,6 +1281,8 @@ const createStore = (invalidate, advance) => {
         dpr: 0,
         width: 0,
         height: 0,
+        top: 0,
+        left: 0,
         aspect: 0,
         distance: 0,
         factor: 0,
@@ -1283,11 +1293,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 => ({
@@ -1361,43 +1373,39 @@ const createStore = (invalidate, advance) => {
         }
       }
     };
+    return rootState;
   });
-  const state = rootState.getState(); // Resize camera and renderer on changes to size and pixelratio
-
+  const state = rootState.getState();
   let oldSize = state.size;
   let oldDpr = state.viewport.dpr;
+  let oldCamera = state.camera;
   rootState.subscribe(() => {
     const {
       camera,
       size,
       viewport,
-      gl
-    } = rootState.getState();
+      gl,
+      set
+    } = rootState.getState(); // Resize camera and renderer on changes to size and pixelratio
 
     if (size !== oldSize || viewport.dpr !== oldDpr) {
-      updateCamera(camera, size); // Update renderer
+      oldSize = size;
+      oldDpr = viewport.dpr; // Update camera & renderer
 
+      updateCamera(camera, size);
       gl.setPixelRatio(viewport.dpr);
       gl.setSize(size.width, size.height, size.updateStyle);
-      oldSize = size;
-      oldDpr = viewport.dpr;
-    }
-  }); // Update viewport once the camera changes
+    } // Update viewport once the camera changes
 
-  let oldCamera = state.camera;
-  rootState.subscribe(() => {
-    const {
-      camera,
-      set
-    } = rootState.getState();
 
     if (camera !== oldCamera) {
+      oldCamera = camera; // Update viewport
+
       set(state => ({
         viewport: { ...state.viewport,
           ...state.viewport.getCurrentViewport(camera)
         }
       }));
-      oldCamera = camera;
     }
   }); // Invalidate on any change
 
@@ -1407,15 +1415,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
@@ -1436,7 +1446,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;
@@ -1478,7 +1490,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;
@@ -1490,11 +1502,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);
@@ -1673,8 +1685,6 @@ function createRoot(canvas) {
   let configured = false;
   return {
     configure(props = {}) {
-      var _canvas$parentElement, _canvas$parentElement2, _canvas$parentElement3, _canvas$parentElement4;
-
       let {
         gl: glConfig,
         size,
@@ -1743,12 +1753,10 @@ function createRoot(canvas) {
 
 
         const handleSessionChange = () => {
-          const gl = store.getState().gl;
-          gl.xr.enabled = gl.xr.isPresenting; // @ts-ignore
-          // WebXRManager's signature is incorrect.
-          // See: https://github.com/pmndrs/react-three-fiber/pull/2017#discussion_r790134505
-
-          gl.xr.setAnimationLoop(gl.xr.isPresenting ? handleXRFrame : null);
+          const state = store.getState();
+          state.gl.xr.enabled = state.gl.xr.isPresenting;
+          state.gl.xr.setAnimationLoop(state.gl.xr.isPresenting ? handleXRFrame : null);
+          if (!state.gl.xr.isPresenting) invalidate(state);
         }; // WebXR session manager
 
 
@@ -1814,11 +1822,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-cd0062f1.cjs.prod.js → index-ab905875.cjs.prod.js}

@@ -1211,7 +1211,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 +1223,8 @@ const createStore = (invalidate, advance) => {
         return {
           width: width / camera.zoom,
           height: height / camera.zoom,
+          top,
+          left,
           factor: 1,
           distance,
           aspect
@@ -1234,6 +1238,8 @@ const createStore = (invalidate, advance) => {
         return {
           width: w,
           height: h,
+          top,
+          left,
           factor: width / w,
           distance,
           aspect
@@ -1250,7 +1256,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 +1299,8 @@ const createStore = (invalidate, advance) => {
       size: {
         width: 0,
         height: 0,
+        top: 0,
+        left: 0,
         updateStyle: false
       },
       viewport: {
@@ -1300,6 +1308,8 @@ const createStore = (invalidate, advance) => {
         dpr: 0,
         width: 0,
         height: 0,
+        top: 0,
+        left: 0,
         aspect: 0,
         distance: 0,
         factor: 0,
@@ -1310,11 +1320,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,43 +1400,39 @@ const createStore = (invalidate, advance) => {
         }
       }
     };
+    return rootState;
   });
-  const state = rootState.getState(); // Resize camera and renderer on changes to size and pixelratio
-
+  const state = rootState.getState();
   let oldSize = state.size;
   let oldDpr = state.viewport.dpr;
+  let oldCamera = state.camera;
   rootState.subscribe(() => {
     const {
       camera,
       size,
       viewport,
-      gl
-    } = rootState.getState();
+      gl,
+      set
+    } = rootState.getState(); // Resize camera and renderer on changes to size and pixelratio
 
     if (size !== oldSize || viewport.dpr !== oldDpr) {
-      updateCamera(camera, size); // Update renderer
+      oldSize = size;
+      oldDpr = viewport.dpr; // Update camera & renderer
 
+      updateCamera(camera, size);
       gl.setPixelRatio(viewport.dpr);
       gl.setSize(size.width, size.height, size.updateStyle);
-      oldSize = size;
-      oldDpr = viewport.dpr;
-    }
-  }); // Update viewport once the camera changes
+    } // Update viewport once the camera changes
 
-  let oldCamera = state.camera;
-  rootState.subscribe(() => {
-    const {
-      camera,
-      set
-    } = rootState.getState();
 
     if (camera !== oldCamera) {
+      oldCamera = camera; // Update viewport
+
       set(state => ({
         viewport: { ...state.viewport,
           ...state.viewport.getCurrentViewport(camera)
         }
       }));
-      oldCamera = camera;
     }
   }); // Invalidate on any change
 
@@ -1434,15 +1442,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
@@ -1463,7 +1473,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;
@@ -1505,7 +1517,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;
@@ -1517,11 +1529,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);
@@ -1700,8 +1712,6 @@ function createRoot(canvas) {
   let configured = false;
   return {
     configure(props = {}) {
-      var _canvas$parentElement, _canvas$parentElement2, _canvas$parentElement3, _canvas$parentElement4;
-
       let {
         gl: glConfig,
         size,
@@ -1770,12 +1780,10 @@ function createRoot(canvas) {
 
 
         const handleSessionChange = () => {
-          const gl = store.getState().gl;
-          gl.xr.enabled = gl.xr.isPresenting; // @ts-ignore
-          // WebXRManager's signature is incorrect.
-          // See: https://github.com/pmndrs/react-three-fiber/pull/2017#discussion_r790134505
-
-          gl.xr.setAnimationLoop(gl.xr.isPresenting ? handleXRFrame : null);
+          const state = store.getState();
+          state.gl.xr.enabled = state.gl.xr.isPresenting;
+          state.gl.xr.setAnimationLoop(state.gl.xr.isPresenting ? handleXRFrame : null);
+          if (!state.gl.xr.isPresenting) invalidate(state);
         }; // WebXR session manager
 
 
@@ -1841,11 +1849,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-63f47889.cjs.dev.js → index-c13c7c31.cjs.dev.js}

@@ -1211,7 +1211,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 +1223,8 @@ const createStore = (invalidate, advance) => {
         return {
           width: width / camera.zoom,
           height: height / camera.zoom,
+          top,
+          left,
           factor: 1,
           distance,
           aspect
@@ -1234,6 +1238,8 @@ const createStore = (invalidate, advance) => {
         return {
           width: w,
           height: h,
+          top,
+          left,
           factor: width / w,
           distance,
           aspect
@@ -1250,7 +1256,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 +1299,8 @@ const createStore = (invalidate, advance) => {
       size: {
         width: 0,
         height: 0,
+        top: 0,
+        left: 0,
         updateStyle: false
       },
       viewport: {
@@ -1300,6 +1308,8 @@ const createStore = (invalidate, advance) => {
         dpr: 0,
         width: 0,
         height: 0,
+        top: 0,
+        left: 0,
         aspect: 0,
         distance: 0,
         factor: 0,
@@ -1310,11 +1320,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,43 +1400,39 @@ const createStore = (invalidate, advance) => {
         }
       }
     };
+    return rootState;
   });
-  const state = rootState.getState(); // Resize camera and renderer on changes to size and pixelratio
-
+  const state = rootState.getState();
   let oldSize = state.size;
   let oldDpr = state.viewport.dpr;
+  let oldCamera = state.camera;
   rootState.subscribe(() => {
     const {
       camera,
       size,
       viewport,
-      gl
-    } = rootState.getState();
+      gl,
+      set
+    } = rootState.getState(); // Resize camera and renderer on changes to size and pixelratio
 
     if (size !== oldSize || viewport.dpr !== oldDpr) {
-      updateCamera(camera, size); // Update renderer
+      oldSize = size;
+      oldDpr = viewport.dpr; // Update camera & renderer
 
+      updateCamera(camera, size);
       gl.setPixelRatio(viewport.dpr);
       gl.setSize(size.width, size.height, size.updateStyle);
-      oldSize = size;
-      oldDpr = viewport.dpr;
-    }
-  }); // Update viewport once the camera changes
+    } // Update viewport once the camera changes
 
-  let oldCamera = state.camera;
-  rootState.subscribe(() => {
-    const {
-      camera,
-      set
-    } = rootState.getState();
 
     if (camera !== oldCamera) {
+      oldCamera = camera; // Update viewport
+
       set(state => ({
         viewport: { ...state.viewport,
           ...state.viewport.getCurrentViewport(camera)
         }
       }));
-      oldCamera = camera;
     }
   }); // Invalidate on any change
 
@@ -1434,15 +1442,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
@@ -1463,7 +1473,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;
@@ -1505,7 +1517,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;
@@ -1517,11 +1529,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);
@@ -1700,8 +1712,6 @@ function createRoot(canvas) {
   let configured = false;
   return {
     configure(props = {}) {
-      var _canvas$parentElement, _canvas$parentElement2, _canvas$parentElement3, _canvas$parentElement4;
-
       let {
         gl: glConfig,
         size,
@@ -1770,12 +1780,10 @@ function createRoot(canvas) {
 
 
         const handleSessionChange = () => {
-          const gl = store.getState().gl;
-          gl.xr.enabled = gl.xr.isPresenting; // @ts-ignore
-          // WebXRManager's signature is incorrect.
-          // See: https://github.com/pmndrs/react-three-fiber/pull/2017#discussion_r790134505
-
-          gl.xr.setAnimationLoop(gl.xr.isPresenting ? handleXRFrame : null);
+          const state = store.getState();
+          state.gl.xr.enabled = state.gl.xr.isPresenting;
+          state.gl.xr.setAnimationLoop(state.gl.xr.isPresenting ? handleXRFrame : null);
+          if (!state.gl.xr.isPresenting) invalidate(state);
         }; // WebXR session manager
 
 
@@ -1841,11 +1849,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-63f47889.cjs.dev.js');
+var index = require('./index-c13c7c31.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 => {
@@ -241,6 +235,7 @@ exports.addTail = index.addTail;
 exports.advance = index.advance;
 exports.applyProps = index.applyProps;
 exports.context = index.context;
+exports.createEvents = index.createEvents;
 exports.createPortal = index.createPortal;
 exports.createRoot = index.createRoot;
 exports.dispose = index.dispose;

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-cd0062f1.cjs.prod.js');
+var index = require('./index-ab905875.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 => {
@@ -241,6 +235,7 @@ exports.addTail = index.addTail;
 exports.advance = index.advance;
 exports.applyProps = index.applyProps;
 exports.context = index.context;
+exports.createEvents = index.createEvents;
 exports.createPortal = index.createPortal;
 exports.createRoot = index.createRoot;
 exports.dispose = index.dispose;

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-8d5cf4a3.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-8d5cf4a3.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-9b4af973.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, c as createEvents, 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-9b4af973.esm.js';
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import * as THREE from 'three';
@@ -117,10 +117,7 @@ const Canvas = /*#__PURE__*/React.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.useMemo(() => extend(THREE), []);
-  const [containerRef, {
-    width,
-    height
-  }] = useMeasure({
+  const [containerRef, containerRect] = useMeasure({
     scroll: true,
     debounce: {
       scroll: 50,
@@ -141,7 +138,7 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
   if (error) throw error;
   const root = React.useRef(null);
 
-  if (width > 0 && height > 0 && canvas) {
+  if (containerRect.width > 0 && containerRect.height > 0 && canvas) {
     if (!root.current) root.current = createRoot(canvas);
     root.current.configure({
       gl,
@@ -156,10 +153,7 @@ const Canvas = /*#__PURE__*/React.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/native/dist/react-three-fiber-native.cjs.dev.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('../../dist/index-63f47889.cjs.dev.js');
+var index = require('../../dist/index-c13c7c31.cjs.dev.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
@@ -258,10 +258,14 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
   React__namespace.useMemo(() => index.extend(THREE__namespace), []);
   const [{
     width,
-    height
+    height,
+    top,
+    left
   }, setSize] = React__namespace.useState({
     width: 0,
-    height: 0
+    height: 0,
+    top: 0,
+    left: 0
   });
   const [canvas, setCanvas] = React__namespace.useState(null);
   const [bind, setBind] = React__namespace.useState();
@@ -280,11 +284,15 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
   const onLayout = React__namespace.useCallback(e => {
     const {
       width,
-      height
+      height,
+      x,
+      y
     } = e.nativeEvent.layout;
     setSize({
       width,
-      height
+      height,
+      top: y,
+      left: x
     });
   }, []); // Called on context create or swap
   // https://github.com/pmndrs/react-three-fiber/pull/2297
@@ -321,7 +329,9 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
       dpr: reactNative.PixelRatio.get(),
       size: {
         width,
-        height
+        height,
+        top,
+        left
       },
       // Pass mutable reference to onPointerMissed so it's free to update
       onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),

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-cd0062f1.cjs.prod.js');
+var index = require('../../dist/index-ab905875.cjs.prod.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
@@ -258,10 +258,14 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
   React__namespace.useMemo(() => index.extend(THREE__namespace), []);
   const [{
     width,
-    height
+    height,
+    top,
+    left
   }, setSize] = React__namespace.useState({
     width: 0,
-    height: 0
+    height: 0,
+    top: 0,
+    left: 0
   });
   const [canvas, setCanvas] = React__namespace.useState(null);
   const [bind, setBind] = React__namespace.useState();
@@ -280,11 +284,15 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
   const onLayout = React__namespace.useCallback(e => {
     const {
       width,
-      height
+      height,
+      x,
+      y
     } = e.nativeEvent.layout;
     setSize({
       width,
-      height
+      height,
+      top: y,
+      left: x
     });
   }, []); // Called on context create or swap
   // https://github.com/pmndrs/react-three-fiber/pull/2297
@@ -321,7 +329,9 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
       dpr: reactNative.PixelRatio.get(),
       size: {
         width,
-        height
+        height,
+        top,
+        left
       },
       // Pass mutable reference to onPointerMissed so it's free to update
       onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),

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-8d5cf4a3.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-8d5cf4a3.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-9b4af973.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-9b4af973.esm.js';
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import * as THREE from 'three';
@@ -231,10 +231,14 @@ const Canvas = /*#__PURE__*/React.forwardRef(({
   React.useMemo(() => extend(THREE), []);
   const [{
     width,
-    height
+    height,
+    top,
+    left
   }, setSize] = React.useState({
     width: 0,
-    height: 0
+    height: 0,
+    top: 0,
+    left: 0
   });
   const [canvas, setCanvas] = React.useState(null);
   const [bind, setBind] = React.useState();
@@ -253,11 +257,15 @@ const Canvas = /*#__PURE__*/React.forwardRef(({
   const onLayout = React.useCallback(e => {
     const {
       width,
-      height
+      height,
+      x,
+      y
     } = e.nativeEvent.layout;
     setSize({
       width,
-      height
+      height,
+      top: y,
+      left: x
     });
   }, []); // Called on context create or swap
   // https://github.com/pmndrs/react-three-fiber/pull/2297
@@ -294,7 +302,9 @@ const Canvas = /*#__PURE__*/React.forwardRef(({
       dpr: PixelRatio.get(),
       size: {
         width,
-        height
+        height,
+        top,
+        left
       },
       // Pass mutable reference to onPointerMissed so it's free to update
       onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),

package/package.json

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