@react-three/fiber 8.0.6 → 8.0.9

package/dist/{index-91900b41.esm.js → index-4e14a95b.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 useMutableCallback(fn) {
+  const ref = React.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.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) {
@@ -1367,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) {
@@ -1459,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
   };
 }
@@ -1469,19 +1535,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.useRef(callback);
-  React.useLayoutEffect(() => void (ref.current = callback), [callback]); // Subscribe on mount, unsubscribe on unmount
+  const ref = useMutableCallback(callback); // Subscribe on mount, unsubscribe on unmount
 
-  React.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.useMemo(() => buildGraph(object), [object]);
 }
@@ -1498,12 +1579,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];
@@ -1513,11 +1596,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];
@@ -1764,7 +1854,7 @@ function Provider({
   onCreated,
   rootElement
 }) {
-  React.useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     const state = store.getState(); // Flag the canvas active, rendering will now begin
 
     state.set(state => ({
@@ -1892,4 +1982,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, useMutableCallback as u, act as v, roots as w, useStore as x, useThree as y, useFrame as z };

package/dist/react-three-fiber.cjs.dev.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-0076cbd6.cjs.dev.js');
+var index = require('./index-49237346.cjs.dev.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
@@ -53,6 +53,8 @@ const DOM_EVENTS = {
   onPointerCancel: ['pointercancel', true],
   onLostPointerCapture: ['lostpointercapture', true]
 };
+/** Default R3F event manager for web */
+
 function createPointerEvents(store) {
   const {
     handlePointer
@@ -118,44 +120,17 @@ function createPointerEvents(store) {
 }
 
 const CANVAS_PROPS = ['gl', 'events', 'shadows', 'linear', 'flat', 'legacy', 'orthographic', 'frameloop', 'dpr', 'performance', 'raycaster', 'camera', 'onPointerMissed', 'onCreated'];
-
-function Block({
-  set
-}) {
-  React__namespace.useLayoutEffect(() => {
-    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
-});
+/**
+ * A DOM canvas which accepts threejs elements as children.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
+ */
 
 const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   children,
   fallback,
   resize,
   style,
+  onPointerMissed,
   events = createPointerEvents,
   ...props
 }, forwardedRef) {
@@ -163,7 +138,6 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   // This will include the entire THREE namespace by default, users can extend
   // their own elements by using the createRoot API instead
   React__namespace.useMemo(() => index.extend(THREE__namespace), []);
-  const onPointerMissed = index.useMemoizedFn(props.onPointerMissed);
   const [containerRef, {
     width,
     height
@@ -178,12 +152,9 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   const meshRef = React__namespace.useRef(null);
   const canvasRef = React__namespace.useRef(null);
   const [canvas, setCanvas] = React__namespace.useState(null);
-  const canvasProps = index.pick({ ...props,
-    onPointerMissed
-  }, CANVAS_PROPS);
-  const divProps = index.omit({ ...props,
-    onPointerMissed
-  }, CANVAS_PROPS);
+  const handlePointerMissed = index.useMutableCallback(onPointerMissed);
+  const canvasProps = index.pick(props, CANVAS_PROPS);
+  const divProps = index.omit(props, CANVAS_PROPS);
   const [block, setBlock] = React__namespace.useState(false);
   const [error, setError] = React__namespace.useState(false); // Suspend this component if block is a promise (2nd run)
 
@@ -195,6 +166,8 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   if (width > 0 && height > 0 && canvas) {
     if (!root.current) root.current = index.createRoot(canvas);
     root.current.configure({ ...canvasProps,
+      // Pass mutable reference to onPointerMissed so it's free to update
+      onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
       onCreated: state => {
         state.events.connect == null ? void 0 : state.events.connect(meshRef.current);
         canvasProps.onCreated == null ? void 0 : canvasProps.onCreated(state);
@@ -205,21 +178,21 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
       },
       events
     });
-    root.current.render( /*#__PURE__*/React__namespace.createElement(ErrorBoundary, {
+    root.current.render( /*#__PURE__*/React__namespace.createElement(index.ErrorBoundary, {
       set: setError
     }, /*#__PURE__*/React__namespace.createElement(React__namespace.Suspense, {
-      fallback: /*#__PURE__*/React__namespace.createElement(Block, {
+      fallback: /*#__PURE__*/React__namespace.createElement(index.Block, {
         set: setBlock
       })
     }, children)));
   }
 
-  React__namespace.useLayoutEffect(() => {
+  index.useIsomorphicLayoutEffect(() => {
     setCanvas(canvasRef.current);
   }, []);
   React__namespace.useEffect(() => {
     return () => index.unmountComponentAtNode(canvas);
-  }, [canvas]);
+  }, []);
   return /*#__PURE__*/React__namespace.createElement("div", _extends({
     ref: mergeRefs__default['default']([meshRef, containerRef]),
     style: {
@@ -258,7 +231,6 @@ exports.unmountComponentAtNode = index.unmountComponentAtNode;
 exports.useFrame = index.useFrame;
 exports.useGraph = index.useGraph;
 exports.useLoader = index.useLoader;
-exports.useMemoizedFn = index.useMemoizedFn;
 exports.useStore = index.useStore;
 exports.useThree = index.useThree;
 exports.Canvas = Canvas;

package/dist/react-three-fiber.cjs.prod.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-0e758026.cjs.prod.js');
+var index = require('./index-4dae9cc6.cjs.prod.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
@@ -53,6 +53,8 @@ const DOM_EVENTS = {
   onPointerCancel: ['pointercancel', true],
   onLostPointerCapture: ['lostpointercapture', true]
 };
+/** Default R3F event manager for web */
+
 function createPointerEvents(store) {
   const {
     handlePointer
@@ -118,44 +120,17 @@ function createPointerEvents(store) {
 }
 
 const CANVAS_PROPS = ['gl', 'events', 'shadows', 'linear', 'flat', 'legacy', 'orthographic', 'frameloop', 'dpr', 'performance', 'raycaster', 'camera', 'onPointerMissed', 'onCreated'];
-
-function Block({
-  set
-}) {
-  React__namespace.useLayoutEffect(() => {
-    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
-});
+/**
+ * A DOM canvas which accepts threejs elements as children.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
+ */
 
 const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   children,
   fallback,
   resize,
   style,
+  onPointerMissed,
   events = createPointerEvents,
   ...props
 }, forwardedRef) {
@@ -163,7 +138,6 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   // This will include the entire THREE namespace by default, users can extend
   // their own elements by using the createRoot API instead
   React__namespace.useMemo(() => index.extend(THREE__namespace), []);
-  const onPointerMissed = index.useMemoizedFn(props.onPointerMissed);
   const [containerRef, {
     width,
     height
@@ -178,12 +152,9 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   const meshRef = React__namespace.useRef(null);
   const canvasRef = React__namespace.useRef(null);
   const [canvas, setCanvas] = React__namespace.useState(null);
-  const canvasProps = index.pick({ ...props,
-    onPointerMissed
-  }, CANVAS_PROPS);
-  const divProps = index.omit({ ...props,
-    onPointerMissed
-  }, CANVAS_PROPS);
+  const handlePointerMissed = index.useMutableCallback(onPointerMissed);
+  const canvasProps = index.pick(props, CANVAS_PROPS);
+  const divProps = index.omit(props, CANVAS_PROPS);
   const [block, setBlock] = React__namespace.useState(false);
   const [error, setError] = React__namespace.useState(false); // Suspend this component if block is a promise (2nd run)
 
@@ -195,6 +166,8 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   if (width > 0 && height > 0 && canvas) {
     if (!root.current) root.current = index.createRoot(canvas);
     root.current.configure({ ...canvasProps,
+      // Pass mutable reference to onPointerMissed so it's free to update
+      onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
       onCreated: state => {
         state.events.connect == null ? void 0 : state.events.connect(meshRef.current);
         canvasProps.onCreated == null ? void 0 : canvasProps.onCreated(state);
@@ -205,21 +178,21 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
       },
       events
     });
-    root.current.render( /*#__PURE__*/React__namespace.createElement(ErrorBoundary, {
+    root.current.render( /*#__PURE__*/React__namespace.createElement(index.ErrorBoundary, {
       set: setError
     }, /*#__PURE__*/React__namespace.createElement(React__namespace.Suspense, {
-      fallback: /*#__PURE__*/React__namespace.createElement(Block, {
+      fallback: /*#__PURE__*/React__namespace.createElement(index.Block, {
         set: setBlock
       })
     }, children)));
   }
 
-  React__namespace.useLayoutEffect(() => {
+  index.useIsomorphicLayoutEffect(() => {
     setCanvas(canvasRef.current);
   }, []);
   React__namespace.useEffect(() => {
     return () => index.unmountComponentAtNode(canvas);
-  }, [canvas]);
+  }, []);
   return /*#__PURE__*/React__namespace.createElement("div", _extends({
     ref: mergeRefs__default['default']([meshRef, containerRef]),
     style: {
@@ -258,7 +231,6 @@ exports.unmountComponentAtNode = index.unmountComponentAtNode;
 exports.useFrame = index.useFrame;
 exports.useGraph = index.useGraph;
 exports.useLoader = index.useLoader;
-exports.useMemoizedFn = index.useMemoizedFn;
 exports.useStore = index.useStore;
 exports.useThree = index.useThree;
 exports.Canvas = Canvas;

package/dist/react-three-fiber.esm.js

@@ -1,5 +1,5 @@
-import { c as createEvents, e as extend, u as useMemoizedFn, p as pick, o as omit, a as createRoot, b as unmountComponentAtNode } from './index-91900b41.esm.js';
-export { t as ReactThreeFiber, v as _roots, s as act, m as addAfterEffect, l as addEffect, n as addTail, k as advance, h as applyProps, d as context, f as createPortal, a as createRoot, i as dispose, e as extend, q as getRootState, j as invalidate, g as reconciler, r as render, b as unmountComponentAtNode, y as useFrame, z as useGraph, A as useLoader, u as useMemoizedFn, w as useStore, x as useThree } from './index-91900b41.esm.js';
+import { c as createEvents, e as extend, u as useMutableCallback, p as pick, o as omit, a as createRoot, E as ErrorBoundary, B as Block, b as useIsomorphicLayoutEffect, d as unmountComponentAtNode } from './index-4e14a95b.esm.js';
+export { t as ReactThreeFiber, w as _roots, v as act, n as addAfterEffect, m as addEffect, q as addTail, l as advance, i as applyProps, f as context, g as createPortal, a as createRoot, j as dispose, e as extend, s as getRootState, k as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, z as useFrame, A as useGraph, C as useLoader, x as useStore, y as useThree } from './index-4e14a95b.esm.js';
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import * as THREE from 'three';
@@ -23,6 +23,8 @@ const DOM_EVENTS = {
   onPointerCancel: ['pointercancel', true],
   onLostPointerCapture: ['lostpointercapture', true]
 };
+/** Default R3F event manager for web */
+
 function createPointerEvents(store) {
   const {
     handlePointer
@@ -88,44 +90,17 @@ function createPointerEvents(store) {
 }
 
 const CANVAS_PROPS = ['gl', 'events', 'shadows', 'linear', 'flat', 'legacy', 'orthographic', 'frameloop', 'dpr', 'performance', 'raycaster', 'camera', 'onPointerMissed', 'onCreated'];
-
-function Block({
-  set
-}) {
-  React.useLayoutEffect(() => {
-    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
-});
+/**
+ * A DOM canvas which accepts threejs elements as children.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
+ */
 
 const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
   children,
   fallback,
   resize,
   style,
+  onPointerMissed,
   events = createPointerEvents,
   ...props
 }, forwardedRef) {
@@ -133,7 +108,6 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
   // This will include the entire THREE namespace by default, users can extend
   // their own elements by using the createRoot API instead
   React.useMemo(() => extend(THREE), []);
-  const onPointerMissed = useMemoizedFn(props.onPointerMissed);
   const [containerRef, {
     width,
     height
@@ -148,12 +122,9 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
   const meshRef = React.useRef(null);
   const canvasRef = React.useRef(null);
   const [canvas, setCanvas] = React.useState(null);
-  const canvasProps = pick({ ...props,
-    onPointerMissed
-  }, CANVAS_PROPS);
-  const divProps = omit({ ...props,
-    onPointerMissed
-  }, CANVAS_PROPS);
+  const handlePointerMissed = useMutableCallback(onPointerMissed);
+  const canvasProps = pick(props, CANVAS_PROPS);
+  const divProps = omit(props, CANVAS_PROPS);
   const [block, setBlock] = React.useState(false);
   const [error, setError] = React.useState(false); // Suspend this component if block is a promise (2nd run)
 
@@ -165,6 +136,8 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
   if (width > 0 && height > 0 && canvas) {
     if (!root.current) root.current = createRoot(canvas);
     root.current.configure({ ...canvasProps,
+      // Pass mutable reference to onPointerMissed so it's free to update
+      onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
       onCreated: state => {
         state.events.connect == null ? void 0 : state.events.connect(meshRef.current);
         canvasProps.onCreated == null ? void 0 : canvasProps.onCreated(state);
@@ -184,12 +157,12 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
     }, children)));
   }
 
-  React.useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     setCanvas(canvasRef.current);
   }, []);
   React.useEffect(() => {
     return () => unmountComponentAtNode(canvas);
-  }, [canvas]);
+  }, []);
   return /*#__PURE__*/React.createElement("div", _extends({
     ref: mergeRefs([meshRef, containerRef]),
     style: {