@react-three/fiber 8.0.11 → 8.0.14

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @react-three/fiber
 
+## 8.0.14
+
+### Patch Changes
+
+- 5559a119: Add support for recoverable errors
+
+## 8.0.13
+
+### Patch Changes
+
+- 9d77d8e2: fix: detach attribute removal
+
+## 8.0.12
+
+### Patch Changes
+
+- 3d10413f: fix portal layers
+
 ## 8.0.11
 
 ### Patch Changes

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

@@ -62,7 +62,7 @@ export interface PointerCaptureTarget {
     intersection: Intersection;
     target: Element;
 }
-export declare function getEventPriority(): any;
+export declare function getEventPriority(): 1 | 4 | 16;
 export declare function removeInteractivity(store: UseBoundStore<RootState>, object: THREE.Object3D): void;
 export declare function createEvents(store: UseBoundStore<RootState>): {
     handlePointer: (name: string) => (event: DomEvent) => void;

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

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { GetState, SetState, StoreApi, UseBoundStore } from 'zustand';
 import { DomEvent, EventManager, PointerCaptureTarget, ThreeEvent } from './events';
 import { Camera } from './utils';
-export declare const privateKeys: readonly ["set", "get", "setSize", "setFrameloop", "setDpr", "events", "invalidate", "advance", "performance", "internal", "size", "viewport"];
+export declare const privateKeys: readonly ["set", "get", "setSize", "setFrameloop", "setDpr", "events", "invalidate", "advance", "size", "viewport"];
 export declare type PrivateKeys = typeof privateKeys[number];
 export interface Intersection extends THREE.Intersection {
     eventObject: THREE.Object3D;

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

@@ -14,6 +14,7 @@ export declare type UnblockProps = {
 export declare function Block({ set }: Omit<UnblockProps, 'children'>): null;
 export declare class ErrorBoundary extends React.Component<{
     set: React.Dispatch<any>;
+    children: React.ReactNode;
 }, {
     error: boolean;
 }> {

package/dist/declarations/src/three-types.d.ts

@@ -102,6 +102,7 @@ export declare type ConeGeometryProps = BufferGeometryNode<THREE.ConeGeometry, t
 export declare type CylinderGeometryProps = BufferGeometryNode<THREE.CylinderGeometry, typeof THREE.CylinderGeometry>;
 export declare type CircleGeometryProps = BufferGeometryNode<THREE.CircleGeometry, typeof THREE.CircleGeometry>;
 export declare type BoxGeometryProps = BufferGeometryNode<THREE.BoxGeometry, typeof THREE.BoxGeometry>;
+export declare type CapsuleGeometryProps = BufferGeometryNode<THREE.CapsuleBufferGeometry, typeof THREE.CapsuleBufferGeometry>;
 export declare type MaterialProps = MaterialNode<THREE.Material, [THREE.MaterialParameters]>;
 export declare type ShadowMaterialProps = MaterialNode<THREE.ShadowMaterial, [THREE.ShaderMaterialParameters]>;
 export declare type SpriteMaterialProps = MaterialNode<THREE.SpriteMaterial, [THREE.SpriteMaterialParameters]>;
@@ -245,6 +246,7 @@ declare global {
             cylinderGeometry: CylinderGeometryProps;
             circleGeometry: CircleGeometryProps;
             boxGeometry: BoxGeometryProps;
+            capsuleGeometry: CapsuleGeometryProps;
             material: MaterialProps;
             shadowMaterial: ShadowMaterialProps;
             spriteMaterial: SpriteMaterialProps;

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

@@ -19,14 +19,12 @@ function _interopNamespace(e) {
         var d = Object.getOwnPropertyDescriptor(e, k);
         Object.defineProperty(n, k, d.get ? d : {
           enumerable: true,
-          get: function () {
-            return e[k];
-          }
+          get: function () { return e[k]; }
         });
       }
     });
   }
-  n['default'] = e;
+  n["default"] = e;
   return Object.freeze(n);
 }
 
@@ -230,7 +228,10 @@ function detach(parent, child, type) {
       target,
       key
     } = resolve(parent, type);
-    target[key] = child.__r3f.previousAttach;
+    const previous = child.__r3f.previousAttach; // When the previous value was undefined, it means the value was never set to begin with
+
+    if (previous === undefined) delete target[key]; // Otherwise set the previous value
+    else target[key] = previous;
   } else (_child$__r3f = child.__r3f) == null ? void 0 : _child$__r3f.previousAttach == null ? void 0 : _child$__r3f.previousAttach(parent, child);
 
   (_child$__r3f2 = child.__r3f) == null ? true : delete _child$__r3f2.previousAttach;
@@ -344,35 +345,35 @@ function applyProps$1(instance, data) {
       localState.eventCount = Object.keys(localState.handlers).length;
     } // Special treatment for objects with support for set/copy, and layers
     else if (targetProp && targetProp.set && (targetProp.copy || targetProp instanceof THREE__namespace.Layers)) {
-        // If value is an array
-        if (Array.isArray(value)) {
-          if (targetProp.fromArray) targetProp.fromArray(value);else targetProp.set(...value);
-        } // Test again target.copy(class) next ...
-        else if (targetProp.copy && value && value.constructor && targetProp.constructor.name === value.constructor.name) {
-            targetProp.copy(value);
-          } // If nothing else fits, just set the single value, ignore undefined
-          // https://github.com/pmndrs/react-three-fiber/issues/274
-          else if (value !== undefined) {
-              const isColor = targetProp instanceof THREE__namespace.Color; // Allow setting array scalars
-
-              if (!isColor && targetProp.setScalar) targetProp.setScalar(value); // Layers have no copy function, we must therefore copy the mask property
-              else if (targetProp instanceof THREE__namespace.Layers && value instanceof THREE__namespace.Layers) targetProp.mask = value.mask; // Otherwise just set ...
-                else targetProp.set(value); // For versions of three which don't support THREE.ColorManagement,
-              // Auto-convert sRGB colors
-              // https://github.com/pmndrs/react-three-fiber/issues/344
-
-              const supportsColorManagement = THREE__namespace.ColorManagement;
-              if (!supportsColorManagement && !rootState.linear && isColor) targetProp.convertSRGBToLinear();
-            } // Else, just overwrite the value
-
-      } else {
-        currentInstance[key] = value; // Auto-convert sRGB textures, for now ...
+      // If value is an array
+      if (Array.isArray(value)) {
+        if (targetProp.fromArray) targetProp.fromArray(value);else targetProp.set(...value);
+      } // Test again target.copy(class) next ...
+      else if (targetProp.copy && value && value.constructor && targetProp.constructor.name === value.constructor.name) {
+        targetProp.copy(value);
+      } // If nothing else fits, just set the single value, ignore undefined
+      // https://github.com/pmndrs/react-three-fiber/issues/274
+      else if (value !== undefined) {
+        const isColor = targetProp instanceof THREE__namespace.Color; // Allow setting array scalars
+
+        if (!isColor && targetProp.setScalar) targetProp.setScalar(value); // Layers have no copy function, we must therefore copy the mask property
+        else if (targetProp instanceof THREE__namespace.Layers && value instanceof THREE__namespace.Layers) targetProp.mask = value.mask; // Otherwise just set ...
+        else targetProp.set(value); // For versions of three which don't support THREE.ColorManagement,
+        // Auto-convert sRGB colors
         // https://github.com/pmndrs/react-three-fiber/issues/344
 
-        if (!rootState.linear && currentInstance[key] instanceof THREE__namespace.Texture) {
-          currentInstance[key].encoding = THREE__namespace.sRGBEncoding;
-        }
+        const supportsColorManagement = THREE__namespace.ColorManagement;
+        if (!supportsColorManagement && !rootState.linear && isColor) targetProp.convertSRGBToLinear();
+      } // Else, just overwrite the value
+
+    } else {
+      currentInstance[key] = value; // Auto-convert sRGB textures, for now ...
+      // https://github.com/pmndrs/react-three-fiber/issues/344
+
+      if (!rootState.linear && currentInstance[key] instanceof THREE__namespace.Texture) {
+        currentInstance[key].encoding = THREE__namespace.sRGBEncoding;
       }
+    }
 
     invalidateInstance(instance);
   });
@@ -872,7 +873,7 @@ function createRenderer(roots, getEventPriority) {
       const target = catalogue[name];
 
       if (!target) {
-        throw `${name} is not part of the THREE namespace! Did you forget to extend? See: https://github.com/pmndrs/react-three-fiber/blob/master/markdown/api.md#using-3rd-party-objects-declaratively`;
+        throw `${name} is not part of the THREE namespace! Did you forget to extend? See: https://docs.pmnd.rs/react-three-fiber/api/objects#using-3rd-party-objects-declaratively`;
       } // Throw if an object or literal was passed for args
 
 
@@ -1056,7 +1057,7 @@ function createRenderer(roots, getEventPriority) {
     });
   }
 
-  const reconciler = Reconciler__default['default']({
+  const reconciler = Reconciler__default["default"]({
     createInstance,
     removeChild,
     appendChild,
@@ -1141,7 +1142,6 @@ function createRenderer(roots, getEventPriority) {
     shouldSetTextContent: () => false,
     clearContainer: () => false,
     detachDeletedInstance: () => {},
-    createTextInstance: () => {},
 
     hideInstance(instance) {
       var _instance$__r3f5;
@@ -1169,10 +1169,11 @@ function createRenderer(roots, getEventPriority) {
       invalidateInstance(instance);
     },
 
+    createTextInstance: () => {},
     hideTextInstance: () => {
       throw new Error('Text is not allowed in the R3F tree.');
     },
-    // prettier-ignore
+    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,
@@ -1189,12 +1190,12 @@ function createRenderer(roots, getEventPriority) {
   };
 }
 
-const privateKeys = ['set', 'get', 'setSize', 'setFrameloop', 'setDpr', 'events', 'invalidate', 'advance', 'performance', 'internal', 'size', 'viewport'];
+const privateKeys = ['set', 'get', 'setSize', 'setFrameloop', 'setDpr', 'events', 'invalidate', 'advance', 'size', 'viewport'];
 const isRenderer = def => !!(def != null && def.render);
 const context = /*#__PURE__*/React__namespace.createContext(null);
 
 const createStore = (invalidate, advance) => {
-  const rootState = create__default['default']((set, get) => {
+  const rootState = create__default["default"]((set, get) => {
     const position = new THREE__namespace.Vector3();
     const defaultTarget = new THREE__namespace.Vector3();
     const tempTarget = new THREE__namespace.Vector3();
@@ -1652,6 +1653,13 @@ 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);
@@ -1661,7 +1669,7 @@ function createRoot(canvas) {
 
   const store = prevStore || createStore(invalidate, advance); // Create renderer
 
-  const fiber = prevFiber || reconciler.createContainer(store, constants.ConcurrentRoot, false, null); // Map it
+  const fiber = prevFiber || reconciler.createContainer(store, constants.ConcurrentRoot, null, false, null, null, logRecoverableError, null); // Map it
 
   if (!prevRoot) roots.set(canvas, {
     fiber,
@@ -1942,29 +1950,28 @@ function Portal({
   const previousRoot = useStore();
   const [raycaster] = React__namespace.useState(() => new THREE__namespace.Raycaster());
   const [pointer] = React__namespace.useState(() => new THREE__namespace.Vector2());
-  const inject = React__namespace.useCallback((state, injectState) => {
-    const intersect = { ...state
-    };
-
-    if (injectState) {
-      // Only the fields of "state" that do not differ from injectState
-      // Some props should be off-limits
-      // Otherwise filter out the props that are different and let the inject layer take precedence
-      Object.keys(state).forEach(key => {
-        if ( // Some props should be off-limits
-        !privateKeys.includes(key) && // Otherwise filter out the props that are different and let the inject layer take precedence
-        state[key] !== injectState[key]) delete intersect[key];
-      });
-    }
-
+  const inject = React__namespace.useCallback((rootState, injectState) => {
+    const intersect = { ...rootState
+    }; // all prev state props
+    // Only the fields of "rootState" that do not differ from injectState
+    // Some props should be off-limits
+    // Otherwise filter out the props that are different and let the inject layer take precedence
+
+    Object.keys(rootState).forEach(key => {
+      if ( // Some props should be off-limits
+      privateKeys.includes(key) || // Otherwise filter out the props that are different and let the inject layer take precedence
+      rootState[key] !== injectState[key]) {
+        delete intersect[key];
+      }
+    });
     let viewport = undefined;
 
     if (injectState && size) {
       const camera = injectState.camera; // Calculate the override viewport, if present
 
-      viewport = state.viewport.getCurrentViewport(camera, new THREE__namespace.Vector3(), size); // Update the portal camera, if it differs from the previous layer
+      viewport = rootState.viewport.getCurrentViewport(camera, new THREE__namespace.Vector3(), size); // Update the portal camera, if it differs from the previous layer
 
-      if (camera !== state.camera) updateCamera(camera, size);
+      if (camera !== rootState.camera) updateCamera(camera, size);
     }
 
     return { // The intersect consists of the previous root state
@@ -1977,14 +1984,14 @@ function Portal({
       // Their previous root is the layer before it
       previousRoot,
       // Events, size and viewport can be overridden by the inject layer
-      events: { ...state.events,
+      events: { ...rootState.events,
         ...(injectState == null ? void 0 : injectState.events),
         ...events
       },
-      size: { ...state.size,
+      size: { ...rootState.size,
         ...size
       },
-      viewport: { ...state.viewport,
+      viewport: { ...rootState.viewport,
         ...viewport
       },
       ...rest
@@ -1992,9 +1999,20 @@ function Portal({
   }, [state]);
   const [usePortalStore] = React__namespace.useState(() => {
     // Create a mirrored store, based on the previous root with a few overrides ...
-    new THREE__namespace.Vector3();
     const previousState = previousRoot.getState();
-    const store = create__default['default']((set, get) => ({ ...inject(previousState),
+    const store = create__default["default"]((set, get) => ({ ...previousState,
+      scene: container,
+      raycaster,
+      pointer,
+      mouse: pointer,
+      previousRoot,
+      events: { ...previousState.events,
+        ...events
+      },
+      size: { ...previousState.size,
+        ...size
+      },
+      ...rest,
       // Set and get refer to this root-state
       set,
       get,

package/dist/{index-3c7aae97.esm.js → index-c0771a1d.esm.js}

@@ -201,7 +201,10 @@ function detach(parent, child, type) {
       target,
       key
     } = resolve(parent, type);
-    target[key] = child.__r3f.previousAttach;
+    const previous = child.__r3f.previousAttach; // When the previous value was undefined, it means the value was never set to begin with
+
+    if (previous === undefined) delete target[key]; // Otherwise set the previous value
+    else target[key] = previous;
   } else (_child$__r3f = child.__r3f) == null ? void 0 : _child$__r3f.previousAttach == null ? void 0 : _child$__r3f.previousAttach(parent, child);
 
   (_child$__r3f2 = child.__r3f) == null ? true : delete _child$__r3f2.previousAttach;
@@ -315,35 +318,35 @@ function applyProps$1(instance, data) {
       localState.eventCount = Object.keys(localState.handlers).length;
     } // Special treatment for objects with support for set/copy, and layers
     else if (targetProp && targetProp.set && (targetProp.copy || targetProp instanceof THREE.Layers)) {
-        // If value is an array
-        if (Array.isArray(value)) {
-          if (targetProp.fromArray) targetProp.fromArray(value);else targetProp.set(...value);
-        } // Test again target.copy(class) next ...
-        else if (targetProp.copy && value && value.constructor && targetProp.constructor.name === value.constructor.name) {
-            targetProp.copy(value);
-          } // If nothing else fits, just set the single value, ignore undefined
-          // https://github.com/pmndrs/react-three-fiber/issues/274
-          else if (value !== undefined) {
-              const isColor = targetProp instanceof THREE.Color; // Allow setting array scalars
-
-              if (!isColor && targetProp.setScalar) targetProp.setScalar(value); // Layers have no copy function, we must therefore copy the mask property
-              else if (targetProp instanceof THREE.Layers && value instanceof THREE.Layers) targetProp.mask = value.mask; // Otherwise just set ...
-                else targetProp.set(value); // For versions of three which don't support THREE.ColorManagement,
-              // Auto-convert sRGB colors
-              // https://github.com/pmndrs/react-three-fiber/issues/344
-
-              const supportsColorManagement = THREE.ColorManagement;
-              if (!supportsColorManagement && !rootState.linear && isColor) targetProp.convertSRGBToLinear();
-            } // Else, just overwrite the value
-
-      } else {
-        currentInstance[key] = value; // Auto-convert sRGB textures, for now ...
+      // If value is an array
+      if (Array.isArray(value)) {
+        if (targetProp.fromArray) targetProp.fromArray(value);else targetProp.set(...value);
+      } // Test again target.copy(class) next ...
+      else if (targetProp.copy && value && value.constructor && targetProp.constructor.name === value.constructor.name) {
+        targetProp.copy(value);
+      } // If nothing else fits, just set the single value, ignore undefined
+      // https://github.com/pmndrs/react-three-fiber/issues/274
+      else if (value !== undefined) {
+        const isColor = targetProp instanceof THREE.Color; // Allow setting array scalars
+
+        if (!isColor && targetProp.setScalar) targetProp.setScalar(value); // Layers have no copy function, we must therefore copy the mask property
+        else if (targetProp instanceof THREE.Layers && value instanceof THREE.Layers) targetProp.mask = value.mask; // Otherwise just set ...
+        else targetProp.set(value); // For versions of three which don't support THREE.ColorManagement,
+        // Auto-convert sRGB colors
         // https://github.com/pmndrs/react-three-fiber/issues/344
 
-        if (!rootState.linear && currentInstance[key] instanceof THREE.Texture) {
-          currentInstance[key].encoding = THREE.sRGBEncoding;
-        }
+        const supportsColorManagement = THREE.ColorManagement;
+        if (!supportsColorManagement && !rootState.linear && isColor) targetProp.convertSRGBToLinear();
+      } // Else, just overwrite the value
+
+    } else {
+      currentInstance[key] = value; // Auto-convert sRGB textures, for now ...
+      // https://github.com/pmndrs/react-three-fiber/issues/344
+
+      if (!rootState.linear && currentInstance[key] instanceof THREE.Texture) {
+        currentInstance[key].encoding = THREE.sRGBEncoding;
       }
+    }
 
     invalidateInstance(instance);
   });
@@ -843,7 +846,7 @@ function createRenderer(roots, getEventPriority) {
       const target = catalogue[name];
 
       if (!target) {
-        throw `${name} is not part of the THREE namespace! Did you forget to extend? See: https://github.com/pmndrs/react-three-fiber/blob/master/markdown/api.md#using-3rd-party-objects-declaratively`;
+        throw `${name} is not part of the THREE namespace! Did you forget to extend? See: https://docs.pmnd.rs/react-three-fiber/api/objects#using-3rd-party-objects-declaratively`;
       } // Throw if an object or literal was passed for args
 
 
@@ -1112,7 +1115,6 @@ function createRenderer(roots, getEventPriority) {
     shouldSetTextContent: () => false,
     clearContainer: () => false,
     detachDeletedInstance: () => {},
-    createTextInstance: () => {},
 
     hideInstance(instance) {
       var _instance$__r3f5;
@@ -1140,10 +1142,11 @@ function createRenderer(roots, getEventPriority) {
       invalidateInstance(instance);
     },
 
+    createTextInstance: () => {},
     hideTextInstance: () => {
       throw new Error('Text is not allowed in the R3F tree.');
     },
-    // prettier-ignore
+    unhideTextInstance: () => {},
     getCurrentEventPriority: () => getEventPriority ? getEventPriority() : DefaultEventPriority,
     // @ts-ignore
     now: typeof performance !== 'undefined' && is.fun(performance.now) ? performance.now : is.fun(Date.now) ? Date.now : undefined,
@@ -1160,7 +1163,7 @@ function createRenderer(roots, getEventPriority) {
   };
 }
 
-const privateKeys = ['set', 'get', 'setSize', 'setFrameloop', 'setDpr', 'events', 'invalidate', 'advance', 'performance', 'internal', 'size', 'viewport'];
+const privateKeys = ['set', 'get', 'setSize', 'setFrameloop', 'setDpr', 'events', 'invalidate', 'advance', 'size', 'viewport'];
 const isRenderer = def => !!(def != null && def.render);
 const context = /*#__PURE__*/React.createContext(null);
 
@@ -1623,6 +1626,13 @@ 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);
@@ -1632,7 +1642,7 @@ function createRoot(canvas) {
 
   const store = prevStore || createStore(invalidate, advance); // Create renderer
 
-  const fiber = prevFiber || reconciler.createContainer(store, ConcurrentRoot, false, null); // Map it
+  const fiber = prevFiber || reconciler.createContainer(store, ConcurrentRoot, null, false, null, null, logRecoverableError, null); // Map it
 
   if (!prevRoot) roots.set(canvas, {
     fiber,
@@ -1913,29 +1923,28 @@ function Portal({
   const previousRoot = useStore();
   const [raycaster] = React.useState(() => new THREE.Raycaster());
   const [pointer] = React.useState(() => new THREE.Vector2());
-  const inject = React.useCallback((state, injectState) => {
-    const intersect = { ...state
-    };
-
-    if (injectState) {
-      // Only the fields of "state" that do not differ from injectState
-      // Some props should be off-limits
-      // Otherwise filter out the props that are different and let the inject layer take precedence
-      Object.keys(state).forEach(key => {
-        if ( // Some props should be off-limits
-        !privateKeys.includes(key) && // Otherwise filter out the props that are different and let the inject layer take precedence
-        state[key] !== injectState[key]) delete intersect[key];
-      });
-    }
-
+  const inject = React.useCallback((rootState, injectState) => {
+    const intersect = { ...rootState
+    }; // all prev state props
+    // Only the fields of "rootState" that do not differ from injectState
+    // Some props should be off-limits
+    // Otherwise filter out the props that are different and let the inject layer take precedence
+
+    Object.keys(rootState).forEach(key => {
+      if ( // Some props should be off-limits
+      privateKeys.includes(key) || // Otherwise filter out the props that are different and let the inject layer take precedence
+      rootState[key] !== injectState[key]) {
+        delete intersect[key];
+      }
+    });
     let viewport = undefined;
 
     if (injectState && size) {
       const camera = injectState.camera; // Calculate the override viewport, if present
 
-      viewport = state.viewport.getCurrentViewport(camera, new THREE.Vector3(), size); // Update the portal camera, if it differs from the previous layer
+      viewport = rootState.viewport.getCurrentViewport(camera, new THREE.Vector3(), size); // Update the portal camera, if it differs from the previous layer
 
-      if (camera !== state.camera) updateCamera(camera, size);
+      if (camera !== rootState.camera) updateCamera(camera, size);
     }
 
     return { // The intersect consists of the previous root state
@@ -1948,14 +1957,14 @@ function Portal({
       // Their previous root is the layer before it
       previousRoot,
       // Events, size and viewport can be overridden by the inject layer
-      events: { ...state.events,
+      events: { ...rootState.events,
         ...(injectState == null ? void 0 : injectState.events),
         ...events
       },
-      size: { ...state.size,
+      size: { ...rootState.size,
         ...size
       },
-      viewport: { ...state.viewport,
+      viewport: { ...rootState.viewport,
         ...viewport
       },
       ...rest
@@ -1963,9 +1972,20 @@ function Portal({
   }, [state]);
   const [usePortalStore] = React.useState(() => {
     // Create a mirrored store, based on the previous root with a few overrides ...
-    new THREE.Vector3();
     const previousState = previousRoot.getState();
-    const store = create((set, get) => ({ ...inject(previousState),
+    const store = create((set, get) => ({ ...previousState,
+      scene: container,
+      raycaster,
+      pointer,
+      mouse: pointer,
+      previousRoot,
+      events: { ...previousState.events,
+        ...events
+      },
+      size: { ...previousState.size,
+        ...size
+      },
+      ...rest,
       // Set and get refer to this root-state
       set,
       get,

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

@@ -19,14 +19,12 @@ function _interopNamespace(e) {
         var d = Object.getOwnPropertyDescriptor(e, k);
         Object.defineProperty(n, k, d.get ? d : {
           enumerable: true,
-          get: function () {
-            return e[k];
-          }
+          get: function () { return e[k]; }
         });
       }
     });
   }
-  n['default'] = e;
+  n["default"] = e;
   return Object.freeze(n);
 }
 
@@ -230,7 +228,10 @@ function detach(parent, child, type) {
       target,
       key
     } = resolve(parent, type);
-    target[key] = child.__r3f.previousAttach;
+    const previous = child.__r3f.previousAttach; // When the previous value was undefined, it means the value was never set to begin with
+
+    if (previous === undefined) delete target[key]; // Otherwise set the previous value
+    else target[key] = previous;
   } else (_child$__r3f = child.__r3f) == null ? void 0 : _child$__r3f.previousAttach == null ? void 0 : _child$__r3f.previousAttach(parent, child);
 
   (_child$__r3f2 = child.__r3f) == null ? true : delete _child$__r3f2.previousAttach;
@@ -344,35 +345,35 @@ function applyProps$1(instance, data) {
       localState.eventCount = Object.keys(localState.handlers).length;
     } // Special treatment for objects with support for set/copy, and layers
     else if (targetProp && targetProp.set && (targetProp.copy || targetProp instanceof THREE__namespace.Layers)) {
-        // If value is an array
-        if (Array.isArray(value)) {
-          if (targetProp.fromArray) targetProp.fromArray(value);else targetProp.set(...value);
-        } // Test again target.copy(class) next ...
-        else if (targetProp.copy && value && value.constructor && targetProp.constructor.name === value.constructor.name) {
-            targetProp.copy(value);
-          } // If nothing else fits, just set the single value, ignore undefined
-          // https://github.com/pmndrs/react-three-fiber/issues/274
-          else if (value !== undefined) {
-              const isColor = targetProp instanceof THREE__namespace.Color; // Allow setting array scalars
-
-              if (!isColor && targetProp.setScalar) targetProp.setScalar(value); // Layers have no copy function, we must therefore copy the mask property
-              else if (targetProp instanceof THREE__namespace.Layers && value instanceof THREE__namespace.Layers) targetProp.mask = value.mask; // Otherwise just set ...
-                else targetProp.set(value); // For versions of three which don't support THREE.ColorManagement,
-              // Auto-convert sRGB colors
-              // https://github.com/pmndrs/react-three-fiber/issues/344
-
-              const supportsColorManagement = THREE__namespace.ColorManagement;
-              if (!supportsColorManagement && !rootState.linear && isColor) targetProp.convertSRGBToLinear();
-            } // Else, just overwrite the value
-
-      } else {
-        currentInstance[key] = value; // Auto-convert sRGB textures, for now ...
+      // If value is an array
+      if (Array.isArray(value)) {
+        if (targetProp.fromArray) targetProp.fromArray(value);else targetProp.set(...value);
+      } // Test again target.copy(class) next ...
+      else if (targetProp.copy && value && value.constructor && targetProp.constructor.name === value.constructor.name) {
+        targetProp.copy(value);
+      } // If nothing else fits, just set the single value, ignore undefined
+      // https://github.com/pmndrs/react-three-fiber/issues/274
+      else if (value !== undefined) {
+        const isColor = targetProp instanceof THREE__namespace.Color; // Allow setting array scalars
+
+        if (!isColor && targetProp.setScalar) targetProp.setScalar(value); // Layers have no copy function, we must therefore copy the mask property
+        else if (targetProp instanceof THREE__namespace.Layers && value instanceof THREE__namespace.Layers) targetProp.mask = value.mask; // Otherwise just set ...
+        else targetProp.set(value); // For versions of three which don't support THREE.ColorManagement,
+        // Auto-convert sRGB colors
         // https://github.com/pmndrs/react-three-fiber/issues/344
 
-        if (!rootState.linear && currentInstance[key] instanceof THREE__namespace.Texture) {
-          currentInstance[key].encoding = THREE__namespace.sRGBEncoding;
-        }
+        const supportsColorManagement = THREE__namespace.ColorManagement;
+        if (!supportsColorManagement && !rootState.linear && isColor) targetProp.convertSRGBToLinear();
+      } // Else, just overwrite the value
+
+    } else {
+      currentInstance[key] = value; // Auto-convert sRGB textures, for now ...
+      // https://github.com/pmndrs/react-three-fiber/issues/344
+
+      if (!rootState.linear && currentInstance[key] instanceof THREE__namespace.Texture) {
+        currentInstance[key].encoding = THREE__namespace.sRGBEncoding;
       }
+    }
 
     invalidateInstance(instance);
   });
@@ -872,7 +873,7 @@ function createRenderer(roots, getEventPriority) {
       const target = catalogue[name];
 
       if (!target) {
-        throw `${name} is not part of the THREE namespace! Did you forget to extend? See: https://github.com/pmndrs/react-three-fiber/blob/master/markdown/api.md#using-3rd-party-objects-declaratively`;
+        throw `${name} is not part of the THREE namespace! Did you forget to extend? See: https://docs.pmnd.rs/react-three-fiber/api/objects#using-3rd-party-objects-declaratively`;
       } // Throw if an object or literal was passed for args
 
 
@@ -1056,7 +1057,7 @@ function createRenderer(roots, getEventPriority) {
     });
   }
 
-  const reconciler = Reconciler__default['default']({
+  const reconciler = Reconciler__default["default"]({
     createInstance,
     removeChild,
     appendChild,
@@ -1141,7 +1142,6 @@ function createRenderer(roots, getEventPriority) {
     shouldSetTextContent: () => false,
     clearContainer: () => false,
     detachDeletedInstance: () => {},
-    createTextInstance: () => {},
 
     hideInstance(instance) {
       var _instance$__r3f5;
@@ -1169,10 +1169,11 @@ function createRenderer(roots, getEventPriority) {
       invalidateInstance(instance);
     },
 
+    createTextInstance: () => {},
     hideTextInstance: () => {
       throw new Error('Text is not allowed in the R3F tree.');
     },
-    // prettier-ignore
+    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,
@@ -1189,12 +1190,12 @@ function createRenderer(roots, getEventPriority) {
   };
 }
 
-const privateKeys = ['set', 'get', 'setSize', 'setFrameloop', 'setDpr', 'events', 'invalidate', 'advance', 'performance', 'internal', 'size', 'viewport'];
+const privateKeys = ['set', 'get', 'setSize', 'setFrameloop', 'setDpr', 'events', 'invalidate', 'advance', 'size', 'viewport'];
 const isRenderer = def => !!(def != null && def.render);
 const context = /*#__PURE__*/React__namespace.createContext(null);
 
 const createStore = (invalidate, advance) => {
-  const rootState = create__default['default']((set, get) => {
+  const rootState = create__default["default"]((set, get) => {
     const position = new THREE__namespace.Vector3();
     const defaultTarget = new THREE__namespace.Vector3();
     const tempTarget = new THREE__namespace.Vector3();
@@ -1652,6 +1653,13 @@ 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);
@@ -1661,7 +1669,7 @@ function createRoot(canvas) {
 
   const store = prevStore || createStore(invalidate, advance); // Create renderer
 
-  const fiber = prevFiber || reconciler.createContainer(store, constants.ConcurrentRoot, false, null); // Map it
+  const fiber = prevFiber || reconciler.createContainer(store, constants.ConcurrentRoot, null, false, null, null, logRecoverableError, null); // Map it
 
   if (!prevRoot) roots.set(canvas, {
     fiber,
@@ -1942,29 +1950,28 @@ function Portal({
   const previousRoot = useStore();
   const [raycaster] = React__namespace.useState(() => new THREE__namespace.Raycaster());
   const [pointer] = React__namespace.useState(() => new THREE__namespace.Vector2());
-  const inject = React__namespace.useCallback((state, injectState) => {
-    const intersect = { ...state
-    };
-
-    if (injectState) {
-      // Only the fields of "state" that do not differ from injectState
-      // Some props should be off-limits
-      // Otherwise filter out the props that are different and let the inject layer take precedence
-      Object.keys(state).forEach(key => {
-        if ( // Some props should be off-limits
-        !privateKeys.includes(key) && // Otherwise filter out the props that are different and let the inject layer take precedence
-        state[key] !== injectState[key]) delete intersect[key];
-      });
-    }
-
+  const inject = React__namespace.useCallback((rootState, injectState) => {
+    const intersect = { ...rootState
+    }; // all prev state props
+    // Only the fields of "rootState" that do not differ from injectState
+    // Some props should be off-limits
+    // Otherwise filter out the props that are different and let the inject layer take precedence
+
+    Object.keys(rootState).forEach(key => {
+      if ( // Some props should be off-limits
+      privateKeys.includes(key) || // Otherwise filter out the props that are different and let the inject layer take precedence
+      rootState[key] !== injectState[key]) {
+        delete intersect[key];
+      }
+    });
     let viewport = undefined;
 
     if (injectState && size) {
       const camera = injectState.camera; // Calculate the override viewport, if present
 
-      viewport = state.viewport.getCurrentViewport(camera, new THREE__namespace.Vector3(), size); // Update the portal camera, if it differs from the previous layer
+      viewport = rootState.viewport.getCurrentViewport(camera, new THREE__namespace.Vector3(), size); // Update the portal camera, if it differs from the previous layer
 
-      if (camera !== state.camera) updateCamera(camera, size);
+      if (camera !== rootState.camera) updateCamera(camera, size);
     }
 
     return { // The intersect consists of the previous root state
@@ -1977,14 +1984,14 @@ function Portal({
       // Their previous root is the layer before it
       previousRoot,
       // Events, size and viewport can be overridden by the inject layer
-      events: { ...state.events,
+      events: { ...rootState.events,
         ...(injectState == null ? void 0 : injectState.events),
         ...events
       },
-      size: { ...state.size,
+      size: { ...rootState.size,
         ...size
       },
-      viewport: { ...state.viewport,
+      viewport: { ...rootState.viewport,
         ...viewport
       },
       ...rest
@@ -1992,9 +1999,20 @@ function Portal({
   }, [state]);
   const [usePortalStore] = React__namespace.useState(() => {
     // Create a mirrored store, based on the previous root with a few overrides ...
-    new THREE__namespace.Vector3();
     const previousState = previousRoot.getState();
-    const store = create__default['default']((set, get) => ({ ...inject(previousState),
+    const store = create__default["default"]((set, get) => ({ ...previousState,
+      scene: container,
+      raycaster,
+      pointer,
+      mouse: pointer,
+      previousRoot,
+      events: { ...previousState.events,
+        ...events
+      },
+      size: { ...previousState.size,
+        ...size
+      },
+      ...rest,
       // Set and get refer to this root-state
       set,
       get,

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-f7939a95.cjs.dev.js');
+var index = require('./index-cf0e5bff.cjs.dev.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
@@ -25,14 +25,12 @@ function _interopNamespace(e) {
         var d = Object.getOwnPropertyDescriptor(e, k);
         Object.defineProperty(n, k, d.get ? d : {
           enumerable: true,
-          get: function () {
-            return e[k];
-          }
+          get: function () { return e[k]; }
         });
       }
     });
   }
-  n['default'] = e;
+  n["default"] = e;
   return Object.freeze(n);
 }
 
@@ -151,7 +149,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   const [containerRef, {
     width,
     height
-  }] = useMeasure__default['default']({
+  }] = useMeasure__default["default"]({
     scroll: true,
     debounce: {
       scroll: 50,
@@ -213,7 +211,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: mergeRefs__default["default"]([meshRef, containerRef]),
     style: {
       position: 'relative',
       width: '100%',
@@ -222,7 +220,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
       ...style
     }
   }, props), /*#__PURE__*/React__namespace.createElement("canvas", {
-    ref: mergeRefs__default['default']([canvasRef, forwardedRef]),
+    ref: mergeRefs__default["default"]([canvasRef, forwardedRef]),
     style: {
       display: 'block'
     }

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-e936c560.cjs.prod.js');
+var index = require('./index-5844e9ba.cjs.prod.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
@@ -25,14 +25,12 @@ function _interopNamespace(e) {
         var d = Object.getOwnPropertyDescriptor(e, k);
         Object.defineProperty(n, k, d.get ? d : {
           enumerable: true,
-          get: function () {
-            return e[k];
-          }
+          get: function () { return e[k]; }
         });
       }
     });
   }
-  n['default'] = e;
+  n["default"] = e;
   return Object.freeze(n);
 }
 
@@ -151,7 +149,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   const [containerRef, {
     width,
     height
-  }] = useMeasure__default['default']({
+  }] = useMeasure__default["default"]({
     scroll: true,
     debounce: {
       scroll: 50,
@@ -213,7 +211,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: mergeRefs__default["default"]([meshRef, containerRef]),
     style: {
       position: 'relative',
       width: '100%',
@@ -222,7 +220,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
       ...style
     }
   }, props), /*#__PURE__*/React__namespace.createElement("canvas", {
-    ref: mergeRefs__default['default']([canvasRef, forwardedRef]),
+    ref: mergeRefs__default["default"]([canvasRef, forwardedRef]),
     style: {
       display: 'block'
     }

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-3c7aae97.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-3c7aae97.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-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 _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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var THREE = require('three');
 var expoAsset = require('expo-asset');
-var index = require('../../dist/index-f7939a95.cjs.dev.js');
+var index = require('../../dist/index-cf0e5bff.cjs.dev.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var mergeRefs = require('react-merge-refs');
@@ -28,14 +28,12 @@ function _interopNamespace(e) {
         var d = Object.getOwnPropertyDescriptor(e, k);
         Object.defineProperty(n, k, d.get ? d : {
           enumerable: true,
-          get: function () {
-            return e[k];
-          }
+          get: function () { return e[k]; }
         });
       }
     });
   }
-  n['default'] = e;
+  n["default"] = e;
   return Object.freeze(n);
 }
 
@@ -100,7 +98,7 @@ function createTouchEvents(store) {
         events
       } = store.getState();
       events.disconnect == null ? void 0 : events.disconnect();
-      const connected = new Pressability__default['default'](events == null ? void 0 : events.handlers);
+      const connected = new Pressability__default["default"](events == null ? void 0 : events.handlers);
       set(state => ({
         events: { ...state.events,
           connected
@@ -249,7 +247,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
     }
   }, [canvas]);
   return /*#__PURE__*/React__namespace.createElement(reactNative.View, _extends({}, props, {
-    ref: mergeRefs__default['default']([viewRef, forwardedRef]),
+    ref: mergeRefs__default["default"]([viewRef, forwardedRef]),
     onLayout: onLayout,
     style: {
       flex: 1,

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var THREE = require('three');
 var expoAsset = require('expo-asset');
-var index = require('../../dist/index-e936c560.cjs.prod.js');
+var index = require('../../dist/index-5844e9ba.cjs.prod.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var mergeRefs = require('react-merge-refs');
@@ -28,14 +28,12 @@ function _interopNamespace(e) {
         var d = Object.getOwnPropertyDescriptor(e, k);
         Object.defineProperty(n, k, d.get ? d : {
           enumerable: true,
-          get: function () {
-            return e[k];
-          }
+          get: function () { return e[k]; }
         });
       }
     });
   }
-  n['default'] = e;
+  n["default"] = e;
   return Object.freeze(n);
 }
 
@@ -100,7 +98,7 @@ function createTouchEvents(store) {
         events
       } = store.getState();
       events.disconnect == null ? void 0 : events.disconnect();
-      const connected = new Pressability__default['default'](events == null ? void 0 : events.handlers);
+      const connected = new Pressability__default["default"](events == null ? void 0 : events.handlers);
       set(state => ({
         events: { ...state.events,
           connected
@@ -249,7 +247,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
     }
   }, [canvas]);
   return /*#__PURE__*/React__namespace.createElement(reactNative.View, _extends({}, props, {
-    ref: mergeRefs__default['default']([viewRef, forwardedRef]),
+    ref: mergeRefs__default["default"]([viewRef, forwardedRef]),
     onLayout: onLayout,
     style: {
       flex: 1,

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

@@ -1,7 +1,7 @@
 import * as THREE from 'three';
 import { Asset } from 'expo-asset';
-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-3c7aae97.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-3c7aae97.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-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 '../../dist/index-c0771a1d.esm.js';
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import mergeRefs from 'react-merge-refs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/fiber",
-  "version": "8.0.11",
+  "version": "8.0.14",
   "description": "A React renderer for Threejs",
   "keywords": [
     "react",
@@ -43,7 +43,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.17.8",
-    "@types/react-reconciler": "^0.26.4",
+    "@types/react-reconciler": "^0.26.6",
     "react-merge-refs": "^1.1.0",
     "react-reconciler": "^0.27.0",
     "react-use-measure": "^2.1.1",