@react-three/fiber 9.6.1 → 9.7.0

package/dist/{events-583399dd.cjs.prod.js → events-4c71f21f.cjs.prod.js}

@@ -36,17 +36,17 @@ var threeTypes = /*#__PURE__*/Object.freeze({
   __proto__: null
 });
 
-/**
- * Returns the instance's initial (outmost) root.
+/**
+ * Returns the instance's initial (outmost) root.
  */
 function findInitialRoot(instance) {
   let root = instance.root;
   while (root.getState().previousRoot) root = root.getState().previousRoot;
   return root;
 }
-/**
- * Safely flush async effects when testing, simulating a legacy root.
- * @deprecated Import from React instead. import { act } from 'react'
+/**
+ * Safely flush async effects when testing, simulating a legacy root.
+ * @deprecated Import from React instead. import { act } from 'react'
  */
 // Reference with computed key to break Webpack static analysis
 // https://github.com/webpack/webpack/issues/14814
@@ -55,14 +55,14 @@ const isOrthographicCamera = def => def && def.isOrthographicCamera;
 const isRef = obj => obj && obj.hasOwnProperty('current');
 const isColorRepresentation = value => value != null && (typeof value === 'string' || typeof value === 'number' || value.isColor);
 
-/**
- * An SSR-friendly useLayoutEffect.
- *
- * React currently throws a warning when using useLayoutEffect on the server.
- * To get around it, we can conditionally useEffect on the server (no-op) and
- * useLayoutEffect elsewhere.
- *
- * @see https://github.com/facebook/react/issues/14927
+/**
+ * An SSR-friendly useLayoutEffect.
+ *
+ * React currently throws a warning when using useLayoutEffect on the server.
+ * To get around it, we can conditionally useEffect on the server (no-op) and
+ * useLayoutEffect elsewhere.
+ *
+ * @see https://github.com/facebook/react/issues/14927
  */
 const useIsomorphicLayoutEffect = /* @__PURE__ */((_window$document, _window$navigator) => typeof window !== 'undefined' && (((_window$document = window.document) == null ? void 0 : _window$document.createElement) || ((_window$navigator = window.navigator) == null ? void 0 : _window$navigator.product) === 'ReactNative'))() ? React__namespace.useLayoutEffect : React__namespace.useEffect;
 function useMutableCallback(fn) {
@@ -70,8 +70,8 @@ function useMutableCallback(fn) {
   useIsomorphicLayoutEffect(() => void (ref.current = fn), [fn]);
   return ref;
 }
-/**
- * Bridges renderer Context and StrictMode from a primary renderer.
+/**
+ * Bridges renderer Context and StrictMode from a primary renderer.
  */
 function useBridge() {
   const fiber = itsFine.useFiber();
@@ -123,8 +123,8 @@ function calculateDpr(dpr) {
   return Array.isArray(dpr) ? Math.min(Math.max(dpr[0], target), dpr[1]) : dpr;
 }
 
-/**
- * Returns instance root state
+/**
+ * Returns instance root state
  */
 function getRootState(obj) {
   var _r3f;
@@ -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;
@@ -527,9 +527,9 @@ function makeId(event) {
   return (event.eventObject || event.object).uuid + '/' + event.index + event.instanceId;
 }
 
-/**
- * Release pointer captures.
- * This is called by releasePointerCapture in the API, and when an object is removed.
+/**
+ * Release pointer captures.
+ * This is called by releasePointerCapture in the API, and when an object is removed.
  */
 function releaseInternalPointerCapture(capturedMap, obj, captures, pointerId) {
   const captureData = captures.get(obj);
@@ -907,19 +907,19 @@ function createEvents(store) {
         if (!(instance != null && instance.eventCount)) return;
         const handlers = instance.handlers;
 
-        /*
-        MAYBE TODO, DELETE IF NOT: 
-          Check if the object is captured, captured events should not have intersects running in parallel
-          But wouldn't it be better to just replace capturedMap with a single entry?
-          Also, are we OK with straight up making picking up multiple objects impossible?
-          
-        const pointerId = (data as ThreeEvent<PointerEvent>).pointerId        
-        if (pointerId !== undefined) {
-          const capturedMeshSet = internal.capturedMap.get(pointerId)
-          if (capturedMeshSet) {
-            const captured = capturedMeshSet.get(eventObject)
-            if (captured && captured.localState.stopped) return
-          }
+        /*
+        MAYBE TODO, DELETE IF NOT: 
+          Check if the object is captured, captured events should not have intersects running in parallel
+          But wouldn't it be better to just replace capturedMap with a single entry?
+          Also, are we OK with straight up making picking up multiple objects impossible?
+          
+        const pointerId = (data as ThreeEvent<PointerEvent>).pointerId        
+        if (pointerId !== undefined) {
+          const capturedMeshSet = internal.capturedMap.get(pointerId)
+          if (capturedMeshSet) {
+            const captured = capturedMeshSet.get(eventObject)
+            if (captured && captured.localState.stopped) return
+          }
         }*/
 
         if (isPointerMove) {
@@ -1210,11 +1210,11 @@ const createStore = (invalidate, advance) => {
   return rootStore;
 };
 
-/**
- * Exposes an object's {@link Instance}.
- * @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.
+/**
+ * Exposes an object's {@link Instance}.
+ * @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);
@@ -1222,9 +1222,9 @@ function useInstanceHandle(ref) {
   return instance;
 }
 
-/**
- * Returns the R3F Canvas' Zustand store. Useful for [transient updates](https://github.com/pmndrs/zustand#transient-updates-for-often-occurring-state-changes).
- * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usestore
+/**
+ * Returns the R3F Canvas' Zustand store. Useful for [transient updates](https://github.com/pmndrs/zustand#transient-updates-for-often-occurring-state-changes).
+ * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usestore
  */
 function useStore() {
   const store = React__namespace.useContext(context);
@@ -1232,18 +1232,18 @@ function useStore() {
   return store;
 }
 
-/**
- * Accesses R3F's internal state, containing renderer, canvas, scene, etc.
- * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usethree
+/**
+ * Accesses R3F's internal state, containing renderer, canvas, scene, etc.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usethree
  */
 function useThree(selector = state => state, equalityFn) {
   return useStore()(selector, equalityFn);
 }
 
-/**
- * Executes a callback before render in a shared frame loop.
- * Can order effects with render priority or manually render with a positive priority.
- * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#useframe
+/**
+ * Executes a callback before render in a shared frame loop.
+ * Can order effects with render priority or manually render with a positive priority.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#useframe
  */
 function useFrame(callback, renderPriority = 0) {
   const store = useStore();
@@ -1255,9 +1255,9 @@ function useFrame(callback, renderPriority = 0) {
   return null;
 }
 
-/**
- * Returns a node graph of an object with named nodes & materials.
- * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usegraph
+/**
+ * Returns a node graph of an object with named nodes & materials.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usegraph
  */
 function useGraph(object) {
   return React__namespace.useMemo(() => buildGraph(object), [object]);
@@ -1293,11 +1293,11 @@ function loadingFn(extensions, onProgress) {
   };
 }
 
-/**
- * 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
+/**
+ * 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(loader, input, extensions, onProgress) {
   // Use suspense to load async assets
@@ -1309,16 +1309,16 @@ function useLoader(loader, input, extensions, onProgress) {
   return Array.isArray(input) ? results : results[0];
 }
 
-/**
- * Preloads an asset into cache as a side-effect.
+/**
+ * Preloads an asset into cache as a side-effect.
  */
 useLoader.preload = function (loader, input, extensions) {
   const keys = Array.isArray(input) ? input : [input];
   return suspendReact.preload(loadingFn(extensions), [loader, ...keys]);
 };
 
-/**
- * Removes a loaded asset from cache.
+/**
+ * Removes a loaded asset from cache.
  */
 useLoader.clear = function (loader, input) {
   const keys = Array.isArray(input) ? input : [input];
@@ -1336,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.1",
+	version: "9.7.0",
 	description: "A React renderer for Threejs",
 	keywords: [
 		"react",
@@ -6979,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);
@@ -6989,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);
@@ -7069,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;
@@ -7132,7 +7153,6 @@ function swapInstances() {
       invalidateInstance(instance);
     }
   }
-  reconstructed.length = 0;
 }
 
 // Don't handle text instances, make it no-op
@@ -7140,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,
@@ -7186,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,
@@ -7217,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,
@@ -7249,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
@@ -7723,10 +7834,10 @@ function Portal({
   children,
   container
 }) {
-  /** This has to be a component because it would not be able to call useThree/useStore otherwise since
-   *  if this is our environment, then we are not in r3f's renderer but in react-dom, it would trigger
-   *  the "R3F hooks can only be used within the Canvas component!" warning:
-   *  <Canvas>
+  /** This has to be a component because it would not be able to call useThree/useStore otherwise since
+   *  if this is our environment, then we are not in r3f's renderer but in react-dom, it would trigger
+   *  the "R3F hooks can only be used within the Canvas component!" warning:
+   *  <Canvas>
    *    {createPortal(...)} */
   const {
     events,
@@ -7807,11 +7918,11 @@ function Portal({
   );
 }
 
-/**
- * Force React to flush any updates inside the provided callback synchronously and immediately.
- * All the same caveats documented for react-dom's `flushSync` apply here (see https://react.dev/reference/react-dom/flushSync).
- * Nevertheless, sometimes one needs to render synchronously, for example to keep DOM and 3D changes in lock-step without
- * having to revert to a non-React solution. Note: this will only flush updates within the `Canvas` root.
+/**
+ * Force React to flush any updates inside the provided callback synchronously and immediately.
+ * All the same caveats documented for react-dom's `flushSync` apply here (see https://react.dev/reference/react-dom/flushSync).
+ * Nevertheless, sometimes one needs to render synchronously, for example to keep DOM and 3D changes in lock-step without
+ * having to revert to a non-React solution. Note: this will only flush updates within the `Canvas` root.
  */
 function flushSync(fn) {
   // @ts-ignore - reconciler types are not maintained
@@ -7829,21 +7940,21 @@ const globalEffects = new Set();
 const globalAfterEffects = new Set();
 const globalTailEffects = new Set();
 
-/**
- * Adds a global render callback which is called each frame.
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addEffect
+/**
+ * Adds a global render callback which is called each frame.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addEffect
  */
 const addEffect = callback => createSubs(callback, globalEffects);
 
-/**
- * Adds a global after-render callback which is called each frame.
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addAfterEffect
+/**
+ * Adds a global after-render callback which is called each frame.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addAfterEffect
  */
 const addAfterEffect = callback => createSubs(callback, globalAfterEffects);
 
-/**
- * Adds a global callback which is called when rendering stops.
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addTail
+/**
+ * Adds a global callback which is called when rendering stops.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addTail
  */
 const addTail = callback => createSubs(callback, globalTailEffects);
 function run(effects, timestamp) {
@@ -7931,9 +8042,9 @@ function loop(timestamp) {
   }
 }
 
-/**
- * Invalidates the view, requesting a frame to be rendered. Will globally invalidate unless passed a root's state.
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#invalidate
+/**
+ * Invalidates the view, requesting a frame to be rendered. Will globally invalidate unless passed a root's state.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#invalidate
  */
 function invalidate(state, frames = 1) {
   var _state$gl$xr2;
@@ -7960,9 +8071,9 @@ function invalidate(state, frames = 1) {
   }
 }
 
-/**
- * Advances the frameloop and runs render effects, useful for when manually rendering via `frameloop="never"`.
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#advance
+/**
+ * Advances the frameloop and runs render effects, useful for when manually rendering via `frameloop="never"`.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#advance
  */
 function advance(timestamp, runGlobalEffects = true, state, frame) {
   if (runGlobalEffects) flushGlobalEffects('before', timestamp);