@react-three/fiber 8.0.14 → 8.0.17

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

@@ -1,9 +1,9 @@
-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>>;
+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-c0771a1d.esm.js → index-136ca0b0.esm.js}

@@ -1228,7 +1228,7 @@ const createStore = (invalidate, advance) => {
         connected: false
       },
       xr: null,
-      invalidate: () => invalidate(get()),
+      invalidate: (frames = 1) => invalidate(get(), frames),
       advance: (timestamp, runGlobalEffects) => advance(timestamp, runGlobalEffects, get()),
       legacy: false,
       linear: false,
@@ -1480,13 +1480,13 @@ function createLoop(roots) {
     }
   }
 
-  function invalidate(state) {
+  function invalidate(state, frames = 1) {
     var _state$gl$xr2;
 
-    if (!state) return roots.forEach(root => invalidate(root.store.getState()));
+    if (!state) return roots.forEach(root => invalidate(root.store.getState()), frames);
     if ((_state$gl$xr2 = state.gl.xr) != null && _state$gl$xr2.isPresenting || !state.internal.active || state.frameloop === 'never') return; // Increase frames, do not go higher than 60
 
-    state.internal.frames = Math.min(60, state.internal.frames + 1); // If the render-loop isn't active, start it
+    state.internal.frames = Math.min(60, state.internal.frames + frames); // If the render-loop isn't active, start it
 
     if (!running) {
       running = true;
@@ -1566,14 +1566,13 @@ 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 useLoader(Proto, input, extensions, onProgress) {
   // Use suspense to load async assets
   const keys = Array.isArray(input) ? input : [input];
@@ -1626,23 +1625,22 @@ const createRendererInstance = (gl, canvas) => {
   });
 };
 
-const logRecoverableError = typeof reportError === 'function' ? // In modern browsers, reportError will dispatch an error event,
-// emulating an uncaught JavaScript error.
-reportError : error => {
-  // In older browsers and test environments, fallback to console.error.
-  console.error(error);
-};
-
 function createRoot(canvas) {
   // Check against mistaken use of createRoot
   let prevRoot = roots.get(canvas);
   let prevFiber = prevRoot == null ? void 0 : prevRoot.fiber;
   let prevStore = prevRoot == null ? void 0 : prevRoot.store;
-  if (prevRoot) console.warn('R3F.createRoot should only be called once!'); // Create store
+  if (prevRoot) console.warn('R3F.createRoot should only be called once!'); // Report when an error was detected in a previous render
+  // https://github.com/pmndrs/react-three-fiber/pull/2261
+
+  const logRecoverableError = typeof reportError === 'function' ? // In modern browsers, reportError will dispatch an error event,
+  // emulating an uncaught JavaScript error.
+  reportError : // In older browsers and test environments, fallback to console.error.
+  console.error; // Create store
 
   const store = prevStore || createStore(invalidate, advance); // Create renderer
 
-  const fiber = prevFiber || reconciler.createContainer(store, ConcurrentRoot, null, false, null, null, logRecoverableError, null); // Map it
+  const fiber = prevFiber || reconciler.createContainer(store, ConcurrentRoot, null, false, null, '', logRecoverableError, null); // Map it
 
   if (!prevRoot) roots.set(canvas, {
     fiber,

package/dist/{index-5844e9ba.cjs.prod.js → index-4e1c76e5.cjs.prod.js}

@@ -1255,7 +1255,7 @@ const createStore = (invalidate, advance) => {
         connected: false
       },
       xr: null,
-      invalidate: () => invalidate(get()),
+      invalidate: (frames = 1) => invalidate(get(), frames),
       advance: (timestamp, runGlobalEffects) => advance(timestamp, runGlobalEffects, get()),
       legacy: false,
       linear: false,
@@ -1507,13 +1507,13 @@ function createLoop(roots) {
     }
   }
 
-  function invalidate(state) {
+  function invalidate(state, frames = 1) {
     var _state$gl$xr2;
 
-    if (!state) return roots.forEach(root => invalidate(root.store.getState()));
+    if (!state) return roots.forEach(root => invalidate(root.store.getState()), frames);
     if ((_state$gl$xr2 = state.gl.xr) != null && _state$gl$xr2.isPresenting || !state.internal.active || state.frameloop === 'never') return; // Increase frames, do not go higher than 60
 
-    state.internal.frames = Math.min(60, state.internal.frames + 1); // If the render-loop isn't active, start it
+    state.internal.frames = Math.min(60, state.internal.frames + frames); // If the render-loop isn't active, start it
 
     if (!running) {
       running = true;
@@ -1593,14 +1593,13 @@ 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 useLoader(Proto, input, extensions, onProgress) {
   // Use suspense to load async assets
   const keys = Array.isArray(input) ? input : [input];
@@ -1653,23 +1652,22 @@ const createRendererInstance = (gl, canvas) => {
   });
 };
 
-const logRecoverableError = typeof reportError === 'function' ? // In modern browsers, reportError will dispatch an error event,
-// emulating an uncaught JavaScript error.
-reportError : error => {
-  // In older browsers and test environments, fallback to console.error.
-  console.error(error);
-};
-
 function createRoot(canvas) {
   // Check against mistaken use of createRoot
   let prevRoot = roots.get(canvas);
   let prevFiber = prevRoot == null ? void 0 : prevRoot.fiber;
   let prevStore = prevRoot == null ? void 0 : prevRoot.store;
-  if (prevRoot) console.warn('R3F.createRoot should only be called once!'); // Create store
+  if (prevRoot) console.warn('R3F.createRoot should only be called once!'); // Report when an error was detected in a previous render
+  // https://github.com/pmndrs/react-three-fiber/pull/2261
+
+  const logRecoverableError = typeof reportError === 'function' ? // In modern browsers, reportError will dispatch an error event,
+  // emulating an uncaught JavaScript error.
+  reportError : // In older browsers and test environments, fallback to console.error.
+  console.error; // Create store
 
   const store = prevStore || createStore(invalidate, advance); // Create renderer
 
-  const fiber = prevFiber || reconciler.createContainer(store, constants.ConcurrentRoot, null, false, null, null, logRecoverableError, null); // Map it
+  const fiber = prevFiber || reconciler.createContainer(store, constants.ConcurrentRoot, null, false, null, '', logRecoverableError, null); // Map it
 
   if (!prevRoot) roots.set(canvas, {
     fiber,

package/dist/{index-cf0e5bff.cjs.dev.js → index-f3176a33.cjs.dev.js}

@@ -1255,7 +1255,7 @@ const createStore = (invalidate, advance) => {
         connected: false
       },
       xr: null,
-      invalidate: () => invalidate(get()),
+      invalidate: (frames = 1) => invalidate(get(), frames),
       advance: (timestamp, runGlobalEffects) => advance(timestamp, runGlobalEffects, get()),
       legacy: false,
       linear: false,
@@ -1507,13 +1507,13 @@ function createLoop(roots) {
     }
   }
 
-  function invalidate(state) {
+  function invalidate(state, frames = 1) {
     var _state$gl$xr2;
 
-    if (!state) return roots.forEach(root => invalidate(root.store.getState()));
+    if (!state) return roots.forEach(root => invalidate(root.store.getState()), frames);
     if ((_state$gl$xr2 = state.gl.xr) != null && _state$gl$xr2.isPresenting || !state.internal.active || state.frameloop === 'never') return; // Increase frames, do not go higher than 60
 
-    state.internal.frames = Math.min(60, state.internal.frames + 1); // If the render-loop isn't active, start it
+    state.internal.frames = Math.min(60, state.internal.frames + frames); // If the render-loop isn't active, start it
 
     if (!running) {
       running = true;
@@ -1593,14 +1593,13 @@ 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 useLoader(Proto, input, extensions, onProgress) {
   // Use suspense to load async assets
   const keys = Array.isArray(input) ? input : [input];
@@ -1653,23 +1652,22 @@ const createRendererInstance = (gl, canvas) => {
   });
 };
 
-const logRecoverableError = typeof reportError === 'function' ? // In modern browsers, reportError will dispatch an error event,
-// emulating an uncaught JavaScript error.
-reportError : error => {
-  // In older browsers and test environments, fallback to console.error.
-  console.error(error);
-};
-
 function createRoot(canvas) {
   // Check against mistaken use of createRoot
   let prevRoot = roots.get(canvas);
   let prevFiber = prevRoot == null ? void 0 : prevRoot.fiber;
   let prevStore = prevRoot == null ? void 0 : prevRoot.store;
-  if (prevRoot) console.warn('R3F.createRoot should only be called once!'); // Create store
+  if (prevRoot) console.warn('R3F.createRoot should only be called once!'); // Report when an error was detected in a previous render
+  // https://github.com/pmndrs/react-three-fiber/pull/2261
+
+  const logRecoverableError = typeof reportError === 'function' ? // In modern browsers, reportError will dispatch an error event,
+  // emulating an uncaught JavaScript error.
+  reportError : // In older browsers and test environments, fallback to console.error.
+  console.error; // Create store
 
   const store = prevStore || createStore(invalidate, advance); // Create renderer
 
-  const fiber = prevFiber || reconciler.createContainer(store, constants.ConcurrentRoot, null, false, null, null, logRecoverableError, null); // Map it
+  const fiber = prevFiber || reconciler.createContainer(store, constants.ConcurrentRoot, null, false, null, '', logRecoverableError, null); // Map it
 
   if (!prevRoot) roots.set(canvas, {
     fiber,

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

@@ -2,11 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-cf0e5bff.cjs.dev.js');
+var index = require('./index-f3176a33.cjs.dev.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
-var mergeRefs = require('react-merge-refs');
 var useMeasure = require('react-use-measure');
 require('react-reconciler/constants');
 require('zustand');
@@ -36,7 +35,6 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
-var mergeRefs__default = /*#__PURE__*/_interopDefault(mergeRefs);
 var useMeasure__default = /*#__PURE__*/_interopDefault(useMeasure);
 
 const DOM_EVENTS = {
@@ -158,8 +156,9 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
     ...resize
   });
   const canvasRef = React__namespace.useRef(null);
-  const meshRef = React__namespace.useRef(null);
+  const divRef = React__namespace.useRef(null);
   const [canvas, setCanvas] = React__namespace.useState(null);
+  React__namespace.useImperativeHandle(forwardedRef, () => canvasRef.current);
   const handlePointerMissed = index.useMutableCallback(onPointerMissed);
   const [block, setBlock] = React__namespace.useState(false);
   const [error, setError] = React__namespace.useState(false); // Suspend this component if block is a promise (2nd run)
@@ -191,7 +190,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
       // 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);
+        state.events.connect == null ? void 0 : state.events.connect(divRef.current);
         onCreated == null ? void 0 : onCreated(state);
       }
     });
@@ -211,7 +210,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
     if (canvas) return () => index.unmountComponentAtNode(canvas);
   }, [canvas]);
   return /*#__PURE__*/React__namespace.createElement("div", _extends({
-    ref: mergeRefs__default["default"]([meshRef, containerRef]),
+    ref: divRef,
     style: {
       position: 'relative',
       width: '100%',
@@ -219,12 +218,18 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
       overflow: 'hidden',
       ...style
     }
-  }, props), /*#__PURE__*/React__namespace.createElement("canvas", {
-    ref: mergeRefs__default["default"]([canvasRef, forwardedRef]),
+  }, props), /*#__PURE__*/React__namespace.createElement("div", {
+    ref: containerRef,
+    style: {
+      width: '100%',
+      height: '100%'
+    }
+  }, /*#__PURE__*/React__namespace.createElement("canvas", {
+    ref: canvasRef,
     style: {
       display: 'block'
     }
-  }, fallback));
+  }, fallback)));
 });
 
 exports.ReactThreeFiber = index.threeTypes;

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

@@ -2,11 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-5844e9ba.cjs.prod.js');
+var index = require('./index-4e1c76e5.cjs.prod.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
-var mergeRefs = require('react-merge-refs');
 var useMeasure = require('react-use-measure');
 require('react-reconciler/constants');
 require('zustand');
@@ -36,7 +35,6 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
-var mergeRefs__default = /*#__PURE__*/_interopDefault(mergeRefs);
 var useMeasure__default = /*#__PURE__*/_interopDefault(useMeasure);
 
 const DOM_EVENTS = {
@@ -158,8 +156,9 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
     ...resize
   });
   const canvasRef = React__namespace.useRef(null);
-  const meshRef = React__namespace.useRef(null);
+  const divRef = React__namespace.useRef(null);
   const [canvas, setCanvas] = React__namespace.useState(null);
+  React__namespace.useImperativeHandle(forwardedRef, () => canvasRef.current);
   const handlePointerMissed = index.useMutableCallback(onPointerMissed);
   const [block, setBlock] = React__namespace.useState(false);
   const [error, setError] = React__namespace.useState(false); // Suspend this component if block is a promise (2nd run)
@@ -191,7 +190,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
       // 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);
+        state.events.connect == null ? void 0 : state.events.connect(divRef.current);
         onCreated == null ? void 0 : onCreated(state);
       }
     });
@@ -211,7 +210,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
     if (canvas) return () => index.unmountComponentAtNode(canvas);
   }, [canvas]);
   return /*#__PURE__*/React__namespace.createElement("div", _extends({
-    ref: mergeRefs__default["default"]([meshRef, containerRef]),
+    ref: divRef,
     style: {
       position: 'relative',
       width: '100%',
@@ -219,12 +218,18 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
       overflow: 'hidden',
       ...style
     }
-  }, props), /*#__PURE__*/React__namespace.createElement("canvas", {
-    ref: mergeRefs__default["default"]([canvasRef, forwardedRef]),
+  }, props), /*#__PURE__*/React__namespace.createElement("div", {
+    ref: containerRef,
+    style: {
+      width: '100%',
+      height: '100%'
+    }
+  }, /*#__PURE__*/React__namespace.createElement("canvas", {
+    ref: canvasRef,
     style: {
       display: 'block'
     }
-  }, fallback));
+  }, fallback)));
 });
 
 exports.ReactThreeFiber = index.threeTypes;

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

@@ -1,9 +1,8 @@
-import { c as createEvents, e as extend, u as useMutableCallback, a as createRoot, E as ErrorBoundary, B as Block, b as useIsomorphicLayoutEffect, d as unmountComponentAtNode } from './index-c0771a1d.esm.js';
-export { t as ReactThreeFiber, s as _roots, q as act, n as addAfterEffect, m as addEffect, o as addTail, l as advance, i as applyProps, f as context, g as createPortal, a as createRoot, j as dispose, e as extend, p as getRootState, k as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, x as useFrame, y as useGraph, z as useLoader, v as useStore, w as useThree } from './index-c0771a1d.esm.js';
+import { c as createEvents, e as extend, u as useMutableCallback, a as createRoot, E as ErrorBoundary, B as Block, b as useIsomorphicLayoutEffect, d as unmountComponentAtNode } from './index-136ca0b0.esm.js';
+export { t as ReactThreeFiber, s as _roots, q as act, n as addAfterEffect, m as addEffect, o as addTail, l as advance, i as applyProps, f as context, g as createPortal, a as createRoot, j as dispose, e as extend, p as getRootState, k as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, x as useFrame, y as useGraph, z as useLoader, v as useStore, w as useThree } from './index-136ca0b0.esm.js';
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import * as THREE from 'three';
-import mergeRefs from 'react-merge-refs';
 import useMeasure from 'react-use-measure';
 import 'react-reconciler/constants';
 import 'zustand';
@@ -130,8 +129,9 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
     ...resize
   });
   const canvasRef = React.useRef(null);
-  const meshRef = React.useRef(null);
+  const divRef = React.useRef(null);
   const [canvas, setCanvas] = React.useState(null);
+  React.useImperativeHandle(forwardedRef, () => canvasRef.current);
   const handlePointerMissed = useMutableCallback(onPointerMissed);
   const [block, setBlock] = React.useState(false);
   const [error, setError] = React.useState(false); // Suspend this component if block is a promise (2nd run)
@@ -163,7 +163,7 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
       // 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);
+        state.events.connect == null ? void 0 : state.events.connect(divRef.current);
         onCreated == null ? void 0 : onCreated(state);
       }
     });
@@ -183,7 +183,7 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
     if (canvas) return () => unmountComponentAtNode(canvas);
   }, [canvas]);
   return /*#__PURE__*/React.createElement("div", _extends({
-    ref: mergeRefs([meshRef, containerRef]),
+    ref: divRef,
     style: {
       position: 'relative',
       width: '100%',
@@ -191,12 +191,18 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
       overflow: 'hidden',
       ...style
     }
-  }, props), /*#__PURE__*/React.createElement("canvas", {
-    ref: mergeRefs([canvasRef, forwardedRef]),
+  }, props), /*#__PURE__*/React.createElement("div", {
+    ref: containerRef,
+    style: {
+      width: '100%',
+      height: '100%'
+    }
+  }, /*#__PURE__*/React.createElement("canvas", {
+    ref: canvasRef,
     style: {
       display: 'block'
     }
-  }, fallback));
+  }, fallback)));
 });
 
 export { Canvas, createPointerEvents as events };