@react-three/fiber 8.2.0 → 8.2.3

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @react-three/fiber
 
+## 8.2.3
+
+### Patch Changes
+
+- b8d2eab: fix: improve useLoader signature, initial size on createRoot
+
+## 8.2.2
+
+### Patch Changes
+
+- acd6f04: fix: warn on stray text
+
+## 8.2.1
+
+### Patch Changes
+
+- 25e35a1: fix: prefer useLayoutEffect in react-native
+
 ## 8.2.0
 
 ### Minor Changes

package/dist/declarations/src/core/hooks.d.ts

@@ -3,6 +3,7 @@ import { StateSelector, EqualityChecker } from 'zustand';
 import { GLTF } from 'three/examples/jsm/loaders/GLTFLoader';
 import { RootState, RenderCallback } from './store';
 import { ObjectMap } from './utils';
+import { LoadingManager } from 'three';
 export interface Loader<T> extends THREE.Loader {
     load(url: string, onLoad?: (result: T) => void, onProgress?: (event: ProgressEvent) => void, onError?: (event: ErrorEvent) => void): unknown;
 }
@@ -14,7 +15,7 @@ export declare function useStore(): import("zustand").UseBoundStore<RootState, i
 export declare function useThree<T = RootState>(selector?: StateSelector<RootState, T>, equalityFn?: EqualityChecker<T>): T;
 export declare function useFrame(callback: RenderCallback, renderPriority?: number): null;
 export declare function useGraph(object: THREE.Object3D): ObjectMap;
-export declare function useLoader<T, U extends string | string[]>(Proto: new () => LoaderResult<T>, input: U, extensions?: Extensions, onProgress?: (event: ProgressEvent<EventTarget>) => void): U extends any[] ? BranchingReturn<T, GLTF, GLTF & ObjectMap>[] : BranchingReturn<T, GLTF, GLTF & ObjectMap>;
+export declare function useLoader<T, U extends string | string[]>(Proto: new (manager?: LoadingManager) => LoaderResult<T>, input: U, extensions?: Extensions, onProgress?: (event: ProgressEvent<EventTarget>) => void): U extends any[] ? BranchingReturn<T, GLTF, GLTF & ObjectMap>[] : BranchingReturn<T, GLTF, GLTF & ObjectMap>;
 export declare namespace useLoader {
     var preload: <T, U extends string | string[]>(Proto: new () => LoaderResult<T>, input: U, extensions?: Extensions | undefined) => undefined;
     var clear: <T, U extends string | string[]>(Proto: new () => LoaderResult<T>, input: U) => void;

package/dist/declarations/src/core/index.d.ts

@@ -10,7 +10,7 @@ import { EventManager, ComputeFunction } from './events';
 import { dispose, getRootState, Camera } from './utils';
 declare const roots: Map<Element, Root>;
 declare const invalidate: (state?: RootState | undefined, frames?: number) => void, advance: (timestamp: number, runGlobalEffects?: boolean, state?: RootState | undefined, frame?: THREE.XRFrame | undefined) => void;
-declare const reconciler: import("react-reconciler").Reconciler<UseBoundStore<RootState, import("zustand").StoreApi<RootState>>, import("./renderer").Instance, never, import("./renderer").Instance, import("./renderer").Instance>, applyProps: typeof import("./utils").applyProps;
+declare const reconciler: import("react-reconciler").Reconciler<UseBoundStore<RootState, import("zustand").StoreApi<RootState>>, import("./renderer").Instance, void, import("./renderer").Instance, import("./renderer").Instance>, applyProps: typeof import("./utils").applyProps;
 declare type Properties<T> = Pick<T, {
     [K in keyof T]: T[K] extends (_: any) => any ? never : K;
 }[keyof T]>;

package/dist/declarations/src/core/renderer.d.ts

@@ -45,7 +45,7 @@ export declare type InstanceProps = {
 };
 declare let extend: (objects: object) => void;
 declare function createRenderer<TCanvas>(_roots: Map<TCanvas, Root>, _getEventPriority?: () => any): {
-    reconciler: Reconciler.Reconciler<UseBoundStore<RootState, import("zustand").StoreApi<RootState>>, Instance, never, Instance, Instance>;
+    reconciler: Reconciler.Reconciler<UseBoundStore<RootState, import("zustand").StoreApi<RootState>>, Instance, void, Instance, Instance>;
     applyProps: typeof applyProps;
 };
 export { prepare, createRenderer, extend };

package/dist/declarations/src/core/utils.d.ts

@@ -4,7 +4,7 @@ import { AttachType, Instance, InstanceProps, LocalState } from './renderer';
 import { Dpr, RootState, Size } from './store';
 export declare type Camera = THREE.OrthographicCamera | THREE.PerspectiveCamera;
 export declare const isOrthographicCamera: (def: Camera) => def is THREE.OrthographicCamera;
-export declare const useIsomorphicLayoutEffect: typeof React.useEffect;
+export declare const useIsomorphicLayoutEffect: typeof React.useLayoutEffect;
 export declare function useMutableCallback<T>(fn: T): React.MutableRefObject<T>;
 export declare type SetBlock = false | Promise<null> | null;
 export declare type UnblockProps = {

package/dist/{index-ca47b633.cjs.prod.js → index-1be7d4d7.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]);
@@ -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,
@@ -1077,13 +1087,20 @@ function createRenderer(_roots, _getEventPriority) {
     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,
 
@@ -1175,13 +1192,9 @@ function createRenderer(_roots, _getEventPriority) {
       invalidateInstance(instance);
     },
 
-    createTextInstance: () => {
-      throw new Error('Text is not allowed in the R3F tree.');
-    },
-    hideTextInstance: () => {
-      throw new Error('Text is not allowed in the R3F tree.');
-    },
-    unhideTextInstance: () => {},
+    createTextInstance: handleTextInstance,
+    hideTextInstance: handleTextInstance,
+    unhideTextInstance: handleTextInstance,
     // https://github.com/pmndrs/react-three-fiber/pull/2360#discussion_r916356874
     // @ts-ignore
     getCurrentEventPriority: () => _getEventPriority ? _getEventPriority() : constants.DefaultEventPriority,
@@ -1687,11 +1700,43 @@ const createRendererInstance = (gl, canvas) => {
   });
 };
 
+function isCanvas(maybeCanvas) {
+  return maybeCanvas instanceof HTMLCanvasElement;
+}
+
+function computeInitialSize(canvas, defaultSize) {
+  if (defaultSize) {
+    return defaultSize;
+  }
+
+  if (isCanvas(canvas) && canvas.parentElement) {
+    const {
+      width,
+      height,
+      top,
+      left
+    } = canvas.parentElement.getBoundingClientRect();
+    return {
+      width,
+      height,
+      top,
+      left
+    };
+  }
+
+  return {
+    width: 0,
+    height: 0,
+    top: 0,
+    left: 0
+  };
+}
+
 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;
+  const prevRoot = roots.get(canvas);
+  const prevFiber = prevRoot == null ? void 0 : prevRoot.fiber;
+  const prevStore = prevRoot == null ? void 0 : prevRoot.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
 
@@ -1715,7 +1760,7 @@ function createRoot(canvas) {
     configure(props = {}) {
       let {
         gl: glConfig,
-        size,
+        size: propsSize,
         events,
         onCreated: onCreatedCallback,
         shadows = false,
@@ -1850,17 +1895,7 @@ function createRoot(canvas) {
 
       if (dpr && state.viewport.dpr !== calculateDpr(dpr)) state.setDpr(dpr); // Check size, allow it to take on container bounds initially
 
-      size = size || (canvas.parentElement ? {
-        width: canvas.parentElement.clientWidth,
-        height: canvas.parentElement.clientHeight,
-        top: canvas.parentElement.clientTop,
-        left: canvas.parentElement.clientLeft
-      } : {
-        width: 0,
-        height: 0,
-        top: 0,
-        left: 0
-      });
+      const size = computeInitialSize(canvas, propsSize);
 
       if (!is.equ(size, state.size, shallowLoose)) {
         state.setSize(size.width, size.height, size.updateStyle, size.top, size.left);

package/dist/{index-6279214a.esm.js → index-201bf0bf.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]);
@@ -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,
@@ -1050,13 +1060,20 @@ function createRenderer(_roots, _getEventPriority) {
     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,
 
@@ -1148,13 +1165,9 @@ function createRenderer(_roots, _getEventPriority) {
       invalidateInstance(instance);
     },
 
-    createTextInstance: () => {
-      throw new Error('Text is not allowed in the R3F tree.');
-    },
-    hideTextInstance: () => {
-      throw new Error('Text is not allowed in the R3F tree.');
-    },
-    unhideTextInstance: () => {},
+    createTextInstance: handleTextInstance,
+    hideTextInstance: handleTextInstance,
+    unhideTextInstance: handleTextInstance,
     // https://github.com/pmndrs/react-three-fiber/pull/2360#discussion_r916356874
     // @ts-ignore
     getCurrentEventPriority: () => _getEventPriority ? _getEventPriority() : DefaultEventPriority,
@@ -1660,11 +1673,43 @@ const createRendererInstance = (gl, canvas) => {
   });
 };
 
+function isCanvas(maybeCanvas) {
+  return maybeCanvas instanceof HTMLCanvasElement;
+}
+
+function computeInitialSize(canvas, defaultSize) {
+  if (defaultSize) {
+    return defaultSize;
+  }
+
+  if (isCanvas(canvas) && canvas.parentElement) {
+    const {
+      width,
+      height,
+      top,
+      left
+    } = canvas.parentElement.getBoundingClientRect();
+    return {
+      width,
+      height,
+      top,
+      left
+    };
+  }
+
+  return {
+    width: 0,
+    height: 0,
+    top: 0,
+    left: 0
+  };
+}
+
 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;
+  const prevRoot = roots.get(canvas);
+  const prevFiber = prevRoot == null ? void 0 : prevRoot.fiber;
+  const prevStore = prevRoot == null ? void 0 : prevRoot.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
 
@@ -1688,7 +1733,7 @@ function createRoot(canvas) {
     configure(props = {}) {
       let {
         gl: glConfig,
-        size,
+        size: propsSize,
         events,
         onCreated: onCreatedCallback,
         shadows = false,
@@ -1823,17 +1868,7 @@ function createRoot(canvas) {
 
       if (dpr && state.viewport.dpr !== calculateDpr(dpr)) state.setDpr(dpr); // Check size, allow it to take on container bounds initially
 
-      size = size || (canvas.parentElement ? {
-        width: canvas.parentElement.clientWidth,
-        height: canvas.parentElement.clientHeight,
-        top: canvas.parentElement.clientTop,
-        left: canvas.parentElement.clientLeft
-      } : {
-        width: 0,
-        height: 0,
-        top: 0,
-        left: 0
-      });
+      const size = computeInitialSize(canvas, propsSize);
 
       if (!is.equ(size, state.size, shallowLoose)) {
         state.setSize(size.width, size.height, size.updateStyle, size.top, size.left);

package/dist/{index-0499a96a.cjs.dev.js → index-942a305b.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]);
@@ -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,
@@ -1077,13 +1087,20 @@ function createRenderer(_roots, _getEventPriority) {
     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,
 
@@ -1175,13 +1192,9 @@ function createRenderer(_roots, _getEventPriority) {
       invalidateInstance(instance);
     },
 
-    createTextInstance: () => {
-      throw new Error('Text is not allowed in the R3F tree.');
-    },
-    hideTextInstance: () => {
-      throw new Error('Text is not allowed in the R3F tree.');
-    },
-    unhideTextInstance: () => {},
+    createTextInstance: handleTextInstance,
+    hideTextInstance: handleTextInstance,
+    unhideTextInstance: handleTextInstance,
     // https://github.com/pmndrs/react-three-fiber/pull/2360#discussion_r916356874
     // @ts-ignore
     getCurrentEventPriority: () => _getEventPriority ? _getEventPriority() : constants.DefaultEventPriority,
@@ -1687,11 +1700,43 @@ const createRendererInstance = (gl, canvas) => {
   });
 };
 
+function isCanvas(maybeCanvas) {
+  return maybeCanvas instanceof HTMLCanvasElement;
+}
+
+function computeInitialSize(canvas, defaultSize) {
+  if (defaultSize) {
+    return defaultSize;
+  }
+
+  if (isCanvas(canvas) && canvas.parentElement) {
+    const {
+      width,
+      height,
+      top,
+      left
+    } = canvas.parentElement.getBoundingClientRect();
+    return {
+      width,
+      height,
+      top,
+      left
+    };
+  }
+
+  return {
+    width: 0,
+    height: 0,
+    top: 0,
+    left: 0
+  };
+}
+
 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;
+  const prevRoot = roots.get(canvas);
+  const prevFiber = prevRoot == null ? void 0 : prevRoot.fiber;
+  const prevStore = prevRoot == null ? void 0 : prevRoot.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
 
@@ -1715,7 +1760,7 @@ function createRoot(canvas) {
     configure(props = {}) {
       let {
         gl: glConfig,
-        size,
+        size: propsSize,
         events,
         onCreated: onCreatedCallback,
         shadows = false,
@@ -1850,17 +1895,7 @@ function createRoot(canvas) {
 
       if (dpr && state.viewport.dpr !== calculateDpr(dpr)) state.setDpr(dpr); // Check size, allow it to take on container bounds initially
 
-      size = size || (canvas.parentElement ? {
-        width: canvas.parentElement.clientWidth,
-        height: canvas.parentElement.clientHeight,
-        top: canvas.parentElement.clientTop,
-        left: canvas.parentElement.clientLeft
-      } : {
-        width: 0,
-        height: 0,
-        top: 0,
-        left: 0
-      });
+      const size = computeInitialSize(canvas, propsSize);
 
       if (!is.equ(size, state.size, shallowLoose)) {
         state.setSize(size.width, size.height, size.updateStyle, size.top, size.left);

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-0499a96a.cjs.dev.js');
+var index = require('./index-942a305b.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-ca47b633.cjs.prod.js');
+var index = require('./index-1be7d4d7.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-6279214a.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-6279214a.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-201bf0bf.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-201bf0bf.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-0499a96a.cjs.dev.js');
+var index = require('../../dist/index-942a305b.cjs.dev.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
@@ -39,6 +39,8 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
 var Pressability__default = /*#__PURE__*/_interopDefault(Pressability);
 
+/* eslint-enable import/default, import/no-named-as-default, import/no-named-as-default-member */
+
 const EVENTS = {
   PRESS: 'onPress',
   PRESSIN: 'onPressIn',

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-ca47b633.cjs.prod.js');
+var index = require('../../dist/index-1be7d4d7.cjs.prod.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
@@ -39,6 +39,8 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
 var Pressability__default = /*#__PURE__*/_interopDefault(Pressability);
 
+/* eslint-enable import/default, import/no-named-as-default, import/no-named-as-default-member */
+
 const EVENTS = {
   PRESS: 'onPress',
   PRESSIN: 'onPressIn',

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-6279214a.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-6279214a.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-201bf0bf.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-201bf0bf.esm.js';
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import * as THREE from 'three';
@@ -12,6 +12,8 @@ import 'react-reconciler';
 import 'scheduler';
 import 'suspend-react';
 
+/* eslint-enable import/default, import/no-named-as-default, import/no-named-as-default-member */
+
 const EVENTS = {
   PRESS: 'onPress',
   PRESSIN: 'onPressIn',

package/package.json

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