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

package/dist/{events-64d1e225.esm.js → events-a7b08b1a.esm.js}

@@ -12,29 +12,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.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.useLayoutEffect : React.useEffect;
 function useMutableCallback(fn) {
@@ -42,8 +42,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 = useFiber();
@@ -95,8 +95,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;
@@ -110,6 +110,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',
@@ -278,6 +279,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) {
@@ -314,12 +327,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;
@@ -361,7 +370,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.Layers && value instanceof THREE.Layers) {
@@ -444,9 +459,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);
@@ -781,19 +796,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) {
@@ -1059,7 +1074,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);
     }
@@ -1084,11 +1099,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.useRef(null);
@@ -1096,9 +1111,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.useContext(context);
@@ -1106,18 +1121,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();
@@ -1129,9 +1144,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.useMemo(() => buildGraph(object), [object]);
@@ -1167,11 +1182,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
@@ -1183,16 +1198,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 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];
@@ -1310,7 +1325,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
@@ -1626,17 +1641,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.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.WebGLRenderer({
+    ...defaultProps,
     ...gl
   });
-};
+}
 function computeInitialSize(canvas, size) {
   if (!size && typeof HTMLCanvasElement !== 'undefined' && canvas instanceof HTMLCanvasElement && canvas.parentElement) {
     const {
@@ -1717,7 +1735,7 @@ function createRoot(canvas) {
   let configured = false;
   let lastCamera;
   return {
-    configure(props = {}) {
+    async configure(props = {}) {
       let {
         gl: glConfig,
         size: propsSize,
@@ -1741,7 +1759,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!)
@@ -1811,6 +1829,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;
@@ -1892,30 +1935,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;
@@ -1924,7 +1943,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__*/jsx(Provider, {
         store: store,
         children: children,
@@ -1938,12 +1957,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,
@@ -2009,10 +2022,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,
@@ -2081,12 +2094,16 @@ function Portal({
     return store;
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [previousRoot, container]);
-  return /*#__PURE__*/jsx(Fragment, {
-    children: reconciler.createPortal( /*#__PURE__*/jsx(context.Provider, {
-      value: usePortalStore,
-      children: children
-    }), usePortalStore, null)
-  });
+  return (
+    /*#__PURE__*/
+    // @ts-ignore, reconciler types are not maintained
+    jsx(Fragment, {
+      children: reconciler.createPortal( /*#__PURE__*/jsx(context.Provider, {
+        value: usePortalStore,
+        children: children
+      }), usePortalStore, null)
+    })
+  );
 }
 
 function createSubs(callback, subs) {
@@ -2100,21 +2117,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) {
@@ -2202,9 +2219,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;
@@ -2231,9 +2248,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);
@@ -2327,4 +2344,4 @@ function createPointerEvents(store) {
   };
 }
 
-export { useStore as A, Block as B, useThree as C, useFrame as D, ErrorBoundary as E, useGraph as F, useLoader as G, _roots as _, useMutableCallback as a, useIsomorphicLayoutEffect as b, createRoot as c, unmountComponentAtNode as d, extend as e, createPointerEvents as f, createEvents as g, flushGlobalEffects as h, isRef as i, addEffect as j, addAfterEffect as k, addTail as l, invalidate as m, advance as n, render as o, createPortal as p, context as q, reconciler as r, applyProps as s, threeTypes as t, useBridge as u, getRootState as v, dispose as w, act as x, buildGraph as y, useInstanceHandle as z };
+export { useThree as A, Block as B, useFrame as C, useGraph as D, ErrorBoundary as E, useLoader as F, _roots as _, useMutableCallback as a, useIsomorphicLayoutEffect as b, createRoot as c, unmountComponentAtNode as d, extend as e, createPointerEvents as f, createEvents as g, flushGlobalEffects as h, isRef as i, addEffect as j, addAfterEffect as k, addTail as l, invalidate as m, advance as n, createPortal as o, context as p, applyProps as q, reconciler as r, getRootState as s, threeTypes as t, useBridge as u, dispose as v, act as w, buildGraph as x, useInstanceHandle as y, useStore as z };