fix(studio): publish keyframe cache refresh atomically

Author: miguel-heygen

packages/studio/src/hooks/gsapKeyframeCacheHelpers.test.ts

@@ -4,6 +4,7 @@ import { usePlayerStore, type KeyframeCacheEntry } from "../player/store/playerS
 import {
   clearKeyframeCacheForElement,
   clearKeyframeCacheForFile,
+  replaceKeyframeCacheForFile,
   updateKeyframeCacheFromParsed,
 } from "./gsapKeyframeCacheHelpers";
 
@@ -97,6 +98,61 @@ describe("clearKeyframeCacheForFile", () => {
   });
 });
 
+describe("replaceKeyframeCacheForFile", () => {
+  it("publishes complete keyframe and animation maps in one notification", () => {
+    const staleEntry = entry();
+    const otherEntry = entry();
+    const staleAnimation = animWithKeyframes("stale");
+    const freshAnimation = animWithKeyframes("fresh");
+    usePlayerStore.setState({
+      keyframeCache: new Map([
+        ["scene.html#stale", staleEntry],
+        ["index.html#stale", staleEntry],
+        ["stale", staleEntry],
+        ["other.html#other", otherEntry],
+        ["other", otherEntry],
+      ]),
+      gsapAnimations: new Map([
+        ["scene.html#stale", [staleAnimation]],
+        ["index.html#stale", [staleAnimation]],
+        ["stale", [staleAnimation]],
+        ["other.html#other", [staleAnimation]],
+        ["other", [staleAnimation]],
+      ]),
+    });
+    const snapshots: Array<{ cacheKeys: string[]; animationKeys: string[] }> = [];
+    const unsubscribe = usePlayerStore.subscribe((state) => {
+      snapshots.push({
+        cacheKeys: [...state.keyframeCache.keys()].sort(),
+        animationKeys: [...state.gsapAnimations.keys()].sort(),
+      });
+    });
+
+    replaceKeyframeCacheForFile(
+      "scene.html",
+      new Map([["fresh", entry()]]),
+      new Map([["fresh", [freshAnimation]]]),
+    );
+    unsubscribe();
+
+    expect(snapshots).toEqual([
+      {
+        cacheKeys: ["fresh", "index.html#fresh", "other", "other.html#other", "scene.html#fresh"],
+        animationKeys: [
+          "fresh",
+          "index.html#fresh",
+          "other",
+          "other.html#other",
+          "scene.html#fresh",
+        ],
+      },
+    ]);
+    expect(usePlayerStore.getState().gsapAnimations.get("scene.html#fresh")).toEqual([
+      freshAnimation,
+    ]);
+  });
+});
+
 describe("updateKeyframeCacheFromParsed", () => {
   it("records colliding animation targets with their own tween percentages", () => {
     const animation = (

packages/studio/src/hooks/gsapKeyframeCacheHelpers.ts

@@ -119,6 +119,17 @@ export function clearKeyframeCacheForElement(sourceFile: string, elementId: stri
  */
 export function clearKeyframeCacheForFile(sourceFile: string): void {
   const { keyframeCache, gsapAnimations } = usePlayerStore.getState();
+  const ids = cachedElementIdsForFile(sourceFile, keyframeCache, gsapAnimations);
+  for (const id of ids) {
+    clearKeyframeCacheForElement(sourceFile, id);
+  }
+}
+
+function cachedElementIdsForFile(
+  sourceFile: string,
+  keyframeCache: ReadonlyMap<string, KeyframeCacheEntry>,
+  gsapAnimations: ReadonlyMap<string, GsapAnimation[]>,
+): Set<string> {
   const sfPrefix = `${sourceFile}#`;
   const fallbackPrefix = "index.html#";
   const ids = new Set<string>();
@@ -129,9 +140,7 @@ export function clearKeyframeCacheForFile(sourceFile: string): void {
     const hashIdx = key.indexOf("#");
     if (hashIdx !== -1) ids.add(key.slice(hashIdx + 1));
   }
-  for (const id of ids) {
-    clearKeyframeCacheForElement(sourceFile, id);
-  }
+  return ids;
 }
 
 function elementCacheKeys(sourceFile: string, elementId: string): string[] {
@@ -140,6 +149,35 @@ function elementCacheKeys(sourceFile: string, elementId: string): string[] {
     : [`${sourceFile}#${elementId}`, `index.html#${elementId}`, elementId];
 }
 
+/** Replace one file's complete cache snapshot with one atomic store publish. */
+export function replaceKeyframeCacheForFile(
+  sourceFile: string,
+  entries: ReadonlyMap<string, KeyframeCacheEntry>,
+  animationsByElement: ReadonlyMap<string, GsapAnimation[]>,
+): void {
+  const { keyframeCache, gsapAnimations } = usePlayerStore.getState();
+  const nextKeyframeCache = new Map(keyframeCache);
+  const nextGsapAnimations = new Map(gsapAnimations);
+  for (const id of cachedElementIdsForFile(sourceFile, keyframeCache, gsapAnimations)) {
+    for (const key of elementCacheKeys(sourceFile, id)) {
+      nextKeyframeCache.delete(key);
+      nextGsapAnimations.delete(key);
+    }
+  }
+  for (const [id, entry] of entries) {
+    const animations = animationsByElement.get(id);
+    for (const key of elementCacheKeys(sourceFile, id)) {
+      nextKeyframeCache.set(key, entry);
+      if (animations) nextGsapAnimations.set(key, animations);
+      else nextGsapAnimations.delete(key);
+    }
+  }
+  usePlayerStore.setState({
+    keyframeCache: nextKeyframeCache,
+    gsapAnimations: nextGsapAnimations,
+  });
+}
+
 export function writeGsapAnimationsForElement(
   sourceFile: string,
   elementId: string,

packages/studio/src/hooks/useGsapTweenCache.ts

@@ -5,7 +5,7 @@ import { usePlayerStore } from "../player/store/playerStore";
 import { readRuntimeKeyframes, scanAllRuntimeKeyframes } from "./gsapRuntimeBridge";
 import {
   clearKeyframeCacheForElement,
-  clearKeyframeCacheForFile,
+  replaceKeyframeCacheForFile,
   writeGsapAnimationsForElement,
 } from "./gsapKeyframeCacheHelpers";
 import { toAbsoluteTime } from "./gsapShared";
@@ -466,8 +466,6 @@ export function usePopulateKeyframeCacheForFile(
     // fallow-ignore-next-line complexity
     fetchParsedAnimations(projectId, sf).then((parsed) => {
       if (!parsed) return;
-      const { setKeyframeCache } = usePlayerStore.getState();
-      clearKeyframeCacheForFile(sf);
       const { elements, domClipChildren } = usePlayerStore.getState();
       const doc = iframeRef?.current?.contentDocument;
       const mergedByElement = new Map<string, GsapKeyframesData>();
@@ -522,12 +520,7 @@ export function usePopulateKeyframeCacheForFile(
           }
         }
       }
-      for (const [id, kfData] of mergedByElement) {
-        setKeyframeCache(`${sf}#${id}`, kfData);
-        setKeyframeCache(id, kfData);
-        if (sf !== "index.html") setKeyframeCache(`index.html#${id}`, kfData);
-        writeGsapAnimationsForElement(sf, id, sourceByElement.get(id));
-      }
+      replaceKeyframeCacheForFile(sf, mergedByElement, sourceByElement);
       astFetchDoneRef.current = fetchKey;
     });
     // elementCount is in the deps because new timeline elements (e.g. after a