@react-three/fiber 9.0.0-rc.0 → 9.0.0-rc.10

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-aef54ace.cjs.prod.js');
+var events = require('../../dist/events-bd708dc8.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);
@@ -196,55 +193,60 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(({
     });
     setBind(responder.panHandlers);
   }, []);
-  if (root.current && width > 0 && height > 0) {
-    root.current.configure({
-      gl,
-      events: events$1,
-      shadows,
-      linear,
-      flat,
-      legacy,
-      orthographic,
-      frameloop,
-      performance,
-      raycaster,
-      camera,
-      scene,
-      // expo-gl can only render at native dpr/resolution
-      // https://github.com/expo/expo-three/issues/39
-      dpr: reactNative.PixelRatio.get(),
-      size: {
-        width,
-        height,
-        top,
-        left
-      },
-      // Pass mutable reference to onPointerMissed so it's free to update
-      onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
-      // Overwrite onCreated to apply RN bindings
-      onCreated: state => {
-        // Bind render to RN bridge
-        const context = state.gl.getContext();
-        const renderFrame = state.gl.render.bind(state.gl);
-        state.gl.render = (scene, camera) => {
-          renderFrame(scene, camera);
-          context.endFrameEXP();
-        };
-        return onCreated == null ? void 0 : onCreated(state);
+  events.useIsomorphicLayoutEffect(() => {
+    if (root.current && width > 0 && height > 0) {
+      async function run() {
+        await root.current.configure({
+          gl,
+          events: events$1,
+          shadows,
+          linear,
+          flat,
+          legacy,
+          orthographic,
+          frameloop,
+          performance,
+          raycaster,
+          camera,
+          scene,
+          // expo-gl can only render at native dpr/resolution
+          // https://github.com/expo/expo-three/issues/39
+          dpr: reactNative.PixelRatio.get(),
+          size: {
+            width,
+            height,
+            top,
+            left
+          },
+          // Pass mutable reference to onPointerMissed so it's free to update
+          onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
+          // Overwrite onCreated to apply RN bindings
+          onCreated: state => {
+            // Bind render to RN bridge
+            const context = state.gl.getContext();
+            const renderFrame = state.gl.render.bind(state.gl);
+            state.gl.render = (scene, camera) => {
+              renderFrame(scene, camera);
+              context.endFrameEXP();
+            };
+            return onCreated == null ? void 0 : onCreated(state);
+          }
+        });
+        root.current.render( /*#__PURE__*/jsxRuntime.jsx(Bridge, {
+          children: /*#__PURE__*/jsxRuntime.jsx(events.ErrorBoundary, {
+            set: setError,
+            children: /*#__PURE__*/jsxRuntime.jsx(React__namespace.Suspense, {
+              fallback: /*#__PURE__*/jsxRuntime.jsx(events.Block, {
+                set: setBlock
+              }),
+              children: children
+            })
+          })
+        }));
       }
-    });
-    root.current.render( /*#__PURE__*/jsxRuntime.jsx(Bridge, {
-      children: /*#__PURE__*/jsxRuntime.jsx(events.ErrorBoundary, {
-        set: setError,
-        children: /*#__PURE__*/jsxRuntime.jsx(React__namespace.Suspense, {
-          fallback: /*#__PURE__*/jsxRuntime.jsx(events.Block, {
-            set: setBlock
-          }),
-          children: children
-        })
-      })
-    }));
-  }
+      run();
+    }
+  });
   React__namespace.useEffect(() => {
     if (canvas) {
       return () => events.unmountComponentAtNode(canvas);
@@ -265,20 +267,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) {
@@ -542,7 +543,6 @@ exports.flushGlobalEffects = events.flushGlobalEffects;
 exports.getRootState = events.getRootState;
 exports.invalidate = events.invalidate;
 exports.reconciler = events.reconciler;
-exports.render = events.render;
 exports.unmountComponentAtNode = events.unmountComponentAtNode;
 exports.useFrame = events.useFrame;
 exports.useGraph = events.useGraph;

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-5a08b43f.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-5a08b43f.esm.js';
+import { e as extend, u as useBridge, a as useMutableCallback, c as createRoot, b as useIsomorphicLayoutEffect, E as ErrorBoundary, B as Block, d as unmountComponentAtNode, f as createPointerEvents, g as createEvents } from '../../dist/events-aba3c3d1.esm.js';
+export { t as ReactThreeFiber, _ as _roots, w as act, k as addAfterEffect, j as addEffect, l as addTail, n as advance, q as applyProps, x as buildGraph, p as context, g as createEvents, o as createPortal, c as createRoot, v as dispose, e as extend, h as flushGlobalEffects, s as getRootState, m as invalidate, r as reconciler, d as unmountComponentAtNode, C as useFrame, D as useGraph, y as useInstanceHandle, F as useLoader, z as useStore, A as useThree } from '../../dist/events-aba3c3d1.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);
@@ -171,55 +168,60 @@ const CanvasImpl = /*#__PURE__*/React.forwardRef(({
     });
     setBind(responder.panHandlers);
   }, []);
-  if (root.current && width > 0 && height > 0) {
-    root.current.configure({
-      gl,
-      events,
-      shadows,
-      linear,
-      flat,
-      legacy,
-      orthographic,
-      frameloop,
-      performance,
-      raycaster,
-      camera,
-      scene,
-      // expo-gl can only render at native dpr/resolution
-      // https://github.com/expo/expo-three/issues/39
-      dpr: PixelRatio.get(),
-      size: {
-        width,
-        height,
-        top,
-        left
-      },
-      // Pass mutable reference to onPointerMissed so it's free to update
-      onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
-      // Overwrite onCreated to apply RN bindings
-      onCreated: state => {
-        // Bind render to RN bridge
-        const context = state.gl.getContext();
-        const renderFrame = state.gl.render.bind(state.gl);
-        state.gl.render = (scene, camera) => {
-          renderFrame(scene, camera);
-          context.endFrameEXP();
-        };
-        return onCreated == null ? void 0 : onCreated(state);
+  useIsomorphicLayoutEffect(() => {
+    if (root.current && width > 0 && height > 0) {
+      async function run() {
+        await root.current.configure({
+          gl,
+          events,
+          shadows,
+          linear,
+          flat,
+          legacy,
+          orthographic,
+          frameloop,
+          performance,
+          raycaster,
+          camera,
+          scene,
+          // expo-gl can only render at native dpr/resolution
+          // https://github.com/expo/expo-three/issues/39
+          dpr: PixelRatio.get(),
+          size: {
+            width,
+            height,
+            top,
+            left
+          },
+          // Pass mutable reference to onPointerMissed so it's free to update
+          onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
+          // Overwrite onCreated to apply RN bindings
+          onCreated: state => {
+            // Bind render to RN bridge
+            const context = state.gl.getContext();
+            const renderFrame = state.gl.render.bind(state.gl);
+            state.gl.render = (scene, camera) => {
+              renderFrame(scene, camera);
+              context.endFrameEXP();
+            };
+            return onCreated == null ? void 0 : onCreated(state);
+          }
+        });
+        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
+            })
+          })
+        }));
       }
-    });
-    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
-        })
-      })
-    }));
-  }
+      run();
+    }
+  });
   React.useEffect(() => {
     if (canvas) {
       return () => unmountComponentAtNode(canvas);
@@ -240,20 +242,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.0",
+  "version": "9.0.0-rc.10",
   "description": "A React renderer for Threejs",
   "keywords": [
     "react",
@@ -43,27 +43,26 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.17.8",
-    "@types/debounce": "^1.2.1",
-    "@types/react-reconciler": "^0.28.8",
+    "@types/react-reconciler": "^0.28.9",
     "@types/webxr": "*",
     "base64-js": "^1.5.1",
     "buffer": "^6.0.3",
-    "debounce": "^1.2.1",
-    "its-fine": "^1.2.5",
-    "react-reconciler": "0.31.0-rc.0",
-    "scheduler": "0.25.0-rc.0",
+    "its-fine": "^2.0.0",
+    "react-reconciler": "^0.31.0",
+    "react-use-measure": "^2.1.7",
+    "scheduler": "^0.25.0",
     "suspend-react": "^0.1.3",
-    "zustand": "^4.1.2"
+    "zustand": "^5.0.3"
   },
   "peerDependencies": {
     "expo": ">=43.0",
     "expo-asset": ">=8.4",
     "expo-gl": ">=11.0",
     "expo-file-system": ">=11.0",
-    "react": ">=19.0",
-    "react-dom": ">=19.0",
-    "react-native": ">=0.69",
-    "three": ">=0.141"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-native": ">=0.78",
+    "three": ">=0.156"
   },
   "peerDependenciesMeta": {
     "react-dom": {

package/dist/declarations/src/web/use-measure.d.ts

@@ -1,34 +0,0 @@
-declare type ResizeObserverCallback = (entries: any[], observer: ResizeObserver) => void;
-declare class ResizeObserver {
-    constructor(callback: ResizeObserverCallback);
-    observe(target: Element, options?: any): void;
-    unobserve(target: Element): void;
-    disconnect(): void;
-    static toString(): string;
-}
-export interface RectReadOnly {
-    readonly x: number;
-    readonly y: number;
-    readonly width: number;
-    readonly height: number;
-    readonly top: number;
-    readonly right: number;
-    readonly bottom: number;
-    readonly left: number;
-    [key: string]: number;
-}
-type HTMLOrSVGElement = HTMLElement | SVGElement;
-type Result = [(element: HTMLOrSVGElement | null) => void, RectReadOnly, () => void];
-export type Options = {
-    debounce?: number | {
-        scroll: number;
-        resize: number;
-    };
-    scroll?: boolean;
-    polyfill?: {
-        new (cb: ResizeObserverCallback): ResizeObserver;
-    };
-    offsetSize?: boolean;
-};
-export declare function useMeasure({ debounce, scroll, polyfill, offsetSize }?: Options): Result;
-export {};