@react-three/fiber 8.0.15 → 8.0.18

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

@@ -2,12 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var THREE = require('three');
-var expoAsset = require('expo-asset');
-var index = require('../../dist/index-606d3385.cjs.dev.js');
+var index = require('../../dist/index-c937c162.cjs.dev.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
-var mergeRefs = require('react-merge-refs');
+var THREE = require('three');
 var reactNative = require('react-native');
 var expoGl = require('expo-gl');
 var Pressability = require('react-native/Libraries/Pressability/Pressability');
@@ -37,9 +35,8 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var mergeRefs__default = /*#__PURE__*/_interopDefault(mergeRefs);
+var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
 var Pressability__default = /*#__PURE__*/_interopDefault(Pressability);
 
 const EVENTS = {
@@ -125,6 +122,114 @@ 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 '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
+
+  const extractUrlBase = THREE__namespace.LoaderUtils.extractUrlBase.bind(THREE__namespace.LoaderUtils);
+
+  THREE__namespace.LoaderUtils.extractUrlBase = url => typeof url === 'string' ? extractUrlBase(url) : './'; // 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
+
+    texture.isDataTexture = true;
+    getAsset(url).downloadAsync().then(asset => {
+      texture.image = {
+        data: asset,
+        width: asset.width,
+        height: asset.height
+      };
+      texture.flipY = true;
+      texture.unpackAlignment = 1;
+      texture.needsUpdate = true;
+      onLoad == null ? void 0 : onLoad(texture);
+    }).catch(onError);
+    return texture;
+  }; // 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();
+    getAsset(url).downloadAsync().then(asset => {
+      request.open('GET', asset.uri, true);
+      request.addEventListener('load', event => {
+        if (request.status === 200) {
+          onLoad == null ? void 0 : onLoad(request.response);
+          this.manager.itemEnd(url);
+        } else {
+          onError == null ? void 0 : onError(event);
+          this.manager.itemError(url);
+          this.manager.itemEnd(url);
+        }
+      }, false);
+      request.addEventListener('progress', event => {
+        onProgress == null ? void 0 : onProgress(event);
+      }, false);
+      request.addEventListener('error', event => {
+        onError == null ? void 0 : onError(event);
+        this.manager.itemError(url);
+        this.manager.itemEnd(url);
+      }, false);
+      request.addEventListener('abort', event => {
+        onError == null ? void 0 : onError(event);
+        this.manager.itemError(url);
+        this.manager.itemEnd(url);
+      }, 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
+
+
+  return () => {
+    THREE__namespace.LoaderUtils.extractUrlBase = extractUrlBase;
+    THREE__namespace.TextureLoader.prototype.load = prevTextureLoad;
+    THREE__namespace.FileLoader.prototype.load = prevFileLoad;
+  };
+}
+
 /**
  * A native canvas which accepts threejs elements as children.
  * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
@@ -160,6 +265,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
   });
   const [canvas, setCanvas] = React__namespace.useState(null);
   const [bind, setBind] = React__namespace.useState();
+  React__namespace.useImperativeHandle(forwardedRef, () => viewRef.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)
@@ -168,7 +274,9 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
 
   if (error) throw error;
   const viewRef = React__namespace.useRef(null);
-  const root = React__namespace.useRef(null);
+  const root = React__namespace.useRef(null); // Inject and cleanup RN polyfills if able
+
+  React__namespace.useLayoutEffect(() => polyfills(), []);
   const onLayout = React__namespace.useCallback(e => {
     const {
       width,
@@ -247,7 +355,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
     }
   }, [canvas]);
   return /*#__PURE__*/React__namespace.createElement(reactNative.View, _extends({}, props, {
-    ref: mergeRefs__default["default"]([viewRef, forwardedRef]),
+    ref: viewRef,
     onLayout: onLayout,
     style: {
       flex: 1,
@@ -259,89 +367,6 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
   }));
 });
 
-/**
- * Generates an asset based on input type.
- */
-
-const getAsset = input => {
-  if (input instanceof expoAsset.Asset) return input;
-
-  switch (typeof input) {
-    case 'string':
-      return expoAsset.Asset.fromURI(input);
-
-    case 'number':
-      return expoAsset.Asset.fromModule(input);
-
-    default:
-      throw 'Invalid asset! Must be a URI or module.';
-  }
-}; // 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) : './'; // There's no Image in native, so create a data texture instead
-
-
-THREE__namespace.TextureLoader.prototype.load = function load(url, onLoad, onProgress, onError) {
-  const texture = new THREE__namespace.Texture(); // @ts-ignore
-
-  texture.isDataTexture = true;
-  getAsset(url).downloadAsync().then(asset => {
-    texture.image = {
-      data: asset,
-      width: asset.width,
-      height: asset.height
-    };
-    texture.needsUpdate = true;
-    onLoad == null ? void 0 : onLoad(texture);
-  }).catch(onError);
-  return texture;
-}; // Fetches assets via XMLHttpRequest
-
-
-THREE__namespace.FileLoader.prototype.load = function (url, onLoad, onProgress, onError) {
-  if (this.path) url = this.path + url;
-  const request = new XMLHttpRequest();
-  getAsset(url).downloadAsync().then(asset => {
-    request.open('GET', asset.uri, true);
-    request.addEventListener('load', event => {
-      if (request.status === 200) {
-        onLoad == null ? void 0 : onLoad(request.response);
-        this.manager.itemEnd(url);
-      } else {
-        onError == null ? void 0 : onError(event);
-        this.manager.itemError(url);
-        this.manager.itemEnd(url);
-      }
-    }, false);
-    request.addEventListener('progress', event => {
-      onProgress == null ? void 0 : onProgress(event);
-    }, false);
-    request.addEventListener('error', event => {
-      onError == null ? void 0 : onError(event);
-      this.manager.itemError(url);
-      this.manager.itemEnd(url);
-    }, false);
-    request.addEventListener('abort', event => {
-      onError == null ? void 0 : onError(event);
-      this.manager.itemError(url);
-      this.manager.itemEnd(url);
-    }, 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;
-};
-
 exports.ReactThreeFiber = index.threeTypes;
 exports._roots = index.roots;
 exports.act = index.act;

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

@@ -2,12 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var THREE = require('three');
-var expoAsset = require('expo-asset');
-var index = require('../../dist/index-05d06e15.cjs.prod.js');
+var index = require('../../dist/index-e2e71da1.cjs.prod.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
-var mergeRefs = require('react-merge-refs');
+var THREE = require('three');
 var reactNative = require('react-native');
 var expoGl = require('expo-gl');
 var Pressability = require('react-native/Libraries/Pressability/Pressability');
@@ -37,9 +35,8 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var mergeRefs__default = /*#__PURE__*/_interopDefault(mergeRefs);
+var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
 var Pressability__default = /*#__PURE__*/_interopDefault(Pressability);
 
 const EVENTS = {
@@ -125,6 +122,114 @@ 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 '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
+
+  const extractUrlBase = THREE__namespace.LoaderUtils.extractUrlBase.bind(THREE__namespace.LoaderUtils);
+
+  THREE__namespace.LoaderUtils.extractUrlBase = url => typeof url === 'string' ? extractUrlBase(url) : './'; // 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
+
+    texture.isDataTexture = true;
+    getAsset(url).downloadAsync().then(asset => {
+      texture.image = {
+        data: asset,
+        width: asset.width,
+        height: asset.height
+      };
+      texture.flipY = true;
+      texture.unpackAlignment = 1;
+      texture.needsUpdate = true;
+      onLoad == null ? void 0 : onLoad(texture);
+    }).catch(onError);
+    return texture;
+  }; // 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();
+    getAsset(url).downloadAsync().then(asset => {
+      request.open('GET', asset.uri, true);
+      request.addEventListener('load', event => {
+        if (request.status === 200) {
+          onLoad == null ? void 0 : onLoad(request.response);
+          this.manager.itemEnd(url);
+        } else {
+          onError == null ? void 0 : onError(event);
+          this.manager.itemError(url);
+          this.manager.itemEnd(url);
+        }
+      }, false);
+      request.addEventListener('progress', event => {
+        onProgress == null ? void 0 : onProgress(event);
+      }, false);
+      request.addEventListener('error', event => {
+        onError == null ? void 0 : onError(event);
+        this.manager.itemError(url);
+        this.manager.itemEnd(url);
+      }, false);
+      request.addEventListener('abort', event => {
+        onError == null ? void 0 : onError(event);
+        this.manager.itemError(url);
+        this.manager.itemEnd(url);
+      }, 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
+
+
+  return () => {
+    THREE__namespace.LoaderUtils.extractUrlBase = extractUrlBase;
+    THREE__namespace.TextureLoader.prototype.load = prevTextureLoad;
+    THREE__namespace.FileLoader.prototype.load = prevFileLoad;
+  };
+}
+
 /**
  * A native canvas which accepts threejs elements as children.
  * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
@@ -160,6 +265,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
   });
   const [canvas, setCanvas] = React__namespace.useState(null);
   const [bind, setBind] = React__namespace.useState();
+  React__namespace.useImperativeHandle(forwardedRef, () => viewRef.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)
@@ -168,7 +274,9 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
 
   if (error) throw error;
   const viewRef = React__namespace.useRef(null);
-  const root = React__namespace.useRef(null);
+  const root = React__namespace.useRef(null); // Inject and cleanup RN polyfills if able
+
+  React__namespace.useLayoutEffect(() => polyfills(), []);
   const onLayout = React__namespace.useCallback(e => {
     const {
       width,
@@ -247,7 +355,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
     }
   }, [canvas]);
   return /*#__PURE__*/React__namespace.createElement(reactNative.View, _extends({}, props, {
-    ref: mergeRefs__default["default"]([viewRef, forwardedRef]),
+    ref: viewRef,
     onLayout: onLayout,
     style: {
       flex: 1,
@@ -259,89 +367,6 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
   }));
 });
 
-/**
- * Generates an asset based on input type.
- */
-
-const getAsset = input => {
-  if (input instanceof expoAsset.Asset) return input;
-
-  switch (typeof input) {
-    case 'string':
-      return expoAsset.Asset.fromURI(input);
-
-    case 'number':
-      return expoAsset.Asset.fromModule(input);
-
-    default:
-      throw 'Invalid asset! Must be a URI or module.';
-  }
-}; // 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) : './'; // There's no Image in native, so create a data texture instead
-
-
-THREE__namespace.TextureLoader.prototype.load = function load(url, onLoad, onProgress, onError) {
-  const texture = new THREE__namespace.Texture(); // @ts-ignore
-
-  texture.isDataTexture = true;
-  getAsset(url).downloadAsync().then(asset => {
-    texture.image = {
-      data: asset,
-      width: asset.width,
-      height: asset.height
-    };
-    texture.needsUpdate = true;
-    onLoad == null ? void 0 : onLoad(texture);
-  }).catch(onError);
-  return texture;
-}; // Fetches assets via XMLHttpRequest
-
-
-THREE__namespace.FileLoader.prototype.load = function (url, onLoad, onProgress, onError) {
-  if (this.path) url = this.path + url;
-  const request = new XMLHttpRequest();
-  getAsset(url).downloadAsync().then(asset => {
-    request.open('GET', asset.uri, true);
-    request.addEventListener('load', event => {
-      if (request.status === 200) {
-        onLoad == null ? void 0 : onLoad(request.response);
-        this.manager.itemEnd(url);
-      } else {
-        onError == null ? void 0 : onError(event);
-        this.manager.itemError(url);
-        this.manager.itemEnd(url);
-      }
-    }, false);
-    request.addEventListener('progress', event => {
-      onProgress == null ? void 0 : onProgress(event);
-    }, false);
-    request.addEventListener('error', event => {
-      onError == null ? void 0 : onError(event);
-      this.manager.itemError(url);
-      this.manager.itemEnd(url);
-    }, false);
-    request.addEventListener('abort', event => {
-      onError == null ? void 0 : onError(event);
-      this.manager.itemError(url);
-      this.manager.itemEnd(url);
-    }, 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;
-};
-
 exports.ReactThreeFiber = index.threeTypes;
 exports._roots = index.roots;
 exports.act = index.act;