@react-three/fiber 10.0.0-canary.e53bd54 → 10.0.0-canary.e78793c

package/dist/shared/fiber.DUgKvaq-.mjs

@@ -0,0 +1,9 @@
+import { an as useRenderTarget$1 } from './fiber.BSYBnw8x.mjs';
+import { a as useThree$1, b as useFrame$1 } from './fiber.Biz9olEe.mjs';
+
+const useThree = useThree$1;
+const useFrame = useFrame$1;
+const useRenderTarget = useRenderTarget$1;
+const asWebGPUCanvas = (Canvas) => Canvas;
+
+export { asWebGPUCanvas as a, useFrame as b, useRenderTarget as c, useThree as u };

package/dist/shared/{fiber.B6zNSmwj.cjs → fiber.DfiCufha.cjs}

@@ -28,16 +28,18 @@ function useMutableCallback(fn) {
   useIsomorphicLayoutEffect(() => void (ref.current = fn), [fn]);
   return ref;
 }
+const useActivityBridge = React__namespace["Activity"] ? itsFine.useActivityBridge : () => React__namespace.Fragment;
 function useBridge() {
   const fiber = itsFine.useFiber();
   const ContextBridge = itsFine.useContextBridge();
+  const ActivityBridge = useActivityBridge();
   return React__namespace.useMemo(
     () => ({ children }) => {
       const strict = !!itsFine.traverseFiber(fiber, true, (node) => node.type === React__namespace.StrictMode);
       const Root = strict ? React__namespace.StrictMode : React__namespace.Fragment;
-      return /* @__PURE__ */ jsxRuntime.jsx(Root, { children: /* @__PURE__ */ jsxRuntime.jsx(ContextBridge, { children }) });
+      return /* @__PURE__ */ jsxRuntime.jsx(Root, { children: /* @__PURE__ */ jsxRuntime.jsx(ActivityBridge, { children: /* @__PURE__ */ jsxRuntime.jsx(ContextBridge, { children }) }) });
     },
-    [fiber, ContextBridge]
+    [fiber, ContextBridge, ActivityBridge]
   );
 }
 function Block({ set }) {
@@ -62,6 +64,23 @@ const ErrorBoundary = /* @__PURE__ */ (() => {
     }
   }, __publicField(_a, "getDerivedStateFromError", () => ({ error: true })), _a;
 })();
+const noop = () => {
+};
+function Gate({ promise, onSettled }) {
+  React__namespace.use(promise);
+  useIsomorphicLayoutEffect(onSettled, [onSettled]);
+  return null;
+}
+function useGate() {
+  const [promise, setPromise] = React__namespace.useState(null);
+  const onSettled = React__namespace.useCallback(() => setPromise(null), []);
+  const waitFor = React__namespace.useCallback(
+    (next) => setPromise((current) => current ?? Promise.resolve(next).then(noop, noop)),
+    []
+  );
+  const gate = promise ? /* @__PURE__ */ jsxRuntime.jsx(React__namespace.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(Gate, { promise, onSettled }) }) : null;
+  return [gate, waitFor];
+}
 
 const shownNotices = /* @__PURE__ */ new Set();
 function notifyDepreciated({ heading, body, link }) {
@@ -119,10 +138,160 @@ function notifyAlpha({ message, link }) {
     console.log(`%cMore info: ${link}`, "color: #6366f1; font-weight: normal;");
   }
 }
+function isDevelopment() {
+  try {
+    return process.env.NODE_ENV !== "production";
+  } catch {
+    return true;
+  }
+}
+
+const INTERNAL_LIB_MARKERS = [
+  "zustand",
+  "setState",
+  "Object.assign",
+  "@pmndrs/scheduler",
+  "Scheduler.tickRoot",
+  "Scheduler.stepJob"
+];
+function isInternalRendererAccess(stack, callerDepth = 2) {
+  if (!stack) return false;
+  const caller = stack.split("\n")[callerDepth] ?? "";
+  return INTERNAL_LIB_MARKERS.some((m) => caller.includes(m));
+}
+
+const isAccessorDescriptor = (descriptor) => !!descriptor && (descriptor.get !== void 0 || descriptor.set !== void 0);
+const isAccessor = (object, key) => isAccessorDescriptor(Object.getOwnPropertyDescriptor(object, key));
+function cloneState(...sources) {
+  const target = {};
+  for (const source of sources) {
+    if (source) Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+  }
+  return target;
+}
+function preserveAccessors(rawSet, get) {
+  return ((partial, replace) => {
+    const previous = get();
+    const patch = typeof partial === "function" ? partial(previous) : partial;
+    if (replace || !previous || patch == null || Object.is(patch, previous)) {
+      return rawSet(patch, replace);
+    }
+    const next = cloneState(previous);
+    const viaSetter = [];
+    for (const key of Reflect.ownKeys(patch)) {
+      const descriptor = Object.getOwnPropertyDescriptor(patch, key);
+      if (!descriptor.enumerable) continue;
+      if (isAccessorDescriptor(descriptor)) {
+        Object.defineProperty(next, key, descriptor);
+      } else if (isAccessor(next, key)) {
+        viaSetter.push(key);
+      } else {
+        Object.defineProperty(next, key, {
+          value: descriptor.value,
+          writable: true,
+          enumerable: true,
+          configurable: true
+        });
+      }
+    }
+    for (const key of viaSetter) next[key] = patch[key];
+    rawSet(next, true);
+  });
+}
+const keepAccessors = (initializer) => (rawSet, get, api) => {
+  const set = preserveAccessors(rawSet, get);
+  api.setState = set;
+  return initializer(set, get, api);
+};
+let glNoticeShown = false;
+function defineRendererAccessors(state) {
+  Object.defineProperty(state, "gl", {
+    get() {
+      const renderer = this.internal?.actualRenderer;
+      if (!glNoticeShown && renderer && !this.isLegacy) {
+        const stack = new Error().stack || "";
+        if (!isInternalRendererAccess(stack)) {
+          glNoticeShown = true;
+          const cleanedStack = stack.split("\n").slice(2).join("\n") || "Stack trace unavailable";
+          notifyDepreciated({
+            heading: "Accessing state.gl in WebGPU mode",
+            body: "Please use state.renderer instead. state.gl is deprecated and will be removed in future versions.\n\nFor backwards compatibility, state.gl currently maps to state.renderer, but this may cause issues with libraries expecting WebGLRenderer.\n\nAccessed from:\n" + cleanedStack
+          });
+        }
+      }
+      return renderer;
+    },
+    set(value) {
+      this.internal.actualRenderer = value;
+    },
+    enumerable: true,
+    configurable: true
+  });
+  Object.defineProperty(state, "renderer", {
+    get() {
+      return this.internal?.actualRenderer;
+    },
+    set(value) {
+      this.internal.actualRenderer = value;
+    },
+    enumerable: true,
+    configurable: true
+  });
+}
 
 const R3F_CONTEXT = Symbol.for("@react-three/fiber.context");
 const context = globalThis[R3F_CONTEXT] ?? (globalThis[R3F_CONTEXT] = React__namespace.createContext(null));
 
+const R3F_EXTENSIONS = Symbol.for("@react-three/fiber.extensions");
+function getRegistry() {
+  return globalThis[R3F_EXTENSIONS] ?? (globalThis[R3F_EXTENSIONS] = {
+    extensions: /* @__PURE__ */ new Map(),
+    roots: /* @__PURE__ */ new Set(),
+    applied: /* @__PURE__ */ new WeakMap()
+  });
+}
+function setupRoot(registry, store, extension) {
+  let applied = registry.applied.get(store);
+  if (!applied) registry.applied.set(store, applied = /* @__PURE__ */ new Map());
+  if (applied.has(extension.name)) return;
+  applied.set(extension.name, extension);
+  const patch = extension.setup?.(store);
+  if (patch) store.setState(patch);
+}
+function registerRootExtension(extension) {
+  const registry = getRegistry();
+  registry.extensions.set(extension.name, extension);
+  for (const store of registry.roots) setupRoot(registry, store, extension);
+  return () => {
+    if (registry.extensions.get(extension.name) === extension) registry.extensions.delete(extension.name);
+  };
+}
+function setRenderOverride(store, render) {
+  store.getState().internal.renderOverride = render;
+}
+function attachRootExtensions(store) {
+  const registry = getRegistry();
+  registry.roots.add(store);
+  for (const extension of registry.extensions.values()) setupRoot(registry, store, extension);
+}
+function current(registry, setUpBy) {
+  return registry.extensions.get(setUpBy.name) ?? setUpBy;
+}
+function detachRootExtensions(store) {
+  const registry = getRegistry();
+  if (!registry.roots.delete(store)) return;
+  const applied = registry.applied.get(store);
+  registry.applied.delete(store);
+  if (!applied) return;
+  for (const setUpBy of applied.values()) current(registry, setUpBy).dispose?.(store);
+}
+function notifyRootExtensionsHmr(store) {
+  const registry = getRegistry();
+  const applied = registry.applied.get(store);
+  if (!applied) return;
+  for (const setUpBy of applied.values()) current(registry, setUpBy).hmr?.(store);
+}
+
 function useStore() {
   const store = React.useContext(context);
   if (!store) throw new Error("R3F: Hooks can only be used within the Canvas component!");
@@ -149,12 +318,20 @@ function useFrame(callback, priorityOrOptions) {
   const options = React__namespace.useMemo(() => {
     return typeof priorityOrOptions === "number" ? { priority: priorityOrOptions } : priorityOrOptions ?? {};
   }, [optionsKey]);
-  const reactId = React__namespace.useId();
-  const id = options.id ?? reactId;
+  const [generatedId] = React__namespace.useState(() => scheduler$1.generateJobId());
+  const id = options.id ?? generatedId;
   const callbackRef = useMutableCallback(callback);
   const isLegacyPriority = typeof priorityOrOptions === "number" && priorityOrOptions > 0;
+  const isLegacyOrdering = typeof priorityOrOptions === "number" && priorityOrOptions < 0;
   useIsomorphicLayoutEffect(() => {
     if (!callback) return;
+    if (isLegacyOrdering) {
+      notifyDepreciated({
+        heading: "useFrame numeric priority order is reversed in v10",
+        body: "useFrame(callback, number) is deprecated and its ordering direction is reversed from v9: v9 ran lower numbers first, v10 maps the number to { priority } and runs higher numbers first, so a negative priority now runs after default-priority jobs.\n\nUse { before, after } to name the dependency, or { priority } with the v10 direction (higher = earlier).",
+        link: "https://docs.pmnd.rs/react-three-fiber/api/hooks#useframe"
+      });
+    }
     if (isInsideCanvas) {
       const state = store.getState();
       const rootId = state.internal.rootId;
@@ -168,19 +345,17 @@ function useFrame(callback, priorityOrOptions) {
         }
         notifyDepreciated({
           heading: "useFrame with numeric priority is deprecated",
-          body: 'Using useFrame(callback, number) to control render order is deprecated.\n\nFor custom rendering, use: useFrame(callback, { phase: "render" })\nFor execution order within update phase, use: useFrame(callback, { priority: number })',
+          body: 'Using useFrame(callback, number) to control render order is deprecated.\n\nFor custom rendering, use: useFrame(callback, { phase: "render" })\nFor execution order within a phase, use: useFrame(callback, { priority: number }) \u2014 higher runs first, the reverse of v9',
           link: "https://docs.pmnd.rs/react-three-fiber/api/hooks#useframe"
         });
       }
       const wrappedCallback = (frameState, delta) => {
-        const localState = store.getState();
-        const mergedState = {
-          ...localState,
-          time: frameState.time,
-          delta: frameState.delta,
-          elapsed: frameState.elapsed,
-          frame: frameState.frame
-        };
+        const mergedState = cloneState(store.getState());
+        mergedState.time = frameState.time;
+        mergedState.delta = frameState.delta;
+        mergedState.elapsed = frameState.elapsed;
+        mergedState.frame = frameState.frame;
+        mergedState.overstep = frameState.overstep;
         callbackRef.current?.(mergedState, delta);
       };
       const unregister = scheduler$1.register(wrappedCallback, {
@@ -213,7 +388,7 @@ function useFrame(callback, priorityOrOptions) {
         { id, ...options }
       );
     }
-  }, [store, scheduler$1, id, optionsKey, isLegacyPriority, isInsideCanvas]);
+  }, [store, scheduler$1, id, optionsKey, isLegacyPriority, isLegacyOrdering, isInsideCanvas]);
   const isPaused = React__namespace.useSyncExternalStore(
     // Subscribe function
     React__namespace.useCallback(
@@ -291,68 +466,55 @@ function useFrame(callback, priorityOrOptions) {
   return controls;
 }
 
-const R3F_EXTENSIONS = Symbol.for("@react-three/fiber.extensions");
-function getRegistry() {
-  return globalThis[R3F_EXTENSIONS] ?? (globalThis[R3F_EXTENSIONS] = {
-    extensions: /* @__PURE__ */ new Map(),
-    roots: /* @__PURE__ */ new Set(),
-    applied: /* @__PURE__ */ new WeakMap()
-  });
-}
-function setupRoot(registry, store, extension) {
-  let applied = registry.applied.get(store);
-  if (!applied) registry.applied.set(store, applied = /* @__PURE__ */ new Map());
-  if (applied.has(extension.name)) return;
-  applied.set(extension.name, extension);
-  const patch = extension.setup?.(store);
-  if (patch) store.setState(patch);
-}
-function registerRootExtension(extension) {
-  const registry = getRegistry();
-  registry.extensions.set(extension.name, extension);
-  for (const store of registry.roots) setupRoot(registry, store, extension);
-  return () => {
-    if (registry.extensions.get(extension.name) === extension) registry.extensions.delete(extension.name);
-  };
-}
-function setRenderOverride(store, render) {
-  store.getState().internal.renderOverride = render;
-}
-function attachRootExtensions(store) {
-  const registry = getRegistry();
-  registry.roots.add(store);
-  for (const extension of registry.extensions.values()) setupRoot(registry, store, extension);
-}
-function current(registry, setUpBy) {
-  return registry.extensions.get(setUpBy.name) ?? setUpBy;
+const R3F_STAGED_TEXTURES = Symbol.for("@react-three/fiber.stagedTextures");
+const globalStaging = globalThis;
+const staging = globalStaging[R3F_STAGED_TEXTURES] ?? (globalStaging[R3F_STAGED_TEXTURES] = /* @__PURE__ */ new WeakMap());
+function stageTextures(store, entries) {
+  const registered = store.getState().textures;
+  let staged = staging.get(store);
+  for (const [url, texture] of entries) {
+    if (registered.has(url)) continue;
+    if (!staged) staging.set(store, staged = /* @__PURE__ */ new Map());
+    staged.set(url, texture);
+  }
 }
-function detachRootExtensions(store) {
-  const registry = getRegistry();
-  if (!registry.roots.delete(store)) return;
-  const applied = registry.applied.get(store);
-  registry.applied.delete(store);
-  if (!applied) return;
-  for (const setUpBy of applied.values()) current(registry, setUpBy).dispose?.(store);
+function unstageTextures(store, urls) {
+  const staged = staging.get(store);
+  if (!staged) return;
+  for (const url of urls) staged.delete(url);
+  if (staged.size === 0) staging.delete(store);
 }
-function notifyRootExtensionsHmr(store) {
-  const registry = getRegistry();
-  const applied = registry.applied.get(store);
-  if (!applied) return;
-  for (const setUpBy of applied.values()) current(registry, setUpBy).hmr?.(store);
+function getTextureView(store) {
+  const registered = store.getState().textures;
+  const staged = staging.get(store);
+  if (!staged) return registered;
+  const view = new Map(registered);
+  for (const [url, texture] of staged) if (!view.has(url)) view.set(url, texture);
+  return view;
 }
 
 exports.Block = Block;
 exports.ErrorBoundary = ErrorBoundary;
 exports.attachRootExtensions = attachRootExtensions;
+exports.cloneState = cloneState;
 exports.context = context;
+exports.defineRendererAccessors = defineRendererAccessors;
 exports.detachRootExtensions = detachRootExtensions;
+exports.getTextureView = getTextureView;
+exports.isAccessor = isAccessor;
+exports.isDevelopment = isDevelopment;
+exports.keepAccessors = keepAccessors;
 exports.notifyAlpha = notifyAlpha;
 exports.notifyDepreciated = notifyDepreciated;
 exports.notifyRootExtensionsHmr = notifyRootExtensionsHmr;
+exports.preserveAccessors = preserveAccessors;
 exports.registerRootExtension = registerRootExtension;
 exports.setRenderOverride = setRenderOverride;
+exports.stageTextures = stageTextures;
+exports.unstageTextures = unstageTextures;
 exports.useBridge = useBridge;
 exports.useFrame = useFrame;
+exports.useGate = useGate;
 exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
 exports.useMutableCallback = useMutableCallback;
 exports.useStore = useStore;

package/dist/shared/fiber.DuA4F8L5.d.ts

@@ -0,0 +1,90 @@
+import { FrameCallback, UseFrameNextOptions, FrameNextControls } from '@pmndrs/scheduler';
+import { WebGPURenderer, WebGPURendererParameters, RenderTarget } from 'three/webgpu';
+import { H as RootState, I as InternalState, a8 as RendererFactory, a7 as BaseRendererProps, az as Properties } from './fiber.DQTSZ24m.js';
+import { R as RenderTargetOptions, aU as CanvasProps } from './fiber.CjMAAsJy.js';
+
+//* Renderer Props ========================================
+
+type WebGPUDefaultProps = Omit<WebGPURendererParameters, 'canvas'> & BaseRendererProps
+
+type WebGPUProps =
+  | RendererFactory<WebGPURenderer, WebGPUDefaultProps>
+  | Partial<Properties<WebGPURenderer> | WebGPURendererParameters>
+
+// WebGPU doesn't have shadow maps in the same way
+interface WebGPUShadowConfig {
+  shadows?: boolean // Simplified for WebGPU
+}
+
+//* WebGPU-specific Types ========================================
+
+/** WebGPU renderer type - re-exported as R3FRenderer from @react-three/fiber/webgpu */
+type WebGPUR3FRenderer = WebGPURenderer
+
+/** WebGPU internal state with narrowed renderer type */
+interface WebGPUInternalState extends Omit<InternalState, 'actualRenderer'> {
+  actualRenderer: WebGPURenderer
+}
+
+/**
+ * WebGPU-specific RootState with narrowed renderer type.
+ * Automatically used when importing from `@react-three/fiber/webgpu`.
+ *
+ * @example
+ * ```tsx
+ * import { useThree } from '@react-three/fiber/webgpu'
+ *
+ * function MyComponent() {
+ *   const { renderer } = useThree()
+ *   // renderer is typed as WebGPURenderer
+ *   renderer.compute(computePass)
+ * }
+ * ```
+ */
+// `gl` is not narrowed: it keeps the base type (WebGLRenderer, for code written against it), so a
+// WebGPURootState stays assignable to RootState and `useFrame((state: RootState) => ...)` still
+// compiles where the hooks are WebGPU-typed. At runtime it aliases `renderer`; use that instead.
+interface WebGPURootState extends Omit<RootState, 'renderer' | 'internal'> {
+  /** The WebGPU renderer instance */
+  renderer: WebGPURenderer
+  /** Internals with WebGPU renderer */
+  internal: WebGPUInternalState
+}
+
+/**
+ * @fileoverview WebGPU-narrowed hook and Canvas types, shared by the entries that render with WebGPU
+ *
+ * `@react-three/fiber` and `@react-three/fiber/webgpu` both render with WebGPURenderer. The core
+ * hooks are declared against the base RootState, whose `renderer` is the R3FRenderer union
+ * (WebGLRenderer included) so that libraries typed against it also compile for `/legacy` apps. On
+ * these entries that union is already resolved, so leaving it in place forced a cast for anything
+ * WebGPU-only:
+ *
+ *   const renderer = useThree((s) => s.renderer)
+ *   renderer.compute(node)   // Property 'compute' does not exist on type 'R3FRenderer'
+ *
+ * The entries re-export the hooks below instead. Types only: the values are the core
+ * implementations untouched, so there is no runtime cost and no second code path to keep in sync.
+ * See https://github.com/pmndrs/react-three-fiber/issues/3851
+ */
+
+/** `useThree` narrowed to WebGPU state — `state.renderer` is a `WebGPURenderer`. */
+type UseThreeWebGPU = <T = WebGPURootState>(selector?: (state: WebGPURootState) => T, equalityFn?: <U>(state: U, newState: U) => boolean) => T;
+/** `useFrame` narrowed to WebGPU state — the callback's `state.renderer` is a `WebGPURenderer`. */
+type UseFrameWebGPU = (callback?: FrameCallback<WebGPURootState>, priorityOrOptions?: number | UseFrameNextOptions) => FrameNextControls;
+declare const useThree: UseThreeWebGPU;
+declare const useFrame: UseFrameWebGPU;
+/** `useRenderTarget` narrowed to the target a WebGPU renderer produces. */
+declare const useRenderTarget: {
+    (options?: RenderTargetOptions): RenderTarget;
+    (size: number, options?: RenderTargetOptions): RenderTarget;
+    (width: number, height: number, options?: RenderTargetOptions): RenderTarget;
+};
+/** Canvas props on a WebGPU entry: `onCreated` receives `WebGPURootState`. */
+type WebGPUCanvasProps = Omit<CanvasProps, 'onCreated'> & {
+    /** Callback after the canvas has rendered (but not yet committed); `state.renderer` is a `WebGPURenderer` */
+    onCreated?: (state: WebGPURootState) => void;
+};
+
+export { useFrame as a, useRenderTarget as b, useThree as u };
+export type { UseThreeWebGPU as U, WebGPUCanvasProps as W, UseFrameWebGPU as c, WebGPURootState as d, WebGPUInternalState as e, WebGPUR3FRenderer as f, WebGPUProps as g, WebGPUDefaultProps as h, WebGPUShadowConfig as i };