@react-three/fiber 8.0.0-beta-04 → 8.0.0-beta-05

package/dist/{index-eb414398.cjs.prod.js → index-ff8b5912.cjs.prod.js}

@@ -420,7 +420,7 @@ function createEvents(store) {
   /** Sets up defaultRaycaster */
 
   function prepareRay(event) {
-    var _raycaster$computeOff;
+    var _customOffsets$offset, _customOffsets$offset2, _customOffsets$width, _customOffsets$height;
 
     const state = store.getState();
     const {
@@ -431,14 +431,11 @@ function createEvents(store) {
     } = state; // https://github.com/pmndrs/react-three-fiber/pull/782
     // Events trigger outside of canvas when moved
 
-    const {
-      offsetX,
-      offsetY
-    } = (_raycaster$computeOff = raycaster.computeOffsets == null ? void 0 : raycaster.computeOffsets(event, state)) != null ? _raycaster$computeOff : event;
-    const {
-      width,
-      height
-    } = size;
+    const customOffsets = raycaster.computeOffsets == null ? void 0 : raycaster.computeOffsets(event, state);
+    const offsetX = (_customOffsets$offset = customOffsets == null ? void 0 : customOffsets.offsetX) != null ? _customOffsets$offset : event.offsetX;
+    const offsetY = (_customOffsets$offset2 = customOffsets == null ? void 0 : customOffsets.offsetY) != null ? _customOffsets$offset2 : event.offsetY;
+    const width = (_customOffsets$width = customOffsets == null ? void 0 : customOffsets.width) != null ? _customOffsets$width : size.width;
+    const height = (_customOffsets$height = customOffsets == null ? void 0 : customOffsets.height) != null ? _customOffsets$height : size.height;
     mouse.set(offsetX / width * 2 - 1, -(offsetY / height) * 2 + 1);
     raycaster.setFromCamera(mouse, camera);
   }
@@ -997,10 +994,13 @@ function createRenderer(roots, getEventPriority) {
 
     instance.__r3f.objects = [];
     removeChild(parent, instance);
-    appendChild(parent, newInstance) // This evil hack switches the react-internal fiber node
-    // https://github.com/facebook/react/issues/14983
-    // https://github.com/facebook/react/pull/15021
-    ;
+    appendChild(parent, newInstance); // Re-bind event handlers
+
+    if (newInstance.raycast && newInstance.__r3f.eventCount) {
+      const rootState = newInstance.__r3f.root.getState();
+
+      rootState.internal.interaction.push(newInstance);
+    } // This evil hack switches the react-internal fiber node
     [fiber, fiber.alternate].forEach(fiber => {
       if (fiber !== null) {
         fiber.stateNode = newInstance;
@@ -1094,7 +1094,7 @@ function createRenderer(roots, getEventPriority) {
     isPrimaryRenderer: false,
     getCurrentEventPriority: () => getEventPriority ? getEventPriority() : constants.DefaultEventPriority,
     // @ts-ignore
-    now: is.fun(performance.now) ? performance.now : is.fun(Date.now) ? Date.now : undefined,
+    now: typeof performance !== 'undefined' && is.fun(performance.now) ? performance.now : is.fun(Date.now) ? Date.now : undefined,
     // @ts-ignore
     scheduleTimeout: is.fun(setTimeout) ? setTimeout : undefined,
     // @ts-ignore
@@ -1255,18 +1255,19 @@ const createStore = (applyProps, invalidate, advance, props) => {
     })); // Handle frame behavior in WebXR
 
 
-    const handleXRFrame = timestamp => {
+    const handleXRFrame = (timestamp, frame) => {
       const state = get();
       if (state.frameloop === 'never') return;
-      advance(timestamp, true);
+      advance(timestamp, true, state, frame);
     }; // Toggle render switching on session
 
 
     const handleSessionChange = () => {
-      gl.xr.enabled = gl.xr.isPresenting;
-      gl.setAnimationLoop(gl.xr.isPresenting ? handleXRFrame : null); // If exiting session, request frame
+      gl.xr.enabled = gl.xr.isPresenting; // @ts-expect-error
+      // WebXRManager's signature is incorrect.
+      // See: https://github.com/pmndrs/react-three-fiber/pull/2017#discussion_r790134505
 
-      if (!gl.xr.isPresenting) invalidate(get());
+      gl.xr.setAnimationLoop(gl.xr.isPresenting ? handleXRFrame : null);
     }; // WebXR session manager
 
 
@@ -1446,60 +1447,6 @@ const createStore = (applyProps, invalidate, advance, props) => {
   return rootState;
 };
 
-function useStore() {
-  const store = React__namespace.useContext(context);
-  if (!store) throw `R3F hooks can only be used within the Canvas component!`;
-  return store;
-}
-function useThree(selector = state => state, equalityFn) {
-  return useStore()(selector, equalityFn);
-}
-function useFrame(callback, renderPriority = 0) {
-  const subscribe = useStore().getState().internal.subscribe; // Update ref
-
-  const ref = React__namespace.useRef(callback);
-  React__namespace.useLayoutEffect(() => void (ref.current = callback), [callback]); // Subscribe on mount, unsubscribe on unmount
-
-  React__namespace.useLayoutEffect(() => subscribe(ref, renderPriority), [renderPriority, subscribe]);
-  return null;
-}
-function useGraph(object) {
-  return React__namespace.useMemo(() => buildGraph(object), [object]);
-}
-
-function loadingFn(extensions, onProgress) {
-  return function (Proto, ...input) {
-    // Construct new loader and run extensions
-    const loader = new Proto();
-    if (extensions) extensions(loader); // Go through the urls and load them
-
-    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(`Could not load ${input}: ${error.message}`)))));
-  };
-}
-
-function useLoader(Proto, input, extensions, onProgress) {
-  // Use suspense to load async assets
-  const keys = Array.isArray(input) ? input : [input];
-  const results = suspendReact.suspend(loadingFn(extensions, onProgress), [Proto, ...keys], {
-    equal: is.equ
-  }); // Return the object/s
-
-  return Array.isArray(input) ? results : results[0];
-}
-
-useLoader.preload = function (Proto, input, extensions) {
-  const keys = Array.isArray(input) ? input : [input];
-  return suspendReact.preload(loadingFn(extensions), [Proto, ...keys]);
-};
-
-useLoader.clear = function (Proto, input) {
-  const keys = Array.isArray(input) ? input : [input];
-  return suspendReact.clear([Proto, ...keys]);
-};
-
 function createSubs(callback, subs) {
   const index = subs.length;
   subs.push(callback);
@@ -1518,7 +1465,7 @@ function run(effects, timestamp) {
   for (i = 0; i < effects.length; i++) effects[i](timestamp);
 }
 
-function render$1(timestamp, state) {
+function render$1(timestamp, state, frame) {
   // Run local effects
   let delta = state.clock.getDelta(); // In frameloop='never' mode, clock times are updated using the provided timestamp
 
@@ -1529,7 +1476,7 @@ function render$1(timestamp, state) {
   } // Call subscribers (useFrame)
 
 
-  for (i = 0; i < state.internal.subscribers.length; i++) state.internal.subscribers[i].ref.current(state, delta); // Render content
+  for (i = 0; i < state.internal.subscribers.length; i++) state.internal.subscribers[i].ref.current(state, delta, frame); // Render content
 
 
   if (!state.internal.priority && state.gl.render) state.gl.render(state.scene, state.camera); // Decrease frame count
@@ -1580,9 +1527,9 @@ function createLoop(roots) {
     }
   }
 
-  function advance(timestamp, runGlobalEffects = true, state) {
+  function advance(timestamp, runGlobalEffects = true, state, frame) {
     if (runGlobalEffects) run(globalEffects, timestamp);
-    if (!state) roots.forEach(root => render$1(timestamp, root.store.getState()));else render$1(timestamp, state);
+    if (!state) roots.forEach(root => render$1(timestamp, root.store.getState()));else render$1(timestamp, state, frame);
     if (runGlobalEffects) run(globalAfterEffects, timestamp);
   }
 
@@ -1593,6 +1540,60 @@ function createLoop(roots) {
   };
 }
 
+function useStore() {
+  const store = React__namespace.useContext(context);
+  if (!store) throw `R3F hooks can only be used within the Canvas component!`;
+  return store;
+}
+function useThree(selector = state => state, equalityFn) {
+  return useStore()(selector, equalityFn);
+}
+function useFrame(callback, renderPriority = 0) {
+  const subscribe = useStore().getState().internal.subscribe; // Update ref
+
+  const ref = React__namespace.useRef(callback);
+  React__namespace.useLayoutEffect(() => void (ref.current = callback), [callback]); // Subscribe on mount, unsubscribe on unmount
+
+  React__namespace.useLayoutEffect(() => subscribe(ref, renderPriority), [renderPriority, subscribe]);
+  return null;
+}
+function useGraph(object) {
+  return React__namespace.useMemo(() => buildGraph(object), [object]);
+}
+
+function loadingFn(extensions, onProgress) {
+  return function (Proto, ...input) {
+    // Construct new loader and run extensions
+    const loader = new Proto();
+    if (extensions) extensions(loader); // Go through the urls and load them
+
+    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(`Could not load ${input}: ${error.message}`)))));
+  };
+}
+
+function useLoader(Proto, input, extensions, onProgress) {
+  // Use suspense to load async assets
+  const keys = Array.isArray(input) ? input : [input];
+  const results = suspendReact.suspend(loadingFn(extensions, onProgress), [Proto, ...keys], {
+    equal: is.equ
+  }); // Return the object/s
+
+  return Array.isArray(input) ? results : results[0];
+}
+
+useLoader.preload = function (Proto, input, extensions) {
+  const keys = Array.isArray(input) ? input : [input];
+  return suspendReact.preload(loadingFn(extensions), [Proto, ...keys]);
+};
+
+useLoader.clear = function (Proto, input) {
+  const keys = Array.isArray(input) ? input : [input];
+  return suspendReact.clear([Proto, ...keys]);
+};
+
 const roots = new Map();
 const {
   invalidate,
@@ -1782,7 +1783,6 @@ exports.addEffect = addEffect;
 exports.addTail = addTail;
 exports.advance = advance;
 exports.applyProps = applyProps;
-exports.buildGraph = buildGraph;
 exports.context = context;
 exports.createEvents = createEvents;
 exports.createPortal = createPortal;
@@ -1790,7 +1790,6 @@ exports.createRoot = createRoot;
 exports.dispose = dispose;
 exports.extend = extend;
 exports.invalidate = invalidate;
-exports.is = is;
 exports.omit = omit;
 exports.pick = pick;
 exports.reconciler = reconciler;

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-ff3eb68b.cjs.dev.js');
+var index = require('./index-95c17855.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-eb414398.cjs.prod.js');
+var index = require('./index-ff8b5912.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, p as pick, o as omit, a as createRoot, u as unmountComponentAtNode } from './index-fccd77b0.esm.js';
-export { t as ReactThreeFiber, y as _roots, x as act, v as addAfterEffect, s as addEffect, w as addTail, q as advance, l as applyProps, i as context, j as createPortal, a as createRoot, m as dispose, e as extend, n as invalidate, k as reconciler, r as render, u as unmountComponentAtNode, f as useFrame, g as useGraph, h as useLoader, b as useStore, d as useThree } from './index-fccd77b0.esm.js';
+import { c as createEvents, e as extend, p as pick, o as omit, a as createRoot, u as unmountComponentAtNode } from './index-3f4e5f46.esm.js';
+export { t as ReactThreeFiber, q as _roots, n as act, l as addAfterEffect, k as addEffect, m as addTail, j as advance, g as applyProps, b as context, d as createPortal, a as createRoot, h as dispose, e as extend, i as invalidate, f as reconciler, r as render, u as unmountComponentAtNode, w as useFrame, x as useGraph, y as useLoader, s as useStore, v as useThree } from './index-3f4e5f46.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,17 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('../../dist/index-ff3eb68b.cjs.dev.js');
 var THREE = require('three');
 var expoAsset = require('expo-asset');
-var expoFileSystem = require('expo-file-system');
-var base64Arraybuffer = require('base64-arraybuffer');
-var suspendReact = require('suspend-react');
+var index = require('../../dist/index-95c17855.cjs.dev.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var reactNative = require('react-native');
 var expoGl = require('expo-gl');
 var Pressability = require('react-native/Libraries/Pressability/Pressability');
+require('suspend-react');
 require('react-reconciler/constants');
 require('zustand');
 require('react-reconciler');
@@ -44,116 +42,6 @@ var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var Pressability__default = /*#__PURE__*/_interopDefault(Pressability);
 
-/**
- * Generates an asset based on input type.
- */
-
-const getAsset = input => {
-  if (input instanceof expoAsset.Asset) return input;
-
-  switch (typeof input) {
-    case 'string':
-      return expoAsset.Asset.fromURI(input);
-
-    case 'number':
-      return expoAsset.Asset.fromModule(input);
-
-    default:
-      throw 'Invalid asset! Must be a URI or module.';
-  }
-};
-/**
- * Downloads from a local URI and decodes into an ArrayBuffer.
- */
-
-
-const toBuffer = async localUri => expoFileSystem.readAsStringAsync(localUri, {
-  encoding: 'base64'
-}).then(base64Arraybuffer.decode);
-
-function loadingFn(extensions, onProgress) {
-  return function (Proto, ...input) {
-    // Construct new loader and run extensions
-    const loader = new Proto();
-    if (extensions) extensions(loader); // Go through the urls and load them
-
-    return Promise.all(input.map(entry => new Promise(async (res, reject) => {
-      // Construct URL
-      const url = typeof entry === 'string' ? loader.path + entry : entry; // There's no Image in native, so we create & pass a data texture instead
-
-      if (loader instanceof THREE__namespace.TextureLoader) {
-        const asset = await getAsset(url).downloadAsync();
-        const texture = new THREE__namespace.Texture();
-        texture.isDataTexture = true;
-        texture.image = {
-          data: asset,
-          width: asset.width,
-          height: asset.height
-        };
-        texture.needsUpdate = true;
-        return res(texture);
-      } // Do similar for CubeTextures
-
-
-      if (loader instanceof THREE__namespace.CubeTextureLoader) {
-        const texture = new THREE__namespace.CubeTexture();
-        texture.isDataTexture = true;
-        texture.images = await Promise.all(url.map(async src => {
-          const asset = await getAsset(src).downloadAsync();
-          return {
-            data: asset,
-            width: asset.width,
-            height: asset.height
-          };
-        }));
-        texture.needsUpdate = true;
-        return res(texture);
-      } // If asset is external and not an Image, load it
-
-
-      if (url.startsWith != null && url.startsWith('http') && Proto.prototype.hasOwnProperty('load')) {
-        return loader.load(entry, data => {
-          if (data.scene) Object.assign(data, index.buildGraph(data.scene));
-          res(data);
-        }, onProgress, error => reject(`Could not load ${url}: ${error.message}`));
-      } // Otherwise, create a localUri and a file buffer
-
-
-      const {
-        localUri
-      } = await getAsset(url).downloadAsync();
-      const arrayBuffer = await toBuffer(localUri); // Parse it
-
-      const parsed = loader.parse == null ? void 0 : loader.parse(arrayBuffer, undefined, data => {
-        if (data.scene) Object.assign(data, index.buildGraph(data.scene));
-        res(data);
-      }, error => reject(`Could not load ${url}: ${error.message}`)); // Respect synchronous parsers which don't have callbacks
-
-      if (parsed) return res(parsed);
-    })));
-  };
-}
-
-function useLoader(Proto, input, extensions, onProgress) {
-  // Use suspense to load async assets
-  const keys = Array.isArray(input) ? input : [input];
-  const results = suspendReact.suspend(loadingFn(extensions, onProgress), [Proto, ...keys], {
-    equal: index.is.equ
-  }); // Return the object/s
-
-  return Array.isArray(input) ? results : results[0];
-}
-
-useLoader.preload = function (Proto, input, extensions) {
-  const keys = Array.isArray(input) ? input : [input];
-  return suspendReact.preload(loadingFn(extensions), [Proto, ...keys]);
-};
-
-useLoader.clear = function (Proto, input) {
-  const keys = Array.isArray(input) ? input : [input];
-  return suspendReact.clear([Proto, ...keys]);
-};
-
 const EVENTS = {
   PRESS: 'onPress',
   PRESSIN: 'onPressIn',
@@ -180,8 +68,8 @@ function createTouchEvents(store) {
   const handleTouch = (event, name) => {
     event.persist() // Apply offset
     ;
-    event.nativeEvent.offsetX = event.nativeEvent.pageX;
-    event.nativeEvent.offsetY = event.nativeEvent.pageY; // Emulate DOM event
+    event.nativeEvent.offsetX = event.nativeEvent.locationX;
+    event.nativeEvent.offsetY = event.nativeEvent.locationY; // Emulate DOM event
 
     const callback = handlePointer(DOM_EVENTS[name]);
     return callback(event.nativeEvent);
@@ -199,13 +87,13 @@ function createTouchEvents(store) {
       } = store.getState();
       events.disconnect == null ? void 0 : events.disconnect();
       const connected = new Pressability__default['default'](events == null ? void 0 : events.handlers);
-      const handlers = connected.getEventHandlers();
       set(state => ({
         events: { ...state.events,
-          connected,
-          handlers
+          connected
         }
       }));
+      const handlers = connected.getEventHandlers();
+      return handlers;
     },
     disconnect: () => {
       const {
@@ -314,7 +202,8 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
     // Overwrite onCreated to apply RN bindings
     const onCreated = state => {
       // Bind events after creation
-      setBind(state.events.handlers); // Bind render to RN bridge
+      const handlers = state.events.connect == null ? void 0 : state.events.connect(canvas);
+      setBind(handlers); // Bind render to RN bridge
 
       const context = state.gl.getContext();
       const renderFrame = state.gl.render.bind(state.gl);
@@ -362,6 +251,87 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
   }));
 });
 
+/**
+ * Generates an asset based on input type.
+ */
+
+const getAsset = input => {
+  if (input instanceof expoAsset.Asset) return input;
+
+  switch (typeof input) {
+    case 'string':
+      return expoAsset.Asset.fromURI(input);
+
+    case 'number':
+      return expoAsset.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
+
+
+THREE__namespace.LoaderUtils.extractUrlBase = () => './'; // There's no Image in native, so create a data texture instead
+
+
+THREE__namespace.TextureLoader.prototype.load = function load(url, onLoad, onProgress, onError) {
+  const texture = new THREE__namespace.Texture(); // @ts-expect-error
+
+  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__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;
+};
+
 exports.ReactThreeFiber = index.threeTypes;
 exports._roots = index.roots;
 exports.act = index.act;
@@ -381,8 +351,8 @@ exports.render = index.render;
 exports.unmountComponentAtNode = index.unmountComponentAtNode;
 exports.useFrame = index.useFrame;
 exports.useGraph = index.useGraph;
+exports.useLoader = index.useLoader;
 exports.useStore = index.useStore;
 exports.useThree = index.useThree;
 exports.Canvas = Canvas;
 exports.events = createTouchEvents;
-exports.useLoader = useLoader;