@react-three/fiber 8.0.6 → 8.0.9

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @react-three/fiber
 
+## 8.0.9
+
+### Patch Changes
+
+- 624df949: fix: canvas unmount race condition"
+
+## 8.0.8
+
+### Patch Changes
+
+- 952a566: fix: react SSR
+
+## 8.0.7
+
+### Patch Changes
+
+- f63806b: fix: react SSR
+
 ## 8.0.6
 
 ### Patch Changes

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

@@ -10,16 +10,12 @@ 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>;
-declare type noop = (...args: any[]) => any;
-declare type PickFunction<T extends noop> = (...args: Parameters<T>) => ReturnType<T>;
 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 useGraph(object: THREE.Object3D): ObjectMap;
-export declare function useMemoizedFn<T extends noop>(fn?: T): PickFunction<T>;
 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 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;
 }
-export {};

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

@@ -2,7 +2,8 @@
 import * as THREE from 'three';
 import * as React from 'react';
 import { UseBoundStore } from 'zustand';
-import { Renderer, StoreProps, context, RootState, Size } from './store';
+import * as ReactThreeFiber from '../three-types';
+import { Renderer, context, RootState, Size, Camera, Dpr, Performance } from './store';
 import { extend, Root } from './renderer';
 import { addEffect, addAfterEffect, addTail } from './loop';
 import { EventManager, ComputeFunction } from './events';
@@ -14,11 +15,24 @@ declare type Properties<T> = Pick<T, {
     [K in keyof T]: T[K] extends (_: any) => any ? never : K;
 }[keyof T]>;
 declare type GLProps = Renderer | ((canvas: HTMLCanvasElement) => Renderer) | Partial<Properties<THREE.WebGLRenderer> | THREE.WebGLRendererParameters> | undefined;
-export declare type RenderProps<TCanvas extends Element> = Omit<StoreProps, 'gl' | 'events' | 'size'> & {
+export declare type RenderProps<TCanvas extends Element> = {
     gl?: GLProps;
-    events?: (store: UseBoundStore<RootState>) => EventManager<TCanvas>;
     size?: Size;
+    shadows?: boolean | Partial<THREE.WebGLShadowMap>;
+    legacy?: boolean;
+    linear?: boolean;
+    flat?: boolean;
+    orthographic?: boolean;
+    frameloop?: 'always' | 'demand' | 'never';
+    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>>) & {
+        manual?: boolean;
+    };
+    events?: (store: UseBoundStore<RootState>) => EventManager<HTMLElement>;
     onCreated?: (state: RootState) => void;
+    onPointerMissed?: (event: MouseEvent) => void;
 };
 export declare type ReconcilerRoot<TCanvas extends Element> = {
     configure: (config?: RenderProps<TCanvas>) => ReconcilerRoot<TCanvas>;

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

@@ -1,6 +1,5 @@
 import * as THREE from 'three';
 import * as React from 'react';
-import * as ReactThreeFiber from '../three-types';
 import { GetState, SetState, StoreApi, UseBoundStore } from 'zustand';
 import { DomEvent, EventManager, PointerCaptureTarget, ThreeEvent } from './events';
 export interface Intersection extends THREE.Intersection {
@@ -87,23 +86,6 @@ export declare type RootState = {
     previousRoot?: UseBoundStore<RootState, StoreApi<RootState>>;
     internal: InternalState;
 };
-export declare type StoreProps = {
-    gl: THREE.WebGLRenderer;
-    size: Size;
-    shadows?: boolean | Partial<THREE.WebGLShadowMap>;
-    legacy?: boolean;
-    linear?: boolean;
-    flat?: boolean;
-    orthographic?: boolean;
-    frameloop?: 'always' | 'demand' | 'never';
-    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>>) & {
-        manual?: boolean;
-    };
-    onPointerMissed?: (event: MouseEvent) => void;
-};
 declare const context: React.Context<UseBoundStore<RootState, StoreApi<RootState>>>;
 declare const createStore: (invalidate: (state?: RootState | undefined) => void, advance: (timestamp: number, runGlobalEffects?: boolean | undefined, state?: RootState | undefined, frame?: THREE.XRFrame | undefined) => void) => UseBoundStore<RootState>;
 export { createStore, context };

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

@@ -1,6 +1,29 @@
 import * as THREE from 'three';
+import * as React from 'react';
 import { AttachType, Instance, InstanceProps, LocalState } from './renderer';
 import { Dpr, RootState } from './store';
+export declare const useIsomorphicLayoutEffect: typeof React.useEffect;
+export declare function useMutableCallback<T>(fn: T): React.MutableRefObject<T>;
+export declare type SetBlock = false | Promise<null> | null;
+export declare type UnblockProps = {
+    set: React.Dispatch<React.SetStateAction<SetBlock>>;
+    children: React.ReactNode;
+};
+export declare function Block({ set }: Omit<UnblockProps, 'children'>): null;
+export declare class ErrorBoundary extends React.Component<{
+    set: React.Dispatch<any>;
+}, {
+    error: boolean;
+}> {
+    state: {
+        error: boolean;
+    };
+    static getDerivedStateFromError: () => {
+        error: boolean;
+    };
+    componentDidCatch(error: any): void;
+    render(): React.ReactNode;
+}
 export declare const DEFAULT = "__default";
 export declare type DiffSet = {
     memoized: {

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

@@ -1,13 +1,8 @@
 import * as React from 'react';
 import { View, ViewProps, ViewStyle } from 'react-native';
-import { UseBoundStore } from 'zustand';
 import { RenderProps } from '../core';
-import { RootState } from '../core/store';
-import { EventManager } from '../core/events';
-export interface Props extends Omit<RenderProps<HTMLCanvasElement>, 'size' | 'events'>, ViewProps {
+export interface Props extends Omit<RenderProps<HTMLCanvasElement>, 'size'>, ViewProps {
     children: React.ReactNode;
-    fallback?: React.ReactNode;
     style?: ViewStyle;
-    events?: (store: UseBoundStore<RootState>) => EventManager<any>;
 }
 export declare const Canvas: React.ForwardRefExoticComponent<Props & React.RefAttributes<View>>;

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

@@ -1,5 +1,4 @@
 import { UseBoundStore } from 'zustand';
 import { RootState } from '../core/store';
 import { EventManager } from '../core/events';
-import { View } from 'react-native';
-export declare function createTouchEvents(store: UseBoundStore<RootState>): EventManager<View>;
+export declare function createTouchEvents(store: UseBoundStore<RootState>): EventManager<HTMLElement>;

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

@@ -1,13 +1,9 @@
 import * as React from 'react';
 import type { Options as ResizeOptions } from 'react-use-measure';
-import { UseBoundStore } from 'zustand';
 import { RenderProps } from '../core';
-import { RootState } from '../core/store';
-import { EventManager } from '../core/events';
-export interface Props extends Omit<RenderProps<HTMLCanvasElement>, 'size' | 'events'>, React.HTMLAttributes<HTMLDivElement> {
+export interface Props extends Omit<RenderProps<HTMLCanvasElement>, 'size'>, React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
     fallback?: React.ReactNode;
     resize?: ResizeOptions;
-    events?: (store: UseBoundStore<RootState>) => EventManager<any>;
 }
 export declare const Canvas: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLCanvasElement>>;

package/dist/{index-0076cbd6.cjs.dev.js → index-49237346.cjs.dev.js}

@@ -39,6 +39,47 @@ var threeTypes = /*#__PURE__*/Object.freeze({
   __proto__: null
 });
 
+// React currently throws a warning when using useLayoutEffect on the server.
+// To get around it, we can conditionally useEffect on the server (no-op) and
+// useLayoutEffect on the client.
+const isSSR = typeof window === 'undefined' || !window.navigator || /ServerSideRendering|^Deno\//.test(window.navigator.userAgent);
+const useIsomorphicLayoutEffect = isSSR ? React__namespace.useEffect : React__namespace.useLayoutEffect;
+function useMutableCallback(fn) {
+  const ref = React__namespace.useRef(fn);
+  useIsomorphicLayoutEffect(() => void (ref.current = fn), [fn]);
+  return ref;
+}
+function Block({
+  set
+}) {
+  useIsomorphicLayoutEffect(() => {
+    set(new Promise(() => null));
+    return () => set(false);
+  }, [set]);
+  return null;
+}
+class ErrorBoundary extends React__namespace.Component {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      error: false
+    };
+  }
+
+  componentDidCatch(error) {
+    this.props.set(error);
+  }
+
+  render() {
+    return this.state.error ? null : this.props.children;
+  }
+
+}
+
+ErrorBoundary.getDerivedStateFromError = () => ({
+  error: true
+});
+
 const DEFAULT = '__default';
 const isDiffSet = def => def && !!def.memoized && !!def.changes;
 function calculateDpr(dpr) {
@@ -1396,8 +1437,23 @@ let i;
 let globalEffects = [];
 let globalAfterEffects = [];
 let globalTailEffects = [];
+/**
+ * Adds a global render callback which is called each frame.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addEffect
+ */
+
 const addEffect = callback => createSubs(callback, globalEffects);
+/**
+ * Adds a global after-render callback which is called each frame.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addAfterEffect
+ */
+
 const addAfterEffect = callback => createSubs(callback, globalAfterEffects);
+/**
+ * Adds a global callback which is called when rendering stops.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addTail
+ */
+
 const addTail = callback => createSubs(callback, globalTailEffects);
 
 function run(effects, timestamp) {
@@ -1488,7 +1544,17 @@ function createLoop(roots) {
 
   return {
     loop,
+
+    /**
+     * Invalidates the view, requesting a frame to be rendered. Will globally invalidate unless passed a root's state.
+     * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#invalidate
+     */
     invalidate,
+
+    /**
+     * Advances the frameloop and runs render effects, useful for when manually rendering via `frameloop="never"`.
+     * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#advance
+     */
     advance
   };
 }
@@ -1498,19 +1564,34 @@ function useStore() {
   if (!store) throw `R3F hooks can only be used within the Canvas component!`;
   return store;
 }
+/**
+ * Accesses R3F's internal state, containing renderer, canvas, scene, etc.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usethree
+ */
+
 function useThree(selector = state => state, equalityFn) {
   return useStore()(selector, equalityFn);
 }
+/**
+ * Executes a callback before render in a shared frame loop.
+ * Can order effects with render priority or manually render with a positive priority.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#useframe
+ */
+
 function useFrame(callback, renderPriority = 0) {
   const store = useStore();
-  const subscribe = store.getState().internal.subscribe; // Update ref
+  const subscribe = store.getState().internal.subscribe; // Memoize ref
 
-  const ref = React__namespace.useRef(callback);
-  React__namespace.useLayoutEffect(() => void (ref.current = callback), [callback]); // Subscribe on mount, unsubscribe on unmount
+  const ref = useMutableCallback(callback); // Subscribe on mount, unsubscribe on unmount
 
-  React__namespace.useLayoutEffect(() => subscribe(ref, renderPriority, store), [renderPriority, subscribe, store]);
+  useIsomorphicLayoutEffect(() => subscribe(ref, renderPriority, store), [renderPriority, subscribe, store]);
   return null;
 }
+/**
+ * Returns a node graph of an object with named nodes & materials.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usegraph
+ */
+
 function useGraph(object) {
   return React__namespace.useMemo(() => buildGraph(object), [object]);
 }
@@ -1527,12 +1608,14 @@ function loadingFn(extensions, onProgress) {
     }, onProgress, error => reject(`Could not load ${input}: ${error.message}`)))));
   };
 }
+/**
+ * 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
+ */
+
 
-function useMemoizedFn(fn) {
-  const fnRef = React__namespace.useRef(fn);
-  React__namespace.useLayoutEffect(() => void (fnRef.current = fn), [fn]);
-  return (...args) => fnRef.current == null ? void 0 : fnRef.current(...args);
-}
 function useLoader(Proto, input, extensions, onProgress) {
   // Use suspense to load async assets
   const keys = Array.isArray(input) ? input : [input];
@@ -1542,11 +1625,18 @@ function useLoader(Proto, input, extensions, onProgress) {
 
   return Array.isArray(input) ? results : results[0];
 }
+/**
+ * Preloads an asset into cache as a side-effect.
+ */
 
 useLoader.preload = function (Proto, input, extensions) {
   const keys = Array.isArray(input) ? input : [input];
   return suspendReact.preload(loadingFn(extensions), [Proto, ...keys]);
 };
+/**
+ * Removes a loaded asset from cache.
+ */
+
 
 useLoader.clear = function (Proto, input) {
   const keys = Array.isArray(input) ? input : [input];
@@ -1793,7 +1883,7 @@ function Provider({
   onCreated,
   rootElement
 }) {
-  React__namespace.useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     const state = store.getState(); // Flag the canvas active, rendering will now begin
 
     state.set(state => ({
@@ -1921,6 +2011,8 @@ reconciler.injectIntoDevTools({
 });
 const act = React__namespace.unstable_act;
 
+exports.Block = Block;
+exports.ErrorBoundary = ErrorBoundary;
 exports.act = act;
 exports.addAfterEffect = addAfterEffect;
 exports.addEffect = addEffect;
@@ -1944,7 +2036,8 @@ exports.threeTypes = threeTypes;
 exports.unmountComponentAtNode = unmountComponentAtNode;
 exports.useFrame = useFrame;
 exports.useGraph = useGraph;
+exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
 exports.useLoader = useLoader;
-exports.useMemoizedFn = useMemoizedFn;
+exports.useMutableCallback = useMutableCallback;
 exports.useStore = useStore;
 exports.useThree = useThree;

package/dist/{index-0e758026.cjs.prod.js → index-4dae9cc6.cjs.prod.js}

@@ -39,6 +39,47 @@ var threeTypes = /*#__PURE__*/Object.freeze({
   __proto__: null
 });
 
+// React currently throws a warning when using useLayoutEffect on the server.
+// To get around it, we can conditionally useEffect on the server (no-op) and
+// useLayoutEffect on the client.
+const isSSR = typeof window === 'undefined' || !window.navigator || /ServerSideRendering|^Deno\//.test(window.navigator.userAgent);
+const useIsomorphicLayoutEffect = isSSR ? React__namespace.useEffect : React__namespace.useLayoutEffect;
+function useMutableCallback(fn) {
+  const ref = React__namespace.useRef(fn);
+  useIsomorphicLayoutEffect(() => void (ref.current = fn), [fn]);
+  return ref;
+}
+function Block({
+  set
+}) {
+  useIsomorphicLayoutEffect(() => {
+    set(new Promise(() => null));
+    return () => set(false);
+  }, [set]);
+  return null;
+}
+class ErrorBoundary extends React__namespace.Component {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      error: false
+    };
+  }
+
+  componentDidCatch(error) {
+    this.props.set(error);
+  }
+
+  render() {
+    return this.state.error ? null : this.props.children;
+  }
+
+}
+
+ErrorBoundary.getDerivedStateFromError = () => ({
+  error: true
+});
+
 const DEFAULT = '__default';
 const isDiffSet = def => def && !!def.memoized && !!def.changes;
 function calculateDpr(dpr) {
@@ -1396,8 +1437,23 @@ let i;
 let globalEffects = [];
 let globalAfterEffects = [];
 let globalTailEffects = [];
+/**
+ * Adds a global render callback which is called each frame.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addEffect
+ */
+
 const addEffect = callback => createSubs(callback, globalEffects);
+/**
+ * Adds a global after-render callback which is called each frame.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addAfterEffect
+ */
+
 const addAfterEffect = callback => createSubs(callback, globalAfterEffects);
+/**
+ * Adds a global callback which is called when rendering stops.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addTail
+ */
+
 const addTail = callback => createSubs(callback, globalTailEffects);
 
 function run(effects, timestamp) {
@@ -1488,7 +1544,17 @@ function createLoop(roots) {
 
   return {
     loop,
+
+    /**
+     * Invalidates the view, requesting a frame to be rendered. Will globally invalidate unless passed a root's state.
+     * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#invalidate
+     */
     invalidate,
+
+    /**
+     * Advances the frameloop and runs render effects, useful for when manually rendering via `frameloop="never"`.
+     * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#advance
+     */
     advance
   };
 }
@@ -1498,19 +1564,34 @@ function useStore() {
   if (!store) throw `R3F hooks can only be used within the Canvas component!`;
   return store;
 }
+/**
+ * Accesses R3F's internal state, containing renderer, canvas, scene, etc.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usethree
+ */
+
 function useThree(selector = state => state, equalityFn) {
   return useStore()(selector, equalityFn);
 }
+/**
+ * Executes a callback before render in a shared frame loop.
+ * Can order effects with render priority or manually render with a positive priority.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#useframe
+ */
+
 function useFrame(callback, renderPriority = 0) {
   const store = useStore();
-  const subscribe = store.getState().internal.subscribe; // Update ref
+  const subscribe = store.getState().internal.subscribe; // Memoize ref
 
-  const ref = React__namespace.useRef(callback);
-  React__namespace.useLayoutEffect(() => void (ref.current = callback), [callback]); // Subscribe on mount, unsubscribe on unmount
+  const ref = useMutableCallback(callback); // Subscribe on mount, unsubscribe on unmount
 
-  React__namespace.useLayoutEffect(() => subscribe(ref, renderPriority, store), [renderPriority, subscribe, store]);
+  useIsomorphicLayoutEffect(() => subscribe(ref, renderPriority, store), [renderPriority, subscribe, store]);
   return null;
 }
+/**
+ * Returns a node graph of an object with named nodes & materials.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usegraph
+ */
+
 function useGraph(object) {
   return React__namespace.useMemo(() => buildGraph(object), [object]);
 }
@@ -1527,12 +1608,14 @@ function loadingFn(extensions, onProgress) {
     }, onProgress, error => reject(`Could not load ${input}: ${error.message}`)))));
   };
 }
+/**
+ * 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
+ */
+
 
-function useMemoizedFn(fn) {
-  const fnRef = React__namespace.useRef(fn);
-  React__namespace.useLayoutEffect(() => void (fnRef.current = fn), [fn]);
-  return (...args) => fnRef.current == null ? void 0 : fnRef.current(...args);
-}
 function useLoader(Proto, input, extensions, onProgress) {
   // Use suspense to load async assets
   const keys = Array.isArray(input) ? input : [input];
@@ -1542,11 +1625,18 @@ function useLoader(Proto, input, extensions, onProgress) {
 
   return Array.isArray(input) ? results : results[0];
 }
+/**
+ * Preloads an asset into cache as a side-effect.
+ */
 
 useLoader.preload = function (Proto, input, extensions) {
   const keys = Array.isArray(input) ? input : [input];
   return suspendReact.preload(loadingFn(extensions), [Proto, ...keys]);
 };
+/**
+ * Removes a loaded asset from cache.
+ */
+
 
 useLoader.clear = function (Proto, input) {
   const keys = Array.isArray(input) ? input : [input];
@@ -1793,7 +1883,7 @@ function Provider({
   onCreated,
   rootElement
 }) {
-  React__namespace.useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     const state = store.getState(); // Flag the canvas active, rendering will now begin
 
     state.set(state => ({
@@ -1921,6 +2011,8 @@ reconciler.injectIntoDevTools({
 });
 const act = React__namespace.unstable_act;
 
+exports.Block = Block;
+exports.ErrorBoundary = ErrorBoundary;
 exports.act = act;
 exports.addAfterEffect = addAfterEffect;
 exports.addEffect = addEffect;
@@ -1944,7 +2036,8 @@ exports.threeTypes = threeTypes;
 exports.unmountComponentAtNode = unmountComponentAtNode;
 exports.useFrame = useFrame;
 exports.useGraph = useGraph;
+exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
 exports.useLoader = useLoader;
-exports.useMemoizedFn = useMemoizedFn;
+exports.useMutableCallback = useMutableCallback;
 exports.useStore = useStore;
 exports.useThree = useThree;