npm - @hyperframes/studio - Versions diffs - 0.6.60 → 0.6.61 - Mend

@hyperframes/studio 0.6.60 → 0.6.61

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dist/assets/{index-DG5-N9Mj.js → index-BdDNthf4.js} +31 -30
package/dist/index.html +1 -1
package/package.json +4 -4
package/src/hooks/useDomEditSession.ts +1 -0
package/src/hooks/useGsapScriptCommits.ts +11 -1
package/src/utils/gsapSoftReload.test.ts +104 -0
package/src/utils/gsapSoftReload.ts +89 -0

package/dist/index.html CHANGED Viewed

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <title>HyperFrames Studio</title>
-    <script type="module" crossorigin src="/assets/index-DG5-N9Mj.js"></script>
+    <script type="module" crossorigin src="/assets/index-BdDNthf4.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-B5EnhVCT.css">
   </head>
   <body>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.6.60",
+  "version": "0.6.61",
   "description": "",
   "repository": {
     "type": "git",
@@ -31,8 +31,8 @@
     "@codemirror/view": "6.40.0",
     "@phosphor-icons/react": "^2.1.10",
     "mediabunny": "^1.45.3",
-    "@hyperframes/core": "0.6.60",
-    "@hyperframes/player": "0.6.60"
+    "@hyperframes/core": "0.6.61",
+    "@hyperframes/player": "0.6.61"
   },
   "devDependencies": {
     "@types/react": "19",
@@ -46,7 +46,7 @@
     "vite": "^6.4.2",
     "vitest": "^3.2.4",
     "zustand": "^5.0.0",
-    "@hyperframes/producer": "0.6.60"
+    "@hyperframes/producer": "0.6.61"
   },
   "peerDependencies": {
     "react": "19",

package/src/hooks/useDomEditSession.ts CHANGED Viewed

@@ -224,6 +224,7 @@ export function useDomEditSession({
   } = useGsapScriptCommits({
     projectIdRef,
     activeCompPath,
+    previewIframeRef,
     editHistory,
     domEditSaveTimestampRef,
     reloadPreview,

package/src/hooks/useGsapScriptCommits.ts CHANGED Viewed

@@ -2,6 +2,7 @@ import { useCallback, useEffect, useRef } from "react";
 import type { ParsedGsap } from "@hyperframes/core/gsap-parser";
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
 import type { EditHistoryKind } from "../utils/editHistory";
+import { applySoftReload } from "../utils/gsapSoftReload";
 const PROPERTY_DEFAULTS: Record<string, number> = {
   opacity: 1,
@@ -45,6 +46,7 @@ interface MutationResult {
   parsed?: ParsedGsap;
   before?: string;
   after?: string;
+  scriptText?: string;
 }
 async function mutateGsapScript(
@@ -71,6 +73,7 @@ async function mutateGsapScript(
 interface GsapScriptCommitsParams {
   projectIdRef: React.MutableRefObject<string | null>;
   activeCompPath: string | null;
+  previewIframeRef: React.RefObject<HTMLIFrameElement | null>;
   editHistory: {
     recordEdit: (entry: {
       label: string;
@@ -90,6 +93,7 @@ const DEBOUNCE_MS = 150;
 export function useGsapScriptCommits({
   projectIdRef,
   activeCompPath,
+  previewIframeRef,
   editHistory,
   domEditSaveTimestampRef,
   reloadPreview,
@@ -131,13 +135,18 @@ export function useGsapScriptCommits({
       onCacheInvalidate();
-      if (!options.softReload) {
+      if (options.softReload && result.scriptText) {
+        if (!applySoftReload(previewIframeRef.current, result.scriptText)) {
+          reloadPreview();
+        }
+      } else {
         reloadPreview();
       }
     },
     [
       projectIdRef,
       activeCompPath,
+      previewIframeRef,
       editHistory,
       domEditSaveTimestampRef,
       reloadPreview,
@@ -156,6 +165,7 @@ export function useGsapScriptCommits({
       {
         label: `Edit GSAP ${property}`,
         coalesceKey: `gsap:${animationId}:${property}`,
+        softReload: true,
       },
     );
   }, [commitMutation]);

package/src/utils/gsapSoftReload.test.ts ADDED Viewed

@@ -0,0 +1,104 @@
+// @vitest-environment happy-dom
+import { describe, it, expect, vi } from "vitest";
+import { applySoftReload } from "./gsapSoftReload";
+const SCRIPT_TEXT = `
+window.__timelines = window.__timelines || {};
+const tl = gsap.timeline({ paused: true });
+tl.to("#box", { opacity: 0.8 });
+window.__timelines["root"] = tl;
+`;
+function buildMockIframe(overrides: Record<string, unknown> = {}) {
+  const scriptEl = document.createElement("script");
+  scriptEl.textContent =
+    'const tl = gsap.timeline({ paused: true }); tl.to("#box", { opacity: 0.5 });';
+  const container = document.createElement("div");
+  container.appendChild(scriptEl);
+  const mockTimeline = { kill: vi.fn(), pause: vi.fn() };
+  const contentWindow = {
+    gsap: { timeline: vi.fn() },
+    __hfForceTimelineRebind: vi.fn(),
+    __timelines: { root: mockTimeline } as Record<string, typeof mockTimeline>,
+    __player: { getTime: () => 2.0, seek: vi.fn() },
+    __hfStudioManualEditsApply: vi.fn(),
+    __hfSuppressSceneMutations: undefined as undefined | (<T>(fn: () => T) => T),
+    ...overrides,
+  };
+  const contentDocument = {
+    querySelectorAll: (sel: string) => (sel === "script:not([src])" ? [scriptEl] : []),
+    createElement: (tag: string) => document.createElement(tag),
+    body: container,
+  };
+  return {
+    iframe: { contentWindow, contentDocument } as unknown as HTMLIFrameElement,
+    contentWindow,
+    mockTimeline,
+  };
+}
+describe("applySoftReload", () => {
+  it("returns false when iframe is null", () => {
+    expect(applySoftReload(null, SCRIPT_TEXT)).toBe(false);
+  });
+  it("returns false when scriptText is empty", () => {
+    const { iframe } = buildMockIframe();
+    expect(applySoftReload(iframe, "")).toBe(false);
+  });
+  it("returns false when gsap is not on iframe window", () => {
+    const { iframe } = buildMockIframe({ gsap: undefined });
+    expect(applySoftReload(iframe, SCRIPT_TEXT)).toBe(false);
+  });
+  it("returns false when __hfForceTimelineRebind is missing", () => {
+    const { iframe } = buildMockIframe({ __hfForceTimelineRebind: undefined });
+    expect(applySoftReload(iframe, SCRIPT_TEXT)).toBe(false);
+  });
+  it("kills existing timelines, rebinds, and re-seeks on success", () => {
+    const { iframe, contentWindow, mockTimeline } = buildMockIframe();
+    const result = applySoftReload(iframe, SCRIPT_TEXT);
+    expect(result).toBe(true);
+    expect(mockTimeline.kill).toHaveBeenCalled();
+    expect(contentWindow.__hfForceTimelineRebind).toHaveBeenCalled();
+    expect(contentWindow.__player.seek).toHaveBeenCalledWith(2.0);
+    expect(contentWindow.__hfStudioManualEditsApply).toHaveBeenCalled();
+  });
+  it("wraps execution in __hfSuppressSceneMutations when available", () => {
+    let suppressionCalled = false;
+    const { iframe } = buildMockIframe({
+      __hfSuppressSceneMutations: <T>(fn: () => T): T => {
+        suppressionCalled = true;
+        return fn();
+      },
+    });
+    const result = applySoftReload(iframe, SCRIPT_TEXT);
+    expect(result).toBe(true);
+    expect(suppressionCalled).toBe(true);
+  });
+  it("returns false when multiple GSAP scripts exist (ambiguous)", () => {
+    const script1 = document.createElement("script");
+    script1.textContent = "const tl = gsap.timeline({ paused: true });";
+    const script2 = document.createElement("script");
+    script2.textContent = 'tl.to("#other", { x: 10 });';
+    const container = document.createElement("div");
+    container.appendChild(script1);
+    container.appendChild(script2);
+    const { iframe } = buildMockIframe();
+    (iframe as unknown as { contentDocument: unknown }).contentDocument = {
+      querySelectorAll: (sel: string) => (sel === "script:not([src])" ? [script1, script2] : []),
+      createElement: (tag: string) => document.createElement(tag),
+      body: container,
+    };
+    expect(applySoftReload(iframe, SCRIPT_TEXT)).toBe(false);
+  });
+});

package/src/utils/gsapSoftReload.ts ADDED Viewed

@@ -0,0 +1,89 @@
+type IframeWindow = Window & {
+  __timelines?: Record<string, { kill?: () => void; pause?: () => void }>;
+  __player?: { getTime?: () => number; seek?: (t: number) => void };
+  __hfForceTimelineRebind?: () => void;
+  __hfSuppressSceneMutations?: <T>(fn: () => T) => T;
+  __hfStudioManualEditsApply?: () => void;
+  gsap?: { timeline?: (...args: unknown[]) => unknown };
+};
+function isGsapScript(text: string): boolean {
+  return (
+    text.includes("gsap.timeline") ||
+    text.includes("__timelines") ||
+    text.includes(".to(") ||
+    text.includes(".set(")
+  );
+}
+function findGsapScriptElements(doc: Document): HTMLScriptElement[] {
+  const results: HTMLScriptElement[] = [];
+  const scripts = doc.querySelectorAll<HTMLScriptElement>("script:not([src])");
+  for (const script of scripts) {
+    if (isGsapScript(script.textContent || "")) results.push(script);
+  }
+  return results;
+}
+/**
+ * Replace the GSAP script in the live iframe without reloading. This preserves
+ * the WebGL context and shader transition cache.
+ *
+ * Scoped to root-document GSAP scripts only — scripts inside `<template>`
+ * elements (sub-compositions) are not visible to `querySelectorAll` and will
+ * fall back to a full iframe reload.
+ *
+ * Returns false (triggering a full reload fallback) when:
+ * - The iframe or GSAP runtime isn't available
+ * - Multiple GSAP scripts are found (ambiguous which to replace)
+ * - No matching GSAP script element exists in the live DOM
+ */
+export function applySoftReload(iframe: HTMLIFrameElement | null, scriptText: string): boolean {
+  if (!iframe || !scriptText) return false;
+  const win = iframe.contentWindow as IframeWindow | null;
+  const doc = iframe.contentDocument;
+  if (!win || !doc) return false;
+  if (!win.gsap || !win.__hfForceTimelineRebind) return false;
+  const gsapScripts = findGsapScriptElements(doc);
+  if (gsapScripts.length !== 1) return false;
+  const oldScriptEl = gsapScripts[0]!;
+  const currentTime = win.__player?.getTime?.() ?? 0;
+  const doReload = () => {
+    const timelines = win.__timelines;
+    if (timelines) {
+      for (const key of Object.keys(timelines)) {
+        try {
+          timelines[key]?.kill?.();
+        } catch {}
+        delete timelines[key];
+      }
+    }
+    oldScriptEl.remove();
+    const newScript = doc.createElement("script");
+    // IIFE prevents const/let redeclaration errors across consecutive edits.
+    // Top-level declarations are scoped to the IIFE; window.* assignments
+    // (e.g. window.__timelines["root"] = tl) still reach the global scope.
+    newScript.textContent = `(function(){${scriptText}\n})();`;
+    doc.body.appendChild(newScript);
+    win.__hfForceTimelineRebind?.();
+    win.__player?.seek?.(currentTime);
+    win.__hfStudioManualEditsApply?.();
+  };
+  try {
+    if (win.__hfSuppressSceneMutations) {
+      win.__hfSuppressSceneMutations(doReload);
+    } else {
+      doReload();
+    }
+    return true;
+  } catch {
+    return false;
+  }
+}