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

package/dist/declarations/src/native/Canvas.d.ts

@@ -4,11 +4,10 @@ import { RenderProps } from "../core/index.js";
 export interface CanvasProps extends Omit<RenderProps<HTMLCanvasElement>, 'size' | 'dpr'>, Omit<ViewProps, 'children'> {
     children: React.ReactNode;
     style?: ViewStyle;
-}
-export interface Props extends CanvasProps {
+    ref?: React.Ref<View>;
 }
 /**
  * A native canvas which accepts threejs elements as children.
  * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
  */
-export declare const Canvas: React.ForwardRefExoticComponent<CanvasProps & React.RefAttributes<View>>;
+export declare function Canvas(props: CanvasProps): import("react/jsx-runtime").JSX.Element;

package/dist/declarations/src/web/Canvas.d.ts

@@ -3,6 +3,7 @@ import { Options as ResizeOptions } from "./use-measure.js";
 import { RenderProps } from "../core/index.js";
 export interface CanvasProps extends Omit<RenderProps<HTMLCanvasElement>, 'size'>, React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
+    ref?: React.Ref<HTMLCanvasElement>;
     /** Canvas fallback content, similar to img's alt prop */
     fallback?: React.ReactNode;
     /**
@@ -15,10 +16,8 @@ export interface CanvasProps extends Omit<RenderProps<HTMLCanvasElement>, 'size'
     /** The event prefix that is cast into canvas pointer x/y events, default: "offset" */
     eventPrefix?: 'offset' | 'client' | 'page' | 'layer' | 'screen';
 }
-export interface Props extends CanvasProps {
-}
 /**
  * A DOM canvas which accepts threejs elements as children.
  * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
  */
-export declare const Canvas: React.ForwardRefExoticComponent<CanvasProps & React.RefAttributes<HTMLCanvasElement>>;
+export declare function Canvas(props: CanvasProps): import("react/jsx-runtime").JSX.Element;

package/dist/{events-bcbe26a9.cjs.prod.js → events-484fb9c5.cjs.prod.js}

@@ -358,7 +358,6 @@ function diffProps(instance, newProps) {
 // https://github.com/mrdoob/three.js/pull/22748
 const colorMaps = ['map', 'emissiveMap', 'sheenColorMap', 'specularColorMap', 'envMap'];
 const EVENT_REGEX = /^on(Pointer|Click|DoubleClick|ContextMenu|Wheel)/;
-
 // This function applies a set of changes to the instance
 function applyProps(object, props) {
   var _instance$object;
@@ -387,7 +386,7 @@ function applyProps(object, props) {
     } = resolve(object, prop);
 
     // Copy if properties match signatures
-    if (typeof (target == null ? void 0 : target.copy) === 'function' && target.copy === value.copy) {
+    if (target != null && target.copy && value != null && value.constructor && target.constructor === value.constructor) {
       target.copy(value);
     }
     // Layers have no copy function, we must therefore copy the mask property

package/dist/{events-89bb769e.esm.js → events-64d1e225.esm.js}

@@ -332,7 +332,6 @@ function diffProps(instance, newProps) {
 // https://github.com/mrdoob/three.js/pull/22748
 const colorMaps = ['map', 'emissiveMap', 'sheenColorMap', 'specularColorMap', 'envMap'];
 const EVENT_REGEX = /^on(Pointer|Click|DoubleClick|ContextMenu|Wheel)/;
-
 // This function applies a set of changes to the instance
 function applyProps(object, props) {
   var _instance$object;
@@ -361,7 +360,7 @@ function applyProps(object, props) {
     } = resolve(object, prop);
 
     // Copy if properties match signatures
-    if (typeof (target == null ? void 0 : target.copy) === 'function' && target.copy === value.copy) {
+    if (target != null && target.copy && value != null && value.constructor && target.constructor === value.constructor) {
       target.copy(value);
     }
     // Layers have no copy function, we must therefore copy the mask property

package/dist/{events-ec103e1e.cjs.dev.js → events-c2452172.cjs.dev.js}

@@ -358,7 +358,6 @@ function diffProps(instance, newProps) {
 // https://github.com/mrdoob/three.js/pull/22748
 const colorMaps = ['map', 'emissiveMap', 'sheenColorMap', 'specularColorMap', 'envMap'];
 const EVENT_REGEX = /^on(Pointer|Click|DoubleClick|ContextMenu|Wheel)/;
-
 // This function applies a set of changes to the instance
 function applyProps(object, props) {
   var _instance$object;
@@ -387,7 +386,7 @@ function applyProps(object, props) {
     } = resolve(object, prop);
 
     // Copy if properties match signatures
-    if (typeof (target == null ? void 0 : target.copy) === 'function' && target.copy === value.copy) {
+    if (target != null && target.copy && value != null && value.constructor && target.constructor === value.constructor) {
       target.copy(value);
     }
     // Layers have no copy function, we must therefore copy the mask property

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var events = require('./events-ec103e1e.cjs.dev.js');
+var events = require('./events-c2452172.cjs.dev.js');
 var React = require('react');
 var THREE = require('three');
 var createDebounce = require('debounce');
@@ -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-bcbe26a9.cjs.prod.js');
+var events = require('./events-484fb9c5.cjs.prod.js');
 var React = require('react');
 var THREE = require('three');
 var createDebounce = require('debounce');
@@ -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-89bb769e.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-89bb769e.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';
@@ -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-ec103e1e.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');
@@ -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-bcbe26a9.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');
@@ -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-89bb769e.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-89bb769e.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';
@@ -18,11 +18,7 @@ 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.2",
+  "version": "9.0.0-rc.3",
   "description": "A React renderer for Threejs",
   "keywords": [
     "react",