@react-three/fiber 8.6.1 → 8.7.1

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

@@ -1,11 +1,11 @@
-import * as React from 'react';
-import type { Options as ResizeOptions } from 'react-use-measure';
-import { RenderProps } from '../core';
-export interface Props extends Omit<RenderProps<HTMLCanvasElement>, 'size'>, React.HTMLAttributes<HTMLDivElement> {
-    children: React.ReactNode;
-    fallback?: React.ReactNode;
-    resize?: ResizeOptions;
-    eventSource?: HTMLElement;
-    eventPrefix?: 'offset' | 'client' | 'page' | 'layer' | 'screen';
-}
-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 Props 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 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-cecf55e8.esm.js → index-44001bdc.esm.js}

@@ -12,6 +12,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.
  *
@@ -1468,11 +1469,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;
 
@@ -1512,7 +1526,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;
@@ -1524,11 +1538,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);
@@ -1550,9 +1564,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 {
@@ -1572,6 +1586,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.useRef(null);
+  useIsomorphicLayoutEffect(() => void (instance.current = ref.current.__r3f), [ref]);
+  return instance;
+}
 function useStore() {
   const store = React.useContext(context);
   if (!store) throw new Error('R3F: Hooks can only be used within the Canvas component!');
@@ -2105,4 +2130,4 @@ reconciler.injectIntoDevTools({
 });
 const act = React.unstable_act;
 
-export { Block as B, ErrorBoundary as E, createRoot as a, useIsomorphicLayoutEffect as b, createEvents as c, unmountComponentAtNode as d, extend as e, context as f, createPortal as g, reconciler as h, applyProps as i, dispose as j, invalidate as k, advance as l, addEffect as m, addAfterEffect as n, addTail as o, getRootState as p, act as q, render as r, roots as s, threeTypes as t, useMutableCallback as u, useStore as v, useThree as w, useFrame as x, useGraph as y, useLoader as z };
+export { useGraph as A, Block as B, useLoader as C, ErrorBoundary as E, createRoot as a, useIsomorphicLayoutEffect as b, createEvents as c, unmountComponentAtNode as d, extend as e, context as f, createPortal as g, reconciler as h, isRef as i, applyProps as j, dispose as k, invalidate as l, advance as m, addEffect as n, addAfterEffect as o, addTail as p, getRootState as q, render as r, act as s, threeTypes as t, useMutableCallback as u, roots as v, useInstanceHandle as w, useStore as x, useThree as y, useFrame as z };

package/dist/{index-f368ca4a.cjs.prod.js → index-af0d582a.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.
  *
@@ -1495,11 +1496,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 +1553,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 +1565,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 +1591,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 +1613,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 +2173,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 +2181,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/{index-9a338808.cjs.dev.js → index-f9709241.cjs.dev.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.
  *
@@ -1495,11 +1496,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 +1553,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 +1565,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 +1591,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 +1613,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 +2173,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 +2181,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-f9709241.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-af0d582a.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-44001bdc.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-44001bdc.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-f9709241.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-af0d582a.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-44001bdc.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-44001bdc.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.1",
+  "version": "8.7.1",
   "description": "A React renderer for Threejs",
   "keywords": [
     "react",