@react-three/fiber 9.0.0-alpha.0 → 9.0.0-alpha.2

package/CHANGELOG.md

@@ -1,5 +1,95 @@
 # @react-three/fiber
 
+## 8.8.1
+
+### Patch Changes
+
+- 370d3ae5: refactor: pull context bridge from its-fine
+
+## 8.8.0
+
+### Minor Changes
+
+- 46d8b440: bridge cross-container context
+
+## 8.7.4
+
+### Patch Changes
+
+- 259c8895: fix: use self to get global context before window
+
+## 8.7.3
+
+### Patch Changes
+
+- eb5a3be4: fix: if there is an eventsource pointerevent will be set to none
+
+## 8.7.2
+
+### Patch Changes
+
+- 7f801e60: fix: events in portals carry the wrong raycaster, camera, etc
+
+## 8.7.1
+
+### Patch Changes
+
+- 962cc270: fix: allow canvas eventsource to be a ref
+
+## 8.7.0
+
+### Minor Changes
+
+- f5db1b78: feat: useInstanceHandle, flushGlobalEffects
+
+## 8.6.2
+
+### Patch Changes
+
+- 57c12e9c: fix(types): @react-three/drei declaration files
+
+## 8.6.1
+
+### Patch Changes
+
+- 7a0b5670: fix(core): don't append to unmounted containers
+
+## 8.6.0
+
+### Minor Changes
+
+- 85c80e70: eventsource and eventprefix on the canvas component
+
+## 8.5.1
+
+### Patch Changes
+
+- 87821d9: fix: null-check instance.children on reconstruct
+
+## 8.5.0
+
+### Minor Changes
+
+- edc8252: feat: handle primitive children, auto-attach via instanceof
+
+## 8.3.1
+
+### Patch Changes
+
+- aaeb2b8: fix(types): accept readonly arrays for vector props
+
+## 8.3.0
+
+### Minor Changes
+
+- 9c450ec: feat: improve errors
+
+## 8.2.3
+
+### Patch Changes
+
+- b8d2eab: fix: improve useLoader signature, initial size on createRoot
+
 ## 8.2.2
 
 ### Patch Changes

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

@@ -1,9 +1,12 @@
 import * as THREE from 'three';
+import * as React from 'react';
 import { StateSelector, EqualityChecker } from 'zustand';
 import { GLTF } from 'three/examples/jsm/loaders/GLTFLoader';
 import { RootState, RenderCallback, StageTypes } from './store';
 import { ObjectMap } from './utils';
 import { UpdateCallback } from './stages';
+import { LoadingManager } from 'three';
+import { Instance } from './renderer';
 export interface Loader<T> extends THREE.Loader {
     load(url: string, onLoad?: (result: T) => void, onProgress?: (event: ProgressEvent) => void, onError?: (event: ErrorEvent) => void): unknown;
 }
@@ -11,12 +14,13 @@ export declare type Extensions = (loader: THREE.Loader) => void;
 export declare type LoaderResult<T> = T extends any[] ? Loader<T[number]> : Loader<T>;
 export declare type ConditionalType<Child, Parent, Truthy, Falsy> = Child extends Parent ? Truthy : Falsy;
 export declare type BranchingReturn<T, Parent, Coerced> = ConditionalType<T, Parent, Coerced, T>;
+export declare function useInstanceHandle<O>(ref: React.MutableRefObject<O>): React.MutableRefObject<Instance>;
 export declare function useStore(): import("zustand").UseBoundStore<RootState, import("zustand").StoreApi<RootState>>;
 export declare function useThree<T = RootState>(selector?: StateSelector<RootState, T>, equalityFn?: EqualityChecker<T>): T;
 export declare function useFrame(callback: RenderCallback, renderPriority?: number): null;
 export declare function useUpdate(callback: UpdateCallback, stage?: StageTypes): void;
 export declare function useGraph(object: THREE.Object3D): ObjectMap;
-export declare function useLoader<T, U extends string | string[]>(Proto: new () => LoaderResult<T>, input: U, extensions?: Extensions, onProgress?: (event: ProgressEvent<EventTarget>) => void): U extends any[] ? BranchingReturn<T, GLTF, GLTF & ObjectMap>[] : BranchingReturn<T, GLTF, GLTF & ObjectMap>;
+export declare function useLoader<T, U extends string | string[]>(Proto: new (manager?: LoadingManager) => LoaderResult<T>, input: U, extensions?: Extensions, onProgress?: (event: ProgressEvent<EventTarget>) => void): U extends any[] ? BranchingReturn<T, GLTF, GLTF & ObjectMap>[] : BranchingReturn<T, GLTF, GLTF & ObjectMap>;
 export declare namespace useLoader {
     var preload: <T, U extends string | string[]>(Proto: new () => LoaderResult<T>, input: U, extensions?: Extensions | undefined) => undefined;
     var clear: <T, U extends string | string[]>(Proto: new () => LoaderResult<T>, input: U) => void;

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

@@ -1,18 +1,16 @@
 /// <reference types="webxr" />
-/// <reference types="react-reconciler" />
 import * as THREE from 'three';
 import * as React from 'react';
-import { StoreApi, UseBoundStore } from 'zustand';
-import * as ReactThreeFiber from '../three-types';
+import { UseBoundStore } from 'zustand';
+import { ThreeElement } from '../three-types';
 import { Renderer, context, RootState, Size, Dpr, Performance, PrivateKeys, Frameloop } from './store';
-import { extend, Root } from './renderer';
+import { reconciler, extend, Root } from './renderer';
 import { addEffect, addAfterEffect, addTail } from './loop';
 import { EventManager, ComputeFunction } from './events';
-import { dispose, getRootState, Camera } from './utils';
+import { dispose, getRootState, Camera, applyProps } from './utils';
 import { Stage } from './stages';
 declare const roots: Map<Element, Root>;
 declare const invalidate: (state?: RootState | undefined, frames?: number) => void, advance: (timestamp: number, runGlobalEffects?: boolean, state?: RootState | undefined, frame?: XRFrame | undefined) => void;
-declare const reconciler: import("react-reconciler").Reconciler<UseBoundStore<RootState, StoreApi<RootState>>, import("./renderer").Instance, void, import("./renderer").Instance, import("./renderer").Instance>, applyProps: typeof import("./utils").applyProps;
 declare type Properties<T> = Pick<T, {
     [K in keyof T]: T[K] extends (_: any) => any ? never : K;
 }[keyof T]>;
@@ -29,7 +27,7 @@ export declare type RenderProps<TCanvas extends Element> = {
     performance?: Partial<Omit<Performance, 'regress'>>;
     dpr?: Dpr;
     raycaster?: Partial<THREE.Raycaster>;
-    camera?: (Camera | Partial<ReactThreeFiber.Object3DNode<THREE.Camera, typeof THREE.Camera> & ReactThreeFiber.Object3DNode<THREE.PerspectiveCamera, typeof THREE.PerspectiveCamera> & ReactThreeFiber.Object3DNode<THREE.OrthographicCamera, typeof THREE.OrthographicCamera>>) & {
+    camera?: (Camera | Partial<ThreeElement<typeof THREE.Camera> & ThreeElement<typeof THREE.PerspectiveCamera> & ThreeElement<typeof THREE.OrthographicCamera>>) & {
         manual?: boolean;
     };
     events?: (store: UseBoundStore<RootState>) => EventManager<HTMLElement>;
@@ -56,6 +54,7 @@ export declare type InjectState = Partial<Omit<RootState, PrivateKeys> & {
     size?: Size;
 }>;
 declare function createPortal(children: React.ReactNode, container: THREE.Object3D, state?: InjectState): React.ReactNode;
-declare const act: any;
+declare type Act = <T = any>(cb: () => Promise<T>) => Promise<T>;
+declare const act: Act;
 export * from './hooks';
-export { context, render, createRoot, unmountComponentAtNode, createPortal, reconciler, applyProps, dispose, invalidate, advance, extend, addEffect, addAfterEffect, addTail, getRootState, act, roots as _roots, };
+export { context, render, createRoot, unmountComponentAtNode, createPortal, reconciler, applyProps, dispose, invalidate, advance, extend, addEffect, addAfterEffect, addTail, getRootState, Act, act, roots as _roots, };

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

@@ -5,6 +5,8 @@ declare type GlobalRenderCallback = (timeStamp: number) => void;
 export declare const addEffect: (callback: GlobalRenderCallback) => () => void;
 export declare const addAfterEffect: (callback: GlobalRenderCallback) => () => void;
 export declare const addTail: (callback: GlobalRenderCallback) => () => void;
+export declare type GlobalEffectType = 'before' | 'after' | 'tail';
+export declare function flushGlobalEffects(type: GlobalEffectType, timestamp: number): void;
 export declare function createLoop<TCanvas>(roots: Map<TCanvas, Root>): {
     loop: (timestamp: number) => void;
     invalidate: (state?: RootState | undefined, frames?: number) => void;

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

@@ -1,51 +1,40 @@
-import * as THREE from 'three';
 import { UseBoundStore } from 'zustand';
 import Reconciler from 'react-reconciler';
-import { prepare, applyProps } from './utils';
 import { RootState } from './store';
 import { EventHandlers } from './events';
-export declare type Root = {
+export interface Root {
     fiber: Reconciler.FiberRoot;
     store: UseBoundStore<RootState>;
-};
-export declare type LocalState = {
-    type: string;
+}
+export declare type AttachFnType<O = any> = (parent: any, self: O) => () => void;
+export declare type AttachType<O = any> = string | AttachFnType<O>;
+export declare type ConstructorRepresentation = new (...args: any[]) => any;
+export interface Catalogue {
+    [name: string]: ConstructorRepresentation;
+}
+export declare type Args<T> = T extends ConstructorRepresentation ? ConstructorParameters<T> : any[];
+export interface InstanceProps<T = any> {
+    args?: Args<T>;
+    object?: T;
+    visible?: boolean;
+    dispose?: null;
+    attach?: AttachType<T>;
+}
+export interface Instance<O = any> {
     root: UseBoundStore<RootState>;
-    objects: Instance[];
+    type: string;
     parent: Instance | null;
-    primitive?: boolean;
+    children: Instance[];
+    props: InstanceProps<O> & Record<string, unknown>;
+    object: O & {
+        __r3f?: Instance<O>;
+    };
     eventCount: number;
     handlers: Partial<EventHandlers>;
-    attach?: AttachType;
-    previousAttach: any;
-    memoizedProps: {
-        [key: string]: any;
-    };
-};
-export declare type AttachFnType = (parent: Instance, self: Instance) => () => void;
-export declare type AttachType = string | AttachFnType;
-export declare type BaseInstance = Omit<THREE.Object3D, 'children' | 'attach' | 'add' | 'remove' | 'raycast'> & {
-    __r3f: LocalState;
-    children: Instance[];
-    remove: (...object: Instance[]) => Instance;
-    add: (...object: Instance[]) => Instance;
-    raycast?: (raycaster: THREE.Raycaster, intersects: THREE.Intersection[]) => void;
-};
-export declare type Instance = BaseInstance & {
-    [key: string]: any;
-};
-export declare type InstanceProps = {
-    [key: string]: unknown;
-} & {
-    args?: any[];
-    object?: object;
-    visible?: boolean;
-    dispose?: null;
-    attach?: AttachType;
-};
-declare let extend: (objects: object) => void;
-declare function createRenderer<TCanvas>(_roots: Map<TCanvas, Root>, _getEventPriority?: () => any): {
-    reconciler: Reconciler.Reconciler<UseBoundStore<RootState, import("zustand").StoreApi<RootState>>, Instance, void, Instance, Instance>;
-    applyProps: typeof applyProps;
-};
-export { prepare, createRenderer, extend };
+    attach?: AttachType<O>;
+    previousAttach?: any;
+    isHidden: boolean;
+}
+declare const extend: (objects: Partial<Catalogue>) => void;
+declare const reconciler: Reconciler.Reconciler<UseBoundStore<RootState, import("zustand").StoreApi<RootState>>, Instance<any>, void, Instance<any>, any>;
+export { extend, reconciler };

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

@@ -21,7 +21,6 @@ export declare type Size = {
     height: number;
     top: number;
     left: number;
-    updateStyle?: boolean;
 };
 export declare type Viewport = Size & {
     initialDpr: number;
@@ -98,7 +97,7 @@ export declare type RootState = {
     invalidate: (frames?: number) => void;
     advance: (timestamp: number, runGlobalEffects?: boolean) => void;
     setEvents: (events: Partial<EventManager<any>>) => void;
-    setSize: (width: number, height: number, updateStyle?: boolean, top?: number, left?: number) => void;
+    setSize: (width: number, height: number, top?: number, left?: number) => void;
     setDpr: (dpr: Dpr) => void;
     setFrameloop: (frameloop: Frameloop) => void;
     onPointerMissed?: (event: MouseEvent) => void;

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

@@ -1,9 +1,12 @@
 import * as THREE from 'three';
 import * as React from 'react';
-import { AttachType, Instance, InstanceProps, LocalState } from './renderer';
-import { Dpr, RootState, Size } from './store';
+import type { Fiber } from 'react-reconciler';
+import type { UseBoundStore } from 'zustand';
+import type { Dpr, RootState, Size } from './store';
+import type { Instance } from './renderer';
 export declare 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.MutableRefObject<unknown>;
 export declare const useIsomorphicLayoutEffect: typeof React.useLayoutEffect;
 export declare function useMutableCallback<T>(fn: T): React.MutableRefObject<T>;
 export declare type SetBlock = false | Promise<null> | null;
@@ -13,7 +16,7 @@ export declare type UnblockProps = {
 };
 export declare function Block({ set }: Omit<UnblockProps, 'children'>): null;
 export declare class ErrorBoundary extends React.Component<{
-    set: React.Dispatch<any>;
+    set: React.Dispatch<Error | undefined>;
     children: React.ReactNode;
 }, {
     error: boolean;
@@ -24,35 +27,24 @@ export declare class ErrorBoundary extends React.Component<{
     static getDerivedStateFromError: () => {
         error: boolean;
     };
-    componentDidCatch(error: any): void;
+    componentDidCatch(err: Error): void;
     render(): React.ReactNode;
 }
-export declare const DEFAULT = "__default";
-export declare type DiffSet = {
-    memoized: {
-        [key: string]: any;
-    };
-    changes: [key: string, value: unknown, isEvent: boolean, keys: string[]][];
-};
-export declare const isDiffSet: (def: any) => def is DiffSet;
-export declare type ClassConstructor = {
-    new (): void;
-};
-export declare type ObjectMap = {
+export interface ObjectMap {
     nodes: {
         [name: string]: THREE.Object3D;
     };
     materials: {
         [name: string]: THREE.Material;
     };
-};
+}
 export declare function calculateDpr(dpr: Dpr): number;
-export declare const getRootState: (obj: THREE.Object3D) => RootState | undefined;
-export declare type EquConfig = {
+export declare const getRootState: <T = THREE.Object3D<THREE.Event>>(obj: T) => RootState | undefined;
+export interface EquConfig {
     arrays?: 'reference' | 'shallow';
     objects?: 'reference' | 'shallow';
     strict?: boolean;
-};
+}
 export declare const is: {
     obj: (a: any) => boolean;
     fun: (a: any) => a is Function;
@@ -64,18 +56,25 @@ export declare const is: {
     equ(a: any, b: any, { arrays, objects, strict }?: EquConfig): boolean;
 };
 export declare function buildGraph(object: THREE.Object3D): ObjectMap;
-export declare function dispose<TObj extends {
-    dispose?: () => void;
+export interface Disposable {
     type?: string;
-    [key: string]: any;
-}>(obj: TObj): void;
-export declare function prepare<T = THREE.Object3D>(object: T, state?: Partial<LocalState>): T;
-export declare function attach(parent: Instance, child: Instance, type: AttachType): void;
-export declare function detach(parent: Instance, child: Instance, type: AttachType): void;
-export declare function diffProps(instance: Instance, { children: cN, key: kN, ref: rN, ...props }: InstanceProps, { children: cP, key: kP, ref: rP, ...previous }?: InstanceProps, remove?: boolean): DiffSet;
-export declare function applyProps(instance: Instance, data: InstanceProps | DiffSet): Instance;
+    dispose?: () => void;
+}
+export declare function dispose<T extends Disposable>(obj: T): void;
+export declare const REACT_INTERNAL_PROPS: string[];
+export declare function getInstanceProps<T = any>(queue: Fiber['pendingProps']): Instance<T>['props'];
+export declare function prepare<T = any>(target: T, root: UseBoundStore<RootState>, type: string, props: Instance<T>['props']): Instance<T>;
+export declare function resolve(root: any, key: string): {
+    root: any;
+    key: string;
+    target: any;
+};
+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 applyProps<T = any>(object: Instance<T>['object'], props: Instance<T>['props']): Instance<T>['object'];
 export declare function invalidateInstance(instance: Instance): void;
-export declare function updateInstance(instance: Instance): void;
 export declare function updateCamera(camera: Camera & {
     manual?: boolean;
 }, size: Size): void;

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

@@ -1,7 +1,5 @@
 export * from './three-types';
-import * as ReactThreeFiber from './three-types';
-export { ReactThreeFiber };
-export type { BaseInstance, LocalState } from './core/renderer';
+export type { AttachFnType, AttachType, ConstructorRepresentation, Catalogue, Args, InstanceProps, Instance, } from './core/renderer';
 export type { Intersection, Subscription, Dpr, Size, Viewport, RenderCallback, Performance, RootState, } from './core/store';
 export type { ThreeEvent, Events, EventManager, ComputeFunction } from './core/events';
 export type { ObjectMap, Camera } from './core/utils';

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

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { View, ViewProps, ViewStyle } from 'react-native';
 import { RenderProps } from '../core';
-export interface Props extends Omit<RenderProps<HTMLCanvasElement>, 'size' | 'dpr'>, ViewProps {
+export interface CanvasProps extends Omit<RenderProps<HTMLCanvasElement>, 'size' | 'dpr'>, ViewProps {
     children: React.ReactNode;
     style?: ViewStyle;
 }
-export declare const Canvas: React.ForwardRefExoticComponent<Props & React.RefAttributes<View>>;
+export declare const Canvas: React.ForwardRefExoticComponent<CanvasProps & React.RefAttributes<View>>;

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

@@ -1,7 +1,5 @@
 export * from './three-types';
-import * as ReactThreeFiber from './three-types';
-export { ReactThreeFiber };
-export type { BaseInstance, LocalState } from './core/renderer';
+export type { AttachFnType, AttachType, ConstructorRepresentation, Catalogue, Args, InstanceProps, Instance, } from './core/renderer';
 export type { Intersection, Subscription, Dpr, Size, Viewport, RenderCallback, Performance, RootState, } from './core/store';
 export type { ThreeEvent, Events, EventManager, ComputeFunction } from './core/events';
 export type { ObjectMap, Camera } from './core/utils';