@react-three/fiber 9.6.1 → 9.8.0

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var events = require('./events-f19bcc32.cjs.dev.js');
+var events = require('./events-ce5e34e8.cjs.dev.js');
 var React = require('react');
 var THREE = require('three');
 var useMeasure = require('react-use-measure');
@@ -86,46 +86,55 @@ function CanvasImpl({
   // Throw exception outwards if anything within canvas throws
   if (error) throw error;
   const root = React__namespace.useRef(null);
+
+  // Waits for an async renderer without hiding the canvas
+  const [gate, waitFor] = events.useGate();
+  const rootState = React__namespace.useRef(null);
+  const eventTarget = () => eventSource ? events.isRef(eventSource) ? eventSource.current : eventSource : divRef.current;
   events.useIsomorphicLayoutEffect(() => {
     const canvas = canvasRef.current;
     if (containerRect.width > 0 && containerRect.height > 0 && canvas) {
       if (!root.current) root.current = events.createRoot(canvas);
-      async function run() {
-        await root.current.configure({
-          gl,
-          scene,
-          events: events$1,
-          shadows,
-          linear,
-          flat,
-          legacy,
-          orthographic,
-          frameloop,
-          dpr,
-          performance,
-          raycaster,
-          camera,
-          size: containerRect,
-          // Pass mutable reference to onPointerMissed so it's free to update
-          onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
-          onCreated: state => {
-            // Connect to event source
-            state.events.connect == null ? void 0 : state.events.connect(eventSource ? events.isRef(eventSource) ? eventSource.current : eventSource : divRef.current);
-            // Set up compute function
-            if (eventPrefix) {
-              state.setEvents({
-                compute: (event, state) => {
-                  const x = event[eventPrefix + 'X'];
-                  const y = event[eventPrefix + 'Y'];
-                  state.pointer.set(x / state.size.width * 2 - 1, -(y / state.size.height) * 2 + 1);
-                  state.raycaster.setFromCamera(state.pointer, state.camera);
-                }
-              });
-            }
-            // Call onCreated callback
-            onCreated == null ? void 0 : onCreated(state);
+      root.current.configure({
+        gl,
+        scene,
+        events: events$1,
+        shadows,
+        linear,
+        flat,
+        legacy,
+        orthographic,
+        frameloop,
+        dpr,
+        performance,
+        raycaster,
+        camera,
+        size: containerRect,
+        // Pass mutable reference to onPointerMissed so it's free to update
+        onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
+        onCreated: state => {
+          var _eventTarget;
+          rootState.current = state;
+          // A ref to an ancestor is not attached yet. The effect below settles it
+          state.events.connect == null ? void 0 : state.events.connect((_eventTarget = eventTarget()) != null ? _eventTarget : divRef.current);
+          // Set up compute function
+          if (eventPrefix) {
+            state.setEvents({
+              compute: (event, state) => {
+                const x = event[eventPrefix + 'X'];
+                const y = event[eventPrefix + 'Y'];
+                state.pointer.set(x / state.size.width * 2 - 1, -(y / state.size.height) * 2 + 1);
+                state.raycaster.setFromCamera(state.pointer, state.camera);
+              }
+            });
           }
-        });
+          // Call onCreated callback
+          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,
@@ -137,10 +146,19 @@ function CanvasImpl({
             })
           })
         }));
+      } else if (root.current.ready.status === 'pending') {
+        waitFor(root.current.ready);
       }
-      run();
     }
   });
+
+  // Refs on ancestors attach after our layout effect
+  React__namespace.useEffect(() => {
+    var _rootState$current;
+    const state = (_rootState$current = rootState.current) == null ? void 0 : _rootState$current.get();
+    const target = eventTarget();
+    if (state && target && state.events.connected !== target) state.events.connect == null ? void 0 : state.events.connect(target);
+  });
   React__namespace.useEffect(() => {
     const canvas = canvasRef.current;
     if (canvas) return () => events.unmountComponentAtNode(canvas);
@@ -149,7 +167,7 @@ function CanvasImpl({
   // When the event source is not this div, we need to set pointer-events to none
   // Or else the canvas will block events from reaching the event source
   const pointerEvents = eventSource ? 'none' : 'auto';
-  return /*#__PURE__*/jsxRuntime.jsx("div", {
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
     ref: divRef,
     style: {
       position: 'relative',
@@ -160,7 +178,7 @@ function CanvasImpl({
       ...style
     },
     ...props,
-    children: /*#__PURE__*/jsxRuntime.jsx("div", {
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
       ref: containerRef,
       style: {
         width: '100%',
@@ -173,13 +191,13 @@ function CanvasImpl({
         },
         children: fallback
       })
-    })
+    }), gate]
   });
 }
 
-/**
- * A DOM canvas which accepts threejs elements as children.
- * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
+/**
+ * A DOM 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/dist/react-three-fiber.cjs.prod.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var events = require('./events-583399dd.cjs.prod.js');
+var events = require('./events-a79ef12b.cjs.prod.js');
 var React = require('react');
 var THREE = require('three');
 var useMeasure = require('react-use-measure');
@@ -86,46 +86,55 @@ function CanvasImpl({
   // Throw exception outwards if anything within canvas throws
   if (error) throw error;
   const root = React__namespace.useRef(null);
+
+  // Waits for an async renderer without hiding the canvas
+  const [gate, waitFor] = events.useGate();
+  const rootState = React__namespace.useRef(null);
+  const eventTarget = () => eventSource ? events.isRef(eventSource) ? eventSource.current : eventSource : divRef.current;
   events.useIsomorphicLayoutEffect(() => {
     const canvas = canvasRef.current;
     if (containerRect.width > 0 && containerRect.height > 0 && canvas) {
       if (!root.current) root.current = events.createRoot(canvas);
-      async function run() {
-        await root.current.configure({
-          gl,
-          scene,
-          events: events$1,
-          shadows,
-          linear,
-          flat,
-          legacy,
-          orthographic,
-          frameloop,
-          dpr,
-          performance,
-          raycaster,
-          camera,
-          size: containerRect,
-          // Pass mutable reference to onPointerMissed so it's free to update
-          onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
-          onCreated: state => {
-            // Connect to event source
-            state.events.connect == null ? void 0 : state.events.connect(eventSource ? events.isRef(eventSource) ? eventSource.current : eventSource : divRef.current);
-            // Set up compute function
-            if (eventPrefix) {
-              state.setEvents({
-                compute: (event, state) => {
-                  const x = event[eventPrefix + 'X'];
-                  const y = event[eventPrefix + 'Y'];
-                  state.pointer.set(x / state.size.width * 2 - 1, -(y / state.size.height) * 2 + 1);
-                  state.raycaster.setFromCamera(state.pointer, state.camera);
-                }
-              });
-            }
-            // Call onCreated callback
-            onCreated == null ? void 0 : onCreated(state);
+      root.current.configure({
+        gl,
+        scene,
+        events: events$1,
+        shadows,
+        linear,
+        flat,
+        legacy,
+        orthographic,
+        frameloop,
+        dpr,
+        performance,
+        raycaster,
+        camera,
+        size: containerRect,
+        // Pass mutable reference to onPointerMissed so it's free to update
+        onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
+        onCreated: state => {
+          var _eventTarget;
+          rootState.current = state;
+          // A ref to an ancestor is not attached yet. The effect below settles it
+          state.events.connect == null ? void 0 : state.events.connect((_eventTarget = eventTarget()) != null ? _eventTarget : divRef.current);
+          // Set up compute function
+          if (eventPrefix) {
+            state.setEvents({
+              compute: (event, state) => {
+                const x = event[eventPrefix + 'X'];
+                const y = event[eventPrefix + 'Y'];
+                state.pointer.set(x / state.size.width * 2 - 1, -(y / state.size.height) * 2 + 1);
+                state.raycaster.setFromCamera(state.pointer, state.camera);
+              }
+            });
           }
-        });
+          // Call onCreated callback
+          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,
@@ -137,10 +146,19 @@ function CanvasImpl({
             })
           })
         }));
+      } else if (root.current.ready.status === 'pending') {
+        waitFor(root.current.ready);
       }
-      run();
     }
   });
+
+  // Refs on ancestors attach after our layout effect
+  React__namespace.useEffect(() => {
+    var _rootState$current;
+    const state = (_rootState$current = rootState.current) == null ? void 0 : _rootState$current.get();
+    const target = eventTarget();
+    if (state && target && state.events.connected !== target) state.events.connect == null ? void 0 : state.events.connect(target);
+  });
   React__namespace.useEffect(() => {
     const canvas = canvasRef.current;
     if (canvas) return () => events.unmountComponentAtNode(canvas);
@@ -149,7 +167,7 @@ function CanvasImpl({
   // When the event source is not this div, we need to set pointer-events to none
   // Or else the canvas will block events from reaching the event source
   const pointerEvents = eventSource ? 'none' : 'auto';
-  return /*#__PURE__*/jsxRuntime.jsx("div", {
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
     ref: divRef,
     style: {
       position: 'relative',
@@ -160,7 +178,7 @@ function CanvasImpl({
       ...style
     },
     ...props,
-    children: /*#__PURE__*/jsxRuntime.jsx("div", {
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
       ref: containerRef,
       style: {
         width: '100%',
@@ -173,13 +191,13 @@ function CanvasImpl({
         },
         children: fallback
       })
-    })
+    }), gate]
   });
 }
 
-/**
- * A DOM canvas which accepts threejs elements as children.
- * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
+/**
+ * A DOM 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/dist/react-three-fiber.esm.js

@@ -1,10 +1,10 @@
-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-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, f as events, 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 './events-b389eeca.esm.js';
+import { e as extend, u as useBridge, a as useMutableCallback, b as useGate, c as useIsomorphicLayoutEffect, d as createRoot, E as ErrorBoundary, B as Block, f as unmountComponentAtNode, g as createPointerEvents, i as isRef } from './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, g as events, 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 './events-803f4abc.esm.js';
 import * as React from 'react';
 import * as THREE from 'three';
 import useMeasure from 'react-use-measure';
 import { FiberProvider } from 'its-fine';
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import 'zustand/traditional';
 import 'suspend-react';
 import 'scheduler';
@@ -59,46 +59,55 @@ function CanvasImpl({
   // Throw exception outwards if anything within canvas throws
   if (error) throw error;
   const root = React.useRef(null);
+
+  // Waits for an async renderer without hiding the canvas
+  const [gate, waitFor] = useGate();
+  const rootState = React.useRef(null);
+  const eventTarget = () => eventSource ? isRef(eventSource) ? eventSource.current : eventSource : divRef.current;
   useIsomorphicLayoutEffect(() => {
     const canvas = canvasRef.current;
     if (containerRect.width > 0 && containerRect.height > 0 && canvas) {
       if (!root.current) root.current = createRoot(canvas);
-      async function run() {
-        await root.current.configure({
-          gl,
-          scene,
-          events,
-          shadows,
-          linear,
-          flat,
-          legacy,
-          orthographic,
-          frameloop,
-          dpr,
-          performance,
-          raycaster,
-          camera,
-          size: containerRect,
-          // Pass mutable reference to onPointerMissed so it's free to update
-          onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
-          onCreated: state => {
-            // Connect to event source
-            state.events.connect == null ? void 0 : state.events.connect(eventSource ? isRef(eventSource) ? eventSource.current : eventSource : divRef.current);
-            // Set up compute function
-            if (eventPrefix) {
-              state.setEvents({
-                compute: (event, state) => {
-                  const x = event[eventPrefix + 'X'];
-                  const y = event[eventPrefix + 'Y'];
-                  state.pointer.set(x / state.size.width * 2 - 1, -(y / state.size.height) * 2 + 1);
-                  state.raycaster.setFromCamera(state.pointer, state.camera);
-                }
-              });
-            }
-            // Call onCreated callback
-            onCreated == null ? void 0 : onCreated(state);
+      root.current.configure({
+        gl,
+        scene,
+        events,
+        shadows,
+        linear,
+        flat,
+        legacy,
+        orthographic,
+        frameloop,
+        dpr,
+        performance,
+        raycaster,
+        camera,
+        size: containerRect,
+        // Pass mutable reference to onPointerMissed so it's free to update
+        onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
+        onCreated: state => {
+          var _eventTarget;
+          rootState.current = state;
+          // A ref to an ancestor is not attached yet. The effect below settles it
+          state.events.connect == null ? void 0 : state.events.connect((_eventTarget = eventTarget()) != null ? _eventTarget : divRef.current);
+          // Set up compute function
+          if (eventPrefix) {
+            state.setEvents({
+              compute: (event, state) => {
+                const x = event[eventPrefix + 'X'];
+                const y = event[eventPrefix + 'Y'];
+                state.pointer.set(x / state.size.width * 2 - 1, -(y / state.size.height) * 2 + 1);
+                state.raycaster.setFromCamera(state.pointer, state.camera);
+              }
+            });
           }
-        });
+          // Call onCreated callback
+          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,
@@ -110,10 +119,19 @@ function CanvasImpl({
             })
           })
         }));
+      } else if (root.current.ready.status === 'pending') {
+        waitFor(root.current.ready);
       }
-      run();
     }
   });
+
+  // Refs on ancestors attach after our layout effect
+  React.useEffect(() => {
+    var _rootState$current;
+    const state = (_rootState$current = rootState.current) == null ? void 0 : _rootState$current.get();
+    const target = eventTarget();
+    if (state && target && state.events.connected !== target) state.events.connect == null ? void 0 : state.events.connect(target);
+  });
   React.useEffect(() => {
     const canvas = canvasRef.current;
     if (canvas) return () => unmountComponentAtNode(canvas);
@@ -122,7 +140,7 @@ function CanvasImpl({
   // When the event source is not this div, we need to set pointer-events to none
   // Or else the canvas will block events from reaching the event source
   const pointerEvents = eventSource ? 'none' : 'auto';
-  return /*#__PURE__*/jsx("div", {
+  return /*#__PURE__*/jsxs("div", {
     ref: divRef,
     style: {
       position: 'relative',
@@ -133,7 +151,7 @@ function CanvasImpl({
       ...style
     },
     ...props,
-    children: /*#__PURE__*/jsx("div", {
+    children: [/*#__PURE__*/jsx("div", {
       ref: containerRef,
       style: {
         width: '100%',
@@ -146,13 +164,13 @@ function CanvasImpl({
         },
         children: fallback
       })
-    })
+    }), gate]
   });
 }
 
-/**
- * A DOM canvas which accepts threejs elements as children.
- * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
+/**
+ * A DOM 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/dist/react-three-fiber-native.cjs.dev.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var events = require('../../dist/events-f19bcc32.cjs.dev.js');
+var events = require('../../dist/events-ce5e34e8.cjs.dev.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, {