@react-three/fiber 8.0.7 → 8.0.8

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

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

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

package/dist/{index-e42f8ac9.esm.js → index-548cf96a.esm.js}

@@ -10,6 +10,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.useEffect : React.useLayoutEffect;
+function Block({
+  set
+}) {
+  useIsomorphicLayoutEffect(() => {
+    set(new Promise(() => null));
+    return () => set(false);
+  }, [set]);
+  return null;
+}
+class ErrorBoundary extends React.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
+});
+
+function useMemoizedFn(fn) {
+  const fnRef = React.useRef(fn);
+  useIsomorphicLayoutEffect(() => void (fnRef.current = fn), [fn]);
+  return (...args) => fnRef.current == null ? void 0 : fnRef.current(...args);
+}
 const DEFAULT = '__default';
 const isDiffSet = def => def && !!def.memoized && !!def.changes;
 function calculateDpr(dpr) {
@@ -182,10 +223,7 @@ function detach(parent, child, type) {
       target,
       key
     } = resolve(parent, type);
-    const previous = child.__r3f.previousAttach; // When the previous value was undefined, it means the value was never set to begin with
-
-    if (previous === undefined) delete target[key]; // Otherwise set the previous value
-    else target[key] = previous;
+    target[key] = child.__r3f.previousAttach;
   } else (_child$__r3f = child.__r3f) == null ? void 0 : _child$__r3f.previousAttach == null ? void 0 : _child$__r3f.previousAttach(parent, child);
 
   (_child$__r3f2 = child.__r3f) == null ? true : delete _child$__r3f2.previousAttach;
@@ -278,11 +316,9 @@ function applyProps$1(instance, data) {
         // use the prop constructor to find the default it should be
         value = new targetProp.constructor(...memoized.args);
       } else if (currentInstance.constructor) {
-        var _currentInstance$__r, _currentInstance$__r2;
-
         // create a blank slate of the instance and copy the particular parameter.
         // @ts-ignore
-        const defaultClassCall = new currentInstance.constructor(...((_currentInstance$__r = (_currentInstance$__r2 = currentInstance.__r3f) == null ? void 0 : _currentInstance$__r2.memoizedProps.args) != null ? _currentInstance$__r : []));
+        const defaultClassCall = new currentInstance.constructor(...currentInstance.__r3f.memoizedProps.args);
         value = defaultClassCall[targetProp]; // destory the instance
 
         if (defaultClassCall.dispose) defaultClassCall.dispose(); // instance does not have constructor, just set it to 0
@@ -1372,8 +1408,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) {
@@ -1382,11 +1433,10 @@ function run(effects, timestamp) {
 
 let subscribers;
 let subscription;
-let delta;
 
 function render$1(timestamp, state, frame) {
   // Run local effects
-  delta = state.clock.getDelta(); // In frameloop='never' mode, clock times are updated using the provided timestamp
+  let delta = state.clock.getDelta(); // In frameloop='never' mode, clock times are updated using the provided timestamp
 
   if (state.frameloop === 'never' && typeof timestamp === 'number') {
     delta = timestamp - state.clock.elapsedTime;
@@ -1465,7 +1515,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
   };
 }
@@ -1475,9 +1535,20 @@ 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
@@ -1488,6 +1559,11 @@ function useFrame(callback, renderPriority = 0) {
   React.useLayoutEffect(() => 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.useMemo(() => buildGraph(object), [object]);
 }
@@ -1504,12 +1580,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.useRef(fn);
-  React.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];
@@ -1519,11 +1597,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 preload(loadingFn(extensions), [Proto, ...keys]);
 };
+/**
+ * Removes a loaded asset from cache.
+ */
+
 
 useLoader.clear = function (Proto, input) {
   const keys = Array.isArray(input) ? input : [input];
@@ -1770,7 +1855,7 @@ function Provider({
   onCreated,
   rootElement
 }) {
-  React.useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     const state = store.getState(); // Flag the canvas active, rendering will now begin
 
     state.set(state => ({
@@ -1898,4 +1983,4 @@ reconciler.injectIntoDevTools({
 });
 const act = React.unstable_act;
 
-export { useLoader as A, createRoot as a, unmountComponentAtNode as b, createEvents as c, context as d, extend as e, createPortal as f, reconciler as g, applyProps as h, dispose as i, invalidate as j, advance as k, addEffect as l, addAfterEffect as m, addTail as n, omit as o, pick as p, getRootState as q, render as r, act as s, threeTypes as t, useMemoizedFn as u, roots as v, useStore as w, useThree as x, useFrame as y, useGraph as z };
+export { useGraph as A, Block as B, useLoader as C, ErrorBoundary as E, createRoot as a, useIsomorphicLayoutEffect as b, createEvents as c, unmountComponentAtNode as d, extend as e, context as f, createPortal as g, reconciler as h, applyProps as i, dispose as j, invalidate as k, advance as l, addEffect as m, addAfterEffect as n, omit as o, pick as p, addTail as q, render as r, getRootState as s, threeTypes as t, useMemoizedFn as u, act as v, roots as w, useStore as x, useThree as y, useFrame as z };

package/dist/{index-75d39ab1.cjs.dev.js → index-b8ee55f0.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 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
+});
+
+function useMemoizedFn(fn) {
+  const fnRef = React__namespace.useRef(fn);
+  useIsomorphicLayoutEffect(() => void (fnRef.current = fn), [fn]);
+  return (...args) => fnRef.current == null ? void 0 : fnRef.current(...args);
+}
 const DEFAULT = '__default';
 const isDiffSet = def => def && !!def.memoized && !!def.changes;
 function calculateDpr(dpr) {
@@ -211,10 +252,7 @@ function detach(parent, child, type) {
       target,
       key
     } = resolve(parent, type);
-    const previous = child.__r3f.previousAttach; // When the previous value was undefined, it means the value was never set to begin with
-
-    if (previous === undefined) delete target[key]; // Otherwise set the previous value
-    else target[key] = previous;
+    target[key] = child.__r3f.previousAttach;
   } else (_child$__r3f = child.__r3f) == null ? void 0 : _child$__r3f.previousAttach == null ? void 0 : _child$__r3f.previousAttach(parent, child);
 
   (_child$__r3f2 = child.__r3f) == null ? true : delete _child$__r3f2.previousAttach;
@@ -307,11 +345,9 @@ function applyProps$1(instance, data) {
         // use the prop constructor to find the default it should be
         value = new targetProp.constructor(...memoized.args);
       } else if (currentInstance.constructor) {
-        var _currentInstance$__r, _currentInstance$__r2;
-
         // create a blank slate of the instance and copy the particular parameter.
         // @ts-ignore
-        const defaultClassCall = new currentInstance.constructor(...((_currentInstance$__r = (_currentInstance$__r2 = currentInstance.__r3f) == null ? void 0 : _currentInstance$__r2.memoizedProps.args) != null ? _currentInstance$__r : []));
+        const defaultClassCall = new currentInstance.constructor(...currentInstance.__r3f.memoizedProps.args);
         value = defaultClassCall[targetProp]; // destory the instance
 
         if (defaultClassCall.dispose) defaultClassCall.dispose(); // instance does not have constructor, just set it to 0
@@ -1401,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) {
@@ -1411,11 +1462,10 @@ function run(effects, timestamp) {
 
 let subscribers;
 let subscription;
-let delta;
 
 function render$1(timestamp, state, frame) {
   // Run local effects
-  delta = state.clock.getDelta(); // In frameloop='never' mode, clock times are updated using the provided timestamp
+  let delta = state.clock.getDelta(); // In frameloop='never' mode, clock times are updated using the provided timestamp
 
   if (state.frameloop === 'never' && typeof timestamp === 'number') {
     delta = timestamp - state.clock.elapsedTime;
@@ -1494,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
   };
 }
@@ -1504,9 +1564,20 @@ 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
@@ -1517,6 +1588,11 @@ function useFrame(callback, renderPriority = 0) {
   React__namespace.useLayoutEffect(() => 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]);
 }
@@ -1533,12 +1609,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];
@@ -1548,11 +1626,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];
@@ -1799,7 +1884,7 @@ function Provider({
   onCreated,
   rootElement
 }) {
-  React__namespace.useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     const state = store.getState(); // Flag the canvas active, rendering will now begin
 
     state.set(state => ({
@@ -1927,6 +2012,8 @@ reconciler.injectIntoDevTools({
 });
 const act = React__namespace.unstable_act;
 
+exports.Block = Block;
+exports.ErrorBoundary = ErrorBoundary;
 exports.act = act;
 exports.addAfterEffect = addAfterEffect;
 exports.addEffect = addEffect;
@@ -1950,6 +2037,7 @@ exports.threeTypes = threeTypes;
 exports.unmountComponentAtNode = unmountComponentAtNode;
 exports.useFrame = useFrame;
 exports.useGraph = useGraph;
+exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
 exports.useLoader = useLoader;
 exports.useMemoizedFn = useMemoizedFn;
 exports.useStore = useStore;

package/dist/{index-4fb4daff.cjs.prod.js → index-c4e0ac66.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 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
+});
+
+function useMemoizedFn(fn) {
+  const fnRef = React__namespace.useRef(fn);
+  useIsomorphicLayoutEffect(() => void (fnRef.current = fn), [fn]);
+  return (...args) => fnRef.current == null ? void 0 : fnRef.current(...args);
+}
 const DEFAULT = '__default';
 const isDiffSet = def => def && !!def.memoized && !!def.changes;
 function calculateDpr(dpr) {
@@ -211,10 +252,7 @@ function detach(parent, child, type) {
       target,
       key
     } = resolve(parent, type);
-    const previous = child.__r3f.previousAttach; // When the previous value was undefined, it means the value was never set to begin with
-
-    if (previous === undefined) delete target[key]; // Otherwise set the previous value
-    else target[key] = previous;
+    target[key] = child.__r3f.previousAttach;
   } else (_child$__r3f = child.__r3f) == null ? void 0 : _child$__r3f.previousAttach == null ? void 0 : _child$__r3f.previousAttach(parent, child);
 
   (_child$__r3f2 = child.__r3f) == null ? true : delete _child$__r3f2.previousAttach;
@@ -307,11 +345,9 @@ function applyProps$1(instance, data) {
         // use the prop constructor to find the default it should be
         value = new targetProp.constructor(...memoized.args);
       } else if (currentInstance.constructor) {
-        var _currentInstance$__r, _currentInstance$__r2;
-
         // create a blank slate of the instance and copy the particular parameter.
         // @ts-ignore
-        const defaultClassCall = new currentInstance.constructor(...((_currentInstance$__r = (_currentInstance$__r2 = currentInstance.__r3f) == null ? void 0 : _currentInstance$__r2.memoizedProps.args) != null ? _currentInstance$__r : []));
+        const defaultClassCall = new currentInstance.constructor(...currentInstance.__r3f.memoizedProps.args);
         value = defaultClassCall[targetProp]; // destory the instance
 
         if (defaultClassCall.dispose) defaultClassCall.dispose(); // instance does not have constructor, just set it to 0
@@ -1401,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) {
@@ -1411,11 +1462,10 @@ function run(effects, timestamp) {
 
 let subscribers;
 let subscription;
-let delta;
 
 function render$1(timestamp, state, frame) {
   // Run local effects
-  delta = state.clock.getDelta(); // In frameloop='never' mode, clock times are updated using the provided timestamp
+  let delta = state.clock.getDelta(); // In frameloop='never' mode, clock times are updated using the provided timestamp
 
   if (state.frameloop === 'never' && typeof timestamp === 'number') {
     delta = timestamp - state.clock.elapsedTime;
@@ -1494,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
   };
 }
@@ -1504,9 +1564,20 @@ 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
@@ -1517,6 +1588,11 @@ function useFrame(callback, renderPriority = 0) {
   React__namespace.useLayoutEffect(() => 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]);
 }
@@ -1533,12 +1609,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];
@@ -1548,11 +1626,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];
@@ -1799,7 +1884,7 @@ function Provider({
   onCreated,
   rootElement
 }) {
-  React__namespace.useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     const state = store.getState(); // Flag the canvas active, rendering will now begin
 
     state.set(state => ({
@@ -1927,6 +2012,8 @@ reconciler.injectIntoDevTools({
 });
 const act = React__namespace.unstable_act;
 
+exports.Block = Block;
+exports.ErrorBoundary = ErrorBoundary;
 exports.act = act;
 exports.addAfterEffect = addAfterEffect;
 exports.addEffect = addEffect;
@@ -1950,6 +2037,7 @@ exports.threeTypes = threeTypes;
 exports.unmountComponentAtNode = unmountComponentAtNode;
 exports.useFrame = useFrame;
 exports.useGraph = useGraph;
+exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
 exports.useLoader = useLoader;
 exports.useMemoizedFn = useMemoizedFn;
 exports.useStore = useStore;