@react-three/fiber 9.0.0-alpha.6 → 9.0.0-alpha.7

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @react-three/fiber
 
+## 8.16.6
+
+### Patch Changes
+
+- 03ab82fe: fix(applyProps): null check indeterminate instances
+
 ## 8.16.5
 
 ### Patch Changes

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

@@ -4,6 +4,9 @@ import Reconciler from 'react-reconciler';
 import type { RootStore } from "./store.js";
 import { type EventHandlers } from "./events.js";
 import type { ThreeElement } from "../three-types.js";
+declare module 'react-reconciler/constants' {
+    const NoEventPriority = 0;
+}
 export interface Root {
     fiber: Reconciler.FiberRoot;
     store: RootStore;
@@ -39,5 +42,5 @@ export interface Instance<O = any> {
     autoRemovedBeforeAppend?: boolean;
 }
 export declare const catalogue: Catalogue;
-export declare const extend: <T extends Catalogue | ConstructorRepresentation<any>>(objects: T) => T extends ConstructorRepresentation<any> ? React.ExoticComponent<import("../three-types.js").Mutable<import("../three-types.js").Overwrite<Partial<import("../three-types.js").Overwrite<import("../three-types.js").WithMathProps<InstanceType<T>>, import("../three-types.js").ReactProps<InstanceType<T>> & import("../three-types.js").EventProps<InstanceType<T>>>>, Omit<InstanceProps<InstanceType<T>, T>, "object">>>> : void;
+export declare const extend: <T extends ConstructorRepresentation<any> | Catalogue>(objects: T) => T extends ConstructorRepresentation<any> ? React.ExoticComponent<import("../three-types.js").Mutable<import("../three-types.js").Overwrite<Partial<import("../three-types.js").Overwrite<import("../three-types.js").WithMathProps<InstanceType<T>>, import("../three-types.js").ReactProps<InstanceType<T>> & import("../three-types.js").EventProps<InstanceType<T>>>>, Omit<InstanceProps<InstanceType<T>, T>, "object">>>> : void;
 export declare const reconciler: Reconciler.Reconciler<RootStore, Instance<any>, void, Instance<any>, any>;

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

@@ -10,7 +10,7 @@ export declare function findInitialRoot<T>(instance: Instance<T>): RootStore;
 /**
  * Returns `true` with correct TS type inference if an object has a configurable color space (since r152).
  */
-export declare const hasColorSpace: <T extends object | Renderer | THREE.Texture, P = T extends Renderer ? {
+export declare const hasColorSpace: <T extends object | THREE.Texture | Renderer, P = T extends Renderer ? {
     outputColorSpace: string;
 } : {
     colorSpace: string;

package/dist/{loop-ef070875.esm.js → loop-2db547cd.esm.js}

@@ -12,6 +12,12 @@ var threeTypes = /*#__PURE__*/Object.freeze({
   __proto__: null
 });
 
+const createReconciler = Reconciler;
+
+// TODO: handle constructor overloads
+// https://github.com/pmndrs/react-three-fiber/pull/2931
+// https://github.com/microsoft/TypeScript/issues/37079
+
 const catalogue = {};
 let i = 0;
 const extend = objects => {
@@ -266,7 +272,7 @@ 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 = NoEventPriority;
-const reconciler = Reconciler({
+const reconciler = createReconciler({
   isPrimaryRenderer: false,
   warnsIfNotActing: false,
   supportsMutation: true,
@@ -296,7 +302,6 @@ const reconciler = Reconciler({
   },
   getRootHostContext: () => NO_CONTEXT,
   getChildHostContext: () => NO_CONTEXT,
-  // @ts-expect-error prepareUpdate and updatePayload removed with React 19
   commitUpdate(instance, type, oldProps, newProps, fiber) {
     var _newProps$args, _oldProps$args, _newProps$args2;
     let reconstruct = false;
@@ -343,8 +348,8 @@ const reconciler = Reconciler({
   beforeActiveInstanceBlur() {},
   afterActiveInstanceBlur() {},
   detachDeletedInstance() {},
-  // TODO: add shell types for these and upstream to DefinitelyTyped
-  // https://github.com/facebook/react/blob/main/packages/react-art/src/ReactFiberConfigART.js
+  prepareScopeUpdate() {},
+  getInstanceFromScope: () => null,
   shouldAttemptEagerTransition() {
     return false;
   },
@@ -388,7 +393,8 @@ const reconciler = Reconciler({
       default:
         return DefaultEventPriority;
     }
-  }
+  },
+  resetFormInstance() {}
 });
 
 var _window$document, _window$navigator;
@@ -1982,9 +1988,11 @@ function createRoot(canvas) {
             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();
+            if (!camera.manual) {
+              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
@@ -2239,7 +2247,7 @@ function Portal({
   const [raycaster] = React.useState(() => new THREE.Raycaster());
   const [pointer] = React.useState(() => new THREE.Vector2());
   const inject = useMutableCallback((rootState, injectState) => {
-    let viewport;
+    let viewport = undefined;
     if (injectState.camera && size) {
       const camera = injectState.camera;
       // Calculate the override viewport, if present
@@ -2250,8 +2258,7 @@ function Portal({
     return {
       // The intersect consists of the previous root state
       ...rootState,
-      get: injectState.get,
-      set: injectState.set,
+      ...injectState,
       // Portals have their own scene, which forms the root, a raycaster and a pointer
       scene: container,
       raycaster,
@@ -2284,6 +2291,7 @@ function Portal({
     };
   });
   const usePortalStore = React.useMemo(() => {
+    // Create a mirrored store, based on the previous root with a few overrides ...
     const store = createWithEqualityFn((set, get) => ({
       ...rest,
       set,

package/dist/{loop-6e8a6208.cjs.prod.js → loop-2e09d861.cjs.prod.js}

@@ -38,6 +38,12 @@ var threeTypes = /*#__PURE__*/Object.freeze({
   __proto__: null
 });
 
+const createReconciler = Reconciler__default["default"];
+
+// TODO: handle constructor overloads
+// https://github.com/pmndrs/react-three-fiber/pull/2931
+// https://github.com/microsoft/TypeScript/issues/37079
+
 const catalogue = {};
 let i = 0;
 const extend = objects => {
@@ -292,7 +298,7 @@ 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;
-const reconciler = Reconciler__default["default"]({
+const reconciler = createReconciler({
   isPrimaryRenderer: false,
   warnsIfNotActing: false,
   supportsMutation: true,
@@ -322,7 +328,6 @@ const reconciler = Reconciler__default["default"]({
   },
   getRootHostContext: () => NO_CONTEXT,
   getChildHostContext: () => NO_CONTEXT,
-  // @ts-expect-error prepareUpdate and updatePayload removed with React 19
   commitUpdate(instance, type, oldProps, newProps, fiber) {
     var _newProps$args, _oldProps$args, _newProps$args2;
     let reconstruct = false;
@@ -369,8 +374,8 @@ const reconciler = Reconciler__default["default"]({
   beforeActiveInstanceBlur() {},
   afterActiveInstanceBlur() {},
   detachDeletedInstance() {},
-  // TODO: add shell types for these and upstream to DefinitelyTyped
-  // https://github.com/facebook/react/blob/main/packages/react-art/src/ReactFiberConfigART.js
+  prepareScopeUpdate() {},
+  getInstanceFromScope: () => null,
   shouldAttemptEagerTransition() {
     return false;
   },
@@ -414,7 +419,8 @@ const reconciler = Reconciler__default["default"]({
       default:
         return constants.DefaultEventPriority;
     }
-  }
+  },
+  resetFormInstance() {}
 });
 
 var _window$document, _window$navigator;
@@ -2008,9 +2014,11 @@ function createRoot(canvas) {
             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();
+            if (!camera.manual) {
+              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
@@ -2265,7 +2273,7 @@ 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;
+    let viewport = undefined;
     if (injectState.camera && size) {
       const camera = injectState.camera;
       // Calculate the override viewport, if present
@@ -2276,8 +2284,7 @@ function Portal({
     return {
       // The intersect consists of the previous root state
       ...rootState,
-      get: injectState.get,
-      set: injectState.set,
+      ...injectState,
       // Portals have their own scene, which forms the root, a raycaster and a pointer
       scene: container,
       raycaster,
@@ -2310,6 +2317,7 @@ function Portal({
     };
   });
   const usePortalStore = React__namespace.useMemo(() => {
+    // Create a mirrored store, based on the previous root with a few overrides ...
     const store = traditional.createWithEqualityFn((set, get) => ({
       ...rest,
       set,

package/dist/{loop-c991cb05.cjs.dev.js → loop-4ac96174.cjs.dev.js}

@@ -38,6 +38,12 @@ var threeTypes = /*#__PURE__*/Object.freeze({
   __proto__: null
 });
 
+const createReconciler = Reconciler__default["default"];
+
+// TODO: handle constructor overloads
+// https://github.com/pmndrs/react-three-fiber/pull/2931
+// https://github.com/microsoft/TypeScript/issues/37079
+
 const catalogue = {};
 let i = 0;
 const extend = objects => {
@@ -292,7 +298,7 @@ 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;
-const reconciler = Reconciler__default["default"]({
+const reconciler = createReconciler({
   isPrimaryRenderer: false,
   warnsIfNotActing: false,
   supportsMutation: true,
@@ -322,7 +328,6 @@ const reconciler = Reconciler__default["default"]({
   },
   getRootHostContext: () => NO_CONTEXT,
   getChildHostContext: () => NO_CONTEXT,
-  // @ts-expect-error prepareUpdate and updatePayload removed with React 19
   commitUpdate(instance, type, oldProps, newProps, fiber) {
     var _newProps$args, _oldProps$args, _newProps$args2;
     let reconstruct = false;
@@ -369,8 +374,8 @@ const reconciler = Reconciler__default["default"]({
   beforeActiveInstanceBlur() {},
   afterActiveInstanceBlur() {},
   detachDeletedInstance() {},
-  // TODO: add shell types for these and upstream to DefinitelyTyped
-  // https://github.com/facebook/react/blob/main/packages/react-art/src/ReactFiberConfigART.js
+  prepareScopeUpdate() {},
+  getInstanceFromScope: () => null,
   shouldAttemptEagerTransition() {
     return false;
   },
@@ -414,7 +419,8 @@ const reconciler = Reconciler__default["default"]({
       default:
         return constants.DefaultEventPriority;
     }
-  }
+  },
+  resetFormInstance() {}
 });
 
 var _window$document, _window$navigator;
@@ -2008,9 +2014,11 @@ function createRoot(canvas) {
             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();
+            if (!camera.manual) {
+              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
@@ -2265,7 +2273,7 @@ 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;
+    let viewport = undefined;
     if (injectState.camera && size) {
       const camera = injectState.camera;
       // Calculate the override viewport, if present
@@ -2276,8 +2284,7 @@ function Portal({
     return {
       // The intersect consists of the previous root state
       ...rootState,
-      get: injectState.get,
-      set: injectState.set,
+      ...injectState,
       // Portals have their own scene, which forms the root, a raycaster and a pointer
       scene: container,
       raycaster,
@@ -2310,6 +2317,7 @@ function Portal({
     };
   });
   const usePortalStore = React__namespace.useMemo(() => {
+    // Create a mirrored store, based on the previous root with a few overrides ...
     const store = traditional.createWithEqualityFn((set, get) => ({
       ...rest,
       set,

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

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

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var loop = require('./loop-6e8a6208.cjs.prod.js');
+var loop = require('./loop-2e09d861.cjs.prod.js');
 var React = require('react');
 var THREE = require('three');
 var useMeasure = require('react-use-measure');

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

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

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

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

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var loop = require('../../dist/loop-6e8a6208.cjs.prod.js');
+var loop = require('../../dist/loop-2e09d861.cjs.prod.js');
 var React = require('react');
 var THREE = require('three');
 var reactNative = require('react-native');

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/fiber",
-  "version": "9.0.0-alpha.6",
+  "version": "9.0.0-alpha.7",
   "description": "A React renderer for Threejs",
   "keywords": [
     "react",
@@ -47,9 +47,9 @@
     "base64-js": "^1.5.1",
     "buffer": "^6.0.3",
     "its-fine": "^1.2.5",
-    "react-reconciler": "0.31.0-beta-6946ebe620-20240508",
+    "react-reconciler": "0.31.0-rc-915b914b3a-20240515",
     "react-use-measure": "^2.1.1",
-    "scheduler": "0.25.0-beta-6946ebe620-20240508",
+    "scheduler": "0.25.0-rc-915b914b3a-20240515",
     "suspend-react": "^0.1.3",
     "zustand": "^4.1.2"
   },