mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-03 04:38:33 +00:00
Miguel Ángel
fb2e21090f
* feat(studio): GSAP tween editing in Design panel
Add a GSAP animation editor to the studio Design panel: select an element,
view and edit its tweens (properties, easing, timing), add/delete animations,
and drag custom bezier speed curves — all persisted back to the composition
HTML. Gated behind VITE_STUDIO_ENABLE_GSAP_PANEL.
Parsing of existing GSAP source now uses a recast + Babel AST parser instead of
regex, giving scope resolution, stable tween IDs, and round-trip preservation of
extras and unresolved raw values.
recast compiles to CommonJS that calls require("fs"), which breaks browser and
Vite SSR bundles. To contain it, @hyperframes/core is split into an isomorphic
layer and a Node-only AST layer:
- gsapSerialize.ts holds the recast-free helpers (serialization, keyframe
conversion, validation, shared types). htmlParser.ts is now fully isomorphic.
- parseGsapScript and the script-mutation helpers live in gsapParser.ts,
reachable only via the @hyperframes/core/gsap-parser subpath, loaded
server-side by the studio-api mutation routes and the linter via dynamic
import (recast stays external under SSR).
- The barrel and the gsap-constants subpath are recast-free, so studio browser
bundles never trace recast.
Adds AST parser unit + stress coverage and e2e helpers for the panel.
* fix(lint): await async lintHyperframeHtml in all callers
lintHyperframeHtml became async (gsap rules use dynamic import)
but lintProject and check-hyperframe-static weren't awaiting it,
causing typecheck failures and runtime crashes in CI.
Also wire LintRule type in gsap rules to fix fallow unused-type
finding, and suppress render.ts exported-for-tests symbols.
75 lines
2.3 KiB
TypeScript
75 lines
2.3 KiB
TypeScript
import fs from "node:fs";
|
|
import path from "node:path";
|
|
import { lintHyperframeHtml } from "../src/lint/hyperframeLinter";
|
|
import type { HyperframeLintResult } from "../src/lint/types";
|
|
|
|
function formatCounts(result: HyperframeLintResult): string {
|
|
const parts = [`${result.warningCount} warning${result.warningCount === 1 ? "" : "s"}`];
|
|
if (result.infoCount > 0) {
|
|
parts.push(`${result.infoCount} info${result.infoCount === 1 ? "" : "s"}`);
|
|
}
|
|
return parts.join(", ");
|
|
}
|
|
|
|
function formatHumanOutput(result: HyperframeLintResult, resolvedPath: string): string {
|
|
const counts = result.ok
|
|
? formatCounts(result)
|
|
: `${result.errorCount} error${result.errorCount === 1 ? "" : "s"}, ${formatCounts(result)}`;
|
|
const lines = [
|
|
result.ok ? `PASS ${resolvedPath} (${counts})` : `FAIL ${resolvedPath} (${counts})`,
|
|
];
|
|
|
|
for (const finding of result.findings) {
|
|
lines.push(`- [${finding.severity.toUpperCase()}] ${finding.code}: ${finding.message}`);
|
|
if (finding.selector) {
|
|
lines.push(` selector: ${finding.selector}`);
|
|
}
|
|
if (finding.elementId) {
|
|
lines.push(` elementId: ${finding.elementId}`);
|
|
}
|
|
if (finding.fixHint) {
|
|
lines.push(` fix: ${finding.fixHint}`);
|
|
}
|
|
}
|
|
|
|
return lines.join("\n");
|
|
}
|
|
|
|
async function main() {
|
|
const args = process.argv.slice(2);
|
|
const normalizedArgs = args[0] === "--" ? args.slice(1) : args;
|
|
const jsonOutput = normalizedArgs.includes("--json");
|
|
const positionalArgs = normalizedArgs.filter((arg) => arg !== "--json");
|
|
const inputPath = positionalArgs[0];
|
|
if (!inputPath) {
|
|
console.error(
|
|
"Usage: bun run check:hyperframe-html [--json] <path-to-html>\nExample: bun run check:hyperframe-html core/src/tests/broken-video.html",
|
|
);
|
|
process.exit(2);
|
|
}
|
|
|
|
const resolvedPath = path.resolve(process.cwd(), inputPath);
|
|
if (!fs.existsSync(resolvedPath)) {
|
|
console.error(`File not found: ${resolvedPath}`);
|
|
process.exit(2);
|
|
}
|
|
|
|
const html = fs.readFileSync(resolvedPath, "utf-8");
|
|
const result = await lintHyperframeHtml(html, { filePath: resolvedPath });
|
|
|
|
if (jsonOutput) {
|
|
console.log(JSON.stringify(result, null, 2));
|
|
process.exit(result.ok ? 0 : 1);
|
|
}
|
|
|
|
if (result.ok) {
|
|
console.log(formatHumanOutput(result, resolvedPath));
|
|
process.exit(0);
|
|
}
|
|
|
|
console.error(formatHumanOutput(result, resolvedPath));
|
|
process.exit(1);
|
|
}
|
|
|
|
main();
|