@react-three/fiber 8.14.5 → 8.14.6

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @react-three/fiber
 
+## 8.14.6
+
+### Patch Changes
+
+- 465fa0fb: fix(native): revert usage of networking stack
+
 ## 8.14.5
 
 ### Patch Changes

package/dist/declarations/src/native/polyfills.d.ts

@@ -1 +1 @@
-export declare function polyfills(): void;
+export declare function _polyfills(): void;

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

@@ -10,8 +10,7 @@ var reactNative = require('react-native');
 var expoGl = require('expo-gl');
 var itsFine = require('its-fine');
 var expoAsset = require('expo-asset');
-var fs = require('expo-file-system');
-var base64Js = require('base64-js');
+var expoFileSystem = require('expo-file-system');
 require('react-reconciler/constants');
 require('zustand');
 require('react-reconciler');
@@ -38,7 +37,6 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
-var fs__namespace = /*#__PURE__*/_interopNamespace(fs);
 
 /** Default R3F event manager for react-native */
 function createTouchEvents(store) {
@@ -281,101 +279,22 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function CanvasWrapper(p
   })));
 });
 
-function polyfills() {
-  function uuidv4() {
-    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
-      const r = Math.random() * 16 | 0,
-        v = c == 'x' ? r : r & 0x3 | 0x8;
-      return v.toString(16);
-    });
-  }
-
-  // Patch Blob for ArrayBuffer if unsupported
-  if (reactNative.Platform.OS !== 'web') {
-    try {
-      new Blob([new ArrayBuffer(4)]);
-    } catch (_) {
-      const BlobManager = require('react-native/Libraries/Blob/BlobManager.js');
-      BlobManager.createFromParts = function createFromParts(parts, options) {
-        const blobId = uuidv4();
-        const items = parts.map(part => {
-          if (part instanceof ArrayBuffer || ArrayBuffer.isView(part)) {
-            const data = base64Js.fromByteArray(new Uint8Array(part));
-            return {
-              data,
-              type: 'string'
-            };
-          } else if (part instanceof Blob) {
-            return {
-              data: part.data,
-              type: 'blob'
-            };
-          } else {
-            return {
-              data: String(part),
-              type: 'string'
-            };
-          }
-        });
-        const size = items.reduce((acc, curr) => {
-          if (curr.type === 'string') {
-            return acc + global.unescape(encodeURI(curr.data)).length;
-          } else {
-            return acc + curr.data.size;
-          }
-        }, 0);
-        reactNative.NativeModules.BlobModule.createFromParts(items, blobId);
-        return BlobManager.createFromOptions({
-          blobId,
-          offset: 0,
-          size,
-          type: options ? options.type : '',
-          lastModified: options ? options.lastModified : Date.now()
-        });
-      };
-    }
-  }
-  async function getAsset(input) {
-    if (typeof input === 'string') {
-      // 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:')) {
-        const blob = await new Promise((res, rej) => {
-          const xhr = new XMLHttpRequest();
-          xhr.open('GET', input);
-          xhr.responseType = 'blob';
-          xhr.onload = () => res(xhr.response);
-          xhr.onerror = rej;
-          xhr.send();
-        });
-        const data = await new Promise((res, rej) => {
-          const reader = new FileReader();
-          reader.onload = () => res(reader.result);
-          reader.onerror = rej;
-          reader.readAsText(blob);
-        });
-        return `data:${blob.type};base64,${data}`;
-      }
-    }
-
-    // Download bundler module or external URL
-    const asset = await expoAsset.Asset.fromModule(input).downloadAsync();
-    let uri = asset.localUri || asset.uri;
+async function getAsset(input) {
+  const asset = typeof input === 'string' ? expoAsset.Asset.fromURI(input) : expoAsset.Asset.fromModule(input);
+  await asset.downloadAsync();
+  let localUri = asset.localUri || asset.uri;
 
-    // Unpack assets in Android Release Mode
-    if (!uri.includes(':')) {
-      const file = `${fs__namespace.cacheDirectory}ExponentAsset-${asset.hash}.${asset.type}`;
-      await fs__namespace.copyAsync({
-        from: uri,
-        to: file
-      });
-      uri = file;
-    }
-    return uri;
+  // Unpack assets in Android Release Mode
+  if (!localUri.includes('://')) {
+    localUri = `${expoFileSystem.cacheDirectory}ExponentAsset-${asset.hash}.${asset.type}`;
+    await expoFileSystem.copyAsync({
+      from: localUri,
+      to: localUri
+    });
   }
-
+  return localUri;
+}
+function _polyfills() {
   // 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) : './';
@@ -384,26 +303,17 @@ 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 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
-        });
-      }
+    getAsset(url).then(async localUri => {
       const {
         width,
         height
-      } = await new Promise((res, rej) => reactNative.Image.getSize(uri, (width, height) => res({
+      } = await new Promise((res, rej) => reactNative.Image.getSize(localUri, (width, height) => res({
         width,
         height
       }), rej));
       texture.image = {
         data: {
-          localUri: uri
+          localUri
         },
         width,
         height
@@ -424,15 +334,8 @@ 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 uri => {
-      // Make FS paths web-safe
-      if (uri.startsWith('file://')) {
-        const data = await fs__namespace.readAsStringAsync(uri, {
-          encoding: fs__namespace.EncodingType.Base64
-        });
-        uri = `data:application/octet-stream;base64,${data}`;
-      }
-      request.open('GET', uri, true);
+    getAsset(url).then(localUri => {
+      request.open('GET', localUri, true);
       request.addEventListener('load', event => {
         if (request.status === 200) {
           onLoad == null ? void 0 : onLoad(request.response);
@@ -468,7 +371,7 @@ function polyfills() {
   };
 }
 
-polyfills();
+if (reactNative.Platform.OS !== 'web') _polyfills();
 
 exports.ReactThreeFiber = index.threeTypes;
 exports._roots = index.roots;

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

@@ -10,8 +10,7 @@ var reactNative = require('react-native');
 var expoGl = require('expo-gl');
 var itsFine = require('its-fine');
 var expoAsset = require('expo-asset');
-var fs = require('expo-file-system');
-var base64Js = require('base64-js');
+var expoFileSystem = require('expo-file-system');
 require('react-reconciler/constants');
 require('zustand');
 require('react-reconciler');
@@ -38,7 +37,6 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
-var fs__namespace = /*#__PURE__*/_interopNamespace(fs);
 
 /** Default R3F event manager for react-native */
 function createTouchEvents(store) {
@@ -281,101 +279,22 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function CanvasWrapper(p
   })));
 });
 
-function polyfills() {
-  function uuidv4() {
-    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
-      const r = Math.random() * 16 | 0,
-        v = c == 'x' ? r : r & 0x3 | 0x8;
-      return v.toString(16);
-    });
-  }
-
-  // Patch Blob for ArrayBuffer if unsupported
-  if (reactNative.Platform.OS !== 'web') {
-    try {
-      new Blob([new ArrayBuffer(4)]);
-    } catch (_) {
-      const BlobManager = require('react-native/Libraries/Blob/BlobManager.js');
-      BlobManager.createFromParts = function createFromParts(parts, options) {
-        const blobId = uuidv4();
-        const items = parts.map(part => {
-          if (part instanceof ArrayBuffer || ArrayBuffer.isView(part)) {
-            const data = base64Js.fromByteArray(new Uint8Array(part));
-            return {
-              data,
-              type: 'string'
-            };
-          } else if (part instanceof Blob) {
-            return {
-              data: part.data,
-              type: 'blob'
-            };
-          } else {
-            return {
-              data: String(part),
-              type: 'string'
-            };
-          }
-        });
-        const size = items.reduce((acc, curr) => {
-          if (curr.type === 'string') {
-            return acc + global.unescape(encodeURI(curr.data)).length;
-          } else {
-            return acc + curr.data.size;
-          }
-        }, 0);
-        reactNative.NativeModules.BlobModule.createFromParts(items, blobId);
-        return BlobManager.createFromOptions({
-          blobId,
-          offset: 0,
-          size,
-          type: options ? options.type : '',
-          lastModified: options ? options.lastModified : Date.now()
-        });
-      };
-    }
-  }
-  async function getAsset(input) {
-    if (typeof input === 'string') {
-      // 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:')) {
-        const blob = await new Promise((res, rej) => {
-          const xhr = new XMLHttpRequest();
-          xhr.open('GET', input);
-          xhr.responseType = 'blob';
-          xhr.onload = () => res(xhr.response);
-          xhr.onerror = rej;
-          xhr.send();
-        });
-        const data = await new Promise((res, rej) => {
-          const reader = new FileReader();
-          reader.onload = () => res(reader.result);
-          reader.onerror = rej;
-          reader.readAsText(blob);
-        });
-        return `data:${blob.type};base64,${data}`;
-      }
-    }
-
-    // Download bundler module or external URL
-    const asset = await expoAsset.Asset.fromModule(input).downloadAsync();
-    let uri = asset.localUri || asset.uri;
+async function getAsset(input) {
+  const asset = typeof input === 'string' ? expoAsset.Asset.fromURI(input) : expoAsset.Asset.fromModule(input);
+  await asset.downloadAsync();
+  let localUri = asset.localUri || asset.uri;
 
-    // Unpack assets in Android Release Mode
-    if (!uri.includes(':')) {
-      const file = `${fs__namespace.cacheDirectory}ExponentAsset-${asset.hash}.${asset.type}`;
-      await fs__namespace.copyAsync({
-        from: uri,
-        to: file
-      });
-      uri = file;
-    }
-    return uri;
+  // Unpack assets in Android Release Mode
+  if (!localUri.includes('://')) {
+    localUri = `${expoFileSystem.cacheDirectory}ExponentAsset-${asset.hash}.${asset.type}`;
+    await expoFileSystem.copyAsync({
+      from: localUri,
+      to: localUri
+    });
   }
-
+  return localUri;
+}
+function _polyfills() {
   // 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) : './';
@@ -384,26 +303,17 @@ 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 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
-        });
-      }
+    getAsset(url).then(async localUri => {
       const {
         width,
         height
-      } = await new Promise((res, rej) => reactNative.Image.getSize(uri, (width, height) => res({
+      } = await new Promise((res, rej) => reactNative.Image.getSize(localUri, (width, height) => res({
         width,
         height
       }), rej));
       texture.image = {
         data: {
-          localUri: uri
+          localUri
         },
         width,
         height
@@ -424,15 +334,8 @@ 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 uri => {
-      // Make FS paths web-safe
-      if (uri.startsWith('file://')) {
-        const data = await fs__namespace.readAsStringAsync(uri, {
-          encoding: fs__namespace.EncodingType.Base64
-        });
-        uri = `data:application/octet-stream;base64,${data}`;
-      }
-      request.open('GET', uri, true);
+    getAsset(url).then(localUri => {
+      request.open('GET', localUri, true);
       request.addEventListener('load', event => {
         if (request.status === 200) {
           onLoad == null ? void 0 : onLoad(request.response);
@@ -468,7 +371,7 @@ function polyfills() {
   };
 }
 
-polyfills();
+if (reactNative.Platform.OS !== 'web') _polyfills();
 
 exports.ReactThreeFiber = index.threeTypes;
 exports._roots = index.roots;

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

@@ -3,12 +3,11 @@ export { t as ReactThreeFiber, w as _roots, v as act, o as addAfterEffect, n as
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import * as THREE from 'three';
-import { PanResponder, PixelRatio, View, StyleSheet, Platform, NativeModules, Image } from 'react-native';
+import { PanResponder, PixelRatio, View, StyleSheet, Image, Platform } from 'react-native';
 import { GLView } from 'expo-gl';
 import { FiberProvider, useContextBridge } from 'its-fine';
 import { Asset } from 'expo-asset';
-import * as fs from 'expo-file-system';
-import { fromByteArray } from 'base64-js';
+import { cacheDirectory, copyAsync } from 'expo-file-system';
 import 'react-reconciler/constants';
 import 'zustand';
 import 'react-reconciler';
@@ -256,101 +255,22 @@ const Canvas = /*#__PURE__*/React.forwardRef(function CanvasWrapper(props, ref)
   })));
 });
 
-function polyfills() {
-  function uuidv4() {
-    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
-      const r = Math.random() * 16 | 0,
-        v = c == 'x' ? r : r & 0x3 | 0x8;
-      return v.toString(16);
-    });
-  }
-
-  // Patch Blob for ArrayBuffer if unsupported
-  if (Platform.OS !== 'web') {
-    try {
-      new Blob([new ArrayBuffer(4)]);
-    } catch (_) {
-      const BlobManager = require('react-native/Libraries/Blob/BlobManager.js');
-      BlobManager.createFromParts = function createFromParts(parts, options) {
-        const blobId = uuidv4();
-        const items = parts.map(part => {
-          if (part instanceof ArrayBuffer || ArrayBuffer.isView(part)) {
-            const data = fromByteArray(new Uint8Array(part));
-            return {
-              data,
-              type: 'string'
-            };
-          } else if (part instanceof Blob) {
-            return {
-              data: part.data,
-              type: 'blob'
-            };
-          } else {
-            return {
-              data: String(part),
-              type: 'string'
-            };
-          }
-        });
-        const size = items.reduce((acc, curr) => {
-          if (curr.type === 'string') {
-            return acc + global.unescape(encodeURI(curr.data)).length;
-          } else {
-            return acc + curr.data.size;
-          }
-        }, 0);
-        NativeModules.BlobModule.createFromParts(items, blobId);
-        return BlobManager.createFromOptions({
-          blobId,
-          offset: 0,
-          size,
-          type: options ? options.type : '',
-          lastModified: options ? options.lastModified : Date.now()
-        });
-      };
-    }
-  }
-  async function getAsset(input) {
-    if (typeof input === 'string') {
-      // 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:')) {
-        const blob = await new Promise((res, rej) => {
-          const xhr = new XMLHttpRequest();
-          xhr.open('GET', input);
-          xhr.responseType = 'blob';
-          xhr.onload = () => res(xhr.response);
-          xhr.onerror = rej;
-          xhr.send();
-        });
-        const data = await new Promise((res, rej) => {
-          const reader = new FileReader();
-          reader.onload = () => res(reader.result);
-          reader.onerror = rej;
-          reader.readAsText(blob);
-        });
-        return `data:${blob.type};base64,${data}`;
-      }
-    }
-
-    // Download bundler module or external URL
-    const asset = await Asset.fromModule(input).downloadAsync();
-    let uri = asset.localUri || asset.uri;
+async function getAsset(input) {
+  const asset = typeof input === 'string' ? Asset.fromURI(input) : Asset.fromModule(input);
+  await asset.downloadAsync();
+  let localUri = asset.localUri || asset.uri;
 
-    // Unpack assets in Android Release Mode
-    if (!uri.includes(':')) {
-      const file = `${fs.cacheDirectory}ExponentAsset-${asset.hash}.${asset.type}`;
-      await fs.copyAsync({
-        from: uri,
-        to: file
-      });
-      uri = file;
-    }
-    return uri;
+  // Unpack assets in Android Release Mode
+  if (!localUri.includes('://')) {
+    localUri = `${cacheDirectory}ExponentAsset-${asset.hash}.${asset.type}`;
+    await copyAsync({
+      from: localUri,
+      to: localUri
+    });
   }
-
+  return localUri;
+}
+function _polyfills() {
   // 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) : './';
@@ -359,26 +279,17 @@ 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 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
-        });
-      }
+    getAsset(url).then(async localUri => {
       const {
         width,
         height
-      } = await new Promise((res, rej) => Image.getSize(uri, (width, height) => res({
+      } = await new Promise((res, rej) => Image.getSize(localUri, (width, height) => res({
         width,
         height
       }), rej));
       texture.image = {
         data: {
-          localUri: uri
+          localUri
         },
         width,
         height
@@ -399,15 +310,8 @@ 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 uri => {
-      // Make FS paths web-safe
-      if (uri.startsWith('file://')) {
-        const data = await fs.readAsStringAsync(uri, {
-          encoding: fs.EncodingType.Base64
-        });
-        uri = `data:application/octet-stream;base64,${data}`;
-      }
-      request.open('GET', uri, true);
+    getAsset(url).then(localUri => {
+      request.open('GET', localUri, true);
       request.addEventListener('load', event => {
         if (request.status === 200) {
           onLoad == null ? void 0 : onLoad(request.response);
@@ -443,6 +347,6 @@ function polyfills() {
   };
 }
 
-polyfills();
+if (Platform.OS !== 'web') _polyfills();
 
 export { Canvas, createTouchEvents as events };

package/package.json

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