@react-three/fiber 9.6.0 → 9.7.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @react-three/fiber
 
+## 9.7.0
+
+### Minor Changes
+
+- c340195e7129d6b244a9eb11c0c10573954d03ef: Match React DOM event priorities and microtask scheduling so reconciler updates flush with consistent priority and timing.
+
+### Patch Changes
+
+- c340195e7129d6b244a9eb11c0c10573954d03ef: Harden internal instance synchronization after keyed reorders and batched reconstruction, and correctly reset pierced props.
+
+## 9.6.1
+
+### Patch Changes
+
+- b645741874486417727ea75a0704d48e9f21d623: fix: Seamlessly transfer interactivity state when swapping instances
+
 ## 9.6.0
 
 ### Minor Changes

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

@@ -86,6 +86,8 @@ export interface PointerCaptureTarget {
     intersection: Intersection;
     target: Element;
 }
+/** This function transfers all interactivity state from one object instance to another. Used when swapping instances due to reconstruction. */
+export declare function swapInteractivity(store: RootStore, object: THREE.Object3D, newObject: THREE.Object3D): void;
 export declare function removeInteractivity(store: RootStore, object: THREE.Object3D): void;
 export declare function createEvents(store: RootStore): {
     handlePointer: (name: string) => (event: DomEvent) => void;

package/dist/{events-760a1017.esm.js → events-156d8d12.esm.js}

@@ -3,7 +3,7 @@ import React__default from 'react';
 import * as THREE from 'three';
 import { createWithEqualityFn } from 'zustand/traditional';
 import { suspend, preload, clear } from 'suspend-react';
-import Tb, { unstable_scheduleCallback, unstable_IdlePriority } from 'scheduler';
+import Tb, { unstable_getCurrentPriorityLevel, unstable_IdlePriority, unstable_LowPriority, unstable_NormalPriority, unstable_UserBlockingPriority, unstable_ImmediatePriority, unstable_scheduleCallback } from 'scheduler';
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { useFiber, useContextBridge, traverseFiber } from 'its-fine';
 
@@ -355,10 +355,10 @@ function diffProps(instance, newProps) {
     if (root.constructor && root.constructor.length === 0) {
       // create a blank slate of the instance and copy the particular parameter.
       const ctor = getMemoizedPrototype(root);
-      if (!is.und(ctor)) changedProps[key] = ctor[key];
+      if (!is.und(ctor)) changedProps[prop] = ctor[key];
     } else {
       // instance does not have constructor, just set it to 0
-      changedProps[key] = 0;
+      changedProps[prop] = 0;
     }
   }
   return changedProps;
@@ -517,6 +517,37 @@ function releaseInternalPointerCapture(capturedMap, obj, captures, pointerId) {
     }
   }
 }
+
+/** This function transfers all interactivity state from one object instance to another. Used when swapping instances due to reconstruction. */
+function swapInteractivity(store, object, newObject) {
+  const {
+    internal
+  } = store.getState();
+  for (let i = 0; i < internal.interaction.length; i++) {
+    if (internal.interaction[i] === object) internal.interaction[i] = newObject;
+  }
+  for (let i = 0; i < internal.initialHits.length; i++) {
+    if (internal.initialHits[i] === object) internal.initialHits[i] = newObject;
+  }
+  internal.hovered.forEach((value, key) => {
+    if (value.eventObject === object || value.object === object) {
+      internal.hovered.delete(key);
+      const next = {
+        ...value,
+        eventObject: value.eventObject === object ? newObject : value.eventObject,
+        object: value.object === object ? newObject : value.object
+      };
+      internal.hovered.set(makeId(next), next);
+    }
+  });
+  internal.capturedMap.forEach(captures => {
+    const captureData = captures.get(object);
+    if (captureData) {
+      captures.delete(object);
+      captures.set(newObject, captureData);
+    }
+  });
+}
 function removeInteractivity(store, object) {
   const {
     internal
@@ -1280,11 +1311,12 @@ useLoader.clear = function (loader, input) {
  */const t = 1,
   o = 8,
   r = 32,
-  e = 2;
+  e = 2,
+  i$1 = 268435456;
 
 var packageData = {
 	name: "@react-three/fiber",
-	version: "9.6.0",
+	version: "9.7.0",
 	description: "A React renderer for Threejs",
 	keywords: [
 		"react",
@@ -15120,6 +15152,12 @@ function handleContainerEffects(parent, child, beforeChild) {
 function appendChild(parent, child) {
   if (!child) return;
 
+  // Move an existing child instead of duplicating it
+  if (child.parent === parent) {
+    const childIndex = parent.children.indexOf(child);
+    if (childIndex !== -1) parent.children.splice(childIndex, 1);
+  }
+
   // Link instances
   child.parent = parent;
   parent.children.push(child);
@@ -15130,6 +15168,12 @@ function appendChild(parent, child) {
 function insertBefore(parent, child, beforeChild) {
   if (!child || !beforeChild) return;
 
+  // Move an existing child instead of duplicating it.
+  if (child.parent === parent) {
+    const childIndex = parent.children.indexOf(child);
+    if (childIndex !== -1) parent.children.splice(childIndex, 1);
+  }
+
   // Link instances
   child.parent = parent;
   const childIndex = parent.children.indexOf(beforeChild);
@@ -15210,7 +15254,15 @@ function setFiberRef(fiber, publicInstance) {
   }
 }
 const reconstructed = [];
-function swapInstances() {
+function flushReconstructedInstances() {
+  if (reconstructed.length === 0) return;
+  try {
+    swapReconstructedInstances();
+  } finally {
+    reconstructed.length = 0;
+  }
+}
+function swapReconstructedInstances() {
   // Detach instance
   for (const [instance] of reconstructed) {
     const parent = instance.parent;
@@ -15250,11 +15302,11 @@ function swapInstances() {
       const target = catalogue[toPascalCase(instance.type)];
 
       // Create object
+      const prevObject = instance.object;
       instance.object = (_instance$props$objec = instance.props.object) != null ? _instance$props$objec : new target(...((_instance$props$args = instance.props.args) != null ? _instance$props$args : []));
       instance.object.__r3f = instance;
       setFiberRef(fiber, instance.object);
-
-      // Set initial props
+      swapInteractivity(findInitialRoot(instance), prevObject, instance.object);
       applyProps(instance.object, instance.props);
       if (instance.props.attach) {
         attach(parent, instance);
@@ -15273,7 +15325,6 @@ function swapInstances() {
       invalidateInstance(instance);
     }
   }
-  reconstructed.length = 0;
 }
 
 // Don't handle text instances, make it no-op
@@ -15281,9 +15332,112 @@ const handleTextInstance = () => {};
 const NO_CONTEXT = {};
 let currentUpdatePriority = NoEventPriority;
 
-// https://github.com/facebook/react/blob/main/packages/react-reconciler/src/ReactFiberFlags.js
-const NoFlags = 0;
-const Update = 4;
+// Mirrors react-dom's getEventPriority for parity with events outside of React
+// https://github.com/facebook/react/blob/main/packages/react-dom-bindings/src/events/ReactDOMEventListener.js
+function getEventPriority(type) {
+  switch (type) {
+    case 'beforetoggle':
+    case 'cancel':
+    case 'click':
+    case 'close':
+    case 'contextmenu':
+    case 'copy':
+    case 'cut':
+    case 'auxclick':
+    case 'dblclick':
+    case 'dragend':
+    case 'dragstart':
+    case 'drop':
+    case 'focusin':
+    case 'focusout':
+    case 'input':
+    case 'invalid':
+    case 'keydown':
+    case 'keypress':
+    case 'keyup':
+    case 'mousedown':
+    case 'mouseup':
+    case 'paste':
+    case 'pause':
+    case 'play':
+    case 'pointercancel':
+    case 'pointerdown':
+    case 'pointerup':
+    case 'ratechange':
+    case 'reset':
+    case 'resize':
+    case 'seeked':
+    case 'submit':
+    case 'touchcancel':
+    case 'touchend':
+    case 'touchstart':
+    case 'volumechange':
+    case 'change':
+    case 'selectionchange':
+    case 'compositionstart':
+    case 'compositionend':
+    case 'compositionupdate':
+    case 'beforeinput':
+    case 'blur':
+    case 'fullscreenchange':
+    case 'focus':
+    case 'hashchange':
+    case 'popstate':
+    case 'select':
+    case 'selectstart':
+      return e;
+    case 'drag':
+    case 'dragenter':
+    case 'dragexit':
+    case 'dragleave':
+    case 'dragover':
+    case 'mousemove':
+    case 'mouseout':
+    case 'mouseover':
+    case 'pointermove':
+    case 'pointerout':
+    case 'pointerover':
+    case 'scroll':
+    case 'touchmove':
+    case 'wheel':
+    case 'mouseenter':
+    case 'mouseleave':
+    case 'pointerenter':
+    case 'pointerleave':
+      return o;
+    case 'message':
+      {
+        switch (unstable_getCurrentPriorityLevel()) {
+          case unstable_ImmediatePriority:
+            return e;
+          case unstable_UserBlockingPriority:
+            return o;
+          case unstable_NormalPriority:
+          case unstable_LowPriority:
+            return r;
+          case unstable_IdlePriority:
+            return i$1;
+          default:
+            return r;
+        }
+      }
+    default:
+      return r;
+  }
+}
+function scheduleMicrotask(callback) {
+  if (typeof queueMicrotask === 'function') {
+    queueMicrotask(callback);
+  } else if (typeof Promise !== 'undefined') {
+    Promise.resolve().then(callback).catch(error => {
+      setTimeout(() => {
+        throw error;
+      });
+    });
+  } else {
+    setTimeout(callback);
+  }
+}
 const reconciler = /* @__PURE__ */createReconciler({
   isPrimaryRenderer: false,
   warnsIfNotActing: false,
@@ -15327,30 +15481,30 @@ const reconciler = /* @__PURE__ */createReconciler({
       return value !== ((_oldProps$args2 = oldProps.args) == null ? void 0 : _oldProps$args2[index]);
     })) reconstruct = true;
 
-    // Reconstruct when args or <primitive object={...} have changes
+    // Reconstruct when args or <primitive object={...} have changes.
+    // Instances are swapped at the end of the mutation phase (resetAfterCommit)
     if (reconstruct) {
-      reconstructed.push([instance, {
-        ...newProps
-      }, fiber]);
+      reconstructed.push([instance, getInstanceProps(newProps), fiber]);
     } else {
       // Create a diff-set, flag if there are any changes
       const changedProps = diffProps(instance, newProps);
-      if (Object.keys(changedProps).length) {
-        Object.assign(instance.props, changedProps);
-        applyProps(instance.object, changedProps);
-      }
-    }
 
-    // Flush reconstructed siblings when we hit the last updated child in a sequence
-    const isTailSibling = fiber.sibling === null || (fiber.flags & Update) === NoFlags;
-    if (isTailSibling) swapInstances();
+      // Replace the old prop snapshot after computing the diff
+      //`attach` is preserved since it cannot be updated dynamically
+      const attach = instance.props.attach;
+      instance.props = getInstanceProps(newProps);
+      if (attach !== undefined) instance.props.attach = attach;else delete instance.props.attach;
+      if (Object.keys(changedProps).length) applyProps(instance.object, changedProps);
+    }
   },
   finalizeInitialChildren: () => false,
   commitMount() {},
   getPublicInstance: instance => instance == null ? void 0 : instance.object,
   prepareForCommit: () => null,
   preparePortalMount: container => prepare(container.getState().scene, container, '', {}),
-  resetAfterCommit: () => {},
+  // Reconstructed instances are swapped once all mutations are committed,
+  // before layout effects run so refs point to the new objects
+  resetAfterCommit: flushReconstructedInstances,
   shouldSetTextContent: () => false,
   clearContainer: () => false,
   hideInstance,
@@ -15358,6 +15512,9 @@ const reconciler = /* @__PURE__ */createReconciler({
   createTextInstance: handleTextInstance,
   hideTextInstance: handleTextInstance,
   unhideTextInstance: handleTextInstance,
+  // Mirrors react-dom, which flushes discrete work in microtasks
+  supportsMicrotasks: true,
+  scheduleMicrotask,
   scheduleTimeout: typeof setTimeout === 'function' ? setTimeout : undefined,
   cancelTimeout: typeof clearTimeout === 'function' ? clearTimeout : undefined,
   noTimeout: -1,
@@ -15390,24 +15547,9 @@ const reconciler = /* @__PURE__ */createReconciler({
   resolveUpdatePriority() {
     var _window$event;
     if (currentUpdatePriority !== NoEventPriority) return currentUpdatePriority;
-    switch (typeof window !== 'undefined' && ((_window$event = window.event) == null ? void 0 : _window$event.type)) {
-      case 'click':
-      case 'contextmenu':
-      case 'dblclick':
-      case 'pointercancel':
-      case 'pointerdown':
-      case 'pointerup':
-        return e;
-      case 'pointermove':
-      case 'pointerout':
-      case 'pointerover':
-      case 'pointerenter':
-      case 'pointerleave':
-      case 'wheel':
-        return o;
-      default:
-        return r;
-    }
+    const eventType = typeof window !== 'undefined' ? (_window$event = window.event) == null ? void 0 : _window$event.type : undefined;
+    if (eventType === undefined) return r;
+    return getEventPriority(eventType);
   },
   resetFormInstance() {},
   // @ts-ignore DefinitelyTyped is not up to date

package/dist/{events-11ca7a92.cjs.prod.js → events-4c71f21f.cjs.prod.js}

@@ -380,10 +380,10 @@ function diffProps(instance, newProps) {
     if (root.constructor && root.constructor.length === 0) {
       // create a blank slate of the instance and copy the particular parameter.
       const ctor = getMemoizedPrototype(root);
-      if (!is.und(ctor)) changedProps[key] = ctor[key];
+      if (!is.und(ctor)) changedProps[prop] = ctor[key];
     } else {
       // instance does not have constructor, just set it to 0
-      changedProps[key] = 0;
+      changedProps[prop] = 0;
     }
   }
   return changedProps;
@@ -542,6 +542,37 @@ function releaseInternalPointerCapture(capturedMap, obj, captures, pointerId) {
     }
   }
 }
+
+/** This function transfers all interactivity state from one object instance to another. Used when swapping instances due to reconstruction. */
+function swapInteractivity(store, object, newObject) {
+  const {
+    internal
+  } = store.getState();
+  for (let i = 0; i < internal.interaction.length; i++) {
+    if (internal.interaction[i] === object) internal.interaction[i] = newObject;
+  }
+  for (let i = 0; i < internal.initialHits.length; i++) {
+    if (internal.initialHits[i] === object) internal.initialHits[i] = newObject;
+  }
+  internal.hovered.forEach((value, key) => {
+    if (value.eventObject === object || value.object === object) {
+      internal.hovered.delete(key);
+      const next = {
+        ...value,
+        eventObject: value.eventObject === object ? newObject : value.eventObject,
+        object: value.object === object ? newObject : value.object
+      };
+      internal.hovered.set(makeId(next), next);
+    }
+  });
+  internal.capturedMap.forEach(captures => {
+    const captureData = captures.get(object);
+    if (captureData) {
+      captures.delete(object);
+      captures.set(newObject, captureData);
+    }
+  });
+}
 function removeInteractivity(store, object) {
   const {
     internal
@@ -1305,11 +1336,12 @@ useLoader.clear = function (loader, input) {
  */const t = 1,
   o = 8,
   r = 32,
-  e = 2;
+  e = 2,
+  i$1 = 268435456;
 
 var packageData = {
 	name: "@react-three/fiber",
-	version: "9.6.0",
+	version: "9.7.0",
 	description: "A React renderer for Threejs",
 	keywords: [
 		"react",
@@ -6948,6 +6980,12 @@ function handleContainerEffects(parent, child, beforeChild) {
 function appendChild(parent, child) {
   if (!child) return;
 
+  // Move an existing child instead of duplicating it
+  if (child.parent === parent) {
+    const childIndex = parent.children.indexOf(child);
+    if (childIndex !== -1) parent.children.splice(childIndex, 1);
+  }
+
   // Link instances
   child.parent = parent;
   parent.children.push(child);
@@ -6958,6 +6996,12 @@ function appendChild(parent, child) {
 function insertBefore(parent, child, beforeChild) {
   if (!child || !beforeChild) return;
 
+  // Move an existing child instead of duplicating it.
+  if (child.parent === parent) {
+    const childIndex = parent.children.indexOf(child);
+    if (childIndex !== -1) parent.children.splice(childIndex, 1);
+  }
+
   // Link instances
   child.parent = parent;
   const childIndex = parent.children.indexOf(beforeChild);
@@ -7038,7 +7082,15 @@ function setFiberRef(fiber, publicInstance) {
   }
 }
 const reconstructed = [];
-function swapInstances() {
+function flushReconstructedInstances() {
+  if (reconstructed.length === 0) return;
+  try {
+    swapReconstructedInstances();
+  } finally {
+    reconstructed.length = 0;
+  }
+}
+function swapReconstructedInstances() {
   // Detach instance
   for (const [instance] of reconstructed) {
     const parent = instance.parent;
@@ -7078,11 +7130,11 @@ function swapInstances() {
       const target = catalogue[toPascalCase(instance.type)];
 
       // Create object
+      const prevObject = instance.object;
       instance.object = (_instance$props$objec = instance.props.object) != null ? _instance$props$objec : new target(...((_instance$props$args = instance.props.args) != null ? _instance$props$args : []));
       instance.object.__r3f = instance;
       setFiberRef(fiber, instance.object);
-
-      // Set initial props
+      swapInteractivity(findInitialRoot(instance), prevObject, instance.object);
       applyProps(instance.object, instance.props);
       if (instance.props.attach) {
         attach(parent, instance);
@@ -7101,7 +7153,6 @@ function swapInstances() {
       invalidateInstance(instance);
     }
   }
-  reconstructed.length = 0;
 }
 
 // Don't handle text instances, make it no-op
@@ -7109,9 +7160,112 @@ const handleTextInstance = () => {};
 const NO_CONTEXT = {};
 let currentUpdatePriority = NoEventPriority;
 
-// https://github.com/facebook/react/blob/main/packages/react-reconciler/src/ReactFiberFlags.js
-const NoFlags = 0;
-const Update = 4;
+// Mirrors react-dom's getEventPriority for parity with events outside of React
+// https://github.com/facebook/react/blob/main/packages/react-dom-bindings/src/events/ReactDOMEventListener.js
+function getEventPriority(type) {
+  switch (type) {
+    case 'beforetoggle':
+    case 'cancel':
+    case 'click':
+    case 'close':
+    case 'contextmenu':
+    case 'copy':
+    case 'cut':
+    case 'auxclick':
+    case 'dblclick':
+    case 'dragend':
+    case 'dragstart':
+    case 'drop':
+    case 'focusin':
+    case 'focusout':
+    case 'input':
+    case 'invalid':
+    case 'keydown':
+    case 'keypress':
+    case 'keyup':
+    case 'mousedown':
+    case 'mouseup':
+    case 'paste':
+    case 'pause':
+    case 'play':
+    case 'pointercancel':
+    case 'pointerdown':
+    case 'pointerup':
+    case 'ratechange':
+    case 'reset':
+    case 'resize':
+    case 'seeked':
+    case 'submit':
+    case 'touchcancel':
+    case 'touchend':
+    case 'touchstart':
+    case 'volumechange':
+    case 'change':
+    case 'selectionchange':
+    case 'compositionstart':
+    case 'compositionend':
+    case 'compositionupdate':
+    case 'beforeinput':
+    case 'blur':
+    case 'fullscreenchange':
+    case 'focus':
+    case 'hashchange':
+    case 'popstate':
+    case 'select':
+    case 'selectstart':
+      return e;
+    case 'drag':
+    case 'dragenter':
+    case 'dragexit':
+    case 'dragleave':
+    case 'dragover':
+    case 'mousemove':
+    case 'mouseout':
+    case 'mouseover':
+    case 'pointermove':
+    case 'pointerout':
+    case 'pointerover':
+    case 'scroll':
+    case 'touchmove':
+    case 'wheel':
+    case 'mouseenter':
+    case 'mouseleave':
+    case 'pointerenter':
+    case 'pointerleave':
+      return o;
+    case 'message':
+      {
+        switch (Tb.unstable_getCurrentPriorityLevel()) {
+          case Tb.unstable_ImmediatePriority:
+            return e;
+          case Tb.unstable_UserBlockingPriority:
+            return o;
+          case Tb.unstable_NormalPriority:
+          case Tb.unstable_LowPriority:
+            return r;
+          case Tb.unstable_IdlePriority:
+            return i$1;
+          default:
+            return r;
+        }
+      }
+    default:
+      return r;
+  }
+}
+function scheduleMicrotask(callback) {
+  if (typeof queueMicrotask === 'function') {
+    queueMicrotask(callback);
+  } else if (typeof Promise !== 'undefined') {
+    Promise.resolve().then(callback).catch(error => {
+      setTimeout(() => {
+        throw error;
+      });
+    });
+  } else {
+    setTimeout(callback);
+  }
+}
 const reconciler = /* @__PURE__ */createReconciler({
   isPrimaryRenderer: false,
   warnsIfNotActing: false,
@@ -7155,30 +7309,30 @@ const reconciler = /* @__PURE__ */createReconciler({
       return value !== ((_oldProps$args2 = oldProps.args) == null ? void 0 : _oldProps$args2[index]);
     })) reconstruct = true;
 
-    // Reconstruct when args or <primitive object={...} have changes
+    // Reconstruct when args or <primitive object={...} have changes.
+    // Instances are swapped at the end of the mutation phase (resetAfterCommit)
     if (reconstruct) {
-      reconstructed.push([instance, {
-        ...newProps
-      }, fiber]);
+      reconstructed.push([instance, getInstanceProps(newProps), fiber]);
     } else {
       // Create a diff-set, flag if there are any changes
       const changedProps = diffProps(instance, newProps);
-      if (Object.keys(changedProps).length) {
-        Object.assign(instance.props, changedProps);
-        applyProps(instance.object, changedProps);
-      }
-    }
 
-    // Flush reconstructed siblings when we hit the last updated child in a sequence
-    const isTailSibling = fiber.sibling === null || (fiber.flags & Update) === NoFlags;
-    if (isTailSibling) swapInstances();
+      // Replace the old prop snapshot after computing the diff
+      //`attach` is preserved since it cannot be updated dynamically
+      const attach = instance.props.attach;
+      instance.props = getInstanceProps(newProps);
+      if (attach !== undefined) instance.props.attach = attach;else delete instance.props.attach;
+      if (Object.keys(changedProps).length) applyProps(instance.object, changedProps);
+    }
   },
   finalizeInitialChildren: () => false,
   commitMount() {},
   getPublicInstance: instance => instance == null ? void 0 : instance.object,
   prepareForCommit: () => null,
   preparePortalMount: container => prepare(container.getState().scene, container, '', {}),
-  resetAfterCommit: () => {},
+  // Reconstructed instances are swapped once all mutations are committed,
+  // before layout effects run so refs point to the new objects
+  resetAfterCommit: flushReconstructedInstances,
   shouldSetTextContent: () => false,
   clearContainer: () => false,
   hideInstance,
@@ -7186,6 +7340,9 @@ const reconciler = /* @__PURE__ */createReconciler({
   createTextInstance: handleTextInstance,
   hideTextInstance: handleTextInstance,
   unhideTextInstance: handleTextInstance,
+  // Mirrors react-dom, which flushes discrete work in microtasks
+  supportsMicrotasks: true,
+  scheduleMicrotask,
   scheduleTimeout: typeof setTimeout === 'function' ? setTimeout : undefined,
   cancelTimeout: typeof clearTimeout === 'function' ? clearTimeout : undefined,
   noTimeout: -1,
@@ -7218,24 +7375,9 @@ const reconciler = /* @__PURE__ */createReconciler({
   resolveUpdatePriority() {
     var _window$event;
     if (currentUpdatePriority !== NoEventPriority) return currentUpdatePriority;
-    switch (typeof window !== 'undefined' && ((_window$event = window.event) == null ? void 0 : _window$event.type)) {
-      case 'click':
-      case 'contextmenu':
-      case 'dblclick':
-      case 'pointercancel':
-      case 'pointerdown':
-      case 'pointerup':
-        return e;
-      case 'pointermove':
-      case 'pointerout':
-      case 'pointerover':
-      case 'pointerenter':
-      case 'pointerleave':
-      case 'wheel':
-        return o;
-      default:
-        return r;
-    }
+    const eventType = typeof window !== 'undefined' ? (_window$event = window.event) == null ? void 0 : _window$event.type : undefined;
+    if (eventType === undefined) return r;
+    return getEventPriority(eventType);
   },
   resetFormInstance() {},
   // @ts-ignore DefinitelyTyped is not up to date

package/dist/{events-508aad4b.cjs.dev.js → events-b1bdeb1a.cjs.dev.js}

@@ -380,10 +380,10 @@ function diffProps(instance, newProps) {
     if (root.constructor && root.constructor.length === 0) {
       // create a blank slate of the instance and copy the particular parameter.
       const ctor = getMemoizedPrototype(root);
-      if (!is.und(ctor)) changedProps[key] = ctor[key];
+      if (!is.und(ctor)) changedProps[prop] = ctor[key];
     } else {
       // instance does not have constructor, just set it to 0
-      changedProps[key] = 0;
+      changedProps[prop] = 0;
     }
   }
   return changedProps;
@@ -542,6 +542,37 @@ function releaseInternalPointerCapture(capturedMap, obj, captures, pointerId) {
     }
   }
 }
+
+/** This function transfers all interactivity state from one object instance to another. Used when swapping instances due to reconstruction. */
+function swapInteractivity(store, object, newObject) {
+  const {
+    internal
+  } = store.getState();
+  for (let i = 0; i < internal.interaction.length; i++) {
+    if (internal.interaction[i] === object) internal.interaction[i] = newObject;
+  }
+  for (let i = 0; i < internal.initialHits.length; i++) {
+    if (internal.initialHits[i] === object) internal.initialHits[i] = newObject;
+  }
+  internal.hovered.forEach((value, key) => {
+    if (value.eventObject === object || value.object === object) {
+      internal.hovered.delete(key);
+      const next = {
+        ...value,
+        eventObject: value.eventObject === object ? newObject : value.eventObject,
+        object: value.object === object ? newObject : value.object
+      };
+      internal.hovered.set(makeId(next), next);
+    }
+  });
+  internal.capturedMap.forEach(captures => {
+    const captureData = captures.get(object);
+    if (captureData) {
+      captures.delete(object);
+      captures.set(newObject, captureData);
+    }
+  });
+}
 function removeInteractivity(store, object) {
   const {
     internal
@@ -1305,11 +1336,12 @@ useLoader.clear = function (loader, input) {
  */const t = 1,
   o = 8,
   r = 32,
-  e = 2;
+  e = 2,
+  i$1 = 268435456;
 
 var packageData = {
 	name: "@react-three/fiber",
-	version: "9.6.0",
+	version: "9.7.0",
 	description: "A React renderer for Threejs",
 	keywords: [
 		"react",
@@ -15145,6 +15177,12 @@ function handleContainerEffects(parent, child, beforeChild) {
 function appendChild(parent, child) {
   if (!child) return;
 
+  // Move an existing child instead of duplicating it
+  if (child.parent === parent) {
+    const childIndex = parent.children.indexOf(child);
+    if (childIndex !== -1) parent.children.splice(childIndex, 1);
+  }
+
   // Link instances
   child.parent = parent;
   parent.children.push(child);
@@ -15155,6 +15193,12 @@ function appendChild(parent, child) {
 function insertBefore(parent, child, beforeChild) {
   if (!child || !beforeChild) return;
 
+  // Move an existing child instead of duplicating it.
+  if (child.parent === parent) {
+    const childIndex = parent.children.indexOf(child);
+    if (childIndex !== -1) parent.children.splice(childIndex, 1);
+  }
+
   // Link instances
   child.parent = parent;
   const childIndex = parent.children.indexOf(beforeChild);
@@ -15235,7 +15279,15 @@ function setFiberRef(fiber, publicInstance) {
   }
 }
 const reconstructed = [];
-function swapInstances() {
+function flushReconstructedInstances() {
+  if (reconstructed.length === 0) return;
+  try {
+    swapReconstructedInstances();
+  } finally {
+    reconstructed.length = 0;
+  }
+}
+function swapReconstructedInstances() {
   // Detach instance
   for (const [instance] of reconstructed) {
     const parent = instance.parent;
@@ -15275,11 +15327,11 @@ function swapInstances() {
       const target = catalogue[toPascalCase(instance.type)];
 
       // Create object
+      const prevObject = instance.object;
       instance.object = (_instance$props$objec = instance.props.object) != null ? _instance$props$objec : new target(...((_instance$props$args = instance.props.args) != null ? _instance$props$args : []));
       instance.object.__r3f = instance;
       setFiberRef(fiber, instance.object);
-
-      // Set initial props
+      swapInteractivity(findInitialRoot(instance), prevObject, instance.object);
       applyProps(instance.object, instance.props);
       if (instance.props.attach) {
         attach(parent, instance);
@@ -15298,7 +15350,6 @@ function swapInstances() {
       invalidateInstance(instance);
     }
   }
-  reconstructed.length = 0;
 }
 
 // Don't handle text instances, make it no-op
@@ -15306,9 +15357,112 @@ const handleTextInstance = () => {};
 const NO_CONTEXT = {};
 let currentUpdatePriority = NoEventPriority;
 
-// https://github.com/facebook/react/blob/main/packages/react-reconciler/src/ReactFiberFlags.js
-const NoFlags = 0;
-const Update = 4;
+// Mirrors react-dom's getEventPriority for parity with events outside of React
+// https://github.com/facebook/react/blob/main/packages/react-dom-bindings/src/events/ReactDOMEventListener.js
+function getEventPriority(type) {
+  switch (type) {
+    case 'beforetoggle':
+    case 'cancel':
+    case 'click':
+    case 'close':
+    case 'contextmenu':
+    case 'copy':
+    case 'cut':
+    case 'auxclick':
+    case 'dblclick':
+    case 'dragend':
+    case 'dragstart':
+    case 'drop':
+    case 'focusin':
+    case 'focusout':
+    case 'input':
+    case 'invalid':
+    case 'keydown':
+    case 'keypress':
+    case 'keyup':
+    case 'mousedown':
+    case 'mouseup':
+    case 'paste':
+    case 'pause':
+    case 'play':
+    case 'pointercancel':
+    case 'pointerdown':
+    case 'pointerup':
+    case 'ratechange':
+    case 'reset':
+    case 'resize':
+    case 'seeked':
+    case 'submit':
+    case 'touchcancel':
+    case 'touchend':
+    case 'touchstart':
+    case 'volumechange':
+    case 'change':
+    case 'selectionchange':
+    case 'compositionstart':
+    case 'compositionend':
+    case 'compositionupdate':
+    case 'beforeinput':
+    case 'blur':
+    case 'fullscreenchange':
+    case 'focus':
+    case 'hashchange':
+    case 'popstate':
+    case 'select':
+    case 'selectstart':
+      return e;
+    case 'drag':
+    case 'dragenter':
+    case 'dragexit':
+    case 'dragleave':
+    case 'dragover':
+    case 'mousemove':
+    case 'mouseout':
+    case 'mouseover':
+    case 'pointermove':
+    case 'pointerout':
+    case 'pointerover':
+    case 'scroll':
+    case 'touchmove':
+    case 'wheel':
+    case 'mouseenter':
+    case 'mouseleave':
+    case 'pointerenter':
+    case 'pointerleave':
+      return o;
+    case 'message':
+      {
+        switch (Tb.unstable_getCurrentPriorityLevel()) {
+          case Tb.unstable_ImmediatePriority:
+            return e;
+          case Tb.unstable_UserBlockingPriority:
+            return o;
+          case Tb.unstable_NormalPriority:
+          case Tb.unstable_LowPriority:
+            return r;
+          case Tb.unstable_IdlePriority:
+            return i$1;
+          default:
+            return r;
+        }
+      }
+    default:
+      return r;
+  }
+}
+function scheduleMicrotask(callback) {
+  if (typeof queueMicrotask === 'function') {
+    queueMicrotask(callback);
+  } else if (typeof Promise !== 'undefined') {
+    Promise.resolve().then(callback).catch(error => {
+      setTimeout(() => {
+        throw error;
+      });
+    });
+  } else {
+    setTimeout(callback);
+  }
+}
 const reconciler = /* @__PURE__ */createReconciler({
   isPrimaryRenderer: false,
   warnsIfNotActing: false,
@@ -15352,30 +15506,30 @@ const reconciler = /* @__PURE__ */createReconciler({
       return value !== ((_oldProps$args2 = oldProps.args) == null ? void 0 : _oldProps$args2[index]);
     })) reconstruct = true;
 
-    // Reconstruct when args or <primitive object={...} have changes
+    // Reconstruct when args or <primitive object={...} have changes.
+    // Instances are swapped at the end of the mutation phase (resetAfterCommit)
     if (reconstruct) {
-      reconstructed.push([instance, {
-        ...newProps
-      }, fiber]);
+      reconstructed.push([instance, getInstanceProps(newProps), fiber]);
     } else {
       // Create a diff-set, flag if there are any changes
       const changedProps = diffProps(instance, newProps);
-      if (Object.keys(changedProps).length) {
-        Object.assign(instance.props, changedProps);
-        applyProps(instance.object, changedProps);
-      }
-    }
 
-    // Flush reconstructed siblings when we hit the last updated child in a sequence
-    const isTailSibling = fiber.sibling === null || (fiber.flags & Update) === NoFlags;
-    if (isTailSibling) swapInstances();
+      // Replace the old prop snapshot after computing the diff
+      //`attach` is preserved since it cannot be updated dynamically
+      const attach = instance.props.attach;
+      instance.props = getInstanceProps(newProps);
+      if (attach !== undefined) instance.props.attach = attach;else delete instance.props.attach;
+      if (Object.keys(changedProps).length) applyProps(instance.object, changedProps);
+    }
   },
   finalizeInitialChildren: () => false,
   commitMount() {},
   getPublicInstance: instance => instance == null ? void 0 : instance.object,
   prepareForCommit: () => null,
   preparePortalMount: container => prepare(container.getState().scene, container, '', {}),
-  resetAfterCommit: () => {},
+  // Reconstructed instances are swapped once all mutations are committed,
+  // before layout effects run so refs point to the new objects
+  resetAfterCommit: flushReconstructedInstances,
   shouldSetTextContent: () => false,
   clearContainer: () => false,
   hideInstance,
@@ -15383,6 +15537,9 @@ const reconciler = /* @__PURE__ */createReconciler({
   createTextInstance: handleTextInstance,
   hideTextInstance: handleTextInstance,
   unhideTextInstance: handleTextInstance,
+  // Mirrors react-dom, which flushes discrete work in microtasks
+  supportsMicrotasks: true,
+  scheduleMicrotask,
   scheduleTimeout: typeof setTimeout === 'function' ? setTimeout : undefined,
   cancelTimeout: typeof clearTimeout === 'function' ? clearTimeout : undefined,
   noTimeout: -1,
@@ -15415,24 +15572,9 @@ const reconciler = /* @__PURE__ */createReconciler({
   resolveUpdatePriority() {
     var _window$event;
     if (currentUpdatePriority !== NoEventPriority) return currentUpdatePriority;
-    switch (typeof window !== 'undefined' && ((_window$event = window.event) == null ? void 0 : _window$event.type)) {
-      case 'click':
-      case 'contextmenu':
-      case 'dblclick':
-      case 'pointercancel':
-      case 'pointerdown':
-      case 'pointerup':
-        return e;
-      case 'pointermove':
-      case 'pointerout':
-      case 'pointerover':
-      case 'pointerenter':
-      case 'pointerleave':
-      case 'wheel':
-        return o;
-      default:
-        return r;
-    }
+    const eventType = typeof window !== 'undefined' ? (_window$event = window.event) == null ? void 0 : _window$event.type : undefined;
+    if (eventType === undefined) return r;
+    return getEventPriority(eventType);
   },
   resetFormInstance() {},
   // @ts-ignore DefinitelyTyped is not up to date

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var events = require('./events-508aad4b.cjs.dev.js');
+var events = require('./events-b1bdeb1a.cjs.dev.js');
 var React = require('react');
 var THREE = require('three');
 var useMeasure = require('react-use-measure');

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var events = require('./events-11ca7a92.cjs.prod.js');
+var events = require('./events-4c71f21f.cjs.prod.js');
 var React = require('react');
 var THREE = require('three');
 var useMeasure = require('react-use-measure');

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

@@ -1,5 +1,5 @@
-import { e as extend, u as useBridge, a as useMutableCallback, b as useIsomorphicLayoutEffect, c as createRoot, i as isRef, E as ErrorBoundary, B as Block, d as unmountComponentAtNode, f as createPointerEvents } from './events-760a1017.esm.js';
-export { t as ReactThreeFiber, _ as _roots, x as act, k as addAfterEffect, j as addEffect, l as addTail, n as advance, s as applyProps, y as buildGraph, q as context, g as createEvents, o as createPortal, c as createRoot, w as dispose, f as events, e as extend, h as flushGlobalEffects, p as flushSync, v as getRootState, m as invalidate, r as reconciler, d as unmountComponentAtNode, D as useFrame, F as useGraph, z as useInstanceHandle, G as useLoader, A as useStore, C as useThree } from './events-760a1017.esm.js';
+import { e as extend, u as useBridge, a as useMutableCallback, b as useIsomorphicLayoutEffect, c as createRoot, i as isRef, E as ErrorBoundary, B as Block, d as unmountComponentAtNode, f as createPointerEvents } from './events-156d8d12.esm.js';
+export { t as ReactThreeFiber, _ as _roots, x as act, k as addAfterEffect, j as addEffect, l as addTail, n as advance, s as applyProps, y as buildGraph, q as context, g as createEvents, o as createPortal, c as createRoot, w as dispose, f as events, e as extend, h as flushGlobalEffects, p as flushSync, v as getRootState, m as invalidate, r as reconciler, d as unmountComponentAtNode, D as useFrame, F as useGraph, z as useInstanceHandle, G as useLoader, A as useStore, C as useThree } from './events-156d8d12.esm.js';
 import * as React from 'react';
 import * as THREE from 'three';
 import useMeasure from 'react-use-measure';

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var events = require('../../dist/events-508aad4b.cjs.dev.js');
+var events = require('../../dist/events-b1bdeb1a.cjs.dev.js');
 var React = require('react');
 var THREE = require('three');
 var reactNative = require('react-native');

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var events = require('../../dist/events-11ca7a92.cjs.prod.js');
+var events = require('../../dist/events-4c71f21f.cjs.prod.js');
 var React = require('react');
 var THREE = require('three');
 var reactNative = require('react-native');

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

@@ -1,5 +1,5 @@
-import { e as extend, u as useBridge, a as useMutableCallback, c as createRoot, b as useIsomorphicLayoutEffect, E as ErrorBoundary, B as Block, d as unmountComponentAtNode, f as createPointerEvents, g as createEvents } from '../../dist/events-760a1017.esm.js';
-export { t as ReactThreeFiber, _ as _roots, x as act, k as addAfterEffect, j as addEffect, l as addTail, n as advance, s as applyProps, y as buildGraph, q as context, g as createEvents, o as createPortal, c as createRoot, w as dispose, e as extend, h as flushGlobalEffects, p as flushSync, v as getRootState, m as invalidate, r as reconciler, d as unmountComponentAtNode, D as useFrame, F as useGraph, z as useInstanceHandle, G as useLoader, A as useStore, C as useThree } from '../../dist/events-760a1017.esm.js';
+import { e as extend, u as useBridge, a as useMutableCallback, c as createRoot, b as useIsomorphicLayoutEffect, E as ErrorBoundary, B as Block, d as unmountComponentAtNode, f as createPointerEvents, g as createEvents } from '../../dist/events-156d8d12.esm.js';
+export { t as ReactThreeFiber, _ as _roots, x as act, k as addAfterEffect, j as addEffect, l as addTail, n as advance, s as applyProps, y as buildGraph, q as context, g as createEvents, o as createPortal, c as createRoot, w as dispose, e as extend, h as flushGlobalEffects, p as flushSync, v as getRootState, m as invalidate, r as reconciler, d as unmountComponentAtNode, D as useFrame, F as useGraph, z as useInstanceHandle, G as useLoader, A as useStore, C as useThree } from '../../dist/events-156d8d12.esm.js';
 import * as React from 'react';
 import * as THREE from 'three';
 import { PanResponder, PixelRatio, StyleSheet, View, Platform, Image, NativeModules } from 'react-native';

package/package.json

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