Skip to content

feat: catch html5 JS syntax errors in validate and correct seek/merge docs#5

Merged
dazzatronus merged 1 commit into
masterfrom
feat/html5-seek-merge-validation
Jul 8, 2026
Merged

feat: catch html5 JS syntax errors in validate and correct seek/merge docs#5
dazzatronus merged 1 commit into
masterfrom
feat/html5-seek-merge-validation

Conversation

@dazzatronus

Copy link
Copy Markdown
Contributor

What changed

Validate now checks html5 JS syntax offline. Each asset.js string is passed through new Function() during shotstack validate. A syntax error renders a completely blank clip with no render error (status: "done", no error field) — this is the only feedback loop before spending credits.

Skill docs corrected with findings from real renders:

  • onUpdate does not fire under seek. The harness seeks the GSAP timeline to each frame timestamp without playing through, so DOM mutations in onUpdate callbacks (textContent, innerHTML, class swaps) never appear in the rendered video. The count-up snippet — the most referenced data-display pattern — used onUpdate to mutate textContent and produced $0 in every frame. Replaced with a bake-and-reveal pattern: final values in HTML, animate opacity/transform only.
  • Merge fields resolve in html5 css and js, not just html. Added an Edit-wide merge fields section to agent-core.md covering rules (UPPER_SNAKE_CASE, case sensitive, whitespace inside braces ignored), where they resolve (every string value in the Edit), when to use merge vs baking at generation time, and the ?data=true&merged=true status check.
  • Documented silent blank-frame failure in troubleshooting.md and html5.md common mistakes: JS syntax or runtime errors produce blank clips with status: "done" and no error.

How to verify

bun test                    # 96 pass, 0 fail (3 new tests for JS syntax check)
bun run typecheck           # clean
shotstack validate broken.json  # catches )var syntax error with exit 1

The )var pattern that caused the original blank-frame bug is caught:

✗ timeline.tracks[0].clips[0].asset.js: asset.js has a syntax error — the html5 clip will render completely blank with no render error. Unexpected identifier

… docs

Validate now runs each html5 asset.js string through new Function() to
catch syntax errors offline — a JS error renders a completely blank clip
with no render error, so this is the only feedback loop before spending
credits.

Skill docs corrected with findings from real renders:

- onUpdate callbacks do not fire under seek. The harness seeks the GSAP
  timeline to each frame without playing through, so DOM mutations in
  onUpdate (textContent, innerHTML) never appear. Replaced the count-up
  snippet with a bake-and-reveal pattern: final values in HTML, animate
  opacity/transform only.

- Merge fields resolve in html5 css and js, not just html. Added an
  Edit-wide merge fields section to agent-core.md covering rules
  (UPPER_SNAKE_CASE, case sensitive, whitespace ignored), where they
  resolve (every string in the Edit), when to use merge vs baking at
  generation time, and the ?data=true&merged=true status check.

- Documented silent blank-frame failure in troubleshooting and html5
  common mistakes: JS errors produce blank clips with status done.
@dazzatronus dazzatronus force-pushed the feat/html5-seek-merge-validation branch from b5f714d to c42a19a Compare July 8, 2026 08:58
@dazzatronus dazzatronus merged commit b2e19e4 into master Jul 8, 2026
@dazzatronus dazzatronus deleted the feat/html5-seek-merge-validation branch July 8, 2026 09:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant