perf(studio): keep only script shapes and refresh them on reuse

Author: miguel-heygen

packages/studio/src/utils/gsapLiveRetime.cache.test.ts

@@ -1,14 +1,11 @@
-import { describe, expect, it, vi } from "vitest";
+import { beforeEach, describe, expect, it, vi } from "vitest";
 
-const reads = vi.hoisted(() => ({ parse: [] as string[], shape: [] as string[] }));
+const reads = vi.hoisted(() => ({ shape: [] as string[] }));
 
 vi.mock("@hyperframes/parsers/gsap-parser-acorn", async (importOriginal) => {
   const real = await importOriginal<typeof import("@hyperframes/parsers/gsap-parser-acorn")>();
   return {
     ...real,
-    parseGsapScriptAcorn: (code: string) => (
-      reads.parse.push(code), real.parseGsapScriptAcorn(code)
-    ),
     scriptShape: (code: string, mask?: boolean) => (
       reads.shape.push(code), real.scriptShape(code, mask)
     ),
@@ -21,11 +18,22 @@ const at = (start: number) =>
   `var tl = gsap.timeline({ paused: true });\ntl.to("#a", { x: 1, duration: 1 }, ${start});\nwindow.__timelines["t"] = tl;`;
 
 describe("planLiveRetime", () => {
-  it("reads each script once across two drags in a row", () => {
+  beforeEach(() => {
+    reads.shape.length = 0;
+  });
+
+  it("reads each script's shape once across two drags in a row", () => {
     expect(planLiveRetime(at(0), at(1)).kind).toBe("retime");
     expect(planLiveRetime(at(1), at(2)).kind).toBe("retime");
 
-    expect(reads.parse).toEqual([at(0), at(1), at(2)]);
     expect(reads.shape).toEqual([at(0), at(1), at(2)]);
   });
+
+  it("keeps the live script's shape while saves land before the preview catches up", () => {
+    planLiveRetime(at(10), at(11));
+    planLiveRetime(at(10), at(12));
+    planLiveRetime(at(10), at(13));
+
+    expect(reads.shape).toEqual([at(10), at(11), at(12), at(13)]);
+  });
 });

packages/studio/src/utils/gsapLiveRetime.ts

@@ -50,38 +50,26 @@ const placedAlone = (animation: GsapAnimation) =>
 const lengthOf = (animation: GsapAnimation) =>
   animation.method === "set" ? 0 : animation.durationUnresolved ? undefined : animation.duration;
 
-interface ReadScript {
-  shape: string | null;
-  animations?: GsapAnimation[];
-}
-
-/** The last two scripts read, by text: a repeat drag starts from the script the last one saved. */
-const readScripts = new Map<string, ReadScript>();
+/** The last two script shapes, by text: a repeat drag starts from the script the last one saved. */
+const shapes = new Map<string, string | null>();
 
-function readScript(code: string): ReadScript {
-  let read = readScripts.get(code);
-  if (!read) {
-    read = { shape: scriptShape(code, true) };
-    if (readScripts.size >= 2) readScripts.delete(readScripts.keys().next().value!);
-    readScripts.set(code, read);
-  }
-  return read;
+function shapeOf(code: string): string | null {
+  const shape = shapes.has(code) ? (shapes.get(code) as string | null) : scriptShape(code, true);
+  shapes.delete(code);
+  shapes.set(code, shape);
+  if (shapes.size > 2) shapes.delete(shapes.keys().next().value!);
+  return shape;
 }
 
-const timedAnimations = (code: string): GsapAnimation[] => {
-  const read = readScript(code);
-  return (read.animations ??= parseGsapScriptAcorn(code).animations.filter(onTimeline));
-};
-
 /** Decides, from the two scripts alone, whether a saved edit moved tweens and nothing else. */
 export function planLiveRetime(before: string, after: string): LiveRetimePlan {
   // The preview runs the script re-printed by the bundler; a timing edit rewrites numbers only.
-  const { shape } = readScript(before);
-  if (shape === null || shape !== readScript(after).shape) return RERUN;
+  const shape = shapeOf(before);
+  if (shape === null || shape !== shapeOf(after)) return RERUN;
   const keys = timelineKeys(after);
   if (keys.length !== 1 || timelineKeys(before).join() !== keys.join()) return RERUN;
-  const was = timedAnimations(before);
-  const now = timedAnimations(after);
+  const was = parseGsapScriptAcorn(before).animations.filter(onTimeline);
+  const now = parseGsapScriptAcorn(after).animations.filter(onTimeline);
   if (was.length !== now.length) return RERUN;
   const tweens: TweenTiming[] = [];
   for (const [index, next] of now.entries()) {