@react-three/fiber 8.2.0 → 9.0.0-alpha.0

package/dist/{index-6279214a.esm.js → index-e27d4a05.esm.js}

@@ -10,12 +10,19 @@ var threeTypes = /*#__PURE__*/Object.freeze({
   __proto__: null
 });
 
-const isOrthographicCamera = def => def && def.isOrthographicCamera; // React currently throws a warning when using useLayoutEffect on the server.
-// To get around it, we can conditionally useEffect on the server (no-op) and
-// useLayoutEffect on the client.
+var _window$document, _window$navigator;
+const isOrthographicCamera = def => def && def.isOrthographicCamera;
+/**
+ * An SSR-friendly useLayoutEffect.
+ *
+ * React currently throws a warning when using useLayoutEffect on the server.
+ * To get around it, we can conditionally useEffect on the server (no-op) and
+ * useLayoutEffect elsewhere.
+ *
+ * @see https://github.com/facebook/react/issues/14927
+ */
 
-const isSSR = typeof window === 'undefined' || !window.navigator || /ServerSideRendering|^Deno\//.test(window.navigator.userAgent);
-const useIsomorphicLayoutEffect = isSSR ? React.useEffect : React.useLayoutEffect;
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' && ((_window$document = window.document) != null && _window$document.createElement || ((_window$navigator = window.navigator) == null ? void 0 : _window$navigator.product) === 'ReactNative') ? React.useLayoutEffect : React.useEffect;
 function useMutableCallback(fn) {
   const ref = React.useRef(fn);
   useIsomorphicLayoutEffect(() => void (ref.current = fn), [fn]);
@@ -331,12 +338,7 @@ function applyProps$1(instance, data) {
 
         if (!isColor && targetProp.setScalar) targetProp.setScalar(value); // Layers have no copy function, we must therefore copy the mask property
         else if (targetProp instanceof THREE.Layers && value instanceof THREE.Layers) targetProp.mask = value.mask; // Otherwise just set ...
-        else targetProp.set(value); // For versions of three which don't support THREE.ColorManagement,
-        // Auto-convert sRGB colors
-        // https://github.com/pmndrs/react-three-fiber/issues/344
-
-        const supportsColorManagement = ('ColorManagement' in THREE);
-        if (!supportsColorManagement && !rootState.linear && isColor) targetProp.convertSRGBToLinear();
+        else targetProp.set(value);
       } // Else, just overwrite the value
 
     } else {
@@ -391,15 +393,6 @@ function updateCamera(camera, size) {
     camera.updateMatrixWorld();
   }
 }
-/**
- * Safely sets a deeply-nested value on an object.
- */
-
-function setDeep(obj, value, keys) {
-  const key = keys.pop();
-  const target = keys.reduce((acc, key) => acc[key], obj);
-  return target[key] = value;
-}
 
 function makeId(event) {
   return (event.eventObject || event.object).uuid + '/' + event.index + event.instanceId;
@@ -1036,7 +1029,10 @@ function createRenderer(_roots, _getEventPriority) {
         }
       }
     });
-  }
+  } // Don't handle text instances, warn on undefined behavior
+
+
+  const handleTextInstance = () => console.warn('Text is not allowed in the R3F tree! This could be stray whitespace or characters.');
 
   const reconciler = Reconciler({
     createInstance,
@@ -1050,13 +1046,20 @@ function createRenderer(_roots, _getEventPriority) {
     supportsHydration: false,
     noTimeout: -1,
     appendChildToContainer: (container, child) => {
+      if (!child) return;
       const scene = container.getState().scene; // Link current root to the default scene
 
       scene.__r3f.root = container;
       appendChild(scene, child);
     },
-    removeChildFromContainer: (container, child) => removeChild(container.getState().scene, child),
-    insertInContainerBefore: (container, child, beforeChild) => insertBefore(container.getState().scene, child, beforeChild),
+    removeChildFromContainer: (container, child) => {
+      if (!child) return;
+      removeChild(container.getState().scene, child);
+    },
+    insertInContainerBefore: (container, child, beforeChild) => {
+      if (!child || !beforeChild) return;
+      insertBefore(container.getState().scene, child, beforeChild);
+    },
     getRootHostContext: () => null,
     getChildHostContext: parentHostContext => parentHostContext,
 
@@ -1148,13 +1151,9 @@ function createRenderer(_roots, _getEventPriority) {
       invalidateInstance(instance);
     },
 
-    createTextInstance: () => {
-      throw new Error('Text is not allowed in the R3F tree.');
-    },
-    hideTextInstance: () => {
-      throw new Error('Text is not allowed in the R3F tree.');
-    },
-    unhideTextInstance: () => {},
+    createTextInstance: handleTextInstance,
+    hideTextInstance: handleTextInstance,
+    unhideTextInstance: handleTextInstance,
     // https://github.com/pmndrs/react-three-fiber/pull/2360#discussion_r916356874
     // @ts-ignore
     getCurrentEventPriority: () => _getEventPriority ? _getEventPriority() : DefaultEventPriority,
@@ -1172,6 +1171,7 @@ function createRenderer(_roots, _getEventPriority) {
   };
 }
 
+// Keys that shouldn't be copied between R3F stores
 const privateKeys = ['set', 'get', 'setSize', 'setFrameloop', 'setDpr', 'events', 'invalidate', 'advance', 'size', 'viewport'];
 const isRenderer = def => !!(def != null && def.render);
 const context = /*#__PURE__*/React.createContext(null);
@@ -1319,8 +1319,14 @@ const createStore = (invalidate, advance) => {
           }
         };
       }),
-      setFrameloop: (frameloop = 'always') => {
-        const clock = get().clock; // if frameloop === "never" clock.elapsedTime is updated using advance(timestamp)
+      setFrameloop: frameloop => {
+        var _frameloop$mode, _frameloop$render, _frameloop$maxDelta;
+
+        const state = get();
+        const mode = typeof frameloop === 'string' ? frameloop : (frameloop == null ? void 0 : frameloop.mode) === 'auto' ? 'always' : (_frameloop$mode = frameloop == null ? void 0 : frameloop.mode) != null ? _frameloop$mode : state.frameloop;
+        const render = typeof frameloop === 'string' ? state.internal.render : (_frameloop$render = frameloop == null ? void 0 : frameloop.render) != null ? _frameloop$render : state.internal.render;
+        const maxDelta = typeof frameloop === 'string' ? state.internal.maxDelta : (_frameloop$maxDelta = frameloop == null ? void 0 : frameloop.maxDelta) != null ? _frameloop$maxDelta : state.internal.maxDelta;
+        const clock = state.clock; // if frameloop === "never" clock.elapsedTime is updated using advance(timestamp)
 
         clock.stop();
         clock.elapsedTime = 0;
@@ -1331,28 +1337,44 @@ const createStore = (invalidate, advance) => {
         }
 
         set(() => ({
-          frameloop
+          frameloop: mode,
+          internal: { ...state.internal,
+            render,
+            maxDelta
+          }
         }));
       },
       previousRoot: undefined,
       internal: {
-        active: false,
-        priority: 0,
-        frames: 0,
-        lastEvent: /*#__PURE__*/React.createRef(),
+        // Events
         interaction: [],
         hovered: new Map(),
         subscribers: [],
         initialClick: [0, 0],
         initialHits: [],
         capturedMap: new Map(),
+        lastEvent: /*#__PURE__*/React.createRef(),
+        // Updates
+        active: false,
+        frames: 0,
+        stages: [],
+        render: 'auto',
+        maxDelta: 1 / 10,
+        priority: 0,
         subscribe: (ref, priority, store) => {
-          const internal = get().internal; // If this subscription was given a priority, it takes rendering into its own hands
+          const state = get();
+          const internal = state.internal; // If this subscription was given a priority, it takes rendering into its own hands
           // For that reason we switch off automatic rendering and increase the manual flag
           // As long as this flag is positive there can be no internal rendering at all
           // because there could be multiple render subscriptions
 
-          internal.priority = internal.priority + (priority > 0 ? 1 : 0);
+          internal.priority = internal.priority + (priority > 0 ? 1 : 0); // We use the render flag and deprecate priority
+
+          if (internal.priority && state.internal.render === 'auto') set(() => ({
+            internal: { ...state.internal,
+              render: 'manual'
+            }
+          }));
           internal.subscribers.push({
             ref,
             priority,
@@ -1362,11 +1384,18 @@ const createStore = (invalidate, advance) => {
 
           internal.subscribers = internal.subscribers.sort((a, b) => a.priority - b.priority);
           return () => {
-            const internal = get().internal;
+            const state = get();
+            const internal = state.internal;
 
             if (internal != null && internal.subscribers) {
               // Decrease manual flag if this subscription had a priority
-              internal.priority = internal.priority - (priority > 0 ? 1 : 0); // Remove subscriber from list
+              internal.priority = internal.priority - (priority > 0 ? 1 : 0); // We use the render flag and deprecate priority
+
+              if (!internal.priority && state.internal.render === 'manual') set(() => ({
+                internal: { ...state.internal,
+                  render: 'auto'
+                }
+              })); // Remove subscriber from list
 
               internal.subscribers = internal.subscribers.filter(s => s.ref !== ref);
             }
@@ -1422,8 +1451,6 @@ function createSubs(callback, subs) {
   subs.add(sub);
   return () => void subs.delete(sub);
 }
-
-let i;
 let globalEffects = new Set();
 let globalAfterEffects = new Set();
 let globalTailEffects = new Set();
@@ -1452,10 +1479,7 @@ function run(effects, timestamp) {
   }) => callback(timestamp));
 }
 
-let subscribers;
-let subscription;
-
-function render$1(timestamp, state, frame) {
+function update(timestamp, state, frame) {
   // Run local effects
   let delta = state.clock.getDelta(); // In frameloop='never' mode, clock times are updated using the provided timestamp
 
@@ -1463,18 +1487,14 @@ function render$1(timestamp, state, frame) {
     delta = timestamp - state.clock.elapsedTime;
     state.clock.oldTime = state.clock.elapsedTime;
     state.clock.elapsedTime = timestamp;
-  } // Call subscribers (useFrame)
-
-
-  subscribers = state.internal.subscribers;
+  } else {
+    delta = Math.max(Math.min(delta, state.internal.maxDelta), 0);
+  } // Call subscribers (useUpdate)
 
-  for (i = 0; i < subscribers.length; i++) {
-    subscription = subscribers[i];
-    subscription.ref.current(subscription.store.getState(), delta, frame);
-  } // Render content
 
-
-  if (!state.internal.priority && state.gl.render) state.gl.render(state.scene, state.camera); // Decrease frame count
+  for (const stage of state.internal.stages) {
+    stage.frame(delta, frame);
+  }
 
   state.internal.frames = Math.max(0, state.internal.frames - 1);
   return state.frameloop === 'always' ? 1 : state.internal.frames;
@@ -1499,7 +1519,7 @@ function createLoop(roots) {
       state = root.store.getState(); // If the frameloop is invalidated, do not run another frame
 
       if (state.internal.active && (state.frameloop === 'always' || state.internal.frames > 0) && !((_state$gl$xr = state.gl.xr) != null && _state$gl$xr.isPresenting)) {
-        repeat += render$1(timestamp, state);
+        repeat += update(timestamp, state);
       }
     }); // Run after-effects
 
@@ -1530,7 +1550,7 @@ function createLoop(roots) {
 
   function advance(timestamp, runGlobalEffects = true, state, frame) {
     if (runGlobalEffects) run(globalEffects, timestamp);
-    if (!state) roots.forEach(root => render$1(timestamp, root.store.getState()));else render$1(timestamp, state, frame);
+    if (!state) roots.forEach(root => update(timestamp, root.store.getState()));else update(timestamp, state, frame);
     if (runGlobalEffects) run(globalAfterEffects, timestamp);
   }
 
@@ -1551,6 +1571,154 @@ function createLoop(roots) {
   };
 }
 
+/**
+ * Class representing a stage that updates every frame.
+ * Stages are used to build a lifecycle of effects for an app's frameloop.
+ */
+class Stage {
+  constructor() {
+    this.subscribers = [];
+    this._frameTime = 0;
+  }
+  /**
+   * Executes all callback subscriptions on the stage.
+   * @param delta - Delta time between frame calls.
+   * @param [frame] - The XR frame if it exists.
+   */
+
+
+  frame(delta, frame) {
+    const subs = this.subscribers;
+    const initialTime = performance.now();
+
+    for (let i = 0; i < subs.length; i++) {
+      subs[i].ref.current(subs[i].store.getState(), delta, frame);
+    }
+
+    this._frameTime = performance.now() - initialTime;
+  }
+  /**
+   * Adds a callback subscriber to the stage.
+   * @param ref - The mutable callback reference.
+   * @param store - The store to be used with the callback execution.
+   * @returns A function to remove the subscription.
+   */
+
+
+  add(ref, store) {
+    this.subscribers.push({
+      ref,
+      store
+    });
+    return () => {
+      this.subscribers = this.subscribers.filter(sub => {
+        return sub.ref !== ref;
+      });
+    };
+  }
+
+  get frameTime() {
+    return this._frameTime;
+  }
+
+} // Using Unity's fixedStep default.
+
+const FPS_50 = 1 / 50;
+/**
+ * Class representing a stage that updates every frame at a fixed rate.
+ * @param name - Name of the stage.
+ * @param [fixedStep] - Fixed step rate.
+ * @param [maxSubsteps] - Maximum number of substeps.
+ */
+
+class FixedStage extends Stage {
+  constructor(fixedStep, maxSubSteps) {
+    super();
+    this._fixedStep = fixedStep != null ? fixedStep : FPS_50;
+    this._maxSubsteps = maxSubSteps != null ? maxSubSteps : 6;
+    this._accumulator = 0;
+    this._alpha = 0;
+    this._fixedFrameTime = 0;
+    this._substepTimes = [];
+  }
+  /**
+   * Executes all callback subscriptions on the stage.
+   * @param delta - Delta time between frame calls.
+   * @param [frame] - The XR frame if it exists.
+   */
+
+
+  frame(delta, frame) {
+    const initialTime = performance.now();
+    let substeps = 0;
+    this._substepTimes = [];
+    this._accumulator += delta;
+
+    while (this._accumulator >= this._fixedStep && substeps < this._maxSubsteps) {
+      this._accumulator -= this._fixedStep;
+      substeps++;
+      super.frame(this._fixedStep, frame);
+
+      this._substepTimes.push(super.frameTime);
+    }
+
+    this._fixedFrameTime = performance.now() - initialTime; // The accumulator will only be larger than the fixed step if we had to
+    // bail early due to hitting the max substep limit or execution time lagging.
+    // In that case, we want to shave off the excess so we don't fall behind next frame.
+
+    this._accumulator = this._accumulator % this._fixedStep;
+    this._alpha = this._accumulator / this._fixedStep;
+  }
+
+  get frameTime() {
+    return this._fixedFrameTime;
+  }
+
+  get substepTimes() {
+    return this._substepTimes;
+  }
+
+  get fixedStep() {
+    return this._fixedStep;
+  }
+
+  set fixedStep(fixedStep) {
+    this._fixedStep = fixedStep;
+  }
+
+  get maxSubsteps() {
+    return this._maxSubsteps;
+  }
+
+  set maxSubsteps(maxSubsteps) {
+    this._maxSubsteps = maxSubsteps;
+  }
+
+  get accumulator() {
+    return this._accumulator;
+  }
+
+  get alpha() {
+    return this._alpha;
+  }
+
+}
+const Early = new Stage();
+const Fixed = new FixedStage();
+const Update = new Stage();
+const Late = new Stage();
+const Render = new Stage();
+const After = new Stage();
+const Stages = {
+  Early,
+  Fixed,
+  Update,
+  Late,
+  Render,
+  After
+};
+const Lifecycle = [Early, Fixed, Update, Late, Render, After];
+
 function useStore() {
   const store = React.useContext(context);
   if (!store) throw `R3F hooks can only be used within the Canvas component!`;
@@ -1579,6 +1747,21 @@ function useFrame(callback, renderPriority = 0) {
   useIsomorphicLayoutEffect(() => subscribe(ref, renderPriority, store), [renderPriority, subscribe, store]);
   return null;
 }
+/**
+ * Executes a callback in a given update stage.
+ * Uses the stage instance to indetify which stage to target in the lifecycle.
+ */
+
+function useUpdate(callback, stage = Stages.Update) {
+  const store = useStore();
+  const stages = store.getState().internal.stages; // Memoize ref
+
+  const ref = useMutableCallback(callback); // Throw an error if a stage does not exist in the lifecycle
+
+  if (!stages.includes(stage)) throw new Error(`An invoked stage does not exist in the lifecycle.`); // Subscribe on mount, unsubscribe on unmount
+
+  useIsomorphicLayoutEffect(() => stage.add(ref, store), [stage]);
+}
 /**
  * Returns a node graph of an object with named nodes & materials.
  * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usegraph
@@ -1660,6 +1843,43 @@ const createRendererInstance = (gl, canvas) => {
   });
 };
 
+const createStages = (stages, store) => {
+  var _stages;
+
+  const state = store.getState();
+  let subscribers;
+  let subscription;
+  stages = (_stages = stages) != null ? _stages : Lifecycle;
+  if (!stages.includes(Stages.Update)) throw 'The Stages.Update stage is required for R3F.';
+  if (!stages.includes(Stages.Render)) throw 'The Stages.Render stage is required for R3F.';
+  state.set(({
+    internal
+  }) => ({
+    internal: { ...internal,
+      stages: stages
+    }
+  })); // Add useFrame loop to update stage
+
+  const frameCallback = {
+    current: (state, delta, frame) => {
+      subscribers = state.internal.subscribers;
+
+      for (let i = 0; i < subscribers.length; i++) {
+        subscription = subscribers[i];
+        subscription.ref.current(subscription.store.getState(), delta, frame);
+      }
+    }
+  };
+  Stages.Update.add(frameCallback, store); // Add render callback to render stage
+
+  const renderCallback = {
+    current: state => {
+      if (state.internal.render === 'auto' && state.gl.render) state.gl.render(state.scene, state.camera);
+    }
+  };
+  Stages.Render.add(renderCallback, store);
+};
+
 function createRoot(canvas) {
   // Check against mistaken use of createRoot
   let prevRoot = roots.get(canvas);
@@ -1701,7 +1921,8 @@ function createRoot(canvas) {
         performance,
         raycaster: raycastOptions,
         camera: cameraOptions,
-        onPointerMissed
+        onPointerMissed,
+        stages
       } = props;
       let state = store.getState(); // Set up renderer (one time only!)
 
@@ -1792,14 +2013,8 @@ function createRoot(canvas) {
           if (!isBoolean) Object.assign(gl.shadowMap, shadows);else gl.shadowMap.type = THREE.PCFSoftShadowMap;
           if (old !== gl.shadowMap.enabled) gl.shadowMap.needsUpdate = true;
         }
-      } // Safely set color management if available.
-      // Avoid accessing THREE.ColorManagement to play nice with older versions
-
-
-      if ('ColorManagement' in THREE) {
-        setDeep(THREE, legacy, ['ColorManagement', 'legacyMode']);
-      }
-
+      } // Set color management
+      THREE.ColorManagement.legacyMode = legacy;
       const outputEncoding = linear ? THREE.LinearEncoding : THREE.sRGBEncoding;
       const toneMapping = flat ? THREE.NoToneMapping : THREE.ACESFilmicToneMapping;
       if (gl.outputEncoding !== outputEncoding) gl.outputEncoding = outputEncoding;
@@ -1850,7 +2065,9 @@ function createRoot(canvas) {
         performance: { ...state.performance,
           ...performance
         }
-      })); // Set locals
+      })); // Create update stages.
+
+      if (stages !== state.internal.stages) createStages(stages, store); // Set locals
 
       onCreated = onCreatedCallback;
       configured = true;
@@ -2062,4 +2279,4 @@ reconciler.injectIntoDevTools({
 });
 const act = React.unstable_act;
 
-export { Block as B, ErrorBoundary as E, createRoot as a, useIsomorphicLayoutEffect as b, createEvents as c, unmountComponentAtNode as d, extend as e, context as f, createPortal as g, reconciler as h, applyProps as i, dispose as j, invalidate as k, advance as l, addEffect as m, addAfterEffect as n, addTail as o, getRootState as p, act as q, render as r, roots as s, threeTypes as t, useMutableCallback as u, useStore as v, useThree as w, useFrame as x, useGraph as y, useLoader as z };
+export { useGraph as A, Block as B, useLoader as C, ErrorBoundary as E, FixedStage as F, Stage as S, createRoot as a, useIsomorphicLayoutEffect as b, createEvents as c, unmountComponentAtNode as d, extend as e, Stages as f, context as g, createPortal as h, reconciler as i, applyProps as j, dispose as k, invalidate as l, advance as m, addEffect as n, addAfterEffect as o, addTail as p, getRootState as q, render as r, act as s, threeTypes as t, useMutableCallback as u, roots as v, useStore as w, useThree as x, useFrame as y, useUpdate as z };

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-0499a96a.cjs.dev.js');
+var index = require('./index-b3be5a63.cjs.dev.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
@@ -138,6 +138,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   camera,
   onPointerMissed,
   onCreated,
+  stages,
   ...props
 }, forwardedRef) {
   // Create a known catalogue of Threejs-native elements
@@ -180,6 +181,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
       performance,
       raycaster,
       camera,
+      stages,
       size: containerRect,
       // Pass mutable reference to onPointerMissed so it's free to update
       onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
@@ -226,7 +228,10 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   }, fallback)));
 });
 
+exports.FixedStage = index.FixedStage;
 exports.ReactThreeFiber = index.threeTypes;
+exports.Stage = index.Stage;
+exports.Stages = index.Stages;
 exports._roots = index.roots;
 exports.act = index.act;
 exports.addAfterEffect = index.addAfterEffect;
@@ -250,5 +255,6 @@ exports.useGraph = index.useGraph;
 exports.useLoader = index.useLoader;
 exports.useStore = index.useStore;
 exports.useThree = index.useThree;
+exports.useUpdate = index.useUpdate;
 exports.Canvas = Canvas;
 exports.events = createPointerEvents;

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-ca47b633.cjs.prod.js');
+var index = require('./index-b12f488b.cjs.prod.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
@@ -138,6 +138,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   camera,
   onPointerMissed,
   onCreated,
+  stages,
   ...props
 }, forwardedRef) {
   // Create a known catalogue of Threejs-native elements
@@ -180,6 +181,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
       performance,
       raycaster,
       camera,
+      stages,
       size: containerRect,
       // Pass mutable reference to onPointerMissed so it's free to update
       onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
@@ -226,7 +228,10 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   }, fallback)));
 });
 
+exports.FixedStage = index.FixedStage;
 exports.ReactThreeFiber = index.threeTypes;
+exports.Stage = index.Stage;
+exports.Stages = index.Stages;
 exports._roots = index.roots;
 exports.act = index.act;
 exports.addAfterEffect = index.addAfterEffect;
@@ -250,5 +255,6 @@ exports.useGraph = index.useGraph;
 exports.useLoader = index.useLoader;
 exports.useStore = index.useStore;
 exports.useThree = index.useThree;
+exports.useUpdate = index.useUpdate;
 exports.Canvas = Canvas;
 exports.events = createPointerEvents;

package/dist/react-three-fiber.esm.js

@@ -1,5 +1,5 @@
-import { c as createEvents, e as extend, u as useMutableCallback, a as createRoot, E as ErrorBoundary, B as Block, b as useIsomorphicLayoutEffect, d as unmountComponentAtNode } from './index-6279214a.esm.js';
-export { t as ReactThreeFiber, s as _roots, q as act, n as addAfterEffect, m as addEffect, o as addTail, l as advance, i as applyProps, f as context, c as createEvents, g as createPortal, a as createRoot, j as dispose, e as extend, p as getRootState, k as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, x as useFrame, y as useGraph, z as useLoader, v as useStore, w as useThree } from './index-6279214a.esm.js';
+import { c as createEvents, e as extend, u as useMutableCallback, a as createRoot, E as ErrorBoundary, B as Block, b as useIsomorphicLayoutEffect, d as unmountComponentAtNode } from './index-e27d4a05.esm.js';
+export { F as FixedStage, t as ReactThreeFiber, S as Stage, f as Stages, v as _roots, s as act, o as addAfterEffect, n as addEffect, p as addTail, m as advance, j as applyProps, g as context, c as createEvents, h as createPortal, a as createRoot, k as dispose, e as extend, q as getRootState, l as invalidate, i as reconciler, r as render, d as unmountComponentAtNode, y as useFrame, A as useGraph, C as useLoader, w as useStore, x as useThree, z as useUpdate } from './index-e27d4a05.esm.js';
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import * as THREE from 'three';
@@ -111,6 +111,7 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
   camera,
   onPointerMissed,
   onCreated,
+  stages,
   ...props
 }, forwardedRef) {
   // Create a known catalogue of Threejs-native elements
@@ -153,6 +154,7 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
       performance,
       raycaster,
       camera,
+      stages,
       size: containerRect,
       // Pass mutable reference to onPointerMissed so it's free to update
       onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('../../dist/index-0499a96a.cjs.dev.js');
+var index = require('../../dist/index-b3be5a63.cjs.dev.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
@@ -250,6 +250,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
   camera,
   onPointerMissed,
   onCreated,
+  stages,
   ...props
 }, forwardedRef) => {
   // Create a known catalogue of Threejs-native elements
@@ -324,6 +325,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
       performance,
       raycaster,
       camera,
+      stages,
       // expo-gl can only render at native dpr/resolution
       // https://github.com/expo/expo-three/issues/39
       dpr: reactNative.PixelRatio.get(),
@@ -402,5 +404,6 @@ exports.useGraph = index.useGraph;
 exports.useLoader = index.useLoader;
 exports.useStore = index.useStore;
 exports.useThree = index.useThree;
+exports.useUpdate = index.useUpdate;
 exports.Canvas = Canvas;
 exports.events = createTouchEvents;