@react-three/fiber 7.0.26 → 7.0.29

package/CHANGELOG.md

@@ -1,10 +1,28 @@
 # @react-three/fiber
 
+## 7.0.29
+
+### Patch Changes
+
+- c99a175: fix native entrypoint
+
+## 7.0.28
+
+### Patch Changes
+
+- 462615e7: bump version
+
+## 7.0.27
+
+### Patch Changes
+
+- 44bb35ab: insertBefore supports attachArray
+
 ## 7.0.26
 
 ### Patch Changes
 
-- ccda644: passthrough size via raycaster#computeOffsets
+- 13dde9b8: insertBefore supports attachArray
 
 ## 7.0.25
 

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

@@ -1,5 +1,5 @@
 import * as THREE from 'three';
-import type { UseStore } from 'zustand';
+import type { UseBoundStore } from 'zustand';
 import type { RootState } from './store';
 export interface Intersection extends THREE.Intersection {
     eventObject: THREE.Object3D;
@@ -57,7 +57,7 @@ export interface PointerCaptureTarget {
     intersection: Intersection;
     target: Element;
 }
-export declare function removeInteractivity(store: UseStore<RootState>, object: THREE.Object3D): void;
-export declare function createEvents(store: UseStore<RootState>): {
+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/hooks.d.ts

@@ -9,6 +9,8 @@ declare type Extensions = (loader: THREE.Loader) => void;
 declare type LoaderResult<T> = T extends any[] ? Loader<T[number]> : Loader<T>;
 declare type ConditionalType<Child, Parent, Truthy, Falsy> = Child extends Parent ? Truthy : Falsy;
 declare type BranchingReturn<T, Parent, Coerced> = ConditionalType<T, Parent, Coerced, T>;
+declare type noop = (...args: any[]) => any;
+declare type PickFunction<T extends noop> = (...args: Parameters<T>) => ReturnType<T>;
 export declare type ObjectMap = {
     nodes: {
         [name: string]: THREE.Object3D;
@@ -17,10 +19,11 @@ export declare type ObjectMap = {
         [name: string]: THREE.Material;
     };
 };
-export declare function useStore(): import("zustand").UseStore<RootState>;
+export declare function useStore(): import("zustand").UseBoundStore<RootState, import("zustand").StoreApi<RootState>>;
 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 useMemoizedFn<T extends noop>(fn?: T): PickFunction<T>;
 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 namespace useLoader {
     var preload: <T, U extends string | string[]>(Proto: new () => LoaderResult<T>, input: U, extensions?: Extensions | undefined) => undefined;

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

@@ -1,14 +1,14 @@
 import * as THREE from 'three';
 import Reconciler from 'react-reconciler';
-import { UseStore } from 'zustand';
+import { UseBoundStore } from 'zustand';
 import { RootState } from './store';
 import { EventHandlers } from './events';
 export declare type Root = {
     fiber: Reconciler.FiberRoot;
-    store: UseStore<RootState>;
+    store: UseBoundStore<RootState>;
 };
 export declare type LocalState = {
-    root: UseStore<RootState>;
+    root: UseBoundStore<RootState>;
     objects: Instance[];
     parent: Instance | null;
     primitive?: boolean;

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

@@ -1,7 +1,7 @@
 import * as THREE from 'three';
 import * as React from 'react';
 import * as ReactThreeFiber from '../three-types';
-import { GetState, SetState, UseStore } from 'zustand';
+import { GetState, SetState, UseBoundStore } from 'zustand';
 import { Instance, InstanceProps } from './renderer';
 import { DomEvent, EventManager, PointerCaptureTarget, ThreeEvent } from './events';
 export interface Intersection extends THREE.Intersection {
@@ -113,6 +113,6 @@ export declare type StoreProps = {
 };
 export declare type ApplyProps = (instance: Instance, newProps: InstanceProps) => void;
 export declare function calculateDpr(dpr: Dpr): number;
-declare const context: React.Context<UseStore<RootState>>;
-declare const createStore: (applyProps: ApplyProps, invalidate: (state?: RootState | undefined) => void, advance: (timestamp: number, runGlobalEffects?: boolean | undefined, state?: RootState | undefined) => void, props: StoreProps) => UseStore<RootState>;
+declare const context: React.Context<UseBoundStore<RootState, import("zustand").StoreApi<RootState>>>;
+declare const createStore: (applyProps: ApplyProps, invalidate: (state?: RootState | undefined) => void, advance: (timestamp: number, runGlobalEffects?: boolean | undefined, state?: RootState | undefined) => void, props: StoreProps) => UseBoundStore<RootState>;
 export { createStore, context };

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

@@ -1,6 +1,7 @@
 export * from './three-types';
 import * as ReactThreeFiber from './three-types';
 export { ReactThreeFiber };
+export type { BaseInstance, LocalState } from './core/renderer';
 export type { Intersection, Subscription, Dpr, Size, Viewport, Camera, RenderCallback, Performance, RootState, } from './core/store';
 export type { ThreeEvent, Events, EventManager } from './core/events';
 export type { Props } from './web/Canvas';

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

@@ -44,6 +44,7 @@ export declare type Object3DNode<T, P> = Overwrite<Node<T, P>, {
 export declare type BufferGeometryNode<T extends THREE.BufferGeometry, P> = Node<T, P>;
 export declare type MaterialNode<T extends THREE.Material, P> = Node<T, P>;
 export declare type LightNode<T extends THREE.Light, P> = Object3DNode<T, P>;
+export declare type Object3DProps = Object3DNode<THREE.Object3D, typeof THREE.Object3D>;
 export declare type AudioListenerProps = Object3DNode<THREE.AudioListener, typeof THREE.AudioListener>;
 export declare type PositionalAudioProps = Object3DNode<THREE.PositionalAudio, typeof THREE.PositionalAudio>;
 export declare type MeshProps = Object3DNode<THREE.Mesh, typeof THREE.Mesh>;
@@ -169,7 +170,15 @@ export declare type Matrix3Props = Node<THREE.Matrix3, typeof THREE.Matrix3>;
 export declare type Matrix4Props = Node<THREE.Matrix4, typeof THREE.Matrix4>;
 export declare type QuaternionProps = Node<THREE.Quaternion, typeof THREE.Quaternion>;
 export declare type BufferAttributeProps = Node<THREE.BufferAttribute, typeof THREE.BufferAttribute>;
+export declare type Float16BufferAttributeProps = Node<THREE.Float16BufferAttribute, typeof THREE.Float16BufferAttribute>;
 export declare type Float32BufferAttributeProps = Node<THREE.Float32BufferAttribute, typeof THREE.Float32BufferAttribute>;
+export declare type Float64BufferAttributeProps = Node<THREE.Float64BufferAttribute, typeof THREE.Float64BufferAttribute>;
+export declare type Int8BufferAttributeProps = Node<THREE.Int8BufferAttribute, typeof THREE.Int8BufferAttribute>;
+export declare type Int16BufferAttributeProps = Node<THREE.Int16BufferAttribute, typeof THREE.Int16BufferAttribute>;
+export declare type Int32BufferAttributeProps = Node<THREE.Int32BufferAttribute, typeof THREE.Int32BufferAttribute>;
+export declare type Uint8BufferAttributeProps = Node<THREE.Uint8BufferAttribute, typeof THREE.Uint8BufferAttribute>;
+export declare type Uint16BufferAttributeProps = Node<THREE.Uint16BufferAttribute, typeof THREE.Uint16BufferAttribute>;
+export declare type Uint32BufferAttributeProps = Node<THREE.Uint32BufferAttribute, typeof THREE.Uint32BufferAttribute>;
 export declare type InstancedBufferAttributeProps = Node<THREE.InstancedBufferAttribute, typeof THREE.InstancedBufferAttribute>;
 export declare type ColorProps = Node<THREE.Color, ColorArray>;
 export declare type FogProps = Node<THREE.Fog, typeof THREE.Fog>;
@@ -178,6 +187,7 @@ export declare type ShapeProps = Node<THREE.Shape, typeof THREE.Shape>;
 declare global {
     namespace JSX {
         interface IntrinsicElements {
+            object3D: Object3DProps;
             audioListener: AudioListenerProps;
             positionalAudio: PositionalAudioProps;
             mesh: MeshProps;
@@ -299,7 +309,15 @@ declare global {
             matrix4: Matrix4Props;
             quaternion: QuaternionProps;
             bufferAttribute: BufferAttributeProps;
+            float16BufferAttribute: Float16BufferAttributeProps;
             float32BufferAttribute: Float32BufferAttributeProps;
+            float64BufferAttribute: Float64BufferAttributeProps;
+            int8BufferAttribute: Int8BufferAttributeProps;
+            int16BufferAttribute: Int16BufferAttributeProps;
+            int32BufferAttribute: Int32BufferAttributeProps;
+            uint8BufferAttribute: Uint8BufferAttributeProps;
+            uint16BufferAttribute: Uint16BufferAttributeProps;
+            uint32BufferAttribute: Uint32BufferAttributeProps;
             instancedBufferAttribute: InstancedBufferAttributeProps;
             color: ColorProps;
             fog: FogProps;

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

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import { Options as ResizeOptions } from 'react-use-measure';
 import { RenderProps } from './index';
-import { UseStore } from 'zustand';
+import { UseBoundStore } from 'zustand';
 import { RootState } from '../core/store';
 import { EventManager } from '../core/events';
 export interface Props extends Omit<RenderProps<HTMLCanvasElement>, 'size' | 'events'>, React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
     fallback?: React.ReactNode;
     resize?: ResizeOptions;
-    events?: (store: UseStore<RootState>) => EventManager<any>;
+    events?: (store: UseBoundStore<RootState>) => EventManager<any>;
 }
 export declare const Canvas: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLCanvasElement>>;

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

@@ -1,4 +1,4 @@
-import { UseStore } from 'zustand';
+import { UseBoundStore } from 'zustand';
 import { RootState } from '../core/store';
 import type { EventManager } from '../core/events';
-export declare function createPointerEvents(store: UseStore<RootState>): EventManager<HTMLElement>;
+export declare function createPointerEvents(store: UseBoundStore<RootState>): EventManager<HTMLElement>;

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

@@ -1,7 +1,7 @@
 /// <reference types="react-reconciler" />
 import * as THREE from 'three';
 import * as React from 'react';
-import { UseStore } from 'zustand';
+import { UseBoundStore } from 'zustand';
 import { Renderer, StoreProps, context, RootState, Size } from '../core/store';
 import { extend, Root } from '../core/renderer';
 import { addEffect, addAfterEffect, addTail } from '../core/loop';
@@ -11,19 +11,19 @@ import { EventManager } from '../core/events';
 declare const roots: Map<Element, Root>;
 declare const modes: readonly ["legacy", "blocking", "concurrent"];
 declare const invalidate: (state?: RootState | undefined) => void, advance: (timestamp: number, runGlobalEffects?: boolean, state?: RootState | undefined) => void;
-declare const reconciler: import("react-reconciler").Reconciler<unknown, unknown, unknown, unknown, unknown>, applyProps: (instance: import("../core/renderer").Instance, data: import("../core/renderer").InstanceProps | import("../core/renderer").DiffSet) => import("../core/renderer").Instance;
+declare const reconciler: import("react-reconciler").Reconciler<unknown, unknown, unknown, unknown, unknown>, applyProps: (instance: import("../core/renderer").Instance, data: import("../core/renderer").DiffSet | import("../core/renderer").InstanceProps) => import("../core/renderer").Instance;
 declare type Properties<T> = Pick<T, {
     [K in keyof T]: T[K] extends (_: any) => any ? never : K;
 }[keyof T]>;
 declare type GLProps = Renderer | ((canvas: HTMLCanvasElement) => Renderer) | Partial<Properties<THREE.WebGLRenderer> | THREE.WebGLRendererParameters> | undefined;
 export declare type RenderProps<TCanvas extends Element> = Omit<StoreProps, 'gl' | 'events' | 'size'> & {
     gl?: GLProps;
-    events?: (store: UseStore<RootState>) => EventManager<TCanvas>;
+    events?: (store: UseBoundStore<RootState>) => EventManager<TCanvas>;
     size?: Size;
     mode?: typeof modes[number];
     onCreated?: (state: RootState) => void;
 };
-declare function render<TCanvas extends Element>(element: React.ReactNode, canvas: TCanvas, { gl, size, mode, events, onCreated, ...props }?: RenderProps<TCanvas>): UseStore<RootState>;
+declare function render<TCanvas extends Element>(element: React.ReactNode, canvas: TCanvas, { gl, size, mode, events, onCreated, ...props }?: RenderProps<TCanvas>): UseBoundStore<RootState>;
 declare function unmountComponentAtNode<TElement extends Element>(canvas: TElement, callback?: (canvas: TElement) => void): void;
 declare function dispose<TObj extends {
     dispose?: () => void;

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

@@ -22,14 +22,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);
 }
 
@@ -626,29 +624,29 @@ function createRenderer(roots) {
         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); // Auto-convert sRGB colors, for now ...
-                // https://github.com/pmndrs/react-three-fiber/issues/344
-
-                if (!isLinear && 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); // Auto-convert sRGB colors, for now ...
           // https://github.com/pmndrs/react-three-fiber/issues/344
 
-          if (!isLinear && currentInstance[key] instanceof THREE__namespace.Texture) currentInstance[key].encoding = THREE__namespace.sRGBEncoding;
-        }
+          if (!isLinear && 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 (!isLinear && currentInstance[key] instanceof THREE__namespace.Texture) currentInstance[key].encoding = THREE__namespace.sRGBEncoding;
+      }
 
       invalidateInstance(instance);
     });
@@ -789,8 +787,13 @@ function createRenderer(roots) {
 
     if (child) {
       if (child.attachArray) {
-        const array = parentInstance[child.attachArray];
-        if (!is.arr(array)) parentInstance[child.attachArray] = [];
+        let array = parentInstance[child.attachArray];
+
+        if (!is.arr(array)) {
+          parentInstance[child.attachArray] = [];
+          array = parentInstance[child.attachArray];
+        }
+
         array.splice(array.indexOf(beforeChild), 0, child);
       } else if (child.attachObject || child.attach && !is.fun(child.attach)) {
         // attach and attachObject don't have an order anyway, so just append
@@ -942,7 +945,7 @@ function createRenderer(roots) {
     });
   }
 
-  const reconciler = Reconciler__default['default']({
+  const reconciler = Reconciler__default["default"]({
     now: scheduler.unstable_now,
     createInstance,
     removeChild,
@@ -1056,9 +1059,7 @@ function createRenderer(roots) {
       return !!localState.handlers;
     },
 
-    commitMount(instance)
-    /*, type, props*/
-    {
+    commitMount(instance) {
       var _instance$__r3f8;
 
       // https://github.com/facebook/react/issues/20271
@@ -1136,7 +1137,7 @@ const createStore = (applyProps, invalidate, advance, props) => {
     clock.elapsedTime = 0;
   }
 
-  const rootState = create__default['default']((set, get) => {
+  const rootState = create__default["default"]((set, get) => {
     // Create custom raycaster
     const raycaster = new THREE__namespace.Raycaster();
     const {
@@ -1570,10 +1571,11 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   events,
   ...props
 }, forwardedRef) {
+  const onPointerMissed = useMemoizedFn(props.onPointerMissed);
   const [containerRef, {
     width,
     height
-  }] = useMeasure__default['default']({
+  }] = useMeasure__default["default"]({
     scroll: true,
     debounce: {
       scroll: 50,
@@ -1602,10 +1604,11 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
           width,
           height
         },
+        onPointerMissed,
         events: events || createPointerEvents
       });
     }
-  }, [width, height, children]);
+  }, [width, height, children, onPointerMissed]);
   useIsomorphicLayoutEffect(() => {
     const container = canvasRef.current;
     return () => unmountComponentAtNode(container);
@@ -1623,7 +1626,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
       ...style
     }
   }, /*#__PURE__*/React__namespace.createElement("canvas", {
-    ref: mergeRefs__default['default']([canvasRef, forwardedRef]),
+    ref: mergeRefs__default["default"]([canvasRef, forwardedRef]),
     style: {
       display: 'block'
     }
@@ -1686,6 +1689,11 @@ function loadingFn(extensions, onProgress) {
   };
 }
 
+function useMemoizedFn(fn) {
+  const fnRef = React__namespace.useRef(fn);
+  React__namespace.useLayoutEffect(() => void (fnRef.current = fn), [fn]);
+  return (...args) => fnRef.current == null ? void 0 : fnRef.current(...args);
+}
 function useLoader(Proto, input, extensions, onProgress) {
   // Use suspense to load async assets
   const keys = Array.isArray(input) ? input : [input];
@@ -1871,8 +1879,7 @@ function dispose(obj) {
   if (obj.dispose && obj.type !== 'Scene') obj.dispose();
 
   for (const p in obj) {
-    var _dispose, _ref;
-    (_dispose = (_ref = p).dispose) == null ? void 0 : _dispose.call(_ref);
+    p.dispose == null ? void 0 : p.dispose();
     delete obj[p];
   }
 }
@@ -1910,5 +1917,6 @@ exports.unmountComponentAtNode = unmountComponentAtNode;
 exports.useFrame = useFrame;
 exports.useGraph = useGraph;
 exports.useLoader = useLoader;
+exports.useMemoizedFn = useMemoizedFn;
 exports.useStore = useStore;
 exports.useThree = useThree;

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

@@ -22,14 +22,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);
 }
 
@@ -626,29 +624,29 @@ function createRenderer(roots) {
         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); // Auto-convert sRGB colors, for now ...
-                // https://github.com/pmndrs/react-three-fiber/issues/344
-
-                if (!isLinear && 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); // Auto-convert sRGB colors, for now ...
           // https://github.com/pmndrs/react-three-fiber/issues/344
 
-          if (!isLinear && currentInstance[key] instanceof THREE__namespace.Texture) currentInstance[key].encoding = THREE__namespace.sRGBEncoding;
-        }
+          if (!isLinear && 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 (!isLinear && currentInstance[key] instanceof THREE__namespace.Texture) currentInstance[key].encoding = THREE__namespace.sRGBEncoding;
+      }
 
       invalidateInstance(instance);
     });
@@ -789,8 +787,13 @@ function createRenderer(roots) {
 
     if (child) {
       if (child.attachArray) {
-        const array = parentInstance[child.attachArray];
-        if (!is.arr(array)) parentInstance[child.attachArray] = [];
+        let array = parentInstance[child.attachArray];
+
+        if (!is.arr(array)) {
+          parentInstance[child.attachArray] = [];
+          array = parentInstance[child.attachArray];
+        }
+
         array.splice(array.indexOf(beforeChild), 0, child);
       } else if (child.attachObject || child.attach && !is.fun(child.attach)) {
         // attach and attachObject don't have an order anyway, so just append
@@ -942,7 +945,7 @@ function createRenderer(roots) {
     });
   }
 
-  const reconciler = Reconciler__default['default']({
+  const reconciler = Reconciler__default["default"]({
     now: scheduler.unstable_now,
     createInstance,
     removeChild,
@@ -1056,9 +1059,7 @@ function createRenderer(roots) {
       return !!localState.handlers;
     },
 
-    commitMount(instance)
-    /*, type, props*/
-    {
+    commitMount(instance) {
       var _instance$__r3f8;
 
       // https://github.com/facebook/react/issues/20271
@@ -1136,7 +1137,7 @@ const createStore = (applyProps, invalidate, advance, props) => {
     clock.elapsedTime = 0;
   }
 
-  const rootState = create__default['default']((set, get) => {
+  const rootState = create__default["default"]((set, get) => {
     // Create custom raycaster
     const raycaster = new THREE__namespace.Raycaster();
     const {
@@ -1570,10 +1571,11 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   events,
   ...props
 }, forwardedRef) {
+  const onPointerMissed = useMemoizedFn(props.onPointerMissed);
   const [containerRef, {
     width,
     height
-  }] = useMeasure__default['default']({
+  }] = useMeasure__default["default"]({
     scroll: true,
     debounce: {
       scroll: 50,
@@ -1602,10 +1604,11 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
           width,
           height
         },
+        onPointerMissed,
         events: events || createPointerEvents
       });
     }
-  }, [width, height, children]);
+  }, [width, height, children, onPointerMissed]);
   useIsomorphicLayoutEffect(() => {
     const container = canvasRef.current;
     return () => unmountComponentAtNode(container);
@@ -1623,7 +1626,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
       ...style
     }
   }, /*#__PURE__*/React__namespace.createElement("canvas", {
-    ref: mergeRefs__default['default']([canvasRef, forwardedRef]),
+    ref: mergeRefs__default["default"]([canvasRef, forwardedRef]),
     style: {
       display: 'block'
     }
@@ -1686,6 +1689,11 @@ function loadingFn(extensions, onProgress) {
   };
 }
 
+function useMemoizedFn(fn) {
+  const fnRef = React__namespace.useRef(fn);
+  React__namespace.useLayoutEffect(() => void (fnRef.current = fn), [fn]);
+  return (...args) => fnRef.current == null ? void 0 : fnRef.current(...args);
+}
 function useLoader(Proto, input, extensions, onProgress) {
   // Use suspense to load async assets
   const keys = Array.isArray(input) ? input : [input];
@@ -1871,8 +1879,7 @@ function dispose(obj) {
   if (obj.dispose && obj.type !== 'Scene') obj.dispose();
 
   for (const p in obj) {
-    var _dispose, _ref;
-    (_dispose = (_ref = p).dispose) == null ? void 0 : _dispose.call(_ref);
+    p.dispose == null ? void 0 : p.dispose();
     delete obj[p];
   }
 }
@@ -1910,5 +1917,6 @@ exports.unmountComponentAtNode = unmountComponentAtNode;
 exports.useFrame = useFrame;
 exports.useGraph = useGraph;
 exports.useLoader = useLoader;
+exports.useMemoizedFn = useMemoizedFn;
 exports.useStore = useStore;
 exports.useThree = useThree;