@react-three/fiber 9.0.0-alpha.2 → 9.0.0-alpha.3

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

@@ -2,22 +2,23 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var loop = require('../../dist/loop-a0ef8208.cjs.prod.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
 var reactNative = require('react-native');
 var expoGl = require('expo-gl');
 var itsFine = require('its-fine');
-var index = require('../../dist/index-8128f248.cjs.prod.js');
-var Pressability = require('react-native/Libraries/Pressability/Pressability');
+var expoAsset = require('expo-asset');
+var fs = require('expo-file-system');
+var base64Js = require('base64-js');
+var buffer = require('buffer');
 require('react-reconciler/constants');
 require('zustand');
 require('react-reconciler');
 require('scheduler');
 require('suspend-react');
 
-function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
-
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
   var n = Object.create(null);
@@ -38,201 +39,94 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
-var Pressability__default = /*#__PURE__*/_interopDefault(Pressability);
-
-/* eslint-enable import/default, import/no-named-as-default, import/no-named-as-default-member */
+var fs__namespace = /*#__PURE__*/_interopNamespace(fs);
 
-const EVENTS = {
-  PRESS: 'onPress',
-  PRESSIN: 'onPressIn',
-  PRESSOUT: 'onPressOut',
-  LONGPRESS: 'onLongPress',
-  HOVERIN: 'onHoverIn',
-  HOVEROUT: 'onHoverOut',
-  PRESSMOVE: 'onPressMove'
-};
-const DOM_EVENTS = {
-  [EVENTS.PRESS]: 'onClick',
-  [EVENTS.PRESSIN]: 'onPointerDown',
-  [EVENTS.PRESSOUT]: 'onPointerUp',
-  [EVENTS.LONGPRESS]: 'onDoubleClick',
-  [EVENTS.HOVERIN]: 'onPointerOver',
-  [EVENTS.HOVEROUT]: 'onPointerOut',
-  [EVENTS.PRESSMOVE]: 'onPointerMove'
-};
 /** Default R3F event manager for react-native */
-
 function createTouchEvents(store) {
   const {
     handlePointer
-  } = index.createEvents(store);
-
+  } = loop.createEvents(store);
   const handleTouch = (event, name) => {
-    event.persist() // Apply offset
+    event.persist()
+
+    // Apply offset
     ;
     event.nativeEvent.offsetX = event.nativeEvent.locationX;
-    event.nativeEvent.offsetY = event.nativeEvent.locationY; // Emulate DOM event
+    event.nativeEvent.offsetY = event.nativeEvent.locationY;
 
-    const callback = handlePointer(DOM_EVENTS[name]);
-    return callback(event.nativeEvent);
+    // Emulate DOM event
+    const callback = handlePointer(name);
+    callback(event.nativeEvent);
+    return true;
   };
-
+  const responder = reactNative.PanResponder.create({
+    onStartShouldSetPanResponder: () => true,
+    onMoveShouldSetPanResponder: () => true,
+    onMoveShouldSetPanResponderCapture: () => true,
+    onPanResponderTerminationRequest: () => true,
+    onStartShouldSetPanResponderCapture: e => handleTouch(e, 'onPointerCapture'),
+    onPanResponderStart: e => handleTouch(e, 'onPointerDown'),
+    onPanResponderMove: e => handleTouch(e, 'onPointerMove'),
+    onPanResponderEnd: (e, state) => {
+      handleTouch(e, 'onPointerUp');
+      if (Math.hypot(state.dx, state.dy) < 20) handleTouch(e, 'onClick');
+    },
+    onPanResponderRelease: e => handleTouch(e, 'onPointerLeave'),
+    onPanResponderTerminate: e => handleTouch(e, 'onLostPointerCapture'),
+    onPanResponderReject: e => handleTouch(e, 'onLostPointerCapture')
+  });
   return {
     priority: 1,
     enabled: true,
-
     compute(event, state, previous) {
       // https://github.com/pmndrs/react-three-fiber/pull/782
       // Events trigger outside of canvas when moved, use offsetX/Y by default and allow overrides
       state.pointer.set(event.offsetX / state.size.width * 2 - 1, -(event.offsetY / state.size.height) * 2 + 1);
       state.raycaster.setFromCamera(state.pointer, state.camera);
     },
-
     connected: undefined,
-    handlers: Object.values(EVENTS).reduce((acc, name) => ({ ...acc,
-      [name]: event => handleTouch(event, name)
-    }), {}),
+    handlers: responder.panHandlers,
+    update: () => {
+      var _internal$lastEvent;
+      const {
+        events,
+        internal
+      } = store.getState();
+      if ((_internal$lastEvent = internal.lastEvent) != null && _internal$lastEvent.current && events.handlers) {
+        handlePointer('onPointerMove')(internal.lastEvent.current);
+      }
+    },
     connect: () => {
       const {
         set,
         events
       } = store.getState();
       events.disconnect == null ? void 0 : events.disconnect();
-      const connected = new Pressability__default["default"](events.handlers);
       set(state => ({
-        events: { ...state.events,
-          connected
+        events: {
+          ...state.events,
+          connected: true
         }
       }));
-      const handlers = connected.getEventHandlers();
-      return handlers;
     },
     disconnect: () => {
       const {
-        set,
-        events
+        set
       } = store.getState();
-
-      if (events.connected) {
-        events.connected.reset();
-        set(state => ({
-          events: { ...state.events,
-            connected: undefined
-          }
-        }));
-      }
+      set(state => ({
+        events: {
+          ...state.events,
+          connected: false
+        }
+      }));
     }
   };
 }
 
-// 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.
+/**
+ * A native canvas which accepts threejs elements as children.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
  */
-
-
-function getAsset(input) {
-  switch (typeof input) {
-    case 'string':
-      return expAsset.fromURI(input);
-
-    case 'number':
-      return expAsset.fromModule(input);
-
-    default:
-      throw new Error('R3F: 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;
-  };
-}
-
 const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(({
   children,
   style,
@@ -247,6 +141,7 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(({
   performance,
   raycaster,
   camera,
+  scene,
   onPointerMissed,
   onCreated,
   stages,
@@ -255,8 +150,8 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(({
   // Create a known catalogue of Threejs-native elements
   // This will include the entire THREE namespace by default, users can extend
   // their own elements by using the createRoot API instead
-  React__namespace.useMemo(() => index.extend(THREE__namespace), []);
-  const Bridge = itsFine.useContextBridge();
+  React__namespace.useMemo(() => loop.extend(THREE__namespace), []);
+  const Bridge = loop.useBridge();
   const [{
     width,
     height,
@@ -271,17 +166,17 @@ const CanvasImpl = /*#__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 handlePointerMissed = loop.useMutableCallback(onPointerMissed);
   const [block, setBlock] = React__namespace.useState(false);
-  const [error, setError] = React__namespace.useState(undefined); // Suspend this component if block is a promise (2nd run)
-
-  if (block) throw block; // Throw exception outwards if anything within canvas throws
+  const [error, setError] = React__namespace.useState(undefined);
 
+  // Suspend this component if block is a promise (2nd run)
+  if (block) throw block;
+  // Throw exception outwards if anything within canvas throws
   if (error) throw error;
   const viewRef = React__namespace.useRef(null);
-  const root = React__namespace.useRef(null); // Inject and cleanup RN polyfills if able
-
-  React__namespace.useLayoutEffect(() => polyfills(), []);
+  const root = React__namespace.useRef(null);
+  const [antialias, setAntialias] = React__namespace.useState(true);
   const onLayout = React__namespace.useCallback(e => {
     const {
       width,
@@ -295,9 +190,10 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(({
       top: y,
       left: x
     });
-  }, []); // Called on context create or swap
-  // https://github.com/pmndrs/react-three-fiber/pull/2297
+  }, []);
 
+  // Called on context create or swap
+  // https://github.com/pmndrs/react-three-fiber/pull/2297
   const onContextCreate = React__namespace.useCallback(context => {
     const canvasShim = {
       width: context.drawingBufferWidth,
@@ -306,12 +202,16 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(({
       addEventListener: () => {},
       removeEventListener: () => {},
       clientHeight: context.drawingBufferHeight,
-      getContext: () => context
+      getContext: (_, {
+        antialias = false
+      }) => {
+        setAntialias(antialias);
+        return context;
+      }
     };
-    root.current = index.createRoot(canvasShim);
+    root.current = loop.createRoot(canvasShim);
     setCanvas(canvasShim);
   }, []);
-
   if (root.current && width > 0 && height > 0) {
     root.current.configure({
       gl,
@@ -326,6 +226,7 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(({
       raycaster,
       camera,
       stages,
+      scene,
       // expo-gl can only render at native dpr/resolution
       // https://github.com/expo/expo-three/issues/39
       dpr: reactNative.PixelRatio.get(),
@@ -340,32 +241,29 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(({
       // Overwrite onCreated to apply RN bindings
       onCreated: state => {
         // Bind events after creation
-        const handlers = state.events.connect == null ? void 0 : state.events.connect(viewRef.current);
-        setBind(handlers); // Bind render to RN bridge
+        setBind(state.events.handlers);
 
+        // Bind render to RN bridge
         const context = state.gl.getContext();
         const renderFrame = state.gl.render.bind(state.gl);
-
         state.gl.render = (scene, camera) => {
           renderFrame(scene, camera);
           context.endFrameEXP();
         };
-
         return onCreated == null ? void 0 : onCreated(state);
       }
     });
-    root.current.render( /*#__PURE__*/React__namespace.createElement(Bridge, null, /*#__PURE__*/React__namespace.createElement(index.ErrorBoundary, {
+    root.current.render( /*#__PURE__*/React__namespace.createElement(Bridge, null, /*#__PURE__*/React__namespace.createElement(loop.ErrorBoundary, {
       set: setError
     }, /*#__PURE__*/React__namespace.createElement(React__namespace.Suspense, {
-      fallback: /*#__PURE__*/React__namespace.createElement(index.Block, {
+      fallback: /*#__PURE__*/React__namespace.createElement(loop.Block, {
         set: setBlock
       })
     }, children))));
   }
-
   React__namespace.useEffect(() => {
     if (canvas) {
-      return () => index.unmountComponentAtNode(canvas);
+      return () => loop.unmountComponentAtNode(canvas);
     }
   }, [canvas]);
   return /*#__PURE__*/React__namespace.createElement(reactNative.View, _extends({}, props, {
@@ -376,44 +274,213 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(({
       ...style
     }
   }, bind), width > 0 && /*#__PURE__*/React__namespace.createElement(expoGl.GLView, {
+    msaaSamples: antialias ? 4 : 0,
     onContextCreate: onContextCreate,
     style: reactNative.StyleSheet.absoluteFill
   }));
 });
-/**
- * A native canvas which accepts threejs elements as children.
- * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
- */
 
+/**
+ * A native canvas which accepts threejs elements as children.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
+ */
 const Canvas = /*#__PURE__*/React__namespace.forwardRef(function CanvasWrapper(props, ref) {
   return /*#__PURE__*/React__namespace.createElement(itsFine.FiberProvider, null, /*#__PURE__*/React__namespace.createElement(CanvasImpl, _extends({}, props, {
     ref: ref
   })));
 });
 
-exports._roots = index.roots;
-exports.act = index.act;
-exports.addAfterEffect = index.addAfterEffect;
-exports.addEffect = index.addEffect;
-exports.addTail = index.addTail;
-exports.advance = index.advance;
-exports.applyProps = index.applyProps;
-exports.context = index.context;
-exports.createPortal = index.createPortal;
-exports.createRoot = index.createRoot;
-exports.dispose = index.dispose;
-exports.extend = index.extend;
-exports.getRootState = index.getRootState;
-exports.invalidate = index.invalidate;
-exports.reconciler = index.reconciler;
-exports.render = index.render;
-exports.unmountComponentAtNode = index.unmountComponentAtNode;
-exports.useFrame = index.useFrame;
-exports.useGraph = index.useGraph;
-exports.useInstanceHandle = index.useInstanceHandle;
-exports.useLoader = index.useLoader;
-exports.useStore = index.useStore;
-exports.useThree = index.useThree;
-exports.useUpdate = index.useUpdate;
+// http://stackoverflow.com/questions/105034
+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);
+  });
+}
+async function getAsset(input) {
+  if (typeof input === 'string') {
+    var _NativeModules$BlobMo;
+    // Don't process storage
+    if (input.startsWith('file:')) return input;
+
+    // Unpack Blobs from react-native BlobManager
+    // https://github.com/facebook/react-native/issues/22681#issuecomment-523258955
+    if (input.startsWith('blob:') || input.startsWith((_NativeModules$BlobMo = reactNative.NativeModules.BlobModule) == null ? void 0 : _NativeModules$BlobMo.BLOB_URI_SCHEME)) {
+      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);
+      });
+      input = `data:${blob.type};base64,${data}`;
+    }
+
+    // Create safe URI for JSI serialization
+    if (input.startsWith('data:')) {
+      const [header, data] = input.split(';base64,');
+      const [, type] = header.split('/');
+      const uri = fs__namespace.cacheDirectory + uuidv4() + `.${type}`;
+      await fs__namespace.writeAsStringAsync(uri, data, {
+        encoding: fs__namespace.EncodingType.Base64
+      });
+      return uri;
+    }
+  }
+
+  // Download bundler module or external URL
+  const asset = await expoAsset.Asset.fromModule(input).downloadAsync();
+  let uri = 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;
+}
+function polyfills() {
+  // Patch Blob for ArrayBuffer and URL if unsupported
+  // https://github.com/facebook/react-native/pull/39276
+  // https://github.com/pmndrs/react-three-fiber/issues/3058
+  if (reactNative.Platform.OS !== 'web') {
+    try {
+      const blob = new Blob([new ArrayBuffer(4)]);
+      const url = URL.createObjectURL(blob);
+      URL.revokeObjectURL(url);
+    } catch (_) {
+      const BlobManager = require('react-native/Libraries/Blob/BlobManager.js');
+      const createObjectURL = URL.createObjectURL;
+      URL.createObjectURL = function (blob) {
+        if (blob.data._base64) {
+          return `data:${blob.type};base64,${blob.data._base64}`;
+        }
+        return createObjectURL(blob);
+      };
+      const createFromParts = BlobManager.createFromParts;
+      BlobManager.createFromParts = function (parts, options) {
+        parts = parts.map(part => {
+          if (part instanceof ArrayBuffer || ArrayBuffer.isView(part)) {
+            part = base64Js.fromByteArray(new Uint8Array(part));
+          }
+          return part;
+        });
+        const blob = createFromParts(parts, options);
+
+        // Always enable slow but safe path for iOS (previously for Android unauth)
+        // https://github.com/pmndrs/react-three-fiber/issues/3075
+        // if (!NativeModules.BlobModule?.BLOB_URI_SCHEME) {
+        blob.data._base64 = '';
+        for (const part of parts) {
+          var _data$_base, _data;
+          blob.data._base64 += (_data$_base = (_data = part.data) == null ? void 0 : _data._base64) != null ? _data$_base : part;
+        }
+        // }
+
+        return blob;
+      };
+    }
+  }
+
+  // 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) {
+    if (this.path && typeof url === 'string') url = this.path + url;
+    const texture = new THREE__namespace.Texture();
+    getAsset(url).then(async uri => {
+      // https://github.com/expo/expo-three/pull/266
+      const {
+        width,
+        height
+      } = await new Promise((res, rej) => reactNative.Image.getSize(uri, (width, height) => res({
+        width,
+        height
+      }), rej));
+      texture.image = {
+        // Special case for EXGLImageUtils::loadImage
+        data: {
+          localUri: uri
+        },
+        width,
+        height
+      };
+      texture.flipY = true; // Since expo-gl@12.4.0
+      texture.needsUpdate = true;
+
+      // Force non-DOM upload for EXGL texImage2D
+      // @ts-ignore
+      texture.isDataTexture = true;
+      onLoad == null ? void 0 : onLoad(texture);
+    }).catch(onError);
+    return texture;
+  };
+
+  // Fetches assets via FS
+  THREE__namespace.FileLoader.prototype.load = function load(url, onLoad, onProgress, onError) {
+    if (this.path && typeof url === 'string') url = this.path + url;
+    this.manager.itemStart(url);
+    getAsset(url).then(async uri => {
+      const base64 = await fs__namespace.readAsStringAsync(uri, {
+        encoding: fs__namespace.EncodingType.Base64
+      });
+      const data = buffer.Buffer.from(base64, 'base64');
+      onLoad == null ? void 0 : onLoad(data.buffer);
+    }).catch(error => {
+      onError == null ? void 0 : onError(error);
+      this.manager.itemError(url);
+    }).finally(() => {
+      this.manager.itemEnd(url);
+    });
+  };
+}
+
+if (reactNative.Platform.OS !== 'web') polyfills();
+
+exports.FixedStage = loop.FixedStage;
+exports.ReactThreeFiber = loop.threeTypes;
+exports.Stage = loop.Stage;
+exports.Stages = loop.Stages;
+exports._roots = loop._roots;
+exports.act = loop.act;
+exports.addAfterEffect = loop.addAfterEffect;
+exports.addEffect = loop.addEffect;
+exports.addTail = loop.addTail;
+exports.advance = loop.advance;
+exports.applyProps = loop.applyProps;
+exports.buildGraph = loop.buildGraph;
+exports.context = loop.context;
+exports.createEvents = loop.createEvents;
+exports.createPortal = loop.createPortal;
+exports.createRoot = loop.createRoot;
+exports.dispose = loop.dispose;
+exports.extend = loop.extend;
+exports.flushGlobalEffects = loop.flushGlobalEffects;
+exports.getRootState = loop.getRootState;
+exports.invalidate = loop.invalidate;
+exports.reconciler = loop.reconciler;
+exports.render = loop.render;
+exports.unmountComponentAtNode = loop.unmountComponentAtNode;
+exports.useFrame = loop.useFrame;
+exports.useGraph = loop.useGraph;
+exports.useInstanceHandle = loop.useInstanceHandle;
+exports.useLoader = loop.useLoader;
+exports.useStore = loop.useStore;
+exports.useThree = loop.useThree;
+exports.useUpdate = loop.useUpdate;
 exports.Canvas = Canvas;
 exports.events = createTouchEvents;