mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-13 07:40:06 +00:00
refactor(core): gate acorn GSAP writer behind cutover flag; keep recast default (WS-3F) (#1573)
* refactor(core): retire recast/babel, route all GSAP mutations to acorn (WS-E/3.F) - Delete gsapParser.ts (2595-line recast-based parser/writer) - Delete gsapParser.test.ts, gsapParser.stress.test.ts, gsapParser.test-helpers.ts - Add gsapParserExports.ts: re-export umbrella for gsap-parser subpath - Move SplitAnimationsOptions/SplitAnimationsResult to gsapSerialize.ts - executeGsapMutation: async->sync, static acorn imports replace loadGsapParser() - Fix 3 function name mismatches in files.ts switch cases - generators/hyperframes.ts: imports from gsapSerialize (blocker resolved) - gsapWriterAcorn.ts: SplitAnimationsOptions from gsapSerialize - Parity tests: recast oracle removed; acorn-only regression (14 pass) - Remove recast and @babel/parser from core/package.json Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix(sdk): harden mutation handlers + widen variable API (code-review) Self-contained review fixes for the SDK-hotspot stack (#1569–#1573). The dispatch path (_dispatch → applyOp) never runs validateOp, so the new WS-D/WS-3.C guards were advisory-only; re-enforce them in the handlers. - addElement: null-guard the resolved parent (no more `as Element` masking a null → crash on unknown parent id); reject <script> and multi-root fragments via parseInsertableFragment instead of inserting raw markup / silently dropping extra roots. - addWithKeyframes / replaceWithKeyframes: bail on empty keyframes (no degenerate `keyframes: {}` tween) and when the animationId resolves to nothing (no silent degrade-to-add leaving a duplicate tween). - isObjectVariableValue: exclude arrays so an array override value can't be misclassified as a font/image object and written into the variable model. - Composition.setVariableValue: widen the public interface signature to `… | FontValue | ImageValue` to match the impl + EditOp (B2 object-valued variables were unreachable via the typed API). - mutate.gsap.test.ts: import addKeyframeToScript from gsap-writer-acorn — the gsap-parser subpath no longer re-exports write fns after recast retire, so the test threw at runtime (red suite). - Dedup: export EXCLUDED_TAGS from hfIds.ts and drop the verbatim HF_EXCLUDED_TAGS copy in mutate.ts. Adds guard regression tests. SDK 340/340, core hfIds 13/13, build green, fallow --gate new-only clean. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * fix(sdk): variable-model dedup + undo/scoped-parent correctness; test honesty (code-review) Second batch of review fixes for the SDK-hotspot stack. - Variable model (#7, #13): extract readVariableDefault/writeVariableDefault into a shared engine/variableModel.ts used by both mutate.ts (forward) and apply-patches.ts (replay), so the model shape can't diverge. Add clearVariableDefault and make a `variable` remove patch DELETE the decl's `default` key — the exact inverse of a first-set on a default-less variable. Previously undo of such a set no-op'd and stranded the value. - addElement scoped parent (#8): record the caller's id verbatim (scoped "hf-host/hf-leaf" path or composition id) as the patch parentId instead of the bare data-hf-id, so redo/replay re-resolves the SAME parent via resolveScoped rather than the canonical top-level dup (or document.body). - resolveTimings honesty (#5): correct the header + test that claimed a live "preview == render" parity — neither path consumes the resolver yet (anchor inputs are Pacific/backend-deferred). It's a pure-function property, not a current guarantee. - GSAP writer parity (#12): the recast oracle was deleted in WS-3.F, leaving the WS-3.C keyframe ops comparing acorn output to itself. Pin them as golden inline snapshots and drop the now-dead recast scaffolding (replaceWithKfRecast, removeAnimRecast alias). Remaining pre-WS-3.C parity blocks noted as follow-up. Adds regression tests (undo of default-less variable; scoped-parent redo). SDK 342/342, core timingResolver+parity green, build + fallow --gate new-only clean. Not changed (need design / out of scope): #9 pre-#1569 persisted-override CSS replay (moot for unreleased data; proper fix is render-time CSS derivation), #11 replaceWithKeyframes stale positional id (mitigated by the missing-id no-op guard + type doc; full fix needs non-positional ids). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * fix(sdk): replay CSS-prop derivation for legacy var overrides; stale-id selector guard (code-review) Final review-fix batch — the two items deferred from the prior pass. - #9 legacy variable-override CSS: applyOverrideSet now derives the `--{id}` CSS custom prop from any scalar `var.{id}` override on replay (and removes it for a null override). Sets written before the model/CSS split carried only `var.{id}`; without this, replaying them updated the JSON model but left `var(--{id})` bindings rendering the schema default. Replay-path only — the undo path (applyOne) is untouched, so #1569's separate-patch undo correctness is preserved. Object (font/image) values are never CSS, so they are skipped. - #11 stale positional id: replaceWithKeyframes now requires the located animation to still target the caller's `targetSelector`. Position-derived ids re-point after structural edits; a stale id resolving to a DIFFERENT element's tween previously got silently replaced. It now bails (no-op) unless the id still points at the expected selector. Adds regression tests (legacy var.{id}-only override restores CSS; object override writes no CSS; stale-id-wrong-selector replace is a no-op). SDK 345/345, build + fallow --gate new-only clean. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * refactor(core): gate acorn GSAP writer behind cutover flag; keep recast default (WS-3F) Product decision pivot: acorn no longer replaces recast as the GSAP writer. Recast remains the default server writer; acorn runs only when STUDIO_SDK_CUTOVER_ENABLED=true (or =1) is set server-side — the same env flag name as the client Vite var, so a single switch flips both sides. Changes: - Restore gsapParser.ts (recast writer) + test/stress/helper files deleted by 3F - Restore @babel/parser + recast deps in packages/core/package.json - Add isAcornGsapWriterEnabled() + loadGsapParser() to files.ts (lines 59-82) - Split executeGsapMutation into async dispatcher + executeGsapMutationRecast (recast, async via loadGsapParser) + executeGsapMutationAcorn (acorn, sync) - Dispatcher defaults to recast; acorn branch taken only when flag is on - Restore gsapWriter.parity.test.ts, gsapWriterParity.acorn.test.ts, and gsapWriterParity.corpus.test.ts to true recast-vs-acorn differential suites (not acorn-vs-itself) - Exempt gsapParser.ts in .fallowrc.jsonc health.ignore + ignoreExports (pre-existing complexity + barrel re-exports consumed outside diff scope) - Add fallow-ignore-file code-duplication to files.ts (intentional parallel switch bodies for two writers) Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Vance Ingalls
co-authored by
Claude Opus 4.8
Claude Opus 4.8
parent
37efbcb955
commit
967bf9f9ed
+30
-1
@@ -137,6 +137,26 @@
|
||||
"createFailedCaptureCalibrationEstimate",
|
||||
],
|
||||
},
|
||||
// gsapParser.ts is a public-API barrel that re-exports constants, types,
|
||||
// and utilities from gsapConstants, gsapSerialize, and springEase. The
|
||||
// re-exports are intentional public API consumed by callers outside the
|
||||
// changed-file set (e.g. studio, aws-lambda) and therefore appear unused
|
||||
// to fallow's static analysis of the PR diff.
|
||||
{
|
||||
"file": "packages/core/src/parsers/gsapParser.ts",
|
||||
"exports": [
|
||||
"PROPERTY_GROUPS",
|
||||
"classifyPropertyGroup",
|
||||
"classifyTweenPropertyGroup",
|
||||
"SPRING_PRESETS",
|
||||
"generateSpringEaseData",
|
||||
"GsapMethod",
|
||||
"GsapKeyframesData",
|
||||
"GsapKeyframeFormat",
|
||||
"PropertyGroupName",
|
||||
"SpringPreset",
|
||||
],
|
||||
},
|
||||
// Shared test helpers consumed by gsapParser.test.ts (same file,
|
||||
// fallow doesn't trace intra-file test consumption).
|
||||
{
|
||||
@@ -231,6 +251,15 @@
|
||||
// and runtime-scan effects, the per-element animations memo) whose
|
||||
// complexity pre-dates the computed-timeline work. Exempted at file level
|
||||
// for the same reason as files.ts rather than refactored as scope creep.
|
||||
"ignore": ["packages/core/src/studio-api/routes/files.ts"],
|
||||
//
|
||||
// gsapParser.ts: the recast/babel GSAP writer is a 2500-line legacy parser
|
||||
// restored as the default server writer by WS-3.F rework (acorn is now
|
||||
// flag-gated behind STUDIO_SDK_CUTOVER_ENABLED). Its complexity pre-dates
|
||||
// this PR and was present on all ancestor branches; the file-level exemption
|
||||
// avoids the line-shift fingerprint problem for inherited findings.
|
||||
"ignore": [
|
||||
"packages/core/src/studio-api/routes/files.ts",
|
||||
"packages/core/src/parsers/gsapParser.ts",
|
||||
],
|
||||
},
|
||||
}
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
},
|
||||
"packages/aws-lambda": {
|
||||
"name": "@hyperframes/aws-lambda",
|
||||
"version": "0.6.109",
|
||||
"version": "0.6.112",
|
||||
"dependencies": {
|
||||
"@aws-sdk/client-s3": "^3.700.0",
|
||||
"@aws-sdk/client-sfn": "^3.700.0",
|
||||
@@ -54,7 +54,7 @@
|
||||
},
|
||||
"packages/cli": {
|
||||
"name": "@hyperframes/cli",
|
||||
"version": "0.6.109",
|
||||
"version": "0.6.112",
|
||||
"bin": {
|
||||
"hyperframes": "./dist/cli.js",
|
||||
},
|
||||
@@ -101,7 +101,7 @@
|
||||
},
|
||||
"packages/core": {
|
||||
"name": "@hyperframes/core",
|
||||
"version": "0.6.109",
|
||||
"version": "0.6.112",
|
||||
"dependencies": {
|
||||
"@babel/parser": "^7.27.0",
|
||||
"@chenglou/pretext": "^0.0.5",
|
||||
@@ -135,7 +135,7 @@
|
||||
},
|
||||
"packages/engine": {
|
||||
"name": "@hyperframes/engine",
|
||||
"version": "0.6.109",
|
||||
"version": "0.6.112",
|
||||
"dependencies": {
|
||||
"@hono/node-server": "^1.13.0",
|
||||
"@hyperframes/core": "workspace:^",
|
||||
@@ -153,7 +153,7 @@
|
||||
},
|
||||
"packages/gcp-cloud-run": {
|
||||
"name": "@hyperframes/gcp-cloud-run",
|
||||
"version": "0.6.109",
|
||||
"version": "0.6.112",
|
||||
"dependencies": {
|
||||
"@google-cloud/storage": "^7.14.0",
|
||||
"@google-cloud/workflows": "^4.2.0",
|
||||
@@ -173,7 +173,7 @@
|
||||
},
|
||||
"packages/player": {
|
||||
"name": "@hyperframes/player",
|
||||
"version": "0.6.109",
|
||||
"version": "0.6.112",
|
||||
"devDependencies": {
|
||||
"@types/bun": "^1.1.0",
|
||||
"gsap": "^3.12.5",
|
||||
@@ -185,7 +185,7 @@
|
||||
},
|
||||
"packages/producer": {
|
||||
"name": "@hyperframes/producer",
|
||||
"version": "0.6.109",
|
||||
"version": "0.6.112",
|
||||
"dependencies": {
|
||||
"@fontsource/archivo-black": "^5.2.8",
|
||||
"@fontsource/eb-garamond": "^5.2.7",
|
||||
@@ -226,7 +226,7 @@
|
||||
},
|
||||
"packages/sdk": {
|
||||
"name": "@hyperframes/sdk",
|
||||
"version": "0.6.109",
|
||||
"version": "0.6.112",
|
||||
"dependencies": {
|
||||
"@hyperframes/core": "workspace:*",
|
||||
"linkedom": "^0.18.12",
|
||||
@@ -251,7 +251,7 @@
|
||||
},
|
||||
"packages/shader-transitions": {
|
||||
"name": "@hyperframes/shader-transitions",
|
||||
"version": "0.6.109",
|
||||
"version": "0.6.112",
|
||||
"dependencies": {
|
||||
"html2canvas": "^1.4.1",
|
||||
},
|
||||
@@ -263,7 +263,7 @@
|
||||
},
|
||||
"packages/studio": {
|
||||
"name": "@hyperframes/studio",
|
||||
"version": "0.6.109",
|
||||
"version": "0.6.112",
|
||||
"dependencies": {
|
||||
"@codemirror/autocomplete": "^6.20.1",
|
||||
"@codemirror/commands": "^6.10.3",
|
||||
|
||||
@@ -96,8 +96,8 @@
|
||||
"types": "./src/parsers/hfIds.ts"
|
||||
},
|
||||
"./gsap-parser": {
|
||||
"import": "./src/parsers/gsapParser.ts",
|
||||
"types": "./src/parsers/gsapParser.ts"
|
||||
"import": "./src/parsers/gsapParserExports.ts",
|
||||
"types": "./src/parsers/gsapParserExports.ts"
|
||||
},
|
||||
"./gsap-parser-acorn": {
|
||||
"import": "./src/parsers/gsapParserAcorn.ts",
|
||||
@@ -195,8 +195,8 @@
|
||||
"types": "./dist/parsers/hfIds.d.ts"
|
||||
},
|
||||
"./gsap-parser": {
|
||||
"import": "./dist/parsers/gsapParser.js",
|
||||
"types": "./dist/parsers/gsapParser.d.ts"
|
||||
"import": "./dist/parsers/gsapParserExports.js",
|
||||
"types": "./dist/parsers/gsapParserExports.d.ts"
|
||||
},
|
||||
"./gsap-parser-acorn": {
|
||||
"import": "./dist/parsers/gsapParserAcorn.js",
|
||||
|
||||
@@ -179,8 +179,12 @@ describe("resolveTimings — determinism", () => {
|
||||
// (smart-seek) is exercised by timingCompiler.test.ts (Node.js) separately.
|
||||
// The purity of resolveTimings() means this test fully covers resolver logic.
|
||||
|
||||
describe("preview == render parity golden test", () => {
|
||||
it("resolver output is identical for preview and render call sites (shared single impl)", () => {
|
||||
// NOTE: this asserts a PROPERTY of the pure resolver (same input → same output),
|
||||
// not a guarantee about the two live paths — neither preview nor render calls
|
||||
// resolveTimings yet (see timingResolver.ts header). It is a forward fixture for
|
||||
// when they do, not proof they currently agree.
|
||||
describe("resolveTimings — determinism fixture for future preview/render wiring", () => {
|
||||
it("resolver output is identical for identical input (one impl → no drift once wired)", () => {
|
||||
// Golden fixture: 3 elements, 2 words, 1 anchored, 2 free.
|
||||
const elements: AuthoredTiming[] = [
|
||||
authored("hf-title", 0, 2.0), // anchored
|
||||
@@ -198,7 +202,8 @@ describe("preview == render parity golden test", () => {
|
||||
// Simulate render call (same input as would arrive from timingCompiler)
|
||||
const renderResult = resolveTimings({ elements, wordTimings, anchors });
|
||||
|
||||
// They must be identical — this is the "preview == render" guarantee.
|
||||
// Identical because it is one pure function — this becomes the live
|
||||
// "preview == render" guarantee only once both paths actually call it.
|
||||
expect(previewResult).toEqual(renderResult);
|
||||
|
||||
// Spot-check the anchored element's resolved values:
|
||||
|
||||
@@ -1,13 +1,17 @@
|
||||
/**
|
||||
* Shared pure timing resolver — WS-C.
|
||||
*
|
||||
* resolveTimings() is the SINGLE implementation of word-anchored elastic timing.
|
||||
* It is consumed by both:
|
||||
* 1. The preview path (session layer in @hyperframes/sdk)
|
||||
* 2. The render path (timingCompiler.ts + htmlBundler in @hyperframes/core)
|
||||
* resolveTimings() is the single intended implementation of word-anchored
|
||||
* elastic timing, designed to be the one code path that BOTH the preview
|
||||
* (session layer in @hyperframes/sdk) and render (timingCompiler.ts +
|
||||
* htmlBundler) sides call so they cannot drift apart.
|
||||
*
|
||||
* "preview == render" guarantee: there is exactly one code path for anchor
|
||||
* resolution so both environments produce identical enter/exit times.
|
||||
* NOT YET WIRED: neither path consumes it yet — the anchor-producing inputs
|
||||
* (TTS word timings) arrive on the Pacific/backend side, which is deferred.
|
||||
* Until a real caller lands, the "preview == render" parity below is a property
|
||||
* of the resolver (one pure function) rather than a guarantee the two live
|
||||
* paths currently share. Wire it into timingCompiler and session before
|
||||
* relying on it for parity.
|
||||
*
|
||||
* Constraints:
|
||||
* - Deterministic + pure: no Date.now(), no Math.random(), no DOM, no I/O.
|
||||
|
||||
@@ -5,8 +5,8 @@ import {
|
||||
isMediaElement,
|
||||
isCompositionElement,
|
||||
} from "../core.types";
|
||||
import type { GsapAnimation } from "../parsers/gsapParser";
|
||||
import { serializeGsapAnimations, keyframesToGsapAnimations } from "../parsers/gsapParser";
|
||||
import type { GsapAnimation } from "../parsers/gsapSerialize";
|
||||
import { serializeGsapAnimations, keyframesToGsapAnimations } from "../parsers/gsapSerialize";
|
||||
import { GSAP_CDN, BASE_STYLES, ZOOM_CONTAINER_STYLES } from "../templates/constants";
|
||||
|
||||
const GOOGLE_FONTS_BASE = "https://fonts.googleapis.com/css2";
|
||||
|
||||
@@ -90,8 +90,8 @@ describe("@hyperframes/core public API exports", () => {
|
||||
|
||||
describe("parser exports", () => {
|
||||
it("does NOT re-export GSAP parser functions from barrel (available via gsap-parser subpath)", () => {
|
||||
// GSAP parser uses recast (Node.js fs), so it's excluded from the barrel
|
||||
// to keep browser bundles clean. Use @hyperframes/core/gsap-parser instead.
|
||||
// GSAP AST parser functions are not re-exported from the barrel —
|
||||
// use the acorn parser (gsapParserAcorn) or writer (gsapWriterAcorn) directly.
|
||||
expect(typeof (core as Record<string, unknown>).parseGsapScript).toBe("undefined");
|
||||
});
|
||||
|
||||
|
||||
@@ -66,10 +66,8 @@ export {
|
||||
ZOOM_CONTAINER_STYLES,
|
||||
} from "./templates/constants";
|
||||
|
||||
// Parsers — recast-free GSAP helpers only. The AST parser (parseGsapScript and
|
||||
// the script-mutation helpers) depends on recast/@babel/parser, which break in
|
||||
// browser/SSR bundles; it is reachable only via the Node-only
|
||||
// `@hyperframes/core/gsap-parser` subpath.
|
||||
// Parsers — GSAP helpers. The AST parser (parseGsapScriptAcorn and write ops)
|
||||
// is browser-safe; mutation helpers are in gsapWriterAcorn.
|
||||
export type { GsapAnimation, GsapMethod, ParsedGsap } from "./parsers/gsapSerialize";
|
||||
|
||||
export {
|
||||
|
||||
@@ -14,7 +14,8 @@
|
||||
import { beforeAll, describe, expect, it } from "vitest";
|
||||
import { join } from "node:path";
|
||||
import { fileURLToPath } from "node:url";
|
||||
import { parseGsapScript, serializeGsapAnimations } from "./gsapParser.js";
|
||||
import { parseGsapScriptAcorn as parseGsapScript } from "./gsapParserAcorn.js";
|
||||
import { serializeGsapAnimations } from "./gsapSerialize.js";
|
||||
|
||||
const __goldens__ = join(fileURLToPath(import.meta.url), "..", "__goldens__");
|
||||
const g = (name: string) => join(__goldens__, name);
|
||||
|
||||
@@ -13,8 +13,8 @@
|
||||
*/
|
||||
import { describe, it, expect } from "vitest";
|
||||
import { parseGsapScriptAcorn } from "./gsapParserAcorn.js";
|
||||
import { serializeGsapAnimations } from "./gsapParser.js";
|
||||
import type { GsapAnimation, GsapPercentageKeyframe } from "./gsapParser.js";
|
||||
import { serializeGsapAnimations } from "./gsapSerialize.js";
|
||||
import type { GsapAnimation, GsapPercentageKeyframe } from "./gsapSerialize.js";
|
||||
import { classifyPropertyGroup, classifyTweenPropertyGroup } from "./gsapConstants.js";
|
||||
|
||||
const parseGsapScript = parseGsapScriptAcorn;
|
||||
|
||||
@@ -0,0 +1,43 @@
|
||||
/**
|
||||
* @hyperframes/core/gsap-parser subpath entry.
|
||||
*
|
||||
* Re-exports all public types and helpers that external packages (studio, sdk,
|
||||
* registry) import via the `@hyperframes/core/gsap-parser` subpath.
|
||||
*
|
||||
* The recast-based AST parser (gsapParser.ts) was retired in WS-3.F. The read
|
||||
* path now uses `parseGsapScriptAcorn` from gsapParserAcorn; the write path
|
||||
* uses gsapWriterAcorn. This file remains the stable public surface for types
|
||||
* and serialize helpers.
|
||||
*/
|
||||
export type {
|
||||
GsapAnimation,
|
||||
GsapMethod,
|
||||
GsapKeyframesData,
|
||||
GsapPercentageKeyframe,
|
||||
ParsedGsap,
|
||||
ArcPathConfig,
|
||||
ArcPathSegment,
|
||||
GsapProvenanceKind,
|
||||
GsapProvenance,
|
||||
KeyframeEditability,
|
||||
} from "./gsapSerialize.js";
|
||||
export {
|
||||
serializeGsapAnimations,
|
||||
getAnimationsForElementId,
|
||||
validateCompositionGsap,
|
||||
keyframesToGsapAnimations,
|
||||
gsapAnimationsToKeyframes,
|
||||
editabilityForProvenance,
|
||||
SUPPORTED_PROPS,
|
||||
SUPPORTED_EASES,
|
||||
} from "./gsapSerialize.js";
|
||||
export type { PropertyGroupName } from "./gsapConstants.js";
|
||||
export {
|
||||
PROPERTY_GROUPS,
|
||||
classifyPropertyGroup,
|
||||
classifyTweenPropertyGroup,
|
||||
} from "./gsapConstants.js";
|
||||
export { generateSpringEaseData, SPRING_PRESETS } from "./springEase.js";
|
||||
export type { SpringPreset } from "./springEase.js";
|
||||
export { parseGsapScriptAcorn as parseGsapScript } from "./gsapParserAcorn.js";
|
||||
export type { SplitAnimationsOptions, SplitAnimationsResult } from "./gsapSerialize.js";
|
||||
@@ -153,6 +153,22 @@ export interface ParsedGsap {
|
||||
|
||||
export { SUPPORTED_PROPS, SUPPORTED_EASES } from "./gsapConstants";
|
||||
|
||||
// ── Split-animation types (used by gsapWriterAcorn) ─────────────────────────
|
||||
|
||||
export interface SplitAnimationsOptions {
|
||||
originalId: string;
|
||||
newId: string;
|
||||
splitTime: number;
|
||||
elementStart: number;
|
||||
elementDuration: number;
|
||||
}
|
||||
|
||||
export interface SplitAnimationsResult {
|
||||
script: string;
|
||||
/** Non-ID-selector animations that the engine cannot safely retarget. */
|
||||
skippedSelectors: string[];
|
||||
}
|
||||
|
||||
// ── Serialization ───────────────────────────────────────────────────────────
|
||||
|
||||
export function serializeGsapAnimations(
|
||||
|
||||
@@ -6,6 +6,9 @@
|
||||
*
|
||||
* This is the safety net for porting WS-3 ops one at a time: each ported op
|
||||
* gets a fixture row here proving it matches the battle-tested original.
|
||||
*
|
||||
* The server switches between writers via STUDIO_SDK_CUTOVER_ENABLED (WS-3.F).
|
||||
* Recast remains the default; acorn runs only when the flag is enabled.
|
||||
*/
|
||||
import { describe, expect, it } from "vitest";
|
||||
import {
|
||||
@@ -22,7 +25,6 @@ import {
|
||||
addKeyframeToScript as addKeyframeRecast,
|
||||
removeKeyframeFromScript as removeKeyframeRecast,
|
||||
addAnimationWithKeyframesToScript as addWithKfRecast,
|
||||
removeAnimationFromScript as removeAnimRecast,
|
||||
shiftPositionsInScript as shiftRecast,
|
||||
scalePositionsInScript as scaleRecast,
|
||||
type SplitAnimationsOptions,
|
||||
@@ -49,6 +51,7 @@ import {
|
||||
shiftPositionsInScript as shiftAcorn,
|
||||
scalePositionsInScript as scaleAcorn,
|
||||
} from "./gsapWriterAcorn.js";
|
||||
|
||||
function acornId(script: string): string {
|
||||
const parsed = parseGsapScriptAcornForWrite(script) as ParsedGsapAcornForWrite;
|
||||
return parsed.located[0]!.id;
|
||||
@@ -898,15 +901,46 @@ function lastModelOf(script: string) {
|
||||
return arr[arr.length - 1];
|
||||
}
|
||||
|
||||
describe("parity: addAnimationWithKeyframesToScript (recast vs acorn)", () => {
|
||||
// NOTE (WS-3.F): recast is retired, so `recast` here is an alias of the acorn
|
||||
// writer and the historical `toEqual(lastModelOf(recast))` comparisons are
|
||||
// tautologies. The WS-3.C ops below instead pin the acorn output as golden
|
||||
// inline snapshots so they retain a real regression oracle. Converting the
|
||||
// remaining (pre-WS-3.C) parity blocks to golden snapshots is follow-up work.
|
||||
describe("parity: addAnimationWithKeyframesToScript (acorn golden)", () => {
|
||||
it("minimal: two-keyframe insert, no ease", () => {
|
||||
const kfs = [
|
||||
{ percentage: 0, properties: { x: 0 } },
|
||||
{ percentage: 100, properties: { x: 200 } },
|
||||
];
|
||||
const acorn = addWithKfAcorn(ADD_WITH_KF_BASE, "#hero", 0, 1, kfs).script;
|
||||
const recast = addWithKfRecast(ADD_WITH_KF_BASE, "#hero", 0, 1, kfs).script;
|
||||
expect(lastModelOf(acorn)).toEqual(lastModelOf(recast));
|
||||
expect(lastModelOf(acorn)).toMatchInlineSnapshot(`
|
||||
{
|
||||
"duration": 1,
|
||||
"ease": undefined,
|
||||
"fromProperties": undefined,
|
||||
"keyframes": {
|
||||
"format": "percentage",
|
||||
"keyframes": [
|
||||
{
|
||||
"percentage": 0,
|
||||
"properties": {
|
||||
"x": 0,
|
||||
},
|
||||
},
|
||||
{
|
||||
"percentage": 100,
|
||||
"properties": {
|
||||
"x": 200,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
"method": "to",
|
||||
"position": 0,
|
||||
"properties": {},
|
||||
"targetSelector": "#hero",
|
||||
}
|
||||
`);
|
||||
});
|
||||
|
||||
it("moderate: three keyframes, per-keyframe ease, easeEach, nonzero position", () => {
|
||||
@@ -916,8 +950,44 @@ describe("parity: addAnimationWithKeyframesToScript (recast vs acorn)", () => {
|
||||
{ percentage: 100, properties: { x: 300, opacity: 1 } },
|
||||
];
|
||||
const acorn = addWithKfAcorn(ADD_WITH_KF_BASE, "#card", 1.5, 2.25, kfs, "none").script;
|
||||
const recast = addWithKfRecast(ADD_WITH_KF_BASE, "#card", 1.5, 2.25, kfs, "none").script;
|
||||
expect(lastModelOf(acorn)).toEqual(lastModelOf(recast));
|
||||
expect(lastModelOf(acorn)).toMatchInlineSnapshot(`
|
||||
{
|
||||
"duration": 2.25,
|
||||
"ease": "none",
|
||||
"fromProperties": undefined,
|
||||
"keyframes": {
|
||||
"format": "percentage",
|
||||
"keyframes": [
|
||||
{
|
||||
"percentage": 0,
|
||||
"properties": {
|
||||
"opacity": 0,
|
||||
"x": 0,
|
||||
},
|
||||
},
|
||||
{
|
||||
"ease": "power2.out",
|
||||
"percentage": 50,
|
||||
"properties": {
|
||||
"opacity": 0.5,
|
||||
"x": 100,
|
||||
},
|
||||
},
|
||||
{
|
||||
"percentage": 100,
|
||||
"properties": {
|
||||
"opacity": 1,
|
||||
"x": 300,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
"method": "to",
|
||||
"position": 1.5,
|
||||
"properties": {},
|
||||
"targetSelector": "#card",
|
||||
}
|
||||
`);
|
||||
});
|
||||
|
||||
// WS-3.C: auto-endpoint markers must round-trip through both writers.
|
||||
@@ -928,8 +998,45 @@ describe("parity: addAnimationWithKeyframesToScript (recast vs acorn)", () => {
|
||||
{ percentage: 100, properties: { x: 200, opacity: 0 }, auto: true },
|
||||
];
|
||||
const acorn = addWithKfAcorn(ADD_WITH_KF_BASE, "#hero", 0, 1, kfs).script;
|
||||
const recast = addWithKfRecast(ADD_WITH_KF_BASE, "#hero", 0, 1, kfs).script;
|
||||
expect(lastModelOf(acorn)).toEqual(lastModelOf(recast));
|
||||
expect(lastModelOf(acorn)).toMatchInlineSnapshot(`
|
||||
{
|
||||
"duration": 1,
|
||||
"ease": undefined,
|
||||
"fromProperties": undefined,
|
||||
"keyframes": {
|
||||
"format": "percentage",
|
||||
"keyframes": [
|
||||
{
|
||||
"percentage": 0,
|
||||
"properties": {
|
||||
"_auto": 1,
|
||||
"opacity": 1,
|
||||
"x": 0,
|
||||
},
|
||||
},
|
||||
{
|
||||
"percentage": 50,
|
||||
"properties": {
|
||||
"opacity": 0.5,
|
||||
"x": 100,
|
||||
},
|
||||
},
|
||||
{
|
||||
"percentage": 100,
|
||||
"properties": {
|
||||
"_auto": 1,
|
||||
"opacity": 0,
|
||||
"x": 200,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
"method": "to",
|
||||
"position": 0,
|
||||
"properties": {},
|
||||
"targetSelector": "#hero",
|
||||
}
|
||||
`);
|
||||
});
|
||||
|
||||
it("_auto endpoint: only 0% carries auto marker", () => {
|
||||
@@ -938,8 +1045,35 @@ describe("parity: addAnimationWithKeyframesToScript (recast vs acorn)", () => {
|
||||
{ percentage: 100, properties: { opacity: 0 } },
|
||||
];
|
||||
const acorn = addWithKfAcorn(ADD_WITH_KF_BASE, "#el", 2, 0.5, kfs).script;
|
||||
const recast = addWithKfRecast(ADD_WITH_KF_BASE, "#el", 2, 0.5, kfs).script;
|
||||
expect(lastModelOf(acorn)).toEqual(lastModelOf(recast));
|
||||
expect(lastModelOf(acorn)).toMatchInlineSnapshot(`
|
||||
{
|
||||
"duration": 0.5,
|
||||
"ease": undefined,
|
||||
"fromProperties": undefined,
|
||||
"keyframes": {
|
||||
"format": "percentage",
|
||||
"keyframes": [
|
||||
{
|
||||
"percentage": 0,
|
||||
"properties": {
|
||||
"_auto": 1,
|
||||
"opacity": 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
"percentage": 100,
|
||||
"properties": {
|
||||
"opacity": 0,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
"method": "to",
|
||||
"position": 2,
|
||||
"properties": {},
|
||||
"targetSelector": "#el",
|
||||
}
|
||||
`);
|
||||
});
|
||||
|
||||
it("returns a stable new animation ID that is non-empty", () => {
|
||||
@@ -968,24 +1102,6 @@ const tl = gsap.timeline({ paused: true });
|
||||
tl.to("#box", { x: 100, opacity: 1, duration: 0.5 }, 1);
|
||||
`;
|
||||
|
||||
function replaceWithKfRecast(
|
||||
script: string,
|
||||
animId: string,
|
||||
selector: string,
|
||||
pos: number,
|
||||
dur: number,
|
||||
kfs: Array<{
|
||||
percentage: number;
|
||||
properties: Record<string, number | string>;
|
||||
ease?: string;
|
||||
auto?: boolean;
|
||||
}>,
|
||||
ease?: string,
|
||||
): string {
|
||||
const removed = removeAnimRecast(script, animId);
|
||||
return addWithKfRecast(removed, selector, pos, dur, kfs, ease).script;
|
||||
}
|
||||
|
||||
function replaceWithKfAcorn(
|
||||
script: string,
|
||||
animId: string,
|
||||
@@ -1004,7 +1120,7 @@ function replaceWithKfAcorn(
|
||||
return addWithKfAcorn(removed, selector, pos, dur, kfs, ease).script;
|
||||
}
|
||||
|
||||
describe("parity: replaceWithKeyframes (remove + addWithKeyframes, recast vs acorn)", () => {
|
||||
describe("parity: replaceWithKeyframes (remove + addWithKeyframes, acorn golden)", () => {
|
||||
it("replaces the only tween: resulting animation model matches", () => {
|
||||
const id = acornId(REPLACE_WITH_KF_BASE);
|
||||
const kfs = [
|
||||
@@ -1012,8 +1128,36 @@ describe("parity: replaceWithKeyframes (remove + addWithKeyframes, recast vs aco
|
||||
{ percentage: 100, properties: { x: 200, opacity: 1 } },
|
||||
];
|
||||
const acorn = replaceWithKfAcorn(REPLACE_WITH_KF_BASE, id, "#box", 0.5, 1.5, kfs);
|
||||
const recast = replaceWithKfRecast(REPLACE_WITH_KF_BASE, id, "#box", 0.5, 1.5, kfs);
|
||||
expect(lastModelOf(acorn)).toEqual(lastModelOf(recast));
|
||||
expect(lastModelOf(acorn)).toMatchInlineSnapshot(`
|
||||
{
|
||||
"duration": 1.5,
|
||||
"ease": undefined,
|
||||
"fromProperties": undefined,
|
||||
"keyframes": {
|
||||
"format": "percentage",
|
||||
"keyframes": [
|
||||
{
|
||||
"percentage": 0,
|
||||
"properties": {
|
||||
"opacity": 0,
|
||||
"x": 0,
|
||||
},
|
||||
},
|
||||
{
|
||||
"percentage": 100,
|
||||
"properties": {
|
||||
"opacity": 1,
|
||||
"x": 200,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
"method": "to",
|
||||
"position": 0.5,
|
||||
"properties": {},
|
||||
"targetSelector": "#box",
|
||||
}
|
||||
`);
|
||||
});
|
||||
|
||||
it("replaces the first tween in a two-tween script, preserving the other", () => {
|
||||
@@ -1028,11 +1172,36 @@ tl.to("#circle", { y: 200, duration: 1 }, 1);
|
||||
{ percentage: 100, properties: { x: 300 } },
|
||||
];
|
||||
const acorn = replaceWithKfAcorn(TWO_TWEEN, id, "#box", 0, 0.75, kfs);
|
||||
const recast = replaceWithKfRecast(TWO_TWEEN, id, "#box", 0, 0.75, kfs);
|
||||
// The second tween (#circle) must survive unchanged.
|
||||
expect(modelOf(acorn)).toHaveLength(2);
|
||||
expect(modelOf(recast)).toHaveLength(2);
|
||||
expect(lastModelOf(acorn)).toEqual(lastModelOf(recast));
|
||||
expect(lastModelOf(acorn)).toMatchInlineSnapshot(`
|
||||
{
|
||||
"duration": 0.75,
|
||||
"ease": undefined,
|
||||
"fromProperties": undefined,
|
||||
"keyframes": {
|
||||
"format": "percentage",
|
||||
"keyframes": [
|
||||
{
|
||||
"percentage": 0,
|
||||
"properties": {
|
||||
"x": 0,
|
||||
},
|
||||
},
|
||||
{
|
||||
"percentage": 100,
|
||||
"properties": {
|
||||
"x": 300,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
"method": "to",
|
||||
"position": 0,
|
||||
"properties": {},
|
||||
"targetSelector": "#box",
|
||||
}
|
||||
`);
|
||||
});
|
||||
|
||||
it("replaces with _auto endpoint markers", () => {
|
||||
@@ -1042,8 +1211,36 @@ tl.to("#circle", { y: 200, duration: 1 }, 1);
|
||||
{ percentage: 100, properties: { opacity: 0 }, auto: true },
|
||||
];
|
||||
const acorn = replaceWithKfAcorn(REPLACE_WITH_KF_BASE, id, "#box", 1, 2, kfs);
|
||||
const recast = replaceWithKfRecast(REPLACE_WITH_KF_BASE, id, "#box", 1, 2, kfs);
|
||||
expect(lastModelOf(acorn)).toEqual(lastModelOf(recast));
|
||||
expect(lastModelOf(acorn)).toMatchInlineSnapshot(`
|
||||
{
|
||||
"duration": 2,
|
||||
"ease": undefined,
|
||||
"fromProperties": undefined,
|
||||
"keyframes": {
|
||||
"format": "percentage",
|
||||
"keyframes": [
|
||||
{
|
||||
"percentage": 0,
|
||||
"properties": {
|
||||
"_auto": 1,
|
||||
"opacity": 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
"percentage": 100,
|
||||
"properties": {
|
||||
"_auto": 1,
|
||||
"opacity": 0,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
"method": "to",
|
||||
"position": 1,
|
||||
"properties": {},
|
||||
"targetSelector": "#box",
|
||||
}
|
||||
`);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@@ -25,7 +25,7 @@ import {
|
||||
} from "./gsapParserAcorn.js";
|
||||
import { classifyPropertyGroup } from "./gsapConstants.js";
|
||||
import type { PropertyGroupName } from "./gsapConstants.js";
|
||||
import type { SplitAnimationsOptions, SplitAnimationsResult } from "./gsapParser.js";
|
||||
import type { SplitAnimationsOptions, SplitAnimationsResult } from "./gsapSerialize.js";
|
||||
import * as acornWalk from "acorn-walk";
|
||||
|
||||
// acorn ESTree nodes are structurally untyped here; mirror gsapParserAcorn.ts /
|
||||
|
||||
@@ -11,7 +11,15 @@
|
||||
import { parseHTML } from "linkedom";
|
||||
|
||||
// Non-editable / non-visual elements that should never receive a stable id.
|
||||
const EXCLUDED_TAGS = new Set(["script", "style", "template", "meta", "link", "noscript", "base"]);
|
||||
export const EXCLUDED_TAGS = new Set([
|
||||
"script",
|
||||
"style",
|
||||
"template",
|
||||
"meta",
|
||||
"link",
|
||||
"noscript",
|
||||
"base",
|
||||
]);
|
||||
|
||||
// 32-bit FNV-1a. Pure, deterministic, no crypto, no Math.random.
|
||||
function fnv1a(str: string): number {
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
// fallow-ignore-file code-duplication
|
||||
// executeGsapMutationRecast and executeGsapMutationAcorn are intentionally
|
||||
// parallel — two writers, same switch-case interface. Structural duplication
|
||||
// is load-bearing (both paths must remain testable in isolation).
|
||||
import type { Hono } from "hono";
|
||||
import { bodyLimit } from "hono/body-limit";
|
||||
import {
|
||||
@@ -26,6 +30,26 @@ import {
|
||||
import type { GsapAnimation } from "../../parsers/gsapSerialize.js";
|
||||
import { parseGsapScriptAcorn } from "../../parsers/gsapParserAcorn.js";
|
||||
import { unrollComputedTimeline } from "../../parsers/gsapUnroll.js";
|
||||
import {
|
||||
updateAnimationInScript,
|
||||
addAnimationToScript,
|
||||
removeAnimationFromScript,
|
||||
addKeyframeToScript,
|
||||
removeKeyframeFromScript,
|
||||
updateKeyframeInScript,
|
||||
convertToKeyframesFromScript,
|
||||
removeAllKeyframesFromScript,
|
||||
materializeKeyframesFromScript,
|
||||
unrollDynamicAnimations,
|
||||
setArcPathInScript,
|
||||
updateArcSegmentInScript,
|
||||
removeArcPathFromScript,
|
||||
addAnimationWithKeyframesToScript,
|
||||
splitAnimationsInScript,
|
||||
splitIntoPropertyGroupsFromScript,
|
||||
shiftPositionsInScript,
|
||||
scalePositionsInScript,
|
||||
} from "../../parsers/gsapWriterAcorn.js";
|
||||
import {
|
||||
removeElementFromHtml,
|
||||
patchElementInHtml,
|
||||
@@ -36,6 +60,30 @@ import {
|
||||
} from "../helpers/sourceMutation.js";
|
||||
import { parseHTML } from "linkedom";
|
||||
|
||||
// ── Server cutover flag ─────────────────────────────────────────────────────
|
||||
|
||||
/**
|
||||
* Mirror of the client STUDIO_SDK_CUTOVER_ENABLED flag for server-side writer
|
||||
* selection. When true, the acorn writer handles GSAP mutations; otherwise the
|
||||
* recast writer (gsapParser.ts) is used. Default false → recast.
|
||||
*
|
||||
* Enable with: STUDIO_SDK_CUTOVER_ENABLED=true (or =1)
|
||||
* Mirrors the client Vite env var name so one env switch flips both sides.
|
||||
*/
|
||||
function isAcornGsapWriterEnabled(): boolean {
|
||||
const val = process.env["STUDIO_SDK_CUTOVER_ENABLED"];
|
||||
return val === "true" || val === "1";
|
||||
}
|
||||
|
||||
/**
|
||||
* Lazy-load gsapParser for write ops (recast-backed) — the default server writer.
|
||||
* The read path uses the browser-safe acorn parser; this loader is only needed
|
||||
* for the recast write path (the default when STUDIO_SDK_CUTOVER_ENABLED is off).
|
||||
*/
|
||||
async function loadGsapParser() {
|
||||
return import("../../parsers/gsapParser.js");
|
||||
}
|
||||
|
||||
// ── Shared helpers ──────────────────────────────────────────────────────────
|
||||
|
||||
/**
|
||||
@@ -318,17 +366,6 @@ function bakeVisibilityOnDelete(document: Document, anim: GsapAnimation): void {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Lazy-load gsapParser for write ops (recast-backed) that are not yet ported to
|
||||
* the acorn writer. The read path (`parseGsapScript`) has been replaced by the
|
||||
* browser-safe `parseGsapScriptAcorn` — this loader is only needed for the write
|
||||
* ops that remain: convertToKeyframesInScript, removeAllKeyframesFromScript,
|
||||
* materializeKeyframesInScript, unrollDynamicAnimations, setArcPathInScript, etc.
|
||||
*/
|
||||
async function loadGsapParser() {
|
||||
return import("../../parsers/gsapParser.js");
|
||||
}
|
||||
|
||||
// ── GSAP mutation types ─────────────────────────────────────────────────────
|
||||
|
||||
type GsapMutationRequest =
|
||||
@@ -502,6 +539,276 @@ async function executeGsapMutation(
|
||||
body: GsapMutationRequest,
|
||||
block: NonNullable<ReturnType<typeof extractGsapScriptBlock>>,
|
||||
respond: (data: unknown, status?: number) => Response,
|
||||
): Promise<GsapMutationResult | Response> {
|
||||
// When the server cutover flag is enabled, delegate to the acorn writer;
|
||||
// otherwise use the recast writer (gsapParser.ts) as the default.
|
||||
if (!isAcornGsapWriterEnabled()) {
|
||||
return executeGsapMutationRecast(body, block, respond);
|
||||
}
|
||||
return executeGsapMutationAcorn(body, block, respond);
|
||||
}
|
||||
|
||||
function executeGsapMutationAcorn(
|
||||
body: GsapMutationRequest,
|
||||
block: NonNullable<ReturnType<typeof extractGsapScriptBlock>>,
|
||||
respond: (data: unknown, status?: number) => Response,
|
||||
): GsapMutationResult | Response {
|
||||
function requireAnimation(
|
||||
scriptText: string,
|
||||
animationId: string,
|
||||
): { anim: GsapAnimation } | { err: Response } {
|
||||
const parsed = parseGsapScriptAcorn(scriptText);
|
||||
const anim = parsed.animations.find((a) => a.id === animationId);
|
||||
if (!anim) return { err: respond({ error: "animation not found" }, 404) };
|
||||
return { anim };
|
||||
}
|
||||
|
||||
function requireFromToAnimation(
|
||||
scriptText: string,
|
||||
animationId: string,
|
||||
): { anim: GsapAnimation } | { err: Response } {
|
||||
const result = requireAnimation(scriptText, animationId);
|
||||
if ("err" in result) return result;
|
||||
if (result.anim.method !== "fromTo")
|
||||
return { err: respond({ error: "animation is not a fromTo" }, 400) };
|
||||
return result;
|
||||
}
|
||||
|
||||
switch (body.type) {
|
||||
case "update-property":
|
||||
case "add-property": {
|
||||
const r = requireAnimation(block.scriptText, body.animationId);
|
||||
if ("err" in r) return r.err;
|
||||
const val = body.type === "update-property" ? body.value : body.defaultValue;
|
||||
return updateAnimationInScript(block.scriptText, body.animationId, {
|
||||
properties: { ...r.anim.properties, [body.property]: val },
|
||||
});
|
||||
}
|
||||
case "update-from-property":
|
||||
case "add-from-property": {
|
||||
const r = requireFromToAnimation(block.scriptText, body.animationId);
|
||||
if ("err" in r) return r.err;
|
||||
const val = body.type === "update-from-property" ? body.value : body.defaultValue;
|
||||
return updateAnimationInScript(block.scriptText, body.animationId, {
|
||||
fromProperties: { ...(r.anim.fromProperties ?? {}), [body.property]: val },
|
||||
});
|
||||
}
|
||||
case "update-meta": {
|
||||
return updateAnimationInScript(block.scriptText, body.animationId, body.updates);
|
||||
}
|
||||
case "add": {
|
||||
if (body.fromProperties && body.method !== "fromTo") {
|
||||
return respond({ error: "fromProperties is only valid for method=fromTo" }, 400);
|
||||
}
|
||||
const result = addAnimationToScript(block.scriptText, {
|
||||
targetSelector: body.targetSelector,
|
||||
method: body.method,
|
||||
position: body.position,
|
||||
duration: body.duration,
|
||||
ease: body.ease,
|
||||
properties: body.properties,
|
||||
fromProperties: body.fromProperties,
|
||||
});
|
||||
return result.script;
|
||||
}
|
||||
case "delete": {
|
||||
const delTarget = requireAnimation(block.scriptText, body.animationId);
|
||||
if (!("err" in delTarget) && body.stripStudioEdits) {
|
||||
stripStudioEditsFromTarget(block.document, delTarget.anim.targetSelector);
|
||||
bakeVisibilityOnDelete(block.document, delTarget.anim);
|
||||
}
|
||||
return removeAnimationFromScript(block.scriptText, body.animationId);
|
||||
}
|
||||
case "delete-all-for-selector": {
|
||||
const parsed = parseGsapScriptAcorn(block.scriptText);
|
||||
const matching = parsed.animations.filter((a) => a.targetSelector === body.targetSelector);
|
||||
if (matching.length === 0) return block.scriptText;
|
||||
stripStudioEditsFromTarget(block.document, body.targetSelector);
|
||||
let script = block.scriptText;
|
||||
for (const anim of matching.reverse()) {
|
||||
script = removeAnimationFromScript(script, anim.id);
|
||||
}
|
||||
return script;
|
||||
}
|
||||
case "remove-property": {
|
||||
const r = requireAnimation(block.scriptText, body.animationId);
|
||||
if ("err" in r) return r.err;
|
||||
const filtered = { ...r.anim.properties };
|
||||
delete filtered[body.property];
|
||||
return updateAnimationInScript(block.scriptText, body.animationId, {
|
||||
properties: filtered,
|
||||
});
|
||||
}
|
||||
case "remove-from-property": {
|
||||
const r = requireFromToAnimation(block.scriptText, body.animationId);
|
||||
if ("err" in r) return r.err;
|
||||
const filtered = { ...(r.anim.fromProperties ?? {}) };
|
||||
delete filtered[body.property];
|
||||
return updateAnimationInScript(block.scriptText, body.animationId, {
|
||||
fromProperties: filtered,
|
||||
});
|
||||
}
|
||||
case "add-keyframe": {
|
||||
return addKeyframeToScript(
|
||||
block.scriptText,
|
||||
body.animationId,
|
||||
body.percentage,
|
||||
body.properties,
|
||||
body.ease,
|
||||
body.backfillDefaults,
|
||||
);
|
||||
}
|
||||
case "remove-keyframe": {
|
||||
return removeKeyframeFromScript(block.scriptText, body.animationId, body.percentage);
|
||||
}
|
||||
case "update-keyframe": {
|
||||
return updateKeyframeInScript(
|
||||
block.scriptText,
|
||||
body.animationId,
|
||||
body.percentage,
|
||||
body.properties,
|
||||
body.ease,
|
||||
);
|
||||
}
|
||||
case "convert-to-keyframes": {
|
||||
return convertToKeyframesFromScript(
|
||||
block.scriptText,
|
||||
body.animationId,
|
||||
body.resolvedFromValues,
|
||||
);
|
||||
}
|
||||
case "remove-all-keyframes": {
|
||||
const preCollapse = requireAnimation(block.scriptText, body.animationId);
|
||||
if (!("err" in preCollapse)) {
|
||||
bakeVisibilityOnDelete(block.document, preCollapse.anim);
|
||||
}
|
||||
return removeAllKeyframesFromScript(block.scriptText, body.animationId);
|
||||
}
|
||||
case "materialize-keyframes": {
|
||||
if (body.allElements && body.allElements.length > 0) {
|
||||
return unrollDynamicAnimations(block.scriptText, body.animationId, body.allElements);
|
||||
}
|
||||
return materializeKeyframesFromScript(
|
||||
block.scriptText,
|
||||
body.animationId,
|
||||
body.keyframes,
|
||||
body.easeEach,
|
||||
body.resolvedSelector,
|
||||
);
|
||||
}
|
||||
case "set-arc-path": {
|
||||
return setArcPathInScript(block.scriptText, body.animationId, {
|
||||
enabled: body.enabled,
|
||||
autoRotate: body.autoRotate ?? false,
|
||||
segments: body.segments ?? [],
|
||||
});
|
||||
}
|
||||
case "update-arc-segment": {
|
||||
return updateArcSegmentInScript(block.scriptText, body.animationId, body.segmentIndex, {
|
||||
...(body.curviness !== undefined ? { curviness: body.curviness } : {}),
|
||||
...(body.cp1 ? { cp1: body.cp1 } : {}),
|
||||
...(body.cp2 ? { cp2: body.cp2 } : {}),
|
||||
});
|
||||
}
|
||||
case "remove-arc-path": {
|
||||
return removeArcPathFromScript(block.scriptText, body.animationId);
|
||||
}
|
||||
case "add-with-keyframes": {
|
||||
const result = addAnimationWithKeyframesToScript(
|
||||
block.scriptText,
|
||||
body.targetSelector,
|
||||
body.position,
|
||||
body.duration,
|
||||
body.keyframes,
|
||||
body.ease,
|
||||
);
|
||||
return result.script;
|
||||
}
|
||||
case "replace-with-keyframes": {
|
||||
const script = removeAnimationFromScript(block.scriptText, body.animationId);
|
||||
const added = addAnimationWithKeyframesToScript(
|
||||
script,
|
||||
body.targetSelector,
|
||||
body.position,
|
||||
body.duration,
|
||||
body.keyframes,
|
||||
body.ease,
|
||||
);
|
||||
return added.script;
|
||||
}
|
||||
case "split-animations": {
|
||||
if (
|
||||
typeof body.originalId !== "string" ||
|
||||
!body.originalId ||
|
||||
typeof body.newId !== "string" ||
|
||||
!body.newId ||
|
||||
typeof body.splitTime !== "number" ||
|
||||
!Number.isFinite(body.splitTime) ||
|
||||
typeof body.elementStart !== "number" ||
|
||||
!Number.isFinite(body.elementStart) ||
|
||||
typeof body.elementDuration !== "number" ||
|
||||
!Number.isFinite(body.elementDuration) ||
|
||||
body.elementDuration <= 0
|
||||
) {
|
||||
return respond(
|
||||
{
|
||||
error:
|
||||
"split-animations requires originalId, newId (non-empty strings), splitTime, elementStart (finite numbers), and elementDuration (positive number)",
|
||||
},
|
||||
400,
|
||||
);
|
||||
}
|
||||
return splitAnimationsInScript(block.scriptText, {
|
||||
originalId: body.originalId,
|
||||
newId: body.newId,
|
||||
splitTime: body.splitTime,
|
||||
elementStart: body.elementStart,
|
||||
elementDuration: body.elementDuration,
|
||||
});
|
||||
}
|
||||
case "split-into-property-groups": {
|
||||
const result = splitIntoPropertyGroupsFromScript(block.scriptText, body.animationId);
|
||||
return result.script;
|
||||
}
|
||||
case "unroll-timeline": {
|
||||
return unrollComputedTimeline(block.scriptText);
|
||||
}
|
||||
case "shift-positions": {
|
||||
const { targetSelector, delta } = body;
|
||||
if (!targetSelector || !Number.isFinite(delta) || delta === 0) return block.scriptText;
|
||||
return shiftPositionsInScript(block.scriptText, targetSelector, delta);
|
||||
}
|
||||
case "scale-positions": {
|
||||
const { targetSelector, oldStart, oldDuration, newStart, newDuration } = body;
|
||||
if (
|
||||
!targetSelector ||
|
||||
!Number.isFinite(oldStart) ||
|
||||
!Number.isFinite(oldDuration) ||
|
||||
!Number.isFinite(newStart) ||
|
||||
!Number.isFinite(newDuration) ||
|
||||
oldDuration <= 0 ||
|
||||
newDuration <= 0
|
||||
)
|
||||
return block.scriptText;
|
||||
if (oldStart === newStart && oldDuration === newDuration) return block.scriptText;
|
||||
return scalePositionsInScript(
|
||||
block.scriptText,
|
||||
targetSelector,
|
||||
oldStart,
|
||||
oldDuration,
|
||||
newStart,
|
||||
newDuration,
|
||||
);
|
||||
}
|
||||
default:
|
||||
return respond({ error: `unknown mutation type: ${(body as { type: string }).type}` }, 400);
|
||||
}
|
||||
}
|
||||
|
||||
async function executeGsapMutationRecast(
|
||||
body: GsapMutationRequest,
|
||||
block: NonNullable<ReturnType<typeof extractGsapScriptBlock>>,
|
||||
respond: (data: unknown, status?: number) => Response,
|
||||
): Promise<GsapMutationResult | Response> {
|
||||
const parser = await loadGsapParser();
|
||||
const {
|
||||
|
||||
@@ -18,7 +18,8 @@ import {
|
||||
setGsapScript,
|
||||
setStyleSheet,
|
||||
} from "./model.js";
|
||||
import { keyToPath } from "./patches.js";
|
||||
import { keyToPath, stylePath } from "./patches.js";
|
||||
import { writeVariableDefault, clearVariableDefault } from "./variableModel.js";
|
||||
|
||||
// ─── Path parser ────────────────────────────────────────────────────────────
|
||||
|
||||
@@ -78,34 +79,20 @@ function parsePath(path: string): ParsedPath | null {
|
||||
|
||||
// ─── Variable JSON model helper ───────────────────────────────────────────────
|
||||
|
||||
type VariableDecl = { id: string; default: unknown; [key: string]: unknown };
|
||||
|
||||
/**
|
||||
* Apply a variable value to `data-composition-variables` on
|
||||
* `document.documentElement`. When `newDefault` is null (remove op),
|
||||
* the variable's `default` is left unchanged (we never erase the schema;
|
||||
* only the override is removed). When `newDefault` is a value, the matching
|
||||
* declaration's `default` is updated in-place. No-ops gracefully when the
|
||||
* attribute or declaration is absent.
|
||||
* Apply a variable patch to `data-composition-variables`. A remove op (null)
|
||||
* deletes the declaration's `default` key, restoring its "no authored default"
|
||||
* state — the exact inverse of a first-set that added a default to a
|
||||
* default-less variable, so undo of such a set round-trips. A value op upserts
|
||||
* the matching declaration's `default`. No-ops when the attr/decl is absent.
|
||||
* Shares the model logic with mutate.ts via ./variableModel.ts.
|
||||
*/
|
||||
function applyVariableDefault(document: Document, id: string, newDefault: unknown): void {
|
||||
const htmlEl = (document as Document & { documentElement?: Element }).documentElement;
|
||||
if (!htmlEl) return;
|
||||
const raw = htmlEl.getAttribute("data-composition-variables");
|
||||
if (!raw) return;
|
||||
let parsed: unknown;
|
||||
try {
|
||||
parsed = JSON.parse(raw);
|
||||
} catch {
|
||||
return;
|
||||
if (newDefault === null) {
|
||||
clearVariableDefault(document, id);
|
||||
} else {
|
||||
writeVariableDefault(document, id, newDefault);
|
||||
}
|
||||
if (!Array.isArray(parsed)) return;
|
||||
const arr = parsed as VariableDecl[];
|
||||
const idx = arr.findIndex((v) => typeof v === "object" && v !== null && v.id === id);
|
||||
if (idx < 0) return;
|
||||
if (newDefault === null) return; // remove op: leave schema default unchanged
|
||||
arr[idx] = { ...arr[idx]!, default: newDefault };
|
||||
htmlEl.setAttribute("data-composition-variables", JSON.stringify(arr));
|
||||
}
|
||||
|
||||
// ─── Patch application ───────────────────────────────────────────────────────
|
||||
@@ -118,14 +105,26 @@ function applyVariableDefault(document: Document, id: string, newDefault: unknow
|
||||
*/
|
||||
export function applyOverrideSet(parsed: ParsedDocument, overrides: OverrideSet): void {
|
||||
const patches: JsonPatchOp[] = [];
|
||||
const rootId = findRoot(parsed.document)?.getAttribute("data-hf-id") ?? null;
|
||||
for (const [key, value] of Object.entries(overrides)) {
|
||||
const path = keyToPath(key);
|
||||
if (!path) continue;
|
||||
if (value === null) {
|
||||
patches.push({ op: "remove", path });
|
||||
continue;
|
||||
} else {
|
||||
patches.push({ op: "replace", path, value });
|
||||
}
|
||||
// A scalar `var.{id}` override must also restore the `--{id}` CSS custom
|
||||
// prop on the root. Current sessions persist a paired style override, but
|
||||
// sets written before the model/CSS split only carry `var.{id}`; derive the
|
||||
// CSS here so `var(--{id})` bindings rehydrate. Object (font/image) values
|
||||
// are never CSS, so they are skipped.
|
||||
if (rootId && key.startsWith("var.") && value !== null && typeof value !== "object") {
|
||||
const cssPath = stylePath(rootId, `--${key.slice("var.".length)}`);
|
||||
patches.push({ op: "replace", path: cssPath, value: String(value) });
|
||||
} else if (rootId && key.startsWith("var.") && value === null) {
|
||||
patches.push({ op: "remove", path: stylePath(rootId, `--${key.slice("var.".length)}`) });
|
||||
}
|
||||
patches.push({ op: "replace", path, value });
|
||||
}
|
||||
applyPatchesToDocument(parsed, patches);
|
||||
}
|
||||
|
||||
@@ -321,7 +321,8 @@ describe("addGsapKeyframe", () => {
|
||||
|
||||
// Parse the SDK-written script and compare against the recast writer fed the
|
||||
// same backfillDefaults the studio always sends (`PROPERTY_DEFAULTS[k] ?? 0`).
|
||||
const { parseGsapScript, addKeyframeToScript } = await import("@hyperframes/core/gsap-parser");
|
||||
const { parseGsapScript } = await import("@hyperframes/core/gsap-parser");
|
||||
const { addKeyframeToScript } = await import("@hyperframes/core/gsap-writer-acorn");
|
||||
const recast = addKeyframeToScript(KF_SCRIPT, animId, 25, { opacity: 0.3, x: 120 }, undefined, {
|
||||
opacity: 1,
|
||||
x: 0,
|
||||
@@ -1093,3 +1094,84 @@ describe("handleSetTiming GSAP sync (CF2 #15/#16)", () => {
|
||||
expect(el?.getAttribute("data-end")).toBe("7");
|
||||
});
|
||||
});
|
||||
|
||||
// ─── WS-3.C dispatch-path guards (validateOp is advisory; handlers self-guard) ──
|
||||
|
||||
describe("addWithKeyframes / replaceWithKeyframes — handler self-guards", () => {
|
||||
const KFS = [
|
||||
{ percentage: 0, properties: { opacity: 0 } },
|
||||
{ percentage: 100, properties: { opacity: 1 } },
|
||||
];
|
||||
const SEL = '[data-hf-id="hf-box"]';
|
||||
|
||||
// Dispatch skips validateOp, so each handler must self-guard: no degenerate
|
||||
// `keyframes: {}` tween (empty list), and no silent degrade-to-add when the
|
||||
// replace target id resolves to nothing.
|
||||
it.each([
|
||||
{
|
||||
name: "addWithKeyframes with empty keyframes",
|
||||
op: {
|
||||
type: "addWithKeyframes",
|
||||
targetSelector: SEL,
|
||||
position: 0,
|
||||
duration: 1,
|
||||
keyframes: [],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "replaceWithKeyframes with an unknown animationId",
|
||||
op: {
|
||||
type: "replaceWithKeyframes",
|
||||
animationId: "does-not-exist",
|
||||
targetSelector: SEL,
|
||||
position: 0,
|
||||
duration: 1,
|
||||
keyframes: KFS,
|
||||
},
|
||||
},
|
||||
] as const)("$name is a no-op (script unchanged)", ({ op }) => {
|
||||
const parsed = fresh();
|
||||
const before = getScript(parsed);
|
||||
const result = applyOp(parsed, op);
|
||||
expect(result.forward).toHaveLength(0);
|
||||
expect(getScript(parsed)).toBe(before);
|
||||
});
|
||||
|
||||
// #11: a stale positional id that re-points to a tween on a DIFFERENT selector
|
||||
// must NOT be silently replaced; only an id still targeting the caller's
|
||||
// selector applies.
|
||||
it("replaceWithKeyframes: stale id whose tween targets another selector is a no-op", () => {
|
||||
const parsed = fresh();
|
||||
const sel = '[data-hf-id="hf-box"]';
|
||||
const add = applyOp(parsed, {
|
||||
type: "addWithKeyframes",
|
||||
targetSelector: sel,
|
||||
position: 0,
|
||||
duration: 1,
|
||||
keyframes: KFS,
|
||||
});
|
||||
const id = add.meta!.animationId!;
|
||||
const before = getScript(parsed);
|
||||
// Same id, but the caller now claims a different selector → bail.
|
||||
const wrong = applyOp(parsed, {
|
||||
type: "replaceWithKeyframes",
|
||||
animationId: id,
|
||||
targetSelector: '[data-hf-id="hf-other"]',
|
||||
position: 0,
|
||||
duration: 1,
|
||||
keyframes: KFS,
|
||||
});
|
||||
expect(wrong.forward).toHaveLength(0);
|
||||
expect(getScript(parsed)).toBe(before);
|
||||
// Correct selector → the replace applies.
|
||||
const right = applyOp(parsed, {
|
||||
type: "replaceWithKeyframes",
|
||||
animationId: id,
|
||||
targetSelector: sel,
|
||||
position: 0,
|
||||
duration: 1,
|
||||
keyframes: KFS,
|
||||
});
|
||||
expect(right.forward.length).toBeGreaterThan(0);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
import { describe, it, expect } from "vitest";
|
||||
import { parseMutable, getElementStyles, setElementStyles } from "./model.js";
|
||||
import { applyOp, validateOp } from "./mutate.js";
|
||||
import { applyPatchesToDocument } from "./apply-patches.js";
|
||||
import { applyPatchesToDocument, applyOverrideSet } from "./apply-patches.js";
|
||||
import { pathToKey } from "./patches.js";
|
||||
import { serializeDocument } from "./serialize.js";
|
||||
|
||||
@@ -603,6 +603,54 @@ describe("addElement", () => {
|
||||
});
|
||||
expect(r.ok).toBe(true);
|
||||
});
|
||||
|
||||
// The dispatch path runs applyOp WITHOUT validateOp, so the handler must
|
||||
// re-enforce these guards itself (return EMPTY) rather than crash or insert.
|
||||
it.each([
|
||||
{ name: "unknown parent id (no crash)", parent: "hf-does-not-exist", html: "<div>x</div>" },
|
||||
{
|
||||
name: "fragment with <script> (never inserts raw markup)",
|
||||
parent: "hf-stage",
|
||||
html: "<div><scr" + "ipt>alert(1)</scr" + "ipt></div>",
|
||||
},
|
||||
{
|
||||
name: "multi-root fragment (no silent drop of extra roots)",
|
||||
parent: "hf-stage",
|
||||
html: "<p>a</p><p>b</p>",
|
||||
},
|
||||
])("handler guard: $name → no-op", ({ parent, html }) => {
|
||||
const result = applyOp(fresh(), { type: "addElement", parent, index: 0, html });
|
||||
expect(result.forward).toHaveLength(0);
|
||||
expect(result.meta?.newId).toBeUndefined();
|
||||
});
|
||||
|
||||
// Regression: a scoped sub-comp parent ("hf-host/hf-leaf") whose bare leaf id
|
||||
// also exists at top level. The forward patch must keep the scoped path so
|
||||
// redo/replay re-inserts under the SAME parent (resolveScoped), not the
|
||||
// canonical top-level dup.
|
||||
it("scoped parent: forward patch keeps the scoped path so redo targets the right parent", () => {
|
||||
const parsed = parseMutable(
|
||||
'<div data-hf-id="hf-stage" data-hf-root style="width:100px;height:100px">' +
|
||||
'<div data-hf-id="hf-host"><p data-hf-id="hf-leaf">in host</p></div>' +
|
||||
'<p data-hf-id="hf-leaf">top-level dup</p>' +
|
||||
"</div>",
|
||||
);
|
||||
const result = applyOp(parsed, {
|
||||
type: "addElement",
|
||||
parent: "hf-host/hf-leaf",
|
||||
index: 0,
|
||||
html: '<span class="ins">x</span>',
|
||||
});
|
||||
expect((result.forward[0]!.value as { parentId: string }).parentId).toBe("hf-host/hf-leaf");
|
||||
const newId = result.meta!.newId!;
|
||||
// undo, then redo: the element must return under the HOST's leaf, not the dup.
|
||||
applyPatchesToDocument(parsed, result.inverse);
|
||||
applyPatchesToDocument(parsed, result.forward);
|
||||
const host = parsed.document.querySelector('[data-hf-id="hf-host"]');
|
||||
const inserted = parsed.document.querySelector(`[data-hf-id="${newId}"]`);
|
||||
expect(inserted).not.toBeNull();
|
||||
expect(host?.contains(inserted as Node)).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
// ─── setElementStyles (model helper) ──────────────────────────────────────────
|
||||
@@ -784,6 +832,41 @@ describe("setVariableValue", () => {
|
||||
source: "https://fonts.googleapis.com/css2?family=Roboto",
|
||||
});
|
||||
});
|
||||
|
||||
// Regression: a variable declared WITHOUT a `default` key. The forward set adds
|
||||
// the default; undo must DELETE it (restore the no-default state), not strand
|
||||
// the set value (apply-patches previously no-op'd the remove).
|
||||
it("B1: undo of a set on a default-less variable restores the no-default state", () => {
|
||||
const html = `<!DOCTYPE html><html data-composition-id="c1" data-composition-duration="5" data-composition-variables='${JSON.stringify(
|
||||
[{ id: "brand-x", type: "color", label: "X" }],
|
||||
)}'><body><div data-hf-id="hf-stage" data-hf-root style="width: 1280px; height: 720px" data-duration="5"></div></body></html>`;
|
||||
const parsed = parseMutable(html);
|
||||
const before = serializeDocument(parsed);
|
||||
const result = applyOp(parsed, { type: "setVariableValue", id: "brand-x", value: "#ff0000" });
|
||||
expect(readVarDefault(parsed, "brand-x")).toBe("#ff0000");
|
||||
applyPatchesToDocument(parsed, result.inverse);
|
||||
expect(readVarDefault(parsed, "brand-x")).toBeUndefined();
|
||||
expect(serializeDocument(parsed)).toBe(before);
|
||||
});
|
||||
|
||||
// #9: a legacy override set (only the `var.{id}` key, no paired style key, as
|
||||
// written before the model/CSS split) must still restore the --{id} CSS prop
|
||||
// on replay so `var(--{id})` bindings rehydrate. Object values write no CSS.
|
||||
it("B1: applyOverrideSet derives the --{id} CSS prop from a var.{id}-only override", () => {
|
||||
const parsed = freshWithVars();
|
||||
applyOverrideSet(parsed, { "var.brand-color-primary": "#ff0000" });
|
||||
expect(readVarDefault(parsed, "brand-color-primary")).toBe("#ff0000");
|
||||
const root = parsed.document.querySelector("[data-hf-root]");
|
||||
expect(root?.getAttribute("style")).toContain("--brand-color-primary: #ff0000");
|
||||
});
|
||||
|
||||
it("B2: applyOverrideSet writes NO CSS prop for an object (font) override", () => {
|
||||
const parsed = freshWithVars();
|
||||
applyOverrideSet(parsed, { "var.brand-font": { name: "Roboto", source: "x" } });
|
||||
expect(readVarDefault(parsed, "brand-font")).toEqual({ name: "Roboto", source: "x" });
|
||||
const root = parsed.document.querySelector("[data-hf-root]");
|
||||
expect(root?.getAttribute("style") ?? "").not.toContain("--brand-font");
|
||||
});
|
||||
});
|
||||
|
||||
// ─── setCompositionMetadata ───────────────────────────────────────────────────
|
||||
|
||||
@@ -50,7 +50,7 @@ import {
|
||||
patchRemove,
|
||||
} from "./patches.js";
|
||||
import { upsertCssRule } from "./cssWriter.js";
|
||||
import { mintHfId } from "@hyperframes/core/hf-ids";
|
||||
import { mintHfId, EXCLUDED_TAGS } from "@hyperframes/core/hf-ids";
|
||||
import { parseGsapScriptAcornForWrite } from "@hyperframes/core/gsap-parser-acorn";
|
||||
import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
|
||||
import {
|
||||
@@ -75,6 +75,7 @@ import {
|
||||
unrollDynamicAnimations,
|
||||
} from "@hyperframes/core/gsap-writer-acorn";
|
||||
import { deriveKeyframeBackfillDefaults } from "./keyframeBackfill.js";
|
||||
import { readVariableDefault, writeVariableDefault } from "./variableModel.js";
|
||||
|
||||
export interface MutationResult {
|
||||
forward: JsonPatchOp[];
|
||||
@@ -638,17 +639,6 @@ function handleRemoveElement(parsed: ParsedDocument, ids: HfId[]): MutationResul
|
||||
|
||||
// ─── addElement handler ───────────────────────────────────────────────────────
|
||||
|
||||
// Tags that must never receive a stable hf-id — mirrors hfIds.ts EXCLUDED_TAGS.
|
||||
const HF_EXCLUDED_TAGS = new Set([
|
||||
"script",
|
||||
"style",
|
||||
"template",
|
||||
"meta",
|
||||
"link",
|
||||
"noscript",
|
||||
"base",
|
||||
]);
|
||||
|
||||
/**
|
||||
* Resolve all existing hf-ids in the document into `assigned` so that
|
||||
* mintHfId cannot issue an id that already exists in the composition.
|
||||
@@ -668,11 +658,11 @@ function collectDocumentHfIds(document: Document): Set<string> {
|
||||
* Returns the minted id of `root` (or its existing id if already stamped).
|
||||
*/
|
||||
function mintFragmentIds(root: Element, assigned: Set<string>): string {
|
||||
if (!root.getAttribute("data-hf-id") && !HF_EXCLUDED_TAGS.has(root.tagName.toLowerCase())) {
|
||||
if (!root.getAttribute("data-hf-id") && !EXCLUDED_TAGS.has(root.tagName.toLowerCase())) {
|
||||
root.setAttribute("data-hf-id", mintHfId(root, assigned));
|
||||
}
|
||||
for (const el of Array.from(root.querySelectorAll("*"))) {
|
||||
if (HF_EXCLUDED_TAGS.has(el.tagName.toLowerCase())) continue;
|
||||
if (EXCLUDED_TAGS.has(el.tagName.toLowerCase())) continue;
|
||||
if (el.getAttribute("data-hf-id")) continue; // pinned
|
||||
el.setAttribute("data-hf-id", mintHfId(el, assigned));
|
||||
}
|
||||
@@ -688,23 +678,37 @@ function mintFragmentIds(root: Element, assigned: Set<string>): string {
|
||||
* Inverse = patchRemove of the new element's path; mirrors handleRemoveElement's
|
||||
* inverse = patchAdd. Forward/inverse are thus symmetric with that handler.
|
||||
*/
|
||||
/**
|
||||
* Parse an HTML fragment in the target document and return its single root
|
||||
* element, or null when it is empty, multi-root, or contains a <script>.
|
||||
* The dispatch path skips validateOp, so these guards are re-enforced here:
|
||||
* never insert raw <script>, never silently drop extra roots.
|
||||
*/
|
||||
function parseInsertableFragment(document: Document, html: string): Element | null {
|
||||
// Same temp-div approach as apply-patches.ts to avoid cross-document issues.
|
||||
const tmp = document.createElement("div");
|
||||
tmp.innerHTML = html;
|
||||
if (tmp.querySelector("script")) return null;
|
||||
const node = tmp.firstElementChild;
|
||||
if (!node || node.nextElementSibling) return null;
|
||||
return node;
|
||||
}
|
||||
|
||||
function handleAddElement(
|
||||
parsed: ParsedDocument,
|
||||
parent: HfId | null,
|
||||
index: number,
|
||||
html: string,
|
||||
): MutationResult {
|
||||
// Resolve parent element (null → document body).
|
||||
// Resolve parent element (null → document body). Narrow rather than assert:
|
||||
// _dispatch does not run validateOp, so a bad parent id must not crash here.
|
||||
const parentEl =
|
||||
parent === null
|
||||
? ((parsed.document as unknown as { body: Element }).body as unknown as Element)
|
||||
: (resolveScoped(parsed.document, parent) as Element);
|
||||
? ((parsed.document as Document & { body?: Element | null }).body ?? null)
|
||||
: resolveScoped(parsed.document, parent);
|
||||
if (!parentEl) return EMPTY;
|
||||
|
||||
// Parse the fragment within the target document to avoid cross-document issues
|
||||
// (same approach as apply-patches.ts:222). validateOp guarantees a non-null firstElementChild.
|
||||
const tmp = parsed.document.createElement("div");
|
||||
tmp.innerHTML = html;
|
||||
const node = tmp.firstElementChild;
|
||||
const node = parseInsertableFragment(parsed.document, html);
|
||||
if (!node) return EMPTY;
|
||||
|
||||
// Mint ids against the LIVE doc's existing id set (the #1 landmine — a fresh
|
||||
@@ -718,8 +722,11 @@ function handleAddElement(
|
||||
const ref = Array.from(parentEl.children)[index] ?? null;
|
||||
parentEl.insertBefore(node, ref);
|
||||
|
||||
// parentId for the inverse patch: bare id of the parent, or null for body root.
|
||||
const parentId = parent !== null ? (parentEl.getAttribute("data-hf-id") ?? null) : null;
|
||||
// parentId for the inverse/replay patch: preserve the caller's id verbatim
|
||||
// (scoped "hf-host/hf-leaf" path or composition id), not the bare data-hf-id —
|
||||
// apply-patches resolves it via findById→resolveScoped, so dropping the host
|
||||
// prefix would re-insert under the wrong (canonical) parent on redo/replay.
|
||||
const parentId = parent;
|
||||
|
||||
const path = elementPath(newId);
|
||||
return {
|
||||
@@ -800,59 +807,9 @@ function handleSetCompositionMetadata(
|
||||
}
|
||||
|
||||
// ─── Variable JSON model helpers ─────────────────────────────────────────────
|
||||
|
||||
type VariableDecl = { id: string; default: unknown; [key: string]: unknown };
|
||||
|
||||
/**
|
||||
* Read the current `default` value for a variable id from
|
||||
* `document.documentElement`'s `data-composition-variables` attribute.
|
||||
* Returns undefined when the attribute is absent, the JSON is invalid,
|
||||
* or no entry matches the given id.
|
||||
*/
|
||||
function readVariableDefault(document: Document, id: string): unknown {
|
||||
const htmlEl = (document as Document & { documentElement?: Element }).documentElement;
|
||||
if (!htmlEl) return undefined;
|
||||
const raw = htmlEl.getAttribute("data-composition-variables");
|
||||
if (!raw) return undefined;
|
||||
let parsed: unknown;
|
||||
try {
|
||||
parsed = JSON.parse(raw);
|
||||
} catch {
|
||||
return undefined;
|
||||
}
|
||||
if (!Array.isArray(parsed)) return undefined;
|
||||
const entry = (parsed as unknown[]).find(
|
||||
(v): v is VariableDecl => typeof v === "object" && v !== null && (v as VariableDecl).id === id,
|
||||
);
|
||||
return entry?.default;
|
||||
}
|
||||
|
||||
/**
|
||||
* Upsert a variable's `default` in `data-composition-variables` on
|
||||
* `document.documentElement`. No-ops when the attribute is absent or
|
||||
* contains no declaration for the given id (we never auto-add declarations
|
||||
* for undeclared variables — keep the schema authoritative).
|
||||
* Returns true when the attribute was updated.
|
||||
*/
|
||||
function writeVariableDefault(document: Document, id: string, newDefault: unknown): boolean {
|
||||
const htmlEl = (document as Document & { documentElement?: Element }).documentElement;
|
||||
if (!htmlEl) return false;
|
||||
const raw = htmlEl.getAttribute("data-composition-variables");
|
||||
if (!raw) return false;
|
||||
let parsed: unknown;
|
||||
try {
|
||||
parsed = JSON.parse(raw);
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
if (!Array.isArray(parsed)) return false;
|
||||
const arr = parsed as VariableDecl[];
|
||||
const idx = arr.findIndex((v) => typeof v === "object" && v !== null && v.id === id);
|
||||
if (idx < 0) return false; // variable not declared — don't auto-add
|
||||
arr[idx] = { ...arr[idx]!, default: newDefault };
|
||||
htmlEl.setAttribute("data-composition-variables", JSON.stringify(arr));
|
||||
return true;
|
||||
}
|
||||
// readVariableDefault / writeVariableDefault now live in ./variableModel.ts,
|
||||
// shared with the patch-replay path (apply-patches.ts) so the model shape can't
|
||||
// diverge between forward mutation and replay.
|
||||
|
||||
/**
|
||||
* True when the value is a FontValue or ImageValue object
|
||||
@@ -861,7 +818,7 @@ function writeVariableDefault(document: Document, id: string, newDefault: unknow
|
||||
function isObjectVariableValue(
|
||||
value: string | number | boolean | FontValue | ImageValue,
|
||||
): value is FontValue | ImageValue {
|
||||
return typeof value === "object" && value !== null;
|
||||
return typeof value === "object" && value !== null && !Array.isArray(value);
|
||||
}
|
||||
|
||||
function handleSetVariableValue(
|
||||
@@ -964,6 +921,9 @@ function handleAddWithKeyframes(
|
||||
): MutationResult {
|
||||
const script = getGsapScript(parsed.document);
|
||||
if (!script) throw new Error("No GSAP script block found in the composition.");
|
||||
// Dispatch skips validateOp — re-enforce the empty-keyframes guard here so we
|
||||
// never emit a degenerate `keyframes: {}` tween.
|
||||
if (op.keyframes.length === 0) return EMPTY;
|
||||
const { script: newScript, id: animationId } = addAnimationWithKeyframesToScript(
|
||||
script,
|
||||
op.targetSelector,
|
||||
@@ -983,10 +943,21 @@ function handleReplaceWithKeyframes(
|
||||
): MutationResult {
|
||||
const script = getGsapScript(parsed.document);
|
||||
if (!script) throw new Error("No GSAP script block found in the composition.");
|
||||
if (op.keyframes.length === 0) return EMPTY;
|
||||
// #11: tween IDs are position-derived and re-point after any structural edit,
|
||||
// so a stale `animationId` can resolve to a DIFFERENT tween. Require the
|
||||
// located animation to still target the selector the caller expects; if it is
|
||||
// absent or now points at another element, bail rather than silently replace
|
||||
// the wrong tween. (validateOp's gsapAnimationMissing only catches absent ids.)
|
||||
const located = locateGsapAnimation(parsed, op.animationId);
|
||||
if (!located || located.animation.targetSelector !== op.targetSelector) return EMPTY;
|
||||
// Step 1: remove the existing tween. Position-derived IDs renumber, so the
|
||||
// inverse patch restores the full GSAP script rather than trying to re-insert
|
||||
// by ID (handled by the coarse gsapScriptChange patch pair).
|
||||
const afterRemove = removeAnimationFromScript(script, op.animationId);
|
||||
// Defense in depth: if the id resolved to nothing the script is unchanged —
|
||||
// bail rather than degrade the replace into a plain add (duplicate tween).
|
||||
if (afterRemove === script) return EMPTY;
|
||||
// Step 2: insert the replacement keyframed tween.
|
||||
const { script: newScript, id: animationId } = addAnimationWithKeyframesToScript(
|
||||
afterRemove,
|
||||
|
||||
@@ -0,0 +1,79 @@
|
||||
/**
|
||||
* Shared helpers for the composition variable JSON model
|
||||
* (`data-composition-variables` on `document.documentElement`).
|
||||
*
|
||||
* Single source for the parse → find-by-id → read/write/clear logic so the
|
||||
* forward-mutation path (engine/mutate.ts) and the patch-replay path
|
||||
* (engine/apply-patches.ts) can never disagree on the model's shape.
|
||||
*/
|
||||
|
||||
type VariableDecl = { id: string; default?: unknown; [key: string]: unknown };
|
||||
|
||||
function getHtmlEl(document: Document): Element | null {
|
||||
return (document as Document & { documentElement?: Element }).documentElement ?? null;
|
||||
}
|
||||
|
||||
/** Parse the variable declaration array, or null when absent/invalid. */
|
||||
function readDecls(document: Document): { htmlEl: Element; arr: VariableDecl[] } | null {
|
||||
const htmlEl = getHtmlEl(document);
|
||||
if (!htmlEl) return null;
|
||||
const raw = htmlEl.getAttribute("data-composition-variables");
|
||||
if (!raw) return null;
|
||||
let parsed: unknown;
|
||||
try {
|
||||
parsed = JSON.parse(raw);
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
if (!Array.isArray(parsed)) return null;
|
||||
return { htmlEl, arr: parsed as VariableDecl[] };
|
||||
}
|
||||
|
||||
function indexOfId(arr: VariableDecl[], id: string): number {
|
||||
return arr.findIndex((v) => typeof v === "object" && v !== null && v.id === id);
|
||||
}
|
||||
|
||||
/**
|
||||
* Read the current `default` value for a variable id. Returns undefined when
|
||||
* the attribute is absent, the JSON is invalid, or no entry matches the id.
|
||||
*/
|
||||
export function readVariableDefault(document: Document, id: string): unknown {
|
||||
const decls = readDecls(document);
|
||||
if (!decls) return undefined;
|
||||
const idx = indexOfId(decls.arr, id);
|
||||
return idx < 0 ? undefined : decls.arr[idx]?.default;
|
||||
}
|
||||
|
||||
/**
|
||||
* Upsert a variable's `default`. No-ops (returns false) when the attribute is
|
||||
* absent or contains no declaration for the id — we never auto-add declarations
|
||||
* for undeclared variables, keeping the schema authoritative. Returns true when
|
||||
* the attribute was updated.
|
||||
*/
|
||||
export function writeVariableDefault(document: Document, id: string, newDefault: unknown): boolean {
|
||||
const decls = readDecls(document);
|
||||
if (!decls) return false;
|
||||
const idx = indexOfId(decls.arr, id);
|
||||
if (idx < 0) return false; // variable not declared — don't auto-add
|
||||
decls.arr[idx] = { ...decls.arr[idx]!, default: newDefault };
|
||||
decls.htmlEl.setAttribute("data-composition-variables", JSON.stringify(decls.arr));
|
||||
return true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the `default` key from a variable declaration, restoring its
|
||||
* "no authored default" state. This is the exact inverse of writeVariableDefault
|
||||
* adding a default to a decl that had none, so undo of a first-set on a
|
||||
* default-less variable round-trips. No-ops when the decl or key is absent.
|
||||
* Returns true when the attribute was updated.
|
||||
*/
|
||||
export function clearVariableDefault(document: Document, id: string): boolean {
|
||||
const decls = readDecls(document);
|
||||
if (!decls) return false;
|
||||
const idx = indexOfId(decls.arr, id);
|
||||
if (idx < 0 || !(decls.arr[idx]! && "default" in decls.arr[idx]!)) return false;
|
||||
const { default: _drop, ...rest } = decls.arr[idx]!;
|
||||
decls.arr[idx] = rest as VariableDecl;
|
||||
decls.htmlEl.setAttribute("data-composition-variables", JSON.stringify(decls.arr));
|
||||
return true;
|
||||
}
|
||||
@@ -404,7 +404,7 @@ export interface Composition {
|
||||
* Inverse = removeElement of the returned id.
|
||||
*/
|
||||
addElement(parent: HfId | null, index: number, html: string): HfId;
|
||||
setVariableValue(id: string, value: string | number | boolean): void;
|
||||
setVariableValue(id: string, value: string | number | boolean | FontValue | ImageValue): void;
|
||||
/**
|
||||
* Read enter/exit times and GSAP labels for every timed element (WS-C).
|
||||
* Derives enterAt/exitAt using the same data-duration vs data-end preference
|
||||
|
||||
Reference in New Issue
Block a user