@react-three/fiber 9.0.0-rc.0 → 9.0.0-rc.10

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @react-three/fiber
 
+## 8.17.14
+
+### Patch Changes
+
+- eeeed16b: fix: update use-measure
+
+## 8.17.13
+
+### Patch Changes
+
+- 0a0f2acd: fix: upstream use-measure
+
+## 8.17.12
+
+### Patch Changes
+
+- ff1a16f1: fix: narrow React peer dep range
+
+## 8.17.11
+
+### Patch Changes
+
+- 7461bf0c: fix: loosen instanceof checks for CSB issue
+
 ## 8.17.10
 
 ### Patch Changes

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

@@ -56,6 +56,7 @@ export interface EventHandlers {
     onPointerMissed?: (event: MouseEvent) => void;
     onPointerCancel?: (event: ThreeEvent<PointerEvent>) => void;
     onWheel?: (event: ThreeEvent<WheelEvent>) => void;
+    onLostPointerCapture?: (event: ThreeEvent<PointerEvent>) => void;
 }
 export type FilterFunction = (items: THREE.Intersection[], state: RootState) => THREE.Intersection[];
 export type ComputeFunction = (event: DomEvent, root: RootState, previous?: RootState) => void;

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

@@ -2,10 +2,10 @@ import * as THREE from 'three';
 import * as React from 'react';
 import { RootState, RenderCallback, RootStore } from "./store.js";
 import { ObjectMap } from "./utils.js";
-import type { Instance } from "./reconciler.js";
+import type { Instance, ConstructorRepresentation } 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.
  */
@@ -31,22 +31,23 @@ export declare function useFrame(callback: RenderCallback, renderPriority?: numb
  * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usegraph
  */
 export declare function useGraph(object: THREE.Object3D): ObjectMap;
-export interface Loader<T> extends THREE.Loader {
-    load(url: string | string[] | string[][], onLoad?: (result: T, ...args: any[]) => void, onProgress?: (event: ProgressEvent) => void, onError?: (event: unknown) => void): unknown;
-}
-export type LoaderProto<T> = new (...args: any[]) => Loader<T>;
-export type LoaderResult<T> = T extends {
+type InputLike = string | string[] | string[][] | Readonly<string | string[] | string[][]>;
+type LoaderLike = THREE.Loader<any, InputLike>;
+type GLTFLike = {
     scene: THREE.Object3D;
-} ? T & ObjectMap : T;
-export type Extensions<T> = (loader: Loader<T>) => void;
+};
+type LoaderInstance<T extends LoaderLike | ConstructorRepresentation<LoaderLike>> = T extends ConstructorRepresentation<LoaderLike> ? InstanceType<T> : T;
+export type LoaderResult<T extends LoaderLike | ConstructorRepresentation<LoaderLike>> = Awaited<ReturnType<LoaderInstance<T>['loadAsync']>> extends infer R ? R extends GLTFLike ? R & ObjectMap : R : never;
+export type Extensions<T extends LoaderLike | ConstructorRepresentation<LoaderLike>> = (loader: LoaderInstance<T>) => void;
 /**
  * Synchronously loads and caches assets with a three loader.
  *
  * Note: this hook's caller must be wrapped with `React.Suspense`
  * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#useloader
  */
-export declare function useLoader<T, U extends string | string[] | string[][]>(loader: Loader<T> | LoaderProto<T>, input: U, extensions?: Extensions<T>, onProgress?: (event: ProgressEvent) => void): U extends any[] ? LoaderResult<T>[] : LoaderResult<T>;
+export declare function useLoader<I extends InputLike, L extends LoaderLike | ConstructorRepresentation<LoaderLike>>(loader: L, input: I, extensions?: Extensions<L>, onProgress?: (event: ProgressEvent<EventTarget>) => void): I extends any[] ? LoaderResult<L>[] : LoaderResult<L>;
 export declare namespace useLoader {
-    var preload: <T, U extends string | string[] | string[][]>(loader: Loader<T> | LoaderProto<T>, input: U, extensions?: Extensions<T> | undefined) => void;
-    var clear: <T, U extends string | string[] | string[][]>(loader: Loader<T> | LoaderProto<T>, input: U) => void;
+    var preload: <I extends InputLike, L extends LoaderLike | ConstructorRepresentation<LoaderLike>>(loader: L, input: I, extensions?: Extensions<L> | undefined) => void;
+    var clear: <I extends InputLike, L extends LoaderLike | ConstructorRepresentation<LoaderLike>>(loader: L, input: I) => void;
 }
+export {};

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

@@ -6,7 +6,7 @@ export { flushGlobalEffects, addEffect, addAfterEffect, addTail, invalidate, adv
 export type { AttachFnType, AttachType, ConstructorRepresentation, Catalogue, Args, InstanceProps, Instance, } from "./reconciler.js";
 export { extend, reconciler } from "./reconciler.js";
 export type { ReconcilerRoot, GLProps, CameraProps, RenderProps, InjectState } from "./renderer.js";
-export { _roots, render, createRoot, unmountComponentAtNode, createPortal } from "./renderer.js";
+export { _roots, createRoot, unmountComponentAtNode, createPortal } from "./renderer.js";
 export type { Subscription, Dpr, Size, Viewport, RenderCallback, Frameloop, Performance, Renderer, XRManager, RootState, RootStore, } from "./store.js";
 export { context } from "./store.js";
 export type { ObjectMap, Camera, Disposable, Act } from "./utils.js";

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

@@ -5,9 +5,6 @@ import { IsAllOptional } from "./utils.js";
 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;
@@ -28,7 +25,6 @@ type ArgsProp<P> = P extends ConstructorRepresentation ? IsAllOptional<Construct
 };
 export type InstanceProps<T = any, P = any> = ArgsProp<P> & {
     object?: T;
-    visible?: boolean;
     dispose?: null;
     attach?: AttachType<T>;
     onUpdate?: (self: T) => void;
@@ -48,7 +44,6 @@ export interface Instance<O = any> {
     previousAttach?: any;
     isHidden: boolean;
 }
-export declare const catalogue: Catalogue;
 export declare function extend<T extends ConstructorRepresentation>(objects: T): React.ExoticComponent<ThreeElement<T>>;
 export declare function extend<T extends Catalogue>(objects: T): void;
 export declare const reconciler: Reconciler.Reconciler<RootStore, Instance<any>, void, Instance<any>, any>;

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

@@ -8,7 +8,10 @@ import { type Properties, Camera } from "./utils.js";
 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 DefaultGLProps = Omit<THREE.WebGLRendererParameters, 'canvas'> & {
+    canvas: HTMLCanvasElement | OffscreenCanvas;
+};
+export type GLProps = Renderer | ((defaultProps: DefaultGLProps) => Renderer) | ((defaultProps: DefaultGLProps) => Promise<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;
@@ -61,12 +64,11 @@ export interface RenderProps<TCanvas extends HTMLCanvasElement | OffscreenCanvas
     onPointerMissed?: (event: MouseEvent) => void;
 }
 export interface ReconcilerRoot<TCanvas extends HTMLCanvasElement | OffscreenCanvas> {
-    configure: (config?: RenderProps<TCanvas>) => ReconcilerRoot<TCanvas>;
+    configure: (config?: RenderProps<TCanvas>) => Promise<ReconcilerRoot<TCanvas>>;
     render: (element: React.ReactNode) => RootStore;
     unmount: () => 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?: {

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

@@ -2,7 +2,7 @@ import * as THREE from 'three';
 import * as React from 'react';
 import { Instance } from "./reconciler.js";
 import type { Fiber } from 'react-reconciler';
-import type { Dpr, Renderer, RootStore, Size } from "./store.js";
+import type { Dpr, RootStore, Size } from "./store.js";
 export type NonFunctionKeys<P> = {
     [K in keyof P]-?: P[K] extends Function ? never : K;
 }[keyof P];
@@ -17,23 +17,6 @@ export type IsAllOptional<T extends any[]> = T extends [infer First, ...infer Re
  * Returns the instance's initial (outmost) root.
  */
 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 | THREE.Texture | Renderer, P = T extends Renderer ? {
-    outputColorSpace: string;
-} : {
-    colorSpace: string;
-}>(object: T) => object is T & P;
-export type ColorManagementRepresentation = {
-    enabled: boolean | never;
-} | {
-    legacyMode: boolean | never;
-};
-/**
- * The current THREE.ColorManagement instance, if present.
- */
-export declare const getColorManagement: () => ColorManagementRepresentation | null;
 export type Act = <T = any>(cb: () => Promise<T>) => Promise<T>;
 /**
  * Safely flush async effects when testing, simulating a legacy root.
@@ -44,6 +27,7 @@ export type Camera = (THREE.OrthographicCamera | THREE.PerspectiveCamera) & {
 };
 export declare const isOrthographicCamera: (def: Camera) => def is THREE.OrthographicCamera;
 export declare const isRef: (obj: any) => obj is React.RefObject<unknown>;
+export declare const isColorRepresentation: (value: unknown) => value is THREE.ColorRepresentation;
 /**
  * An SSR-friendly useLayoutEffect.
  *
@@ -68,21 +52,85 @@ export type UnblockProps = {
     children: React.ReactNode;
 };
 export declare function Block({ set }: Omit<UnblockProps, 'children'>): null;
-export declare class ErrorBoundary extends React.Component<{
-    set: React.Dispatch<Error | undefined>;
-    children: React.ReactNode;
-}, {
-    error: boolean;
-}> {
-    state: {
-        error: boolean;
+export declare const ErrorBoundary: {
+    new (props: {
+        set: React.Dispatch<Error | undefined>;
+        children: React.ReactNode;
+    }): {
+        state: {
+            error: boolean;
+        };
+        componentDidCatch(err: Error): void;
+        render(): React.ReactNode;
+        context: unknown;
+        setState<K extends "error">(state: {
+            error: boolean;
+        } | ((prevState: Readonly<{
+            error: boolean;
+        }>, props: Readonly<{
+            set: React.Dispatch<Error | undefined>;
+            children: React.ReactNode;
+        }>) => {
+            error: boolean;
+        } | Pick<{
+            error: boolean;
+        }, K> | null) | Pick<{
+            error: boolean;
+        }, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<{
+            set: React.Dispatch<Error | undefined>;
+            children: React.ReactNode;
+        }>;
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<{
+            set: React.Dispatch<Error | undefined>;
+            children: React.ReactNode;
+        }>, nextState: Readonly<{
+            error: boolean;
+        }>): boolean;
+        componentWillUnmount?(): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<{
+            set: React.Dispatch<Error | undefined>;
+            children: React.ReactNode;
+        }>, prevState: Readonly<{
+            error: boolean;
+        }>): any;
+        componentDidUpdate?(prevProps: Readonly<{
+            set: React.Dispatch<Error | undefined>;
+            children: React.ReactNode;
+        }>, prevState: Readonly<{
+            error: boolean;
+        }>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<{
+            set: React.Dispatch<Error | undefined>;
+            children: React.ReactNode;
+        }>): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<{
+            set: React.Dispatch<Error | undefined>;
+            children: React.ReactNode;
+        }>): void;
+        componentWillUpdate?(nextProps: Readonly<{
+            set: React.Dispatch<Error | undefined>;
+            children: React.ReactNode;
+        }>, nextState: Readonly<{
+            error: boolean;
+        }>): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<{
+            set: React.Dispatch<Error | undefined>;
+            children: React.ReactNode;
+        }>, nextState: Readonly<{
+            error: boolean;
+        }>): void;
     };
-    static getDerivedStateFromError: () => {
+    getDerivedStateFromError: () => {
         error: boolean;
     };
-    componentDidCatch(err: Error): void;
-    render(): React.ReactNode;
-}
+    contextType?: React.Context<any> | undefined;
+    propTypes?: any;
+};
 export interface ObjectMap {
     nodes: {
         [name: string]: THREE.Object3D;
@@ -111,6 +159,7 @@ export declare const is: {
     num: (a: any) => a is number;
     boo: (a: any) => a is boolean;
     und: (a: any) => boolean;
+    nul: (a: any) => boolean;
     arr: (a: any) => boolean;
     equ(a: any, b: any, { arrays, objects, strict }?: EquConfig): boolean;
 };
@@ -135,4 +184,4 @@ export declare function diffProps<T = any>(instance: Instance<T>, newProps: Inst
 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;
-export declare const isObject3D: (object: any) => object is THREE.Object3D<THREE.Event>;
+export declare const isObject3D: (object: any) => object is THREE.Object3D<THREE.Object3DEventMap>;

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

@@ -4,11 +4,10 @@ import { RenderProps } from "../core/index.js";
 export interface CanvasProps extends Omit<RenderProps<HTMLCanvasElement>, 'size' | 'dpr'>, Omit<ViewProps, 'children'> {
     children: React.ReactNode;
     style?: ViewStyle;
-}
-export interface Props extends CanvasProps {
+    ref?: React.Ref<View>;
 }
 /**
  * A native canvas which accepts threejs elements as children.
  * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
  */
-export declare const Canvas: React.ForwardRefExoticComponent<CanvasProps & React.RefAttributes<View>>;
+export declare function Canvas(props: CanvasProps): import("react/jsx-runtime").JSX.Element;

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

@@ -33,8 +33,12 @@ export interface ReactProps<P> {
 export type ElementProps<T extends ConstructorRepresentation, P = InstanceType<T>> = Partial<Overwrite<P, MathProps<P> & ReactProps<P> & EventProps<P>>>;
 export type ThreeElement<T extends ConstructorRepresentation> = Mutable<Overwrite<ElementProps<T>, Omit<InstanceProps<InstanceType<T>, T>, 'object'>>>;
 type ThreeExports = typeof THREE;
+type DuplicateKeys<T, U> = Extract<keyof T, keyof U>;
+type Conflicts = DuplicateKeys<JSX.IntrinsicElements, {
+    [K in keyof ThreeExports as Uncapitalize<K>]: any;
+}>;
 type ThreeElementsImpl = {
-    [K in keyof ThreeExports as Uncapitalize<K>]: ThreeExports[K] extends ConstructorRepresentation ? ThreeElement<ThreeExports[K]> : never;
+    [K in keyof ThreeExports as Uncapitalize<K> extends Conflicts ? `three${Capitalize<K>}` : Uncapitalize<K>]: ThreeExports[K] extends ConstructorRepresentation ? ThreeElement<ThreeExports[K]> : never;
 };
 export interface ThreeElements extends ThreeElementsImpl {
     primitive: Omit<ThreeElement<any>, 'args'> & {

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

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import { Options as ResizeOptions } from "./use-measure.js";
+import { Options as ResizeOptions } from 'react-use-measure';
 import { RenderProps } from "../core/index.js";
 export interface CanvasProps extends Omit<RenderProps<HTMLCanvasElement>, 'size'>, React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
+    ref?: React.Ref<HTMLCanvasElement>;
     /** Canvas fallback content, similar to img's alt prop */
     fallback?: React.ReactNode;
     /**
@@ -15,10 +16,8 @@ export interface CanvasProps extends Omit<RenderProps<HTMLCanvasElement>, 'size'
     /** The event prefix that is cast into canvas pointer x/y events, default: "offset" */
     eventPrefix?: 'offset' | 'client' | 'page' | 'layer' | 'screen';
 }
-export interface Props extends CanvasProps {
-}
 /**
  * A DOM canvas which accepts threejs elements as children.
  * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
  */
-export declare const Canvas: React.ForwardRefExoticComponent<CanvasProps & React.RefAttributes<HTMLCanvasElement>>;
+export declare function Canvas(props: CanvasProps): import("react/jsx-runtime").JSX.Element;