@react-three/fiber 8.14.0 → 8.14.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @react-three/fiber
 
+## 8.14.2
+
+### Patch Changes
+
+- 33e8baef: fix: native perf, loader types
+
+## 8.14.1
+
+### Patch Changes
+
+- c99907bf: fix(native): prefer local uri for fs
+
 ## 8.14.0
 
 ### Minor Changes

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

@@ -6,7 +6,7 @@ import { RootState, RenderCallback } from './store';
 import { ObjectMap } from './utils';
 import { LocalState } from './renderer';
 export interface Loader<T> extends THREE.Loader {
-    load(url: string, onLoad?: (result: T) => void, onProgress?: (event: ProgressEvent) => void, onError?: (event: ErrorEvent) => void): unknown;
+    load(url: string, onLoad?: (result: T) => void, onProgress?: (event: ProgressEvent) => void, onError?: (event: unknown) => void): unknown;
     loadAsync(url: string, onProgress?: (event: ProgressEvent) => void): Promise<T>;
 }
 export declare type LoaderProto<T> = new (...args: any) => Loader<T extends unknown ? any : T>;

package/dist/{index-be1f7f7b.cjs.dev.js → index-2f978f7b.cjs.dev.js}

@@ -1672,7 +1672,7 @@ function loadingFn(extensions, onProgress) {
     return Promise.all(input.map(input => new Promise((res, reject) => loader.load(input, data => {
       if (data.scene) Object.assign(data, buildGraph(data.scene));
       res(data);
-    }, onProgress, error => reject(new Error(`Could not load ${input}: ${error.message}`)))))).finally(() => loader.dispose == null ? void 0 : loader.dispose());
+    }, onProgress, error => reject(new Error(`Could not load ${input}: ${error == null ? void 0 : error.message}`)))))).finally(() => loader.dispose == null ? void 0 : loader.dispose());
   };
 }
 

package/dist/{index-dad7ba86.cjs.prod.js → index-a401adf5.cjs.prod.js}

@@ -1672,7 +1672,7 @@ function loadingFn(extensions, onProgress) {
     return Promise.all(input.map(input => new Promise((res, reject) => loader.load(input, data => {
       if (data.scene) Object.assign(data, buildGraph(data.scene));
       res(data);
-    }, onProgress, error => reject(new Error(`Could not load ${input}: ${error.message}`)))))).finally(() => loader.dispose == null ? void 0 : loader.dispose());
+    }, onProgress, error => reject(new Error(`Could not load ${input}: ${error == null ? void 0 : error.message}`)))))).finally(() => loader.dispose == null ? void 0 : loader.dispose());
   };
 }
 

package/dist/{index-6662eaf2.esm.js → index-dc6125bc.esm.js}

@@ -1645,7 +1645,7 @@ function loadingFn(extensions, onProgress) {
     return Promise.all(input.map(input => new Promise((res, reject) => loader.load(input, data => {
       if (data.scene) Object.assign(data, buildGraph(data.scene));
       res(data);
-    }, onProgress, error => reject(new Error(`Could not load ${input}: ${error.message}`)))))).finally(() => loader.dispose == null ? void 0 : loader.dispose());
+    }, onProgress, error => reject(new Error(`Could not load ${input}: ${error == null ? void 0 : error.message}`)))))).finally(() => loader.dispose == null ? void 0 : loader.dispose());
   };
 }
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-be1f7f7b.cjs.dev.js');
+var index = require('./index-2f978f7b.cjs.dev.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-dad7ba86.cjs.prod.js');
+var index = require('./index-a401adf5.cjs.prod.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');

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

@@ -1,5 +1,5 @@
-import { c as createEvents, e as extend, u as useMutableCallback, a as useIsomorphicLayoutEffect, b as createRoot, i as isRef, E as ErrorBoundary, B as Block, d as unmountComponentAtNode } from './index-6662eaf2.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, b 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-6662eaf2.esm.js';
+import { c as createEvents, e as extend, u as useMutableCallback, a as useIsomorphicLayoutEffect, b as createRoot, i as isRef, E as ErrorBoundary, B as Block, d as unmountComponentAtNode } from './index-dc6125bc.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, b 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-dc6125bc.esm.js';
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import * as THREE from 'three';

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-be1f7f7b.cjs.dev.js');
+var index = require('../../dist/index-2f978f7b.cjs.dev.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
@@ -265,6 +265,7 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(({
       ...style
     }
   }, bind), width > 0 && /*#__PURE__*/React__namespace.createElement(expoGl.GLView, {
+    msaaSamples: 0,
     onContextCreate: onContextCreate,
     style: reactNative.StyleSheet.absoluteFill
   }));
@@ -305,10 +306,8 @@ function polyfills() {
   }
   async function getAsset(input) {
     if (typeof input === 'string') {
-      // Point to storage if preceded with fs path
-      if (input.startsWith('file:')) return {
-        localUri: input
-      };
+      // Don't process storage or data uris
+      if (input.startsWith('file:') || input.startsWith('data:')) return input;
 
       // Unpack Blobs from react-native BlobManager
       if (input.startsWith('blob:')) {
@@ -326,40 +325,27 @@ function polyfills() {
           reader.onerror = rej;
           reader.readAsText(blob);
         });
-        input = `data:${blob.type};base64,${data}`;
-      }
-
-      // Create safe URI for JSI
-      if (input.startsWith('data:')) {
-        const [header, data] = input.split(',');
-        const [, type] = header.split('/');
-        const localUri = fs__namespace.cacheDirectory + uuidv4() + `.${type}`;
-        await fs__namespace.writeAsStringAsync(localUri, data, {
-          encoding: fs__namespace.EncodingType.Base64
-        });
-        return {
-          localUri
-        };
+        return `data:${blob.type};base64,${data}`;
       }
     }
 
     // Download bundler module or external URL
-    const asset = expoAsset.Asset.fromModule(input);
+    const asset = await expoAsset.Asset.fromModule(input).downloadAsync();
+    let uri = asset.localUri || asset.uri;
 
     // Unpack assets in Android Release Mode
-    if (!asset.uri.includes(':')) {
-      const localUri = `${fs__namespace.cacheDirectory}ExponentAsset-${asset.hash}.${asset.type}`;
-      await fs__namespace.copyAsync({
-        from: asset.uri,
-        to: localUri
+    if (!uri.includes(':')) {
+      const file = `${fs__namespace.cacheDirectory}ExponentAsset-${asset.hash}.${asset.type}`;
+      const stats = await fs__namespace.getInfoAsync(file, {
+        size: false
       });
-      return {
-        localUri
-      };
+      if (!stats.exists) await fs__namespace.copyAsync({
+        from: uri,
+        to: file
+      });
+      uri = file;
     }
-
-    // Otherwise, resolve from registry
-    return asset.downloadAsync();
+    return uri;
   }
 
   // Don't pre-process urls, let expo-asset generate an absolute URL
@@ -370,25 +356,29 @@ function polyfills() {
   THREE__namespace.TextureLoader.prototype.load = function load(url, onLoad, onProgress, onError) {
     if (this.path) url = this.path + url;
     const texture = new THREE__namespace.Texture();
-    getAsset(url).then(async asset => {
-      const uri = asset.localUri || asset.uri;
-      if (!asset.width || !asset.height) {
-        const {
-          width,
-          height
-        } = await new Promise((res, rej) => reactNative.Image.getSize(uri, (width, height) => res({
-          width,
-          height
-        }), rej));
-        asset.width = width;
-        asset.height = height;
+    getAsset(url).then(async uri => {
+      // Create safe URI for JSI
+      if (uri.startsWith('data:')) {
+        const [header, data] = uri.split(',');
+        const [, type] = header.split('/');
+        uri = fs__namespace.cacheDirectory + uuidv4() + `.${type}`;
+        await fs__namespace.writeAsStringAsync(uri, data, {
+          encoding: fs__namespace.EncodingType.Base64
+        });
       }
+      const {
+        width,
+        height
+      } = await new Promise((res, rej) => reactNative.Image.getSize(uri, (width, height) => res({
+        width,
+        height
+      }), rej));
       texture.image = {
         data: {
           localUri: uri
         },
-        width: asset.width,
-        height: asset.height
+        width,
+        height
       };
       texture.flipY = true;
       texture.unpackAlignment = 1;
@@ -406,12 +396,10 @@ function polyfills() {
   THREE__namespace.FileLoader.prototype.load = function load(url, onLoad, onProgress, onError) {
     if (this.path) url = this.path + url;
     const request = new XMLHttpRequest();
-    getAsset(url).then(async asset => {
-      let uri = asset.localUri || asset.uri;
-
+    getAsset(url).then(async uri => {
       // Make FS paths web-safe
-      if (asset.uri.startsWith('file://')) {
-        const data = await fs__namespace.readAsStringAsync(asset.uri, {
+      if (uri.startsWith('file://')) {
+        const data = await fs__namespace.readAsStringAsync(uri, {
           encoding: fs__namespace.EncodingType.Base64
         });
         uri = `data:application/octet-stream;base64,${data}`;

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-dad7ba86.cjs.prod.js');
+var index = require('../../dist/index-a401adf5.cjs.prod.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
@@ -265,6 +265,7 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(({
       ...style
     }
   }, bind), width > 0 && /*#__PURE__*/React__namespace.createElement(expoGl.GLView, {
+    msaaSamples: 0,
     onContextCreate: onContextCreate,
     style: reactNative.StyleSheet.absoluteFill
   }));
@@ -305,10 +306,8 @@ function polyfills() {
   }
   async function getAsset(input) {
     if (typeof input === 'string') {
-      // Point to storage if preceded with fs path
-      if (input.startsWith('file:')) return {
-        localUri: input
-      };
+      // Don't process storage or data uris
+      if (input.startsWith('file:') || input.startsWith('data:')) return input;
 
       // Unpack Blobs from react-native BlobManager
       if (input.startsWith('blob:')) {
@@ -326,40 +325,27 @@ function polyfills() {
           reader.onerror = rej;
           reader.readAsText(blob);
         });
-        input = `data:${blob.type};base64,${data}`;
-      }
-
-      // Create safe URI for JSI
-      if (input.startsWith('data:')) {
-        const [header, data] = input.split(',');
-        const [, type] = header.split('/');
-        const localUri = fs__namespace.cacheDirectory + uuidv4() + `.${type}`;
-        await fs__namespace.writeAsStringAsync(localUri, data, {
-          encoding: fs__namespace.EncodingType.Base64
-        });
-        return {
-          localUri
-        };
+        return `data:${blob.type};base64,${data}`;
       }
     }
 
     // Download bundler module or external URL
-    const asset = expoAsset.Asset.fromModule(input);
+    const asset = await expoAsset.Asset.fromModule(input).downloadAsync();
+    let uri = asset.localUri || asset.uri;
 
     // Unpack assets in Android Release Mode
-    if (!asset.uri.includes(':')) {
-      const localUri = `${fs__namespace.cacheDirectory}ExponentAsset-${asset.hash}.${asset.type}`;
-      await fs__namespace.copyAsync({
-        from: asset.uri,
-        to: localUri
+    if (!uri.includes(':')) {
+      const file = `${fs__namespace.cacheDirectory}ExponentAsset-${asset.hash}.${asset.type}`;
+      const stats = await fs__namespace.getInfoAsync(file, {
+        size: false
       });
-      return {
-        localUri
-      };
+      if (!stats.exists) await fs__namespace.copyAsync({
+        from: uri,
+        to: file
+      });
+      uri = file;
     }
-
-    // Otherwise, resolve from registry
-    return asset.downloadAsync();
+    return uri;
   }
 
   // Don't pre-process urls, let expo-asset generate an absolute URL
@@ -370,25 +356,29 @@ function polyfills() {
   THREE__namespace.TextureLoader.prototype.load = function load(url, onLoad, onProgress, onError) {
     if (this.path) url = this.path + url;
     const texture = new THREE__namespace.Texture();
-    getAsset(url).then(async asset => {
-      const uri = asset.localUri || asset.uri;
-      if (!asset.width || !asset.height) {
-        const {
-          width,
-          height
-        } = await new Promise((res, rej) => reactNative.Image.getSize(uri, (width, height) => res({
-          width,
-          height
-        }), rej));
-        asset.width = width;
-        asset.height = height;
+    getAsset(url).then(async uri => {
+      // Create safe URI for JSI
+      if (uri.startsWith('data:')) {
+        const [header, data] = uri.split(',');
+        const [, type] = header.split('/');
+        uri = fs__namespace.cacheDirectory + uuidv4() + `.${type}`;
+        await fs__namespace.writeAsStringAsync(uri, data, {
+          encoding: fs__namespace.EncodingType.Base64
+        });
       }
+      const {
+        width,
+        height
+      } = await new Promise((res, rej) => reactNative.Image.getSize(uri, (width, height) => res({
+        width,
+        height
+      }), rej));
       texture.image = {
         data: {
           localUri: uri
         },
-        width: asset.width,
-        height: asset.height
+        width,
+        height
       };
       texture.flipY = true;
       texture.unpackAlignment = 1;
@@ -406,12 +396,10 @@ function polyfills() {
   THREE__namespace.FileLoader.prototype.load = function load(url, onLoad, onProgress, onError) {
     if (this.path) url = this.path + url;
     const request = new XMLHttpRequest();
-    getAsset(url).then(async asset => {
-      let uri = asset.localUri || asset.uri;
-
+    getAsset(url).then(async uri => {
       // Make FS paths web-safe
-      if (asset.uri.startsWith('file://')) {
-        const data = await fs__namespace.readAsStringAsync(asset.uri, {
+      if (uri.startsWith('file://')) {
+        const data = await fs__namespace.readAsStringAsync(uri, {
           encoding: fs__namespace.EncodingType.Base64
         });
         uri = `data:application/octet-stream;base64,${data}`;

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

@@ -1,5 +1,5 @@
-import { c as createEvents, e as extend, u as useMutableCallback, b as createRoot, E as ErrorBoundary, B as Block, d as unmountComponentAtNode } from '../../dist/index-6662eaf2.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, b 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-6662eaf2.esm.js';
+import { c as createEvents, e as extend, u as useMutableCallback, b as createRoot, E as ErrorBoundary, B as Block, d as unmountComponentAtNode } from '../../dist/index-dc6125bc.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, b 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-dc6125bc.esm.js';
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import * as THREE from 'three';
@@ -240,6 +240,7 @@ const CanvasImpl = /*#__PURE__*/React.forwardRef(({
       ...style
     }
   }, bind), width > 0 && /*#__PURE__*/React.createElement(GLView, {
+    msaaSamples: 0,
     onContextCreate: onContextCreate,
     style: StyleSheet.absoluteFill
   }));
@@ -280,10 +281,8 @@ function polyfills() {
   }
   async function getAsset(input) {
     if (typeof input === 'string') {
-      // Point to storage if preceded with fs path
-      if (input.startsWith('file:')) return {
-        localUri: input
-      };
+      // Don't process storage or data uris
+      if (input.startsWith('file:') || input.startsWith('data:')) return input;
 
       // Unpack Blobs from react-native BlobManager
       if (input.startsWith('blob:')) {
@@ -301,40 +300,27 @@ function polyfills() {
           reader.onerror = rej;
           reader.readAsText(blob);
         });
-        input = `data:${blob.type};base64,${data}`;
-      }
-
-      // Create safe URI for JSI
-      if (input.startsWith('data:')) {
-        const [header, data] = input.split(',');
-        const [, type] = header.split('/');
-        const localUri = fs.cacheDirectory + uuidv4() + `.${type}`;
-        await fs.writeAsStringAsync(localUri, data, {
-          encoding: fs.EncodingType.Base64
-        });
-        return {
-          localUri
-        };
+        return `data:${blob.type};base64,${data}`;
       }
     }
 
     // Download bundler module or external URL
-    const asset = Asset.fromModule(input);
+    const asset = await Asset.fromModule(input).downloadAsync();
+    let uri = asset.localUri || asset.uri;
 
     // Unpack assets in Android Release Mode
-    if (!asset.uri.includes(':')) {
-      const localUri = `${fs.cacheDirectory}ExponentAsset-${asset.hash}.${asset.type}`;
-      await fs.copyAsync({
-        from: asset.uri,
-        to: localUri
+    if (!uri.includes(':')) {
+      const file = `${fs.cacheDirectory}ExponentAsset-${asset.hash}.${asset.type}`;
+      const stats = await fs.getInfoAsync(file, {
+        size: false
       });
-      return {
-        localUri
-      };
+      if (!stats.exists) await fs.copyAsync({
+        from: uri,
+        to: file
+      });
+      uri = file;
     }
-
-    // Otherwise, resolve from registry
-    return asset.downloadAsync();
+    return uri;
   }
 
   // Don't pre-process urls, let expo-asset generate an absolute URL
@@ -345,25 +331,29 @@ function polyfills() {
   THREE.TextureLoader.prototype.load = function load(url, onLoad, onProgress, onError) {
     if (this.path) url = this.path + url;
     const texture = new THREE.Texture();
-    getAsset(url).then(async asset => {
-      const uri = asset.localUri || asset.uri;
-      if (!asset.width || !asset.height) {
-        const {
-          width,
-          height
-        } = await new Promise((res, rej) => Image.getSize(uri, (width, height) => res({
-          width,
-          height
-        }), rej));
-        asset.width = width;
-        asset.height = height;
+    getAsset(url).then(async uri => {
+      // Create safe URI for JSI
+      if (uri.startsWith('data:')) {
+        const [header, data] = uri.split(',');
+        const [, type] = header.split('/');
+        uri = fs.cacheDirectory + uuidv4() + `.${type}`;
+        await fs.writeAsStringAsync(uri, data, {
+          encoding: fs.EncodingType.Base64
+        });
       }
+      const {
+        width,
+        height
+      } = await new Promise((res, rej) => Image.getSize(uri, (width, height) => res({
+        width,
+        height
+      }), rej));
       texture.image = {
         data: {
           localUri: uri
         },
-        width: asset.width,
-        height: asset.height
+        width,
+        height
       };
       texture.flipY = true;
       texture.unpackAlignment = 1;
@@ -381,12 +371,10 @@ function polyfills() {
   THREE.FileLoader.prototype.load = function load(url, onLoad, onProgress, onError) {
     if (this.path) url = this.path + url;
     const request = new XMLHttpRequest();
-    getAsset(url).then(async asset => {
-      let uri = asset.localUri || asset.uri;
-
+    getAsset(url).then(async uri => {
       // Make FS paths web-safe
-      if (asset.uri.startsWith('file://')) {
-        const data = await fs.readAsStringAsync(asset.uri, {
+      if (uri.startsWith('file://')) {
+        const data = await fs.readAsStringAsync(uri, {
           encoding: fs.EncodingType.Base64
         });
         uri = `data:application/octet-stream;base64,${data}`;

package/package.json

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