@react-three/fiber 9.0.0-alpha.3 → 9.0.0-alpha.5

package/dist/{loop-a0ef8208.cjs.prod.js → loop-1fad3b6f.cjs.prod.js}

@@ -3,7 +3,7 @@
 var THREE = require('three');
 var React = require('react');
 var constants = require('react-reconciler/constants');
-var zustand = require('zustand');
+var traditional = require('zustand/traditional');
 var itsFine = require('its-fine');
 var _extends = require('@babel/runtime/helpers/extends');
 var Reconciler = require('react-reconciler');
@@ -50,7 +50,7 @@ const extend = objects => {
     catalogue[Component] = objects;
 
     // Returns a component whose name will be inferred in devtools
-    // @ts-ignore
+    // @ts-expect-error
     return /*#__PURE__*/React__namespace.forwardRef({
       [objects.name]: (props, ref) => /*#__PURE__*/React__namespace.createElement(Component, _extends({}, props, {
         ref: ref
@@ -60,7 +60,8 @@ const extend = objects => {
     return void Object.assign(catalogue, objects);
   }
 };
-function createInstance(type, props, root) {
+function createInstance(type, props, root, flushPrimitive = true) {
+  var _props$object;
   // Get target from catalogue
   const name = `${type[0].toUpperCase()}${type.slice(1)}`;
   const target = catalogue[name];
@@ -74,10 +75,37 @@ function createInstance(type, props, root) {
   // Throw if an object or literal was passed for args
   if (props.args !== undefined && !Array.isArray(props.args)) throw new Error('R3F: The args prop must be an array!');
 
+  // Regenerate the R3F instance for primitives to simulate a new object
+  if (flushPrimitive && type === 'primitive' && (_props$object = props.object) != null && _props$object.__r3f) delete props.object.__r3f;
+
   // Create instance
   const instance = prepare(props.object, root, type, props);
   return instance;
 }
+function hideInstance(instance) {
+  if (!instance.isHidden) {
+    var _instance$parent;
+    if (instance.props.attach && (_instance$parent = instance.parent) != null && _instance$parent.object) {
+      detach(instance.parent, instance);
+    } else if (isObject3D(instance.object)) {
+      instance.object.visible = false;
+    }
+    instance.isHidden = true;
+    invalidateInstance(instance);
+  }
+}
+function unhideInstance(instance) {
+  if (instance.isHidden) {
+    var _instance$parent2;
+    if (instance.props.attach && (_instance$parent2 = instance.parent) != null && _instance$parent2.object) {
+      attach(instance.parent, instance);
+    } else if (isObject3D(instance.object) && instance.props.visible !== false) {
+      instance.object.visible = true;
+    }
+    instance.isHidden = false;
+    invalidateInstance(instance);
+  }
+}
 
 // https://github.com/facebook/react/issues/20271
 // This will make sure events and attach are only handled once when trees are complete
@@ -213,8 +241,19 @@ function setFiberInstance(fiber, instance) {
   }
 }
 function switchInstance(oldInstance, type, props, fiber) {
+  // If the old instance is hidden, we need to unhide it.
+  // React assumes it can discard instances since they're pure for DOM.
+  // This isn't true for us since our lifetimes are impure and longliving.
+  // So, we manually check if an instance was hidden and unhide it.
+  if (oldInstance.isHidden) unhideInstance(oldInstance);
+
   // Create a new instance
-  const newInstance = createInstance(type, props, oldInstance.root);
+  const newInstance = createInstance(type, props, oldInstance.root, false);
+
+  // Update attach props for primitives since we don't flush them
+  if (type === 'primitive') {
+    newInstance.props.attach = props.attach;
+  }
 
   // Move children to new instance
   for (const child of oldInstance.children) {
@@ -256,38 +295,15 @@ function switchInstance(oldInstance, type, props, fiber) {
 const handleTextInstance = () => console.warn('R3F: Text is not allowed in JSX! This could be stray whitespace or characters.');
 const NO_CONTEXT = {};
 let currentUpdatePriority = constants.NoEventPriority;
-
-// Effectively removed to diff in commit phase
-// https://github.com/facebook/react/pull/27409
-function prepareUpdate(instance, _type, oldProps, newProps) {
-  var _newProps$args, _oldProps$args, _newProps$args2;
-  // Reconstruct primitives if object prop changes
-  if (instance.type === 'primitive' && oldProps.object !== newProps.object) return [true];
-
-  // Throw if an object or literal was passed for args
-  if (newProps.args !== undefined && !Array.isArray(newProps.args)) throw new Error('R3F: The args prop must be an array!');
-
-  // Reconstruct instance if args change
-  if (((_newProps$args = newProps.args) == null ? void 0 : _newProps$args.length) !== ((_oldProps$args = oldProps.args) == null ? void 0 : _oldProps$args.length)) return [true];
-  if ((_newProps$args2 = newProps.args) != null && _newProps$args2.some((value, index) => {
-    var _oldProps$args2;
-    return value !== ((_oldProps$args2 = oldProps.args) == null ? void 0 : _oldProps$args2[index]);
-  })) return [true];
-
-  // Create a diff-set, flag if there are any changes
-  const changedProps = diffProps(instance, newProps, true);
-  if (Object.keys(changedProps).length) return [false, changedProps];
-
-  // Otherwise do not touch the instance
-  return null;
-}
 const reconciler = Reconciler__default["default"]({
   isPrimaryRenderer: false,
   warnsIfNotActing: false,
   supportsMutation: true,
   supportsPersistence: false,
   supportsHydration: false,
-  createInstance,
+  createInstance(type, props, root) {
+    return createInstance(type, props, root);
+  },
   removeChild,
   appendChild,
   appendInitialChild: appendChild,
@@ -309,18 +325,32 @@ const reconciler = Reconciler__default["default"]({
   },
   getRootHostContext: () => NO_CONTEXT,
   getChildHostContext: () => NO_CONTEXT,
-  // @ts-ignore prepareUpdate and updatePayload removed with React 19
+  // @ts-expect-error prepareUpdate and updatePayload removed with React 19
   commitUpdate(instance, type, oldProps, newProps, fiber) {
-    const diff = prepareUpdate(instance, type, oldProps, newProps);
-    if (diff === null) return;
-    const [reconstruct, changedProps] = diff;
+    var _newProps$args, _oldProps$args, _newProps$args2;
+    let reconstruct = false;
+
+    // Reconstruct primitives if object prop changes
+    if (instance.type === 'primitive' && oldProps.object !== newProps.object) reconstruct = true;
+    // Reconstruct instance if args was changed to an invalid value
+    else if (newProps.args !== undefined && !Array.isArray(newProps.args)) reconstruct = true;
+    // Reconstruct instance if args were added or removed
+    else if (((_newProps$args = newProps.args) == null ? void 0 : _newProps$args.length) !== ((_oldProps$args = oldProps.args) == null ? void 0 : _oldProps$args.length)) reconstruct = true;
+    // Reconstruct instance if args were changed
+    else if ((_newProps$args2 = newProps.args) != null && _newProps$args2.some((value, index) => {
+      var _oldProps$args2;
+      return value !== ((_oldProps$args2 = oldProps.args) == null ? void 0 : _oldProps$args2[index]);
+    })) reconstruct = true;
 
     // Reconstruct when args or <primitive object={...} have changes
     if (reconstruct) return switchInstance(instance, type, newProps, fiber);
 
-    // Otherwise just overwrite props
-    Object.assign(instance.props, changedProps);
-    applyProps(instance.object, changedProps);
+    // 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);
+    }
   },
   finalizeInitialChildren: () => false,
   commitMount() {},
@@ -330,28 +360,8 @@ const reconciler = Reconciler__default["default"]({
   resetAfterCommit: () => {},
   shouldSetTextContent: () => false,
   clearContainer: () => false,
-  hideInstance(instance) {
-    var _instance$parent;
-    if (instance.props.attach && (_instance$parent = instance.parent) != null && _instance$parent.object) {
-      detach(instance.parent, instance);
-    } else if (isObject3D(instance.object)) {
-      instance.object.visible = false;
-    }
-    instance.isHidden = true;
-    invalidateInstance(instance);
-  },
-  unhideInstance(instance) {
-    if (instance.isHidden) {
-      var _instance$parent2;
-      if (instance.props.attach && (_instance$parent2 = instance.parent) != null && _instance$parent2.object) {
-        attach(instance.parent, instance);
-      } else if (isObject3D(instance.object) && instance.props.visible !== false) {
-        instance.object.visible = true;
-      }
-    }
-    instance.isHidden = false;
-    invalidateInstance(instance);
-  },
+  hideInstance,
+  unhideInstance,
   createTextInstance: handleTextInstance,
   hideTextInstance: handleTextInstance,
   unhideTextInstance: handleTextInstance,
@@ -362,7 +372,6 @@ const reconciler = Reconciler__default["default"]({
   beforeActiveInstanceBlur() {},
   afterActiveInstanceBlur() {},
   detachDeletedInstance() {},
-  // @ts-ignore untyped react-experimental options inspired by react-art
   // TODO: add shell types for these and upstream to DefinitelyTyped
   // https://github.com/facebook/react/blob/main/packages/react-art/src/ReactFiberConfigART.js
   shouldAttemptEagerTransition() {
@@ -417,8 +426,7 @@ var _window$document, _window$navigator;
  */
 function findInitialRoot(instance) {
   let root = instance.root;
-  // TODO: this needs testing https://github.com/pmndrs/react-three-fiber/commit/a4a31ed93c48d1e6dac91329bb5f2ca6a25e5f9c
-  // while (root.getState().previousRoot) root = root.getState().previousRoot!
+  while (root.getState().previousRoot) root = root.getState().previousRoot;
   return root;
 }
 
@@ -688,7 +696,7 @@ const RESERVED_PROPS = [...REACT_INTERNAL_PROPS,
 const MEMOIZED_PROTOTYPES = new Map();
 
 // This function prepares a set of changes to be applied to the instance
-function diffProps(instance, newProps, resetRemoved = false) {
+function diffProps(instance, newProps) {
   const changedProps = {};
 
   // Sort through props
@@ -708,31 +716,29 @@ function diffProps(instance, newProps, resetRemoved = false) {
   }
 
   // Reset removed props for HMR
-  if (resetRemoved) {
-    for (const prop in instance.props) {
-      if (RESERVED_PROPS.includes(prop) || newProps.hasOwnProperty(prop)) continue;
-      const {
-        root,
-        key
-      } = resolve(instance.object, prop);
-
-      // https://github.com/mrdoob/three.js/issues/21209
-      // HMR/fast-refresh relies on the ability to cancel out props, but threejs
-      // has no means to do this. Hence we curate a small collection of value-classes
-      // with their respective constructor/set arguments
-      // For removed props, try to set default values, if possible
-      if (root.constructor && root.constructor.length === 0) {
-        // create a blank slate of the instance and copy the particular parameter.
-        let ctor = MEMOIZED_PROTOTYPES.get(root.constructor);
-        if (!ctor) {
-          ctor = new root.constructor();
-          MEMOIZED_PROTOTYPES.set(root.constructor, ctor);
-        }
-        changedProps[key] = ctor[key];
-      } else {
-        // instance does not have constructor, just set it to 0
-        changedProps[key] = 0;
+  for (const prop in instance.props) {
+    if (RESERVED_PROPS.includes(prop) || newProps.hasOwnProperty(prop)) continue;
+    const {
+      root,
+      key
+    } = resolve(instance.object, prop);
+
+    // https://github.com/mrdoob/three.js/issues/21209
+    // HMR/fast-refresh relies on the ability to cancel out props, but threejs
+    // has no means to do this. Hence we curate a small collection of value-classes
+    // with their respective constructor/set arguments
+    // For removed props, try to set default values, if possible
+    if (root.constructor && root.constructor.length === 0) {
+      // create a blank slate of the instance and copy the particular parameter.
+      let ctor = MEMOIZED_PROTOTYPES.get(root.constructor);
+      if (!ctor) {
+        ctor = new root.constructor();
+        MEMOIZED_PROTOTYPES.set(root.constructor, ctor);
       }
+      changedProps[key] = ctor[key];
+    } else {
+      // instance does not have constructor, just set it to 0
+      changedProps[key] = 0;
     }
   }
   return changedProps;
@@ -1282,7 +1288,7 @@ function createEvents(store) {
 const isRenderer = def => !!(def != null && def.render);
 const context = /*#__PURE__*/React__namespace.createContext(null);
 const createStore = (invalidate, advance) => {
-  const rootStore = zustand.create((set, get) => {
+  const rootStore = traditional.createWithEqualityFn((set, get) => {
     const position = new THREE__namespace.Vector3();
     const defaultTarget = new THREE__namespace.Vector3();
     const tempTarget = new THREE__namespace.Vector3();
@@ -1684,15 +1690,20 @@ const Lifecycle = [Early, Fixed, Update, Late, Render, After];
 
 /**
  * Exposes an object's {@link Instance}.
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#useInstanceHandle
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#useinstancehandle
  *
  * **Note**: this is an escape hatch to react-internal fields. Expect this to change significantly between versions.
  */
 function useInstanceHandle(ref) {
   const instance = React__namespace.useRef(null);
-  useIsomorphicLayoutEffect(() => void (instance.current = ref.current.__r3f), [ref]);
+  React__namespace.useImperativeHandle(instance, () => ref.current.__r3f, [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
+ */
 function useStore() {
   const store = React__namespace.useContext(context);
   if (!store) throw new Error('R3F: Hooks can only be used within the Canvas component!');
@@ -1704,7 +1715,6 @@ function useStore() {
  * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usethree
  */
 function useThree(selector = state => state, equalityFn) {
-  // TODO: fix this type
   return useStore()(selector, equalityFn);
 }
 
@@ -1725,7 +1735,7 @@ function useFrame(callback, renderPriority = 0) {
 
 /**
  * Executes a callback in a given update stage.
- * Uses the stage instance to indetify which stage to target in the lifecycle.
+ * Uses the stage instance to identify which stage to target in the lifecycle.
  */
 function useUpdate(callback, stage = Stages.Update) {
   const store = useStore();
@@ -1772,6 +1782,7 @@ function loadingFn(extensions, onProgress) {
     return Promise.all(input.map(input => new Promise((res, reject) => loader.load(input, data => res(isObject3D(data == null ? void 0 : data.scene) ? Object.assign(data, buildGraph(data.scene)) : data), onProgress, error => reject(new Error(`Could not load ${input}: ${error == null ? void 0 : error.message}`))))));
   };
 }
+
 /**
  * Synchronously loads and caches assets with a three loader.
  *
@@ -1804,7 +1815,8 @@ useLoader.clear = function (loader, input) {
   return suspendReact.clear([loader, ...keys]);
 };
 
-// TODO: fix type resolve
+// Shim for OffscreenCanvas since it was removed from DOM types
+// https://github.com/DefinitelyTyped/DefinitelyTyped/pull/54988
 
 const _roots = new Map();
 const shallowLoose = {
@@ -1994,7 +2006,15 @@ function createRoot(canvas) {
         const camera = isCamera ? cameraOptions : orthographic ? new THREE__namespace.OrthographicCamera(0, 0, 0, 0, 0.1, 1000) : new THREE__namespace.PerspectiveCamera(75, 0, 0.1, 1000);
         if (!isCamera) {
           camera.position.z = 5;
-          if (cameraOptions) applyProps(camera, cameraOptions);
+          if (cameraOptions) {
+            applyProps(camera, cameraOptions);
+            // Preserve user-defined frustum if possible
+            // https://github.com/pmndrs/react-three-fiber/issues/3160
+            if ('aspect' in cameraOptions || 'left' in cameraOptions || 'right' in cameraOptions || 'bottom' in cameraOptions || 'top' in cameraOptions) {
+              camera.manual = true;
+              camera.updateProjectionMatrix();
+            }
+          }
           // Always look at center by default
           if (!state.camera && !(cameraOptions != null && cameraOptions.rotation)) camera.lookAt(0, 0, 0);
         }
@@ -2291,7 +2311,7 @@ function Portal({
     };
   });
   const usePortalStore = React__namespace.useMemo(() => {
-    const store = zustand.create((set, get) => ({
+    const store = traditional.createWithEqualityFn((set, get) => ({
       ...rest,
       set,
       get