@react-three/fiber 8.0.15 → 8.0.18

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

@@ -1,10 +1,8 @@
-import * as THREE from 'three';
-import { Asset } from 'expo-asset';
-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-208291a3.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-208291a3.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-acedf326.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-acedf326.esm.js';
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
-import mergeRefs from 'react-merge-refs';
+import * as THREE from 'three';
 import { PixelRatio, View, StyleSheet } from 'react-native';
 import { GLView } from 'expo-gl';
 import Pressability from 'react-native/Libraries/Pressability/Pressability';
@@ -97,6 +95,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.LoaderUtils.extractUrlBase.bind(THREE.LoaderUtils);
+
+  THREE.LoaderUtils.extractUrlBase = url => typeof url === 'string' ? extractUrlBase(url) : './'; // 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
+
+    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.FileLoader.prototype.load;
+
+  THREE.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.LoaderUtils.extractUrlBase = extractUrlBase;
+    THREE.TextureLoader.prototype.load = prevTextureLoad;
+    THREE.FileLoader.prototype.load = prevFileLoad;
+  };
+}
+
 /**
  * A native canvas which accepts threejs elements as children.
  * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
@@ -132,6 +238,7 @@ const Canvas = /*#__PURE__*/React.forwardRef(({
   });
   const [canvas, setCanvas] = React.useState(null);
   const [bind, setBind] = React.useState();
+  React.useImperativeHandle(forwardedRef, () => viewRef.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)
@@ -140,7 +247,9 @@ const Canvas = /*#__PURE__*/React.forwardRef(({
 
   if (error) throw error;
   const viewRef = React.useRef(null);
-  const root = React.useRef(null);
+  const root = React.useRef(null); // Inject and cleanup RN polyfills if able
+
+  React.useLayoutEffect(() => polyfills(), []);
   const onLayout = React.useCallback(e => {
     const {
       width,
@@ -219,7 +328,7 @@ const Canvas = /*#__PURE__*/React.forwardRef(({
     }
   }, [canvas]);
   return /*#__PURE__*/React.createElement(View, _extends({}, props, {
-    ref: mergeRefs([viewRef, forwardedRef]),
+    ref: viewRef,
     onLayout: onLayout,
     style: {
       flex: 1,
@@ -231,87 +340,4 @@ const Canvas = /*#__PURE__*/React.forwardRef(({
   }));
 });
 
-/**
- * Generates an asset based on input type.
- */
-
-const getAsset = input => {
-  if (input instanceof Asset) return input;
-
-  switch (typeof input) {
-    case 'string':
-      return Asset.fromURI(input);
-
-    case 'number':
-      return 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.LoaderUtils.extractUrlBase.bind(THREE.LoaderUtils);
-
-THREE.LoaderUtils.extractUrlBase = url => typeof url === 'string' ? extractUrlBase(url) : './'; // There's no Image in native, so create a data texture instead
-
-
-THREE.TextureLoader.prototype.load = function load(url, onLoad, onProgress, onError) {
-  const texture = new THREE.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.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;
-};
-
 export { Canvas, createTouchEvents as events };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/fiber",
-  "version": "8.0.15",
+  "version": "8.0.18",
   "description": "A React renderer for Threejs",
   "keywords": [
     "react",
@@ -43,8 +43,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.17.8",
-    "@types/react-reconciler": "^0.26.6",
-    "react-merge-refs": "^1.1.0",
+    "@types/react-reconciler": "^0.26.7",
     "react-reconciler": "^0.27.0",
     "react-use-measure": "^2.1.1",
     "scheduler": "^0.21.0",