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

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

@@ -9,7 +9,7 @@ import type { Instance } from "./reconciler.js";
  *
  * **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<O>(ref: React.RefObject<O>): React.RefObject<Instance>;
 export declare function useStore(): RootStore;
 /**
  * Accesses R3F's internal state, containing renderer, canvas, scene, etc.

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

@@ -9,7 +9,7 @@ export type { ReconcilerRoot, GLProps, CameraProps, RenderProps, InjectState } f
 export { _roots, render, createRoot, unmountComponentAtNode, createPortal } from "./renderer.js";
 export type { UpdateSubscription } from "./stages.js";
 export { Stage, FixedStage, Stages } from "./stages.js";
-export type { Subscription, Dpr, Size, Viewport, RenderCallback, UpdateCallback, LegacyAlways, FrameloopMode, FrameloopRender, FrameloopLegacy, Frameloop, Performance, Renderer, StageTypes, XRManager, RootState, RootStore, } from "./store.js";
+export type { Subscription, Dpr, Size, RenderCallback, UpdateCallback, LegacyAlways, FrameloopMode, FrameloopRender, FrameloopLegacy, Frameloop, Performance, Renderer, StageTypes, XRManager, RootState, RootStore, } from "./store.js";
 export { context } from "./store.js";
 export type { ObjectMap, Camera, Disposable, Act } from "./utils.js";
 export { applyProps, getRootState, dispose, act, buildGraph } from "./utils.js";

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

@@ -35,7 +35,6 @@ export interface Instance<O = any> {
     handlers: Partial<EventHandlers>;
     attach?: AttachType<O>;
     previousAttach?: any;
-    isHidden: boolean;
     autoRemovedBeforeAppend?: boolean;
 }
 export declare const catalogue: Catalogue;

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;
 };
@@ -20,18 +21,6 @@ export interface Size {
     top: number;
     left: number;
 }
-export interface Viewport extends Size {
-    /** The initial pixel ratio */
-    initialDpr: number;
-    /** Current pixel ratio */
-    dpr: number;
-    /** size.width / viewport.width */
-    factor: number;
-    /** Camera distance */
-    distance: number;
-    /** Camera aspect ratio: width / height */
-    aspect: number;
-}
 export type RenderCallback = (state: RootState, delta: number, frame?: XRFrame) => void;
 export type UpdateCallback = RenderCallback;
 export type LegacyAlways = 'always';
@@ -67,7 +56,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 +66,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;
@@ -117,12 +106,10 @@ export interface RootState {
     frameloop: FrameloopLegacy;
     /** Adaptive performance interface */
     performance: Performance;
+    /** The current pixel ratio */
+    dpr: number;
     /** Reactive pixel-size of the canvas */
     size: Size;
-    /** Reactive size of the viewport in threejs units */
-    viewport: Viewport & {
-        getCurrentViewport: (camera?: Camera, target?: THREE.Vector3 | Parameters<THREE.Vector3['set']>, size?: Size) => Omit<Viewport, 'dpr' | 'initialDpr'>;
-    };
     /** Flags the canvas for render, but doesn't render in itself */
     invalidate: (frames?: number) => void;
     /** Advance (render) one step */
@@ -142,6 +129,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-a0ef8208.cjs.prod.js → loop-7224f71f.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
@@ -256,31 +256,6 @@ 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,
@@ -309,18 +284,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 +319,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 +331,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 +385,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;
 }
 
@@ -608,8 +575,7 @@ function prepare(target, root, type, props) {
       props: getInstanceProps(props),
       object,
       eventCount: 0,
-      handlers: {},
-      isHidden: false
+      handlers: {}
     };
     if (object) {
       object.__r3f = instance;
@@ -688,7 +654,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 +674,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,45 +1246,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 position = new THREE__namespace.Vector3();
-    const defaultTarget = new THREE__namespace.Vector3();
-    const tempTarget = new THREE__namespace.Vector3();
-    function getCurrentViewport(camera = get().camera, target = defaultTarget, size = get().size) {
-      const {
-        width,
-        height,
-        top,
-        left
-      } = size;
-      const aspect = width / height;
-      if (target instanceof THREE__namespace.Vector3) tempTarget.copy(target);else tempTarget.set(...target);
-      const distance = camera.getWorldPosition(position).distanceTo(tempTarget);
-      if (isOrthographicCamera(camera)) {
-        return {
-          width: width / camera.zoom,
-          height: height / camera.zoom,
-          top,
-          left,
-          factor: 1,
-          distance,
-          aspect
-        };
-      } else {
-        const fov = camera.fov * Math.PI / 180; // convert vertical fov to radians
-        const h = 2 * Math.tan(fov / 2) * distance; // visible height
-        const w = h * (width / height);
-        return {
-          width: w,
-          height: h,
-          top,
-          left,
-          factor: width / w,
-          distance,
-          aspect
-        };
-      }
-    }
+  const rootStore = traditional.createWithEqualityFn((set, get) => {
     let performanceTimeout = undefined;
     const setPerformanceCurrent = current => set(state => ({
       performance: {
@@ -1369,24 +1295,13 @@ const createStore = (invalidate, advance) => {
           performanceTimeout = setTimeout(() => setPerformanceCurrent(get().performance.max), state.performance.debounce);
         }
       },
+      dpr: 1,
       size: {
         width: 0,
         height: 0,
         top: 0,
         left: 0
       },
-      viewport: {
-        initialDpr: 0,
-        dpr: 0,
-        width: 0,
-        height: 0,
-        top: 0,
-        left: 0,
-        aspect: 0,
-        distance: 0,
-        factor: 0,
-        getCurrentViewport
-      },
       setEvents: events => set(state => ({
         ...state,
         events: {
@@ -1395,30 +1310,17 @@ const createStore = (invalidate, advance) => {
         }
       })),
       setSize: (width, height, top = 0, left = 0) => {
-        const camera = get().camera;
-        const size = {
-          width,
-          height,
-          top,
-          left
-        };
-        set(state => ({
-          size,
-          viewport: {
-            ...state.viewport,
-            ...getCurrentViewport(camera, defaultTarget, size)
+        set({
+          size: {
+            width,
+            height,
+            top,
+            left
           }
-        }));
+        });
       },
-      setDpr: dpr => set(state => {
-        const resolved = calculateDpr(dpr);
-        return {
-          viewport: {
-            ...state.viewport,
-            dpr: resolved,
-            initialDpr: state.viewport.initialDpr || resolved
-          }
-        };
+      setDpr: dpr => set({
+        dpr: calculateDpr(dpr)
       }),
       setFrameloop: frameloop => {
         var _frameloop$mode, _frameloop$render, _frameloop$maxDelta;
@@ -1507,39 +1409,23 @@ const createStore = (invalidate, advance) => {
   });
   const state = rootStore.getState();
   let oldSize = state.size;
-  let oldDpr = state.viewport.dpr;
-  let oldCamera = state.camera;
-  rootStore.subscribe(() => {
-    const {
-      camera,
-      size,
-      viewport,
-      gl,
-      set
-    } = rootStore.getState();
-
+  let oldDpr = state.dpr;
+  rootStore.subscribe(({
+    camera,
+    size,
+    dpr,
+    gl
+  }) => {
     // Resize camera and renderer on changes to size and pixelratio
-    if (size.width !== oldSize.width || size.height !== oldSize.height || viewport.dpr !== oldDpr) {
+    if (size !== oldSize || dpr !== oldDpr) {
       oldSize = size;
-      oldDpr = viewport.dpr;
+      oldDpr = dpr;
       // Update camera & renderer
       updateCamera(camera, size);
-      gl.setPixelRatio(viewport.dpr);
+      gl.setPixelRatio(dpr);
       const updateStyle = typeof HTMLCanvasElement !== 'undefined' && gl.domElement instanceof HTMLCanvasElement;
       gl.setSize(size.width, size.height, updateStyle);
     }
-
-    // Update viewport once the camera changes
-    if (camera !== oldCamera) {
-      oldCamera = camera;
-      // Update viewport
-      set(state => ({
-        viewport: {
-          ...state.viewport,
-          ...state.viewport.getCurrentViewport(camera)
-        }
-      }));
-    }
   });
 
   // Invalidate on any change
@@ -1704,7 +1590,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);
 }
 
@@ -1804,7 +1689,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 = {
@@ -2123,7 +2009,7 @@ function createRoot(canvas) {
         state.setSize(size.width, size.height, size.top, size.left);
       }
       // Check pixelratio
-      if (dpr && state.viewport.dpr !== calculateDpr(dpr)) state.setDpr(dpr);
+      if (dpr && state.dpr !== calculateDpr(dpr)) state.setDpr(dpr);
       // Check frameloop
       if (state.frameloop !== frameloop) state.setFrameloop(frameloop);
       // Check pointer missed
@@ -2246,11 +2132,8 @@ function Portal({
   const [raycaster] = React__namespace.useState(() => new THREE__namespace.Raycaster());
   const [pointer] = React__namespace.useState(() => new THREE__namespace.Vector2());
   const inject = useMutableCallback((rootState, injectState) => {
-    let viewport;
     if (injectState.camera && size) {
       const camera = injectState.camera;
-      // Calculate the override viewport, if present
-      viewport = rootState.viewport.getCurrentViewport(camera, new THREE__namespace.Vector3(), size);
       // Update the portal camera, if it differs from the previous layer
       if (camera !== rootState.camera) updateCamera(camera, size);
     }
@@ -2266,7 +2149,7 @@ function Portal({
       mouse: pointer,
       // Their previous root is the layer before it
       previousRoot,
-      // Events, size and viewport can be overridden by the inject layer
+      // Events and size can be overridden by the inject layer
       events: {
         ...rootState.events,
         ...injectState.events,
@@ -2276,10 +2159,6 @@ function Portal({
         ...rootState.size,
         ...size
       },
-      viewport: {
-        ...rootState.viewport,
-        ...viewport
-      },
       // Layers are allowed to override events
       setEvents: events => injectState.set(state => ({
         ...state,
@@ -2291,7 +2170,7 @@ function Portal({
     };
   });
   const usePortalStore = React__namespace.useMemo(() => {
-    const store = zustand.create((set, get) => ({
+    const store = traditional.createWithEqualityFn((set, get) => ({
       ...rest,
       set,
       get