@react-three/fiber 8.6.2 → 8.7.2

package/dist/{index-f368ca4a.cjs.prod.js → index-5350eaac.cjs.prod.js}

@@ -39,6 +39,7 @@ var threeTypes = /*#__PURE__*/Object.freeze({
 
 var _window$document, _window$navigator;
 const isOrthographicCamera = def => def && def.isOrthographicCamera;
+const isRef = obj => obj && obj.hasOwnProperty('current');
 /**
  * An SSR-friendly useLayoutEffect.
  *
@@ -503,9 +504,7 @@ function removeInteractivity(store, object) {
   });
 }
 function createEvents(store) {
-  const temp = new THREE__namespace.Vector3();
   /** Calculates delta */
-
   function calculateDistance(event) {
     const {
       internal
@@ -605,108 +604,113 @@ function createEvents(store) {
 
 
   function handleIntersects(intersections, event, delta, callback) {
-    const {
-      raycaster,
-      pointer,
-      camera,
-      internal
-    } = store.getState(); // If anything has been found, forward it to the event listeners
-
+    // If anything has been found, forward it to the event listeners
     if (intersections.length) {
-      const unprojectedPoint = temp.set(pointer.x, pointer.y, 0).unproject(camera);
       const localState = {
         stopped: false
       };
 
       for (const hit of intersections) {
-        const hasPointerCapture = id => {
-          var _internal$capturedMap, _internal$capturedMap2;
+        const state = getRootState(hit.object);
 
-          return (_internal$capturedMap = (_internal$capturedMap2 = internal.capturedMap.get(id)) == null ? void 0 : _internal$capturedMap2.has(hit.eventObject)) != null ? _internal$capturedMap : false;
-        };
+        if (state) {
+          const {
+            raycaster,
+            pointer,
+            camera,
+            internal
+          } = state;
+          const unprojectedPoint = new THREE__namespace.Vector3(pointer.x, pointer.y, 0).unproject(camera);
+
+          const hasPointerCapture = id => {
+            var _internal$capturedMap, _internal$capturedMap2;
 
-        const setPointerCapture = id => {
-          const captureData = {
-            intersection: hit,
-            target: event.target
+            return (_internal$capturedMap = (_internal$capturedMap2 = internal.capturedMap.get(id)) == null ? void 0 : _internal$capturedMap2.has(hit.eventObject)) != null ? _internal$capturedMap : false;
           };
 
-          if (internal.capturedMap.has(id)) {
-            // if the pointerId was previously captured, we add the hit to the
-            // event capturedMap.
-            internal.capturedMap.get(id).set(hit.eventObject, captureData);
-          } else {
-            // if the pointerId was not previously captured, we create a map
-            // containing the hitObject, and the hit. hitObject is used for
-            // faster access.
-            internal.capturedMap.set(id, new Map([[hit.eventObject, captureData]]));
-          } // Call the original event now
-          event.target.setPointerCapture(id);
-        };
+          const setPointerCapture = id => {
+            const captureData = {
+              intersection: hit,
+              target: event.target
+            };
+
+            if (internal.capturedMap.has(id)) {
+              // if the pointerId was previously captured, we add the hit to the
+              // event capturedMap.
+              internal.capturedMap.get(id).set(hit.eventObject, captureData);
+            } else {
+              // if the pointerId was not previously captured, we create a map
+              // containing the hitObject, and the hit. hitObject is used for
+              // faster access.
+              internal.capturedMap.set(id, new Map([[hit.eventObject, captureData]]));
+            } // Call the original event now
+            event.target.setPointerCapture(id);
+          };
 
-        const releasePointerCapture = id => {
-          const captures = internal.capturedMap.get(id);
+          const releasePointerCapture = id => {
+            const captures = internal.capturedMap.get(id);
 
-          if (captures) {
-            releaseInternalPointerCapture(internal.capturedMap, hit.eventObject, captures, id);
-          }
-        }; // Add native event props
+            if (captures) {
+              releaseInternalPointerCapture(internal.capturedMap, hit.eventObject, captures, id);
+            }
+          }; // Add native event props
 
 
-        let extractEventProps = {}; // This iterates over the event's properties including the inherited ones. Native PointerEvents have most of their props as getters which are inherited, but polyfilled PointerEvents have them all as their own properties (i.e. not inherited). We can't use Object.keys() or Object.entries() as they only return "own" properties; nor Object.getPrototypeOf(event) as that *doesn't* return "own" properties, only inherited ones.
+          let extractEventProps = {}; // This iterates over the event's properties including the inherited ones. Native PointerEvents have most of their props as getters which are inherited, but polyfilled PointerEvents have them all as their own properties (i.e. not inherited). We can't use Object.keys() or Object.entries() as they only return "own" properties; nor Object.getPrototypeOf(event) as that *doesn't* return "own" properties, only inherited ones.
 
-        for (let prop in event) {
-          let property = event[prop]; // Only copy over atomics, leave functions alone as these should be
-          // called as event.nativeEvent.fn()
+          for (let prop in event) {
+            let property = event[prop]; // Only copy over atomics, leave functions alone as these should be
+            // called as event.nativeEvent.fn()
 
-          if (typeof property !== 'function') extractEventProps[prop] = property;
-        }
+            if (typeof property !== 'function') extractEventProps[prop] = property;
+          }
 
-        let raycastEvent = { ...hit,
-          ...extractEventProps,
-          pointer,
-          intersections,
-          stopped: localState.stopped,
-          delta,
-          unprojectedPoint,
-          ray: raycaster.ray,
-          camera: camera,
-          // Hijack stopPropagation, which just sets a flag
-          stopPropagation: () => {
-            // https://github.com/pmndrs/react-three-fiber/issues/596
-            // Events are not allowed to stop propagation if the pointer has been captured
-            const capturesForPointer = 'pointerId' in event && internal.capturedMap.get(event.pointerId); // We only authorize stopPropagation...
-
-            if ( // ...if this pointer hasn't been captured
-            !capturesForPointer || // ... or if the hit object is capturing the pointer
-            capturesForPointer.has(hit.eventObject)) {
-              raycastEvent.stopped = localState.stopped = true; // Propagation is stopped, remove all other hover records
-              // An event handler is only allowed to flush other handlers if it is hovered itself
-
-              if (internal.hovered.size && Array.from(internal.hovered.values()).find(i => i.eventObject === hit.eventObject)) {
-                // Objects cannot flush out higher up objects that have already caught the event
-                const higher = intersections.slice(0, intersections.indexOf(hit));
-                cancelPointer([...higher, hit]);
+          let raycastEvent = { ...hit,
+            ...extractEventProps,
+            pointer,
+            intersections,
+            stopped: localState.stopped,
+            delta,
+            unprojectedPoint,
+            ray: raycaster.ray,
+            camera: camera,
+            // Hijack stopPropagation, which just sets a flag
+            stopPropagation: () => {
+              // https://github.com/pmndrs/react-three-fiber/issues/596
+              // Events are not allowed to stop propagation if the pointer has been captured
+              const capturesForPointer = 'pointerId' in event && internal.capturedMap.get(event.pointerId); // We only authorize stopPropagation...
+
+              if ( // ...if this pointer hasn't been captured
+              !capturesForPointer || // ... or if the hit object is capturing the pointer
+              capturesForPointer.has(hit.eventObject)) {
+                raycastEvent.stopped = localState.stopped = true; // Propagation is stopped, remove all other hover records
+                // An event handler is only allowed to flush other handlers if it is hovered itself
+
+                if (internal.hovered.size && Array.from(internal.hovered.values()).find(i => i.eventObject === hit.eventObject)) {
+                  // Objects cannot flush out higher up objects that have already caught the event
+                  const higher = intersections.slice(0, intersections.indexOf(hit));
+                  cancelPointer([...higher, hit]);
+                }
               }
-            }
-          },
-          // there should be a distinction between target and currentTarget
-          target: {
-            hasPointerCapture,
-            setPointerCapture,
-            releasePointerCapture
-          },
-          currentTarget: {
-            hasPointerCapture,
-            setPointerCapture,
-            releasePointerCapture
-          },
-          nativeEvent: event
-        }; // Call subscribers
-
-        callback(raycastEvent); // Event bubbling may be interrupted by stopPropagation
-
-        if (localState.stopped === true) break;
+            },
+            // there should be a distinction between target and currentTarget
+            target: {
+              hasPointerCapture,
+              setPointerCapture,
+              releasePointerCapture
+            },
+            currentTarget: {
+              hasPointerCapture,
+              setPointerCapture,
+              releasePointerCapture
+            },
+            nativeEvent: event
+          }; // Call subscribers
+
+          callback(raycastEvent); // Event bubbling may be interrupted by stopPropagation
+
+          if (localState.stopped === true) break;
+        }
       }
     }
 
@@ -1495,11 +1499,24 @@ const addAfterEffect = callback => createSubs(callback, globalAfterEffects);
 const addTail = callback => createSubs(callback, globalTailEffects);
 
 function run(effects, timestamp) {
+  if (!effects.size) return;
   effects.forEach(({
     callback
   }) => callback(timestamp));
 }
 
+function flushGlobalEffects(type, timestamp) {
+  switch (type) {
+    case 'before':
+      return run(globalEffects, timestamp);
+
+    case 'after':
+      return run(globalAfterEffects, timestamp);
+
+    case 'tail':
+      return run(globalTailEffects, timestamp);
+  }
+}
 let subscribers;
 let subscription;
 
@@ -1539,7 +1556,7 @@ function createLoop(roots) {
     running = true;
     repeat = 0; // Run effects
 
-    if (globalEffects.size) run(globalEffects, timestamp); // Render all roots
+    flushGlobalEffects('before', timestamp); // Render all roots
 
     roots.forEach(root => {
       var _state$gl$xr;
@@ -1551,11 +1568,11 @@ function createLoop(roots) {
       }
     }); // Run after-effects
 
-    if (globalAfterEffects.size) run(globalAfterEffects, timestamp); // Stop the loop if nothing invalidates it
+    flushGlobalEffects('after', timestamp); // Stop the loop if nothing invalidates it
 
     if (repeat === 0) {
       // Tail call effects, they are called when rendering stops
-      if (globalTailEffects.size) run(globalTailEffects, timestamp); // Flag end of operation
+      flushGlobalEffects('tail', timestamp); // Flag end of operation
 
       running = false;
       return cancelAnimationFrame(frame);
@@ -1577,9 +1594,9 @@ function createLoop(roots) {
   }
 
   function advance(timestamp, runGlobalEffects = true, state, frame) {
-    if (runGlobalEffects) run(globalEffects, timestamp);
+    if (runGlobalEffects) flushGlobalEffects('before', timestamp);
     if (!state) roots.forEach(root => render$1(timestamp, root.store.getState()));else render$1(timestamp, state, frame);
-    if (runGlobalEffects) run(globalAfterEffects, timestamp);
+    if (runGlobalEffects) flushGlobalEffects('after', timestamp);
   }
 
   return {
@@ -1599,6 +1616,17 @@ function createLoop(roots) {
   };
 }
 
+/**
+ * Exposes an object's {@link LocalState}.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#useInstanceHandle
+ *
+ * **Note**: this is an escape hatch to react-internal fields. Expect this to change significantly between versions.
+ */
+function useInstanceHandle(ref) {
+  const instance = React__namespace.useRef(null);
+  useIsomorphicLayoutEffect(() => void (instance.current = ref.current.__r3f), [ref]);
+  return instance;
+}
 function useStore() {
   const store = React__namespace.useContext(context);
   if (!store) throw new Error('R3F: Hooks can only be used within the Canvas component!');
@@ -2148,6 +2176,7 @@ exports.dispose = dispose;
 exports.extend = extend;
 exports.getRootState = getRootState;
 exports.invalidate = invalidate;
+exports.isRef = isRef;
 exports.reconciler = reconciler;
 exports.render = render;
 exports.roots = roots;
@@ -2155,6 +2184,7 @@ exports.threeTypes = threeTypes;
 exports.unmountComponentAtNode = unmountComponentAtNode;
 exports.useFrame = useFrame;
 exports.useGraph = useGraph;
+exports.useInstanceHandle = useInstanceHandle;
 exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
 exports.useLoader = useLoader;
 exports.useMutableCallback = useMutableCallback;

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-9a338808.cjs.dev.js');
+var index = require('./index-407f3d70.cjs.dev.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
@@ -187,7 +187,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
       onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
       onCreated: state => {
         // Connect to event source
-        state.events.connect == null ? void 0 : state.events.connect(eventSource ? eventSource : divRef.current); // Set up compute function
+        state.events.connect == null ? void 0 : state.events.connect(eventSource ? index.isRef(eventSource) ? eventSource.current : eventSource : divRef.current); // Set up compute function
 
         if (eventPrefix) {
           state.setEvents({
@@ -263,6 +263,7 @@ 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;

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-f368ca4a.cjs.prod.js');
+var index = require('./index-5350eaac.cjs.prod.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
@@ -187,7 +187,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
       onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
       onCreated: state => {
         // Connect to event source
-        state.events.connect == null ? void 0 : state.events.connect(eventSource ? eventSource : divRef.current); // Set up compute function
+        state.events.connect == null ? void 0 : state.events.connect(eventSource ? index.isRef(eventSource) ? eventSource.current : eventSource : divRef.current); // Set up compute function
 
         if (eventPrefix) {
           state.setEvents({
@@ -263,6 +263,7 @@ 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;

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

@@ -1,5 +1,5 @@
-import { c as createEvents, e as extend, u as useMutableCallback, a as createRoot, E as ErrorBoundary, B as Block, b as useIsomorphicLayoutEffect, d as unmountComponentAtNode } from './index-cecf55e8.esm.js';
-export { t as ReactThreeFiber, s as _roots, q as act, n as addAfterEffect, m as addEffect, o as addTail, l as advance, i as applyProps, f as context, c as createEvents, g as createPortal, a as createRoot, j as dispose, e as extend, p as getRootState, k as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, x as useFrame, y as useGraph, z as useLoader, v as useStore, w as useThree } from './index-cecf55e8.esm.js';
+import { c as createEvents, e as extend, u as useMutableCallback, a as createRoot, i as isRef, E as ErrorBoundary, B as Block, b as useIsomorphicLayoutEffect, d as unmountComponentAtNode } from './index-05f8627d.esm.js';
+export { t as ReactThreeFiber, v as _roots, s 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, a as createRoot, k as dispose, e as extend, q as getRootState, l as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, z as useFrame, A as useGraph, w as useInstanceHandle, C as useLoader, x as useStore, y as useThree } from './index-05f8627d.esm.js';
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import * as THREE from 'three';
@@ -160,7 +160,7 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
       onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
       onCreated: state => {
         // Connect to event source
-        state.events.connect == null ? void 0 : state.events.connect(eventSource ? eventSource : divRef.current); // Set up compute function
+        state.events.connect == null ? void 0 : state.events.connect(eventSource ? isRef(eventSource) ? eventSource.current : eventSource : divRef.current); // Set up compute function
 
         if (eventPrefix) {
           state.setEvents({

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-9a338808.cjs.dev.js');
+var index = require('../../dist/index-407f3d70.cjs.dev.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
@@ -401,6 +401,7 @@ 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;

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-f368ca4a.cjs.prod.js');
+var index = require('../../dist/index-5350eaac.cjs.prod.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
@@ -401,6 +401,7 @@ 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;

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

@@ -1,5 +1,5 @@
-import { c as createEvents, e as extend, u as useMutableCallback, a as createRoot, E as ErrorBoundary, B as Block, d as unmountComponentAtNode } from '../../dist/index-cecf55e8.esm.js';
-export { t as ReactThreeFiber, s as _roots, q as act, n as addAfterEffect, m as addEffect, o as addTail, l as advance, i as applyProps, f as context, g as createPortal, a as createRoot, j as dispose, e as extend, p as getRootState, k as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, x as useFrame, y as useGraph, z as useLoader, v as useStore, w as useThree } from '../../dist/index-cecf55e8.esm.js';
+import { c as createEvents, e as extend, u as useMutableCallback, a as createRoot, E as ErrorBoundary, B as Block, d as unmountComponentAtNode } from '../../dist/index-05f8627d.esm.js';
+export { t as ReactThreeFiber, v as _roots, s as act, o as addAfterEffect, n as addEffect, p as addTail, m as advance, j as applyProps, f as context, g as createPortal, a as createRoot, k as dispose, e as extend, q as getRootState, l as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, z as useFrame, A as useGraph, w as useInstanceHandle, C as useLoader, x as useStore, y as useThree } from '../../dist/index-05f8627d.esm.js';
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import * as THREE from 'three';

package/package.json

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