@react-three/fiber 8.0.10 → 8.0.13

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

@@ -19,14 +19,12 @@ function _interopNamespace(e) {
         var d = Object.getOwnPropertyDescriptor(e, k);
         Object.defineProperty(n, k, d.get ? d : {
           enumerable: true,
-          get: function () {
-            return e[k];
-          }
+          get: function () { return e[k]; }
         });
       }
     });
   }
-  n['default'] = e;
+  n["default"] = e;
   return Object.freeze(n);
 }
 
@@ -95,29 +93,6 @@ const getRootState = obj => {
 
   return (_r3f = obj.__r3f) == null ? void 0 : _r3f.root.getState();
 };
-/**
- * Picks or omits keys from an object
- * `omit` will filter out keys, and otherwise cherry-pick them.
- */
-
-function filterKeys(obj, omit, ...keys) {
-  const keysToSelect = new Set(keys);
-  return Object.entries(obj).reduce((acc, [key, value]) => {
-    const shouldInclude = !omit;
-    if (keysToSelect.has(key) === shouldInclude) acc[key] = value;
-    return acc;
-  }, {});
-}
-/**
- * Clones an object and cherry-picks keys.
- */
-
-const pick = (obj, keys) => filterKeys(obj, false, ...keys);
-/**
- * Clones an object and prunes or omits keys.
- */
-
-const omit = (obj, keys) => filterKeys(obj, true, ...keys);
 // A collection of compare functions
 const is = {
   obj: a => a === Object(a) && !is.arr(a) && typeof a !== 'function',
@@ -253,7 +228,10 @@ function detach(parent, child, type) {
       target,
       key
     } = resolve(parent, type);
-    target[key] = child.__r3f.previousAttach;
+    const previous = child.__r3f.previousAttach; // When the previous value was undefined, it means the value was never set to begin with
+
+    if (previous === undefined) delete target[key]; // Otherwise set the previous value
+    else target[key] = previous;
   } else (_child$__r3f = child.__r3f) == null ? void 0 : _child$__r3f.previousAttach == null ? void 0 : _child$__r3f.previousAttach(parent, child);
 
   (_child$__r3f2 = child.__r3f) == null ? true : delete _child$__r3f2.previousAttach;
@@ -343,12 +321,16 @@ function applyProps$1(instance, data) {
 
     if (value === DEFAULT + 'remove') {
       if (targetProp && targetProp.constructor) {
+        var _memoized$args;
+
         // use the prop constructor to find the default it should be
-        value = new targetProp.constructor(...memoized.args);
+        value = new targetProp.constructor(...((_memoized$args = memoized.args) != null ? _memoized$args : []));
       } else if (currentInstance.constructor) {
+        var _currentInstance$__r;
+
         // create a blank slate of the instance and copy the particular parameter.
         // @ts-ignore
-        const defaultClassCall = new currentInstance.constructor(...currentInstance.__r3f.memoizedProps.args);
+        const defaultClassCall = new currentInstance.constructor(...((_currentInstance$__r = currentInstance.__r3f.memoizedProps.args) != null ? _currentInstance$__r : []));
         value = defaultClassCall[targetProp]; // destory the instance
 
         if (defaultClassCall.dispose) defaultClassCall.dispose(); // instance does not have constructor, just set it to 0
@@ -363,35 +345,35 @@ function applyProps$1(instance, data) {
       localState.eventCount = Object.keys(localState.handlers).length;
     } // Special treatment for objects with support for set/copy, and layers
     else if (targetProp && targetProp.set && (targetProp.copy || targetProp instanceof THREE__namespace.Layers)) {
-        // If value is an array
-        if (Array.isArray(value)) {
-          if (targetProp.fromArray) targetProp.fromArray(value);else targetProp.set(...value);
-        } // Test again target.copy(class) next ...
-        else if (targetProp.copy && value && value.constructor && targetProp.constructor.name === value.constructor.name) {
-            targetProp.copy(value);
-          } // If nothing else fits, just set the single value, ignore undefined
-          // https://github.com/pmndrs/react-three-fiber/issues/274
-          else if (value !== undefined) {
-              const isColor = targetProp instanceof THREE__namespace.Color; // Allow setting array scalars
-
-              if (!isColor && targetProp.setScalar) targetProp.setScalar(value); // Layers have no copy function, we must therefore copy the mask property
-              else if (targetProp instanceof THREE__namespace.Layers && value instanceof THREE__namespace.Layers) targetProp.mask = value.mask; // Otherwise just set ...
-                else targetProp.set(value); // For versions of three which don't support THREE.ColorManagement,
-              // Auto-convert sRGB colors
-              // https://github.com/pmndrs/react-three-fiber/issues/344
-
-              const supportsColorManagement = THREE__namespace.ColorManagement;
-              if (!supportsColorManagement && !rootState.linear && isColor) targetProp.convertSRGBToLinear();
-            } // Else, just overwrite the value
-
-      } else {
-        currentInstance[key] = value; // Auto-convert sRGB textures, for now ...
+      // If value is an array
+      if (Array.isArray(value)) {
+        if (targetProp.fromArray) targetProp.fromArray(value);else targetProp.set(...value);
+      } // Test again target.copy(class) next ...
+      else if (targetProp.copy && value && value.constructor && targetProp.constructor.name === value.constructor.name) {
+        targetProp.copy(value);
+      } // If nothing else fits, just set the single value, ignore undefined
+      // https://github.com/pmndrs/react-three-fiber/issues/274
+      else if (value !== undefined) {
+        const isColor = targetProp instanceof THREE__namespace.Color; // Allow setting array scalars
+
+        if (!isColor && targetProp.setScalar) targetProp.setScalar(value); // Layers have no copy function, we must therefore copy the mask property
+        else if (targetProp instanceof THREE__namespace.Layers && value instanceof THREE__namespace.Layers) targetProp.mask = value.mask; // Otherwise just set ...
+        else targetProp.set(value); // For versions of three which don't support THREE.ColorManagement,
+        // Auto-convert sRGB colors
         // https://github.com/pmndrs/react-three-fiber/issues/344
 
-        if (!rootState.linear && currentInstance[key] instanceof THREE__namespace.Texture) {
-          currentInstance[key].encoding = THREE__namespace.sRGBEncoding;
-        }
+        const supportsColorManagement = THREE__namespace.ColorManagement;
+        if (!supportsColorManagement && !rootState.linear && isColor) targetProp.convertSRGBToLinear();
+      } // Else, just overwrite the value
+
+    } else {
+      currentInstance[key] = value; // Auto-convert sRGB textures, for now ...
+      // https://github.com/pmndrs/react-three-fiber/issues/344
+
+      if (!rootState.linear && currentInstance[key] instanceof THREE__namespace.Texture) {
+        currentInstance[key].encoding = THREE__namespace.sRGBEncoding;
       }
+    }
 
     invalidateInstance(instance);
   });
@@ -1075,7 +1057,7 @@ function createRenderer(roots, getEventPriority) {
     });
   }
 
-  const reconciler = Reconciler__default['default']({
+  const reconciler = Reconciler__default["default"]({
     createInstance,
     removeChild,
     appendChild,
@@ -1160,7 +1142,6 @@ function createRenderer(roots, getEventPriority) {
     shouldSetTextContent: () => false,
     clearContainer: () => false,
     detachDeletedInstance: () => {},
-    createTextInstance: () => {},
 
     hideInstance(instance) {
       var _instance$__r3f5;
@@ -1188,10 +1169,11 @@ function createRenderer(roots, getEventPriority) {
       invalidateInstance(instance);
     },
 
+    createTextInstance: () => {},
     hideTextInstance: () => {
       throw new Error('Text is not allowed in the R3F tree.');
     },
-    // prettier-ignore
+    unhideTextInstance: () => {},
     getCurrentEventPriority: () => getEventPriority ? getEventPriority() : constants.DefaultEventPriority,
     // @ts-ignore
     now: typeof performance !== 'undefined' && is.fun(performance.now) ? performance.now : is.fun(Date.now) ? Date.now : undefined,
@@ -1208,11 +1190,12 @@ function createRenderer(roots, getEventPriority) {
   };
 }
 
+const privateKeys = ['set', 'get', 'setSize', 'setFrameloop', 'setDpr', 'events', 'invalidate', 'advance', 'size', 'viewport'];
 const isRenderer = def => !!(def != null && def.render);
 const context = /*#__PURE__*/React__namespace.createContext(null);
 
 const createStore = (invalidate, advance) => {
-  const rootState = create__default['default']((set, get) => {
+  const rootState = create__default["default"]((set, get) => {
     const position = new THREE__namespace.Vector3();
     const defaultTarget = new THREE__namespace.Vector3();
     const tempTarget = new THREE__namespace.Vector3();
@@ -1960,29 +1943,28 @@ function Portal({
   const previousRoot = useStore();
   const [raycaster] = React__namespace.useState(() => new THREE__namespace.Raycaster());
   const [pointer] = React__namespace.useState(() => new THREE__namespace.Vector2());
-  const inject = React__namespace.useCallback((state, injectState) => {
-    const intersect = { ...state
-    };
-
-    if (injectState) {
-      // Only the fields of "state" that do not differ from injectState
-      // Some props should be off-limits
-      // Otherwise filter out the props that are different and let the inject layer take precedence
-      Object.keys(state).forEach(key => {
-        if (state[key] !== injectState[key] && !['internal', 'performance'].includes(key)) {
-          delete intersect[key];
-        }
-      });
-    }
-
+  const inject = React__namespace.useCallback((rootState, injectState) => {
+    const intersect = { ...rootState
+    }; // all prev state props
+    // Only the fields of "rootState" that do not differ from injectState
+    // Some props should be off-limits
+    // Otherwise filter out the props that are different and let the inject layer take precedence
+
+    Object.keys(rootState).forEach(key => {
+      if ( // Some props should be off-limits
+      privateKeys.includes(key) || // Otherwise filter out the props that are different and let the inject layer take precedence
+      rootState[key] !== injectState[key]) {
+        delete intersect[key];
+      }
+    });
     let viewport = undefined;
 
     if (injectState && size) {
       const camera = injectState.camera; // Calculate the override viewport, if present
 
-      viewport = state.viewport.getCurrentViewport(camera, new THREE__namespace.Vector3(), size); // Update the portal camera, if it differs from the previous layer
+      viewport = rootState.viewport.getCurrentViewport(camera, new THREE__namespace.Vector3(), size); // Update the portal camera, if it differs from the previous layer
 
-      if (camera !== state.camera) updateCamera(camera, size);
+      if (camera !== rootState.camera) updateCamera(camera, size);
     }
 
     return { // The intersect consists of the previous root state
@@ -1995,14 +1977,14 @@ function Portal({
       // Their previous root is the layer before it
       previousRoot,
       // Events, size and viewport can be overridden by the inject layer
-      events: { ...state.events,
+      events: { ...rootState.events,
         ...(injectState == null ? void 0 : injectState.events),
         ...events
       },
-      size: { ...state.size,
+      size: { ...rootState.size,
         ...size
       },
-      viewport: { ...state.viewport,
+      viewport: { ...rootState.viewport,
         ...viewport
       },
       ...rest
@@ -2010,9 +1992,20 @@ function Portal({
   }, [state]);
   const [usePortalStore] = React__namespace.useState(() => {
     // Create a mirrored store, based on the previous root with a few overrides ...
-    new THREE__namespace.Vector3();
     const previousState = previousRoot.getState();
-    const store = create__default['default']((set, get) => ({ ...inject(previousState),
+    const store = create__default["default"]((set, get) => ({ ...previousState,
+      scene: container,
+      raycaster,
+      pointer,
+      mouse: pointer,
+      previousRoot,
+      events: { ...previousState.events,
+        ...events
+      },
+      size: { ...previousState.size,
+        ...size
+      },
+      ...rest,
       // Set and get refer to this root-state
       set,
       get,
@@ -2064,8 +2057,6 @@ exports.dispose = dispose;
 exports.extend = extend;
 exports.getRootState = getRootState;
 exports.invalidate = invalidate;
-exports.omit = omit;
-exports.pick = pick;
 exports.reconciler = reconciler;
 exports.render = render;
 exports.roots = roots;

package/dist/{index-91152509.esm.js → index-ec95272c.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',
@@ -224,7 +201,10 @@ function detach(parent, child, type) {
       target,
       key
     } = resolve(parent, type);
-    target[key] = child.__r3f.previousAttach;
+    const previous = child.__r3f.previousAttach; // When the previous value was undefined, it means the value was never set to begin with
+
+    if (previous === undefined) delete target[key]; // Otherwise set the previous value
+    else target[key] = previous;
   } else (_child$__r3f = child.__r3f) == null ? void 0 : _child$__r3f.previousAttach == null ? void 0 : _child$__r3f.previousAttach(parent, child);
 
   (_child$__r3f2 = child.__r3f) == null ? true : delete _child$__r3f2.previousAttach;
@@ -314,12 +294,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
@@ -334,35 +318,35 @@ function applyProps$1(instance, data) {
       localState.eventCount = Object.keys(localState.handlers).length;
     } // Special treatment for objects with support for set/copy, and layers
     else if (targetProp && targetProp.set && (targetProp.copy || targetProp instanceof THREE.Layers)) {
-        // If value is an array
-        if (Array.isArray(value)) {
-          if (targetProp.fromArray) targetProp.fromArray(value);else targetProp.set(...value);
-        } // Test again target.copy(class) next ...
-        else if (targetProp.copy && value && value.constructor && targetProp.constructor.name === value.constructor.name) {
-            targetProp.copy(value);
-          } // If nothing else fits, just set the single value, ignore undefined
-          // https://github.com/pmndrs/react-three-fiber/issues/274
-          else if (value !== undefined) {
-              const isColor = targetProp instanceof THREE.Color; // Allow setting array scalars
-
-              if (!isColor && targetProp.setScalar) targetProp.setScalar(value); // Layers have no copy function, we must therefore copy the mask property
-              else if (targetProp instanceof THREE.Layers && value instanceof THREE.Layers) targetProp.mask = value.mask; // Otherwise just set ...
-                else targetProp.set(value); // For versions of three which don't support THREE.ColorManagement,
-              // Auto-convert sRGB colors
-              // https://github.com/pmndrs/react-three-fiber/issues/344
-
-              const supportsColorManagement = THREE.ColorManagement;
-              if (!supportsColorManagement && !rootState.linear && isColor) targetProp.convertSRGBToLinear();
-            } // Else, just overwrite the value
-
-      } else {
-        currentInstance[key] = value; // Auto-convert sRGB textures, for now ...
+      // If value is an array
+      if (Array.isArray(value)) {
+        if (targetProp.fromArray) targetProp.fromArray(value);else targetProp.set(...value);
+      } // Test again target.copy(class) next ...
+      else if (targetProp.copy && value && value.constructor && targetProp.constructor.name === value.constructor.name) {
+        targetProp.copy(value);
+      } // If nothing else fits, just set the single value, ignore undefined
+      // https://github.com/pmndrs/react-three-fiber/issues/274
+      else if (value !== undefined) {
+        const isColor = targetProp instanceof THREE.Color; // Allow setting array scalars
+
+        if (!isColor && targetProp.setScalar) targetProp.setScalar(value); // Layers have no copy function, we must therefore copy the mask property
+        else if (targetProp instanceof THREE.Layers && value instanceof THREE.Layers) targetProp.mask = value.mask; // Otherwise just set ...
+        else targetProp.set(value); // For versions of three which don't support THREE.ColorManagement,
+        // Auto-convert sRGB colors
         // https://github.com/pmndrs/react-three-fiber/issues/344
 
-        if (!rootState.linear && currentInstance[key] instanceof THREE.Texture) {
-          currentInstance[key].encoding = THREE.sRGBEncoding;
-        }
+        const supportsColorManagement = THREE.ColorManagement;
+        if (!supportsColorManagement && !rootState.linear && isColor) targetProp.convertSRGBToLinear();
+      } // Else, just overwrite the value
+
+    } else {
+      currentInstance[key] = value; // Auto-convert sRGB textures, for now ...
+      // https://github.com/pmndrs/react-three-fiber/issues/344
+
+      if (!rootState.linear && currentInstance[key] instanceof THREE.Texture) {
+        currentInstance[key].encoding = THREE.sRGBEncoding;
       }
+    }
 
     invalidateInstance(instance);
   });
@@ -1131,7 +1115,6 @@ function createRenderer(roots, getEventPriority) {
     shouldSetTextContent: () => false,
     clearContainer: () => false,
     detachDeletedInstance: () => {},
-    createTextInstance: () => {},
 
     hideInstance(instance) {
       var _instance$__r3f5;
@@ -1159,10 +1142,11 @@ function createRenderer(roots, getEventPriority) {
       invalidateInstance(instance);
     },
 
+    createTextInstance: () => {},
     hideTextInstance: () => {
       throw new Error('Text is not allowed in the R3F tree.');
     },
-    // prettier-ignore
+    unhideTextInstance: () => {},
     getCurrentEventPriority: () => getEventPriority ? getEventPriority() : DefaultEventPriority,
     // @ts-ignore
     now: typeof performance !== 'undefined' && is.fun(performance.now) ? performance.now : is.fun(Date.now) ? Date.now : undefined,
@@ -1179,6 +1163,7 @@ function createRenderer(roots, getEventPriority) {
   };
 }
 
+const privateKeys = ['set', 'get', 'setSize', 'setFrameloop', 'setDpr', 'events', 'invalidate', 'advance', 'size', 'viewport'];
 const isRenderer = def => !!(def != null && def.render);
 const context = /*#__PURE__*/React.createContext(null);
 
@@ -1931,29 +1916,28 @@ function Portal({
   const previousRoot = useStore();
   const [raycaster] = React.useState(() => new THREE.Raycaster());
   const [pointer] = React.useState(() => new THREE.Vector2());
-  const inject = React.useCallback((state, injectState) => {
-    const intersect = { ...state
-    };
-
-    if (injectState) {
-      // Only the fields of "state" that do not differ from injectState
-      // Some props should be off-limits
-      // Otherwise filter out the props that are different and let the inject layer take precedence
-      Object.keys(state).forEach(key => {
-        if (state[key] !== injectState[key] && !['internal', 'performance'].includes(key)) {
-          delete intersect[key];
-        }
-      });
-    }
-
+  const inject = React.useCallback((rootState, injectState) => {
+    const intersect = { ...rootState
+    }; // all prev state props
+    // Only the fields of "rootState" that do not differ from injectState
+    // Some props should be off-limits
+    // Otherwise filter out the props that are different and let the inject layer take precedence
+
+    Object.keys(rootState).forEach(key => {
+      if ( // Some props should be off-limits
+      privateKeys.includes(key) || // Otherwise filter out the props that are different and let the inject layer take precedence
+      rootState[key] !== injectState[key]) {
+        delete intersect[key];
+      }
+    });
     let viewport = undefined;
 
     if (injectState && size) {
       const camera = injectState.camera; // Calculate the override viewport, if present
 
-      viewport = state.viewport.getCurrentViewport(camera, new THREE.Vector3(), size); // Update the portal camera, if it differs from the previous layer
+      viewport = rootState.viewport.getCurrentViewport(camera, new THREE.Vector3(), size); // Update the portal camera, if it differs from the previous layer
 
-      if (camera !== state.camera) updateCamera(camera, size);
+      if (camera !== rootState.camera) updateCamera(camera, size);
     }
 
     return { // The intersect consists of the previous root state
@@ -1966,14 +1950,14 @@ function Portal({
       // Their previous root is the layer before it
       previousRoot,
       // Events, size and viewport can be overridden by the inject layer
-      events: { ...state.events,
+      events: { ...rootState.events,
         ...(injectState == null ? void 0 : injectState.events),
         ...events
       },
-      size: { ...state.size,
+      size: { ...rootState.size,
         ...size
       },
-      viewport: { ...state.viewport,
+      viewport: { ...rootState.viewport,
         ...viewport
       },
       ...rest
@@ -1981,9 +1965,20 @@ function Portal({
   }, [state]);
   const [usePortalStore] = React.useState(() => {
     // Create a mirrored store, based on the previous root with a few overrides ...
-    new THREE.Vector3();
     const previousState = previousRoot.getState();
-    const store = create((set, get) => ({ ...inject(previousState),
+    const store = create((set, get) => ({ ...previousState,
+      scene: container,
+      raycaster,
+      pointer,
+      mouse: pointer,
+      previousRoot,
+      events: { ...previousState.events,
+        ...events
+      },
+      size: { ...previousState.size,
+        ...size
+      },
+      ...rest,
       // Set and get refer to this root-state
       set,
       get,
@@ -2019,4 +2014,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/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-9ced08b3.cjs.dev.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
@@ -25,14 +25,12 @@ function _interopNamespace(e) {
         var d = Object.getOwnPropertyDescriptor(e, k);
         Object.defineProperty(n, k, d.get ? d : {
           enumerable: true,
-          get: function () {
-            return e[k];
-          }
+          get: function () { return e[k]; }
         });
       }
     });
   }
-  n['default'] = e;
+  n["default"] = e;
   return Object.freeze(n);
 }
 
@@ -119,19 +117,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
@@ -141,7 +149,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   const [containerRef, {
     width,
     height
-  }] = useMeasure__default['default']({
+  }] = useMeasure__default["default"]({
     scroll: true,
     debounce: {
       scroll: 50,
@@ -153,8 +161,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 +171,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
@@ -194,7 +211,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
     if (canvas) return () => index.unmountComponentAtNode(canvas);
   }, [canvas]);
   return /*#__PURE__*/React__namespace.createElement("div", _extends({
-    ref: mergeRefs__default['default']([meshRef, containerRef]),
+    ref: mergeRefs__default["default"]([meshRef, containerRef]),
     style: {
       position: 'relative',
       width: '100%',
@@ -202,8 +219,8 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
       overflow: 'hidden',
       ...style
     }
-  }, divProps), /*#__PURE__*/React__namespace.createElement("canvas", {
-    ref: mergeRefs__default['default']([canvasRef, forwardedRef]),
+  }, props), /*#__PURE__*/React__namespace.createElement("canvas", {
+    ref: mergeRefs__default["default"]([canvasRef, forwardedRef]),
     style: {
       display: 'block'
     }