@react-three/fiber 7.0.6 → 7.0.7

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @react-three/fiber
 
+## 7.0.7
+
+### Patch Changes
+
+- 0375896: Simplify useframe, support instanced event cancelation, silence disposal
+
 ## 7.0.6
 
 ### Patch Changes

package/dist/declarations/src/core/hooks.d.ts

@@ -17,6 +17,7 @@ export declare type ObjectMap = {
         [name: string]: THREE.Material;
     };
 };
+export declare function useStore(): import("zustand").UseStore<RootState>;
 export declare function useThree<T = RootState>(selector?: StateSelector<RootState, T>, equalityFn?: EqualityChecker<T>): T;
 export declare function useFrame(callback: RenderCallback, renderPriority?: number): null;
 export declare function useGraph(object: THREE.Object3D): ObjectMap;

package/dist/declarations/src/three-types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import * as THREE from 'three';
 import { EventHandlers } from './core/events';
 export declare type NonFunctionKeys<T> = {

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

@@ -13,7 +13,7 @@ declare const modes: readonly ["legacy", "blocking", "concurrent"];
 declare const invalidate: (state?: RootState | undefined) => void, advance: (timestamp: number, runGlobalEffects?: boolean, state?: RootState | undefined) => void;
 declare const reconciler: import("react-reconciler").Reconciler<unknown, unknown, unknown, unknown, unknown>, applyProps: (instance: import("../core/renderer").Instance, newProps: import("../core/renderer").InstanceProps, oldProps?: import("../core/renderer").InstanceProps, accumulative?: boolean) => void;
 export declare type RenderProps<TCanvas extends Element> = Omit<StoreProps, 'gl' | 'events' | 'size'> & {
-    gl?: THREE.WebGLRenderer | THREE.WebGLRendererParameters;
+    gl?: THREE.WebGLRenderer | Partial<THREE.WebGLRendererParameters>;
     events?: (store: UseStore<RootState>) => EventManager<TCanvas>;
     size?: Size;
     mode?: typeof modes[number];

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

@@ -74,7 +74,7 @@ const is = {
 };
 
 function makeId(event) {
-  return (event.eventObject || event.object).uuid + '/' + event.index;
+  return (event.eventObject || event.object).uuid + '/' + event.index + event.instanceId;
 }
 
 function removeInteractivity(store, object) {
@@ -306,7 +306,7 @@ function createEvents(store) {
     Array.from(internal.hovered.values()).forEach(hoveredObj => {
       // When no objects were hit or the the hovered object wasn't found underneath the cursor
       // we call onPointerOut and delete the object from the hovered-elements map
-      if (!hits.length || !hits.find(hit => hit.object === hoveredObj.object && hit.index === hoveredObj.index)) {
+      if (!hits.length || !hits.find(hit => hit.object === hoveredObj.object && hit.index === hoveredObj.index && hit.instanceId === hoveredObj.instanceId)) {
         const eventObject = hoveredObj.eventObject;
         const handlers = eventObject.__r3f.handlers;
         internal.hovered.delete(makeId(hoveredObj));
@@ -844,7 +844,7 @@ function createRenderer(roots) {
       // Never dispose of primitives because their state may be kept outside of React!
       // In order for an object to be able to dispose it has to have
       //   - a dispose method,
-      //   - it cannot be an <instance object={...} />
+      //   - it cannot be a <primitive object={...} />
       //   - it cannot be a THREE.Scene, because three has broken it's own api
       //
       // Since disposal is recursive, we can check the optional dispose arg, which will be undefined
@@ -873,7 +873,13 @@ function createRenderer(roots) {
 
 
       if (shouldDispose && child.dispose && child.type !== 'Scene') {
-        scheduler.unstable_runWithPriority(scheduler.unstable_IdlePriority, () => child.dispose());
+        scheduler.unstable_runWithPriority(scheduler.unstable_IdlePriority, () => {
+          try {
+            child.dispose();
+          } catch (e) {
+            /* ... */
+          }
+        });
       }
 
       invalidateInstance(parentInstance);
@@ -1256,8 +1262,8 @@ const createStore = (applyProps, invalidate, advance, props) => {
             internal: { ...internal,
               // If this subscription was given a priority, it takes rendering into its own hands
               // For that reason we switch off automatic rendering and increase the manual flag
-              // As long as this flag is positive (there could be multiple render subscription)
-              // ..there can be no internal rendering at all
+              // As long as this flag is positive there can be no internal rendering at all
+              // because there could be multiple render subscriptions
               priority: internal.priority + (priority > 0 ? 1 : 0),
               // Register subscriber and sort layers from lowest to highest, meaning,
               // highest priority renders last (on top of the other frames)
@@ -1577,23 +1583,21 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   }, fallback));
 });
 
+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) {
-  const useStore = React__namespace.useContext(context);
-  if (!useStore) throw `R3F hooks can only be used within the Canvas component!`;
-  return useStore(selector, equalityFn);
+  return useStore()(selector, equalityFn);
 }
 function useFrame(callback, renderPriority = 0) {
-  const {
-    subscribe
-  } = React__namespace.useContext(context).getState().internal; // Update ref
+  const subscribe = useStore().getState().internal.subscribe; // Update ref
 
   const ref = React__namespace.useRef(callback);
-  React__namespace.useLayoutEffect(() => void (ref.current = callback), [callback]); // Subscribe/unsub
+  React__namespace.useLayoutEffect(() => void (ref.current = callback), [callback]); // Subscribe on mount, unsubscribe on unmount
 
-  React__namespace.useLayoutEffect(() => {
-    const unsubscribe = subscribe(ref, renderPriority);
-    return () => unsubscribe();
-  }, [renderPriority, subscribe]);
+  React__namespace.useLayoutEffect(() => subscribe(ref, renderPriority), [renderPriority]);
   return null;
 }
 
@@ -1856,4 +1860,5 @@ exports.unmountComponentAtNode = unmountComponentAtNode;
 exports.useFrame = useFrame;
 exports.useGraph = useGraph;
 exports.useLoader = useLoader;
+exports.useStore = useStore;
 exports.useThree = useThree;

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

@@ -74,7 +74,7 @@ const is = {
 };
 
 function makeId(event) {
-  return (event.eventObject || event.object).uuid + '/' + event.index;
+  return (event.eventObject || event.object).uuid + '/' + event.index + event.instanceId;
 }
 
 function removeInteractivity(store, object) {
@@ -306,7 +306,7 @@ function createEvents(store) {
     Array.from(internal.hovered.values()).forEach(hoveredObj => {
       // When no objects were hit or the the hovered object wasn't found underneath the cursor
       // we call onPointerOut and delete the object from the hovered-elements map
-      if (!hits.length || !hits.find(hit => hit.object === hoveredObj.object && hit.index === hoveredObj.index)) {
+      if (!hits.length || !hits.find(hit => hit.object === hoveredObj.object && hit.index === hoveredObj.index && hit.instanceId === hoveredObj.instanceId)) {
         const eventObject = hoveredObj.eventObject;
         const handlers = eventObject.__r3f.handlers;
         internal.hovered.delete(makeId(hoveredObj));
@@ -844,7 +844,7 @@ function createRenderer(roots) {
       // Never dispose of primitives because their state may be kept outside of React!
       // In order for an object to be able to dispose it has to have
       //   - a dispose method,
-      //   - it cannot be an <instance object={...} />
+      //   - it cannot be a <primitive object={...} />
       //   - it cannot be a THREE.Scene, because three has broken it's own api
       //
       // Since disposal is recursive, we can check the optional dispose arg, which will be undefined
@@ -873,7 +873,13 @@ function createRenderer(roots) {
 
 
       if (shouldDispose && child.dispose && child.type !== 'Scene') {
-        scheduler.unstable_runWithPriority(scheduler.unstable_IdlePriority, () => child.dispose());
+        scheduler.unstable_runWithPriority(scheduler.unstable_IdlePriority, () => {
+          try {
+            child.dispose();
+          } catch (e) {
+            /* ... */
+          }
+        });
       }
 
       invalidateInstance(parentInstance);
@@ -1256,8 +1262,8 @@ const createStore = (applyProps, invalidate, advance, props) => {
             internal: { ...internal,
               // If this subscription was given a priority, it takes rendering into its own hands
               // For that reason we switch off automatic rendering and increase the manual flag
-              // As long as this flag is positive (there could be multiple render subscription)
-              // ..there can be no internal rendering at all
+              // As long as this flag is positive there can be no internal rendering at all
+              // because there could be multiple render subscriptions
               priority: internal.priority + (priority > 0 ? 1 : 0),
               // Register subscriber and sort layers from lowest to highest, meaning,
               // highest priority renders last (on top of the other frames)
@@ -1577,23 +1583,21 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   }, fallback));
 });
 
+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) {
-  const useStore = React__namespace.useContext(context);
-  if (!useStore) throw `R3F hooks can only be used within the Canvas component!`;
-  return useStore(selector, equalityFn);
+  return useStore()(selector, equalityFn);
 }
 function useFrame(callback, renderPriority = 0) {
-  const {
-    subscribe
-  } = React__namespace.useContext(context).getState().internal; // Update ref
+  const subscribe = useStore().getState().internal.subscribe; // Update ref
 
   const ref = React__namespace.useRef(callback);
-  React__namespace.useLayoutEffect(() => void (ref.current = callback), [callback]); // Subscribe/unsub
+  React__namespace.useLayoutEffect(() => void (ref.current = callback), [callback]); // Subscribe on mount, unsubscribe on unmount
 
-  React__namespace.useLayoutEffect(() => {
-    const unsubscribe = subscribe(ref, renderPriority);
-    return () => unsubscribe();
-  }, [renderPriority, subscribe]);
+  React__namespace.useLayoutEffect(() => subscribe(ref, renderPriority), [renderPriority]);
   return null;
 }
 
@@ -1856,4 +1860,5 @@ exports.unmountComponentAtNode = unmountComponentAtNode;
 exports.useFrame = useFrame;
 exports.useGraph = useGraph;
 exports.useLoader = useLoader;
+exports.useStore = useStore;
 exports.useThree = useThree;

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

@@ -40,7 +40,7 @@ const is = {
 };
 
 function makeId(event) {
-  return (event.eventObject || event.object).uuid + '/' + event.index;
+  return (event.eventObject || event.object).uuid + '/' + event.index + event.instanceId;
 }
 
 function removeInteractivity(store, object) {
@@ -272,7 +272,7 @@ function createEvents(store) {
     Array.from(internal.hovered.values()).forEach(hoveredObj => {
       // When no objects were hit or the the hovered object wasn't found underneath the cursor
       // we call onPointerOut and delete the object from the hovered-elements map
-      if (!hits.length || !hits.find(hit => hit.object === hoveredObj.object && hit.index === hoveredObj.index)) {
+      if (!hits.length || !hits.find(hit => hit.object === hoveredObj.object && hit.index === hoveredObj.index && hit.instanceId === hoveredObj.instanceId)) {
         const eventObject = hoveredObj.eventObject;
         const handlers = eventObject.__r3f.handlers;
         internal.hovered.delete(makeId(hoveredObj));
@@ -810,7 +810,7 @@ function createRenderer(roots) {
       // Never dispose of primitives because their state may be kept outside of React!
       // In order for an object to be able to dispose it has to have
       //   - a dispose method,
-      //   - it cannot be an <instance object={...} />
+      //   - it cannot be a <primitive object={...} />
       //   - it cannot be a THREE.Scene, because three has broken it's own api
       //
       // Since disposal is recursive, we can check the optional dispose arg, which will be undefined
@@ -839,7 +839,13 @@ function createRenderer(roots) {
 
 
       if (shouldDispose && child.dispose && child.type !== 'Scene') {
-        unstable_runWithPriority(unstable_IdlePriority, () => child.dispose());
+        unstable_runWithPriority(unstable_IdlePriority, () => {
+          try {
+            child.dispose();
+          } catch (e) {
+            /* ... */
+          }
+        });
       }
 
       invalidateInstance(parentInstance);
@@ -1222,8 +1228,8 @@ const createStore = (applyProps, invalidate, advance, props) => {
             internal: { ...internal,
               // If this subscription was given a priority, it takes rendering into its own hands
               // For that reason we switch off automatic rendering and increase the manual flag
-              // As long as this flag is positive (there could be multiple render subscription)
-              // ..there can be no internal rendering at all
+              // As long as this flag is positive there can be no internal rendering at all
+              // because there could be multiple render subscriptions
               priority: internal.priority + (priority > 0 ? 1 : 0),
               // Register subscriber and sort layers from lowest to highest, meaning,
               // highest priority renders last (on top of the other frames)
@@ -1543,23 +1549,21 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
   }, fallback));
 });
 
+function useStore() {
+  const store = React.useContext(context);
+  if (!store) throw `R3F hooks can only be used within the Canvas component!`;
+  return store;
+}
 function useThree(selector = state => state, equalityFn) {
-  const useStore = React.useContext(context);
-  if (!useStore) throw `R3F hooks can only be used within the Canvas component!`;
-  return useStore(selector, equalityFn);
+  return useStore()(selector, equalityFn);
 }
 function useFrame(callback, renderPriority = 0) {
-  const {
-    subscribe
-  } = React.useContext(context).getState().internal; // Update ref
+  const subscribe = useStore().getState().internal.subscribe; // Update ref
 
   const ref = React.useRef(callback);
-  React.useLayoutEffect(() => void (ref.current = callback), [callback]); // Subscribe/unsub
+  React.useLayoutEffect(() => void (ref.current = callback), [callback]); // Subscribe on mount, unsubscribe on unmount
 
-  React.useLayoutEffect(() => {
-    const unsubscribe = subscribe(ref, renderPriority);
-    return () => unsubscribe();
-  }, [renderPriority, subscribe]);
+  React.useLayoutEffect(() => subscribe(ref, renderPriority), [renderPriority]);
   return null;
 }
 
@@ -1801,4 +1805,4 @@ reconciler.injectIntoDevTools({
   version: '17.0.2'
 });
 
-export { Canvas, threeTypes as ReactThreeFiber, roots as _roots, act, addAfterEffect, addEffect, addTail, advance, applyProps, context, createPortal, dispose, createPointerEvents as events, extend, invalidate, reconciler, render, unmountComponentAtNode, useFrame, useGraph, useLoader, useThree };
+export { Canvas, threeTypes as ReactThreeFiber, roots as _roots, act, addAfterEffect, addEffect, addTail, advance, applyProps, context, createPortal, dispose, createPointerEvents as events, extend, invalidate, reconciler, render, unmountComponentAtNode, useFrame, useGraph, useLoader, useStore, useThree };

package/package.json

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