@react-three/fiber 10.0.0-canary.f50076a → 10.0.0-canary.f511bb4

package/dist/shared/{fiber.dvUbwHHn.mjs → fiber.B3mc9NA1.mjs}

@@ -1,5 +1,5 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { n as notifyDepreciated, a as useThree, u as useStore, h as unstageTextures, i as stageTextures, j as detachRootExtensions, k as attachRootExtensions, d as useIsomorphicLayoutEffect, e as useMutableCallback, c as context, b as useFrame, f as useBridge, l as notifyAlpha, E as ErrorBoundary, B as Block, m as notifyRootExtensionsHmr } from './fiber.B0oukOFO.mjs';
+import { n as notifyDepreciated, a as useThree, u as useStore, h as unstageTextures, i as stageTextures, j as attachRootExtensions, k as detachRootExtensions, d as useIsomorphicLayoutEffect, e as useMutableCallback, c as context, b as useFrame, f as useBridge, l as notifyAlpha, E as ErrorBoundary, B as Block, m as notifyRootExtensionsHmr } from './fiber.CUKAa7Rv.mjs';
 import * as React from 'react';
 import React__default, { useRef, useMemo, useLayoutEffect, useEffect, useImperativeHandle, useCallback, useState } from 'react';
 import useMeasure from 'react-use-measure';
@@ -422,6 +422,28 @@ const VISIBILITY_EVENT_REGEX = /^on(Framed|Occluded|Visible)$/;
 const INDEX_REGEX = /-\d+$/;
 const MEMOIZED_PROTOTYPES = /* @__PURE__ */ new Map();
 const colorMaps = ["map", "emissiveMap", "sheenColorMap", "specularColorMap", "envMap"];
+const programProps = /* @__PURE__ */ new Set([
+  "transparent",
+  "vertexColors",
+  "flatShading",
+  "fog",
+  // Culling is live, but DOUBLE_SIDED / FLIP_SIDED normal flipping is compiled in
+  "side",
+  "alphaHash",
+  "premultipliedAlpha",
+  // Both feed the OPAQUE define when the material is not transparent
+  "blending",
+  "alphaToCoverage",
+  "dithering",
+  "sizeAttenuation",
+  "combine",
+  "normalMapType",
+  "depthPacking"
+]);
+function changesProgram(root, key, previous, next) {
+  if (!root?.isMaterial || previous === next) return false;
+  return programProps.has(key) || isTexture(previous) !== isTexture(next);
+}
 function resolve(root, key) {
   if (!key.includes("-")) return { root, key, target: root[key] };
   if (key in root) return { root, key, target: root[key] };
@@ -452,6 +474,7 @@ function attach(parent, child) {
     const { root, key } = resolve(parent.object, child.props.attach);
     child.previousAttach = root[key];
     root[key] = child.object;
+    if (changesProgram(root, key, child.previousAttach, child.object)) root.needsUpdate = true;
   } else if (is.fun(child.props.attach)) {
     child.previousAttach = child.props.attach(parent.object, child.object);
   }
@@ -462,6 +485,7 @@ function detach(parent, child) {
     const previous = child.previousAttach;
     if (previous === void 0) delete root[key];
     else root[key] = previous;
+    if (changesProgram(root, key, child.object, previous)) root.needsUpdate = true;
   } else {
     child.previousAttach?.(parent.object, child.object);
   }
@@ -576,9 +600,12 @@ function applyProps(object, props) {
       }
     } else {
       if (key === "material") assertNodeMaterialSupported(rootState, value);
+      const previous = root[key];
       root[key] = value;
       if (key.endsWith("Node") && root.isMaterial) {
         root.needsUpdate = true;
+      } else if (changesProgram(root, key, previous, value)) {
+        root.needsUpdate = true;
       }
       const three = rootState && getThree();
       if (three && rootState.renderer?.outputColorSpace === three.SRGBColorSpace && colorMaps.includes(key) && isTexture(value) && root[key]?.isTexture && // sRGB textures must be RGBA8 since r137 https://github.com/mrdoob/three.js/pull/23129
@@ -14769,6 +14796,69 @@ function getPrimaryIds() {
   return Array.from(primaryRegistry.keys());
 }
 
+const fulfilled = (value) => Object.assign(Promise.resolve(value), { status: "fulfilled", value });
+const tracked = (promise) => {
+  const result = Promise.resolve(promise);
+  result.status = "pending";
+  result.then(
+    (value) => {
+      Object.assign(result, { status: "fulfilled", value });
+    },
+    (reason) => {
+      Object.assign(result, { status: "rejected", reason });
+    }
+  );
+  return result;
+};
+
+const records = /* @__PURE__ */ new WeakMap();
+function take(renderer, record) {
+  record.leases++;
+  let released = false;
+  return () => {
+    if (released) return;
+    released = true;
+    if (--record.leases > 0) return;
+    records.delete(renderer);
+    if (record.owned) return disposeRenderer(renderer);
+  };
+}
+function leaseRenderer(renderer, owned) {
+  let record = records.get(renderer);
+  if (!record) records.set(renderer, record = { owned, leases: 0 });
+  return take(renderer, record);
+}
+function borrowRenderer(renderer) {
+  const record = records.get(renderer);
+  if (!record) throw new Error("R3F: cannot share a renderer whose canvas has already unmounted");
+  return take(renderer, record);
+}
+function disposeRenderer(renderer) {
+  if (renderer.hasInitialized?.() === false) return;
+  const warn = (error) => console.warn("[R3F] Error disposing renderer", error);
+  const loseContext = () => {
+    try {
+      ;
+      renderer.forceContextLoss?.();
+    } catch (error) {
+      warn(error);
+    }
+  };
+  let disposed;
+  try {
+    disposed = renderer.dispose();
+  } catch (error) {
+    warn(error);
+  }
+  if (typeof disposed?.then === "function") {
+    return Promise.resolve(disposed).then(loseContext, (error) => {
+      warn(error);
+      loseContext();
+    });
+  }
+  loseContext();
+}
+
 const isRenderer = (def) => !!def?.render;
 const _roots = /* @__PURE__ */ new Map();
 function ensureStoreThreeObjects(store) {
@@ -14780,9 +14870,9 @@ function ensureStoreThreeObjects(store) {
 }
 const shallowLoose = { objects: "shallow", strict: false };
 async function resolveRenderer(config, defaultProps, RendererClass) {
-  if (typeof config === "function") return await config(defaultProps);
-  if (isRenderer(config)) return config;
-  return new RendererClass({ ...defaultProps, ...config });
+  if (typeof config === "function") return { renderer: await config(defaultProps), owned: true };
+  if (isRenderer(config)) return { renderer: config, owned: false };
+  return { renderer: new RendererClass({ ...defaultProps, ...config }), owned: true };
 }
 function computeInitialSize(canvas, size) {
   if (!size && typeof HTMLCanvasElement !== "undefined" && canvas instanceof HTMLCanvasElement && canvas.parentElement) {
@@ -14798,6 +14888,47 @@ function computeInitialSize(canvas, size) {
   }
   return { width: 0, height: 0, top: 0, left: 0, ...size };
 }
+function watchDpr(onChange) {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function" || !window.devicePixelRatio) {
+    return () => {
+    };
+  }
+  let query;
+  const listen = () => {
+    try {
+      query = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
+      if (typeof query?.addEventListener === "function") query.addEventListener("change", handleChange);
+      else query?.addListener?.(handleChange);
+    } catch {
+      query = void 0;
+    }
+  };
+  const unlisten = () => {
+    if (typeof query?.removeEventListener === "function") query.removeEventListener("change", handleChange);
+    else query?.removeListener?.(handleChange);
+    query = void 0;
+  };
+  const handleChange = () => {
+    unlisten();
+    listen();
+    onChange();
+  };
+  listen();
+  return unlisten;
+}
+async function createOwnedWebGPURenderer(rendererConfig, defaultGPUProps, canvas, propsSize, dpr, support) {
+  const resolved = await resolveRenderer(rendererConfig, defaultGPUProps, support.Renderer);
+  const renderer = resolved.renderer;
+  if (!renderer.hasInitialized?.()) {
+    const size = computeInitialSize(canvas, propsSize);
+    if (size.width > 0 && size.height > 0) {
+      renderer.setPixelRatio(calculateDpr(dpr));
+      renderer.setSize(size.width, size.height, false);
+    }
+    await renderer.init();
+  }
+  return { renderer, owned: resolved.owned };
+}
 function createRoot(canvas, provider) {
   const prevRoot = _roots.get(canvas);
   const prevFiber = prevRoot?.fiber;
@@ -14834,15 +14965,39 @@ function createRoot(canvas, provider) {
     null
     // transitionCallbacks
   );
-  if (!prevRoot) _roots.set(canvas, { fiber, store });
+  const root = prevRoot || { fiber, store, unmountClaim: null, ready: fulfilled(void 0) };
+  if (!prevRoot) _roots.set(canvas, root);
   let onCreated;
   let lastCamera;
   const lastConfiguredProps = {};
+  let resolvedDpr = 0;
+  let dprChangedInXR = false;
+  let unwatchDpr;
+  const resolveDpr = () => {
+    if (_roots.get(canvas)?.store !== store) return unwatchDpr?.();
+    const state = store.getState();
+    const xr = state.internal.actualRenderer?.xr;
+    if (xr?.isPresenting || xr?.getSession?.()) {
+      dprChangedInXR = true;
+      return;
+    }
+    dprChangedInXR = false;
+    const dpr = lastConfiguredProps.dpr;
+    if (dpr === void 0 || state.viewport.dpr !== resolvedDpr || calculateDpr(dpr) === resolvedDpr) return;
+    state.setDpr(dpr);
+    resolvedDpr = store.getState().viewport.dpr;
+  };
   let configured = false;
   let pending = null;
-  let rendererSetup = null;
+  const cancelUnmount = () => {
+    if (!root.unmountClaim) return;
+    root.unmountClaim = null;
+    store.getState().internal.active = true;
+  };
   return {
     async configure(props = {}) {
+      if (_roots.get(canvas) !== root) throw new Error("R3F: cannot configure a root after it has unmounted");
+      cancelUnmount();
       let resolve;
       pending = new Promise((_resolve) => resolve = _resolve);
       const {
@@ -14916,49 +15071,82 @@ function createRoot(canvas, provider) {
         );
       }
       if (!state.internal.actualRenderer) {
-        if (!rendererSetup) {
-          rendererSetup = (async () => {
+        if (root.ready.status !== "pending") {
+          const setup = (async () => {
             const support = wantsGL ? await webgl() : await webgpu();
             registerThree(support.three);
             state.internal.support = support;
             ensureStoreThreeObjects(store);
             if (support.kind === "webgl") {
-              renderer = await resolveRenderer(glConfig, defaultGLProps, support.Renderer);
+              const resolved = await resolveRenderer(glConfig, defaultGLProps, support.Renderer);
+              renderer = resolved.renderer;
               state.internal.actualRenderer = renderer;
+              state.internal.releaseRenderer = leaseRenderer(renderer, resolved.owned);
               state.set({ isLegacy: true, gl: renderer, renderer, primaryStore: store });
             } else if (primaryCanvas) {
               const primary = await waitForPrimary(primaryCanvas);
-              renderer = primary.renderer;
-              state.internal.actualRenderer = renderer;
-              const canvasTarget = new support.CanvasTarget(canvas);
-              primary.store.setState((prev) => ({
-                internal: { ...prev.internal, isMultiCanvas: true }
-              }));
-              state.set((prev) => ({
-                webGPUSupported: primary.store.getState().webGPUSupported,
-                renderer,
-                primaryStore: primary.store,
-                internal: {
-                  ...prev.internal,
-                  canvasTarget,
-                  isMultiCanvas: true,
-                  isSecondary: true,
-                  targetId: primaryCanvas
-                }
-              }));
-            } else {
-              renderer = await resolveRenderer(rendererConfig, defaultGPUProps, support.Renderer);
-              if (!renderer.hasInitialized?.()) {
-                const size2 = computeInitialSize(canvas, propsSize);
-                if (size2.width > 0 && size2.height > 0) {
-                  renderer.setPixelRatio(calculateDpr(dpr));
-                  renderer.setSize(size2.width, size2.height, false);
-                }
-                await renderer.init();
+              if (primary.store.getState().webGPUSupported) {
+                renderer = primary.renderer;
+                state.internal.actualRenderer = renderer;
+                state.internal.releaseRenderer = borrowRenderer(renderer);
+                const canvasTarget = new support.CanvasTarget(canvas);
+                primary.store.setState((prev) => ({
+                  internal: { ...prev.internal, isMultiCanvas: true }
+                }));
+                state.set((prev) => ({
+                  webGPUSupported: primary.store.getState().webGPUSupported,
+                  renderer,
+                  primaryStore: primary.store,
+                  internal: {
+                    ...prev.internal,
+                    canvasTarget,
+                    isMultiCanvas: true,
+                    isSecondary: true,
+                    targetId: primaryCanvas
+                  }
+                }));
+              } else {
+                const isPlainConfig = is.obj(rendererConfig) && !is.fun(rendererConfig) && !isRenderer(rendererConfig);
+                const { primaryCanvas: _peeled, ...rendererOptions } = isPlainConfig ? rendererConfig : {};
+                const fallbackConfig = is.fun(rendererConfig) || isRenderer(rendererConfig) ? rendererConfig : { ...rendererOptions, forceWebGL: true };
+                const resolved = await createOwnedWebGPURenderer(
+                  fallbackConfig,
+                  defaultGPUProps,
+                  canvas,
+                  propsSize,
+                  dpr,
+                  support
+                );
+                renderer = resolved.renderer;
+                const backend = renderer.backend;
+                const isWebGPUBackend = backend && "isWebGPUBackend" in backend;
+                state.internal.actualRenderer = renderer;
+                state.internal.releaseRenderer = leaseRenderer(renderer, resolved.owned);
+                state.set((prev) => ({
+                  webGPUSupported: isWebGPUBackend,
+                  renderer,
+                  primaryStore: store,
+                  internal: {
+                    ...prev.internal,
+                    canvasTarget: renderer.getCanvasTarget?.(),
+                    sharedRendererFallback: true
+                  }
+                }));
               }
+            } else {
+              const resolved = await createOwnedWebGPURenderer(
+                rendererConfig,
+                defaultGPUProps,
+                canvas,
+                propsSize,
+                dpr,
+                support
+              );
+              renderer = resolved.renderer;
               const backend = renderer.backend;
               const isWebGPUBackend = backend && "isWebGPUBackend" in backend;
               state.internal.actualRenderer = renderer;
+              state.internal.releaseRenderer = leaseRenderer(renderer, resolved.owned);
               state.set({ webGPUSupported: isWebGPUBackend, renderer, primaryStore: store });
               if (canvasId && !state.internal.isSecondary) {
                 const canvasTarget = renderer.getCanvasTarget?.();
@@ -14972,16 +15160,15 @@ function createRoot(canvas, provider) {
                 }));
               }
             }
-          })().catch((err) => {
-            rendererSetup = null;
-            throw err;
-          });
+          })();
+          root.ready = tracked(setup);
         }
-        await rendererSetup;
+        await root.ready;
         state = store.getState();
         renderer = state.internal.actualRenderer;
       }
       const three = getThree();
+      const borrowsRenderer = state.internal.isSecondary === true;
       let raycaster = state.raycaster;
       if (!raycaster) state.set({ raycaster: raycaster = new three.Raycaster() });
       const { params, ...options } = raycastOptions || {};
@@ -15056,6 +15243,12 @@ function createRoot(canvas, provider) {
       if (dpr !== void 0 && !is.equ(dpr, lastConfiguredProps.dpr, shallowLoose)) {
         state.setDpr(dpr);
         lastConfiguredProps.dpr = dpr;
+        resolvedDpr = store.getState().viewport.dpr;
+      }
+      const internal = store.getState().internal;
+      if (Array.isArray(dpr) && (!unwatchDpr || internal.unwatchDpr !== unwatchDpr)) {
+        internal.unwatchDpr?.();
+        internal.unwatchDpr = unwatchDpr = watchDpr(resolveDpr);
       }
       if (frameloop !== void 0 && frameloop !== lastConfiguredProps.frameloop) {
         state.setFrameloop(frameloop);
@@ -15084,7 +15277,10 @@ function createRoot(canvas, provider) {
           const renderer2 = state2.internal.actualRenderer;
           actualRenderer.xr.enabled = actualRenderer.xr.isPresenting;
           renderer2.xr.setAnimationLoop(renderer2.xr.isPresenting ? handleXRFrame : null);
-          if (!renderer2.xr.isPresenting) invalidate(state2);
+          if (!renderer2.xr.isPresenting) {
+            if (dprChangedInXR) resolveDpr();
+            invalidate(state2);
+          }
         };
         const xr = {
           connect() {
@@ -15100,10 +15296,10 @@ function createRoot(canvas, provider) {
             xrManager.removeEventListener("sessionend", handleSessionChange);
           }
         };
-        if (typeof renderer.xr?.addEventListener === "function") xr.connect();
+        if (!borrowsRenderer && typeof renderer.xr?.addEventListener === "function") xr.connect();
         state.set({ xr });
       }
-      if (renderer.shadowMap && !is.equ(shadows, lastConfiguredProps.shadows, shallowLoose)) {
+      if (!borrowsRenderer && renderer.shadowMap && !is.equ(shadows, lastConfiguredProps.shadows, shallowLoose)) {
         lastConfiguredProps.shadows = shadows;
         const oldEnabled = renderer.shadowMap.enabled;
         const oldType = renderer.shadowMap.type;
@@ -15132,7 +15328,7 @@ function createRoot(canvas, provider) {
           renderer.shadowMap.needsUpdate = true;
         }
       }
-      if (!configured) {
+      if (!configured && !borrowsRenderer) {
         renderer.outputColorSpace = three.SRGBColorSpace;
         renderer.toneMapping = three.ACESFilmicToneMapping;
       }
@@ -15141,7 +15337,7 @@ function createRoot(canvas, provider) {
         if (state.textureColorSpace !== textureColorSpace) state.set(() => ({ textureColorSpace }));
         lastConfiguredProps.textureColorSpace = textureColorSpace;
       }
-      const r3fProps = ["textureColorSpace"];
+      const r3fProps = ["textureColorSpace", "primaryCanvas", "scheduler"];
       const constructorOnlyProps = ["samples", "antialias", "alpha", "canvas", "powerPreference"];
       const nonApplyProps = [...r3fProps, ...constructorOnlyProps];
       if (glConfig && !is.fun(glConfig) && !isRenderer(glConfig) && !is.equ(glConfig, renderer, shallowLoose)) {
@@ -15151,7 +15347,7 @@ function createRoot(canvas, provider) {
         }
         applyProps(renderer, glProps);
       }
-      if (rendererConfig && !is.fun(rendererConfig) && !isRenderer(rendererConfig) && state.renderer) {
+      if (rendererConfig && !is.fun(rendererConfig) && !isRenderer(rendererConfig) && state.renderer && !borrowsRenderer) {
         const currentRenderer = state.renderer;
         if (!is.equ(rendererConfig, currentRenderer, shallowLoose)) {
           const rendererProps = {};
@@ -15294,8 +15490,11 @@ function createRoot(canvas, provider) {
       return this;
     },
     render(children) {
+      if (_roots.get(canvas) !== root) return store;
+      cancelUnmount();
       if (!configured && !pending) this.configure();
       pending.then(() => {
+        if (_roots.get(canvas) !== root || root.unmountClaim) return;
         reconciler.updateContainer(
           /* @__PURE__ */ jsx(Provider, { store, children, onCreated, rootElement: canvas }),
           fiber,
@@ -15306,7 +15505,7 @@ function createRoot(canvas, provider) {
       return store;
     },
     unmount() {
-      unmountComponentAtNode(canvas);
+      if (_roots.get(canvas) === root) unmountComponentAtNode(canvas);
     }
   };
 }
@@ -15326,46 +15525,52 @@ function Provider({
 }
 function unmountComponentAtNode(canvas, callback) {
   const root = _roots.get(canvas);
-  const fiber = root?.fiber;
-  if (fiber) {
-    const state = root?.store.getState();
-    if (state) {
-      state.internal.active = false;
-      const unregisterRoot = state.internal.unregisterRoot;
-      if (unregisterRoot) {
-        unregisterRoot();
-        state.internal.unregisterRoot = void 0;
+  if (!root) return;
+  const claim = root.unmountClaim = Symbol("unmount");
+  root.store.getState().internal.active = false;
+  reconciler.updateContainer(null, root.fiber, null, () => {
+    if (root.unmountClaim !== claim) return;
+    reconciler.updateContainer(null, root.fiber, null, () => {
+      if (root.unmountClaim !== claim) return;
+      if (root.ready.status === "pending") root.ready.then(teardown, teardown);
+      else teardown();
+    });
+  });
+  function teardown() {
+    if (root.unmountClaim !== claim) return;
+    root.unmountClaim = null;
+    _roots.delete(canvas);
+    const state = root.store.getState();
+    const internal = state.internal;
+    internal.active = false;
+    const attempt = (step) => {
+      try {
+        return step();
+      } catch (error) {
+        console.warn("[R3F] Error while unmounting root; teardown may be incomplete:", error);
       }
-    }
-    reconciler.updateContainer(null, fiber, null, () => {
-      if (root?.store) detachRootExtensions(root.store);
-      if (state) {
-        setTimeout(() => {
-          try {
-            const renderer = state.internal.actualRenderer;
-            const unregisterPrimary = state.internal.unregisterPrimary;
-            if (unregisterPrimary) unregisterPrimary();
-            const canvasTarget = state.internal.canvasTarget;
-            if (state.internal.isSecondary && canvasTarget?.dispose) canvasTarget.dispose();
-            state.events.disconnect?.();
-            cleanupHelperGroup(root.store);
-            if (state.isLegacy && renderer) {
-              ;
-              renderer.renderLists?.dispose?.();
-              renderer.forceContextLoss?.();
-            }
-            if (!state.internal.isSecondary) {
-              if (renderer?.xr) state.xr.disconnect();
-            }
-            dispose(state.scene);
-            _roots.delete(canvas);
-            if (callback) callback(canvas);
-          } catch (error) {
-            console.warn("[R3F] Error while unmounting root; teardown may be incomplete:", error);
-          }
-        }, 500);
+    };
+    attempt(() => internal.unwatchDpr?.());
+    internal.unwatchDpr = void 0;
+    attempt(() => internal.unregisterRoot?.());
+    internal.unregisterRoot = void 0;
+    attempt(() => detachRootExtensions(root.store));
+    attempt(() => internal.unregisterPrimary?.());
+    attempt(() => state.events.disconnect?.());
+    if (!internal.isSecondary && internal.actualRenderer?.xr && state.xr) attempt(() => state.xr.disconnect());
+    attempt(() => cleanupHelperGroup(root.store));
+    if (state.scene) attempt(() => dispose(state.scene));
+    const canvasTarget = internal.canvasTarget;
+    if (internal.isSecondary && canvasTarget?.dispose) attempt(() => canvasTarget.dispose());
+    const released = attempt(() => internal.releaseRenderer?.());
+    internal.releaseRenderer = void 0;
+    if (callback) {
+      if (released) {
+        released.then(() => callback(canvas)).catch((error) => console.warn("[R3F] Error in unmount callback", error));
+      } else {
+        callback(canvas);
       }
-    });
+    }
   }
 }
 function createPortal(children, container, state) {
@@ -15910,13 +16115,27 @@ function CanvasImpl({
       }
     };
   });
+  const insertionMounted = React.useRef(false);
+  React.useInsertionEffect(() => {
+    insertionMounted.current = true;
+    return () => {
+      insertionMounted.current = false;
+      queueMicrotask(() => {
+        if (insertionMounted.current) return;
+        const current = root.current;
+        root.current = null;
+        current?.unmount();
+      });
+    };
+  }, []);
   React.useEffect(() => {
     const canvas = canvasRef.current;
     if (canvas) {
       return () => {
         if (canvas.isConnected) return;
-        unmountComponentAtNode(canvas);
+        const current = root.current;
         root.current = null;
+        current?.unmount();
       };
     }
   }, []);