@react-three/fiber 8.6.0 → 8.7.0

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;
+    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-cf0284c7.esm.js → index-3b3bed95.esm.js}

@@ -1063,8 +1063,10 @@ function createRenderer(_roots, _getEventPriority) {
     supportsHydration: false,
     noTimeout: -1,
     appendChildToContainer: (container, child) => {
-      if (!child) return;
-      const scene = container.getState().scene; // Link current root to the default scene
+      if (!child) return; // Don't append to unmounted container
+
+      const scene = container.getState().scene;
+      if (!scene.__r3f) return; // Link current root to the default scene
 
       scene.__r3f.root = container;
       appendChild(scene, child);
@@ -1074,8 +1076,11 @@ function createRenderer(_roots, _getEventPriority) {
       removeChild(container.getState().scene, child);
     },
     insertInContainerBefore: (container, child, beforeChild) => {
-      if (!child || !beforeChild) return;
-      insertBefore(container.getState().scene, child, beforeChild);
+      if (!child || !beforeChild) return; // Don't append to unmounted container
+
+      const scene = container.getState().scene;
+      if (!scene.__r3f) return;
+      insertBefore(scene, child, beforeChild);
     },
     getRootHostContext: () => null,
     getChildHostContext: parentHostContext => parentHostContext,
@@ -1463,11 +1468,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;
 
@@ -1507,7 +1525,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;
@@ -1519,11 +1537,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);
@@ -1545,9 +1563,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 {
@@ -1567,6 +1585,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!');
@@ -2100,4 +2129,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 { useLoader as A, 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, useInstanceHandle as v, useStore as w, useThree as x, useFrame as y, useGraph as z };

package/dist/{index-8826c241.cjs.prod.js → index-846c69c6.cjs.prod.js}

@@ -1090,8 +1090,10 @@ function createRenderer(_roots, _getEventPriority) {
     supportsHydration: false,
     noTimeout: -1,
     appendChildToContainer: (container, child) => {
-      if (!child) return;
-      const scene = container.getState().scene; // Link current root to the default scene
+      if (!child) return; // Don't append to unmounted container
+
+      const scene = container.getState().scene;
+      if (!scene.__r3f) return; // Link current root to the default scene
 
       scene.__r3f.root = container;
       appendChild(scene, child);
@@ -1101,8 +1103,11 @@ function createRenderer(_roots, _getEventPriority) {
       removeChild(container.getState().scene, child);
     },
     insertInContainerBefore: (container, child, beforeChild) => {
-      if (!child || !beforeChild) return;
-      insertBefore(container.getState().scene, child, beforeChild);
+      if (!child || !beforeChild) return; // Don't append to unmounted container
+
+      const scene = container.getState().scene;
+      if (!scene.__r3f) return;
+      insertBefore(scene, child, beforeChild);
     },
     getRootHostContext: () => null,
     getChildHostContext: parentHostContext => parentHostContext,
@@ -1490,11 +1495,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;
 
@@ -1534,7 +1552,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;
@@ -1546,11 +1564,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);
@@ -1572,9 +1590,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 {
@@ -1594,6 +1612,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!');
@@ -2150,6 +2179,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-08c4a2bb.cjs.dev.js → index-b3d1f4d2.cjs.dev.js}

@@ -1090,8 +1090,10 @@ function createRenderer(_roots, _getEventPriority) {
     supportsHydration: false,
     noTimeout: -1,
     appendChildToContainer: (container, child) => {
-      if (!child) return;
-      const scene = container.getState().scene; // Link current root to the default scene
+      if (!child) return; // Don't append to unmounted container
+
+      const scene = container.getState().scene;
+      if (!scene.__r3f) return; // Link current root to the default scene
 
       scene.__r3f.root = container;
       appendChild(scene, child);
@@ -1101,8 +1103,11 @@ function createRenderer(_roots, _getEventPriority) {
       removeChild(container.getState().scene, child);
     },
     insertInContainerBefore: (container, child, beforeChild) => {
-      if (!child || !beforeChild) return;
-      insertBefore(container.getState().scene, child, beforeChild);
+      if (!child || !beforeChild) return; // Don't append to unmounted container
+
+      const scene = container.getState().scene;
+      if (!scene.__r3f) return;
+      insertBefore(scene, child, beforeChild);
     },
     getRootHostContext: () => null,
     getChildHostContext: parentHostContext => parentHostContext,
@@ -1490,11 +1495,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;
 
@@ -1534,7 +1552,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;
@@ -1546,11 +1564,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);
@@ -1572,9 +1590,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 {
@@ -1594,6 +1612,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!');
@@ -2150,6 +2179,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-08c4a2bb.cjs.dev.js');
+var index = require('./index-b3d1f4d2.cjs.dev.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
@@ -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-8826c241.cjs.prod.js');
+var index = require('./index-846c69c6.cjs.prod.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
@@ -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-cf0284c7.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-cf0284c7.esm.js';
+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-3b3bed95.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, y as useFrame, z as useGraph, v as useInstanceHandle, A as useLoader, w as useStore, x as useThree } from './index-3b3bed95.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,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('../../dist/index-08c4a2bb.cjs.dev.js');
+var index = require('../../dist/index-b3d1f4d2.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-8826c241.cjs.prod.js');
+var index = require('../../dist/index-846c69c6.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-cf0284c7.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-cf0284c7.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-3b3bed95.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, y as useFrame, z as useGraph, v as useInstanceHandle, A as useLoader, w as useStore, x as useThree } from '../../dist/index-3b3bed95.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.0",
+  "version": "8.7.0",
   "description": "A React renderer for Threejs",
   "keywords": [
     "react",