@react-three/fiber 8.14.1 → 8.14.3

package/dist/declarations/src/web/Canvas.d.ts

@@ -1,13 +1,13 @@
-import * as React from 'react';
-import type { Options as ResizeOptions } from 'react-use-measure';
-import { RenderProps } from '../core';
-export interface CanvasProps extends Omit<RenderProps<HTMLCanvasElement>, 'size'>, React.HTMLAttributes<HTMLDivElement> {
-    children: React.ReactNode;
-    fallback?: React.ReactNode;
-    resize?: ResizeOptions;
-    eventSource?: HTMLElement | React.MutableRefObject<HTMLElement>;
-    eventPrefix?: 'offset' | 'client' | 'page' | 'layer' | 'screen';
-}
-export interface Props extends CanvasProps {
-}
-export declare const Canvas: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLCanvasElement>>;
+import * as React from 'react';
+import type { Options as ResizeOptions } from 'react-use-measure';
+import { RenderProps } from '../core';
+export interface CanvasProps extends Omit<RenderProps<HTMLCanvasElement>, 'size'>, React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    fallback?: React.ReactNode;
+    resize?: ResizeOptions;
+    eventSource?: HTMLElement | React.MutableRefObject<HTMLElement>;
+    eventPrefix?: 'offset' | 'client' | 'page' | 'layer' | 'screen';
+}
+export interface Props extends CanvasProps {
+}
+export declare const Canvas: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLCanvasElement>>;

package/dist/declarations/src/web/events.d.ts

@@ -1,4 +1,4 @@
-import { UseBoundStore } from 'zustand';
-import { RootState } from '../core/store';
-import { EventManager } from '../core/events';
-export declare function createPointerEvents(store: UseBoundStore<RootState>): EventManager<HTMLElement>;
+import { UseBoundStore } from 'zustand';
+import { RootState } from '../core/store';
+import { EventManager } from '../core/events';
+export declare function createPointerEvents(store: UseBoundStore<RootState>): EventManager<HTMLElement>;

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,24 @@ 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}`;
+    if (!uri.includes(':')) {
+      const file = `${fs__namespace.cacheDirectory}ExponentAsset-${asset.hash}.${asset.type}`;
       await fs__namespace.copyAsync({
-        from: asset.uri,
-        to: localUri
+        from: uri,
+        to: file
       });
-      return {
-        localUri
-      };
+      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 +353,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,9 +393,7 @@ 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 (uri.startsWith('file://')) {
         const data = await fs__namespace.readAsStringAsync(uri, {

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,24 @@ 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}`;
+    if (!uri.includes(':')) {
+      const file = `${fs__namespace.cacheDirectory}ExponentAsset-${asset.hash}.${asset.type}`;
       await fs__namespace.copyAsync({
-        from: asset.uri,
-        to: localUri
+        from: uri,
+        to: file
       });
-      return {
-        localUri
-      };
+      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 +353,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,9 +393,7 @@ 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 (uri.startsWith('file://')) {
         const data = await fs__namespace.readAsStringAsync(uri, {

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,24 @@ 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}`;
+    if (!uri.includes(':')) {
+      const file = `${fs.cacheDirectory}ExponentAsset-${asset.hash}.${asset.type}`;
       await fs.copyAsync({
-        from: asset.uri,
-        to: localUri
+        from: uri,
+        to: file
       });
-      return {
-        localUri
-      };
+      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 +328,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,9 +368,7 @@ 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 (uri.startsWith('file://')) {
         const data = await fs.readAsStringAsync(uri, {

package/package.json

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