@hyperframes/studio 0.8.75 → 0.8.77

package/src/hooks/useGsapTweenCache.element.test.tsx

@@ -0,0 +1,39 @@
+// @vitest-environment happy-dom
+import { act } from "react";
+import { expect, it, vi } from "vitest";
+import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
+import type { DomEditSelection } from "../components/editor/domEditingTypes";
+import { installReactActEnvironment, mountReactHarness } from "./domSelectionTestHarness";
+
+installReactActEnvironment();
+
+const dotTween = {
+  id: "dots",
+  targetSelector: ".dot",
+  method: "from",
+  position: 0,
+  properties: { opacity: 0 },
+} as GsapAnimation;
+vi.mock("./keyframeCacheAstLoad", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("./keyframeCacheAstLoad")>()),
+  fetchParsedAnimations: async () => ({ animations: [dotTween] }),
+}));
+const { useGsapAnimationsForElement } = await import("./useGsapTweenCache");
+
+it("attributes a class tween by the selected element, not an earlier same-id copy in a sub-composition", async () => {
+  document.body.innerHTML =
+    '<div data-composition-id="strip" data-composition-src="compositions/strip.html"><div id="card"></div></div>' +
+    '<div id="card" class="dot"></div>';
+  const element = document.querySelectorAll<HTMLElement>("#card")[1];
+  const selection = { id: "card", sourceFile: "index.html", element } as DomEditSelection;
+  const iframeRef = { current: { contentDocument: document } as unknown as HTMLIFrameElement };
+  let animations: GsapAnimation[] = [];
+  function Harness() {
+    animations = useGsapAnimationsForElement("p", "index.html", selection, 0, iframeRef).animations;
+    return null;
+  }
+  const root = mountReactHarness(<Harness />);
+  await act(async () => {});
+  expect(animations.map((animation) => animation.id)).toEqual(["dots"]);
+  act(() => root.unmount());
+});

package/src/hooks/useGsapTweenCache.ts

@@ -1,6 +1,8 @@
 import { useEffect, useMemo, useRef, useState, useCallback } from "react";
 import type { GsapAnimation, GsapKeyframesData } from "@hyperframes/core/gsap-parser";
 import { usePlayerStore } from "../player/store/playerStore";
+import type { DomEditSelection } from "../components/editor/domEditingTypes";
+import { findPreviewNode } from "../components/editor/domEditingElement";
 import { readRuntimeKeyframes, scanAllRuntimeKeyframes } from "./gsapRuntimeBridge";
 import {
   clearKeyframeCacheForElement,
@@ -73,7 +75,7 @@ export function getAnimationsForElement(
 export function useGsapAnimationsForElement(
   projectId: string | null,
   sourceFile: string,
-  target: GsapElementTarget | null,
+  target: DomEditSelection | null,
   version: number,
   iframeRef?: React.RefObject<HTMLIFrameElement | null>,
 ): {
@@ -157,24 +159,14 @@ export function useGsapAnimationsForElement(
     // gsap.from(".dot", {stagger})) attribute to every matching element, not
     // just the one whose exact selector equals the tween's. `version` re-runs
     // this after composition reloads.
-    let element: Element | null = null;
-    const doc = iframeRef?.current?.contentDocument;
-    if (doc) {
-      try {
-        element =
-          (targetId ? doc.getElementById(targetId) : null) ??
-          (targetSelector ? doc.querySelector(targetSelector) : null);
-      } catch {
-        element = null;
-      }
-    }
+    const element = target ? findPreviewNode(iframeRef?.current?.contentDocument, target) : null;
     return getAnimationsForElement(
       allAnimations,
       { id: targetId, selector: targetSelector },
       element,
     );
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [allAnimations, targetId, targetSelector, version, iframeRef]);
+  }, [allAnimations, target, version, iframeRef]);
 
   // fallow-ignore-next-line complexity
   const animations = useMemo(() => {

package/src/hooks/useLintModal.test.tsx

@@ -2,8 +2,9 @@
 
 import { act } from "react";
 import { createRoot, type Root } from "react-dom/client";
-import { afterEach, describe, expect, it, vi } from "vitest";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { useLintModal } from "./useLintModal";
+import { usePlayerStore } from "../player/store/playerStore";
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
@@ -15,6 +16,10 @@ function Probe() {
   return null;
 }
 
+beforeEach(() => {
+  usePlayerStore.setState({ timelineProjectId: "demo", previewBooted: true });
+});
+
 afterEach(() => {
   if (root) act(() => root?.unmount());
   root = null;
@@ -63,3 +68,31 @@ describe("useLintModal hasLintError", () => {
     expect(latest?.hasLintError).toBe(true);
   });
 });
+
+describe("useLintModal background lint", () => {
+  it("waits for the live preview to boot before asking the server to lint", async () => {
+    usePlayerStore.setState({ previewBooted: false });
+    const fetchStub = vi.fn(lintResponse([]));
+    vi.stubGlobal("fetch", fetchStub);
+    root = createRoot(document.createElement("div"));
+    await act(async () => root?.render(<Probe />));
+    expect(fetchStub).not.toHaveBeenCalled();
+
+    await act(async () => usePlayerStore.getState().markPreviewBooted());
+    expect(fetchStub).toHaveBeenCalledTimes(1);
+  });
+
+  it("never lints a project the user left before its preview booted", async () => {
+    usePlayerStore.setState({ previewBooted: false });
+    const fetchStub = vi.fn(lintResponse([]));
+    vi.stubGlobal("fetch", fetchStub);
+    root = createRoot(document.createElement("div"));
+    await act(async () => root?.render(<Probe />));
+
+    await act(async () => {
+      usePlayerStore.getState().beginTimelineSession("another-project");
+      usePlayerStore.getState().markPreviewBooted();
+    });
+    expect(fetchStub).not.toHaveBeenCalled();
+  });
+});

package/src/hooks/useLintModal.ts

@@ -2,6 +2,7 @@ import { buildProjectApiPath } from "../utils/projectRouting";
 import { useState, useCallback, useEffect, useRef, useMemo } from "react";
 import type { LintFinding } from "../components/LintModal";
 import { usePlayerStore } from "../player";
+import { isPreviewBooted, whenPreviewBooted } from "../player/store/playerStore";
 
 interface RawFinding {
   severity?: string;
@@ -23,6 +24,12 @@ function parseFinding(f: RawFinding): LintFinding & { elementId?: string; file?:
   };
 }
 
+async function fetchLintFindings(projectId: string) {
+  const res = await fetch(buildProjectApiPath(projectId, `/lint`));
+  const data = await res.json();
+  return ((data.findings ?? []) as RawFinding[]).map(parseFinding);
+}
+
 export function useLintModal(projectId: string | null, refreshKey?: number) {
   const [lintModal, setLintModal] = useState<LintFinding[] | null>(null);
   const [linting, setLinting] = useState(false);
@@ -31,33 +38,28 @@ export function useLintModal(projectId: string | null, refreshKey?: number) {
   >([]);
   const autoLintRanRef = useRef(false);
 
-  const runLint = useCallback(
-    async (opts?: { background?: boolean }) => {
-      if (!projectId) return;
-      if (!opts?.background) setLinting(true);
-      try {
-        const res = await fetch(buildProjectApiPath(projectId, `/lint`));
-        const data = await res.json();
-        const parsed = ((data.findings ?? []) as RawFinding[]).map(parseFinding);
-        if (opts?.background) {
-          setBackgroundFindings(parsed);
-        } else {
-          setLintModal(parsed);
-          setBackgroundFindings(parsed);
-        }
-      } catch (err) {
-        if (!opts?.background) {
-          const msg = err instanceof Error ? err.message : String(err);
-          setLintModal([{ severity: "error", message: `Failed to run lint: ${msg}` }]);
-        }
-      } finally {
-        if (!opts?.background) setLinting(false);
-      }
-    },
-    [projectId],
-  );
+  const runBackgroundLint = useCallback(async () => {
+    if (!projectId) return;
+    if (!isPreviewBooted(projectId) && !(await whenPreviewBooted(projectId))) return;
+    try {
+      setBackgroundFindings(await fetchLintFindings(projectId));
+    } catch {}
+  }, [projectId]);
 
-  const handleLint = useCallback(() => runLint(), [runLint]);
+  const handleLint = useCallback(async () => {
+    if (!projectId) return;
+    setLinting(true);
+    try {
+      const parsed = await fetchLintFindings(projectId);
+      setLintModal(parsed);
+      setBackgroundFindings(parsed);
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : String(err);
+      setLintModal([{ severity: "error", message: `Failed to run lint: ${msg}` }]);
+    } finally {
+      setLinting(false);
+    }
+  }, [projectId]);
 
   const prevProjectIdRef = useRef(projectId);
   useEffect(() => {
@@ -67,14 +69,14 @@ export function useLintModal(projectId: string | null, refreshKey?: number) {
     }
     if (!projectId || autoLintRanRef.current) return;
     autoLintRanRef.current = true;
-    void runLint({ background: true });
-  }, [projectId, runLint]);
+    void runBackgroundLint();
+  }, [projectId, runBackgroundLint]);
 
   useEffect(() => {
     if (!projectId || !refreshKey) return;
-    const timer = setTimeout(() => void runLint({ background: true }), 1000);
+    const timer = setTimeout(() => void runBackgroundLint(), 1000);
     return () => clearTimeout(timer);
-  }, [projectId, refreshKey, runLint]);
+  }, [projectId, refreshKey, runBackgroundLint]);
 
   const closeLintModal = useCallback(() => setLintModal(null), []);