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

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @react-three/fiber
 
+## 8.16.3
+
+### Patch Changes
+
+- 9c83502c: fix(Canvas): don't override camera frustum props
+
 ## 8.16.2
 
 ### Patch Changes

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

@@ -5,11 +5,15 @@ import { ObjectMap } from "./utils.js";
 import type { Instance } from "./reconciler.js";
 /**
  * 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.
  */
-export declare function useInstanceHandle<O>(ref: React.MutableRefObject<O>): React.MutableRefObject<Instance>;
+export declare function useInstanceHandle<T>(ref: React.RefObject<T>): React.RefObject<Instance<T>>;
+/**
+ * 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
+ */
 export declare function useStore(): RootStore;
 /**
  * Accesses R3F's internal state, containing renderer, canvas, scene, etc.
@@ -24,7 +28,7 @@ export declare function useThree<T = RootState>(selector?: (state: RootState) =>
 export declare function useFrame(callback: RenderCallback, renderPriority?: number): null;
 /**
  * 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.
  */
 export declare function useUpdate(callback: UpdateCallback, stage?: StageTypes): void;
 /**

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

@@ -6,16 +6,15 @@ import { Root } from "./reconciler.js";
 import { EventManager, ComputeFunction } from "./events.js";
 import { Camera } from "./utils.js";
 import { Stage } from "./stages.js";
-declare var OffscreenCanvas: any;
-type OffscreenCanvas = any;
-type Canvas = HTMLCanvasElement | OffscreenCanvas;
-export declare const _roots: Map<any, Root>;
-export type GLProps = Renderer | ((canvas: Canvas) => Renderer) | Partial<Properties<THREE.WebGLRenderer> | THREE.WebGLRendererParameters>;
+interface OffscreenCanvas extends EventTarget {
+}
+export declare const _roots: Map<HTMLCanvasElement | OffscreenCanvas, Root>;
+export type GLProps = Renderer | ((canvas: HTMLCanvasElement | OffscreenCanvas) => Renderer) | Partial<Properties<THREE.WebGLRenderer> | THREE.WebGLRendererParameters>;
 export type CameraProps = (Camera | Partial<ThreeElement<typeof THREE.Camera> & ThreeElement<typeof THREE.PerspectiveCamera> & ThreeElement<typeof THREE.OrthographicCamera>>) & {
     /** Flags the camera as manual, putting projection into your own hands */
     manual?: boolean;
 };
-export interface RenderProps<TCanvas extends Canvas> {
+export interface RenderProps<TCanvas extends HTMLCanvasElement | OffscreenCanvas> {
     /** A threejs renderer instance or props that go into the default renderer */
     gl?: GLProps;
     /** Dimensions to fit the renderer to. Will measure canvas dimensions if omitted */
@@ -65,14 +64,14 @@ export interface RenderProps<TCanvas extends Canvas> {
     stages?: Stage[];
     render?: 'auto' | 'manual';
 }
-export interface ReconcilerRoot<TCanvas extends Canvas> {
+export interface ReconcilerRoot<TCanvas extends HTMLCanvasElement | OffscreenCanvas> {
     configure: (config?: RenderProps<TCanvas>) => ReconcilerRoot<TCanvas>;
     render: (element: React.ReactNode) => RootStore;
     unmount: () => void;
 }
-export declare function createRoot<TCanvas extends Canvas>(canvas: TCanvas): ReconcilerRoot<TCanvas>;
-export declare function render<TCanvas extends Canvas>(children: React.ReactNode, canvas: TCanvas, config: RenderProps<TCanvas>): RootStore;
-export declare function unmountComponentAtNode<TCanvas extends Canvas>(canvas: TCanvas, callback?: (canvas: TCanvas) => void): void;
+export declare function createRoot<TCanvas extends HTMLCanvasElement | OffscreenCanvas>(canvas: TCanvas): ReconcilerRoot<TCanvas>;
+export declare function render<TCanvas extends HTMLCanvasElement | OffscreenCanvas>(children: React.ReactNode, canvas: TCanvas, config: RenderProps<TCanvas>): RootStore;
+export declare function unmountComponentAtNode<TCanvas extends HTMLCanvasElement | OffscreenCanvas>(canvas: TCanvas, callback?: (canvas: TCanvas) => void): void;
 export type InjectState = Partial<Omit<RootState, 'events'> & {
     events?: {
         enabled?: boolean;

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

@@ -1,7 +1,8 @@
 /// <reference types="webxr" />
 import * as THREE from 'three';
 import * as React from 'react';
-import { type StoreApi, type UseBoundStore } from 'zustand';
+import { type StoreApi } from 'zustand';
+import { type UseBoundStoreWithEqualityFn } from 'zustand/traditional';
 import type { DomEvent, EventManager, PointerCaptureTarget, ThreeEvent } from "./events.js";
 import { type Camera } from "./utils.js";
 import type { FixedStage, Stage } from "./stages.js";
@@ -9,7 +10,7 @@ export interface Intersection extends THREE.Intersection {
     eventObject: THREE.Object3D;
 }
 export type Subscription = {
-    ref: React.MutableRefObject<RenderCallback>;
+    ref: React.RefObject<RenderCallback>;
     priority: number;
     store: RootStore;
 };
@@ -67,7 +68,7 @@ export interface InternalState {
     capturedMap: Map<number, Map<THREE.Object3D, PointerCaptureTarget>>;
     initialClick: [x: number, y: number];
     initialHits: THREE.Object3D[];
-    lastEvent: React.MutableRefObject<DomEvent | null>;
+    lastEvent: React.RefObject<DomEvent | null>;
     active: boolean;
     priority: number;
     frames: number;
@@ -77,7 +78,7 @@ export interface InternalState {
     render: 'auto' | 'manual';
     /** The max delta time between two frames. */
     maxDelta: number;
-    subscribe: (callback: React.MutableRefObject<RenderCallback>, priority: number, store: RootStore) => () => void;
+    subscribe: (callback: React.RefObject<RenderCallback>, priority: number, store: RootStore) => () => void;
 }
 export interface XRManager {
     connect: () => void;
@@ -142,6 +143,6 @@ export interface RootState {
     /** Internals */
     internal: InternalState;
 }
-export type RootStore = UseBoundStore<StoreApi<RootState>>;
+export type RootStore = UseBoundStoreWithEqualityFn<StoreApi<RootState>>;
 export declare const context: React.Context<RootStore>;
 export declare const createStore: (invalidate: (state?: RootState, frames?: number) => void, advance: (timestamp: number, runGlobalEffects?: boolean, state?: RootState, frame?: XRFrame) => void) => RootStore;

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

@@ -33,7 +33,7 @@ export type Camera = (THREE.OrthographicCamera | THREE.PerspectiveCamera) & {
     manual?: boolean;
 };
 export declare const isOrthographicCamera: (def: Camera) => def is THREE.OrthographicCamera;
-export declare const isRef: (obj: any) => obj is React.MutableRefObject<unknown>;
+export declare const isRef: (obj: any) => obj is React.RefObject<unknown>;
 /**
  * An SSR-friendly useLayoutEffect.
  *
@@ -44,7 +44,7 @@ export declare const isRef: (obj: any) => obj is React.MutableRefObject<unknown>
  * @see https://github.com/facebook/react/issues/14927
  */
 export declare const useIsomorphicLayoutEffect: typeof React.useLayoutEffect;
-export declare function useMutableCallback<T>(fn: T): React.MutableRefObject<T>;
+export declare function useMutableCallback<T>(fn: T): React.RefObject<T>;
 export type Bridge = React.FC<{
     children?: React.ReactNode;
 }>;
@@ -121,7 +121,7 @@ export declare function resolve(root: any, key: string): {
 export declare function attach(parent: Instance, child: Instance): void;
 export declare function detach(parent: Instance, child: Instance): void;
 export declare const RESERVED_PROPS: string[];
-export declare function diffProps<T = any>(instance: Instance<T>, newProps: Instance<T>['props'], resetRemoved?: boolean): Instance<T>['props'];
+export declare function diffProps<T = any>(instance: Instance<T>, newProps: Instance<T>['props']): Instance<T>['props'];
 export declare function applyProps<T = any>(object: Instance<T>['object'], props: Instance<T>['props']): Instance<T>['object'];
 export declare function invalidateInstance(instance: Instance): void;
 export declare function updateCamera(camera: Camera, size: Size): void;

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { View, ViewProps, ViewStyle } from 'react-native';
 import { RenderProps } from "../core/index.js";
-export interface CanvasProps extends Omit<RenderProps<HTMLCanvasElement>, 'size' | 'dpr'>, ViewProps {
+export interface CanvasProps extends Omit<RenderProps<HTMLCanvasElement>, 'size' | 'dpr'>, Omit<ViewProps, 'children'> {
     children: React.ReactNode;
     style?: ViewStyle;
 }

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

@@ -47,7 +47,7 @@ export interface ThreeElements extends ThreeElementsImpl {
         object: object;
     };
 }
-declare global {
+declare module 'react' {
     namespace JSX {
         interface IntrinsicElements extends ThreeElements {
         }

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

@@ -11,7 +11,7 @@ export interface CanvasProps extends Omit<RenderProps<HTMLCanvasElement>, 'size'
      */
     resize?: ResizeOptions;
     /** The target where events are being subscribed to, default: the div that wraps canvas */
-    eventSource?: HTMLElement | React.MutableRefObject<HTMLElement>;
+    eventSource?: HTMLElement | React.RefObject<HTMLElement>;
     /** The event prefix that is cast into canvas pointer x/y events, default: "offset" */
     eventPrefix?: 'offset' | 'client' | 'page' | 'layer' | 'screen';
 }

package/dist/{loop-0698c205.cjs.dev.js → loop-02cefb27.cjs.dev.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