@react-three/fiber 9.0.0-alpha.5 → 9.0.0-alpha.7

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @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
+
+- 1270d24c: fix: missing dependency on inject function
+
 ## 8.16.3
 
 ### Patch Changes

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

@@ -4,6 +4,9 @@ import Reconciler from 'react-reconciler';
 import type { RootStore } from "./store.js";
 import { type EventHandlers } from "./events.js";
 import type { ThreeElement } from "../three-types.js";
+declare module 'react-reconciler/constants' {
+    const NoEventPriority = 0;
+}
 export interface Root {
     fiber: Reconciler.FiberRoot;
     store: RootStore;
@@ -39,5 +42,5 @@ export interface Instance<O = any> {
     autoRemovedBeforeAppend?: boolean;
 }
 export declare const catalogue: Catalogue;
-export declare const extend: <T extends Catalogue | ConstructorRepresentation<any>>(objects: T) => T extends ConstructorRepresentation<any> ? React.ExoticComponent<import("../three-types.js").Mutable<import("../three-types.js").Overwrite<Partial<import("../three-types.js").Overwrite<import("../three-types.js").WithMathProps<InstanceType<T>>, import("../three-types.js").ReactProps<InstanceType<T>> & import("../three-types.js").EventProps<InstanceType<T>>>>, Omit<InstanceProps<InstanceType<T>, T>, "object">>>> : void;
+export declare const extend: <T extends ConstructorRepresentation<any> | Catalogue>(objects: T) => T extends ConstructorRepresentation<any> ? React.ExoticComponent<import("../three-types.js").Mutable<import("../three-types.js").Overwrite<Partial<import("../three-types.js").Overwrite<import("../three-types.js").WithMathProps<InstanceType<T>>, import("../three-types.js").ReactProps<InstanceType<T>> & import("../three-types.js").EventProps<InstanceType<T>>>>, Omit<InstanceProps<InstanceType<T>, T>, "object">>>> : void;
 export declare const reconciler: Reconciler.Reconciler<RootStore, Instance<any>, void, Instance<any>, any>;

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

@@ -80,5 +80,5 @@ export type InjectState = Partial<Omit<RootState, 'events'> & {
         connected?: any;
     };
 }>;
-export declare function createPortal(children: React.ReactNode, container: THREE.Object3D, state?: InjectState): JSX.Element;
+export declare function createPortal(children: React.ReactNode, container: THREE.Object3D, state?: InjectState): React.JSX.Element;
 export {};

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

@@ -10,7 +10,7 @@ export declare function findInitialRoot<T>(instance: Instance<T>): RootStore;
 /**
  * Returns `true` with correct TS type inference if an object has a configurable color space (since r152).
  */
-export declare const hasColorSpace: <T extends object | Renderer | THREE.Texture, P = T extends Renderer ? {
+export declare const hasColorSpace: <T extends object | THREE.Texture | Renderer, P = T extends Renderer ? {
     outputColorSpace: string;
 } : {
     colorSpace: string;

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

@@ -53,4 +53,16 @@ declare module 'react' {
         }
     }
 }
+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/{loop-d73c6316.esm.js → loop-2db547cd.esm.js}

@@ -3,15 +3,17 @@ import * as React from 'react';
 import { NoEventPriority, DefaultEventPriority, ContinuousEventPriority, DiscreteEventPriority, ConcurrentRoot } from 'react-reconciler/constants';
 import { createWithEqualityFn } from 'zustand/traditional';
 import { useFiber, useContextBridge, traverseFiber } from 'its-fine';
-import _extends from '@babel/runtime/helpers/esm/extends';
 import Reconciler from 'react-reconciler';
 import { unstable_scheduleCallback, unstable_IdlePriority } from 'scheduler';
+import { jsx, Fragment } from 'react/jsx-runtime';
 import { suspend, preload, clear } from 'suspend-react';
 
 var threeTypes = /*#__PURE__*/Object.freeze({
   __proto__: null
 });
 
+const createReconciler = Reconciler;
+
 // TODO: handle constructor overloads
 // https://github.com/pmndrs/react-three-fiber/pull/2931
 // https://github.com/microsoft/TypeScript/issues/37079
@@ -26,9 +28,10 @@ const extend = objects => {
     // Returns a component whose name will be inferred in devtools
     // @ts-expect-error
     return /*#__PURE__*/React.forwardRef({
-      [objects.name]: (props, ref) => /*#__PURE__*/React.createElement(Component, _extends({}, props, {
+      [objects.name]: (props, ref) => /*#__PURE__*/jsx(Component, {
+        ...props,
         ref: ref
-      }))
+      })
     }[objects.name]);
   } else {
     return void Object.assign(catalogue, objects);
@@ -269,7 +272,7 @@ function switchInstance(oldInstance, type, props, fiber) {
 const handleTextInstance = () => console.warn('R3F: Text is not allowed in JSX! This could be stray whitespace or characters.');
 const NO_CONTEXT = {};
 let currentUpdatePriority = NoEventPriority;
-const reconciler = Reconciler({
+const reconciler = createReconciler({
   isPrimaryRenderer: false,
   warnsIfNotActing: false,
   supportsMutation: true,
@@ -299,7 +302,6 @@ const reconciler = Reconciler({
   },
   getRootHostContext: () => NO_CONTEXT,
   getChildHostContext: () => NO_CONTEXT,
-  // @ts-expect-error prepareUpdate and updatePayload removed with React 19
   commitUpdate(instance, type, oldProps, newProps, fiber) {
     var _newProps$args, _oldProps$args, _newProps$args2;
     let reconstruct = false;
@@ -346,8 +348,8 @@ const reconciler = Reconciler({
   beforeActiveInstanceBlur() {},
   afterActiveInstanceBlur() {},
   detachDeletedInstance() {},
-  // TODO: add shell types for these and upstream to DefinitelyTyped
-  // https://github.com/facebook/react/blob/main/packages/react-art/src/ReactFiberConfigART.js
+  prepareScopeUpdate() {},
+  getInstanceFromScope: () => null,
   shouldAttemptEagerTransition() {
     return false;
   },
@@ -391,7 +393,8 @@ const reconciler = Reconciler({
       default:
         return DefaultEventPriority;
     }
-  }
+  },
+  resetFormInstance() {}
 });
 
 var _window$document, _window$navigator;
@@ -448,7 +451,11 @@ function useBridge() {
   }) => {
     const strict = !!traverseFiber(fiber, true, node => node.type === React.StrictMode);
     const Root = strict ? React.StrictMode : React.Fragment;
-    return /*#__PURE__*/React.createElement(Root, null, /*#__PURE__*/React.createElement(ContextBridge, null, children));
+    return /*#__PURE__*/jsx(Root, {
+      children: /*#__PURE__*/jsx(ContextBridge, {
+        children: children
+      })
+    });
   }, [fiber, ContextBridge]);
 }
 function Block({
@@ -1789,9 +1796,6 @@ useLoader.clear = function (loader, input) {
   return clear([loader, ...keys]);
 };
 
-// Shim for OffscreenCanvas since it was removed from DOM types
-// https://github.com/DefinitelyTyped/DefinitelyTyped/pull/54988
-
 const _roots = new Map();
 const shallowLoose = {
   objects: 'shallow',
@@ -1984,9 +1988,11 @@ function createRoot(canvas) {
             applyProps(camera, cameraOptions);
             // Preserve user-defined frustum if possible
             // https://github.com/pmndrs/react-three-fiber/issues/3160
-            if ('aspect' in cameraOptions || 'left' in cameraOptions || 'right' in cameraOptions || 'bottom' in cameraOptions || 'top' in cameraOptions) {
-              camera.manual = true;
-              camera.updateProjectionMatrix();
+            if (!camera.manual) {
+              if ('aspect' in cameraOptions || 'left' in cameraOptions || 'right' in cameraOptions || 'bottom' in cameraOptions || 'top' in cameraOptions) {
+                camera.manual = true;
+                camera.updateProjectionMatrix();
+              }
             }
           }
           // Always look at center by default
@@ -2143,7 +2149,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,
@@ -2184,9 +2190,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);
@@ -2215,7 +2222,7 @@ function unmountComponentAtNode(canvas, callback) {
   }
 }
 function createPortal(children, container, state) {
-  return /*#__PURE__*/React.createElement(Portal, {
+  return /*#__PURE__*/jsx(Portal, {
     children: children,
     container: container,
     state: state
@@ -2240,7 +2247,7 @@ function Portal({
   const [raycaster] = React.useState(() => new THREE.Raycaster());
   const [pointer] = React.useState(() => new THREE.Vector2());
   const inject = useMutableCallback((rootState, injectState) => {
-    let viewport;
+    let viewport = undefined;
     if (injectState.camera && size) {
       const camera = injectState.camera;
       // Calculate the override viewport, if present
@@ -2251,8 +2258,7 @@ function Portal({
     return {
       // The intersect consists of the previous root state
       ...rootState,
-      get: injectState.get,
-      set: injectState.set,
+      ...injectState,
       // Portals have their own scene, which forms the root, a raycaster and a pointer
       scene: container,
       raycaster,
@@ -2285,6 +2291,7 @@ function Portal({
     };
   });
   const usePortalStore = React.useMemo(() => {
+    // Create a mirrored store, based on the previous root with a few overrides ...
     const store = createWithEqualityFn((set, get) => ({
       ...rest,
       set,
@@ -2298,9 +2305,12 @@ function Portal({
     return store;
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [previousRoot, container]);
-  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/{loop-1fad3b6f.cjs.prod.js → loop-2e09d861.cjs.prod.js}

@@ -5,9 +5,9 @@ var React = require('react');
 var constants = require('react-reconciler/constants');
 var traditional = require('zustand/traditional');
 var itsFine = require('its-fine');
-var _extends = require('@babel/runtime/helpers/extends');
 var Reconciler = require('react-reconciler');
 var scheduler = require('scheduler');
+var jsxRuntime = require('react/jsx-runtime');
 var suspendReact = require('suspend-react');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -38,6 +38,8 @@ var threeTypes = /*#__PURE__*/Object.freeze({
   __proto__: null
 });
 
+const createReconciler = Reconciler__default["default"];
+
 // TODO: handle constructor overloads
 // https://github.com/pmndrs/react-three-fiber/pull/2931
 // https://github.com/microsoft/TypeScript/issues/37079
@@ -52,9 +54,10 @@ const extend = objects => {
     // Returns a component whose name will be inferred in devtools
     // @ts-expect-error
     return /*#__PURE__*/React__namespace.forwardRef({
-      [objects.name]: (props, ref) => /*#__PURE__*/React__namespace.createElement(Component, _extends({}, props, {
+      [objects.name]: (props, ref) => /*#__PURE__*/jsxRuntime.jsx(Component, {
+        ...props,
         ref: ref
-      }))
+      })
     }[objects.name]);
   } else {
     return void Object.assign(catalogue, objects);
@@ -295,7 +298,7 @@ function switchInstance(oldInstance, type, props, fiber) {
 const handleTextInstance = () => console.warn('R3F: Text is not allowed in JSX! This could be stray whitespace or characters.');
 const NO_CONTEXT = {};
 let currentUpdatePriority = constants.NoEventPriority;
-const reconciler = Reconciler__default["default"]({
+const reconciler = createReconciler({
   isPrimaryRenderer: false,
   warnsIfNotActing: false,
   supportsMutation: true,
@@ -325,7 +328,6 @@ const reconciler = Reconciler__default["default"]({
   },
   getRootHostContext: () => NO_CONTEXT,
   getChildHostContext: () => NO_CONTEXT,
-  // @ts-expect-error prepareUpdate and updatePayload removed with React 19
   commitUpdate(instance, type, oldProps, newProps, fiber) {
     var _newProps$args, _oldProps$args, _newProps$args2;
     let reconstruct = false;
@@ -372,8 +374,8 @@ const reconciler = Reconciler__default["default"]({
   beforeActiveInstanceBlur() {},
   afterActiveInstanceBlur() {},
   detachDeletedInstance() {},
-  // TODO: add shell types for these and upstream to DefinitelyTyped
-  // https://github.com/facebook/react/blob/main/packages/react-art/src/ReactFiberConfigART.js
+  prepareScopeUpdate() {},
+  getInstanceFromScope: () => null,
   shouldAttemptEagerTransition() {
     return false;
   },
@@ -417,7 +419,8 @@ const reconciler = Reconciler__default["default"]({
       default:
         return constants.DefaultEventPriority;
     }
-  }
+  },
+  resetFormInstance() {}
 });
 
 var _window$document, _window$navigator;
@@ -474,7 +477,11 @@ function useBridge() {
   }) => {
     const strict = !!itsFine.traverseFiber(fiber, true, node => node.type === React__namespace.StrictMode);
     const Root = strict ? React__namespace.StrictMode : React__namespace.Fragment;
-    return /*#__PURE__*/React__namespace.createElement(Root, null, /*#__PURE__*/React__namespace.createElement(ContextBridge, null, children));
+    return /*#__PURE__*/jsxRuntime.jsx(Root, {
+      children: /*#__PURE__*/jsxRuntime.jsx(ContextBridge, {
+        children: children
+      })
+    });
   }, [fiber, ContextBridge]);
 }
 function Block({
@@ -1815,9 +1822,6 @@ useLoader.clear = function (loader, input) {
   return suspendReact.clear([loader, ...keys]);
 };
 
-// Shim for OffscreenCanvas since it was removed from DOM types
-// https://github.com/DefinitelyTyped/DefinitelyTyped/pull/54988
-
 const _roots = new Map();
 const shallowLoose = {
   objects: 'shallow',
@@ -2010,9 +2014,11 @@ function createRoot(canvas) {
             applyProps(camera, cameraOptions);
             // Preserve user-defined frustum if possible
             // https://github.com/pmndrs/react-three-fiber/issues/3160
-            if ('aspect' in cameraOptions || 'left' in cameraOptions || 'right' in cameraOptions || 'bottom' in cameraOptions || 'top' in cameraOptions) {
-              camera.manual = true;
-              camera.updateProjectionMatrix();
+            if (!camera.manual) {
+              if ('aspect' in cameraOptions || 'left' in cameraOptions || 'right' in cameraOptions || 'bottom' in cameraOptions || 'top' in cameraOptions) {
+                camera.manual = true;
+                camera.updateProjectionMatrix();
+              }
             }
           }
           // Always look at center by default
@@ -2169,7 +2175,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,
@@ -2210,9 +2216,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);
@@ -2241,7 +2248,7 @@ function unmountComponentAtNode(canvas, callback) {
   }
 }
 function createPortal(children, container, state) {
-  return /*#__PURE__*/React__namespace.createElement(Portal, {
+  return /*#__PURE__*/jsxRuntime.jsx(Portal, {
     children: children,
     container: container,
     state: state
@@ -2266,7 +2273,7 @@ function Portal({
   const [raycaster] = React__namespace.useState(() => new THREE__namespace.Raycaster());
   const [pointer] = React__namespace.useState(() => new THREE__namespace.Vector2());
   const inject = useMutableCallback((rootState, injectState) => {
-    let viewport;
+    let viewport = undefined;
     if (injectState.camera && size) {
       const camera = injectState.camera;
       // Calculate the override viewport, if present
@@ -2277,8 +2284,7 @@ function Portal({
     return {
       // The intersect consists of the previous root state
       ...rootState,
-      get: injectState.get,
-      set: injectState.set,
+      ...injectState,
       // Portals have their own scene, which forms the root, a raycaster and a pointer
       scene: container,
       raycaster,
@@ -2311,6 +2317,7 @@ function Portal({
     };
   });
   const usePortalStore = React__namespace.useMemo(() => {
+    // Create a mirrored store, based on the previous root with a few overrides ...
     const store = traditional.createWithEqualityFn((set, get) => ({
       ...rest,
       set,
@@ -2324,9 +2331,12 @@ function Portal({
     return store;
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [previousRoot, container]);
-  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/{loop-02cefb27.cjs.dev.js → loop-4ac96174.cjs.dev.js}

@@ -5,9 +5,9 @@ var React = require('react');
 var constants = require('react-reconciler/constants');
 var traditional = require('zustand/traditional');
 var itsFine = require('its-fine');
-var _extends = require('@babel/runtime/helpers/extends');
 var Reconciler = require('react-reconciler');
 var scheduler = require('scheduler');
+var jsxRuntime = require('react/jsx-runtime');
 var suspendReact = require('suspend-react');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -38,6 +38,8 @@ var threeTypes = /*#__PURE__*/Object.freeze({
   __proto__: null
 });
 
+const createReconciler = Reconciler__default["default"];
+
 // TODO: handle constructor overloads
 // https://github.com/pmndrs/react-three-fiber/pull/2931
 // https://github.com/microsoft/TypeScript/issues/37079
@@ -52,9 +54,10 @@ const extend = objects => {
     // Returns a component whose name will be inferred in devtools
     // @ts-expect-error
     return /*#__PURE__*/React__namespace.forwardRef({
-      [objects.name]: (props, ref) => /*#__PURE__*/React__namespace.createElement(Component, _extends({}, props, {
+      [objects.name]: (props, ref) => /*#__PURE__*/jsxRuntime.jsx(Component, {
+        ...props,
         ref: ref
-      }))
+      })
     }[objects.name]);
   } else {
     return void Object.assign(catalogue, objects);
@@ -295,7 +298,7 @@ function switchInstance(oldInstance, type, props, fiber) {
 const handleTextInstance = () => console.warn('R3F: Text is not allowed in JSX! This could be stray whitespace or characters.');
 const NO_CONTEXT = {};
 let currentUpdatePriority = constants.NoEventPriority;
-const reconciler = Reconciler__default["default"]({
+const reconciler = createReconciler({
   isPrimaryRenderer: false,
   warnsIfNotActing: false,
   supportsMutation: true,
@@ -325,7 +328,6 @@ const reconciler = Reconciler__default["default"]({
   },
   getRootHostContext: () => NO_CONTEXT,
   getChildHostContext: () => NO_CONTEXT,
-  // @ts-expect-error prepareUpdate and updatePayload removed with React 19
   commitUpdate(instance, type, oldProps, newProps, fiber) {
     var _newProps$args, _oldProps$args, _newProps$args2;
     let reconstruct = false;
@@ -372,8 +374,8 @@ const reconciler = Reconciler__default["default"]({
   beforeActiveInstanceBlur() {},
   afterActiveInstanceBlur() {},
   detachDeletedInstance() {},
-  // TODO: add shell types for these and upstream to DefinitelyTyped
-  // https://github.com/facebook/react/blob/main/packages/react-art/src/ReactFiberConfigART.js
+  prepareScopeUpdate() {},
+  getInstanceFromScope: () => null,
   shouldAttemptEagerTransition() {
     return false;
   },
@@ -417,7 +419,8 @@ const reconciler = Reconciler__default["default"]({
       default:
         return constants.DefaultEventPriority;
     }
-  }
+  },
+  resetFormInstance() {}
 });
 
 var _window$document, _window$navigator;
@@ -474,7 +477,11 @@ function useBridge() {
   }) => {
     const strict = !!itsFine.traverseFiber(fiber, true, node => node.type === React__namespace.StrictMode);
     const Root = strict ? React__namespace.StrictMode : React__namespace.Fragment;
-    return /*#__PURE__*/React__namespace.createElement(Root, null, /*#__PURE__*/React__namespace.createElement(ContextBridge, null, children));
+    return /*#__PURE__*/jsxRuntime.jsx(Root, {
+      children: /*#__PURE__*/jsxRuntime.jsx(ContextBridge, {
+        children: children
+      })
+    });
   }, [fiber, ContextBridge]);
 }
 function Block({
@@ -1815,9 +1822,6 @@ useLoader.clear = function (loader, input) {
   return suspendReact.clear([loader, ...keys]);
 };
 
-// Shim for OffscreenCanvas since it was removed from DOM types
-// https://github.com/DefinitelyTyped/DefinitelyTyped/pull/54988
-
 const _roots = new Map();
 const shallowLoose = {
   objects: 'shallow',
@@ -2010,9 +2014,11 @@ function createRoot(canvas) {
             applyProps(camera, cameraOptions);
             // Preserve user-defined frustum if possible
             // https://github.com/pmndrs/react-three-fiber/issues/3160
-            if ('aspect' in cameraOptions || 'left' in cameraOptions || 'right' in cameraOptions || 'bottom' in cameraOptions || 'top' in cameraOptions) {
-              camera.manual = true;
-              camera.updateProjectionMatrix();
+            if (!camera.manual) {
+              if ('aspect' in cameraOptions || 'left' in cameraOptions || 'right' in cameraOptions || 'bottom' in cameraOptions || 'top' in cameraOptions) {
+                camera.manual = true;
+                camera.updateProjectionMatrix();
+              }
             }
           }
           // Always look at center by default
@@ -2169,7 +2175,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,
@@ -2210,9 +2216,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);
@@ -2241,7 +2248,7 @@ function unmountComponentAtNode(canvas, callback) {
   }
 }
 function createPortal(children, container, state) {
-  return /*#__PURE__*/React__namespace.createElement(Portal, {
+  return /*#__PURE__*/jsxRuntime.jsx(Portal, {
     children: children,
     container: container,
     state: state
@@ -2266,7 +2273,7 @@ function Portal({
   const [raycaster] = React__namespace.useState(() => new THREE__namespace.Raycaster());
   const [pointer] = React__namespace.useState(() => new THREE__namespace.Vector2());
   const inject = useMutableCallback((rootState, injectState) => {
-    let viewport;
+    let viewport = undefined;
     if (injectState.camera && size) {
       const camera = injectState.camera;
       // Calculate the override viewport, if present
@@ -2277,8 +2284,7 @@ function Portal({
     return {
       // The intersect consists of the previous root state
       ...rootState,
-      get: injectState.get,
-      set: injectState.set,
+      ...injectState,
       // Portals have their own scene, which forms the root, a raycaster and a pointer
       scene: container,
       raycaster,
@@ -2311,6 +2317,7 @@ function Portal({
     };
   });
   const usePortalStore = React__namespace.useMemo(() => {
+    // Create a mirrored store, based on the previous root with a few overrides ...
     const store = traditional.createWithEqualityFn((set, get) => ({
       ...rest,
       set,
@@ -2324,9 +2331,12 @@ function Portal({
     return store;
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [previousRoot, container]);
-  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 loop = require('./loop-02cefb27.cjs.dev.js');
-var _extends = require('@babel/runtime/helpers/extends');
+var loop = require('./loop-4ac96174.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/traditional');
 require('react-reconciler');
@@ -213,13 +213,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(loop.ErrorBoundary, {
-        set: setError
-      }, /*#__PURE__*/React__namespace.createElement(React__namespace.Suspense, {
-        fallback: /*#__PURE__*/React__namespace.createElement(loop.Block, {
-          set: setBlock
+      root.current.render( /*#__PURE__*/jsxRuntime.jsx(Bridge, {
+        children: /*#__PURE__*/jsxRuntime.jsx(loop.ErrorBoundary, {
+          set: setError,
+          children: /*#__PURE__*/jsxRuntime.jsx(React__namespace.Suspense, {
+            fallback: /*#__PURE__*/jsxRuntime.jsx(loop.Block, {
+              set: setBlock
+            }),
+            children: children
+          })
         })
-      }, children))));
+      }));
     }
   });
   React__namespace.useEffect(() => {
@@ -230,7 +234,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',
@@ -239,19 +243,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
+      })
+    })
+  });
 });
 
 /**
@@ -259,9 +267,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.FixedStage = loop.FixedStage;

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

@@ -2,12 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var loop = require('./loop-1fad3b6f.cjs.prod.js');
-var _extends = require('@babel/runtime/helpers/extends');
+var loop = require('./loop-2e09d861.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/traditional');
 require('react-reconciler');
@@ -213,13 +213,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(loop.ErrorBoundary, {
-        set: setError
-      }, /*#__PURE__*/React__namespace.createElement(React__namespace.Suspense, {
-        fallback: /*#__PURE__*/React__namespace.createElement(loop.Block, {
-          set: setBlock
+      root.current.render( /*#__PURE__*/jsxRuntime.jsx(Bridge, {
+        children: /*#__PURE__*/jsxRuntime.jsx(loop.ErrorBoundary, {
+          set: setError,
+          children: /*#__PURE__*/jsxRuntime.jsx(React__namespace.Suspense, {
+            fallback: /*#__PURE__*/jsxRuntime.jsx(loop.Block, {
+              set: setBlock
+            }),
+            children: children
+          })
         })
-      }, children))));
+      }));
     }
   });
   React__namespace.useEffect(() => {
@@ -230,7 +234,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',
@@ -239,19 +243,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
+      })
+    })
+  });
 });
 
 /**
@@ -259,9 +267,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.FixedStage = loop.FixedStage;

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

@@ -1,10 +1,10 @@
-import { c as createEvents, e as extend, u as useBridge, a as useMutableCallback, b as useIsomorphicLayoutEffect, d as createRoot, i as isRef, E as ErrorBoundary, B as Block, f as unmountComponentAtNode } from './loop-d73c6316.esm.js';
-export { F as FixedStage, t as ReactThreeFiber, S as Stage, p as Stages, _ as _roots, x as act, j as addAfterEffect, h as addEffect, k as addTail, m as advance, s as applyProps, y as buildGraph, q as context, c as createEvents, o as createPortal, d as createRoot, w as dispose, e as extend, g as flushGlobalEffects, v as getRootState, l as invalidate, r as reconciler, n as render, f as unmountComponentAtNode, D as useFrame, H as useGraph, z as useInstanceHandle, I as useLoader, A as useStore, C as useThree, G as useUpdate } from './loop-d73c6316.esm.js';
-import _extends from '@babel/runtime/helpers/esm/extends';
+import { c as createEvents, e as extend, u as useBridge, a as useMutableCallback, b as useIsomorphicLayoutEffect, d as createRoot, i as isRef, E as ErrorBoundary, B as Block, f as unmountComponentAtNode } from './loop-2db547cd.esm.js';
+export { F as FixedStage, t as ReactThreeFiber, S as Stage, p as Stages, _ as _roots, x as act, j as addAfterEffect, h as addEffect, k as addTail, m as advance, s as applyProps, y as buildGraph, q as context, c as createEvents, o as createPortal, d as createRoot, w as dispose, e as extend, g as flushGlobalEffects, v as getRootState, l as invalidate, r as reconciler, n as render, f as unmountComponentAtNode, D as useFrame, H as useGraph, z as useInstanceHandle, I as useLoader, A as useStore, C as useThree, G as useUpdate } from './loop-2db547cd.esm.js';
 import * as React from 'react';
 import * as THREE from 'three';
 import useMeasure from 'react-use-measure';
 import { FiberProvider } from 'its-fine';
+import { jsx } from 'react/jsx-runtime';
 import 'react-reconciler/constants';
 import 'zustand/traditional';
 import 'react-reconciler';
@@ -186,13 +186,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(() => {
@@ -203,7 +207,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',
@@ -212,19 +216,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
+      })
+    })
+  });
 });
 
 /**
@@ -232,9 +240,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 loop = require('../../dist/loop-02cefb27.cjs.dev.js');
-var _extends = require('@babel/runtime/helpers/extends');
+var loop = require('../../dist/loop-4ac96174.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');
@@ -255,31 +255,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(loop.ErrorBoundary, {
-      set: setError
-    }, /*#__PURE__*/React__namespace.createElement(React__namespace.Suspense, {
-      fallback: /*#__PURE__*/React__namespace.createElement(loop.Block, {
-        set: setBlock
+    root.current.render( /*#__PURE__*/jsxRuntime.jsx(Bridge, {
+      children: /*#__PURE__*/jsxRuntime.jsx(loop.ErrorBoundary, {
+        set: setError,
+        children: /*#__PURE__*/jsxRuntime.jsx(React__namespace.Suspense, {
+          fallback: /*#__PURE__*/jsxRuntime.jsx(loop.Block, {
+            set: setBlock
+          }),
+          children: children
+        })
       })
-    }, children))));
+    }));
   }
   React__namespace.useEffect(() => {
     if (canvas) {
       return () => loop.unmountComponentAtNode(canvas);
     }
   }, [canvas]);
-  return /*#__PURE__*/React__namespace.createElement(_View, _extends({}, props, {
+  return /*#__PURE__*/jsxRuntime.jsx(_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
+    })
+  });
 });
 
 /**
@@ -287,9 +294,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
@@ -425,7 +435,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 loop = require('../../dist/loop-1fad3b6f.cjs.prod.js');
-var _extends = require('@babel/runtime/helpers/extends');
+var loop = require('../../dist/loop-2e09d861.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');
@@ -255,31 +255,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(loop.ErrorBoundary, {
-      set: setError
-    }, /*#__PURE__*/React__namespace.createElement(React__namespace.Suspense, {
-      fallback: /*#__PURE__*/React__namespace.createElement(loop.Block, {
-        set: setBlock
+    root.current.render( /*#__PURE__*/jsxRuntime.jsx(Bridge, {
+      children: /*#__PURE__*/jsxRuntime.jsx(loop.ErrorBoundary, {
+        set: setError,
+        children: /*#__PURE__*/jsxRuntime.jsx(React__namespace.Suspense, {
+          fallback: /*#__PURE__*/jsxRuntime.jsx(loop.Block, {
+            set: setBlock
+          }),
+          children: children
+        })
       })
-    }, children))));
+    }));
   }
   React__namespace.useEffect(() => {
     if (canvas) {
       return () => loop.unmountComponentAtNode(canvas);
     }
   }, [canvas]);
-  return /*#__PURE__*/React__namespace.createElement(_View, _extends({}, props, {
+  return /*#__PURE__*/jsxRuntime.jsx(_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
+    })
+  });
 });
 
 /**
@@ -287,9 +294,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
@@ -425,7 +435,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 useBridge, a as useMutableCallback, d as createRoot, E as ErrorBoundary, B as Block, f as unmountComponentAtNode } from '../../dist/loop-d73c6316.esm.js';
-export { F as FixedStage, t as ReactThreeFiber, S as Stage, p as Stages, _ as _roots, x as act, j as addAfterEffect, h as addEffect, k as addTail, m as advance, s as applyProps, y as buildGraph, q as context, c as createEvents, o as createPortal, d as createRoot, w as dispose, e as extend, g as flushGlobalEffects, v as getRootState, l as invalidate, r as reconciler, n as render, f as unmountComponentAtNode, D as useFrame, H as useGraph, z as useInstanceHandle, I as useLoader, A as useStore, C as useThree, G as useUpdate } from '../../dist/loop-d73c6316.esm.js';
-import _extends from '@babel/runtime/helpers/esm/extends';
+import { c as createEvents, e as extend, u as useBridge, a as useMutableCallback, d as createRoot, E as ErrorBoundary, B as Block, f as unmountComponentAtNode } from '../../dist/loop-2db547cd.esm.js';
+export { F as FixedStage, t as ReactThreeFiber, S as Stage, p as Stages, _ as _roots, x as act, j as addAfterEffect, h as addEffect, k as addTail, m as advance, s as applyProps, y as buildGraph, q as context, c as createEvents, o as createPortal, d as createRoot, w as dispose, e as extend, g as flushGlobalEffects, v as getRootState, l as invalidate, r as reconciler, n as render, f as unmountComponentAtNode, D as useFrame, H as useGraph, z as useInstanceHandle, I as useLoader, A as useStore, C as useThree, G as useUpdate } from '../../dist/loop-2db547cd.esm.js';
 import * as React from 'react';
 import * as THREE from 'three';
 import { PanResponder, PixelRatio, StyleSheet, View, Platform, Image, NativeModules } from 'react-native';
 import { GLView } from 'expo-gl';
 import { FiberProvider } 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';
@@ -230,31 +230,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
+    })
+  });
 });
 
 /**
@@ -262,9 +269,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
@@ -400,7 +410,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": "9.0.0-alpha.5",
+  "version": "9.0.0-alpha.7",
   "description": "A React renderer for Threejs",
   "keywords": [
     "react",
@@ -47,9 +47,9 @@
     "base64-js": "^1.5.1",
     "buffer": "^6.0.3",
     "its-fine": "^1.2.5",
-    "react-reconciler": "0.31.0-beta-94eed63c49-20240425",
+    "react-reconciler": "0.31.0-rc-915b914b3a-20240515",
     "react-use-measure": "^2.1.1",
-    "scheduler": "0.25.0-beta-94eed63c49-20240425",
+    "scheduler": "0.25.0-rc-915b914b3a-20240515",
     "suspend-react": "^0.1.3",
     "zustand": "^4.1.2"
   },

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?