@react-three/fiber 9.6.1 → 9.8.0

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-583399dd.cjs.prod.js');
+var events = require('../../dist/events-a79ef12b.cjs.prod.js');
 var React = require('react');
 var THREE = require('three');
 var reactNative = require('react-native');
@@ -190,45 +190,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
+        },
+        // 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);
+        }
+      }).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 +245,9 @@ function CanvasImpl({
             })
           })
         }));
+      } else if (root.current.ready.status === 'pending') {
+        waitFor(root.current.ready);
       }
-      run();
     }
   });
   React__namespace.useEffect(() => {
@@ -265,13 +271,13 @@ function CanvasImpl({
       style: reactNative.StyleSheet.absoluteFill,
       pointerEvents: pointerEvents,
       ...bind
-    })]
+    }), gate]
   });
 }
 
-/**
- * A native canvas which accepts threejs elements as children.
- * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
+/**
+ * A native canvas which accepts threejs elements as children.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
  */
 function Canvas(props) {
   return /*#__PURE__*/jsxRuntime.jsx(itsFine.FiberProvider, {

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-b389eeca.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-b389eeca.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, f as unmountComponentAtNode, g as createPointerEvents, h as createEvents } from '../../dist/events-803f4abc.esm.js';
+export { t as ReactThreeFiber, _ as _roots, y as act, l as addAfterEffect, k as addEffect, m as addTail, o as advance, v as applyProps, z as buildGraph, s as context, h as createEvents, p as createPortal, d as createRoot, x as dispose, e as extend, j as flushGlobalEffects, q as flushSync, w as getRootState, n as invalidate, r as reconciler, f as unmountComponentAtNode, F as useFrame, G as useGraph, A as useInstanceHandle, H as useLoader, C as useStore, D as useThree } from '../../dist/events-803f4abc.esm.js';
 import * as React from 'react';
 import * as THREE from 'three';
 import { PanResponder, PixelRatio, StyleSheet, View, Platform, Image, NativeModules } from 'react-native';
@@ -166,45 +166,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
+        },
+        // 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);
+        }
+      }).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 +221,9 @@ function CanvasImpl({
             })
           })
         }));
+      } else if (root.current.ready.status === 'pending') {
+        waitFor(root.current.ready);
       }
-      run();
     }
   });
   React.useEffect(() => {
@@ -241,13 +247,13 @@ function CanvasImpl({
       style: StyleSheet.absoluteFill,
       pointerEvents: pointerEvents,
       ...bind
-    })]
+    }), gate]
   });
 }
 
-/**
- * A native canvas which accepts threejs elements as children.
- * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
+/**
+ * A native canvas which accepts threejs elements as children.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
  */
 function Canvas(props) {
   return /*#__PURE__*/jsx(FiberProvider, {

package/native/package.json

@@ -1,5 +1,5 @@
-{
-  "main": "dist/react-three-fiber-native.cjs.js",
-  "module": "dist/react-three-fiber-native.esm.js",
-  "types": "dist/react-three-fiber-native.cjs.d.ts"
-}
+{
+  "main": "dist/react-three-fiber-native.cjs.js",
+  "module": "dist/react-three-fiber-native.esm.js",
+  "types": "dist/react-three-fiber-native.cjs.d.ts"
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/fiber",
-  "version": "9.6.1",
+  "version": "9.8.0",
   "description": "A React renderer for Threejs",
   "keywords": [
     "react",
@@ -43,8 +43,8 @@
     "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",
@@ -53,7 +53,7 @@
     "buffer": "^6.0.3",
     "its-fine": "^2.0.0",
     "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;