@react-three/tsl 10.0.0-canary.87166dc → 10.0.0-canary.88b1ca7

package/dist/index.cjs

@@ -73,6 +73,13 @@ function withStagedOverlay(store, kind, committed) {
   }
   return view;
 }
+function readWithStaged(store, kind, committed, scope, isLeaf) {
+  if (scope === void 0) return withStagedOverlay(store, kind, committed);
+  const scopeData = committed[scope];
+  const current = scopeData && typeof scopeData === "object" && !isLeaf(scopeData) ? scopeData : {};
+  const staged = scope === ROOT_SCOPE ? void 0 : peekStaged(store, kind, scope);
+  return staged ? { ...current, ...staged } : current;
+}
 function flushStagedScope(store, kind, scopeKey, isLeaf) {
   const registry = getKindRegistry(store, kind);
   const staged = registry.staged.get(scopeKey);
@@ -271,6 +278,103 @@ function configureTSL(next) {
   for (const store of primaries) applyConfig(store, config);
 }
 
+const owners = /* @__PURE__ */ new WeakMap();
+const warned$1 = /* @__PURE__ */ new WeakSet();
+const sweeps = /* @__PURE__ */ new WeakMap();
+function createOwner(store, rebuild) {
+  return { store, pipeline: null, scenePass: null, passes: {}, mounted: false, releaseTimer: null, rebuild };
+}
+function disposeOwnerResources(owner) {
+  owner.scenePass?.node.dispose();
+  owner.pipeline?.dispose();
+  owner.scenePass = null;
+  owner.pipeline = null;
+  owner.passes = {};
+}
+function activeOwner(store) {
+  return owners.get(store)?.at(-1);
+}
+function renderThroughPipeline(store) {
+  return () => {
+    const pipeline = store.getState().renderPipeline;
+    if (pipeline?.render) pipeline.render();
+  };
+}
+function claimOwnership(owner) {
+  if (owner.releaseTimer !== null) clearTimeout(owner.releaseTimer);
+  owner.releaseTimer = null;
+  owner.mounted = true;
+  let list = owners.get(owner.store);
+  if (!list) owners.set(owner.store, list = []);
+  if (list.includes(owner)) return;
+  if (list.some((other) => other.mounted) && !warned$1.has(owner.store)) {
+    warned$1.add(owner.store);
+    if (typeof process === "undefined" || process.env.NODE_ENV !== "production") {
+      console.warn(
+        "[useRenderPipeline] More than one mounted component configures this canvas's render pipeline. The most recently mounted one renders; the others take over again when it unmounts."
+      );
+    }
+  }
+  list.push(owner);
+  scheduleSweep(owner.store);
+}
+function scheduleSweep(store) {
+  if (sweeps.has(store)) return;
+  sweeps.set(
+    store,
+    setTimeout(() => {
+      sweeps.delete(store);
+      const active = activeOwner(store);
+      for (const owner of [...owners.get(store) ?? []]) {
+        if (owner !== active && !owner.mounted && owner.releaseTimer === null) releaseOwner(owner);
+      }
+    })
+  );
+}
+function publishOwner(owner) {
+  if (activeOwner(owner.store) !== owner || !owner.pipeline) return;
+  owner.store.setState({ renderPipeline: owner.pipeline, passes: owner.passes });
+  extension.setRenderOverride(owner.store, renderThroughPipeline(owner.store));
+}
+function scheduleRelease(owner) {
+  owner.mounted = false;
+  if (owner.releaseTimer !== null) return;
+  owner.releaseTimer = setTimeout(() => releaseOwner(owner));
+}
+function releaseOwner(owner) {
+  if (owner.releaseTimer !== null) clearTimeout(owner.releaseTimer);
+  owner.releaseTimer = null;
+  const { store } = owner;
+  const list = owners.get(store);
+  const index = list?.indexOf(owner) ?? -1;
+  if (list && index !== -1) {
+    const wasActive = index === list.length - 1;
+    list.splice(index, 1);
+    if (wasActive) {
+      const next = activeOwner(store);
+      if (next) {
+        publishOwner(next);
+      } else {
+        store.setState({ renderPipeline: null, passes: {} });
+        extension.setRenderOverride(store, null);
+      }
+    }
+  }
+  disposeOwnerResources(owner);
+}
+function releaseAllOwners(store) {
+  clearTimeout(sweeps.get(store));
+  sweeps.delete(store);
+  const list = owners.get(store);
+  if (!list) return;
+  owners.delete(store);
+  for (const owner of list) {
+    if (owner.releaseTimer !== null) clearTimeout(owner.releaseTimer);
+    owner.releaseTimer = null;
+    disposeOwnerResources(owner);
+  }
+}
+
 const SHARED_KEYS = ["uniforms", "nodes", "buffers", "gpuStorage", "_hmrVersion"];
 const following = /* @__PURE__ */ new WeakMap();
 function createResourceState() {
@@ -299,6 +403,7 @@ function followPrimary(store, primary) {
   following.set(store, primary.subscribe(sync));
 }
 function dispose(store) {
+  releaseAllOwners(store);
   untrackPrimary(store);
   following.get(store)?.();
   following.delete(store);
@@ -704,8 +809,9 @@ function useUniforms(creatorOrScope, scope) {
     input: memoizedInput,
     create: () => {
       if (isReader) return {};
-      if (typeof processedInput.candidates !== "object" || processedInput.candidates === null)
+      if (typeof processedInput.candidates !== "object" || processedInput.candidates === null) {
         throw new Error("Invalid uniform input");
+      }
       return processedInput.candidates;
     },
     prepare: (name, candidate) => createUniform(name, candidate, scope),
@@ -723,13 +829,7 @@ function useUniforms(creatorOrScope, scope) {
       if (!equals) existing.value = newVal;
     }
   });
-  let uniforms = created;
-  if (memoizedInput === void 0) {
-    uniforms = storeUniforms;
-  } else if (typeof memoizedInput === "string") {
-    const scopeData = storeUniforms[memoizedInput];
-    uniforms = scopeData && !isUniformNode(scopeData) ? scopeData : {};
-  }
+  const uniforms = isReader ? readWithStaged(store, "uniforms", storeUniforms, memoizedInput, isUniformNode) : created;
   return { ...uniforms, removeUniforms, clearUniforms, rebuildUniforms };
 }
 function rebuildAllUniforms(store, scope) {
@@ -846,13 +946,7 @@ function useNodes(creatorOrScope, scope) {
       return node;
     }
   });
-  let nodes = created;
-  if (creatorOrScope === void 0) {
-    nodes = storeNodes;
-  } else if (typeof creatorOrScope === "string") {
-    const scopeData = storeNodes[creatorOrScope];
-    nodes = scopeData && !isTSLNode(scopeData) ? scopeData : {};
-  }
+  const nodes = isReader ? readWithStaged(store, "nodes", storeNodes, creatorOrScope, isTSLNode) : created;
   return { ...nodes, removeNodes, clearNodes, rebuildNodes };
 }
 function rebuildAllNodes(store, scope) {
@@ -1007,13 +1101,7 @@ function useBuffers(creatorOrScope, scope) {
       return buffer;
     }
   });
-  let buffers = created;
-  if (creatorOrScope === void 0) {
-    buffers = storeBuffers;
-  } else if (typeof creatorOrScope === "string") {
-    const scopeData = storeBuffers[creatorOrScope];
-    buffers = scopeData && !isBufferLike(scopeData) ? scopeData : {};
-  }
+  const buffers = isReader ? readWithStaged(store, "buffers", storeBuffers, creatorOrScope, isBufferLike) : created;
   return { ...buffers, removeBuffers, clearBuffers, rebuildBuffers, disposeBuffers };
 }
 function rebuildAllBuffers(store, scope) {
@@ -1077,13 +1165,7 @@ function useGPUStorage(creatorOrScope, scope) {
       return storage;
     }
   });
-  let gpuStorage = created;
-  if (creatorOrScope === void 0) {
-    gpuStorage = storeStorage;
-  } else if (typeof creatorOrScope === "string") {
-    const scopeData = storeStorage[creatorOrScope];
-    gpuStorage = scopeData && !isStorageLike(scopeData) ? scopeData : {};
-  }
+  const gpuStorage = isReader ? readWithStaged(store, "gpuStorage", storeStorage, creatorOrScope, isStorageLike) : created;
   return {
     ...gpuStorage,
     removeStorage,
@@ -1097,120 +1179,164 @@ function rebuildAllStorage(store, scope) {
 }
 
 const NO_PASSES = Object.freeze({});
-function renderThroughPipeline(store) {
-  return () => {
-    const pipeline = store.getState().renderPipeline;
-    if (pipeline?.render) pipeline.render();
-  };
-}
-function useRenderPipeline(mainCB, setupCB) {
+function useRenderPipeline(mainCB, setupCB, options) {
   const store = extension.useStore();
+  const primary = usePrimaryStore();
+  const view = React.useMemo(() => createResourceView(primary, store), [primary, store]);
   const { scene, camera, renderer, isLegacy } = extension.useThree();
+  const hmrVersion = usePrimaryThree((s) => s._hmrVersion);
+  const isOwner = mainCB !== void 0 || setupCB !== void 0;
   const callbacksRanRef = React.useRef(false);
-  const scenePassCacheRef = React.useRef(null);
   const forceScenePassRebuildRef = React.useRef(false);
   const mainCBRef = React.useRef(mainCB);
   const setupCBRef = React.useRef(setupCB);
+  const persistRef = React.useRef(options?.persist ?? false);
   mainCBRef.current = mainCB;
   setupCBRef.current = setupCB;
+  persistRef.current = options?.persist ?? false;
   const [rebuildVersion, setRebuildVersion] = React.useState(0);
-  React.useEffect(() => {
+  const rerun = React.useCallback((freshScenePass) => {
     callbacksRanRef.current = false;
-    forceScenePassRebuildRef.current = true;
+    if (freshScenePass) forceScenePassRebuildRef.current = true;
+    setRebuildVersion((v) => v + 1);
   }, []);
+  const ownerRef = React.useRef(null);
+  const target = React.useCallback(() => (isOwner ? ownerRef.current : activeOwner(store)) ?? null, [isOwner, store]);
   const clearPasses = React.useCallback(() => {
-    store.setState({ passes: {} });
-  }, [store]);
+    const owner = target();
+    if (!owner) return;
+    owner.passes = {};
+    if (activeOwner(store) === owner) store.setState({ passes: {} });
+  }, [store, target]);
   const reset = React.useCallback(() => {
-    store.setState({
-      renderPipeline: null,
-      passes: {}
-    });
-    extension.setRenderOverride(store, null);
-    scenePassCacheRef.current?.scenePass.dispose();
-    callbacksRanRef.current = false;
-    scenePassCacheRef.current = null;
-    forceScenePassRebuildRef.current = false;
-  }, [store]);
+    const owner = target();
+    if (!owner) return;
+    releaseOwner(owner);
+    if (owner === ownerRef.current) committedReads.current = null;
+  }, [target]);
   const rebuild = React.useCallback(() => {
-    callbacksRanRef.current = false;
-    forceScenePassRebuildRef.current = true;
-    setRebuildVersion((v) => v + 1);
-  }, []);
+    if (isOwner) rerun(true);
+    else activeOwner(store)?.rebuild();
+  }, [isOwner, rerun, store]);
+  const hmrVersionRef = React.useRef(hmrVersion);
+  React.useEffect(() => {
+    if (hmrVersionRef.current === hmrVersion) return;
+    hmrVersionRef.current = hmrVersion;
+    if (isOwner) rerun(false);
+  }, [hmrVersion, isOwner, rerun]);
+  const committedReads = React.useRef(null);
+  const readsVersion = React.useRef(0);
+  const getReadsVersion = () => {
+    const tracker = committedReads.current;
+    if (tracker && !tracker.stale && isTrackerStale(tracker, view)) readsVersion.current++;
+    return readsVersion.current;
+  };
+  const subscribe = React.useCallback(
+    (onChange) => {
+      const unsubscribe = primary.subscribe(onChange);
+      if (store === primary) return unsubscribe;
+      const unsubscribeLocal = store.subscribe(onChange);
+      return () => {
+        unsubscribe();
+        unsubscribeLocal();
+      };
+    },
+    [primary, store]
+  );
+  const resourceVersion = React.useSyncExternalStore(subscribe, getReadsVersion, getReadsVersion);
+  const lastResourceVersion = React.useRef(resourceVersion);
   React.useLayoutEffect(() => {
     if (isLegacy) {
-      throw new Error("useRenderPipeline is only available with WebGPU renderer. Set renderer prop on Canvas.");
+      throw new Error(
+        "useRenderPipeline needs WebGPU: import Canvas from @react-three/fiber, not @react-three/fiber/legacy."
+      );
     }
+    if (!isOwner) return;
     if (!renderer || !scene || !camera) return;
     if (!("isWebGPURenderer" in renderer)) {
       throw new Error("useRenderPipeline: renderer is not a WebGPURenderer but isLegacy is false.");
     }
-    const state = store.getState();
-    const set = store.setState;
+    let owner = ownerRef.current;
+    if (owner && owner.store !== store) {
+      releaseOwner(owner);
+      owner = null;
+    }
+    if (!owner) owner = ownerRef.current = createOwner(store, () => rerun(true));
+    claimOwnership(owner);
+    const currentOwner = owner;
     try {
-      let pipeline = state.renderPipeline ?? null;
-      let currentPasses = { ...state.passes };
       let justCreatedPipeline = false;
-      if (!pipeline) {
-        pipeline = new THREE__namespace.RenderPipeline(renderer);
+      if (!owner.pipeline || owner.pipeline.renderer !== renderer) {
+        disposeOwnerResources(owner);
+        owner.pipeline = new THREE__namespace.RenderPipeline(renderer);
         justCreatedPipeline = true;
       }
-      const cacheValid = !forceScenePassRebuildRef.current && scenePassCacheRef.current && scenePassCacheRef.current.sceneUuid === scene.uuid && scenePassCacheRef.current.cameraUuid === camera.uuid;
+      const pipeline = owner.pipeline;
+      const cached = owner.scenePass;
+      const cacheValid = !forceScenePassRebuildRef.current && cached !== null && cached.sceneUuid === scene.uuid && cached.cameraUuid === camera.uuid;
       let outgoingScenePass = null;
       let scenePass;
-      if (cacheValid) {
-        scenePass = scenePassCacheRef.current.scenePass;
+      if (cacheValid && cached) {
+        scenePass = cached.node;
       } else {
-        outgoingScenePass = scenePassCacheRef.current?.scenePass ?? null;
+        outgoingScenePass = cached?.node ?? null;
         scenePass = tsl.pass(scene, camera);
-        scenePassCacheRef.current = { sceneUuid: scene.uuid, cameraUuid: camera.uuid, scenePass };
+        owner.scenePass = { sceneUuid: scene.uuid, cameraUuid: camera.uuid, node: scenePass };
         forceScenePassRebuildRef.current = false;
       }
-      currentPasses.scenePass = scenePass;
       let outputNodeChanged = false;
       if (!pipeline.outputNode || justCreatedPipeline || pipeline.outputNode === outgoingScenePass) {
         pipeline.outputNode = scenePass;
         outputNodeChanged = true;
       }
-      set({ renderPipeline: pipeline, passes: currentPasses });
-      extension.setRenderOverride(store, renderThroughPipeline(store));
-      const shouldRunCallbacks = justCreatedPipeline || !callbacksRanRef.current || !cacheValid;
+      const readsChanged = lastResourceVersion.current !== resourceVersion;
+      lastResourceVersion.current = resourceVersion;
+      const shouldRunCallbacks = justCreatedPipeline || !callbacksRanRef.current || !cacheValid || readsChanged;
       if (shouldRunCallbacks) {
-        if (setupCBRef.current) {
-          const freshState = Object.assign({}, store.getState(), {
-            renderPipeline: pipeline,
-            passes: { ...currentPasses, scenePass },
-            renderer,
-            isLegacy: false
-          });
-          const setupResult = setupCBRef.current(freshState);
-          if (setupResult && typeof setupResult === "object") {
-            currentPasses = { ...currentPasses, ...setupResult };
-            set({ passes: currentPasses });
+        let currentPasses = { scenePass };
+        owner.passes = currentPasses;
+        const tracker = createReadTracker("useRenderPipeline");
+        const callbackState = () => Object.assign(
+          createLazyCreatorState(store.getState(), primary, {
+            reads: { observe: tracker.observe, nested: true },
+            view
+          }),
+          { renderPipeline: pipeline, passes: { ...currentPasses, scenePass }, renderer, isLegacy: false }
+        );
+        try {
+          if (setupCBRef.current) {
+            const setupResult = setupCBRef.current(callbackState());
+            if (setupResult && typeof setupResult === "object") {
+              currentPasses = { ...currentPasses, ...setupResult };
+              owner.passes = currentPasses;
+            }
           }
-        }
-        if (mainCBRef.current) {
-          const freshState = Object.assign({}, store.getState(), {
-            renderPipeline: pipeline,
-            passes: { ...currentPasses, scenePass },
-            renderer,
-            isLegacy: false
-          });
-          const mainResult = mainCBRef.current(freshState);
-          if (mainResult && typeof mainResult === "object") {
-            currentPasses = { ...currentPasses, ...mainResult };
-            set({ passes: currentPasses });
+          if (mainCBRef.current) {
+            const mainResult = mainCBRef.current(callbackState());
+            if (mainResult && typeof mainResult === "object") {
+              currentPasses = { ...currentPasses, ...mainResult };
+              owner.passes = currentPasses;
+            }
           }
+        } finally {
+          tracker.closed = true;
+          committedReads.current = tracker;
         }
         outputNodeChanged = true;
         callbacksRanRef.current = true;
       }
       if (outputNodeChanged) pipeline.needsUpdate = true;
+      publishOwner(owner);
       if (outgoingScenePass && outgoingScenePass !== scenePass) outgoingScenePass.dispose();
     } catch (error) {
+      publishOwner(owner);
       console.warn("[useRenderPipeline] Setup failed; the render pipeline was not configured:", error);
     }
-  }, [store, renderer, scene, camera, isLegacy, rebuildVersion]);
+    return () => {
+      if (persistRef.current) currentOwner.mounted = false;
+      else scheduleRelease(currentOwner);
+    };
+  }, [store, primary, view, renderer, scene, camera, isLegacy, isOwner, rebuildVersion, resourceVersion, rerun]);
   const passes = extension.useThree((s) => s.passes) ?? NO_PASSES;
   const renderPipeline = extension.useThree((s) => s.renderPipeline) ?? null;
   const actions = { passes, clearPasses, reset, rebuild };