@react-three/fiber 8.16.4 → 8.16.6

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @react-three/fiber
 
+## 8.16.6
+
+### Patch Changes
+
+- 03ab82fe: fix(applyProps): null check indeterminate instances
+
+## 8.16.5
+
+### Patch Changes
+
+- cb913e01: fix: use fast JSX, future JSX types
+
 ## 8.16.4
 
 ### Patch Changes

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

@@ -81,7 +81,7 @@ export declare type InjectState = Partial<Omit<RootState, PrivateKeys> & {
     };
     size?: Size;
 }>;
-declare function createPortal(children: React.ReactNode, container: THREE.Object3D, state?: InjectState): JSX.Element;
+declare function createPortal(children: React.ReactNode, container: THREE.Object3D, state?: InjectState): React.JSX.Element;
 declare const act: any;
 export * from './hooks';
 export { context, render, createRoot, unmountComponentAtNode, createPortal, reconciler, applyProps, dispose, invalidate, advance, extend, addEffect, addAfterEffect, addTail, flushGlobalEffects, getRootState, act, buildGraph, roots as _roots, };

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

@@ -121,10 +121,13 @@ export declare function dispose<TObj extends {
 export declare function prepare<T = THREE.Object3D>(object: T, state?: Partial<LocalState>): T;
 export declare function attach(parent: Instance, child: Instance, type: AttachType): void;
 export declare function detach(parent: Instance, child: Instance, type: AttachType): void;
-export declare function diffProps(instance: Instance, { children: cN, key: kN, ref: rN, ...props }: InstanceProps, { children: cP, key: kP, ref: rP, ...previous }?: InstanceProps, remove?: boolean): DiffSet;
-export declare function applyProps(instance: Instance, data: InstanceProps | DiffSet): Instance;
-export declare function invalidateInstance(instance: Instance): void;
-export declare function updateInstance(instance: Instance): void;
+declare type MaybeInstance = Omit<Instance, '__r3f'> & {
+    __r3f?: LocalState;
+};
+export declare function diffProps(instance: MaybeInstance, { children: cN, key: kN, ref: rN, ...props }: InstanceProps, { children: cP, key: kP, ref: rP, ...previous }?: InstanceProps, remove?: boolean): DiffSet;
+export declare function applyProps(instance: MaybeInstance, data: InstanceProps | DiffSet): MaybeInstance;
+export declare function invalidateInstance(instance: MaybeInstance): void;
+export declare function updateInstance(instance: MaybeInstance): void;
 export declare function updateCamera(camera: Camera & {
     manual?: boolean;
 }, size: Size): void;

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

@@ -390,4 +390,22 @@ declare global {
         }
     }
 }
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends ThreeElements {
+        }
+    }
+}
+declare module 'react/jsx-runtime' {
+    namespace JSX {
+        interface IntrinsicElements extends ThreeElements {
+        }
+    }
+}
+declare module 'react/jsx-dev-runtime' {
+    namespace JSX {
+        interface IntrinsicElements extends ThreeElements {
+        }
+    }
+}
 export {};

package/dist/{index-67aff14f.cjs.prod.js → index-4664c596.cjs.prod.js}

@@ -7,6 +7,7 @@ var create = require('zustand');
 var Reconciler = require('react-reconciler');
 var scheduler = require('scheduler');
 var suspendReact = require('suspend-react');
+var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -154,7 +155,7 @@ function createRenderer(_roots, _getEventPriority) {
       } else if (child.isObject3D && parentInstance.isObject3D) {
         var _child$__r3f4;
         parentInstance.remove(child);
-        // @ts-ignore
+        // @ts-expect-error
         // Remove interactivity on the initial root
         if ((_child$__r3f4 = child.__r3f) != null && _child$__r3f4.root) {
           removeInteractivity(findInitialRoot(child), child);
@@ -369,7 +370,7 @@ function createRenderer(_roots, _getEventPriority) {
     hideTextInstance: handleTextInstance,
     unhideTextInstance: handleTextInstance,
     // https://github.com/pmndrs/react-three-fiber/pull/2360#discussion_r916356874
-    // @ts-ignore
+    // @ts-expect-error
     getCurrentEventPriority: () => _getEventPriority ? _getEventPriority() : constants.DefaultEventPriority,
     beforeActiveInstanceBlur: () => {},
     afterActiveInstanceBlur: () => {},
@@ -612,7 +613,6 @@ function detach(parent, child, type) {
   } 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;
 }
-
 // This function prepares a set of changes to be applied to the instance
 function diffProps(instance, {
   children: cN,
@@ -625,8 +625,7 @@ function diffProps(instance, {
   ref: rP,
   ...previous
 } = {}, remove = false) {
-  var _instance$__r3f;
-  const localState = (_instance$__r3f = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f : {};
+  const localState = instance.__r3f;
   const entries = Object.entries(props);
   const changes = [];
 
@@ -638,9 +637,9 @@ function diffProps(instance, {
     }
   }
   entries.forEach(([key, value]) => {
-    var _instance$__r3f2;
+    var _instance$__r3f;
     // Bail out on primitive object
-    if ((_instance$__r3f2 = instance.__r3f) != null && _instance$__r3f2.primitive && key === 'object') return;
+    if ((_instance$__r3f = instance.__r3f) != null && _instance$__r3f.primitive && key === 'object') return;
     // When props match bail out
     if (is.equ(value, previous[key])) return;
     // Collect handlers and bail out
@@ -659,8 +658,8 @@ function diffProps(instance, {
   const memoized = {
     ...props
   };
-  if (localState.memoizedProps && localState.memoizedProps.args) memoized.args = localState.memoizedProps.args;
-  if (localState.memoizedProps && localState.memoizedProps.attach) memoized.attach = localState.memoizedProps.attach;
+  if (localState != null && localState.memoizedProps && localState != null && localState.memoizedProps.args) memoized.args = localState.memoizedProps.args;
+  if (localState != null && localState.memoizedProps && localState != null && localState.memoizedProps.attach) memoized.attach = localState.memoizedProps.attach;
   return {
     memoized,
     changes
@@ -670,16 +669,16 @@ const __DEV__ = typeof process !== 'undefined' &&         "production" !== 'prod
 
 // This function applies a set of changes to the instance
 function applyProps$1(instance, data) {
-  var _instance$__r3f3, _root$getState, _instance$__r3f4;
+  var _instance$__r3f2;
   // Filter equals, events and reserved props
-  const localState = (_instance$__r3f3 = instance.__r3f) != null ? _instance$__r3f3 : {};
-  const root = localState.root;
-  const rootState = (_root$getState = root == null ? void 0 : root.getState == null ? void 0 : root.getState()) != null ? _root$getState : {};
+  const localState = instance.__r3f;
+  const root = localState == null ? void 0 : localState.root;
+  const rootState = root == null ? void 0 : root.getState == null ? void 0 : root.getState();
   const {
     memoized,
     changes
   } = isDiffSet(data) ? data : diffProps(instance, data);
-  const prevHandlers = localState.eventCount;
+  const prevHandlers = localState == null ? void 0 : localState.eventCount;
 
   // Prepare memoized props
   if (instance.__r3f) instance.__r3f.memoizedProps = memoized;
@@ -724,7 +723,7 @@ function applyProps$1(instance, data) {
         // create a blank slate of the instance and copy the particular parameter.
         let ctor = DEFAULTS.get(currentInstance.constructor);
         if (!ctor) {
-          // @ts-ignore
+          // @ts-expect-error
           ctor = new currentInstance.constructor();
           DEFAULTS.set(currentInstance.constructor, ctor);
         }
@@ -736,7 +735,7 @@ function applyProps$1(instance, data) {
     }
 
     // Deal with pointer events ...
-    if (isEvent) {
+    if (isEvent && localState) {
       if (value) localState.handlers[key] = value;else delete localState.handlers[key];
       localState.eventCount = Object.keys(localState.handlers).length;
     }
@@ -768,7 +767,7 @@ function applyProps$1(instance, data) {
         // For versions of three which don't support THREE.ColorManagement,
         // Auto-convert sRGB colors
         // https://github.com/pmndrs/react-three-fiber/issues/344
-        if (!getColorManagement() && !rootState.linear && isColor) targetProp.convertSRGBToLinear();
+        if (!getColorManagement() && rootState && !rootState.linear && isColor) targetProp.convertSRGBToLinear();
       }
       // Else, just overwrite the value
     } else {
@@ -778,14 +777,14 @@ function applyProps$1(instance, data) {
       // https://github.com/pmndrs/react-three-fiber/issues/344
       if (currentInstance[key] instanceof THREE__namespace.Texture &&
       // sRGB textures must be RGBA8 since r137 https://github.com/mrdoob/three.js/pull/23129
-      currentInstance[key].format === THREE__namespace.RGBAFormat && currentInstance[key].type === THREE__namespace.UnsignedByteType) {
+      currentInstance[key].format === THREE__namespace.RGBAFormat && currentInstance[key].type === THREE__namespace.UnsignedByteType && rootState) {
         const texture = currentInstance[key];
         if (hasColorSpace(texture) && hasColorSpace(rootState.gl)) texture.colorSpace = rootState.gl.outputColorSpace;else texture.encoding = rootState.gl.outputEncoding;
       }
     }
     invalidateInstance(instance);
   }
-  if (localState.parent && instance.raycast && prevHandlers !== localState.eventCount) {
+  if (localState && localState.parent && instance.raycast && prevHandlers !== localState.eventCount) {
     // Get the initial root state's internals
     const internal = findInitialRoot(instance).getState().internal;
     // Pre-emptively remove the instance from the interaction manager
@@ -798,12 +797,12 @@ function applyProps$1(instance, data) {
   // Call the update lifecycle when it is being updated, but only when it is part of the scene.
   // Skip updates to the `onUpdate` prop itself
   const isCircular = changes.length === 1 && changes[0][0] === 'onUpdate';
-  if (!isCircular && changes.length && (_instance$__r3f4 = instance.__r3f) != null && _instance$__r3f4.parent) updateInstance(instance);
+  if (!isCircular && changes.length && (_instance$__r3f2 = instance.__r3f) != null && _instance$__r3f2.parent) updateInstance(instance);
   return instance;
 }
 function invalidateInstance(instance) {
-  var _instance$__r3f5, _instance$__r3f5$root;
-  const state = (_instance$__r3f5 = instance.__r3f) == null ? void 0 : (_instance$__r3f5$root = _instance$__r3f5.root) == null ? void 0 : _instance$__r3f5$root.getState == null ? void 0 : _instance$__r3f5$root.getState();
+  var _instance$__r3f3, _instance$__r3f3$root;
+  const state = (_instance$__r3f3 = instance.__r3f) == null ? void 0 : (_instance$__r3f3$root = _instance$__r3f3.root) == null ? void 0 : _instance$__r3f3$root.getState == null ? void 0 : _instance$__r3f3$root.getState();
   if (state && state.internal.frames === 0) state.invalidate();
 }
 function updateInstance(instance) {
@@ -2059,7 +2058,7 @@ function createRoot(canvas) {
     render(children) {
       // The root has to be configured before it can be rendered
       if (!configured) this.configure();
-      reconciler.updateContainer( /*#__PURE__*/React__namespace.createElement(Provider, {
+      reconciler.updateContainer( /*#__PURE__*/jsxRuntime.jsx(Provider, {
         store: store,
         children: children,
         onCreated: onCreated,
@@ -2100,9 +2099,10 @@ function Provider({
     if (!store.getState().events.connected) state.events.connect == null ? void 0 : state.events.connect(rootElement);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  return /*#__PURE__*/React__namespace.createElement(context.Provider, {
-    value: store
-  }, children);
+  return /*#__PURE__*/jsxRuntime.jsx(context.Provider, {
+    value: store,
+    children: children
+  });
 }
 function unmountComponentAtNode(canvas, callback) {
   const root = roots.get(canvas);
@@ -2131,12 +2131,11 @@ function unmountComponentAtNode(canvas, callback) {
   }
 }
 function createPortal(children, container, state) {
-  return /*#__PURE__*/React__namespace.createElement(Portal, {
-    key: container.uuid,
+  return /*#__PURE__*/jsxRuntime.jsx(Portal, {
     children: children,
     container: container,
     state: state
-  });
+  }, container.uuid);
 }
 function Portal({
   state = {},
@@ -2262,9 +2261,12 @@ function Portal({
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, reconciler.createPortal( /*#__PURE__*/React__namespace.createElement(context.Provider, {
-    value: usePortalStore
-  }, children), usePortalStore, null));
+  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: reconciler.createPortal( /*#__PURE__*/jsxRuntime.jsx(context.Provider, {
+      value: usePortalStore,
+      children: children
+    }), usePortalStore, null)
+  });
 }
 reconciler.injectIntoDevTools({
   bundleType: 0 ,

package/dist/{index-d449885c.esm.js → index-ba8afaa4.esm.js}

@@ -5,6 +5,7 @@ import create from 'zustand';
 import Reconciler from 'react-reconciler';
 import { unstable_scheduleCallback, unstable_IdlePriority } from 'scheduler';
 import { suspend, preload, clear } from 'suspend-react';
+import { jsx, Fragment } from 'react/jsx-runtime';
 
 var threeTypes = /*#__PURE__*/Object.freeze({
   __proto__: null
@@ -127,7 +128,7 @@ function createRenderer(_roots, _getEventPriority) {
       } else if (child.isObject3D && parentInstance.isObject3D) {
         var _child$__r3f4;
         parentInstance.remove(child);
-        // @ts-ignore
+        // @ts-expect-error
         // Remove interactivity on the initial root
         if ((_child$__r3f4 = child.__r3f) != null && _child$__r3f4.root) {
           removeInteractivity(findInitialRoot(child), child);
@@ -342,7 +343,7 @@ function createRenderer(_roots, _getEventPriority) {
     hideTextInstance: handleTextInstance,
     unhideTextInstance: handleTextInstance,
     // https://github.com/pmndrs/react-three-fiber/pull/2360#discussion_r916356874
-    // @ts-ignore
+    // @ts-expect-error
     getCurrentEventPriority: () => _getEventPriority ? _getEventPriority() : DefaultEventPriority,
     beforeActiveInstanceBlur: () => {},
     afterActiveInstanceBlur: () => {},
@@ -585,7 +586,6 @@ function detach(parent, child, type) {
   } 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;
 }
-
 // This function prepares a set of changes to be applied to the instance
 function diffProps(instance, {
   children: cN,
@@ -598,8 +598,7 @@ function diffProps(instance, {
   ref: rP,
   ...previous
 } = {}, remove = false) {
-  var _instance$__r3f;
-  const localState = (_instance$__r3f = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f : {};
+  const localState = instance.__r3f;
   const entries = Object.entries(props);
   const changes = [];
 
@@ -611,9 +610,9 @@ function diffProps(instance, {
     }
   }
   entries.forEach(([key, value]) => {
-    var _instance$__r3f2;
+    var _instance$__r3f;
     // Bail out on primitive object
-    if ((_instance$__r3f2 = instance.__r3f) != null && _instance$__r3f2.primitive && key === 'object') return;
+    if ((_instance$__r3f = instance.__r3f) != null && _instance$__r3f.primitive && key === 'object') return;
     // When props match bail out
     if (is.equ(value, previous[key])) return;
     // Collect handlers and bail out
@@ -632,8 +631,8 @@ function diffProps(instance, {
   const memoized = {
     ...props
   };
-  if (localState.memoizedProps && localState.memoizedProps.args) memoized.args = localState.memoizedProps.args;
-  if (localState.memoizedProps && localState.memoizedProps.attach) memoized.attach = localState.memoizedProps.attach;
+  if (localState != null && localState.memoizedProps && localState != null && localState.memoizedProps.args) memoized.args = localState.memoizedProps.args;
+  if (localState != null && localState.memoizedProps && localState != null && localState.memoizedProps.attach) memoized.attach = localState.memoizedProps.attach;
   return {
     memoized,
     changes
@@ -643,16 +642,16 @@ const __DEV__ = typeof process !== 'undefined' && process.env.NODE_ENV !== 'prod
 
 // This function applies a set of changes to the instance
 function applyProps$1(instance, data) {
-  var _instance$__r3f3, _root$getState, _instance$__r3f4;
+  var _instance$__r3f2;
   // Filter equals, events and reserved props
-  const localState = (_instance$__r3f3 = instance.__r3f) != null ? _instance$__r3f3 : {};
-  const root = localState.root;
-  const rootState = (_root$getState = root == null ? void 0 : root.getState == null ? void 0 : root.getState()) != null ? _root$getState : {};
+  const localState = instance.__r3f;
+  const root = localState == null ? void 0 : localState.root;
+  const rootState = root == null ? void 0 : root.getState == null ? void 0 : root.getState();
   const {
     memoized,
     changes
   } = isDiffSet(data) ? data : diffProps(instance, data);
-  const prevHandlers = localState.eventCount;
+  const prevHandlers = localState == null ? void 0 : localState.eventCount;
 
   // Prepare memoized props
   if (instance.__r3f) instance.__r3f.memoizedProps = memoized;
@@ -697,7 +696,7 @@ function applyProps$1(instance, data) {
         // create a blank slate of the instance and copy the particular parameter.
         let ctor = DEFAULTS.get(currentInstance.constructor);
         if (!ctor) {
-          // @ts-ignore
+          // @ts-expect-error
           ctor = new currentInstance.constructor();
           DEFAULTS.set(currentInstance.constructor, ctor);
         }
@@ -709,7 +708,7 @@ function applyProps$1(instance, data) {
     }
 
     // Deal with pointer events ...
-    if (isEvent) {
+    if (isEvent && localState) {
       if (value) localState.handlers[key] = value;else delete localState.handlers[key];
       localState.eventCount = Object.keys(localState.handlers).length;
     }
@@ -741,7 +740,7 @@ function applyProps$1(instance, data) {
         // For versions of three which don't support THREE.ColorManagement,
         // Auto-convert sRGB colors
         // https://github.com/pmndrs/react-three-fiber/issues/344
-        if (!getColorManagement() && !rootState.linear && isColor) targetProp.convertSRGBToLinear();
+        if (!getColorManagement() && rootState && !rootState.linear && isColor) targetProp.convertSRGBToLinear();
       }
       // Else, just overwrite the value
     } else {
@@ -751,14 +750,14 @@ function applyProps$1(instance, data) {
       // https://github.com/pmndrs/react-three-fiber/issues/344
       if (currentInstance[key] instanceof THREE.Texture &&
       // sRGB textures must be RGBA8 since r137 https://github.com/mrdoob/three.js/pull/23129
-      currentInstance[key].format === THREE.RGBAFormat && currentInstance[key].type === THREE.UnsignedByteType) {
+      currentInstance[key].format === THREE.RGBAFormat && currentInstance[key].type === THREE.UnsignedByteType && rootState) {
         const texture = currentInstance[key];
         if (hasColorSpace(texture) && hasColorSpace(rootState.gl)) texture.colorSpace = rootState.gl.outputColorSpace;else texture.encoding = rootState.gl.outputEncoding;
       }
     }
     invalidateInstance(instance);
   }
-  if (localState.parent && instance.raycast && prevHandlers !== localState.eventCount) {
+  if (localState && localState.parent && instance.raycast && prevHandlers !== localState.eventCount) {
     // Get the initial root state's internals
     const internal = findInitialRoot(instance).getState().internal;
     // Pre-emptively remove the instance from the interaction manager
@@ -771,12 +770,12 @@ function applyProps$1(instance, data) {
   // Call the update lifecycle when it is being updated, but only when it is part of the scene.
   // Skip updates to the `onUpdate` prop itself
   const isCircular = changes.length === 1 && changes[0][0] === 'onUpdate';
-  if (!isCircular && changes.length && (_instance$__r3f4 = instance.__r3f) != null && _instance$__r3f4.parent) updateInstance(instance);
+  if (!isCircular && changes.length && (_instance$__r3f2 = instance.__r3f) != null && _instance$__r3f2.parent) updateInstance(instance);
   return instance;
 }
 function invalidateInstance(instance) {
-  var _instance$__r3f5, _instance$__r3f5$root;
-  const state = (_instance$__r3f5 = instance.__r3f) == null ? void 0 : (_instance$__r3f5$root = _instance$__r3f5.root) == null ? void 0 : _instance$__r3f5$root.getState == null ? void 0 : _instance$__r3f5$root.getState();
+  var _instance$__r3f3, _instance$__r3f3$root;
+  const state = (_instance$__r3f3 = instance.__r3f) == null ? void 0 : (_instance$__r3f3$root = _instance$__r3f3.root) == null ? void 0 : _instance$__r3f3$root.getState == null ? void 0 : _instance$__r3f3$root.getState();
   if (state && state.internal.frames === 0) state.invalidate();
 }
 function updateInstance(instance) {
@@ -2032,7 +2031,7 @@ function createRoot(canvas) {
     render(children) {
       // The root has to be configured before it can be rendered
       if (!configured) this.configure();
-      reconciler.updateContainer( /*#__PURE__*/React.createElement(Provider, {
+      reconciler.updateContainer( /*#__PURE__*/jsx(Provider, {
         store: store,
         children: children,
         onCreated: onCreated,
@@ -2073,9 +2072,10 @@ function Provider({
     if (!store.getState().events.connected) state.events.connect == null ? void 0 : state.events.connect(rootElement);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  return /*#__PURE__*/React.createElement(context.Provider, {
-    value: store
-  }, children);
+  return /*#__PURE__*/jsx(context.Provider, {
+    value: store,
+    children: children
+  });
 }
 function unmountComponentAtNode(canvas, callback) {
   const root = roots.get(canvas);
@@ -2104,12 +2104,11 @@ function unmountComponentAtNode(canvas, callback) {
   }
 }
 function createPortal(children, container, state) {
-  return /*#__PURE__*/React.createElement(Portal, {
-    key: container.uuid,
+  return /*#__PURE__*/jsx(Portal, {
     children: children,
     container: container,
     state: state
-  });
+  }, container.uuid);
 }
 function Portal({
   state = {},
@@ -2235,9 +2234,12 @@ function Portal({
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, reconciler.createPortal( /*#__PURE__*/React.createElement(context.Provider, {
-    value: usePortalStore
-  }, children), usePortalStore, null));
+  return /*#__PURE__*/jsx(Fragment, {
+    children: reconciler.createPortal( /*#__PURE__*/jsx(context.Provider, {
+      value: usePortalStore,
+      children: children
+    }), usePortalStore, null)
+  });
 }
 reconciler.injectIntoDevTools({
   bundleType: process.env.NODE_ENV === 'production' ? 0 : 1,

package/dist/{index-20975705.cjs.dev.js → index-f983265a.cjs.dev.js}

@@ -7,6 +7,7 @@ var create = require('zustand');
 var Reconciler = require('react-reconciler');
 var scheduler = require('scheduler');
 var suspendReact = require('suspend-react');
+var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -154,7 +155,7 @@ function createRenderer(_roots, _getEventPriority) {
       } else if (child.isObject3D && parentInstance.isObject3D) {
         var _child$__r3f4;
         parentInstance.remove(child);
-        // @ts-ignore
+        // @ts-expect-error
         // Remove interactivity on the initial root
         if ((_child$__r3f4 = child.__r3f) != null && _child$__r3f4.root) {
           removeInteractivity(findInitialRoot(child), child);
@@ -369,7 +370,7 @@ function createRenderer(_roots, _getEventPriority) {
     hideTextInstance: handleTextInstance,
     unhideTextInstance: handleTextInstance,
     // https://github.com/pmndrs/react-three-fiber/pull/2360#discussion_r916356874
-    // @ts-ignore
+    // @ts-expect-error
     getCurrentEventPriority: () => _getEventPriority ? _getEventPriority() : constants.DefaultEventPriority,
     beforeActiveInstanceBlur: () => {},
     afterActiveInstanceBlur: () => {},
@@ -612,7 +613,6 @@ function detach(parent, child, type) {
   } 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;
 }
-
 // This function prepares a set of changes to be applied to the instance
 function diffProps(instance, {
   children: cN,
@@ -625,8 +625,7 @@ function diffProps(instance, {
   ref: rP,
   ...previous
 } = {}, remove = false) {
-  var _instance$__r3f;
-  const localState = (_instance$__r3f = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f : {};
+  const localState = instance.__r3f;
   const entries = Object.entries(props);
   const changes = [];
 
@@ -638,9 +637,9 @@ function diffProps(instance, {
     }
   }
   entries.forEach(([key, value]) => {
-    var _instance$__r3f2;
+    var _instance$__r3f;
     // Bail out on primitive object
-    if ((_instance$__r3f2 = instance.__r3f) != null && _instance$__r3f2.primitive && key === 'object') return;
+    if ((_instance$__r3f = instance.__r3f) != null && _instance$__r3f.primitive && key === 'object') return;
     // When props match bail out
     if (is.equ(value, previous[key])) return;
     // Collect handlers and bail out
@@ -659,8 +658,8 @@ function diffProps(instance, {
   const memoized = {
     ...props
   };
-  if (localState.memoizedProps && localState.memoizedProps.args) memoized.args = localState.memoizedProps.args;
-  if (localState.memoizedProps && localState.memoizedProps.attach) memoized.attach = localState.memoizedProps.attach;
+  if (localState != null && localState.memoizedProps && localState != null && localState.memoizedProps.args) memoized.args = localState.memoizedProps.args;
+  if (localState != null && localState.memoizedProps && localState != null && localState.memoizedProps.attach) memoized.attach = localState.memoizedProps.attach;
   return {
     memoized,
     changes
@@ -670,16 +669,16 @@ const __DEV__ = typeof process !== 'undefined' && process.env.NODE_ENV !== 'prod
 
 // This function applies a set of changes to the instance
 function applyProps$1(instance, data) {
-  var _instance$__r3f3, _root$getState, _instance$__r3f4;
+  var _instance$__r3f2;
   // Filter equals, events and reserved props
-  const localState = (_instance$__r3f3 = instance.__r3f) != null ? _instance$__r3f3 : {};
-  const root = localState.root;
-  const rootState = (_root$getState = root == null ? void 0 : root.getState == null ? void 0 : root.getState()) != null ? _root$getState : {};
+  const localState = instance.__r3f;
+  const root = localState == null ? void 0 : localState.root;
+  const rootState = root == null ? void 0 : root.getState == null ? void 0 : root.getState();
   const {
     memoized,
     changes
   } = isDiffSet(data) ? data : diffProps(instance, data);
-  const prevHandlers = localState.eventCount;
+  const prevHandlers = localState == null ? void 0 : localState.eventCount;
 
   // Prepare memoized props
   if (instance.__r3f) instance.__r3f.memoizedProps = memoized;
@@ -724,7 +723,7 @@ function applyProps$1(instance, data) {
         // create a blank slate of the instance and copy the particular parameter.
         let ctor = DEFAULTS.get(currentInstance.constructor);
         if (!ctor) {
-          // @ts-ignore
+          // @ts-expect-error
           ctor = new currentInstance.constructor();
           DEFAULTS.set(currentInstance.constructor, ctor);
         }
@@ -736,7 +735,7 @@ function applyProps$1(instance, data) {
     }
 
     // Deal with pointer events ...
-    if (isEvent) {
+    if (isEvent && localState) {
       if (value) localState.handlers[key] = value;else delete localState.handlers[key];
       localState.eventCount = Object.keys(localState.handlers).length;
     }
@@ -768,7 +767,7 @@ function applyProps$1(instance, data) {
         // For versions of three which don't support THREE.ColorManagement,
         // Auto-convert sRGB colors
         // https://github.com/pmndrs/react-three-fiber/issues/344
-        if (!getColorManagement() && !rootState.linear && isColor) targetProp.convertSRGBToLinear();
+        if (!getColorManagement() && rootState && !rootState.linear && isColor) targetProp.convertSRGBToLinear();
       }
       // Else, just overwrite the value
     } else {
@@ -778,14 +777,14 @@ function applyProps$1(instance, data) {
       // https://github.com/pmndrs/react-three-fiber/issues/344
       if (currentInstance[key] instanceof THREE__namespace.Texture &&
       // sRGB textures must be RGBA8 since r137 https://github.com/mrdoob/three.js/pull/23129
-      currentInstance[key].format === THREE__namespace.RGBAFormat && currentInstance[key].type === THREE__namespace.UnsignedByteType) {
+      currentInstance[key].format === THREE__namespace.RGBAFormat && currentInstance[key].type === THREE__namespace.UnsignedByteType && rootState) {
         const texture = currentInstance[key];
         if (hasColorSpace(texture) && hasColorSpace(rootState.gl)) texture.colorSpace = rootState.gl.outputColorSpace;else texture.encoding = rootState.gl.outputEncoding;
       }
     }
     invalidateInstance(instance);
   }
-  if (localState.parent && instance.raycast && prevHandlers !== localState.eventCount) {
+  if (localState && localState.parent && instance.raycast && prevHandlers !== localState.eventCount) {
     // Get the initial root state's internals
     const internal = findInitialRoot(instance).getState().internal;
     // Pre-emptively remove the instance from the interaction manager
@@ -798,12 +797,12 @@ function applyProps$1(instance, data) {
   // Call the update lifecycle when it is being updated, but only when it is part of the scene.
   // Skip updates to the `onUpdate` prop itself
   const isCircular = changes.length === 1 && changes[0][0] === 'onUpdate';
-  if (!isCircular && changes.length && (_instance$__r3f4 = instance.__r3f) != null && _instance$__r3f4.parent) updateInstance(instance);
+  if (!isCircular && changes.length && (_instance$__r3f2 = instance.__r3f) != null && _instance$__r3f2.parent) updateInstance(instance);
   return instance;
 }
 function invalidateInstance(instance) {
-  var _instance$__r3f5, _instance$__r3f5$root;
-  const state = (_instance$__r3f5 = instance.__r3f) == null ? void 0 : (_instance$__r3f5$root = _instance$__r3f5.root) == null ? void 0 : _instance$__r3f5$root.getState == null ? void 0 : _instance$__r3f5$root.getState();
+  var _instance$__r3f3, _instance$__r3f3$root;
+  const state = (_instance$__r3f3 = instance.__r3f) == null ? void 0 : (_instance$__r3f3$root = _instance$__r3f3.root) == null ? void 0 : _instance$__r3f3$root.getState == null ? void 0 : _instance$__r3f3$root.getState();
   if (state && state.internal.frames === 0) state.invalidate();
 }
 function updateInstance(instance) {
@@ -2059,7 +2058,7 @@ function createRoot(canvas) {
     render(children) {
       // The root has to be configured before it can be rendered
       if (!configured) this.configure();
-      reconciler.updateContainer( /*#__PURE__*/React__namespace.createElement(Provider, {
+      reconciler.updateContainer( /*#__PURE__*/jsxRuntime.jsx(Provider, {
         store: store,
         children: children,
         onCreated: onCreated,
@@ -2100,9 +2099,10 @@ function Provider({
     if (!store.getState().events.connected) state.events.connect == null ? void 0 : state.events.connect(rootElement);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  return /*#__PURE__*/React__namespace.createElement(context.Provider, {
-    value: store
-  }, children);
+  return /*#__PURE__*/jsxRuntime.jsx(context.Provider, {
+    value: store,
+    children: children
+  });
 }
 function unmountComponentAtNode(canvas, callback) {
   const root = roots.get(canvas);
@@ -2131,12 +2131,11 @@ function unmountComponentAtNode(canvas, callback) {
   }
 }
 function createPortal(children, container, state) {
-  return /*#__PURE__*/React__namespace.createElement(Portal, {
-    key: container.uuid,
+  return /*#__PURE__*/jsxRuntime.jsx(Portal, {
     children: children,
     container: container,
     state: state
-  });
+  }, container.uuid);
 }
 function Portal({
   state = {},
@@ -2262,9 +2261,12 @@ function Portal({
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, reconciler.createPortal( /*#__PURE__*/React__namespace.createElement(context.Provider, {
-    value: usePortalStore
-  }, children), usePortalStore, null));
+  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: reconciler.createPortal( /*#__PURE__*/jsxRuntime.jsx(context.Provider, {
+      value: usePortalStore,
+      children: children
+    }), usePortalStore, null)
+  });
 }
 reconciler.injectIntoDevTools({
   bundleType: process.env.NODE_ENV === 'production' ? 0 : 1,

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

@@ -2,12 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-20975705.cjs.dev.js');
-var _extends = require('@babel/runtime/helpers/extends');
+var index = require('./index-f983265a.cjs.dev.js');
 var React = require('react');
 var THREE = require('three');
 var useMeasure = require('react-use-measure');
 var itsFine = require('its-fine');
+var jsxRuntime = require('react/jsx-runtime');
 require('react-reconciler/constants');
 require('zustand');
 require('react-reconciler');
@@ -210,13 +210,17 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
           onCreated == null ? void 0 : onCreated(state);
         }
       });
-      root.current.render( /*#__PURE__*/React__namespace.createElement(Bridge, null, /*#__PURE__*/React__namespace.createElement(index.ErrorBoundary, {
-        set: setError
-      }, /*#__PURE__*/React__namespace.createElement(React__namespace.Suspense, {
-        fallback: /*#__PURE__*/React__namespace.createElement(index.Block, {
-          set: setBlock
+      root.current.render( /*#__PURE__*/jsxRuntime.jsx(Bridge, {
+        children: /*#__PURE__*/jsxRuntime.jsx(index.ErrorBoundary, {
+          set: setError,
+          children: /*#__PURE__*/jsxRuntime.jsx(React__namespace.Suspense, {
+            fallback: /*#__PURE__*/jsxRuntime.jsx(index.Block, {
+              set: setBlock
+            }),
+            children: children
+          })
         })
-      }, children))));
+      }));
     }
   });
   React__namespace.useEffect(() => {
@@ -227,7 +231,7 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   // When the event source is not this div, we need to set pointer-events to none
   // Or else the canvas will block events from reaching the event source
   const pointerEvents = eventSource ? 'none' : 'auto';
-  return /*#__PURE__*/React__namespace.createElement("div", _extends({
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
     ref: divRef,
     style: {
       position: 'relative',
@@ -236,19 +240,23 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
       overflow: 'hidden',
       pointerEvents,
       ...style
-    }
-  }, props), /*#__PURE__*/React__namespace.createElement("div", {
-    ref: containerRef,
-    style: {
-      width: '100%',
-      height: '100%'
-    }
-  }, /*#__PURE__*/React__namespace.createElement("canvas", {
-    ref: canvasRef,
-    style: {
-      display: 'block'
-    }
-  }, fallback)));
+    },
+    ...props,
+    children: /*#__PURE__*/jsxRuntime.jsx("div", {
+      ref: containerRef,
+      style: {
+        width: '100%',
+        height: '100%'
+      },
+      children: /*#__PURE__*/jsxRuntime.jsx("canvas", {
+        ref: canvasRef,
+        style: {
+          display: 'block'
+        },
+        children: fallback
+      })
+    })
+  });
 });
 
 /**
@@ -256,9 +264,12 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
  * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
  */
 const Canvas = /*#__PURE__*/React__namespace.forwardRef(function CanvasWrapper(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement(itsFine.FiberProvider, null, /*#__PURE__*/React__namespace.createElement(CanvasImpl, _extends({}, props, {
-    ref: ref
-  })));
+  return /*#__PURE__*/jsxRuntime.jsx(itsFine.FiberProvider, {
+    children: /*#__PURE__*/jsxRuntime.jsx(CanvasImpl, {
+      ...props,
+      ref: ref
+    })
+  });
 });
 
 exports.ReactThreeFiber = index.threeTypes;

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

@@ -2,12 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-67aff14f.cjs.prod.js');
-var _extends = require('@babel/runtime/helpers/extends');
+var index = require('./index-4664c596.cjs.prod.js');
 var React = require('react');
 var THREE = require('three');
 var useMeasure = require('react-use-measure');
 var itsFine = require('its-fine');
+var jsxRuntime = require('react/jsx-runtime');
 require('react-reconciler/constants');
 require('zustand');
 require('react-reconciler');
@@ -210,13 +210,17 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
           onCreated == null ? void 0 : onCreated(state);
         }
       });
-      root.current.render( /*#__PURE__*/React__namespace.createElement(Bridge, null, /*#__PURE__*/React__namespace.createElement(index.ErrorBoundary, {
-        set: setError
-      }, /*#__PURE__*/React__namespace.createElement(React__namespace.Suspense, {
-        fallback: /*#__PURE__*/React__namespace.createElement(index.Block, {
-          set: setBlock
+      root.current.render( /*#__PURE__*/jsxRuntime.jsx(Bridge, {
+        children: /*#__PURE__*/jsxRuntime.jsx(index.ErrorBoundary, {
+          set: setError,
+          children: /*#__PURE__*/jsxRuntime.jsx(React__namespace.Suspense, {
+            fallback: /*#__PURE__*/jsxRuntime.jsx(index.Block, {
+              set: setBlock
+            }),
+            children: children
+          })
         })
-      }, children))));
+      }));
     }
   });
   React__namespace.useEffect(() => {
@@ -227,7 +231,7 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   // When the event source is not this div, we need to set pointer-events to none
   // Or else the canvas will block events from reaching the event source
   const pointerEvents = eventSource ? 'none' : 'auto';
-  return /*#__PURE__*/React__namespace.createElement("div", _extends({
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
     ref: divRef,
     style: {
       position: 'relative',
@@ -236,19 +240,23 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
       overflow: 'hidden',
       pointerEvents,
       ...style
-    }
-  }, props), /*#__PURE__*/React__namespace.createElement("div", {
-    ref: containerRef,
-    style: {
-      width: '100%',
-      height: '100%'
-    }
-  }, /*#__PURE__*/React__namespace.createElement("canvas", {
-    ref: canvasRef,
-    style: {
-      display: 'block'
-    }
-  }, fallback)));
+    },
+    ...props,
+    children: /*#__PURE__*/jsxRuntime.jsx("div", {
+      ref: containerRef,
+      style: {
+        width: '100%',
+        height: '100%'
+      },
+      children: /*#__PURE__*/jsxRuntime.jsx("canvas", {
+        ref: canvasRef,
+        style: {
+          display: 'block'
+        },
+        children: fallback
+      })
+    })
+  });
 });
 
 /**
@@ -256,9 +264,12 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
  * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
  */
 const Canvas = /*#__PURE__*/React__namespace.forwardRef(function CanvasWrapper(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement(itsFine.FiberProvider, null, /*#__PURE__*/React__namespace.createElement(CanvasImpl, _extends({}, props, {
-    ref: ref
-  })));
+  return /*#__PURE__*/jsxRuntime.jsx(itsFine.FiberProvider, {
+    children: /*#__PURE__*/jsxRuntime.jsx(CanvasImpl, {
+      ...props,
+      ref: ref
+    })
+  });
 });
 
 exports.ReactThreeFiber = index.threeTypes;

package/dist/react-three-fiber.esm.js

@@ -1,10 +1,10 @@
-import { c as createEvents, e as extend, u as useMutableCallback, a as useIsomorphicLayoutEffect, b as createRoot, i as isRef, E as ErrorBoundary, B as Block, d as unmountComponentAtNode } from './index-d449885c.esm.js';
-export { t as ReactThreeFiber, x as _roots, v as act, o as addAfterEffect, n as addEffect, p as addTail, m as advance, j as applyProps, w as buildGraph, f as context, c as createEvents, g as createPortal, b as createRoot, k as dispose, e as extend, q as flushGlobalEffects, s as getRootState, l as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, C as useFrame, D as useGraph, y as useInstanceHandle, F as useLoader, z as useStore, A as useThree } from './index-d449885c.esm.js';
-import _extends from '@babel/runtime/helpers/esm/extends';
+import { c as createEvents, e as extend, u as useMutableCallback, a as useIsomorphicLayoutEffect, b as createRoot, i as isRef, E as ErrorBoundary, B as Block, d as unmountComponentAtNode } from './index-ba8afaa4.esm.js';
+export { t as ReactThreeFiber, x as _roots, v as act, o as addAfterEffect, n as addEffect, p as addTail, m as advance, j as applyProps, w as buildGraph, f as context, c as createEvents, g as createPortal, b as createRoot, k as dispose, e as extend, q as flushGlobalEffects, s as getRootState, l as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, C as useFrame, D as useGraph, y as useInstanceHandle, F as useLoader, z as useStore, A as useThree } from './index-ba8afaa4.esm.js';
 import * as React from 'react';
 import * as THREE from 'three';
 import useMeasure from 'react-use-measure';
 import { FiberProvider, useContextBridge } from 'its-fine';
+import { jsx } from 'react/jsx-runtime';
 import 'react-reconciler/constants';
 import 'zustand';
 import 'react-reconciler';
@@ -183,13 +183,17 @@ const CanvasImpl = /*#__PURE__*/React.forwardRef(function Canvas({
           onCreated == null ? void 0 : onCreated(state);
         }
       });
-      root.current.render( /*#__PURE__*/React.createElement(Bridge, null, /*#__PURE__*/React.createElement(ErrorBoundary, {
-        set: setError
-      }, /*#__PURE__*/React.createElement(React.Suspense, {
-        fallback: /*#__PURE__*/React.createElement(Block, {
-          set: setBlock
+      root.current.render( /*#__PURE__*/jsx(Bridge, {
+        children: /*#__PURE__*/jsx(ErrorBoundary, {
+          set: setError,
+          children: /*#__PURE__*/jsx(React.Suspense, {
+            fallback: /*#__PURE__*/jsx(Block, {
+              set: setBlock
+            }),
+            children: children
+          })
         })
-      }, children))));
+      }));
     }
   });
   React.useEffect(() => {
@@ -200,7 +204,7 @@ const CanvasImpl = /*#__PURE__*/React.forwardRef(function Canvas({
   // When the event source is not this div, we need to set pointer-events to none
   // Or else the canvas will block events from reaching the event source
   const pointerEvents = eventSource ? 'none' : 'auto';
-  return /*#__PURE__*/React.createElement("div", _extends({
+  return /*#__PURE__*/jsx("div", {
     ref: divRef,
     style: {
       position: 'relative',
@@ -209,19 +213,23 @@ const CanvasImpl = /*#__PURE__*/React.forwardRef(function Canvas({
       overflow: 'hidden',
       pointerEvents,
       ...style
-    }
-  }, props), /*#__PURE__*/React.createElement("div", {
-    ref: containerRef,
-    style: {
-      width: '100%',
-      height: '100%'
-    }
-  }, /*#__PURE__*/React.createElement("canvas", {
-    ref: canvasRef,
-    style: {
-      display: 'block'
-    }
-  }, fallback)));
+    },
+    ...props,
+    children: /*#__PURE__*/jsx("div", {
+      ref: containerRef,
+      style: {
+        width: '100%',
+        height: '100%'
+      },
+      children: /*#__PURE__*/jsx("canvas", {
+        ref: canvasRef,
+        style: {
+          display: 'block'
+        },
+        children: fallback
+      })
+    })
+  });
 });
 
 /**
@@ -229,9 +237,12 @@ const CanvasImpl = /*#__PURE__*/React.forwardRef(function Canvas({
  * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
  */
 const Canvas = /*#__PURE__*/React.forwardRef(function CanvasWrapper(props, ref) {
-  return /*#__PURE__*/React.createElement(FiberProvider, null, /*#__PURE__*/React.createElement(CanvasImpl, _extends({}, props, {
-    ref: ref
-  })));
+  return /*#__PURE__*/jsx(FiberProvider, {
+    children: /*#__PURE__*/jsx(CanvasImpl, {
+      ...props,
+      ref: ref
+    })
+  });
 });
 
 export { Canvas, createPointerEvents as events };

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

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('../../dist/index-20975705.cjs.dev.js');
-var _extends = require('@babel/runtime/helpers/extends');
+var index = require('../../dist/index-f983265a.cjs.dev.js');
 var React = require('react');
 var THREE = require('three');
 var reactNative = require('react-native');
 var expoGl = require('expo-gl');
 var itsFine = require('its-fine');
+var jsxRuntime = require('react/jsx-runtime');
 var expoAsset = require('expo-asset');
 var fs = require('expo-file-system');
 var base64Js = require('base64-js');
@@ -251,31 +251,38 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(({
         return onCreated == null ? void 0 : onCreated(state);
       }
     });
-    root.current.render( /*#__PURE__*/React__namespace.createElement(Bridge, null, /*#__PURE__*/React__namespace.createElement(index.ErrorBoundary, {
-      set: setError
-    }, /*#__PURE__*/React__namespace.createElement(React__namespace.Suspense, {
-      fallback: /*#__PURE__*/React__namespace.createElement(index.Block, {
-        set: setBlock
+    root.current.render( /*#__PURE__*/jsxRuntime.jsx(Bridge, {
+      children: /*#__PURE__*/jsxRuntime.jsx(index.ErrorBoundary, {
+        set: setError,
+        children: /*#__PURE__*/jsxRuntime.jsx(React__namespace.Suspense, {
+          fallback: /*#__PURE__*/jsxRuntime.jsx(index.Block, {
+            set: setBlock
+          }),
+          children: children
+        })
       })
-    }, children))));
+    }));
   }
   React__namespace.useEffect(() => {
     if (canvas) {
       return () => index.unmountComponentAtNode(canvas);
     }
   }, [canvas]);
-  return /*#__PURE__*/React__namespace.createElement(reactNative.View, _extends({}, props, {
+  return /*#__PURE__*/jsxRuntime.jsx(reactNative.View, {
+    ...props,
     ref: viewRef,
     onLayout: onLayout,
     style: {
       flex: 1,
       ...style
-    }
-  }, bind), width > 0 && /*#__PURE__*/React__namespace.createElement(expoGl.GLView, {
-    msaaSamples: antialias ? 4 : 0,
-    onContextCreate: onContextCreate,
-    style: reactNative.StyleSheet.absoluteFill
-  }));
+    },
+    ...bind,
+    children: width > 0 && /*#__PURE__*/jsxRuntime.jsx(expoGl.GLView, {
+      msaaSamples: antialias ? 4 : 0,
+      onContextCreate: onContextCreate,
+      style: reactNative.StyleSheet.absoluteFill
+    })
+  });
 });
 
 /**
@@ -283,9 +290,12 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(({
  * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
  */
 const Canvas = /*#__PURE__*/React__namespace.forwardRef(function CanvasWrapper(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement(itsFine.FiberProvider, null, /*#__PURE__*/React__namespace.createElement(CanvasImpl, _extends({}, props, {
-    ref: ref
-  })));
+  return /*#__PURE__*/jsxRuntime.jsx(itsFine.FiberProvider, {
+    children: /*#__PURE__*/jsxRuntime.jsx(CanvasImpl, {
+      ...props,
+      ref: ref
+    })
+  });
 });
 
 // http://stackoverflow.com/questions/105034
@@ -421,7 +431,7 @@ function polyfills() {
       texture.needsUpdate = true;
 
       // Force non-DOM upload for EXGL texImage2D
-      // @ts-ignore
+      // @ts-expect-error
       texture.isDataTexture = true;
       onLoad == null ? void 0 : onLoad(texture);
     }).catch(onError);

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

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('../../dist/index-67aff14f.cjs.prod.js');
-var _extends = require('@babel/runtime/helpers/extends');
+var index = require('../../dist/index-4664c596.cjs.prod.js');
 var React = require('react');
 var THREE = require('three');
 var reactNative = require('react-native');
 var expoGl = require('expo-gl');
 var itsFine = require('its-fine');
+var jsxRuntime = require('react/jsx-runtime');
 var expoAsset = require('expo-asset');
 var fs = require('expo-file-system');
 var base64Js = require('base64-js');
@@ -251,31 +251,38 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(({
         return onCreated == null ? void 0 : onCreated(state);
       }
     });
-    root.current.render( /*#__PURE__*/React__namespace.createElement(Bridge, null, /*#__PURE__*/React__namespace.createElement(index.ErrorBoundary, {
-      set: setError
-    }, /*#__PURE__*/React__namespace.createElement(React__namespace.Suspense, {
-      fallback: /*#__PURE__*/React__namespace.createElement(index.Block, {
-        set: setBlock
+    root.current.render( /*#__PURE__*/jsxRuntime.jsx(Bridge, {
+      children: /*#__PURE__*/jsxRuntime.jsx(index.ErrorBoundary, {
+        set: setError,
+        children: /*#__PURE__*/jsxRuntime.jsx(React__namespace.Suspense, {
+          fallback: /*#__PURE__*/jsxRuntime.jsx(index.Block, {
+            set: setBlock
+          }),
+          children: children
+        })
       })
-    }, children))));
+    }));
   }
   React__namespace.useEffect(() => {
     if (canvas) {
       return () => index.unmountComponentAtNode(canvas);
     }
   }, [canvas]);
-  return /*#__PURE__*/React__namespace.createElement(reactNative.View, _extends({}, props, {
+  return /*#__PURE__*/jsxRuntime.jsx(reactNative.View, {
+    ...props,
     ref: viewRef,
     onLayout: onLayout,
     style: {
       flex: 1,
       ...style
-    }
-  }, bind), width > 0 && /*#__PURE__*/React__namespace.createElement(expoGl.GLView, {
-    msaaSamples: antialias ? 4 : 0,
-    onContextCreate: onContextCreate,
-    style: reactNative.StyleSheet.absoluteFill
-  }));
+    },
+    ...bind,
+    children: width > 0 && /*#__PURE__*/jsxRuntime.jsx(expoGl.GLView, {
+      msaaSamples: antialias ? 4 : 0,
+      onContextCreate: onContextCreate,
+      style: reactNative.StyleSheet.absoluteFill
+    })
+  });
 });
 
 /**
@@ -283,9 +290,12 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(({
  * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
  */
 const Canvas = /*#__PURE__*/React__namespace.forwardRef(function CanvasWrapper(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement(itsFine.FiberProvider, null, /*#__PURE__*/React__namespace.createElement(CanvasImpl, _extends({}, props, {
-    ref: ref
-  })));
+  return /*#__PURE__*/jsxRuntime.jsx(itsFine.FiberProvider, {
+    children: /*#__PURE__*/jsxRuntime.jsx(CanvasImpl, {
+      ...props,
+      ref: ref
+    })
+  });
 });
 
 // http://stackoverflow.com/questions/105034
@@ -421,7 +431,7 @@ function polyfills() {
       texture.needsUpdate = true;
 
       // Force non-DOM upload for EXGL texImage2D
-      // @ts-ignore
+      // @ts-expect-error
       texture.isDataTexture = true;
       onLoad == null ? void 0 : onLoad(texture);
     }).catch(onError);

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

@@ -1,11 +1,11 @@
-import { c as createEvents, e as extend, u as useMutableCallback, b as createRoot, E as ErrorBoundary, B as Block, d as unmountComponentAtNode } from '../../dist/index-d449885c.esm.js';
-export { t as ReactThreeFiber, x as _roots, v as act, o as addAfterEffect, n as addEffect, p as addTail, m as advance, j as applyProps, w as buildGraph, f as context, c as createEvents, g as createPortal, b as createRoot, k as dispose, e as extend, q as flushGlobalEffects, s as getRootState, l as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, C as useFrame, D as useGraph, y as useInstanceHandle, F as useLoader, z as useStore, A as useThree } from '../../dist/index-d449885c.esm.js';
-import _extends from '@babel/runtime/helpers/esm/extends';
+import { c as createEvents, e as extend, u as useMutableCallback, b as createRoot, E as ErrorBoundary, B as Block, d as unmountComponentAtNode } from '../../dist/index-ba8afaa4.esm.js';
+export { t as ReactThreeFiber, x as _roots, v as act, o as addAfterEffect, n as addEffect, p as addTail, m as advance, j as applyProps, w as buildGraph, f as context, c as createEvents, g as createPortal, b as createRoot, k as dispose, e as extend, q as flushGlobalEffects, s as getRootState, l as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, C as useFrame, D as useGraph, y as useInstanceHandle, F as useLoader, z as useStore, A as useThree } from '../../dist/index-ba8afaa4.esm.js';
 import * as React from 'react';
 import * as THREE from 'three';
 import { PanResponder, PixelRatio, View, StyleSheet, Platform, Image, NativeModules } from 'react-native';
 import { GLView } from 'expo-gl';
 import { FiberProvider, useContextBridge } from 'its-fine';
+import { jsx } from 'react/jsx-runtime';
 import { Asset } from 'expo-asset';
 import * as fs from 'expo-file-system';
 import { fromByteArray } from 'base64-js';
@@ -226,31 +226,38 @@ const CanvasImpl = /*#__PURE__*/React.forwardRef(({
         return onCreated == null ? void 0 : onCreated(state);
       }
     });
-    root.current.render( /*#__PURE__*/React.createElement(Bridge, null, /*#__PURE__*/React.createElement(ErrorBoundary, {
-      set: setError
-    }, /*#__PURE__*/React.createElement(React.Suspense, {
-      fallback: /*#__PURE__*/React.createElement(Block, {
-        set: setBlock
+    root.current.render( /*#__PURE__*/jsx(Bridge, {
+      children: /*#__PURE__*/jsx(ErrorBoundary, {
+        set: setError,
+        children: /*#__PURE__*/jsx(React.Suspense, {
+          fallback: /*#__PURE__*/jsx(Block, {
+            set: setBlock
+          }),
+          children: children
+        })
       })
-    }, children))));
+    }));
   }
   React.useEffect(() => {
     if (canvas) {
       return () => unmountComponentAtNode(canvas);
     }
   }, [canvas]);
-  return /*#__PURE__*/React.createElement(View, _extends({}, props, {
+  return /*#__PURE__*/jsx(View, {
+    ...props,
     ref: viewRef,
     onLayout: onLayout,
     style: {
       flex: 1,
       ...style
-    }
-  }, bind), width > 0 && /*#__PURE__*/React.createElement(GLView, {
-    msaaSamples: antialias ? 4 : 0,
-    onContextCreate: onContextCreate,
-    style: StyleSheet.absoluteFill
-  }));
+    },
+    ...bind,
+    children: width > 0 && /*#__PURE__*/jsx(GLView, {
+      msaaSamples: antialias ? 4 : 0,
+      onContextCreate: onContextCreate,
+      style: StyleSheet.absoluteFill
+    })
+  });
 });
 
 /**
@@ -258,9 +265,12 @@ const CanvasImpl = /*#__PURE__*/React.forwardRef(({
  * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
  */
 const Canvas = /*#__PURE__*/React.forwardRef(function CanvasWrapper(props, ref) {
-  return /*#__PURE__*/React.createElement(FiberProvider, null, /*#__PURE__*/React.createElement(CanvasImpl, _extends({}, props, {
-    ref: ref
-  })));
+  return /*#__PURE__*/jsx(FiberProvider, {
+    children: /*#__PURE__*/jsx(CanvasImpl, {
+      ...props,
+      ref: ref
+    })
+  });
 });
 
 // http://stackoverflow.com/questions/105034
@@ -396,7 +406,7 @@ function polyfills() {
       texture.needsUpdate = true;
 
       // Force non-DOM upload for EXGL texImage2D
-      // @ts-ignore
+      // @ts-expect-error
       texture.isDataTexture = true;
       onLoad == null ? void 0 : onLoad(texture);
     }).catch(onError);

package/package.json

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

package/readme.md

@@ -22,7 +22,7 @@ None. Everything that works in Threejs will work here without exception.
 
 #### Is it slower than plain Threejs?
 
-No. There is no overhead. Components render outside of React. It outperforms Threejs in scale due to Reacts scheduling abilities.
+No. There is no overhead. Components render outside of React. It outperforms Threejs in scale due to React's scheduling abilities.
 
 #### Can it keep up with frequent feature updates to Threejs?