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

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { registerRootExtension, getTextureView, useStore, useThree, setRenderOverride } from '@react-three/fiber/extension';
+import { setRenderOverride, registerRootExtension, getTextureView, useStore, useThree } from '@react-three/fiber/extension';
 import { uniform, pass } from 'three/tsl';
 import * as THREE from 'three/webgpu';
 import { Color } from 'three/webgpu';
@@ -58,6 +58,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);
@@ -256,6 +263,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 });
+  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: {} });
+        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() {
@@ -284,6 +388,7 @@ function followPrimary(store, primary) {
   following.set(store, primary.subscribe(sync));
 }
 function dispose(store) {
+  releaseAllOwners(store);
   untrackPrimary(store);
   following.get(store)?.();
   following.delete(store);
@@ -689,8 +794,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),
@@ -708,13 +814,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) {
@@ -831,13 +931,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) {
@@ -992,13 +1086,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) {
@@ -1062,13 +1150,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,
@@ -1082,120 +1164,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 = useStore();
+  const primary = usePrimaryStore();
+  const view = useMemo(() => createResourceView(primary, store), [primary, store]);
   const { scene, camera, renderer, isLegacy } = useThree();
+  const hmrVersion = usePrimaryThree((s) => s._hmrVersion);
+  const isOwner = mainCB !== void 0 || setupCB !== void 0;
   const callbacksRanRef = useRef(false);
-  const scenePassCacheRef = useRef(null);
   const forceScenePassRebuildRef = useRef(false);
   const mainCBRef = useRef(mainCB);
   const setupCBRef = useRef(setupCB);
+  const persistRef = useRef(options?.persist ?? false);
   mainCBRef.current = mainCB;
   setupCBRef.current = setupCB;
+  persistRef.current = options?.persist ?? false;
   const [rebuildVersion, setRebuildVersion] = useState(0);
-  useEffect(() => {
+  const rerun = useCallback((freshScenePass) => {
     callbacksRanRef.current = false;
-    forceScenePassRebuildRef.current = true;
+    if (freshScenePass) forceScenePassRebuildRef.current = true;
+    setRebuildVersion((v) => v + 1);
   }, []);
+  const ownerRef = useRef(null);
+  const target = useCallback(() => (isOwner ? ownerRef.current : activeOwner(store)) ?? null, [isOwner, store]);
   const clearPasses = useCallback(() => {
-    store.setState({ passes: {} });
-  }, [store]);
+    const owner = target();
+    if (!owner) return;
+    owner.passes = {};
+    if (activeOwner(store) === owner) store.setState({ passes: {} });
+  }, [store, target]);
   const reset = useCallback(() => {
-    store.setState({
-      renderPipeline: null,
-      passes: {}
-    });
-    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 = useCallback(() => {
-    callbacksRanRef.current = false;
-    forceScenePassRebuildRef.current = true;
-    setRebuildVersion((v) => v + 1);
-  }, []);
+    if (isOwner) rerun(true);
+    else activeOwner(store)?.rebuild();
+  }, [isOwner, rerun, store]);
+  const hmrVersionRef = useRef(hmrVersion);
+  useEffect(() => {
+    if (hmrVersionRef.current === hmrVersion) return;
+    hmrVersionRef.current = hmrVersion;
+    if (isOwner) rerun(false);
+  }, [hmrVersion, isOwner, rerun]);
+  const committedReads = useRef(null);
+  const readsVersion = useRef(0);
+  const getReadsVersion = () => {
+    const tracker = committedReads.current;
+    if (tracker && !tracker.stale && isTrackerStale(tracker, view)) readsVersion.current++;
+    return readsVersion.current;
+  };
+  const subscribe = useCallback(
+    (onChange) => {
+      const unsubscribe = primary.subscribe(onChange);
+      if (store === primary) return unsubscribe;
+      const unsubscribeLocal = store.subscribe(onChange);
+      return () => {
+        unsubscribe();
+        unsubscribeLocal();
+      };
+    },
+    [primary, store]
+  );
+  const resourceVersion = useSyncExternalStore(subscribe, getReadsVersion, getReadsVersion);
+  const lastResourceVersion = useRef(resourceVersion);
   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.RenderPipeline(renderer);
+      if (!owner.pipeline || owner.pipeline.renderer !== renderer) {
+        disposeOwnerResources(owner);
+        owner.pipeline = new THREE.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 = 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 });
-      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 = useThree((s) => s.passes) ?? NO_PASSES;
   const renderPipeline = useThree((s) => s.renderPipeline) ?? null;
   const actions = { passes, clearPasses, reset, rebuild };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/tsl",
-  "version": "10.0.0-canary.87166dc",
+  "version": "10.0.0-canary.88b1ca7",
   "description": "TSL resource hooks for react-three-fiber: uniforms, nodes, buffers, GPU storage and render pipelines on WebGPU",
   "keywords": [
     "react",
@@ -56,7 +56,7 @@
     "@types/three": "^0.185.0",
     "@webgpu/types": "^0.1.64",
     "three": ">=0.185.0",
-    "@react-three/fiber": "10.0.0-canary.87166dc"
+    "@react-three/fiber": "10.0.0-canary.88b1ca7"
   },
   "scripts": {
     "build": "unbuild",

package/readme.md

@@ -3,7 +3,7 @@
 TSL resource hooks for [react-three-fiber](https://github.com/pmndrs/react-three-fiber) on WebGPU: shared uniforms, nodes, buffers, GPU storage and render pipelines.
 
 ```bash
-npm install @react-three/tsl
+npm install @react-three/tsl@alpha
 ```
 
 ```tsx
@@ -32,7 +32,7 @@ function Driver() {
 }
 
 export const App = () => (
-  <Canvas renderer>
+  <Canvas>
     <Wobble />
     <Driver />
   </Canvas>
@@ -48,6 +48,6 @@ export const App = () => (
 
 Resources belong to the renderer: a `<Canvas primary>`, the canvases sharing its renderer (every other WebGPU canvas, or `share="id"`) and every portal inside them share one set. They live on the primary canvas's `RootState` (`state.uniforms`, `state.nodes`, `state.buffers`, `state.gpuStorage`); secondaries hold the same objects and portals inherit them from their parent (a portal's scene and camera stay its own), so `state.uniforms` reads the same everywhere.
 
-Works under any Canvas that runs the WebGPU renderer: `@react-three/fiber` with the `renderer` prop, or `@react-three/fiber/webgpu`. It reaches fiber only through the three-free `@react-three/fiber/extension` entry, so it adds no renderer and no second copy of fiber to your bundle.
+Works under any Canvas that runs the WebGPU renderer: `@react-three/fiber` or `@react-three/fiber/webgpu` (not `/legacy`). It reaches fiber only through the three-free `@react-three/fiber/extension` entry, so it adds no renderer and no second copy of fiber to your bundle.
 
 Full documentation: [WebGPU & TSL](https://github.com/pmndrs/react-three-fiber/tree/v10/docs/webgpu).