@react-three/fiber 8.0.10 → 8.0.11

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @react-three/fiber
 
+## 8.0.11
+
+### Patch Changes
+
+- 5167b1e4: memoized.args can be undefined
+
 ## 8.0.10
 
 ### Patch Changes

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", "performance", "internal", "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

@@ -47,11 +47,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;
 }

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

@@ -66,29 +66,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',
@@ -314,12 +291,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
@@ -1179,6 +1160,7 @@ function createRenderer(roots, getEventPriority) {
   };
 }
 
+const privateKeys = ['set', 'get', 'setSize', 'setFrameloop', 'setDpr', 'events', 'invalidate', 'advance', 'performance', 'internal', 'size', 'viewport'];
 const isRenderer = def => !!(def != null && def.render);
 const context = /*#__PURE__*/React.createContext(null);
 
@@ -1940,9 +1922,9 @@ function Portal({
       // 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];
-        }
+        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];
       });
     }
 
@@ -2019,4 +2001,4 @@ reconciler.injectIntoDevTools({
 });
 const act = React.unstable_act;
 
-export { useGraph as A, Block as B, useLoader as C, ErrorBoundary as E, createRoot as a, useIsomorphicLayoutEffect as b, createEvents as c, unmountComponentAtNode as d, extend as e, context as f, createPortal as g, reconciler as h, applyProps as i, dispose as j, invalidate as k, advance as l, addEffect as m, addAfterEffect as n, omit as o, pick as p, addTail as q, render as r, getRootState as s, threeTypes as t, useMutableCallback as u, act as v, roots as w, useStore as x, useThree as y, useFrame as z };
+export { Block as B, ErrorBoundary as E, createRoot as a, useIsomorphicLayoutEffect as b, createEvents as c, unmountComponentAtNode as d, extend as e, context as f, createPortal as g, reconciler as h, applyProps as i, dispose as j, invalidate as k, advance as l, addEffect as m, addAfterEffect as n, addTail as o, getRootState as p, act as q, render as r, roots as s, threeTypes as t, useMutableCallback as u, useStore as v, useThree as w, useFrame as x, useGraph as y, useLoader as z };

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

@@ -95,29 +95,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',
@@ -343,12 +320,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
@@ -1208,6 +1189,7 @@ function createRenderer(roots, getEventPriority) {
   };
 }
 
+const privateKeys = ['set', 'get', 'setSize', 'setFrameloop', 'setDpr', 'events', 'invalidate', 'advance', 'performance', 'internal', 'size', 'viewport'];
 const isRenderer = def => !!(def != null && def.render);
 const context = /*#__PURE__*/React__namespace.createContext(null);
 
@@ -1969,9 +1951,9 @@ function Portal({
       // 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];
-        }
+        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];
       });
     }
 
@@ -2064,8 +2046,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;

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

@@ -95,29 +95,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',
@@ -343,12 +320,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
@@ -1208,6 +1189,7 @@ function createRenderer(roots, getEventPriority) {
   };
 }
 
+const privateKeys = ['set', 'get', 'setSize', 'setFrameloop', 'setDpr', 'events', 'invalidate', 'advance', 'performance', 'internal', 'size', 'viewport'];
 const isRenderer = def => !!(def != null && def.render);
 const context = /*#__PURE__*/React__namespace.createContext(null);
 
@@ -1969,9 +1951,9 @@ function Portal({
       // 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];
-        }
+        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];
       });
     }
 
@@ -2064,8 +2046,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;

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-018d2d45.cjs.dev.js');
+var index = require('./index-f7939a95.cjs.dev.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
@@ -119,19 +119,29 @@ function createPointerEvents(store) {
   };
 }
 
-const CANVAS_PROPS = ['gl', 'events', 'shadows', 'linear', 'flat', 'legacy', 'orthographic', 'frameloop', 'dpr', 'performance', 'raycaster', 'camera', 'onPointerMissed', 'onCreated'];
 /**
  * A DOM canvas which accepts threejs elements as children.
  * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
  */
-
 const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   children,
   fallback,
   resize,
   style,
-  onPointerMissed,
+  gl,
   events = createPointerEvents,
+  shadows,
+  linear,
+  flat,
+  legacy,
+  orthographic,
+  frameloop,
+  dpr,
+  performance,
+  raycaster,
+  camera,
+  onPointerMissed,
+  onCreated,
   ...props
 }, forwardedRef) {
   // Create a known catalogue of Threejs-native elements
@@ -153,8 +163,6 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   const meshRef = React__namespace.useRef(null);
   const [canvas, setCanvas] = React__namespace.useState(null);
   const handlePointerMissed = index.useMutableCallback(onPointerMissed);
-  const canvasProps = index.pick(props, CANVAS_PROPS);
-  const divProps = index.omit(props, CANVAS_PROPS);
   const [block, setBlock] = React__namespace.useState(false);
   const [error, setError] = React__namespace.useState(false); // Suspend this component if block is a promise (2nd run)
 
@@ -165,18 +173,29 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
 
   if (width > 0 && height > 0 && canvas) {
     if (!root.current) root.current = index.createRoot(canvas);
-    root.current.configure({ ...canvasProps,
-      // Pass mutable reference to onPointerMissed so it's free to update
-      onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
-      onCreated: state => {
-        state.events.connect == null ? void 0 : state.events.connect(meshRef.current);
-        canvasProps.onCreated == null ? void 0 : canvasProps.onCreated(state);
-      },
+    root.current.configure({
+      gl,
+      events,
+      shadows,
+      linear,
+      flat,
+      legacy,
+      orthographic,
+      frameloop,
+      dpr,
+      performance,
+      raycaster,
+      camera,
       size: {
         width,
         height
       },
-      events
+      // Pass mutable reference to onPointerMissed so it's free to update
+      onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
+      onCreated: state => {
+        state.events.connect == null ? void 0 : state.events.connect(meshRef.current);
+        onCreated == null ? void 0 : onCreated(state);
+      }
     });
     root.current.render( /*#__PURE__*/React__namespace.createElement(index.ErrorBoundary, {
       set: setError
@@ -202,7 +221,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
       overflow: 'hidden',
       ...style
     }
-  }, divProps), /*#__PURE__*/React__namespace.createElement("canvas", {
+  }, props), /*#__PURE__*/React__namespace.createElement("canvas", {
     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-c8c0474b.cjs.prod.js');
+var index = require('./index-e936c560.cjs.prod.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
@@ -119,19 +119,29 @@ function createPointerEvents(store) {
   };
 }
 
-const CANVAS_PROPS = ['gl', 'events', 'shadows', 'linear', 'flat', 'legacy', 'orthographic', 'frameloop', 'dpr', 'performance', 'raycaster', 'camera', 'onPointerMissed', 'onCreated'];
 /**
  * A DOM canvas which accepts threejs elements as children.
  * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
  */
-
 const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   children,
   fallback,
   resize,
   style,
-  onPointerMissed,
+  gl,
   events = createPointerEvents,
+  shadows,
+  linear,
+  flat,
+  legacy,
+  orthographic,
+  frameloop,
+  dpr,
+  performance,
+  raycaster,
+  camera,
+  onPointerMissed,
+  onCreated,
   ...props
 }, forwardedRef) {
   // Create a known catalogue of Threejs-native elements
@@ -153,8 +163,6 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   const meshRef = React__namespace.useRef(null);
   const [canvas, setCanvas] = React__namespace.useState(null);
   const handlePointerMissed = index.useMutableCallback(onPointerMissed);
-  const canvasProps = index.pick(props, CANVAS_PROPS);
-  const divProps = index.omit(props, CANVAS_PROPS);
   const [block, setBlock] = React__namespace.useState(false);
   const [error, setError] = React__namespace.useState(false); // Suspend this component if block is a promise (2nd run)
 
@@ -165,18 +173,29 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
 
   if (width > 0 && height > 0 && canvas) {
     if (!root.current) root.current = index.createRoot(canvas);
-    root.current.configure({ ...canvasProps,
-      // Pass mutable reference to onPointerMissed so it's free to update
-      onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
-      onCreated: state => {
-        state.events.connect == null ? void 0 : state.events.connect(meshRef.current);
-        canvasProps.onCreated == null ? void 0 : canvasProps.onCreated(state);
-      },
+    root.current.configure({
+      gl,
+      events,
+      shadows,
+      linear,
+      flat,
+      legacy,
+      orthographic,
+      frameloop,
+      dpr,
+      performance,
+      raycaster,
+      camera,
       size: {
         width,
         height
       },
-      events
+      // Pass mutable reference to onPointerMissed so it's free to update
+      onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
+      onCreated: state => {
+        state.events.connect == null ? void 0 : state.events.connect(meshRef.current);
+        onCreated == null ? void 0 : onCreated(state);
+      }
     });
     root.current.render( /*#__PURE__*/React__namespace.createElement(index.ErrorBoundary, {
       set: setError
@@ -202,7 +221,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
       overflow: 'hidden',
       ...style
     }
-  }, divProps), /*#__PURE__*/React__namespace.createElement("canvas", {
+  }, props), /*#__PURE__*/React__namespace.createElement("canvas", {
     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, p as pick, o as omit, a as createRoot, E as ErrorBoundary, B as Block, b as useIsomorphicLayoutEffect, d as unmountComponentAtNode } from './index-91152509.esm.js';
-export { t as ReactThreeFiber, w as _roots, v as act, n as addAfterEffect, m as addEffect, q as addTail, l as advance, i as applyProps, f as context, g as createPortal, a as createRoot, j as dispose, e as extend, s as getRootState, k as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, z as useFrame, A as useGraph, C as useLoader, x as useStore, y as useThree } from './index-91152509.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-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 _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import * as THREE from 'three';
@@ -89,19 +89,29 @@ function createPointerEvents(store) {
   };
 }
 
-const CANVAS_PROPS = ['gl', 'events', 'shadows', 'linear', 'flat', 'legacy', 'orthographic', 'frameloop', 'dpr', 'performance', 'raycaster', 'camera', 'onPointerMissed', 'onCreated'];
 /**
  * A DOM canvas which accepts threejs elements as children.
  * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
  */
-
 const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
   children,
   fallback,
   resize,
   style,
-  onPointerMissed,
+  gl,
   events = createPointerEvents,
+  shadows,
+  linear,
+  flat,
+  legacy,
+  orthographic,
+  frameloop,
+  dpr,
+  performance,
+  raycaster,
+  camera,
+  onPointerMissed,
+  onCreated,
   ...props
 }, forwardedRef) {
   // Create a known catalogue of Threejs-native elements
@@ -123,8 +133,6 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
   const meshRef = React.useRef(null);
   const [canvas, setCanvas] = React.useState(null);
   const handlePointerMissed = useMutableCallback(onPointerMissed);
-  const canvasProps = pick(props, CANVAS_PROPS);
-  const divProps = omit(props, CANVAS_PROPS);
   const [block, setBlock] = React.useState(false);
   const [error, setError] = React.useState(false); // Suspend this component if block is a promise (2nd run)
 
@@ -135,18 +143,29 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
 
   if (width > 0 && height > 0 && canvas) {
     if (!root.current) root.current = createRoot(canvas);
-    root.current.configure({ ...canvasProps,
-      // Pass mutable reference to onPointerMissed so it's free to update
-      onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
-      onCreated: state => {
-        state.events.connect == null ? void 0 : state.events.connect(meshRef.current);
-        canvasProps.onCreated == null ? void 0 : canvasProps.onCreated(state);
-      },
+    root.current.configure({
+      gl,
+      events,
+      shadows,
+      linear,
+      flat,
+      legacy,
+      orthographic,
+      frameloop,
+      dpr,
+      performance,
+      raycaster,
+      camera,
       size: {
         width,
         height
       },
-      events
+      // Pass mutable reference to onPointerMissed so it's free to update
+      onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
+      onCreated: state => {
+        state.events.connect == null ? void 0 : state.events.connect(meshRef.current);
+        onCreated == null ? void 0 : onCreated(state);
+      }
     });
     root.current.render( /*#__PURE__*/React.createElement(ErrorBoundary, {
       set: setError
@@ -172,7 +191,7 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
       overflow: 'hidden',
       ...style
     }
-  }, divProps), /*#__PURE__*/React.createElement("canvas", {
+  }, props), /*#__PURE__*/React.createElement("canvas", {
     ref: mergeRefs([canvasRef, forwardedRef]),
     style: {
       display: 'block'

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-018d2d45.cjs.dev.js');
+var index = require('../../dist/index-f7939a95.cjs.dev.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var mergeRefs = require('react-merge-refs');
@@ -127,17 +127,26 @@ function createTouchEvents(store) {
   };
 }
 
-const CANVAS_PROPS = ['gl', 'events', 'shadows', 'linear', 'flat', 'legacy', 'orthographic', 'frameloop', 'performance', 'raycaster', 'camera', 'onPointerMissed', 'onCreated'];
 /**
  * A native canvas which accepts threejs elements as children.
  * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
  */
-
 const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
   children,
   style,
-  events,
+  gl,
+  events = createTouchEvents,
+  shadows,
+  linear,
+  flat,
+  legacy,
+  orthographic,
+  frameloop,
+  performance,
+  raycaster,
+  camera,
   onPointerMissed,
+  onCreated,
   ...props
 }, forwardedRef) => {
   // Create a known catalogue of Threejs-native elements
@@ -154,8 +163,6 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
   const [canvas, setCanvas] = React__namespace.useState(null);
   const [bind, setBind] = React__namespace.useState();
   const handlePointerMissed = index.useMutableCallback(onPointerMissed);
-  const canvasProps = index.pick(props, CANVAS_PROPS);
-  const viewProps = index.omit(props, CANVAS_PROPS);
   const [block, setBlock] = React__namespace.useState(false);
   const [error, setError] = React__namespace.useState(false); // Suspend this component if block is a promise (2nd run)
 
@@ -188,27 +195,19 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
   }, []);
 
   if (width > 0 && height > 0 && canvas) {
-    if (!root.current) root.current = index.createRoot(canvas); // Overwrite onCreated to apply RN bindings
-
-    const onCreated = state => {
-      // Bind events after creation
-      const handlers = state.events.connect == null ? void 0 : state.events.connect(viewRef.current);
-      setBind(handlers); // Bind render to RN bridge
-
-      const context = state.gl.getContext();
-      const renderFrame = state.gl.render.bind(state.gl);
-
-      state.gl.render = (scene, camera) => {
-        renderFrame(scene, camera);
-        context.endFrameEXP();
-      };
-
-      return canvasProps == null ? void 0 : canvasProps.onCreated == null ? void 0 : canvasProps.onCreated(state);
-    };
-
-    root.current.configure({ ...canvasProps,
-      // Pass mutable reference to onPointerMissed so it's free to update
-      onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
+    if (!root.current) root.current = index.createRoot(canvas);
+    root.current.configure({
+      gl,
+      events,
+      shadows,
+      linear,
+      flat,
+      legacy,
+      orthographic,
+      frameloop,
+      performance,
+      raycaster,
+      camera,
       // expo-gl can only render at native dpr/resolution
       // https://github.com/expo/expo-three/issues/39
       dpr: reactNative.PixelRatio.get(),
@@ -216,8 +215,24 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
         width,
         height
       },
-      events: events || createTouchEvents,
-      onCreated
+      // Pass mutable reference to onPointerMissed so it's free to update
+      onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
+      // Overwrite onCreated to apply RN bindings
+      onCreated: state => {
+        // Bind events after creation
+        const handlers = state.events.connect == null ? void 0 : state.events.connect(viewRef.current);
+        setBind(handlers); // Bind render to RN bridge
+
+        const context = state.gl.getContext();
+        const renderFrame = state.gl.render.bind(state.gl);
+
+        state.gl.render = (scene, camera) => {
+          renderFrame(scene, camera);
+          context.endFrameEXP();
+        };
+
+        return onCreated == null ? void 0 : onCreated(state);
+      }
     });
     root.current.render( /*#__PURE__*/React__namespace.createElement(index.ErrorBoundary, {
       set: setError
@@ -233,7 +248,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
       return () => index.unmountComponentAtNode(canvas);
     }
   }, [canvas]);
-  return /*#__PURE__*/React__namespace.createElement(reactNative.View, _extends({}, viewProps, {
+  return /*#__PURE__*/React__namespace.createElement(reactNative.View, _extends({}, props, {
     ref: mergeRefs__default['default']([viewRef, forwardedRef]),
     onLayout: onLayout,
     style: {

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-c8c0474b.cjs.prod.js');
+var index = require('../../dist/index-e936c560.cjs.prod.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var mergeRefs = require('react-merge-refs');
@@ -127,17 +127,26 @@ function createTouchEvents(store) {
   };
 }
 
-const CANVAS_PROPS = ['gl', 'events', 'shadows', 'linear', 'flat', 'legacy', 'orthographic', 'frameloop', 'performance', 'raycaster', 'camera', 'onPointerMissed', 'onCreated'];
 /**
  * A native canvas which accepts threejs elements as children.
  * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
  */
-
 const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
   children,
   style,
-  events,
+  gl,
+  events = createTouchEvents,
+  shadows,
+  linear,
+  flat,
+  legacy,
+  orthographic,
+  frameloop,
+  performance,
+  raycaster,
+  camera,
   onPointerMissed,
+  onCreated,
   ...props
 }, forwardedRef) => {
   // Create a known catalogue of Threejs-native elements
@@ -154,8 +163,6 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
   const [canvas, setCanvas] = React__namespace.useState(null);
   const [bind, setBind] = React__namespace.useState();
   const handlePointerMissed = index.useMutableCallback(onPointerMissed);
-  const canvasProps = index.pick(props, CANVAS_PROPS);
-  const viewProps = index.omit(props, CANVAS_PROPS);
   const [block, setBlock] = React__namespace.useState(false);
   const [error, setError] = React__namespace.useState(false); // Suspend this component if block is a promise (2nd run)
 
@@ -188,27 +195,19 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
   }, []);
 
   if (width > 0 && height > 0 && canvas) {
-    if (!root.current) root.current = index.createRoot(canvas); // Overwrite onCreated to apply RN bindings
-
-    const onCreated = state => {
-      // Bind events after creation
-      const handlers = state.events.connect == null ? void 0 : state.events.connect(viewRef.current);
-      setBind(handlers); // Bind render to RN bridge
-
-      const context = state.gl.getContext();
-      const renderFrame = state.gl.render.bind(state.gl);
-
-      state.gl.render = (scene, camera) => {
-        renderFrame(scene, camera);
-        context.endFrameEXP();
-      };
-
-      return canvasProps == null ? void 0 : canvasProps.onCreated == null ? void 0 : canvasProps.onCreated(state);
-    };
-
-    root.current.configure({ ...canvasProps,
-      // Pass mutable reference to onPointerMissed so it's free to update
-      onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
+    if (!root.current) root.current = index.createRoot(canvas);
+    root.current.configure({
+      gl,
+      events,
+      shadows,
+      linear,
+      flat,
+      legacy,
+      orthographic,
+      frameloop,
+      performance,
+      raycaster,
+      camera,
       // expo-gl can only render at native dpr/resolution
       // https://github.com/expo/expo-three/issues/39
       dpr: reactNative.PixelRatio.get(),
@@ -216,8 +215,24 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
         width,
         height
       },
-      events: events || createTouchEvents,
-      onCreated
+      // Pass mutable reference to onPointerMissed so it's free to update
+      onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
+      // Overwrite onCreated to apply RN bindings
+      onCreated: state => {
+        // Bind events after creation
+        const handlers = state.events.connect == null ? void 0 : state.events.connect(viewRef.current);
+        setBind(handlers); // Bind render to RN bridge
+
+        const context = state.gl.getContext();
+        const renderFrame = state.gl.render.bind(state.gl);
+
+        state.gl.render = (scene, camera) => {
+          renderFrame(scene, camera);
+          context.endFrameEXP();
+        };
+
+        return onCreated == null ? void 0 : onCreated(state);
+      }
     });
     root.current.render( /*#__PURE__*/React__namespace.createElement(index.ErrorBoundary, {
       set: setError
@@ -233,7 +248,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
       return () => index.unmountComponentAtNode(canvas);
     }
   }, [canvas]);
-  return /*#__PURE__*/React__namespace.createElement(reactNative.View, _extends({}, viewProps, {
+  return /*#__PURE__*/React__namespace.createElement(reactNative.View, _extends({}, props, {
     ref: mergeRefs__default['default']([viewRef, forwardedRef]),
     onLayout: onLayout,
     style: {

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, p as pick, o as omit, a as createRoot, E as ErrorBoundary, B as Block, d as unmountComponentAtNode } from '../../dist/index-91152509.esm.js';
-export { t as ReactThreeFiber, w as _roots, v as act, n as addAfterEffect, m as addEffect, q as addTail, l as advance, i as applyProps, f as context, g as createPortal, a as createRoot, j as dispose, e as extend, s as getRootState, k as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, z as useFrame, A as useGraph, C as useLoader, x as useStore, y as useThree } from '../../dist/index-91152509.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-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 _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import mergeRefs from 'react-merge-refs';
@@ -97,17 +97,26 @@ function createTouchEvents(store) {
   };
 }
 
-const CANVAS_PROPS = ['gl', 'events', 'shadows', 'linear', 'flat', 'legacy', 'orthographic', 'frameloop', 'performance', 'raycaster', 'camera', 'onPointerMissed', 'onCreated'];
 /**
  * A native canvas which accepts threejs elements as children.
  * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
  */
-
 const Canvas = /*#__PURE__*/React.forwardRef(({
   children,
   style,
-  events,
+  gl,
+  events = createTouchEvents,
+  shadows,
+  linear,
+  flat,
+  legacy,
+  orthographic,
+  frameloop,
+  performance,
+  raycaster,
+  camera,
   onPointerMissed,
+  onCreated,
   ...props
 }, forwardedRef) => {
   // Create a known catalogue of Threejs-native elements
@@ -124,8 +133,6 @@ const Canvas = /*#__PURE__*/React.forwardRef(({
   const [canvas, setCanvas] = React.useState(null);
   const [bind, setBind] = React.useState();
   const handlePointerMissed = useMutableCallback(onPointerMissed);
-  const canvasProps = pick(props, CANVAS_PROPS);
-  const viewProps = omit(props, CANVAS_PROPS);
   const [block, setBlock] = React.useState(false);
   const [error, setError] = React.useState(false); // Suspend this component if block is a promise (2nd run)
 
@@ -158,27 +165,19 @@ const Canvas = /*#__PURE__*/React.forwardRef(({
   }, []);
 
   if (width > 0 && height > 0 && canvas) {
-    if (!root.current) root.current = createRoot(canvas); // Overwrite onCreated to apply RN bindings
-
-    const onCreated = state => {
-      // Bind events after creation
-      const handlers = state.events.connect == null ? void 0 : state.events.connect(viewRef.current);
-      setBind(handlers); // Bind render to RN bridge
-
-      const context = state.gl.getContext();
-      const renderFrame = state.gl.render.bind(state.gl);
-
-      state.gl.render = (scene, camera) => {
-        renderFrame(scene, camera);
-        context.endFrameEXP();
-      };
-
-      return canvasProps == null ? void 0 : canvasProps.onCreated == null ? void 0 : canvasProps.onCreated(state);
-    };
-
-    root.current.configure({ ...canvasProps,
-      // Pass mutable reference to onPointerMissed so it's free to update
-      onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
+    if (!root.current) root.current = createRoot(canvas);
+    root.current.configure({
+      gl,
+      events,
+      shadows,
+      linear,
+      flat,
+      legacy,
+      orthographic,
+      frameloop,
+      performance,
+      raycaster,
+      camera,
       // expo-gl can only render at native dpr/resolution
       // https://github.com/expo/expo-three/issues/39
       dpr: PixelRatio.get(),
@@ -186,8 +185,24 @@ const Canvas = /*#__PURE__*/React.forwardRef(({
         width,
         height
       },
-      events: events || createTouchEvents,
-      onCreated
+      // Pass mutable reference to onPointerMissed so it's free to update
+      onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
+      // Overwrite onCreated to apply RN bindings
+      onCreated: state => {
+        // Bind events after creation
+        const handlers = state.events.connect == null ? void 0 : state.events.connect(viewRef.current);
+        setBind(handlers); // Bind render to RN bridge
+
+        const context = state.gl.getContext();
+        const renderFrame = state.gl.render.bind(state.gl);
+
+        state.gl.render = (scene, camera) => {
+          renderFrame(scene, camera);
+          context.endFrameEXP();
+        };
+
+        return onCreated == null ? void 0 : onCreated(state);
+      }
     });
     root.current.render( /*#__PURE__*/React.createElement(ErrorBoundary, {
       set: setError
@@ -203,7 +218,7 @@ const Canvas = /*#__PURE__*/React.forwardRef(({
       return () => unmountComponentAtNode(canvas);
     }
   }, [canvas]);
-  return /*#__PURE__*/React.createElement(View, _extends({}, viewProps, {
+  return /*#__PURE__*/React.createElement(View, _extends({}, props, {
     ref: mergeRefs([viewRef, forwardedRef]),
     onLayout: onLayout,
     style: {

package/package.json

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