@react-three/fiber 8.1.0 → 8.2.2

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-c13c7c31.cjs.dev.js → index-2a5b06d3.cjs.dev.js}

@@ -37,12 +37,19 @@ var threeTypes = /*#__PURE__*/Object.freeze({
   __proto__: null
 });
 
-const isOrthographicCamera = def => def && def.isOrthographicCamera; // 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.
+var _window$document, _window$navigator;
+const isOrthographicCamera = def => def && def.isOrthographicCamera;
+/**
+ * An SSR-friendly useLayoutEffect.
+ *
+ * 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 elsewhere.
+ *
+ * @see https://github.com/facebook/react/issues/14927
+ */
 
-const isSSR = typeof window === 'undefined' || !window.navigator || /ServerSideRendering|^Deno\//.test(window.navigator.userAgent);
-const useIsomorphicLayoutEffect = isSSR ? React__namespace.useEffect : React__namespace.useLayoutEffect;
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' && ((_window$document = window.document) != null && _window$document.createElement || ((_window$navigator = window.navigator) == null ? void 0 : _window$navigator.product) === 'ReactNative') ? React__namespace.useLayoutEffect : React__namespace.useEffect;
 function useMutableCallback(fn) {
   const ref = React__namespace.useRef(fn);
   useIsomorphicLayoutEffect(() => void (ref.current = fn), [fn]);
@@ -855,7 +862,7 @@ let extend = objects => void (catalogue = { ...catalogue,
   ...objects
 });
 
-function createRenderer(roots, getEventPriority) {
+function createRenderer(_roots, _getEventPriority) {
   function createInstance(type, {
     args = [],
     attach,
@@ -1063,7 +1070,10 @@ function createRenderer(roots, getEventPriority) {
         }
       }
     });
-  }
+  } // Don't handle text instances, warn on undefined behavior
+
+
+  const handleTextInstance = () => console.warn('Text is not allowed in the R3F tree! This could be stray whitespace or characters.');
 
   const reconciler = Reconciler__default["default"]({
     createInstance,
@@ -1071,19 +1081,26 @@ function createRenderer(roots, getEventPriority) {
     appendChild,
     appendInitialChild: appendChild,
     insertBefore,
-    supportsMicrotask: true,
-    warnsIfNotActing: true,
     supportsMutation: true,
     isPrimaryRenderer: false,
+    supportsPersistence: false,
+    supportsHydration: false,
     noTimeout: -1,
     appendChildToContainer: (container, child) => {
+      if (!child) return;
       const scene = container.getState().scene; // Link current root to the default scene
 
       scene.__r3f.root = container;
       appendChild(scene, child);
     },
-    removeChildFromContainer: (container, child) => removeChild(container.getState().scene, child),
-    insertInContainerBefore: (container, child, beforeChild) => insertBefore(container.getState().scene, child, beforeChild),
+    removeChildFromContainer: (container, child) => {
+      if (!child) return;
+      removeChild(container.getState().scene, child);
+    },
+    insertInContainerBefore: (container, child, beforeChild) => {
+      if (!child || !beforeChild) return;
+      insertBefore(container.getState().scene, child, beforeChild);
+    },
     getRootHostContext: () => null,
     getChildHostContext: parentHostContext => parentHostContext,
 
@@ -1093,10 +1110,10 @@ function createRenderer(roots, getEventPriority) {
       const localState = (_instance$__r3f2 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f2 : {}; // https://github.com/facebook/react/issues/20271
       // Returning true will trigger commitMount
 
-      return !!localState.handlers;
+      return Boolean(localState.handlers);
     },
 
-    prepareUpdate(instance, type, oldProps, newProps) {
+    prepareUpdate(instance, _type, oldProps, newProps) {
       // Create diff-sets
       if (instance.__r3f.primitive && newProps.object && newProps.object !== instance) {
         return [true];
@@ -1113,7 +1130,7 @@ function createRenderer(roots, getEventPriority) {
           ...restOld
         } = oldProps; // Throw if an object or literal was passed for args
 
-        if (!Array.isArray(argsNew)) throw 'The args prop must be an array!'; // If it has new props or arguments, then it needs to be re-instanciated
+        if (!Array.isArray(argsNew)) throw 'The args prop must be an array!'; // If it has new props or arguments, then it needs to be re-instantiated
 
         if (argsNew.some((value, index) => value !== argsOld[index])) return [true]; // Create a diff-set, flag if there are any changes
 
@@ -1124,13 +1141,13 @@ function createRenderer(roots, getEventPriority) {
       }
     },
 
-    commitUpdate(instance, [reconstruct, diff], type, oldProps, newProps, fiber) {
+    commitUpdate(instance, [reconstruct, diff], type, _oldProps, newProps, fiber) {
       // Reconstruct when args or <primitive object={...} have changes
       if (reconstruct) switchInstance(instance, type, newProps, fiber); // Otherwise just overwrite props
       else applyProps$1(instance, diff);
     },
 
-    commitMount(instance, type, props, int) {
+    commitMount(instance, _type, _props, _int) {
       var _instance$__r3f3;
 
       // https://github.com/facebook/react/issues/20271
@@ -1143,13 +1160,11 @@ function createRenderer(roots, getEventPriority) {
     },
 
     getPublicInstance: instance => instance,
-    shouldDeprioritizeSubtree: () => false,
     prepareForCommit: () => null,
     preparePortalMount: container => prepare(container.getState().scene),
     resetAfterCommit: () => {},
     shouldSetTextContent: () => false,
     clearContainer: () => false,
-    detachDeletedInstance: () => {},
 
     hideInstance(instance) {
       var _instance$__r3f4;
@@ -1177,20 +1192,19 @@ function createRenderer(roots, getEventPriority) {
       invalidateInstance(instance);
     },
 
-    createTextInstance: () => {},
-    hideTextInstance: () => {
-      throw new Error('Text is not allowed in the R3F tree.');
-    },
-    unhideTextInstance: () => {},
-    getCurrentEventPriority: () => getEventPriority ? getEventPriority() : constants.DefaultEventPriority,
-    // @ts-ignore
-    now: typeof performance !== 'undefined' && is.fun(performance.now) ? performance.now : is.fun(Date.now) ? Date.now : undefined,
+    createTextInstance: handleTextInstance,
+    hideTextInstance: handleTextInstance,
+    unhideTextInstance: handleTextInstance,
+    // https://github.com/pmndrs/react-three-fiber/pull/2360#discussion_r916356874
     // @ts-ignore
+    getCurrentEventPriority: () => _getEventPriority ? _getEventPriority() : constants.DefaultEventPriority,
+    beforeActiveInstanceBlur: () => {},
+    afterActiveInstanceBlur: () => {},
+    detachDeletedInstance: () => {},
+    now: typeof performance !== 'undefined' && is.fun(performance.now) ? performance.now : is.fun(Date.now) ? Date.now : () => 0,
+    // https://github.com/pmndrs/react-three-fiber/pull/2360#discussion_r920883503
     scheduleTimeout: is.fun(setTimeout) ? setTimeout : undefined,
-    // @ts-ignore
-    cancelTimeout: is.fun(clearTimeout) ? clearTimeout : undefined,
-    setTimeout: is.fun(setTimeout) ? setTimeout : undefined,
-    clearTimeout: is.fun(clearTimeout) ? clearTimeout : undefined
+    cancelTimeout: is.fun(clearTimeout) ? clearTimeout : undefined
   });
   return {
     reconciler,

package/dist/{index-ab905875.cjs.prod.js → index-876a6569.cjs.prod.js}

@@ -37,12 +37,19 @@ var threeTypes = /*#__PURE__*/Object.freeze({
   __proto__: null
 });
 
-const isOrthographicCamera = def => def && def.isOrthographicCamera; // 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.
+var _window$document, _window$navigator;
+const isOrthographicCamera = def => def && def.isOrthographicCamera;
+/**
+ * An SSR-friendly useLayoutEffect.
+ *
+ * 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 elsewhere.
+ *
+ * @see https://github.com/facebook/react/issues/14927
+ */
 
-const isSSR = typeof window === 'undefined' || !window.navigator || /ServerSideRendering|^Deno\//.test(window.navigator.userAgent);
-const useIsomorphicLayoutEffect = isSSR ? React__namespace.useEffect : React__namespace.useLayoutEffect;
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' && ((_window$document = window.document) != null && _window$document.createElement || ((_window$navigator = window.navigator) == null ? void 0 : _window$navigator.product) === 'ReactNative') ? React__namespace.useLayoutEffect : React__namespace.useEffect;
 function useMutableCallback(fn) {
   const ref = React__namespace.useRef(fn);
   useIsomorphicLayoutEffect(() => void (ref.current = fn), [fn]);
@@ -855,7 +862,7 @@ let extend = objects => void (catalogue = { ...catalogue,
   ...objects
 });
 
-function createRenderer(roots, getEventPriority) {
+function createRenderer(_roots, _getEventPriority) {
   function createInstance(type, {
     args = [],
     attach,
@@ -1063,7 +1070,10 @@ function createRenderer(roots, getEventPriority) {
         }
       }
     });
-  }
+  } // Don't handle text instances, warn on undefined behavior
+
+
+  const handleTextInstance = () => console.warn('Text is not allowed in the R3F tree! This could be stray whitespace or characters.');
 
   const reconciler = Reconciler__default["default"]({
     createInstance,
@@ -1071,19 +1081,26 @@ function createRenderer(roots, getEventPriority) {
     appendChild,
     appendInitialChild: appendChild,
     insertBefore,
-    supportsMicrotask: true,
-    warnsIfNotActing: true,
     supportsMutation: true,
     isPrimaryRenderer: false,
+    supportsPersistence: false,
+    supportsHydration: false,
     noTimeout: -1,
     appendChildToContainer: (container, child) => {
+      if (!child) return;
       const scene = container.getState().scene; // Link current root to the default scene
 
       scene.__r3f.root = container;
       appendChild(scene, child);
     },
-    removeChildFromContainer: (container, child) => removeChild(container.getState().scene, child),
-    insertInContainerBefore: (container, child, beforeChild) => insertBefore(container.getState().scene, child, beforeChild),
+    removeChildFromContainer: (container, child) => {
+      if (!child) return;
+      removeChild(container.getState().scene, child);
+    },
+    insertInContainerBefore: (container, child, beforeChild) => {
+      if (!child || !beforeChild) return;
+      insertBefore(container.getState().scene, child, beforeChild);
+    },
     getRootHostContext: () => null,
     getChildHostContext: parentHostContext => parentHostContext,
 
@@ -1093,10 +1110,10 @@ function createRenderer(roots, getEventPriority) {
       const localState = (_instance$__r3f2 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f2 : {}; // https://github.com/facebook/react/issues/20271
       // Returning true will trigger commitMount
 
-      return !!localState.handlers;
+      return Boolean(localState.handlers);
     },
 
-    prepareUpdate(instance, type, oldProps, newProps) {
+    prepareUpdate(instance, _type, oldProps, newProps) {
       // Create diff-sets
       if (instance.__r3f.primitive && newProps.object && newProps.object !== instance) {
         return [true];
@@ -1113,7 +1130,7 @@ function createRenderer(roots, getEventPriority) {
           ...restOld
         } = oldProps; // Throw if an object or literal was passed for args
 
-        if (!Array.isArray(argsNew)) throw 'The args prop must be an array!'; // If it has new props or arguments, then it needs to be re-instanciated
+        if (!Array.isArray(argsNew)) throw 'The args prop must be an array!'; // If it has new props or arguments, then it needs to be re-instantiated
 
         if (argsNew.some((value, index) => value !== argsOld[index])) return [true]; // Create a diff-set, flag if there are any changes
 
@@ -1124,13 +1141,13 @@ function createRenderer(roots, getEventPriority) {
       }
     },
 
-    commitUpdate(instance, [reconstruct, diff], type, oldProps, newProps, fiber) {
+    commitUpdate(instance, [reconstruct, diff], type, _oldProps, newProps, fiber) {
       // Reconstruct when args or <primitive object={...} have changes
       if (reconstruct) switchInstance(instance, type, newProps, fiber); // Otherwise just overwrite props
       else applyProps$1(instance, diff);
     },
 
-    commitMount(instance, type, props, int) {
+    commitMount(instance, _type, _props, _int) {
       var _instance$__r3f3;
 
       // https://github.com/facebook/react/issues/20271
@@ -1143,13 +1160,11 @@ function createRenderer(roots, getEventPriority) {
     },
 
     getPublicInstance: instance => instance,
-    shouldDeprioritizeSubtree: () => false,
     prepareForCommit: () => null,
     preparePortalMount: container => prepare(container.getState().scene),
     resetAfterCommit: () => {},
     shouldSetTextContent: () => false,
     clearContainer: () => false,
-    detachDeletedInstance: () => {},
 
     hideInstance(instance) {
       var _instance$__r3f4;
@@ -1177,20 +1192,19 @@ function createRenderer(roots, getEventPriority) {
       invalidateInstance(instance);
     },
 
-    createTextInstance: () => {},
-    hideTextInstance: () => {
-      throw new Error('Text is not allowed in the R3F tree.');
-    },
-    unhideTextInstance: () => {},
-    getCurrentEventPriority: () => getEventPriority ? getEventPriority() : constants.DefaultEventPriority,
-    // @ts-ignore
-    now: typeof performance !== 'undefined' && is.fun(performance.now) ? performance.now : is.fun(Date.now) ? Date.now : undefined,
+    createTextInstance: handleTextInstance,
+    hideTextInstance: handleTextInstance,
+    unhideTextInstance: handleTextInstance,
+    // https://github.com/pmndrs/react-three-fiber/pull/2360#discussion_r916356874
     // @ts-ignore
+    getCurrentEventPriority: () => _getEventPriority ? _getEventPriority() : constants.DefaultEventPriority,
+    beforeActiveInstanceBlur: () => {},
+    afterActiveInstanceBlur: () => {},
+    detachDeletedInstance: () => {},
+    now: typeof performance !== 'undefined' && is.fun(performance.now) ? performance.now : is.fun(Date.now) ? Date.now : () => 0,
+    // https://github.com/pmndrs/react-three-fiber/pull/2360#discussion_r920883503
     scheduleTimeout: is.fun(setTimeout) ? setTimeout : undefined,
-    // @ts-ignore
-    cancelTimeout: is.fun(clearTimeout) ? clearTimeout : undefined,
-    setTimeout: is.fun(setTimeout) ? setTimeout : undefined,
-    clearTimeout: is.fun(clearTimeout) ? clearTimeout : undefined
+    cancelTimeout: is.fun(clearTimeout) ? clearTimeout : undefined
   });
   return {
     reconciler,

package/dist/{index-9b4af973.esm.js → index-af244448.esm.js}

@@ -10,12 +10,19 @@ var threeTypes = /*#__PURE__*/Object.freeze({
   __proto__: null
 });
 
-const isOrthographicCamera = def => def && def.isOrthographicCamera; // 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.
+var _window$document, _window$navigator;
+const isOrthographicCamera = def => def && def.isOrthographicCamera;
+/**
+ * An SSR-friendly useLayoutEffect.
+ *
+ * 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 elsewhere.
+ *
+ * @see https://github.com/facebook/react/issues/14927
+ */
 
-const isSSR = typeof window === 'undefined' || !window.navigator || /ServerSideRendering|^Deno\//.test(window.navigator.userAgent);
-const useIsomorphicLayoutEffect = isSSR ? React.useEffect : React.useLayoutEffect;
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' && ((_window$document = window.document) != null && _window$document.createElement || ((_window$navigator = window.navigator) == null ? void 0 : _window$navigator.product) === 'ReactNative') ? React.useLayoutEffect : React.useEffect;
 function useMutableCallback(fn) {
   const ref = React.useRef(fn);
   useIsomorphicLayoutEffect(() => void (ref.current = fn), [fn]);
@@ -828,7 +835,7 @@ let extend = objects => void (catalogue = { ...catalogue,
   ...objects
 });
 
-function createRenderer(roots, getEventPriority) {
+function createRenderer(_roots, _getEventPriority) {
   function createInstance(type, {
     args = [],
     attach,
@@ -1036,7 +1043,10 @@ function createRenderer(roots, getEventPriority) {
         }
       }
     });
-  }
+  } // Don't handle text instances, warn on undefined behavior
+
+
+  const handleTextInstance = () => console.warn('Text is not allowed in the R3F tree! This could be stray whitespace or characters.');
 
   const reconciler = Reconciler({
     createInstance,
@@ -1044,19 +1054,26 @@ function createRenderer(roots, getEventPriority) {
     appendChild,
     appendInitialChild: appendChild,
     insertBefore,
-    supportsMicrotask: true,
-    warnsIfNotActing: true,
     supportsMutation: true,
     isPrimaryRenderer: false,
+    supportsPersistence: false,
+    supportsHydration: false,
     noTimeout: -1,
     appendChildToContainer: (container, child) => {
+      if (!child) return;
       const scene = container.getState().scene; // Link current root to the default scene
 
       scene.__r3f.root = container;
       appendChild(scene, child);
     },
-    removeChildFromContainer: (container, child) => removeChild(container.getState().scene, child),
-    insertInContainerBefore: (container, child, beforeChild) => insertBefore(container.getState().scene, child, beforeChild),
+    removeChildFromContainer: (container, child) => {
+      if (!child) return;
+      removeChild(container.getState().scene, child);
+    },
+    insertInContainerBefore: (container, child, beforeChild) => {
+      if (!child || !beforeChild) return;
+      insertBefore(container.getState().scene, child, beforeChild);
+    },
     getRootHostContext: () => null,
     getChildHostContext: parentHostContext => parentHostContext,
 
@@ -1066,10 +1083,10 @@ function createRenderer(roots, getEventPriority) {
       const localState = (_instance$__r3f2 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f2 : {}; // https://github.com/facebook/react/issues/20271
       // Returning true will trigger commitMount
 
-      return !!localState.handlers;
+      return Boolean(localState.handlers);
     },
 
-    prepareUpdate(instance, type, oldProps, newProps) {
+    prepareUpdate(instance, _type, oldProps, newProps) {
       // Create diff-sets
       if (instance.__r3f.primitive && newProps.object && newProps.object !== instance) {
         return [true];
@@ -1086,7 +1103,7 @@ function createRenderer(roots, getEventPriority) {
           ...restOld
         } = oldProps; // Throw if an object or literal was passed for args
 
-        if (!Array.isArray(argsNew)) throw 'The args prop must be an array!'; // If it has new props or arguments, then it needs to be re-instanciated
+        if (!Array.isArray(argsNew)) throw 'The args prop must be an array!'; // If it has new props or arguments, then it needs to be re-instantiated
 
         if (argsNew.some((value, index) => value !== argsOld[index])) return [true]; // Create a diff-set, flag if there are any changes
 
@@ -1097,13 +1114,13 @@ function createRenderer(roots, getEventPriority) {
       }
     },
 
-    commitUpdate(instance, [reconstruct, diff], type, oldProps, newProps, fiber) {
+    commitUpdate(instance, [reconstruct, diff], type, _oldProps, newProps, fiber) {
       // Reconstruct when args or <primitive object={...} have changes
       if (reconstruct) switchInstance(instance, type, newProps, fiber); // Otherwise just overwrite props
       else applyProps$1(instance, diff);
     },
 
-    commitMount(instance, type, props, int) {
+    commitMount(instance, _type, _props, _int) {
       var _instance$__r3f3;
 
       // https://github.com/facebook/react/issues/20271
@@ -1116,13 +1133,11 @@ function createRenderer(roots, getEventPriority) {
     },
 
     getPublicInstance: instance => instance,
-    shouldDeprioritizeSubtree: () => false,
     prepareForCommit: () => null,
     preparePortalMount: container => prepare(container.getState().scene),
     resetAfterCommit: () => {},
     shouldSetTextContent: () => false,
     clearContainer: () => false,
-    detachDeletedInstance: () => {},
 
     hideInstance(instance) {
       var _instance$__r3f4;
@@ -1150,20 +1165,19 @@ function createRenderer(roots, getEventPriority) {
       invalidateInstance(instance);
     },
 
-    createTextInstance: () => {},
-    hideTextInstance: () => {
-      throw new Error('Text is not allowed in the R3F tree.');
-    },
-    unhideTextInstance: () => {},
-    getCurrentEventPriority: () => getEventPriority ? getEventPriority() : DefaultEventPriority,
-    // @ts-ignore
-    now: typeof performance !== 'undefined' && is.fun(performance.now) ? performance.now : is.fun(Date.now) ? Date.now : undefined,
+    createTextInstance: handleTextInstance,
+    hideTextInstance: handleTextInstance,
+    unhideTextInstance: handleTextInstance,
+    // https://github.com/pmndrs/react-three-fiber/pull/2360#discussion_r916356874
     // @ts-ignore
+    getCurrentEventPriority: () => _getEventPriority ? _getEventPriority() : DefaultEventPriority,
+    beforeActiveInstanceBlur: () => {},
+    afterActiveInstanceBlur: () => {},
+    detachDeletedInstance: () => {},
+    now: typeof performance !== 'undefined' && is.fun(performance.now) ? performance.now : is.fun(Date.now) ? Date.now : () => 0,
+    // https://github.com/pmndrs/react-three-fiber/pull/2360#discussion_r920883503
     scheduleTimeout: is.fun(setTimeout) ? setTimeout : undefined,
-    // @ts-ignore
-    cancelTimeout: is.fun(clearTimeout) ? clearTimeout : undefined,
-    setTimeout: is.fun(setTimeout) ? setTimeout : undefined,
-    clearTimeout: is.fun(clearTimeout) ? clearTimeout : undefined
+    cancelTimeout: is.fun(clearTimeout) ? clearTimeout : undefined
   });
   return {
     reconciler,

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-c13c7c31.cjs.dev.js');
+var index = require('./index-2a5b06d3.cjs.dev.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-ab905875.cjs.prod.js');
+var index = require('./index-876a6569.cjs.prod.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');

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

@@ -1,5 +1,5 @@
-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-9b4af973.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, c as createEvents, 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-9b4af973.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-af244448.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, c as createEvents, 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-af244448.esm.js';
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import * as THREE from 'three';

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('../../dist/index-c13c7c31.cjs.dev.js');
+var index = require('../../dist/index-2a5b06d3.cjs.dev.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('../../dist/index-ab905875.cjs.prod.js');
+var index = require('../../dist/index-876a6569.cjs.prod.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');

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

@@ -1,5 +1,5 @@
-import { c as createEvents, e as extend, u as useMutableCallback, a as createRoot, E as ErrorBoundary, B as Block, d as unmountComponentAtNode } from '../../dist/index-9b4af973.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 '../../dist/index-9b4af973.esm.js';
+import { c as createEvents, e as extend, u as useMutableCallback, a as createRoot, E as ErrorBoundary, B as Block, d as unmountComponentAtNode } from '../../dist/index-af244448.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 '../../dist/index-af244448.esm.js';
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import * as THREE from 'three';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/fiber",
-  "version": "8.1.0",
+  "version": "8.2.2",
   "description": "A React renderer for Threejs",
   "keywords": [
     "react",