@react-three/fiber 9.0.0-rc.3 → 9.0.0-rc.5

package/dist/{events-c2452172.cjs.dev.js → events-b4061ace.cjs.dev.js}

@@ -38,29 +38,29 @@ var threeTypes = /*#__PURE__*/Object.freeze({
   __proto__: null
 });
 
-/**
- * Returns the instance's initial (outmost) root.
+/**
+ * Returns the instance's initial (outmost) root.
  */
 function findInitialRoot(instance) {
   let root = instance.root;
   while (root.getState().previousRoot) root = root.getState().previousRoot;
   return root;
 }
-/**
- * Safely flush async effects when testing, simulating a legacy root.
+/**
+ * Safely flush async effects when testing, simulating a legacy root.
  */
 const act = React__namespace.act;
 const isOrthographicCamera = def => def && def.isOrthographicCamera;
 const isRef = obj => obj && obj.hasOwnProperty('current');
 
-/**
- * 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
+/**
+ * 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 useIsomorphicLayoutEffect = /* @__PURE__ */((_window$document, _window$navigator) => typeof window !== 'undefined' && (((_window$document = window.document) == null ? void 0 : _window$document.createElement) || ((_window$navigator = window.navigator) == null ? void 0 : _window$navigator.product) === 'ReactNative'))() ? React__namespace.useLayoutEffect : React__namespace.useEffect;
 function useMutableCallback(fn) {
@@ -68,8 +68,8 @@ function useMutableCallback(fn) {
   useIsomorphicLayoutEffect(() => void (ref.current = fn), [fn]);
   return ref;
 }
-/**
- * Bridges renderer Context and StrictMode from a primary renderer.
+/**
+ * Bridges renderer Context and StrictMode from a primary renderer.
  */
 function useBridge() {
   const fiber = itsFine.useFiber();
@@ -121,8 +121,8 @@ function calculateDpr(dpr) {
   return Array.isArray(dpr) ? Math.min(Math.max(dpr[0], target), dpr[1]) : dpr;
 }
 
-/**
- * Returns instance root state
+/**
+ * Returns instance root state
  */
 function getRootState(obj) {
   var _r3f;
@@ -136,6 +136,7 @@ const is = {
   num: a => typeof a === 'number',
   boo: a => typeof a === 'boolean',
   und: a => a === void 0,
+  nul: a => a === null,
   arr: a => Array.isArray(a),
   equ(a, b, {
     arrays = 'shallow',
@@ -304,6 +305,18 @@ const RESERVED_PROPS = [...REACT_INTERNAL_PROPS,
 // Behavior flags
 'dispose'];
 const MEMOIZED_PROTOTYPES = new Map();
+function getMemoizedPrototype(root) {
+  let ctor = MEMOIZED_PROTOTYPES.get(root.constructor);
+  try {
+    if (!ctor) {
+      ctor = new root.constructor();
+      MEMOIZED_PROTOTYPES.set(root.constructor, ctor);
+    }
+  } catch (e) {
+    // ...
+  }
+  return ctor;
+}
 
 // This function prepares a set of changes to be applied to the instance
 function diffProps(instance, newProps) {
@@ -340,12 +353,8 @@ function diffProps(instance, newProps) {
     // For removed props, try to set default values, if possible
     if (root.constructor && root.constructor.length === 0) {
       // create a blank slate of the instance and copy the particular parameter.
-      let ctor = MEMOIZED_PROTOTYPES.get(root.constructor);
-      if (!ctor) {
-        ctor = new root.constructor();
-        MEMOIZED_PROTOTYPES.set(root.constructor, ctor);
-      }
-      changedProps[key] = ctor[key];
+      const ctor = getMemoizedPrototype(root);
+      if (!is.und(ctor)) changedProps[key] = ctor[key];
     } else {
       // instance does not have constructor, just set it to 0
       changedProps[key] = 0;
@@ -387,7 +396,13 @@ function applyProps(object, props) {
 
     // Copy if properties match signatures
     if (target != null && target.copy && value != null && value.constructor && target.constructor === value.constructor) {
-      target.copy(value);
+      // fetch the default state of the target
+      const ctor = getMemoizedPrototype(root);
+      // The target key was originally null or undefined, which indicates that the object which
+      // is now present was externally set by the user, we should therefore assign the value directly
+      if (!is.und(ctor) && (is.und(ctor[key]) || is.nul(ctor[key]))) root[key] = value;
+      // Otherwise copy is correct
+      else target.copy(value);
     }
     // Layers have no copy function, we must therefore copy the mask property
     else if (target instanceof THREE__namespace.Layers && value instanceof THREE__namespace.Layers) {
@@ -470,9 +485,9 @@ function makeId(event) {
   return (event.eventObject || event.object).uuid + '/' + event.index + event.instanceId;
 }
 
-/**
- * Release pointer captures.
- * This is called by releasePointerCapture in the API, and when an object is removed.
+/**
+ * Release pointer captures.
+ * This is called by releasePointerCapture in the API, and when an object is removed.
  */
 function releaseInternalPointerCapture(capturedMap, obj, captures, pointerId) {
   const captureData = captures.get(obj);
@@ -807,19 +822,19 @@ function createEvents(store) {
         if (!(instance != null && instance.eventCount)) return;
         const handlers = instance.handlers;
 
-        /*
-        MAYBE TODO, DELETE IF NOT: 
-          Check if the object is captured, captured events should not have intersects running in parallel
-          But wouldn't it be better to just replace capturedMap with a single entry?
-          Also, are we OK with straight up making picking up multiple objects impossible?
-          
-        const pointerId = (data as ThreeEvent<PointerEvent>).pointerId        
-        if (pointerId !== undefined) {
-          const capturedMeshSet = internal.capturedMap.get(pointerId)
-          if (capturedMeshSet) {
-            const captured = capturedMeshSet.get(eventObject)
-            if (captured && captured.localState.stopped) return
-          }
+        /*
+        MAYBE TODO, DELETE IF NOT: 
+          Check if the object is captured, captured events should not have intersects running in parallel
+          But wouldn't it be better to just replace capturedMap with a single entry?
+          Also, are we OK with straight up making picking up multiple objects impossible?
+          
+        const pointerId = (data as ThreeEvent<PointerEvent>).pointerId        
+        if (pointerId !== undefined) {
+          const capturedMeshSet = internal.capturedMap.get(pointerId)
+          if (capturedMeshSet) {
+            const captured = capturedMeshSet.get(eventObject)
+            if (captured && captured.localState.stopped) return
+          }
         }*/
 
         if (isPointerMove) {
@@ -1085,7 +1100,7 @@ const createStore = (invalidate, advance) => {
       oldDpr = viewport.dpr;
       // Update camera & renderer
       updateCamera(camera, size);
-      gl.setPixelRatio(viewport.dpr);
+      if (viewport.dpr > 0) gl.setPixelRatio(viewport.dpr);
       const updateStyle = typeof HTMLCanvasElement !== 'undefined' && gl.domElement instanceof HTMLCanvasElement;
       gl.setSize(size.width, size.height, updateStyle);
     }
@@ -1110,11 +1125,11 @@ const createStore = (invalidate, advance) => {
   return rootStore;
 };
 
-/**
- * Exposes an object's {@link Instance}.
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#useInstanceHandle
- *
- * **Note**: this is an escape hatch to react-internal fields. Expect this to change significantly between versions.
+/**
+ * Exposes an object's {@link Instance}.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#useInstanceHandle
+ *
+ * **Note**: this is an escape hatch to react-internal fields. Expect this to change significantly between versions.
  */
 function useInstanceHandle(ref) {
   const instance = React__namespace.useRef(null);
@@ -1122,9 +1137,9 @@ function useInstanceHandle(ref) {
   return instance;
 }
 
-/**
- * Returns the R3F Canvas' Zustand store. Useful for [transient updates](https://github.com/pmndrs/zustand#transient-updates-for-often-occurring-state-changes).
- * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usestore
+/**
+ * Returns the R3F Canvas' Zustand store. Useful for [transient updates](https://github.com/pmndrs/zustand#transient-updates-for-often-occurring-state-changes).
+ * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usestore
  */
 function useStore() {
   const store = React__namespace.useContext(context);
@@ -1132,18 +1147,18 @@ function useStore() {
   return store;
 }
 
-/**
- * Accesses R3F's internal state, containing renderer, canvas, scene, etc.
- * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usethree
+/**
+ * Accesses R3F's internal state, containing renderer, canvas, scene, etc.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usethree
  */
 function useThree(selector = state => state, equalityFn) {
   return useStore()(selector, equalityFn);
 }
 
-/**
- * Executes a callback before render in a shared frame loop.
- * Can order effects with render priority or manually render with a positive priority.
- * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#useframe
+/**
+ * Executes a callback before render in a shared frame loop.
+ * Can order effects with render priority or manually render with a positive priority.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#useframe
  */
 function useFrame(callback, renderPriority = 0) {
   const store = useStore();
@@ -1155,9 +1170,9 @@ function useFrame(callback, renderPriority = 0) {
   return null;
 }
 
-/**
- * Returns a node graph of an object with named nodes & materials.
- * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usegraph
+/**
+ * Returns a node graph of an object with named nodes & materials.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usegraph
  */
 function useGraph(object) {
   return React__namespace.useMemo(() => buildGraph(object), [object]);
@@ -1193,11 +1208,11 @@ function loadingFn(extensions, onProgress) {
   };
 }
 
-/**
- * Synchronously loads and caches assets with a three loader.
- *
- * Note: this hook's caller must be wrapped with `React.Suspense`
- * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#useloader
+/**
+ * Synchronously loads and caches assets with a three loader.
+ *
+ * Note: this hook's caller must be wrapped with `React.Suspense`
+ * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#useloader
  */
 function useLoader(loader, input, extensions, onProgress) {
   // Use suspense to load async assets
@@ -1209,16 +1224,16 @@ function useLoader(loader, input, extensions, onProgress) {
   return Array.isArray(input) ? results : results[0];
 }
 
-/**
- * Preloads an asset into cache as a side-effect.
+/**
+ * Preloads an asset into cache as a side-effect.
  */
 useLoader.preload = function (loader, input, extensions) {
   const keys = Array.isArray(input) ? input : [input];
   return suspendReact.preload(loadingFn(extensions), [loader, ...keys]);
 };
 
-/**
- * Removes a loaded asset from cache.
+/**
+ * Removes a loaded asset from cache.
  */
 useLoader.clear = function (loader, input) {
   const keys = Array.isArray(input) ? input : [input];
@@ -1336,7 +1351,7 @@ function handleContainerEffects(parent, child, beforeChild) {
       child.object.dispatchEvent({
         type: 'added'
       });
-      // @ts-expect-error https://github.com/mrdoob/three.js/pull/16934
+      // expect-error https://github.com/mrdoob/three.js/pull/16934
       parent.object.dispatchEvent({
         type: 'childadded',
         child: child.object
@@ -1652,17 +1667,20 @@ const shallowLoose = {
   objects: 'shallow',
   strict: false
 };
-const createRendererInstance = (gl, canvas) => {
-  const customRenderer = typeof gl === 'function' ? gl(canvas) : gl;
-  if (isRenderer(customRenderer)) return customRenderer;
-  return new THREE__namespace.WebGLRenderer({
-    powerPreference: 'high-performance',
+async function createRendererInstance(gl, canvas) {
+  const defaultProps = {
     canvas: canvas,
+    powerPreference: 'high-performance',
     antialias: true,
-    alpha: true,
+    alpha: true
+  };
+  const customRenderer = typeof gl === 'function' ? await gl(defaultProps) : gl;
+  if (isRenderer(customRenderer)) return customRenderer;
+  return new THREE__namespace.WebGLRenderer({
+    ...defaultProps,
     ...gl
   });
-};
+}
 function computeInitialSize(canvas, size) {
   if (!size && typeof HTMLCanvasElement !== 'undefined' && canvas instanceof HTMLCanvasElement && canvas.parentElement) {
     const {
@@ -1743,7 +1761,7 @@ function createRoot(canvas) {
   let configured = false;
   let lastCamera;
   return {
-    configure(props = {}) {
+    async configure(props = {}) {
       let {
         gl: glConfig,
         size: propsSize,
@@ -1767,7 +1785,7 @@ function createRoot(canvas) {
       // Set up renderer (one time only!)
       let gl = state.gl;
       if (!state.gl) state.set({
-        gl: gl = createRendererInstance(glConfig, canvas)
+        gl: gl = await createRendererInstance(glConfig, canvas)
       });
 
       // Set up raycaster (one time only!)
@@ -1837,6 +1855,31 @@ function createRoot(canvas) {
         });
       }
 
+      // Store events internally
+      if (events && !state.events.handlers) state.set({
+        events: events(store)
+      });
+      // Check size, allow it to take on container bounds initially
+      const size = computeInitialSize(canvas, propsSize);
+      if (!is.equ(size, state.size, shallowLoose)) {
+        state.setSize(size.width, size.height, size.top, size.left);
+      }
+      // Check pixelratio
+      if (dpr && state.viewport.dpr !== calculateDpr(dpr)) state.setDpr(dpr);
+      // Check frameloop
+      if (state.frameloop !== frameloop) state.setFrameloop(frameloop);
+      // Check pointer missed
+      if (!state.onPointerMissed) state.set({
+        onPointerMissed
+      });
+      // Check performance
+      if (performance && !is.equ(performance, state.performance, shallowLoose)) state.set(state => ({
+        performance: {
+          ...state.performance,
+          ...performance
+        }
+      }));
+
       // Set up XR (one time only!)
       if (!state.xr) {
         var _gl$xr;
@@ -1918,30 +1961,6 @@ function createRoot(canvas) {
 
       // Set gl props
       if (glConfig && !is.fun(glConfig) && !isRenderer(glConfig) && !is.equ(glConfig, gl, shallowLoose)) applyProps(gl, glConfig);
-      // Store events internally
-      if (events && !state.events.handlers) state.set({
-        events: events(store)
-      });
-      // Check size, allow it to take on container bounds initially
-      const size = computeInitialSize(canvas, propsSize);
-      if (!is.equ(size, state.size, shallowLoose)) {
-        state.setSize(size.width, size.height, size.top, size.left);
-      }
-      // Check pixelratio
-      if (dpr && state.viewport.dpr !== calculateDpr(dpr)) state.setDpr(dpr);
-      // Check frameloop
-      if (state.frameloop !== frameloop) state.setFrameloop(frameloop);
-      // Check pointer missed
-      if (!state.onPointerMissed) state.set({
-        onPointerMissed
-      });
-      // Check performance
-      if (performance && !is.equ(performance, state.performance, shallowLoose)) state.set(state => ({
-        performance: {
-          ...state.performance,
-          ...performance
-        }
-      }));
 
       // Set locals
       onCreated = onCreatedCallback;
@@ -1950,7 +1969,7 @@ function createRoot(canvas) {
     },
     render(children) {
       // The root has to be configured before it can be rendered
-      if (!configured) this.configure();
+      if (!configured) throw "The root has to be configured before it can be rendered, call 'configure' first!";
       reconciler.updateContainer( /*#__PURE__*/jsxRuntime.jsx(Provider, {
         store: store,
         children: children,
@@ -1964,12 +1983,6 @@ function createRoot(canvas) {
     }
   };
 }
-function render(children, canvas, config) {
-  console.warn('R3F.render is no longer supported in React 18. Use createRoot instead!');
-  const root = createRoot(canvas);
-  root.configure(config);
-  return root.render(children);
-}
 function Provider({
   store,
   children,
@@ -2035,10 +2048,10 @@ function Portal({
   children,
   container
 }) {
-  /** This has to be a component because it would not be able to call useThree/useStore otherwise since
-   *  if this is our environment, then we are not in r3f's renderer but in react-dom, it would trigger
-   *  the "R3F hooks can only be used within the Canvas component!" warning:
-   *  <Canvas>
+  /** This has to be a component because it would not be able to call useThree/useStore otherwise since
+   *  if this is our environment, then we are not in r3f's renderer but in react-dom, it would trigger
+   *  the "R3F hooks can only be used within the Canvas component!" warning:
+   *  <Canvas>
    *    {createPortal(...)} */
   const {
     events,
@@ -2107,12 +2120,16 @@ function Portal({
     return store;
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [previousRoot, container]);
-  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: reconciler.createPortal( /*#__PURE__*/jsxRuntime.jsx(context.Provider, {
-      value: usePortalStore,
-      children: children
-    }), usePortalStore, null)
-  });
+  return (
+    /*#__PURE__*/
+    // @ts-ignore, reconciler types are not maintained
+    jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children: reconciler.createPortal( /*#__PURE__*/jsxRuntime.jsx(context.Provider, {
+        value: usePortalStore,
+        children: children
+      }), usePortalStore, null)
+    })
+  );
 }
 
 function createSubs(callback, subs) {
@@ -2126,21 +2143,21 @@ const globalEffects = new Set();
 const globalAfterEffects = new Set();
 const globalTailEffects = new Set();
 
-/**
- * Adds a global render callback which is called each frame.
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addEffect
+/**
+ * Adds a global render callback which is called each frame.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addEffect
  */
 const addEffect = callback => createSubs(callback, globalEffects);
 
-/**
- * Adds a global after-render callback which is called each frame.
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addAfterEffect
+/**
+ * Adds a global after-render callback which is called each frame.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addAfterEffect
  */
 const addAfterEffect = callback => createSubs(callback, globalAfterEffects);
 
-/**
- * Adds a global callback which is called when rendering stops.
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addTail
+/**
+ * Adds a global callback which is called when rendering stops.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addTail
  */
 const addTail = callback => createSubs(callback, globalTailEffects);
 function run(effects, timestamp) {
@@ -2228,9 +2245,9 @@ function loop(timestamp) {
   }
 }
 
-/**
- * Invalidates the view, requesting a frame to be rendered. Will globally invalidate unless passed a root's state.
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#invalidate
+/**
+ * Invalidates the view, requesting a frame to be rendered. Will globally invalidate unless passed a root's state.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#invalidate
  */
 function invalidate(state, frames = 1) {
   var _state$gl$xr2;
@@ -2257,9 +2274,9 @@ function invalidate(state, frames = 1) {
   }
 }
 
-/**
- * Advances the frameloop and runs render effects, useful for when manually rendering via `frameloop="never"`.
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#advance
+/**
+ * Advances the frameloop and runs render effects, useful for when manually rendering via `frameloop="never"`.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#advance
  */
 function advance(timestamp, runGlobalEffects = true, state, frame) {
   if (runGlobalEffects) flushGlobalEffects('before', timestamp);
@@ -2375,7 +2392,6 @@ exports.getRootState = getRootState;
 exports.invalidate = invalidate;
 exports.isRef = isRef;
 exports.reconciler = reconciler;
-exports.render = render;
 exports.threeTypes = threeTypes;
 exports.unmountComponentAtNode = unmountComponentAtNode;
 exports.useBridge = useBridge;

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var events = require('./events-c2452172.cjs.dev.js');
+var events = require('./events-b4061ace.cjs.dev.js');
 var React = require('react');
 var THREE = require('three');
 var createDebounce = require('debounce');
@@ -286,52 +286,55 @@ function CanvasImpl({
     const canvas = canvasRef.current;
     if (containerRect.width > 0 && containerRect.height > 0 && canvas) {
       if (!root.current) root.current = events.createRoot(canvas);
-      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);
-              }
-            });
+      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);
           }
-          // Call onCreated callback
-          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(() => {
@@ -370,9 +373,9 @@ function CanvasImpl({
   });
 }
 
-/**
- * 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, {
@@ -402,7 +405,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;