@react-three/fiber 7.0.26 → 7.0.27

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 { 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>;
-}
-export declare const Canvas: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLCanvasElement>>;
+import * as React from 'react';
+import { Options as ResizeOptions } from 'react-use-measure';
+import { RenderProps } from './index';
+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: 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 { RootState } from '../core/store';
-import type { EventManager } from '../core/events';
-export declare function createPointerEvents(store: UseStore<RootState>): EventManager<HTMLElement>;
+import { UseBoundStore } from 'zustand';
+import { RootState } from '../core/store';
+import type { EventManager } from '../core/events';
+export declare function createPointerEvents(store: UseBoundStore<RootState>): EventManager<HTMLElement>;

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

@@ -1,36 +1,36 @@
-/// <reference types="react-reconciler" />
-import * as THREE from 'three';
-import * as React from 'react';
-import { UseStore } from 'zustand';
-import { Renderer, StoreProps, context, RootState, Size } from '../core/store';
-import { extend, Root } from '../core/renderer';
-import { addEffect, addAfterEffect, addTail } from '../core/loop';
-import { createPointerEvents as events } from './events';
-import { Canvas } from './Canvas';
-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 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>;
-    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 unmountComponentAtNode<TElement extends Element>(canvas: TElement, callback?: (canvas: TElement) => void): void;
-declare function dispose<TObj extends {
-    dispose?: () => void;
-    type?: string;
-    [key: string]: any;
-}>(obj: TObj): void;
-declare const act: (callback: () => import("react-reconciler").Thenable<unknown>) => import("react-reconciler").Thenable<void>;
-declare function createPortal(children: React.ReactNode, container: THREE.Object3D): React.ReactNode;
-export * from '../core/hooks';
-export { context, render, unmountComponentAtNode, createPortal, events, reconciler, applyProps, dispose, invalidate, advance, extend, addEffect, addAfterEffect, addTail, Canvas, act, roots as _roots, };
+/// <reference types="react-reconciler" />
+import * as THREE from 'three';
+import * as React from 'react';
+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';
+import { createPointerEvents as events } from './events';
+import { Canvas } from './Canvas';
+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").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: 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>): UseBoundStore<RootState>;
+declare function unmountComponentAtNode<TElement extends Element>(canvas: TElement, callback?: (canvas: TElement) => void): void;
+declare function dispose<TObj extends {
+    dispose?: () => void;
+    type?: string;
+    [key: string]: any;
+}>(obj: TObj): void;
+declare const act: (callback: () => import("react-reconciler").Thenable<unknown>) => import("react-reconciler").Thenable<void>;
+declare function createPortal(children: React.ReactNode, container: THREE.Object3D): React.ReactNode;
+export * from '../core/hooks';
+export { context, render, unmountComponentAtNode, createPortal, events, reconciler, applyProps, dispose, invalidate, advance, extend, addEffect, addAfterEffect, addTail, Canvas, act, roots as _roots, };

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);
     });
@@ -942,7 +940,7 @@ function createRenderer(roots) {
     });
   }
 
-  const reconciler = Reconciler__default['default']({
+  const reconciler = Reconciler__default["default"]({
     now: scheduler.unstable_now,
     createInstance,
     removeChild,
@@ -1056,9 +1054,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 +1132,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 +1566,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 +1599,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 +1621,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 +1684,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 +1874,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 +1912,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);
     });
@@ -942,7 +940,7 @@ function createRenderer(roots) {
     });
   }
 
-  const reconciler = Reconciler__default['default']({
+  const reconciler = Reconciler__default["default"]({
     now: scheduler.unstable_now,
     createInstance,
     removeChild,
@@ -1056,9 +1054,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 +1132,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 +1566,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 +1599,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 +1621,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 +1684,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 +1874,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 +1912,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.esm.js

@@ -593,29 +593,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.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); // 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.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); // Auto-convert sRGB colors, for now ...
           // https://github.com/pmndrs/react-three-fiber/issues/344
 
-          if (!isLinear && currentInstance[key] instanceof THREE.Texture) currentInstance[key].encoding = THREE.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.Texture) currentInstance[key].encoding = THREE.sRGBEncoding;
+      }
 
       invalidateInstance(instance);
     });
@@ -1023,9 +1023,7 @@ function createRenderer(roots) {
       return !!localState.handlers;
     },
 
-    commitMount(instance)
-    /*, type, props*/
-    {
+    commitMount(instance) {
       var _instance$__r3f8;
 
       // https://github.com/facebook/react/issues/20271
@@ -1537,6 +1535,7 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
   events,
   ...props
 }, forwardedRef) {
+  const onPointerMissed = useMemoizedFn(props.onPointerMissed);
   const [containerRef, {
     width,
     height
@@ -1569,10 +1568,11 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
           width,
           height
         },
+        onPointerMissed,
         events: events || createPointerEvents
       });
     }
-  }, [width, height, children]);
+  }, [width, height, children, onPointerMissed]);
   useIsomorphicLayoutEffect(() => {
     const container = canvasRef.current;
     return () => unmountComponentAtNode(container);
@@ -1653,6 +1653,11 @@ function loadingFn(extensions, onProgress) {
   };
 }
 
+function useMemoizedFn(fn) {
+  const fnRef = React.useRef(fn);
+  React.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];
@@ -1838,8 +1843,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];
   }
 }
@@ -1856,4 +1860,4 @@ reconciler.injectIntoDevTools({
   version: '17.0.2'
 });
 
-export { Canvas, threeTypes as ReactThreeFiber, roots as _roots, act, addAfterEffect, addEffect, addTail, advance, applyProps, context, createPortal, dispose, createPointerEvents as events, extend, invalidate, reconciler, render, unmountComponentAtNode, useFrame, useGraph, useLoader, useStore, useThree };
+export { Canvas, threeTypes as ReactThreeFiber, roots as _roots, act, addAfterEffect, addEffect, addTail, advance, applyProps, context, createPortal, dispose, createPointerEvents as events, extend, invalidate, reconciler, render, unmountComponentAtNode, useFrame, useGraph, useLoader, useMemoizedFn, useStore, useThree };

package/native/dist/react-three-fiber-native.cjs.d.ts

@@ -1 +1,11 @@
-export * from "../../dist/declarations/src/native";
+// are you seeing an error that a default export doesn't exist but your source file has a default export?
+// you should run `yarn` or `yarn preconstruct dev` if preconstruct dev isn't in your postinstall hook
+
+// curious why you need to?
+// this file exists so that you can import from the entrypoint normally
+// except that it points to your source file and you don't need to run build constantly
+// which means we need to re-export all of the modules from your source file
+// and since export * doesn't include default exports, we need to read your source file
+// to check for a default export and re-export it if it exists
+// it's not ideal, but it works pretty well ¯\_(ツ)_/¯
+export * from "../../src/native";

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

@@ -1,7 +1,16 @@
-'use strict';
+"use strict";
+// this file might look strange and you might be wondering what it's for
+// it's lets you import your source files by importing this entrypoint
+// as you would import it if it was built with preconstruct build
+// this file is slightly different to some others though
+// it has a require hook which compiles your code with Babel
+// this means that you don't have to set up @babel/register or anything like that
+// but you can still require this module and it'll be compiled
 
-if (process.env.NODE_ENV === "production") {
-  module.exports = require("./react-three-fiber-native.cjs.prod.js");
-} else {
-  module.exports = require("./react-three-fiber-native.cjs.dev.js");
-}
+// this bit of code imports the require hook and registers it
+let unregister = require("../../../../node_modules/@preconstruct/hook").___internalHook(typeof __dirname === 'undefined' ? undefined : __dirname, "../../../..", "../..");
+
+// this re-exports the source file
+module.exports = require("../../src/native.tsx");
+
+unregister();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/fiber",
-  "version": "7.0.26",
+  "version": "7.0.27",
   "description": "A React renderer for Threejs",
   "keywords": [
     "react",
@@ -42,6 +42,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
+    "@types/react-reconciler": "^0.26.2",
     "react-merge-refs": "^1.1.0",
     "react-reconciler": "^0.26.2",
     "react-three-fiber": "0.0.0-deprecated",