@react-three/fiber 8.10.0 → 8.10.2

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-d957aeb6.cjs.prod.js');
+var index = require('../../dist/index-661b9d11.cjs.prod.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

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-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 '../../dist/index-27a1523b.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-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 '../../dist/index-fb77d67d.esm.js';
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import * as THREE from 'three';
@@ -33,36 +33,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
   } = 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: () => {
@@ -73,7 +73,8 @@ function createTouchEvents(store) {
       events.disconnect == null ? void 0 : events.disconnect();
       const connected = new Pressability(events.handlers);
       set(state => ({
-        events: { ...state.events,
+        events: {
+          ...state.events,
           connected
         }
       }));
@@ -85,11 +86,11 @@ function createTouchEvents(store) {
         set,
         events
       } = store.getState();
-
       if (events.connected) {
         events.connected.reset();
         set(state => ({
-          events: { ...state.events,
+          events: {
+            ...state.events,
             connected: undefined
           }
         }));
@@ -100,45 +101,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.LoaderUtils.extractUrlBase.bind(THREE.LoaderUtils);
+  THREE.LoaderUtils.extractUrlBase = url => typeof url === 'string' ? extractUrlBase(url) : './';
 
-  THREE.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.TextureLoader.prototype.load;
-
   THREE.TextureLoader.prototype.load = function load(url, onLoad, onProgress, onError) {
-    const texture = new THREE.Texture(); // @ts-ignore
+    const texture = new THREE.Texture();
 
+    // @ts-ignore
     texture.isDataTexture = true;
     getAsset(url).downloadAsync().then(asset => {
       texture.image = {
@@ -152,11 +147,10 @@ function polyfills() {
       onLoad == null ? void 0 : onLoad(texture);
     }).catch(onError);
     return texture;
-  }; // Fetches assets via XMLHttpRequest
-
+  };
 
+  // Fetches assets via XMLHttpRequest
   const prevFileLoad = THREE.FileLoader.prototype.load;
-
   THREE.FileLoader.prototype.load = function (url, onLoad, onProgress, onError) {
     if (this.path) url = this.path + url;
     const request = new XMLHttpRequest();
@@ -187,18 +181,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.LoaderUtils.extractUrlBase = extractUrlBase;
     THREE.TextureLoader.prototype.load = prevTextureLoad;
@@ -249,14 +241,16 @@ const CanvasImpl = /*#__PURE__*/React.forwardRef(({
   React.useImperativeHandle(forwardedRef, () => viewRef.current);
   const handlePointerMissed = useMutableCallback(onPointerMissed);
   const [block, setBlock] = React.useState(false);
-  const [error, setError] = React.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.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.useRef(null);
-  const root = React.useRef(null); // Inject and cleanup RN polyfills if able
+  const root = React.useRef(null);
 
+  // Inject and cleanup RN polyfills if able
   React.useLayoutEffect(() => polyfills(), []);
   const onLayout = React.useCallback(e => {
     const {
@@ -271,9 +265,10 @@ const CanvasImpl = /*#__PURE__*/React.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.useCallback(context => {
     const canvasShim = {
       width: context.drawingBufferWidth,
@@ -287,7 +282,6 @@ const CanvasImpl = /*#__PURE__*/React.forwardRef(({
     root.current = createRoot(canvasShim);
     setCanvas(canvasShim);
   }, []);
-
   if (root.current && width > 0 && height > 0) {
     root.current.configure({
       gl,
@@ -316,16 +310,15 @@ const CanvasImpl = /*#__PURE__*/React.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);
       }
     });
@@ -337,7 +330,6 @@ const CanvasImpl = /*#__PURE__*/React.forwardRef(({
       })
     }, children))));
   }
-
   React.useEffect(() => {
     if (canvas) {
       return () => unmountComponentAtNode(canvas);
@@ -355,11 +347,11 @@ const CanvasImpl = /*#__PURE__*/React.forwardRef(({
     style: 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.forwardRef(function CanvasWrapper(props, ref) {
   return /*#__PURE__*/React.createElement(FiberProvider, null, /*#__PURE__*/React.createElement(CanvasImpl, _extends({}, props, {
     ref: ref

package/package.json

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