@react-three/fiber 8.10.0 → 8.10.2

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-4ea38fa1.cjs.dev.js');
+var index = require('./index-bf8a2906.cjs.dev.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
@@ -50,8 +50,8 @@ const DOM_EVENTS = {
   onPointerCancel: ['pointercancel', true],
   onLostPointerCapture: ['lostpointercapture', true]
 };
-/** Default R3F event manager for web */
 
+/** Default R3F event manager for web */
 function createPointerEvents(store) {
   const {
     handlePointer
@@ -59,28 +59,27 @@ function createPointerEvents(store) {
   return {
     priority: 1,
     enabled: true,
-
     compute(event, state, previous) {
       // https://github.com/pmndrs/react-three-fiber/pull/782
       // Events trigger outside of canvas when moved, use offsetX/Y by default and allow overrides
       state.pointer.set(event.offsetX / state.size.width * 2 - 1, -(event.offsetY / state.size.height) * 2 + 1);
       state.raycaster.setFromCamera(state.pointer, state.camera);
     },
-
     connected: undefined,
-    handlers: Object.keys(DOM_EVENTS).reduce((acc, key) => ({ ...acc,
+    handlers: Object.keys(DOM_EVENTS).reduce((acc, key) => ({
+      ...acc,
       [key]: handlePointer(key)
     }), {}),
     connect: target => {
       var _events$handlers;
-
       const {
         set,
         events
       } = store.getState();
       events.disconnect == null ? void 0 : events.disconnect();
       set(state => ({
-        events: { ...state.events,
+        events: {
+          ...state.events,
           connected: target
         }
       }));
@@ -96,10 +95,8 @@ function createPointerEvents(store) {
         set,
         events
       } = store.getState();
-
       if (events.connected) {
         var _events$handlers2;
-
         Object.entries((_events$handlers2 = events.handlers) != null ? _events$handlers2 : []).forEach(([name, event]) => {
           if (events && events.connected instanceof HTMLElement) {
             const [eventName] = DOM_EVENTS[name];
@@ -107,7 +104,8 @@ function createPointerEvents(store) {
           }
         });
         set(state => ({
-          events: { ...state.events,
+          events: {
+            ...state.events,
             connected: undefined
           }
         }));
@@ -158,13 +156,13 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   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)
-
-  if (block) throw block; // Throw exception outwards if anything within canvas throws
+  const [error, setError] = React__namespace.useState(false);
 
+  // Suspend this component if block is a promise (2nd run)
+  if (block) throw block;
+  // Throw exception outwards if anything within canvas throws
   if (error) throw error;
   const root = React__namespace.useRef(null);
-
   if (containerRect.width > 0 && containerRect.height > 0 && canvas) {
     if (!root.current) root.current = index.createRoot(canvas);
     root.current.configure({
@@ -185,8 +183,8 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
       onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
       onCreated: state => {
         // Connect to event source
-        state.events.connect == null ? void 0 : state.events.connect(eventSource ? index.isRef(eventSource) ? eventSource.current : eventSource : divRef.current); // Set up compute function
-
+        state.events.connect == null ? void 0 : state.events.connect(eventSource ? index.isRef(eventSource) ? eventSource.current : eventSource : divRef.current);
+        // Set up compute function
         if (eventPrefix) {
           state.setEvents({
             compute: (event, state) => {
@@ -196,9 +194,8 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
               state.raycaster.setFromCamera(state.pointer, state.camera);
             }
           });
-        } // Call onCreated callback
-
-
+        }
+        // Call onCreated callback
         onCreated == null ? void 0 : onCreated(state);
       }
     });
@@ -210,15 +207,15 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
       })
     }, children))));
   }
-
   index.useIsomorphicLayoutEffect(() => {
     setCanvas(canvasRef.current);
   }, []);
   React__namespace.useEffect(() => {
     if (canvas) return () => index.unmountComponentAtNode(canvas);
-  }, [canvas]); // When the event source is not this div, we need to set pointer-events to none
-  // Or else the canvas will block events from reaching the event source
+  }, [canvas]);
 
+  // When the event source is not this div, we need to set pointer-events to none
+  // Or else the canvas will block events from reaching the event source
   const pointerEvents = eventSource ? 'none' : 'auto';
   return /*#__PURE__*/React__namespace.createElement("div", _extends({
     ref: divRef,
@@ -243,11 +240,11 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
     }
   }, fallback)));
 });
+
 /**
  * A DOM canvas which accepts threejs elements as children.
  * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
  */
-
 const Canvas = /*#__PURE__*/React__namespace.forwardRef(function CanvasWrapper(props, ref) {
   return /*#__PURE__*/React__namespace.createElement(itsFine.FiberProvider, null, /*#__PURE__*/React__namespace.createElement(CanvasImpl, _extends({}, props, {
     ref: ref

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-d957aeb6.cjs.prod.js');
+var index = require('./index-661b9d11.cjs.prod.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
@@ -50,8 +50,8 @@ const DOM_EVENTS = {
   onPointerCancel: ['pointercancel', true],
   onLostPointerCapture: ['lostpointercapture', true]
 };
-/** Default R3F event manager for web */
 
+/** Default R3F event manager for web */
 function createPointerEvents(store) {
   const {
     handlePointer
@@ -59,28 +59,27 @@ function createPointerEvents(store) {
   return {
     priority: 1,
     enabled: true,
-
     compute(event, state, previous) {
       // https://github.com/pmndrs/react-three-fiber/pull/782
       // Events trigger outside of canvas when moved, use offsetX/Y by default and allow overrides
       state.pointer.set(event.offsetX / state.size.width * 2 - 1, -(event.offsetY / state.size.height) * 2 + 1);
       state.raycaster.setFromCamera(state.pointer, state.camera);
     },
-
     connected: undefined,
-    handlers: Object.keys(DOM_EVENTS).reduce((acc, key) => ({ ...acc,
+    handlers: Object.keys(DOM_EVENTS).reduce((acc, key) => ({
+      ...acc,
       [key]: handlePointer(key)
     }), {}),
     connect: target => {
       var _events$handlers;
-
       const {
         set,
         events
       } = store.getState();
       events.disconnect == null ? void 0 : events.disconnect();
       set(state => ({
-        events: { ...state.events,
+        events: {
+          ...state.events,
           connected: target
         }
       }));
@@ -96,10 +95,8 @@ function createPointerEvents(store) {
         set,
         events
       } = store.getState();
-
       if (events.connected) {
         var _events$handlers2;
-
         Object.entries((_events$handlers2 = events.handlers) != null ? _events$handlers2 : []).forEach(([name, event]) => {
           if (events && events.connected instanceof HTMLElement) {
             const [eventName] = DOM_EVENTS[name];
@@ -107,7 +104,8 @@ function createPointerEvents(store) {
           }
         });
         set(state => ({
-          events: { ...state.events,
+          events: {
+            ...state.events,
             connected: undefined
           }
         }));
@@ -158,13 +156,13 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   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)
-
-  if (block) throw block; // Throw exception outwards if anything within canvas throws
+  const [error, setError] = React__namespace.useState(false);
 
+  // Suspend this component if block is a promise (2nd run)
+  if (block) throw block;
+  // Throw exception outwards if anything within canvas throws
   if (error) throw error;
   const root = React__namespace.useRef(null);
-
   if (containerRect.width > 0 && containerRect.height > 0 && canvas) {
     if (!root.current) root.current = index.createRoot(canvas);
     root.current.configure({
@@ -185,8 +183,8 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
       onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
       onCreated: state => {
         // Connect to event source
-        state.events.connect == null ? void 0 : state.events.connect(eventSource ? index.isRef(eventSource) ? eventSource.current : eventSource : divRef.current); // Set up compute function
-
+        state.events.connect == null ? void 0 : state.events.connect(eventSource ? index.isRef(eventSource) ? eventSource.current : eventSource : divRef.current);
+        // Set up compute function
         if (eventPrefix) {
           state.setEvents({
             compute: (event, state) => {
@@ -196,9 +194,8 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
               state.raycaster.setFromCamera(state.pointer, state.camera);
             }
           });
-        } // Call onCreated callback
-
-
+        }
+        // Call onCreated callback
         onCreated == null ? void 0 : onCreated(state);
       }
     });
@@ -210,15 +207,15 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
       })
     }, children))));
   }
-
   index.useIsomorphicLayoutEffect(() => {
     setCanvas(canvasRef.current);
   }, []);
   React__namespace.useEffect(() => {
     if (canvas) return () => index.unmountComponentAtNode(canvas);
-  }, [canvas]); // When the event source is not this div, we need to set pointer-events to none
-  // Or else the canvas will block events from reaching the event source
+  }, [canvas]);
 
+  // When the event source is not this div, we need to set pointer-events to none
+  // Or else the canvas will block events from reaching the event source
   const pointerEvents = eventSource ? 'none' : 'auto';
   return /*#__PURE__*/React__namespace.createElement("div", _extends({
     ref: divRef,
@@ -243,11 +240,11 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
     }
   }, fallback)));
 });
+
 /**
  * A DOM canvas which accepts threejs elements as children.
  * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
  */
-
 const Canvas = /*#__PURE__*/React__namespace.forwardRef(function CanvasWrapper(props, ref) {
   return /*#__PURE__*/React__namespace.createElement(itsFine.FiberProvider, null, /*#__PURE__*/React__namespace.createElement(CanvasImpl, _extends({}, props, {
     ref: ref

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

@@ -1,5 +1,5 @@
-import { c as createEvents, e as extend, u as useMutableCallback, a as createRoot, i as isRef, E as ErrorBoundary, B as Block, b as useIsomorphicLayoutEffect, d as unmountComponentAtNode } from './index-27a1523b.esm.js';
-export { t as ReactThreeFiber, w as _roots, v as act, o as addAfterEffect, n as addEffect, p as addTail, m as advance, j as applyProps, f as context, c as createEvents, g as createPortal, a as createRoot, k as dispose, e as extend, q as flushGlobalEffects, s as getRootState, l as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, A as useFrame, C as useGraph, x as useInstanceHandle, D as useLoader, y as useStore, z as useThree } from './index-27a1523b.esm.js';
+import { c as createEvents, e as extend, u as useMutableCallback, a as createRoot, i as isRef, E as ErrorBoundary, B as Block, b as useIsomorphicLayoutEffect, d as unmountComponentAtNode } from './index-fb77d67d.esm.js';
+export { t as ReactThreeFiber, w as _roots, v as act, o as addAfterEffect, n as addEffect, p as addTail, m as advance, j as applyProps, f as context, c as createEvents, g as createPortal, a as createRoot, k as dispose, e as extend, q as flushGlobalEffects, s as getRootState, l as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, A as useFrame, C as useGraph, x as useInstanceHandle, D as useLoader, y as useStore, z as useThree } from './index-fb77d67d.esm.js';
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import * as THREE from 'three';
@@ -23,8 +23,8 @@ const DOM_EVENTS = {
   onPointerCancel: ['pointercancel', true],
   onLostPointerCapture: ['lostpointercapture', true]
 };
-/** Default R3F event manager for web */
 
+/** Default R3F event manager for web */
 function createPointerEvents(store) {
   const {
     handlePointer
@@ -32,28 +32,27 @@ function createPointerEvents(store) {
   return {
     priority: 1,
     enabled: true,
-
     compute(event, state, previous) {
       // https://github.com/pmndrs/react-three-fiber/pull/782
       // Events trigger outside of canvas when moved, use offsetX/Y by default and allow overrides
       state.pointer.set(event.offsetX / state.size.width * 2 - 1, -(event.offsetY / state.size.height) * 2 + 1);
       state.raycaster.setFromCamera(state.pointer, state.camera);
     },
-
     connected: undefined,
-    handlers: Object.keys(DOM_EVENTS).reduce((acc, key) => ({ ...acc,
+    handlers: Object.keys(DOM_EVENTS).reduce((acc, key) => ({
+      ...acc,
       [key]: handlePointer(key)
     }), {}),
     connect: target => {
       var _events$handlers;
-
       const {
         set,
         events
       } = store.getState();
       events.disconnect == null ? void 0 : events.disconnect();
       set(state => ({
-        events: { ...state.events,
+        events: {
+          ...state.events,
           connected: target
         }
       }));
@@ -69,10 +68,8 @@ function createPointerEvents(store) {
         set,
         events
       } = store.getState();
-
       if (events.connected) {
         var _events$handlers2;
-
         Object.entries((_events$handlers2 = events.handlers) != null ? _events$handlers2 : []).forEach(([name, event]) => {
           if (events && events.connected instanceof HTMLElement) {
             const [eventName] = DOM_EVENTS[name];
@@ -80,7 +77,8 @@ function createPointerEvents(store) {
           }
         });
         set(state => ({
-          events: { ...state.events,
+          events: {
+            ...state.events,
             connected: undefined
           }
         }));
@@ -131,13 +129,13 @@ const CanvasImpl = /*#__PURE__*/React.forwardRef(function Canvas({
   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)
-
-  if (block) throw block; // Throw exception outwards if anything within canvas throws
+  const [error, setError] = React.useState(false);
 
+  // Suspend this component if block is a promise (2nd run)
+  if (block) throw block;
+  // Throw exception outwards if anything within canvas throws
   if (error) throw error;
   const root = React.useRef(null);
-
   if (containerRect.width > 0 && containerRect.height > 0 && canvas) {
     if (!root.current) root.current = createRoot(canvas);
     root.current.configure({
@@ -158,8 +156,8 @@ const CanvasImpl = /*#__PURE__*/React.forwardRef(function Canvas({
       onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
       onCreated: state => {
         // Connect to event source
-        state.events.connect == null ? void 0 : state.events.connect(eventSource ? isRef(eventSource) ? eventSource.current : eventSource : divRef.current); // Set up compute function
-
+        state.events.connect == null ? void 0 : state.events.connect(eventSource ? isRef(eventSource) ? eventSource.current : eventSource : divRef.current);
+        // Set up compute function
         if (eventPrefix) {
           state.setEvents({
             compute: (event, state) => {
@@ -169,9 +167,8 @@ const CanvasImpl = /*#__PURE__*/React.forwardRef(function Canvas({
               state.raycaster.setFromCamera(state.pointer, state.camera);
             }
           });
-        } // Call onCreated callback
-
-
+        }
+        // Call onCreated callback
         onCreated == null ? void 0 : onCreated(state);
       }
     });
@@ -183,15 +180,15 @@ const CanvasImpl = /*#__PURE__*/React.forwardRef(function Canvas({
       })
     }, children))));
   }
-
   useIsomorphicLayoutEffect(() => {
     setCanvas(canvasRef.current);
   }, []);
   React.useEffect(() => {
     if (canvas) return () => unmountComponentAtNode(canvas);
-  }, [canvas]); // When the event source is not this div, we need to set pointer-events to none
-  // Or else the canvas will block events from reaching the event source
+  }, [canvas]);
 
+  // When the event source is not this div, we need to set pointer-events to none
+  // Or else the canvas will block events from reaching the event source
   const pointerEvents = eventSource ? 'none' : 'auto';
   return /*#__PURE__*/React.createElement("div", _extends({
     ref: divRef,
@@ -216,11 +213,11 @@ const CanvasImpl = /*#__PURE__*/React.forwardRef(function Canvas({
     }
   }, fallback)));
 });
+
 /**
  * A DOM canvas which accepts threejs elements as children.
  * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
  */
-
 const Canvas = /*#__PURE__*/React.forwardRef(function CanvasWrapper(props, ref) {
   return /*#__PURE__*/React.createElement(FiberProvider, null, /*#__PURE__*/React.createElement(CanvasImpl, _extends({}, props, {
     ref: ref

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-4ea38fa1.cjs.dev.js');
+var index = require('../../dist/index-bf8a2906.cjs.dev.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
@@ -60,36 +60,36 @@ const DOM_EVENTS = {
   [EVENTS.HOVEROUT]: 'onPointerOut',
   [EVENTS.PRESSMOVE]: 'onPointerMove'
 };
-/** Default R3F event manager for react-native */
 
+/** Default R3F event manager for react-native */
 function createTouchEvents(store) {
   const {
     handlePointer
   } = index.createEvents(store);
-
   const handleTouch = (event, name) => {
-    event.persist() // Apply offset
+    event.persist()
+
+    // Apply offset
     ;
     event.nativeEvent.offsetX = event.nativeEvent.locationX;
-    event.nativeEvent.offsetY = event.nativeEvent.locationY; // Emulate DOM event
+    event.nativeEvent.offsetY = event.nativeEvent.locationY;
 
+    // Emulate DOM event
     const callback = handlePointer(DOM_EVENTS[name]);
     return callback(event.nativeEvent);
   };
-
   return {
     priority: 1,
     enabled: true,
-
     compute(event, state, previous) {
       // https://github.com/pmndrs/react-three-fiber/pull/782
       // Events trigger outside of canvas when moved, use offsetX/Y by default and allow overrides
       state.pointer.set(event.offsetX / state.size.width * 2 - 1, -(event.offsetY / state.size.height) * 2 + 1);
       state.raycaster.setFromCamera(state.pointer, state.camera);
     },
-
     connected: undefined,
-    handlers: Object.values(EVENTS).reduce((acc, name) => ({ ...acc,
+    handlers: Object.values(EVENTS).reduce((acc, name) => ({
+      ...acc,
       [name]: event => handleTouch(event, name)
     }), {}),
     connect: () => {
@@ -100,7 +100,8 @@ function createTouchEvents(store) {
       events.disconnect == null ? void 0 : events.disconnect();
       const connected = new Pressability__default["default"](events.handlers);
       set(state => ({
-        events: { ...state.events,
+        events: {
+          ...state.events,
           connected
         }
       }));
@@ -112,11 +113,11 @@ function createTouchEvents(store) {
         set,
         events
       } = store.getState();
-
       if (events.connected) {
         events.connected.reset();
         set(state => ({
-          events: { ...state.events,
+          events: {
+            ...state.events,
             connected: undefined
           }
         }));
@@ -127,45 +128,39 @@ function createTouchEvents(store) {
 
 // Check if expo-asset is installed (available with expo modules)
 let expAsset;
-
 try {
   var _require;
-
   expAsset = (_require = require('expo-asset')) == null ? void 0 : _require.Asset;
 } catch (_) {}
+
 /**
  * Generates an asset based on input type.
  */
-
-
 function getAsset(input) {
   switch (typeof input) {
     case 'string':
       return expAsset.fromURI(input);
-
     case 'number':
       return expAsset.fromModule(input);
-
     default:
       throw new Error('R3F: Invalid asset! Must be a URI or module.');
   }
 }
-
 let injected = false;
 function polyfills() {
   if (!expAsset || injected) return;
-  injected = true; // Don't pre-process urls, let expo-asset generate an absolute URL
+  injected = true;
 
+  // Don't pre-process urls, let expo-asset generate an absolute URL
   const extractUrlBase = THREE__namespace.LoaderUtils.extractUrlBase.bind(THREE__namespace.LoaderUtils);
+  THREE__namespace.LoaderUtils.extractUrlBase = url => typeof url === 'string' ? extractUrlBase(url) : './';
 
-  THREE__namespace.LoaderUtils.extractUrlBase = url => typeof url === 'string' ? extractUrlBase(url) : './'; // There's no Image in native, so create a data texture instead
-
-
+  // There's no Image in native, so create a data texture instead
   const prevTextureLoad = THREE__namespace.TextureLoader.prototype.load;
-
   THREE__namespace.TextureLoader.prototype.load = function load(url, onLoad, onProgress, onError) {
-    const texture = new THREE__namespace.Texture(); // @ts-ignore
+    const texture = new THREE__namespace.Texture();
 
+    // @ts-ignore
     texture.isDataTexture = true;
     getAsset(url).downloadAsync().then(asset => {
       texture.image = {
@@ -179,11 +174,10 @@ function polyfills() {
       onLoad == null ? void 0 : onLoad(texture);
     }).catch(onError);
     return texture;
-  }; // Fetches assets via XMLHttpRequest
-
+  };
 
+  // Fetches assets via XMLHttpRequest
   const prevFileLoad = THREE__namespace.FileLoader.prototype.load;
-
   THREE__namespace.FileLoader.prototype.load = function (url, onLoad, onProgress, onError) {
     if (this.path) url = this.path + url;
     const request = new XMLHttpRequest();
@@ -214,18 +208,16 @@ function polyfills() {
       }, false);
       if (this.responseType) request.responseType = this.responseType;
       if (this.withCredentials) request.withCredentials = this.withCredentials;
-
       for (const header in this.requestHeader) {
         request.setRequestHeader(header, this.requestHeader[header]);
       }
-
       request.send(null);
       this.manager.itemStart(url);
     });
     return request;
-  }; // Cleanup function
-
+  };
 
+  // Cleanup function
   return () => {
     THREE__namespace.LoaderUtils.extractUrlBase = extractUrlBase;
     THREE__namespace.TextureLoader.prototype.load = prevTextureLoad;
@@ -276,14 +268,16 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(({
   React__namespace.useImperativeHandle(forwardedRef, () => viewRef.current);
   const handlePointerMissed = index.useMutableCallback(onPointerMissed);
   const [block, setBlock] = React__namespace.useState(false);
-  const [error, setError] = React__namespace.useState(undefined); // Suspend this component if block is a promise (2nd run)
-
-  if (block) throw block; // Throw exception outwards if anything within canvas throws
+  const [error, setError] = React__namespace.useState(undefined);
 
+  // Suspend this component if block is a promise (2nd run)
+  if (block) throw block;
+  // Throw exception outwards if anything within canvas throws
   if (error) throw error;
   const viewRef = React__namespace.useRef(null);
-  const root = React__namespace.useRef(null); // Inject and cleanup RN polyfills if able
+  const root = React__namespace.useRef(null);
 
+  // Inject and cleanup RN polyfills if able
   React__namespace.useLayoutEffect(() => polyfills(), []);
   const onLayout = React__namespace.useCallback(e => {
     const {
@@ -298,9 +292,10 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(({
       top: y,
       left: x
     });
-  }, []); // Called on context create or swap
-  // https://github.com/pmndrs/react-three-fiber/pull/2297
+  }, []);
 
+  // Called on context create or swap
+  // https://github.com/pmndrs/react-three-fiber/pull/2297
   const onContextCreate = React__namespace.useCallback(context => {
     const canvasShim = {
       width: context.drawingBufferWidth,
@@ -314,7 +309,6 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(({
     root.current = index.createRoot(canvasShim);
     setCanvas(canvasShim);
   }, []);
-
   if (root.current && width > 0 && height > 0) {
     root.current.configure({
       gl,
@@ -343,16 +337,15 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(({
       onCreated: state => {
         // Bind events after creation
         const handlers = state.events.connect == null ? void 0 : state.events.connect(viewRef.current);
-        setBind(handlers); // Bind render to RN bridge
+        setBind(handlers);
 
+        // Bind render to RN bridge
         const context = state.gl.getContext();
         const renderFrame = state.gl.render.bind(state.gl);
-
         state.gl.render = (scene, camera) => {
           renderFrame(scene, camera);
           context.endFrameEXP();
         };
-
         return onCreated == null ? void 0 : onCreated(state);
       }
     });
@@ -364,7 +357,6 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(({
       })
     }, children))));
   }
-
   React__namespace.useEffect(() => {
     if (canvas) {
       return () => index.unmountComponentAtNode(canvas);
@@ -382,11 +374,11 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(({
     style: reactNative.StyleSheet.absoluteFill
   }));
 });
+
 /**
  * A native canvas which accepts threejs elements as children.
  * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
  */
-
 const Canvas = /*#__PURE__*/React__namespace.forwardRef(function CanvasWrapper(props, ref) {
   return /*#__PURE__*/React__namespace.createElement(itsFine.FiberProvider, null, /*#__PURE__*/React__namespace.createElement(CanvasImpl, _extends({}, props, {
     ref: ref