@react-three/fiber 9.7.0 → 9.8.0

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @react-three/fiber
 
+## 9.8.0
+
+### Minor Changes
+
+- 4ae2f816543f21e72b38d3e1328a21fc312428c1: Support React 19.3. Transitions that touch a `<ViewTransition>` subtree inside the canvas now commit synchronously, mirroring react-dom in browsers without view transitions, instead of leaving the reconciler stuck mid-commit.
+- bc240cc56dbb0162737b2df0e99077c889d7cf2e: feat: configure and render roots synchronously; suspend on async renderers.
+
+  `root.configure()` now runs synchronously unless `gl` is an async factory (WebGPU), and the first `root.render()` mounts synchronously once the root is configured; later renders are batched as before. The returned promises carry a `status` field that React's `use` reads, and every root exposes `ready`, which is pending only while an async renderer is being created.
+
+  `<Canvas>` uses this to commit its scene inside its own layout effect, so `onCreated` runs while the wrapper is mounted and the events are connected before the browser paints. With an async renderer the canvas suspends on `root.ready` internally, without showing a parent fallback, and mounts once it resolves. Unmounting meanwhile never renders the scene. A renderer factory that fails now reaches the nearest error boundary instead of an unhandled rejection.
+
+  Configure calls made while another is in flight are applied after it, in order. The `flushSync` caveats apply to that first `root.render()` when it is called from inside another root's commit.
+
+### Patch Changes
+
+- f0f1cdf4336519a988faadae7f8607bc0cd8d7e2: fix: unmount roots deterministically instead of after a 500ms timer.
+
+  `unmountComponentAtNode` deferred disposal by 500ms. A `<StrictMode>` remount lands inside that window and reuses the same root, store, scene and GL context, so the deferred callback destroyed a live root. `forceContextLoss()` is permanent, which left the canvas blank for the rest of the session.
+
+  Unmounting now claims the root and runs the teardown through React once the unmounted tree's effect cleanups have flushed. Using the root again through `configure` or `render` before then cancels it. A root that is unmounted, remounted and unmounted again is torn down exactly once.
+
+- bc240cc56dbb0162737b2df0e99077c889d7cf2e: fix: don't resurrect a `<Canvas>` root that unmounts before its render settles.
+
+  `<Canvas>` configured its root asynchronously. When the canvas was unmounted between that effect and the microtasks it queued, for example by a spring reparenting it through a synchronous state update from a layout effect, the stale continuation still rendered into the torn-down root. Its Provider then mounted again and called `events.connect` with the unmounted wrapper `div`, throwing `Cannot read properties of null (reading 'addEventListener')`, and the resurrected root leaked a live WebGL context.
+
+  The scene now commits inside the canvas' own commit, a deferred render bails once the root is claimed for teardown, and `unmountComponentAtNode` waits for a configure still in flight so the renderer it creates is disposed rather than orphaned.
+
 ## 9.7.0
 
 ### Minor Changes

package/dist/declarations/react-reconciler/index.d.ts

@@ -610,7 +610,8 @@ declare namespace ReactReconciler {
     type LanePriority = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17;
 
     type Lanes = number;
-    type Lane = number;
+
+    type Lane = number & { __LaneBrand: any };
 
     type Flags = number;
 
@@ -941,7 +942,6 @@ declare namespace ReactReconciler {
             onCaughtError: (error: Error, info: BaseErrorInfo) => void,
             onRecoverableError: (error: Error, info: BaseErrorInfo) => void,
             onDefaultTransitionIndicator: () => void,
-            transitionCallbacks: null | TransitionTracingCallbacks,
         ): OpaqueRoot;
 
         createPortal(
@@ -951,8 +951,6 @@ declare namespace ReactReconciler {
             key?: string | null,
         ): ReactPortal;
 
-        registerMutableSourceForHydration(root: FiberRoot, mutableSource: MutableSource): void;
-
         createComponentSelector(component: React$AbstractComponent<never, unknown>): ComponentSelector;
 
         createHasPseudoClassSelector(selectors: Selector[]): HasPseudoClassSelector;
@@ -987,8 +985,12 @@ declare namespace ReactReconciler {
             isStrictMode: boolean,
             concurrentUpdatesByDefaultOverride: null | boolean,
             identifierPrefix: string,
-            onRecoverableError: (error: Error) => void,
+            onUncaughtError: (error: Error, info: BaseErrorInfo & { errorBoundary?: Component }) => void,
+            onCaughtError: (error: Error, info: BaseErrorInfo) => void,
+            onRecoverableError: (error: Error, info: BaseErrorInfo) => void,
+            onDefaultTransitionIndicator: () => void,
             transitionCallbacks: null | TransitionTracingCallbacks,
+            formState: unknown,
         ): OpaqueRoot;
 
         updateContainer(
@@ -998,17 +1000,27 @@ declare namespace ReactReconciler {
             callback?: (() => void) | null,
         ): Lane;
 
+        updateContainerSync(
+            element: ReactNode,
+            container: OpaqueRoot,
+            parentComponent?: Component<any, any> | null,
+            callback?: (() => void) | null,
+        ): Lane;
+
         batchedUpdates<A, R>(fn: (a: A) => R, a: A): R;
 
         deferredUpdates<A>(fn: () => A): A;
 
         discreteUpdates<A, B, C, D, R>(fn: (arg0: A, arg1: B, arg2: C, arg3: D) => R, a: A, b: B, c: C, d: D): R;
 
-        flushControlled(fn: () => any): void;
-
         flushSync(): void;
         flushSync<R>(fn: () => R): R;
 
+        flushSyncFromReconciler(): void;
+        flushSyncFromReconciler<R>(fn: () => R): R;
+
+        flushSyncWork(): boolean;
+
         isAlreadyRendering(): boolean;
 
         flushPassiveEffects(): boolean;
@@ -1017,16 +1029,10 @@ declare namespace ReactReconciler {
 
         attemptSynchronousHydration(fiber: Fiber): void;
 
-        attemptDiscreteHydration(fiber: Fiber): void;
-
         attemptContinuousHydration(fiber: Fiber): void;
 
         attemptHydrationAtCurrentPriority(fiber: Fiber): void;
 
-        getCurrentUpdatePriority(): LanePriority;
-
-        runWithPriority<T>(priority: LanePriority, fn: () => T): T;
-
         findHostInstance(component: any): PublicInstance | null;
 
         findHostInstanceWithWarning(component: any, methodName: string): PublicInstance | null;
@@ -1039,6 +1045,17 @@ declare namespace ReactReconciler {
 
         injectIntoDevTools(devToolsConfig: DevToolsConfig<Instance, TextInstance, any>): boolean;
     }
+
+    function defaultOnUncaughtError(error: Error): void;
+    function defaultOnCaughtError(error: Error): void;
+    function defaultOnRecoverableError(error: Error): void;
+
+    function startHostTransition(
+        formFiber: Fiber,
+        pendingState: unknown,
+        action: ((formData: FormData) => void) | null,
+        formData: FormData,
+    ): void;
 }
 
 export = ReactReconciler;

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

@@ -11,3 +11,4 @@ export type { Subscription, Dpr, Size, Viewport, RenderCallback, Frameloop, Perf
 export { context } from "./store.js";
 export type { ObjectMap, Camera, Disposable, Act } from "./utils.js";
 export { applyProps, getRootState, dispose, act, buildGraph } from "./utils.js";
+export type { TrackedPromise } from "./promise.js";

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

@@ -0,0 +1,15 @@
+export declare const isPromiseLike: (value: unknown) => value is PromiseLike<unknown>;
+/** A promise tagged with its state, the protocol React's `use` reads */
+export type TrackedPromise<T> = Promise<T> & ({
+    status: 'pending';
+} | {
+    status: 'fulfilled';
+    value: T;
+} | {
+    status: 'rejected';
+    reason: unknown;
+});
+export declare const fulfilled: <T>(value: T) => TrackedPromise<T>;
+export declare const rejected: <T>(reason: unknown) => TrackedPromise<T>;
+/** Tags `promise` in place once it settles. */
+export declare const tracked: <T>(promise: PromiseLike<T>) => TrackedPromise<T>;

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

@@ -1,6 +1,7 @@
 import * as THREE from 'three';
 import * as React from 'react';
 import Reconciler from '../../react-reconciler/index.js';
+import type { TrackedPromise } from "./promise.js";
 import { IsAllOptional } from "./utils.js";
 import type { RootStore } from "./store.js";
 import { type EventHandlers } from "./events.js";
@@ -8,6 +9,9 @@ import type { ThreeElement } from "../three-types.js";
 export interface Root {
     fiber: Reconciler.FiberRoot;
     store: RootStore;
+    unmountClaim: symbol | null;
+    /** Pending only while an async renderer is being created */
+    ready: TrackedPromise<unknown>;
 }
 export type AttachFnType<O = any> = (parent: any, self: O) => () => void;
 export type AttachType<O = any> = string | AttachFnType<O>;

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

@@ -5,6 +5,7 @@ import { ComputeFunction, EventManager } from "./events.js";
 import { Root } from "./reconciler.js";
 import { Dpr, Frameloop, Performance, Renderer, RootState, RootStore, Size } from "./store.js";
 import { type Properties, Camera } from "./utils.js";
+import { TrackedPromise } from "./promise.js";
 interface OffscreenCanvas extends EventTarget {
 }
 export declare const _roots: Map<HTMLCanvasElement | OffscreenCanvas, Root>;
@@ -29,7 +30,7 @@ export interface RenderProps<TCanvas extends HTMLCanvasElement | OffscreenCanvas
     shadows?: boolean | 'basic' | 'percentage' | 'soft' | 'variance' | Partial<THREE.WebGLShadowMap>;
     /**
      * Disables three r139 color management.
-     * @see https://threejs.org/docs/#manual/en/introduction/Color-management
+     * @see https://threejs.org/manual/#en/color-management
      */
     legacy?: boolean;
     /** Switch off automatic sRGB encoding and gamma correction */
@@ -64,7 +65,8 @@ export interface RenderProps<TCanvas extends HTMLCanvasElement | OffscreenCanvas
     onPointerMissed?: (event: MouseEvent) => void;
 }
 export interface ReconcilerRoot<TCanvas extends HTMLCanvasElement | OffscreenCanvas> {
-    configure: (config?: RenderProps<TCanvas>) => Promise<ReconcilerRoot<TCanvas>>;
+    ready: TrackedPromise<unknown>;
+    configure: (config?: RenderProps<TCanvas>) => TrackedPromise<ReconcilerRoot<TCanvas>>;
     render: (element: React.ReactNode) => RootStore;
     unmount: () => void;
 }

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

@@ -39,6 +39,9 @@ export declare const isColorRepresentation: (value: unknown) => value is THREE.C
  */
 export declare const useIsomorphicLayoutEffect: typeof React.useLayoutEffect;
 export declare function useMutableCallback<T>(fn: T): React.RefObject<T>;
+export declare const noop: () => void;
+/** Waits for a promise in a null subtree, re-rendering the caller once it settles either way. */
+export declare function useGate(): [gate: React.ReactNode, waitFor: (promise: PromiseLike<unknown>) => void];
 export type Bridge = React.FC<{
     children?: React.ReactNode;
 }>;

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

@@ -10,4 +10,4 @@ export interface CanvasProps extends Omit<RenderProps<HTMLCanvasElement>, 'size'
  * A native canvas which accepts threejs elements as children.
  * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
  */
-export declare function Canvas(props: CanvasProps): import("react/jsx-runtime").JSX.Element;
+export declare function Canvas(props: CanvasProps): React.JSX.Element;

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

@@ -12,7 +12,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.RefObject<HTMLElement>;
+    eventSource?: HTMLElement | React.RefObject<HTMLElement | null>;
     /** The event prefix that is cast into canvas pointer x/y events, default: "offset" */
     eventPrefix?: 'offset' | 'client' | 'page' | 'layer' | 'screen';
 }
@@ -20,4 +20,4 @@ export interface CanvasProps extends Omit<RenderProps<HTMLCanvasElement>, 'size'
  * A DOM canvas which accepts threejs elements as children.
  * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
  */
-export declare function Canvas(props: CanvasProps): import("react/jsx-runtime").JSX.Element;
+export declare function Canvas(props: CanvasProps): React.JSX.Element;