@react-three/fiber 9.7.0 → 9.8.1

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-4c71f21f.cjs.prod.js');
+var events = require('../../dist/events-a816cbab.cjs.prod.js');
 var React = require('react');
 var THREE = require('three');
 var reactNative = require('react-native');
@@ -80,6 +80,7 @@ function CanvasImpl({
   const [bind, setBind] = React__namespace.useState();
   React__namespace.useImperativeHandle(ref, () => viewRef.current);
   const handlePointerMissed = events.useMutableCallback(onPointerMissed);
+  const pointerMissed = React__namespace.useCallback(event => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(event), [handlePointerMissed]);
   const [block, setBlock] = React__namespace.useState(false);
   const [error, setError] = React__namespace.useState(undefined);
 
@@ -190,45 +191,50 @@ function CanvasImpl({
     });
     setBind(responder.panHandlers);
   }, []);
+
+  // Waits for an async renderer without hiding the view
+  const [gate, waitFor] = events.useGate();
   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.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
+        },
+        // Forwards to the latest onPointerMissed, so a new callback does not update the store
+        onPointerMissed: pointerMissed,
+        // 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);
+        }
+      }).catch(setError);
+
+      // Pending re-runs this effect once the renderer lands. Rejected is reported by the catch
+      if (root.current.ready.status === 'fulfilled') {
         root.current.render( /*#__PURE__*/jsxRuntime.jsx(Bridge, {
           children: /*#__PURE__*/jsxRuntime.jsx(events.ErrorBoundary, {
             set: setError,
@@ -240,8 +246,9 @@ function CanvasImpl({
             })
           })
         }));
+      } else if (root.current.ready.status === 'pending') {
+        waitFor(root.current.ready);
       }
-      run();
     }
   });
   React__namespace.useEffect(() => {
@@ -265,7 +272,7 @@ function CanvasImpl({
       style: reactNative.StyleSheet.absoluteFill,
       pointerEvents: pointerEvents,
       ...bind
-    })]
+    }), gate]
   });
 }
 

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, b as useIsomorphicLayoutEffect, E as ErrorBoundary, B as Block, d as unmountComponentAtNode, f as createPointerEvents, g as createEvents } from '../../dist/events-156d8d12.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, o as createPortal, c as createRoot, w as dispose, e as extend, h as flushGlobalEffects, p as flushSync, v as getRootState, m as invalidate, r as reconciler, d as unmountComponentAtNode, D as useFrame, F as useGraph, z as useInstanceHandle, G as useLoader, A as useStore, C as useThree } from '../../dist/events-156d8d12.esm.js';
+import { e as extend, u as useBridge, a as useMutableCallback, d as createRoot, b as useGate, c as useIsomorphicLayoutEffect, E as ErrorBoundary, B as Block, p as unmountComponentAtNode, f as createPointerEvents, g as createEvents } from '../../dist/events-9ce18a08.esm.js';
+export { t as ReactThreeFiber, _ as _roots, y as act, k as addAfterEffect, j as addEffect, l as addTail, n as advance, v as applyProps, z as buildGraph, s as context, g as createEvents, q as createPortal, d as createRoot, x as dispose, e as extend, h as flushGlobalEffects, o as flushSync, w as getRootState, m as invalidate, r as reconciler, p as unmountComponentAtNode, F as useFrame, G as useGraph, A as useInstanceHandle, H as useLoader, C as useStore, D as useThree } from '../../dist/events-9ce18a08.esm.js';
 import * as React from 'react';
 import * as THREE from 'three';
 import { PanResponder, PixelRatio, StyleSheet, View, Platform, Image, NativeModules } from 'react-native';
@@ -56,6 +56,7 @@ function CanvasImpl({
   const [bind, setBind] = React.useState();
   React.useImperativeHandle(ref, () => viewRef.current);
   const handlePointerMissed = useMutableCallback(onPointerMissed);
+  const pointerMissed = React.useCallback(event => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(event), [handlePointerMissed]);
   const [block, setBlock] = React.useState(false);
   const [error, setError] = React.useState(undefined);
 
@@ -166,45 +167,50 @@ function CanvasImpl({
     });
     setBind(responder.panHandlers);
   }, []);
+
+  // Waits for an async renderer without hiding the view
+  const [gate, waitFor] = useGate();
   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.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
+        },
+        // Forwards to the latest onPointerMissed, so a new callback does not update the store
+        onPointerMissed: pointerMissed,
+        // 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);
+        }
+      }).catch(setError);
+
+      // Pending re-runs this effect once the renderer lands. Rejected is reported by the catch
+      if (root.current.ready.status === 'fulfilled') {
         root.current.render( /*#__PURE__*/jsx(Bridge, {
           children: /*#__PURE__*/jsx(ErrorBoundary, {
             set: setError,
@@ -216,8 +222,9 @@ function CanvasImpl({
             })
           })
         }));
+      } else if (root.current.ready.status === 'pending') {
+        waitFor(root.current.ready);
       }
-      run();
     }
   });
   React.useEffect(() => {
@@ -241,7 +248,7 @@ function CanvasImpl({
       style: StyleSheet.absoluteFill,
       pointerEvents: pointerEvents,
       ...bind
-    })]
+    }), gate]
   });
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/fiber",
-  "version": "9.7.0",
+  "version": "9.8.1",
   "description": "A React renderer for Threejs",
   "keywords": [
     "react",
@@ -43,17 +43,17 @@
     "prebuild": "cp ../../readme.md readme.md"
   },
   "devDependencies": {
-    "@types/react-reconciler": "^0.32.3",
-    "react-reconciler": "^0.33.0"
+    "@types/react-reconciler": "^0.33.0",
+    "react-reconciler": "^0.34.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.17.8",
     "@types/webxr": "*",
     "base64-js": "^1.5.1",
     "buffer": "^6.0.3",
-    "its-fine": "^2.0.0",
+    "its-fine": "^2.1.1",
     "react-use-measure": "^2.1.7",
-    "scheduler": "^0.27.0",
+    "scheduler": "^0.28.0",
     "suspend-react": "^0.1.3",
     "use-sync-external-store": "^1.4.0",
     "zustand": "^5.0.3"
@@ -63,8 +63,8 @@
     "expo-asset": ">=8.4",
     "expo-file-system": ">=11.0",
     "expo-gl": ">=11.0",
-    "react": ">=19 <19.3",
-    "react-dom": ">=19 <19.3",
+    "react": ">=19 <19.4",
+    "react-dom": ">=19 <19.4",
     "react-native": ">=0.78",
     "three": ">=0.156"
   },

package/react-reconciler/index.d.ts

@@ -610,7 +610,8 @@ declare namespace ReactReconciler {
     type LanePriority = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17;
 
     type Lanes = number;
-    type Lane = number;
+
+    type Lane = number & { __LaneBrand: any };
 
     type Flags = number;
 
@@ -941,7 +942,6 @@ declare namespace ReactReconciler {
             onCaughtError: (error: Error, info: BaseErrorInfo) => void,
             onRecoverableError: (error: Error, info: BaseErrorInfo) => void,
             onDefaultTransitionIndicator: () => void,
-            transitionCallbacks: null | TransitionTracingCallbacks,
         ): OpaqueRoot;
 
         createPortal(
@@ -951,8 +951,6 @@ declare namespace ReactReconciler {
             key?: string | null,
         ): ReactPortal;
 
-        registerMutableSourceForHydration(root: FiberRoot, mutableSource: MutableSource): void;
-
         createComponentSelector(component: React$AbstractComponent<never, unknown>): ComponentSelector;
 
         createHasPseudoClassSelector(selectors: Selector[]): HasPseudoClassSelector;
@@ -987,8 +985,12 @@ declare namespace ReactReconciler {
             isStrictMode: boolean,
             concurrentUpdatesByDefaultOverride: null | boolean,
             identifierPrefix: string,
-            onRecoverableError: (error: Error) => void,
+            onUncaughtError: (error: Error, info: BaseErrorInfo & { errorBoundary?: Component }) => void,
+            onCaughtError: (error: Error, info: BaseErrorInfo) => void,
+            onRecoverableError: (error: Error, info: BaseErrorInfo) => void,
+            onDefaultTransitionIndicator: () => void,
             transitionCallbacks: null | TransitionTracingCallbacks,
+            formState: unknown,
         ): OpaqueRoot;
 
         updateContainer(
@@ -998,17 +1000,27 @@ declare namespace ReactReconciler {
             callback?: (() => void) | null,
         ): Lane;
 
+        updateContainerSync(
+            element: ReactNode,
+            container: OpaqueRoot,
+            parentComponent?: Component<any, any> | null,
+            callback?: (() => void) | null,
+        ): Lane;
+
         batchedUpdates<A, R>(fn: (a: A) => R, a: A): R;
 
         deferredUpdates<A>(fn: () => A): A;
 
         discreteUpdates<A, B, C, D, R>(fn: (arg0: A, arg1: B, arg2: C, arg3: D) => R, a: A, b: B, c: C, d: D): R;
 
-        flushControlled(fn: () => any): void;
-
         flushSync(): void;
         flushSync<R>(fn: () => R): R;
 
+        flushSyncFromReconciler(): void;
+        flushSyncFromReconciler<R>(fn: () => R): R;
+
+        flushSyncWork(): boolean;
+
         isAlreadyRendering(): boolean;
 
         flushPassiveEffects(): boolean;
@@ -1017,16 +1029,10 @@ declare namespace ReactReconciler {
 
         attemptSynchronousHydration(fiber: Fiber): void;
 
-        attemptDiscreteHydration(fiber: Fiber): void;
-
         attemptContinuousHydration(fiber: Fiber): void;
 
         attemptHydrationAtCurrentPriority(fiber: Fiber): void;
 
-        getCurrentUpdatePriority(): LanePriority;
-
-        runWithPriority<T>(priority: LanePriority, fn: () => T): T;
-
         findHostInstance(component: any): PublicInstance | null;
 
         findHostInstanceWithWarning(component: any, methodName: string): PublicInstance | null;
@@ -1039,6 +1045,17 @@ declare namespace ReactReconciler {
 
         injectIntoDevTools(devToolsConfig: DevToolsConfig<Instance, TextInstance, any>): boolean;
     }
+
+    function defaultOnUncaughtError(error: Error): void;
+    function defaultOnCaughtError(error: Error): void;
+    function defaultOnRecoverableError(error: Error): void;
+
+    function startHostTransition(
+        formFiber: Fiber,
+        pendingState: unknown,
+        action: ((formData: FormData) => void) | null,
+        formData: FormData,
+    ): void;
 }
 
 export = ReactReconciler;