@react-three/fiber 8.0.5 → 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-635ddfb2.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) {
@@ -831,8 +872,10 @@ function createRenderer(roots, getEventPriority) {
     let added = false;
 
     if (child) {
+      var _child$__r3f, _parentInstance$__r3f;
+
       // The attach attribute implies that the object attaches itself on the parent
-      if (child.__r3f.attach) {
+      if ((_child$__r3f = child.__r3f) != null && _child$__r3f.attach) {
         attach(parentInstance, child, child.__r3f.attach);
       } else if (child.isObject3D && parentInstance.isObject3D) {
         // add in the usual parent-child way
@@ -842,7 +885,7 @@ function createRenderer(roots, getEventPriority) {
       // that is, anything that's a child in React but not a child in the scenegraph.
 
 
-      if (!added) parentInstance.__r3f.objects.push(child);
+      if (!added) (_parentInstance$__r3f = parentInstance.__r3f) == null ? void 0 : _parentInstance$__r3f.objects.push(child);
       if (!child.__r3f) prepare(child, {});
       child.__r3f.parent = parentInstance;
       updateInstance(child);
@@ -854,7 +897,9 @@ function createRenderer(roots, getEventPriority) {
     let added = false;
 
     if (child) {
-      if (child.__r3f.attach) {
+      var _child$__r3f2, _parentInstance$__r3f2;
+
+      if ((_child$__r3f2 = child.__r3f) != null && _child$__r3f2.attach) {
         attach(parentInstance, child, child.__r3f.attach);
       } else if (child.isObject3D && parentInstance.isObject3D) {
         child.parent = parentInstance;
@@ -867,7 +912,7 @@ function createRenderer(roots, getEventPriority) {
         added = true;
       }
 
-      if (!added) parentInstance.__r3f.objects.push(child);
+      if (!added) (_parentInstance$__r3f2 = parentInstance.__r3f) == null ? void 0 : _parentInstance$__r3f2.objects.push(child);
       if (!child.__r3f) prepare(child, {});
       child.__r3f.parent = parentInstance;
       updateInstance(child);
@@ -881,21 +926,21 @@ function createRenderer(roots, getEventPriority) {
 
   function removeChild(parentInstance, child, dispose) {
     if (child) {
-      var _parentInstance$__r3f, _child$__r3f2;
+      var _parentInstance$__r3f3, _child$__r3f3, _child$__r3f5;
 
       // Clear the parent reference
       if (child.__r3f) child.__r3f.parent = null; // Remove child from the parents objects
 
-      if ((_parentInstance$__r3f = parentInstance.__r3f) != null && _parentInstance$__r3f.objects) parentInstance.__r3f.objects = parentInstance.__r3f.objects.filter(x => x !== child); // Remove attachment
+      if ((_parentInstance$__r3f3 = parentInstance.__r3f) != null && _parentInstance$__r3f3.objects) parentInstance.__r3f.objects = parentInstance.__r3f.objects.filter(x => x !== child); // Remove attachment
 
-      if (child.__r3f.attach) {
+      if ((_child$__r3f3 = child.__r3f) != null && _child$__r3f3.attach) {
         detach(parentInstance, child, child.__r3f.attach);
       } else if (child.isObject3D && parentInstance.isObject3D) {
-        var _child$__r3f;
+        var _child$__r3f4;
 
         parentInstance.remove(child); // Remove interactivity
 
-        if ((_child$__r3f = child.__r3f) != null && _child$__r3f.root) {
+        if ((_child$__r3f4 = child.__r3f) != null && _child$__r3f4.root) {
           removeInteractivity(child.__r3f.root, child);
         }
       } // Allow objects to bail out of recursive dispose alltogether by passing dispose={null}
@@ -909,14 +954,14 @@ function createRenderer(roots, getEventPriority) {
       // when the reconciler calls it, but then carry our own check recursively
 
 
-      const isPrimitive = (_child$__r3f2 = child.__r3f) == null ? void 0 : _child$__r3f2.primitive;
+      const isPrimitive = (_child$__r3f5 = child.__r3f) == null ? void 0 : _child$__r3f5.primitive;
       const shouldDispose = dispose === undefined ? child.dispose !== null && !isPrimitive : dispose; // Remove nested child objects. Primitives should not have objects and children that are
       // attached to them declaratively ...
 
       if (!isPrimitive) {
-        var _child$__r3f3;
+        var _child$__r3f6;
 
-        removeRecursive((_child$__r3f3 = child.__r3f) == null ? void 0 : _child$__r3f3.objects, child, shouldDispose);
+        removeRecursive((_child$__r3f6 = child.__r3f) == null ? void 0 : _child$__r3f6.objects, child, shouldDispose);
         removeRecursive(child.children, child, shouldDispose);
       } // Remove references
 
@@ -1274,7 +1319,7 @@ const createStore = (invalidate, advance) => {
         initialClick: [0, 0],
         initialHits: [],
         capturedMap: new Map(),
-        subscribe: (ref, priority = 0) => {
+        subscribe: (ref, priority, store) => {
           set(({
             internal
           }) => ({
@@ -1288,7 +1333,8 @@ const createStore = (invalidate, advance) => {
               // highest priority renders last (on top of the other frames)
               subscribers: [...internal.subscribers, {
                 ref,
-                priority
+                priority,
+                store
               }].sort((a, b) => a.priority - b.priority)
             }
           }));
@@ -1362,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) {
@@ -1371,6 +1432,7 @@ function run(effects, timestamp) {
 }
 
 let subscribers;
+let subscription;
 
 function render$1(timestamp, state, frame) {
   // Run local effects
@@ -1385,7 +1447,10 @@ function render$1(timestamp, state, frame) {
 
   subscribers = state.internal.subscribers;
 
-  for (i = 0; i < subscribers.length; i++) subscribers[i].ref.current(state, delta, frame); // Render content
+  for (i = 0; i < subscribers.length; i++) {
+    subscription = subscribers[i];
+    subscription.ref.current(subscription.store.getState(), delta, frame);
+  } // Render content
 
 
   if (!state.internal.priority && state.gl.render) state.gl.render(state.scene, state.camera); // Decrease frame count
@@ -1450,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
   };
 }
@@ -1460,18 +1535,35 @@ 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 subscribe = useStore().getState().internal.subscribe; // Update ref
+  const store = useStore();
+  const subscribe = store.getState().internal.subscribe; // Update ref
 
   const ref = React.useRef(callback);
   React.useLayoutEffect(() => void (ref.current = callback), [callback]); // Subscribe on mount, unsubscribe on unmount
 
-  React.useLayoutEffect(() => subscribe(ref, renderPriority), [renderPriority, subscribe]);
+  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]);
 }
@@ -1488,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];
@@ -1503,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];
@@ -1754,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 => ({
@@ -1804,6 +1905,7 @@ function unmountComponentAtNode(canvas, callback) {
 
 function createPortal(children, container, state) {
   return /*#__PURE__*/React.createElement(Portal, {
+    key: container.uuid,
     children: children,
     container: container,
     state: state
@@ -1881,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-28a77253.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) {
@@ -860,8 +901,10 @@ function createRenderer(roots, getEventPriority) {
     let added = false;
 
     if (child) {
+      var _child$__r3f, _parentInstance$__r3f;
+
       // The attach attribute implies that the object attaches itself on the parent
-      if (child.__r3f.attach) {
+      if ((_child$__r3f = child.__r3f) != null && _child$__r3f.attach) {
         attach(parentInstance, child, child.__r3f.attach);
       } else if (child.isObject3D && parentInstance.isObject3D) {
         // add in the usual parent-child way
@@ -871,7 +914,7 @@ function createRenderer(roots, getEventPriority) {
       // that is, anything that's a child in React but not a child in the scenegraph.
 
 
-      if (!added) parentInstance.__r3f.objects.push(child);
+      if (!added) (_parentInstance$__r3f = parentInstance.__r3f) == null ? void 0 : _parentInstance$__r3f.objects.push(child);
       if (!child.__r3f) prepare(child, {});
       child.__r3f.parent = parentInstance;
       updateInstance(child);
@@ -883,7 +926,9 @@ function createRenderer(roots, getEventPriority) {
     let added = false;
 
     if (child) {
-      if (child.__r3f.attach) {
+      var _child$__r3f2, _parentInstance$__r3f2;
+
+      if ((_child$__r3f2 = child.__r3f) != null && _child$__r3f2.attach) {
         attach(parentInstance, child, child.__r3f.attach);
       } else if (child.isObject3D && parentInstance.isObject3D) {
         child.parent = parentInstance;
@@ -896,7 +941,7 @@ function createRenderer(roots, getEventPriority) {
         added = true;
       }
 
-      if (!added) parentInstance.__r3f.objects.push(child);
+      if (!added) (_parentInstance$__r3f2 = parentInstance.__r3f) == null ? void 0 : _parentInstance$__r3f2.objects.push(child);
       if (!child.__r3f) prepare(child, {});
       child.__r3f.parent = parentInstance;
       updateInstance(child);
@@ -910,21 +955,21 @@ function createRenderer(roots, getEventPriority) {
 
   function removeChild(parentInstance, child, dispose) {
     if (child) {
-      var _parentInstance$__r3f, _child$__r3f2;
+      var _parentInstance$__r3f3, _child$__r3f3, _child$__r3f5;
 
       // Clear the parent reference
       if (child.__r3f) child.__r3f.parent = null; // Remove child from the parents objects
 
-      if ((_parentInstance$__r3f = parentInstance.__r3f) != null && _parentInstance$__r3f.objects) parentInstance.__r3f.objects = parentInstance.__r3f.objects.filter(x => x !== child); // Remove attachment
+      if ((_parentInstance$__r3f3 = parentInstance.__r3f) != null && _parentInstance$__r3f3.objects) parentInstance.__r3f.objects = parentInstance.__r3f.objects.filter(x => x !== child); // Remove attachment
 
-      if (child.__r3f.attach) {
+      if ((_child$__r3f3 = child.__r3f) != null && _child$__r3f3.attach) {
         detach(parentInstance, child, child.__r3f.attach);
       } else if (child.isObject3D && parentInstance.isObject3D) {
-        var _child$__r3f;
+        var _child$__r3f4;
 
         parentInstance.remove(child); // Remove interactivity
 
-        if ((_child$__r3f = child.__r3f) != null && _child$__r3f.root) {
+        if ((_child$__r3f4 = child.__r3f) != null && _child$__r3f4.root) {
           removeInteractivity(child.__r3f.root, child);
         }
       } // Allow objects to bail out of recursive dispose alltogether by passing dispose={null}
@@ -938,14 +983,14 @@ function createRenderer(roots, getEventPriority) {
       // when the reconciler calls it, but then carry our own check recursively
 
 
-      const isPrimitive = (_child$__r3f2 = child.__r3f) == null ? void 0 : _child$__r3f2.primitive;
+      const isPrimitive = (_child$__r3f5 = child.__r3f) == null ? void 0 : _child$__r3f5.primitive;
       const shouldDispose = dispose === undefined ? child.dispose !== null && !isPrimitive : dispose; // Remove nested child objects. Primitives should not have objects and children that are
       // attached to them declaratively ...
 
       if (!isPrimitive) {
-        var _child$__r3f3;
+        var _child$__r3f6;
 
-        removeRecursive((_child$__r3f3 = child.__r3f) == null ? void 0 : _child$__r3f3.objects, child, shouldDispose);
+        removeRecursive((_child$__r3f6 = child.__r3f) == null ? void 0 : _child$__r3f6.objects, child, shouldDispose);
         removeRecursive(child.children, child, shouldDispose);
       } // Remove references
 
@@ -1303,7 +1348,7 @@ const createStore = (invalidate, advance) => {
         initialClick: [0, 0],
         initialHits: [],
         capturedMap: new Map(),
-        subscribe: (ref, priority = 0) => {
+        subscribe: (ref, priority, store) => {
           set(({
             internal
           }) => ({
@@ -1317,7 +1362,8 @@ const createStore = (invalidate, advance) => {
               // highest priority renders last (on top of the other frames)
               subscribers: [...internal.subscribers, {
                 ref,
-                priority
+                priority,
+                store
               }].sort((a, b) => a.priority - b.priority)
             }
           }));
@@ -1391,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) {
@@ -1400,6 +1461,7 @@ function run(effects, timestamp) {
 }
 
 let subscribers;
+let subscription;
 
 function render$1(timestamp, state, frame) {
   // Run local effects
@@ -1414,7 +1476,10 @@ function render$1(timestamp, state, frame) {
 
   subscribers = state.internal.subscribers;
 
-  for (i = 0; i < subscribers.length; i++) subscribers[i].ref.current(state, delta, frame); // Render content
+  for (i = 0; i < subscribers.length; i++) {
+    subscription = subscribers[i];
+    subscription.ref.current(subscription.store.getState(), delta, frame);
+  } // Render content
 
 
   if (!state.internal.priority && state.gl.render) state.gl.render(state.scene, state.camera); // Decrease frame count
@@ -1479,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
   };
 }
@@ -1489,18 +1564,35 @@ 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 subscribe = useStore().getState().internal.subscribe; // Update ref
+  const store = useStore();
+  const subscribe = store.getState().internal.subscribe; // Update ref
 
   const ref = React__namespace.useRef(callback);
   React__namespace.useLayoutEffect(() => void (ref.current = callback), [callback]); // Subscribe on mount, unsubscribe on unmount
 
-  React__namespace.useLayoutEffect(() => subscribe(ref, renderPriority), [renderPriority, subscribe]);
+  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]);
 }
@@ -1517,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];
@@ -1532,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];
@@ -1783,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 => ({
@@ -1833,6 +1934,7 @@ function unmountComponentAtNode(canvas, callback) {
 
 function createPortal(children, container, state) {
   return /*#__PURE__*/React__namespace.createElement(Portal, {
+    key: container.uuid,
     children: children,
     container: container,
     state: state
@@ -1910,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;
@@ -1933,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;