@react-three/fiber 8.0.22 → 8.0.25

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

@@ -1,9 +1,9 @@
-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;
-}
-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;
+}
+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-8ec72a6b.cjs.dev.js → index-63f47889.cjs.dev.js}

@@ -173,7 +173,7 @@ function prepare(object, state) {
       eventCount: 0,
       handlers: {},
       objects: [],
-      parents: [],
+      parent: null,
       ...state
     };
   }
@@ -287,7 +287,7 @@ function diffProps(instance, {
 } // This function applies a set of changes to the instance
 
 function applyProps$1(instance, data) {
-  var _instance$__r3f3, _root$getState, _localState$parents;
+  var _instance$__r3f3, _root$getState;
 
   // Filter equals, events and reserved props
   const localState = (_instance$__r3f3 = instance.__r3f) != null ? _instance$__r3f3 : {};
@@ -378,7 +378,7 @@ function applyProps$1(instance, data) {
     invalidateInstance(instance);
   });
 
-  if ((_localState$parents = localState.parents) != null && _localState$parents.length && rootState.internal && instance.raycast && prevHandlers !== localState.eventCount) {
+  if (localState.parent && rootState.internal && instance.raycast && prevHandlers !== localState.eventCount) {
     // Pre-emptively remove the instance from the interaction manager
     const index = rootState.internal.interaction.indexOf(instance);
     if (index > -1) rootState.internal.interaction.splice(index, 1); // Add the instance to the interaction manager only when it has handlers
@@ -871,7 +871,7 @@ function createRenderer(roots, getEventPriority) {
     if (type === 'primitive') {
       if (props.object === undefined) throw `Primitives without 'object' are invalid!`;
       const object = props.object;
-      instance = prepare(object, { ...object.__r3f,
+      instance = prepare(object, {
         type,
         root,
         attach,
@@ -913,9 +913,10 @@ function createRenderer(roots, getEventPriority) {
     if (child) {
       var _child$__r3f, _parentInstance$__r3f;
 
-      // The attach attribute implies that the object attaches itself on the parent.
-      // That is handled at commit to avoid duplication during Suspense
-      if (!((_child$__r3f = child.__r3f) != null && _child$__r3f.attach) && child.isObject3D && parentInstance.isObject3D) {
+      // The attach attribute implies that the object attaches itself on the parent
+      if ((_child$__r3f = child.__r3f) != null && _child$__r3f.attach) {
+        attach(parentInstance, child, child.__r3f.attach);
+      } else if (child.isObject3D && parentInstance.isObject3D) {
         // add in the usual parent-child way
         parentInstance.add(child);
         added = true;
@@ -925,9 +926,7 @@ function createRenderer(roots, getEventPriority) {
 
       if (!added) (_parentInstance$__r3f = parentInstance.__r3f) == null ? void 0 : _parentInstance$__r3f.objects.push(child);
       if (!child.__r3f) prepare(child, {});
-
-      child.__r3f.parents.push(parentInstance);
-
+      child.__r3f.parent = parentInstance;
       updateInstance(child);
       invalidateInstance(child);
     }
@@ -939,7 +938,9 @@ function createRenderer(roots, getEventPriority) {
     if (child) {
       var _child$__r3f2, _parentInstance$__r3f2;
 
-      if (!((_child$__r3f2 = child.__r3f) != null && _child$__r3f2.attach) && child.isObject3D && parentInstance.isObject3D) {
+      if ((_child$__r3f2 = child.__r3f) != null && _child$__r3f2.attach) {
+        attach(parentInstance, child, child.__r3f.attach);
+      } else if (child.isObject3D && parentInstance.isObject3D) {
         child.parent = parentInstance;
         child.dispatchEvent({
           type: 'added'
@@ -952,9 +953,7 @@ function createRenderer(roots, getEventPriority) {
 
       if (!added) (_parentInstance$__r3f2 = parentInstance.__r3f) == null ? void 0 : _parentInstance$__r3f2.objects.push(child);
       if (!child.__r3f) prepare(child, {});
-
-      child.__r3f.parents.push(parentInstance);
-
+      child.__r3f.parent = parentInstance;
       updateInstance(child);
       invalidateInstance(child);
     }
@@ -969,7 +968,7 @@ function createRenderer(roots, getEventPriority) {
       var _parentInstance$__r3f3, _child$__r3f3, _child$__r3f5;
 
       // Clear the parent reference
-      if (child.__r3f) child.__r3f.parents = child.__r3f.parents.filter(parent => parent !== parentInstance); // Remove child from the parents objects
+      if (child.__r3f) child.__r3f.parent = null; // Remove child from the parents objects
 
       if ((_parentInstance$__r3f3 = parentInstance.__r3f) != null && _parentInstance$__r3f3.objects) parentInstance.__r3f.objects = parentInstance.__r3f.objects.filter(x => x !== child); // Remove attachment
 
@@ -1030,10 +1029,10 @@ function createRenderer(roots, getEventPriority) {
   }
 
   function switchInstance(instance, type, newProps, fiber) {
-    var _instance$__r3f, _newInstance$__r3f;
+    var _instance$__r3f;
 
-    const parents = (_instance$__r3f = instance.__r3f) == null ? void 0 : _instance$__r3f.parents;
-    if (!(parents != null && parents.length)) return;
+    const parent = (_instance$__r3f = instance.__r3f) == null ? void 0 : _instance$__r3f.parent;
+    if (!parent) return;
     const newInstance = createInstance(type, newProps, instance.__r3f.root); // https://github.com/pmndrs/react-three-fiber/issues/1348
     // When args change the instance has to be re-constructed, which then
     // forces r3f to re-parent the children and non-scene objects
@@ -1042,34 +1041,18 @@ function createRenderer(roots, getEventPriority) {
     if (type !== 'primitive' && instance.children) {
       instance.children.forEach(child => appendChild(newInstance, child));
       instance.children = [];
-    } // Copy over child attachments
-
-
-    for (const child of instance.__r3f.objects) {
-      appendChild(newInstance, child);
-      detach(instance, child, child.__r3f.attach);
-      attach(newInstance, child, child.__r3f.attach);
     }
 
-    instance.__r3f.objects = [];
-
-    for (const parent of parents) {
-      removeChild(parent, instance);
-      appendChild(parent, newInstance);
-    } // Re-bind event handlers
+    instance.__r3f.objects.forEach(child => appendChild(newInstance, child));
 
+    instance.__r3f.objects = [];
+    removeChild(parent, instance);
+    appendChild(parent, newInstance); // Re-bind event handlers
 
     if (newInstance.raycast && newInstance.__r3f.eventCount) {
       const rootState = newInstance.__r3f.root.getState();
 
       rootState.internal.interaction.push(newInstance);
-    } // Attach instance to parent
-
-
-    if ((_newInstance$__r3f = newInstance.__r3f) != null && _newInstance$__r3f.attach) {
-      for (const parent of parents) {
-        attach(parent, newInstance, newInstance.__r3f.attach);
-      }
     } // This evil hack switches the react-internal fiber node
     [fiber, fiber.alternate].forEach(fiber => {
       if (fiber !== null) {
@@ -1110,7 +1093,7 @@ function createRenderer(roots, getEventPriority) {
       const localState = (_instance$__r3f2 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f2 : {}; // https://github.com/facebook/react/issues/20271
       // Returning true will trigger commitMount
 
-      return !!localState.handlers || !!localState.attach;
+      return !!localState.handlers;
     },
 
     prepareUpdate(instance, type, oldProps, newProps) {
@@ -1156,13 +1139,6 @@ function createRenderer(roots, getEventPriority) {
 
       if (instance.raycast && localState.handlers && localState.eventCount) {
         instance.__r3f.root.getState().internal.interaction.push(instance);
-      } // The attach attribute implies that the object attaches itself on the parent
-
-
-      if (localState.attach) {
-        for (const parent of localState.parents) {
-          attach(parent, instance, localState.attach);
-        }
       }
     },
 
@@ -1176,11 +1152,27 @@ function createRenderer(roots, getEventPriority) {
     detachDeletedInstance: () => {},
 
     hideInstance(instance) {
+      var _instance$__r3f4;
+
+      // Deatch while the instance is hidden
+      const {
+        attach: type,
+        parent
+      } = (_instance$__r3f4 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f4 : {};
+      if (type && parent) detach(parent, instance, type);
       if (instance.isObject3D) instance.visible = false;
       invalidateInstance(instance);
     },
 
     unhideInstance(instance, props) {
+      var _instance$__r3f5;
+
+      // Re-attach when the instance is unhidden
+      const {
+        attach: type,
+        parent
+      } = (_instance$__r3f5 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f5 : {};
+      if (type && parent) attach(parent, instance, type);
       if (instance.isObject3D && props.visible == null || props.visible) instance.visible = true;
       invalidateInstance(instance);
     },
@@ -1417,6 +1409,23 @@ const createStore = (invalidate, advance) => {
       oldSize = size;
       oldDpr = viewport.dpr;
     }
+  }); // Update viewport once the camera changes
+
+  let oldCamera = state.camera;
+  rootState.subscribe(() => {
+    const {
+      camera,
+      set
+    } = rootState.getState();
+
+    if (camera !== oldCamera) {
+      set(state => ({
+        viewport: { ...state.viewport,
+          ...state.viewport.getCurrentViewport(camera)
+        }
+      }));
+      oldCamera = camera;
+    }
   }); // Invalidate on any change
 
   rootState.subscribe(state => invalidate(state)); // Return root state
@@ -1605,13 +1614,14 @@ function loadingFn(extensions, onProgress) {
     }, onProgress, error => reject(`Could not load ${input}: ${error.message}`)))));
   };
 }
-
 /**
  * Synchronously loads and caches assets with a three loader.
  *
  * Note: this hook's caller must be wrapped with `React.Suspense`
  * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#useloader
  */
+
+
 function useLoader(Proto, input, extensions, onProgress) {
   // Use suspense to load async assets
   const keys = Array.isArray(input) ? input : [input];

package/dist/{index-f1b43982.esm.js → index-8d5cf4a3.esm.js}

@@ -146,7 +146,7 @@ function prepare(object, state) {
       eventCount: 0,
       handlers: {},
       objects: [],
-      parents: [],
+      parent: null,
       ...state
     };
   }
@@ -260,7 +260,7 @@ function diffProps(instance, {
 } // This function applies a set of changes to the instance
 
 function applyProps$1(instance, data) {
-  var _instance$__r3f3, _root$getState, _localState$parents;
+  var _instance$__r3f3, _root$getState;
 
   // Filter equals, events and reserved props
   const localState = (_instance$__r3f3 = instance.__r3f) != null ? _instance$__r3f3 : {};
@@ -351,7 +351,7 @@ function applyProps$1(instance, data) {
     invalidateInstance(instance);
   });
 
-  if ((_localState$parents = localState.parents) != null && _localState$parents.length && rootState.internal && instance.raycast && prevHandlers !== localState.eventCount) {
+  if (localState.parent && rootState.internal && instance.raycast && prevHandlers !== localState.eventCount) {
     // Pre-emptively remove the instance from the interaction manager
     const index = rootState.internal.interaction.indexOf(instance);
     if (index > -1) rootState.internal.interaction.splice(index, 1); // Add the instance to the interaction manager only when it has handlers
@@ -844,7 +844,7 @@ function createRenderer(roots, getEventPriority) {
     if (type === 'primitive') {
       if (props.object === undefined) throw `Primitives without 'object' are invalid!`;
       const object = props.object;
-      instance = prepare(object, { ...object.__r3f,
+      instance = prepare(object, {
         type,
         root,
         attach,
@@ -886,9 +886,10 @@ function createRenderer(roots, getEventPriority) {
     if (child) {
       var _child$__r3f, _parentInstance$__r3f;
 
-      // The attach attribute implies that the object attaches itself on the parent.
-      // That is handled at commit to avoid duplication during Suspense
-      if (!((_child$__r3f = child.__r3f) != null && _child$__r3f.attach) && child.isObject3D && parentInstance.isObject3D) {
+      // The attach attribute implies that the object attaches itself on the parent
+      if ((_child$__r3f = child.__r3f) != null && _child$__r3f.attach) {
+        attach(parentInstance, child, child.__r3f.attach);
+      } else if (child.isObject3D && parentInstance.isObject3D) {
         // add in the usual parent-child way
         parentInstance.add(child);
         added = true;
@@ -898,9 +899,7 @@ function createRenderer(roots, getEventPriority) {
 
       if (!added) (_parentInstance$__r3f = parentInstance.__r3f) == null ? void 0 : _parentInstance$__r3f.objects.push(child);
       if (!child.__r3f) prepare(child, {});
-
-      child.__r3f.parents.push(parentInstance);
-
+      child.__r3f.parent = parentInstance;
       updateInstance(child);
       invalidateInstance(child);
     }
@@ -912,7 +911,9 @@ function createRenderer(roots, getEventPriority) {
     if (child) {
       var _child$__r3f2, _parentInstance$__r3f2;
 
-      if (!((_child$__r3f2 = child.__r3f) != null && _child$__r3f2.attach) && child.isObject3D && parentInstance.isObject3D) {
+      if ((_child$__r3f2 = child.__r3f) != null && _child$__r3f2.attach) {
+        attach(parentInstance, child, child.__r3f.attach);
+      } else if (child.isObject3D && parentInstance.isObject3D) {
         child.parent = parentInstance;
         child.dispatchEvent({
           type: 'added'
@@ -925,9 +926,7 @@ function createRenderer(roots, getEventPriority) {
 
       if (!added) (_parentInstance$__r3f2 = parentInstance.__r3f) == null ? void 0 : _parentInstance$__r3f2.objects.push(child);
       if (!child.__r3f) prepare(child, {});
-
-      child.__r3f.parents.push(parentInstance);
-
+      child.__r3f.parent = parentInstance;
       updateInstance(child);
       invalidateInstance(child);
     }
@@ -942,7 +941,7 @@ function createRenderer(roots, getEventPriority) {
       var _parentInstance$__r3f3, _child$__r3f3, _child$__r3f5;
 
       // Clear the parent reference
-      if (child.__r3f) child.__r3f.parents = child.__r3f.parents.filter(parent => parent !== parentInstance); // Remove child from the parents objects
+      if (child.__r3f) child.__r3f.parent = null; // Remove child from the parents objects
 
       if ((_parentInstance$__r3f3 = parentInstance.__r3f) != null && _parentInstance$__r3f3.objects) parentInstance.__r3f.objects = parentInstance.__r3f.objects.filter(x => x !== child); // Remove attachment
 
@@ -1003,10 +1002,10 @@ function createRenderer(roots, getEventPriority) {
   }
 
   function switchInstance(instance, type, newProps, fiber) {
-    var _instance$__r3f, _newInstance$__r3f;
+    var _instance$__r3f;
 
-    const parents = (_instance$__r3f = instance.__r3f) == null ? void 0 : _instance$__r3f.parents;
-    if (!(parents != null && parents.length)) return;
+    const parent = (_instance$__r3f = instance.__r3f) == null ? void 0 : _instance$__r3f.parent;
+    if (!parent) return;
     const newInstance = createInstance(type, newProps, instance.__r3f.root); // https://github.com/pmndrs/react-three-fiber/issues/1348
     // When args change the instance has to be re-constructed, which then
     // forces r3f to re-parent the children and non-scene objects
@@ -1015,34 +1014,18 @@ function createRenderer(roots, getEventPriority) {
     if (type !== 'primitive' && instance.children) {
       instance.children.forEach(child => appendChild(newInstance, child));
       instance.children = [];
-    } // Copy over child attachments
-
-
-    for (const child of instance.__r3f.objects) {
-      appendChild(newInstance, child);
-      detach(instance, child, child.__r3f.attach);
-      attach(newInstance, child, child.__r3f.attach);
     }
 
-    instance.__r3f.objects = [];
-
-    for (const parent of parents) {
-      removeChild(parent, instance);
-      appendChild(parent, newInstance);
-    } // Re-bind event handlers
+    instance.__r3f.objects.forEach(child => appendChild(newInstance, child));
 
+    instance.__r3f.objects = [];
+    removeChild(parent, instance);
+    appendChild(parent, newInstance); // Re-bind event handlers
 
     if (newInstance.raycast && newInstance.__r3f.eventCount) {
       const rootState = newInstance.__r3f.root.getState();
 
       rootState.internal.interaction.push(newInstance);
-    } // Attach instance to parent
-
-
-    if ((_newInstance$__r3f = newInstance.__r3f) != null && _newInstance$__r3f.attach) {
-      for (const parent of parents) {
-        attach(parent, newInstance, newInstance.__r3f.attach);
-      }
     } // This evil hack switches the react-internal fiber node
     [fiber, fiber.alternate].forEach(fiber => {
       if (fiber !== null) {
@@ -1083,7 +1066,7 @@ function createRenderer(roots, getEventPriority) {
       const localState = (_instance$__r3f2 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f2 : {}; // https://github.com/facebook/react/issues/20271
       // Returning true will trigger commitMount
 
-      return !!localState.handlers || !!localState.attach;
+      return !!localState.handlers;
     },
 
     prepareUpdate(instance, type, oldProps, newProps) {
@@ -1129,13 +1112,6 @@ function createRenderer(roots, getEventPriority) {
 
       if (instance.raycast && localState.handlers && localState.eventCount) {
         instance.__r3f.root.getState().internal.interaction.push(instance);
-      } // The attach attribute implies that the object attaches itself on the parent
-
-
-      if (localState.attach) {
-        for (const parent of localState.parents) {
-          attach(parent, instance, localState.attach);
-        }
       }
     },
 
@@ -1149,11 +1125,27 @@ function createRenderer(roots, getEventPriority) {
     detachDeletedInstance: () => {},
 
     hideInstance(instance) {
+      var _instance$__r3f4;
+
+      // Deatch while the instance is hidden
+      const {
+        attach: type,
+        parent
+      } = (_instance$__r3f4 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f4 : {};
+      if (type && parent) detach(parent, instance, type);
       if (instance.isObject3D) instance.visible = false;
       invalidateInstance(instance);
     },
 
     unhideInstance(instance, props) {
+      var _instance$__r3f5;
+
+      // Re-attach when the instance is unhidden
+      const {
+        attach: type,
+        parent
+      } = (_instance$__r3f5 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f5 : {};
+      if (type && parent) attach(parent, instance, type);
       if (instance.isObject3D && props.visible == null || props.visible) instance.visible = true;
       invalidateInstance(instance);
     },
@@ -1390,6 +1382,23 @@ const createStore = (invalidate, advance) => {
       oldSize = size;
       oldDpr = viewport.dpr;
     }
+  }); // Update viewport once the camera changes
+
+  let oldCamera = state.camera;
+  rootState.subscribe(() => {
+    const {
+      camera,
+      set
+    } = rootState.getState();
+
+    if (camera !== oldCamera) {
+      set(state => ({
+        viewport: { ...state.viewport,
+          ...state.viewport.getCurrentViewport(camera)
+        }
+      }));
+      oldCamera = camera;
+    }
   }); // Invalidate on any change
 
   rootState.subscribe(state => invalidate(state)); // Return root state
@@ -1578,13 +1587,14 @@ function loadingFn(extensions, onProgress) {
     }, onProgress, error => reject(`Could not load ${input}: ${error.message}`)))));
   };
 }
-
 /**
  * Synchronously loads and caches assets with a three loader.
  *
  * Note: this hook's caller must be wrapped with `React.Suspense`
  * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#useloader
  */
+
+
 function useLoader(Proto, input, extensions, onProgress) {
   // Use suspense to load async assets
   const keys = Array.isArray(input) ? input : [input];