@react-three/fiber 8.0.10 → 8.0.13

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @react-three/fiber
 
+## 8.0.13
+
+### Patch Changes
+
+- 9d77d8e2: fix: detach attribute removal
+
+## 8.0.12
+
+### Patch Changes
+
+- 3d10413f: fix portal layers
+
+## 8.0.11
+
+### Patch Changes
+
+- 5167b1e4: memoized.args can be undefined
+
 ## 8.0.10
 
 ### 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/index.d.ts

@@ -3,7 +3,7 @@ import * as THREE from 'three';
 import * as React from 'react';
 import { UseBoundStore } from 'zustand';
 import * as ReactThreeFiber from '../three-types';
-import { Renderer, context, RootState, Size, Dpr, Performance } from './store';
+import { Renderer, context, RootState, Size, Dpr, Performance, PrivateKeys } from './store';
 import { extend, Root } from './renderer';
 import { addEffect, addAfterEffect, addTail } from './loop';
 import { EventManager, ComputeFunction } from './events';
@@ -42,7 +42,7 @@ export declare type ReconcilerRoot<TCanvas extends Element> = {
 declare function createRoot<TCanvas extends Element>(canvas: TCanvas): ReconcilerRoot<TCanvas>;
 declare function render<TCanvas extends Element>(children: React.ReactNode, canvas: TCanvas, config: RenderProps<TCanvas>): UseBoundStore<RootState>;
 declare function unmountComponentAtNode<TElement extends Element>(canvas: TElement, callback?: (canvas: TElement) => void): void;
-export declare type InjectState = Partial<Omit<RootState, 'set' | 'get' | 'setSize' | 'setFrameloop' | 'setDpr' | 'events' | 'invalidate' | 'advance' | 'performance' | 'internal' | 'size' | 'viewport'> & {
+export declare type InjectState = Partial<Omit<RootState, PrivateKeys> & {
     events?: {
         enabled?: boolean;
         priority?: number;

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

@@ -3,6 +3,8 @@ 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", "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;
 }> {
@@ -47,11 +48,6 @@ export declare type ObjectMap = {
 };
 export declare function calculateDpr(dpr: Dpr): number;
 export declare const getRootState: (obj: THREE.Object3D) => RootState | undefined;
-export declare function filterKeys<TObj extends {
-    [key: string]: any;
-}, TOmit extends boolean, TKey extends keyof TObj>(obj: TObj, omit: TOmit, ...keys: TKey[]): TOmit extends true ? Omit<TObj, TKey> : Pick<TObj, TKey>;
-export declare const pick: <TObj>(obj: Partial<TObj>, keys: (keyof TObj)[]) => Pick<Partial<TObj>, keyof TObj>;
-export declare const omit: <TObj>(obj: Partial<TObj>, keys: (keyof TObj)[]) => Omit<Partial<TObj>, keyof TObj>;
 export declare type EquConfig = {
     arrays?: 'reference' | 'shallow';
     objects?: 'reference' | 'shallow';

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { View, ViewProps, ViewStyle } from 'react-native';
 import { RenderProps } from '../core';
-export interface Props extends Omit<RenderProps<HTMLCanvasElement>, 'size'>, ViewProps {
+export interface Props extends Omit<RenderProps<HTMLCanvasElement>, 'size' | 'dpr'>, ViewProps {
     children: React.ReactNode;
     style?: ViewStyle;
 }

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

@@ -21,7 +21,7 @@ export interface NodeProps<T, P> {
     attach?: AttachType;
     args?: Args<P>;
     children?: React.ReactNode;
-    ref?: React.RefCallback<T> | React.RefObject<React.ReactNode> | null;
+    ref?: React.Ref<T>;
     key?: React.Key;
     onUpdate?: (self: T) => void;
 }
@@ -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-c8c0474b.cjs.prod.js → index-46325a70.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);
 }
 
@@ -95,29 +93,6 @@ const getRootState = obj => {
 
   return (_r3f = obj.__r3f) == null ? void 0 : _r3f.root.getState();
 };
-/**
- * Picks or omits keys from an object
- * `omit` will filter out keys, and otherwise cherry-pick them.
- */
-
-function filterKeys(obj, omit, ...keys) {
-  const keysToSelect = new Set(keys);
-  return Object.entries(obj).reduce((acc, [key, value]) => {
-    const shouldInclude = !omit;
-    if (keysToSelect.has(key) === shouldInclude) acc[key] = value;
-    return acc;
-  }, {});
-}
-/**
- * Clones an object and cherry-picks keys.
- */
-
-const pick = (obj, keys) => filterKeys(obj, false, ...keys);
-/**
- * Clones an object and prunes or omits keys.
- */
-
-const omit = (obj, keys) => filterKeys(obj, true, ...keys);
 // A collection of compare functions
 const is = {
   obj: a => a === Object(a) && !is.arr(a) && typeof a !== 'function',
@@ -253,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;
@@ -343,12 +321,16 @@ function applyProps$1(instance, data) {
 
     if (value === DEFAULT + 'remove') {
       if (targetProp && targetProp.constructor) {
+        var _memoized$args;
+
         // use the prop constructor to find the default it should be
-        value = new targetProp.constructor(...memoized.args);
+        value = new targetProp.constructor(...((_memoized$args = memoized.args) != null ? _memoized$args : []));
       } else if (currentInstance.constructor) {
+        var _currentInstance$__r;
+
         // create a blank slate of the instance and copy the particular parameter.
         // @ts-ignore
-        const defaultClassCall = new currentInstance.constructor(...currentInstance.__r3f.memoizedProps.args);
+        const defaultClassCall = new currentInstance.constructor(...((_currentInstance$__r = currentInstance.__r3f.memoizedProps.args) != null ? _currentInstance$__r : []));
         value = defaultClassCall[targetProp]; // destory the instance
 
         if (defaultClassCall.dispose) defaultClassCall.dispose(); // instance does not have constructor, just set it to 0
@@ -363,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);
   });
@@ -1075,7 +1057,7 @@ function createRenderer(roots, getEventPriority) {
     });
   }
 
-  const reconciler = Reconciler__default['default']({
+  const reconciler = Reconciler__default["default"]({
     createInstance,
     removeChild,
     appendChild,
@@ -1160,7 +1142,6 @@ function createRenderer(roots, getEventPriority) {
     shouldSetTextContent: () => false,
     clearContainer: () => false,
     detachDeletedInstance: () => {},
-    createTextInstance: () => {},
 
     hideInstance(instance) {
       var _instance$__r3f5;
@@ -1188,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,
@@ -1208,11 +1190,12 @@ function createRenderer(roots, getEventPriority) {
   };
 }
 
+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();
@@ -1960,29 +1943,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 (state[key] !== injectState[key] && !['internal', 'performance'].includes(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
@@ -1995,14 +1977,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
@@ -2010,9 +1992,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,
@@ -2064,8 +2057,6 @@ exports.dispose = dispose;
 exports.extend = extend;
 exports.getRootState = getRootState;
 exports.invalidate = invalidate;
-exports.omit = omit;
-exports.pick = pick;
 exports.reconciler = reconciler;
 exports.render = render;
 exports.roots = roots;