@react-three/fiber 9.0.0-rc.1 → 9.0.0-rc.3

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var events = require('./events-df578889.cjs.dev.js');
+var events = require('./events-c2452172.cjs.dev.js');
 var React = require('react');
 var THREE = require('three');
 var createDebounce = require('debounce');
@@ -10,9 +10,9 @@ var itsFine = require('its-fine');
 var jsxRuntime = require('react/jsx-runtime');
 require('react-reconciler/constants');
 require('zustand/traditional');
-require('suspend-react');
 require('react-reconciler');
 require('scheduler');
+require('suspend-react');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -232,7 +232,8 @@ function findScrollContainers(element) {
 const keys = ['x', 'y', 'top', 'bottom', 'left', 'right', 'width', 'height'];
 const areBoundsEqual = (a, b) => keys.every(key => a[key] === b[key]);
 
-const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
+function CanvasImpl({
+  ref,
   children,
   fallback,
   resize,
@@ -255,7 +256,7 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   onPointerMissed,
   onCreated,
   ...props
-}, forwardedRef) {
+}) {
   // Create a known catalogue of Threejs-native elements
   // This will include the entire THREE namespace by default, users can extend
   // their own elements by using the createRoot API instead
@@ -271,7 +272,7 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   });
   const canvasRef = React__namespace.useRef(null);
   const divRef = React__namespace.useRef(null);
-  React__namespace.useImperativeHandle(forwardedRef, () => canvasRef.current);
+  React__namespace.useImperativeHandle(ref, () => canvasRef.current);
   const handlePointerMissed = events.useMutableCallback(onPointerMissed);
   const [block, setBlock] = React__namespace.useState(false);
   const [error, setError] = React__namespace.useState(false);
@@ -367,20 +368,19 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
       })
     })
   });
-});
+}
 
 /**
  * A DOM canvas which accepts threejs elements as children.
  * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
  */
-const Canvas = /*#__PURE__*/React__namespace.forwardRef(function CanvasWrapper(props, ref) {
+function Canvas(props) {
   return /*#__PURE__*/jsxRuntime.jsx(itsFine.FiberProvider, {
     children: /*#__PURE__*/jsxRuntime.jsx(CanvasImpl, {
-      ...props,
-      ref: ref
+      ...props
     })
   });
-});
+}
 
 exports.ReactThreeFiber = events.threeTypes;
 exports._roots = events._roots;

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var events = require('./events-cb1a9ea0.cjs.prod.js');
+var events = require('./events-484fb9c5.cjs.prod.js');
 var React = require('react');
 var THREE = require('three');
 var createDebounce = require('debounce');
@@ -10,9 +10,9 @@ var itsFine = require('its-fine');
 var jsxRuntime = require('react/jsx-runtime');
 require('react-reconciler/constants');
 require('zustand/traditional');
-require('suspend-react');
 require('react-reconciler');
 require('scheduler');
+require('suspend-react');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -232,7 +232,8 @@ function findScrollContainers(element) {
 const keys = ['x', 'y', 'top', 'bottom', 'left', 'right', 'width', 'height'];
 const areBoundsEqual = (a, b) => keys.every(key => a[key] === b[key]);
 
-const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
+function CanvasImpl({
+  ref,
   children,
   fallback,
   resize,
@@ -255,7 +256,7 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   onPointerMissed,
   onCreated,
   ...props
-}, forwardedRef) {
+}) {
   // Create a known catalogue of Threejs-native elements
   // This will include the entire THREE namespace by default, users can extend
   // their own elements by using the createRoot API instead
@@ -271,7 +272,7 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   });
   const canvasRef = React__namespace.useRef(null);
   const divRef = React__namespace.useRef(null);
-  React__namespace.useImperativeHandle(forwardedRef, () => canvasRef.current);
+  React__namespace.useImperativeHandle(ref, () => canvasRef.current);
   const handlePointerMissed = events.useMutableCallback(onPointerMissed);
   const [block, setBlock] = React__namespace.useState(false);
   const [error, setError] = React__namespace.useState(false);
@@ -367,20 +368,19 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
       })
     })
   });
-});
+}
 
 /**
  * A DOM canvas which accepts threejs elements as children.
  * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
  */
-const Canvas = /*#__PURE__*/React__namespace.forwardRef(function CanvasWrapper(props, ref) {
+function Canvas(props) {
   return /*#__PURE__*/jsxRuntime.jsx(itsFine.FiberProvider, {
     children: /*#__PURE__*/jsxRuntime.jsx(CanvasImpl, {
-      ...props,
-      ref: ref
+      ...props
     })
   });
-});
+}
 
 exports.ReactThreeFiber = events.threeTypes;
 exports._roots = events._roots;

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

@@ -1,5 +1,5 @@
-import { e as extend, u as useBridge, a as useMutableCallback, b as useIsomorphicLayoutEffect, c as createRoot, i as isRef, E as ErrorBoundary, B as Block, d as unmountComponentAtNode, f as createPointerEvents } from './events-26d2636c.esm.js';
-export { t as ReactThreeFiber, _ as _roots, x as act, k as addAfterEffect, j as addEffect, l as addTail, n as advance, s as applyProps, y as buildGraph, q as context, g as createEvents, p as createPortal, c as createRoot, w as dispose, f as events, e as extend, h as flushGlobalEffects, v as getRootState, m as invalidate, r as reconciler, o as render, d as unmountComponentAtNode, D as useFrame, F as useGraph, z as useInstanceHandle, G as useLoader, A as useStore, C as useThree } from './events-26d2636c.esm.js';
+import { e as extend, u as useBridge, a as useMutableCallback, b as useIsomorphicLayoutEffect, c as createRoot, i as isRef, E as ErrorBoundary, B as Block, d as unmountComponentAtNode, f as createPointerEvents } from './events-64d1e225.esm.js';
+export { t as ReactThreeFiber, _ as _roots, x as act, k as addAfterEffect, j as addEffect, l as addTail, n as advance, s as applyProps, y as buildGraph, q as context, g as createEvents, p as createPortal, c as createRoot, w as dispose, f as events, e as extend, h as flushGlobalEffects, v as getRootState, m as invalidate, r as reconciler, o as render, d as unmountComponentAtNode, D as useFrame, F as useGraph, z as useInstanceHandle, G as useLoader, A as useStore, C as useThree } from './events-64d1e225.esm.js';
 import * as React from 'react';
 import { useState, useRef, useEffect, useMemo } from 'react';
 import * as THREE from 'three';
@@ -8,9 +8,9 @@ import { FiberProvider } from 'its-fine';
 import { jsx } from 'react/jsx-runtime';
 import 'react-reconciler/constants';
 import 'zustand/traditional';
-import 'suspend-react';
 import 'react-reconciler';
 import 'scheduler';
+import 'suspend-react';
 
 /* eslint-disable react-hooks/rules-of-hooks */
 function useMeasure({
@@ -206,7 +206,8 @@ function findScrollContainers(element) {
 const keys = ['x', 'y', 'top', 'bottom', 'left', 'right', 'width', 'height'];
 const areBoundsEqual = (a, b) => keys.every(key => a[key] === b[key]);
 
-const CanvasImpl = /*#__PURE__*/React.forwardRef(function Canvas({
+function CanvasImpl({
+  ref,
   children,
   fallback,
   resize,
@@ -229,7 +230,7 @@ const CanvasImpl = /*#__PURE__*/React.forwardRef(function Canvas({
   onPointerMissed,
   onCreated,
   ...props
-}, forwardedRef) {
+}) {
   // Create a known catalogue of Threejs-native elements
   // This will include the entire THREE namespace by default, users can extend
   // their own elements by using the createRoot API instead
@@ -245,7 +246,7 @@ const CanvasImpl = /*#__PURE__*/React.forwardRef(function Canvas({
   });
   const canvasRef = React.useRef(null);
   const divRef = React.useRef(null);
-  React.useImperativeHandle(forwardedRef, () => canvasRef.current);
+  React.useImperativeHandle(ref, () => canvasRef.current);
   const handlePointerMissed = useMutableCallback(onPointerMissed);
   const [block, setBlock] = React.useState(false);
   const [error, setError] = React.useState(false);
@@ -341,19 +342,18 @@ const CanvasImpl = /*#__PURE__*/React.forwardRef(function Canvas({
       })
     })
   });
-});
+}
 
 /**
  * A DOM canvas which accepts threejs elements as children.
  * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
  */
-const Canvas = /*#__PURE__*/React.forwardRef(function CanvasWrapper(props, ref) {
+function Canvas(props) {
   return /*#__PURE__*/jsx(FiberProvider, {
     children: /*#__PURE__*/jsx(CanvasImpl, {
-      ...props,
-      ref: ref
+      ...props
     })
   });
-});
+}
 
 export { Canvas };

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var events = require('../../dist/events-df578889.cjs.dev.js');
+var events = require('../../dist/events-c2452172.cjs.dev.js');
 var React = require('react');
 var THREE = require('three');
 var reactNative = require('react-native');
@@ -15,9 +15,9 @@ var base64Js = require('base64-js');
 var buffer = require('buffer');
 require('react-reconciler/constants');
 require('zustand/traditional');
-require('suspend-react');
 require('react-reconciler');
 require('scheduler');
+require('suspend-react');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -43,11 +43,7 @@ var fs__namespace = /*#__PURE__*/_interopNamespace(fs);
 
 // TODO: React 19 needs support from react-native
 const _View = reactNative.View;
-/**
- * A native canvas which accepts threejs elements as children.
- * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
- */
-const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(({
+function CanvasImpl({
   children,
   style,
   gl,
@@ -64,8 +60,9 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(({
   scene,
   onPointerMissed,
   onCreated,
+  ref,
   ...props
-}, forwardedRef) => {
+}) {
   // Create a known catalogue of Threejs-native elements
   // This will include the entire THREE namespace by default, users can extend
   // their own elements by using the createRoot API instead
@@ -84,7 +81,7 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(({
   });
   const [canvas, setCanvas] = React__namespace.useState(null);
   const [bind, setBind] = React__namespace.useState();
-  React__namespace.useImperativeHandle(forwardedRef, () => viewRef.current);
+  React__namespace.useImperativeHandle(ref, () => viewRef.current);
   const handlePointerMissed = events.useMutableCallback(onPointerMissed);
   const [block, setBlock] = React__namespace.useState(false);
   const [error, setError] = React__namespace.useState(undefined);
@@ -265,20 +262,19 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(({
       style: reactNative.StyleSheet.absoluteFill
     })
   });
-});
+}
 
 /**
  * A native canvas which accepts threejs elements as children.
  * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
  */
-const Canvas = /*#__PURE__*/React__namespace.forwardRef(function CanvasWrapper(props, ref) {
+function Canvas(props) {
   return /*#__PURE__*/jsxRuntime.jsx(itsFine.FiberProvider, {
     children: /*#__PURE__*/jsxRuntime.jsx(CanvasImpl, {
-      ...props,
-      ref: ref
+      ...props
     })
   });
-});
+}
 
 /** Default R3F event manager for react-native */
 function createTouchEvents(store) {

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var events = require('../../dist/events-cb1a9ea0.cjs.prod.js');
+var events = require('../../dist/events-484fb9c5.cjs.prod.js');
 var React = require('react');
 var THREE = require('three');
 var reactNative = require('react-native');
@@ -15,9 +15,9 @@ var base64Js = require('base64-js');
 var buffer = require('buffer');
 require('react-reconciler/constants');
 require('zustand/traditional');
-require('suspend-react');
 require('react-reconciler');
 require('scheduler');
+require('suspend-react');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -43,11 +43,7 @@ var fs__namespace = /*#__PURE__*/_interopNamespace(fs);
 
 // TODO: React 19 needs support from react-native
 const _View = reactNative.View;
-/**
- * A native canvas which accepts threejs elements as children.
- * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
- */
-const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(({
+function CanvasImpl({
   children,
   style,
   gl,
@@ -64,8 +60,9 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(({
   scene,
   onPointerMissed,
   onCreated,
+  ref,
   ...props
-}, forwardedRef) => {
+}) {
   // Create a known catalogue of Threejs-native elements
   // This will include the entire THREE namespace by default, users can extend
   // their own elements by using the createRoot API instead
@@ -84,7 +81,7 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(({
   });
   const [canvas, setCanvas] = React__namespace.useState(null);
   const [bind, setBind] = React__namespace.useState();
-  React__namespace.useImperativeHandle(forwardedRef, () => viewRef.current);
+  React__namespace.useImperativeHandle(ref, () => viewRef.current);
   const handlePointerMissed = events.useMutableCallback(onPointerMissed);
   const [block, setBlock] = React__namespace.useState(false);
   const [error, setError] = React__namespace.useState(undefined);
@@ -265,20 +262,19 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(({
       style: reactNative.StyleSheet.absoluteFill
     })
   });
-});
+}
 
 /**
  * A native canvas which accepts threejs elements as children.
  * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
  */
-const Canvas = /*#__PURE__*/React__namespace.forwardRef(function CanvasWrapper(props, ref) {
+function Canvas(props) {
   return /*#__PURE__*/jsxRuntime.jsx(itsFine.FiberProvider, {
     children: /*#__PURE__*/jsxRuntime.jsx(CanvasImpl, {
-      ...props,
-      ref: ref
+      ...props
     })
   });
-});
+}
 
 /** Default R3F event manager for react-native */
 function createTouchEvents(store) {

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

@@ -1,5 +1,5 @@
-import { e as extend, u as useBridge, a as useMutableCallback, c as createRoot, E as ErrorBoundary, B as Block, d as unmountComponentAtNode, f as createPointerEvents, g as createEvents } from '../../dist/events-26d2636c.esm.js';
-export { t as ReactThreeFiber, _ as _roots, x as act, k as addAfterEffect, j as addEffect, l as addTail, n as advance, s as applyProps, y as buildGraph, q as context, g as createEvents, p as createPortal, c as createRoot, w as dispose, e as extend, h as flushGlobalEffects, v as getRootState, m as invalidate, r as reconciler, o as render, d as unmountComponentAtNode, D as useFrame, F as useGraph, z as useInstanceHandle, G as useLoader, A as useStore, C as useThree } from '../../dist/events-26d2636c.esm.js';
+import { e as extend, u as useBridge, a as useMutableCallback, c as createRoot, E as ErrorBoundary, B as Block, d as unmountComponentAtNode, f as createPointerEvents, g as createEvents } from '../../dist/events-64d1e225.esm.js';
+export { t as ReactThreeFiber, _ as _roots, x as act, k as addAfterEffect, j as addEffect, l as addTail, n as advance, s as applyProps, y as buildGraph, q as context, g as createEvents, p as createPortal, c as createRoot, w as dispose, e as extend, h as flushGlobalEffects, v as getRootState, m as invalidate, r as reconciler, o as render, d as unmountComponentAtNode, D as useFrame, F as useGraph, z as useInstanceHandle, G as useLoader, A as useStore, C as useThree } from '../../dist/events-64d1e225.esm.js';
 import * as React from 'react';
 import * as THREE from 'three';
 import { PanResponder, PixelRatio, StyleSheet, View, Platform, Image, NativeModules } from 'react-native';
@@ -12,17 +12,13 @@ import { fromByteArray } from 'base64-js';
 import { Buffer } from 'buffer';
 import 'react-reconciler/constants';
 import 'zustand/traditional';
-import 'suspend-react';
 import 'react-reconciler';
 import 'scheduler';
+import 'suspend-react';
 
 // TODO: React 19 needs support from react-native
 const _View = View;
-/**
- * A native canvas which accepts threejs elements as children.
- * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
- */
-const CanvasImpl = /*#__PURE__*/React.forwardRef(({
+function CanvasImpl({
   children,
   style,
   gl,
@@ -39,8 +35,9 @@ const CanvasImpl = /*#__PURE__*/React.forwardRef(({
   scene,
   onPointerMissed,
   onCreated,
+  ref,
   ...props
-}, forwardedRef) => {
+}) {
   // Create a known catalogue of Threejs-native elements
   // This will include the entire THREE namespace by default, users can extend
   // their own elements by using the createRoot API instead
@@ -59,7 +56,7 @@ const CanvasImpl = /*#__PURE__*/React.forwardRef(({
   });
   const [canvas, setCanvas] = React.useState(null);
   const [bind, setBind] = React.useState();
-  React.useImperativeHandle(forwardedRef, () => viewRef.current);
+  React.useImperativeHandle(ref, () => viewRef.current);
   const handlePointerMissed = useMutableCallback(onPointerMissed);
   const [block, setBlock] = React.useState(false);
   const [error, setError] = React.useState(undefined);
@@ -240,20 +237,19 @@ const CanvasImpl = /*#__PURE__*/React.forwardRef(({
       style: StyleSheet.absoluteFill
     })
   });
-});
+}
 
 /**
  * A native canvas which accepts threejs elements as children.
  * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
  */
-const Canvas = /*#__PURE__*/React.forwardRef(function CanvasWrapper(props, ref) {
+function Canvas(props) {
   return /*#__PURE__*/jsx(FiberProvider, {
     children: /*#__PURE__*/jsx(CanvasImpl, {
-      ...props,
-      ref: ref
+      ...props
     })
   });
-});
+}
 
 /** Default R3F event manager for react-native */
 function createTouchEvents(store) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/fiber",
-  "version": "9.0.0-rc.1",
+  "version": "9.0.0-rc.3",
   "description": "A React renderer for Threejs",
   "keywords": [
     "react",
@@ -50,8 +50,8 @@
     "buffer": "^6.0.3",
     "debounce": "^1.2.1",
     "its-fine": "^1.2.5",
-    "react-reconciler": "0.31.0-rc.1",
-    "scheduler": "0.25.0-rc.1",
+    "react-reconciler": "0.31.0",
+    "scheduler": "0.25.0",
     "suspend-react": "^0.1.3",
     "zustand": "^4.1.2"
   },
@@ -60,10 +60,10 @@
     "expo-asset": ">=8.4",
     "expo-gl": ">=11.0",
     "expo-file-system": ">=11.0",
-    "react": ">=19.0",
-    "react-dom": ">=19.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-native": ">=0.69",
-    "three": ">=0.141"
+    "three": ">=0.156"
   },
   "peerDependenciesMeta": {
     "react-dom": {