mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-09 03:16:38 +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.
77 lines
2.8 KiB
TypeScript
77 lines
2.8 KiB
TypeScript
export type StudioFeatureFlagEnv = Record<string, boolean | string | undefined>;
|
|
|
|
const STUDIO_PREVIEW_MANUAL_DRAGGING_ENV = "VITE_STUDIO_ENABLE_PREVIEW_MANUAL_DRAGGING";
|
|
const STUDIO_INSPECTOR_PANELS_ENV = "VITE_STUDIO_ENABLE_INSPECTOR_PANELS";
|
|
const STUDIO_MOTION_PANEL_ENV = "VITE_STUDIO_ENABLE_MOTION_PANEL";
|
|
const TRUTHY_ENV_VALUES = new Set(["1", "true", "yes", "on", "enabled"]);
|
|
const FALSY_ENV_VALUES = new Set(["0", "false", "no", "off", "disabled"]);
|
|
|
|
export function resolveStudioBooleanEnvFlag(
|
|
env: StudioFeatureFlagEnv,
|
|
names: string[],
|
|
fallback: boolean,
|
|
): boolean {
|
|
for (const name of names) {
|
|
const value = env[name];
|
|
if (typeof value === "boolean") return value;
|
|
if (typeof value !== "string") continue;
|
|
|
|
const normalized = value.trim().toLowerCase();
|
|
if (!normalized) continue;
|
|
if (TRUTHY_ENV_VALUES.has(normalized)) return true;
|
|
if (FALSY_ENV_VALUES.has(normalized)) return false;
|
|
}
|
|
|
|
return fallback;
|
|
}
|
|
|
|
// `import.meta.env` is a Vite-only extension. In non-Vite ESM hosts
|
|
// (Next.js / Turbopack, Node, jest in some configs) it's undefined,
|
|
// and downstream `env[name]` reads would crash. Fall back to `{}` so
|
|
// every flag resolves to its declared default outside Vite. Direct
|
|
// property access keeps Vite's compile-time transform happy.
|
|
//
|
|
// When the studio is served as a pre-built SPA by the embedded Hono server,
|
|
// `import.meta.env` values were baked at build time. The server injects
|
|
// `window.__HF_STUDIO_ENV__` with any `VITE_STUDIO_*` env vars from the
|
|
// user's shell, so runtime overrides take precedence over baked defaults.
|
|
const runtimeEnv =
|
|
typeof window !== "undefined"
|
|
? ((window as Window & { __HF_STUDIO_ENV__?: StudioFeatureFlagEnv }).__HF_STUDIO_ENV__ ?? {})
|
|
: {};
|
|
const env = { ...(import.meta.env ?? {}), ...runtimeEnv } as StudioFeatureFlagEnv;
|
|
|
|
export const STUDIO_PREVIEW_MANUAL_EDITING_ENABLED = resolveStudioBooleanEnvFlag(
|
|
env,
|
|
[STUDIO_PREVIEW_MANUAL_DRAGGING_ENV, "VITE_STUDIO_PREVIEW_MANUAL_EDITING_ENABLED"],
|
|
true,
|
|
);
|
|
|
|
export const STUDIO_INSPECTOR_PANELS_ENABLED = resolveStudioBooleanEnvFlag(
|
|
env,
|
|
[STUDIO_INSPECTOR_PANELS_ENV, "VITE_STUDIO_INSPECTOR_PANELS_ENABLED"],
|
|
true,
|
|
);
|
|
|
|
export const STUDIO_MOTION_PANEL_ENABLED = resolveStudioBooleanEnvFlag(
|
|
env,
|
|
[STUDIO_MOTION_PANEL_ENV, "VITE_STUDIO_MOTION_PANEL_ENABLED"],
|
|
false,
|
|
);
|
|
|
|
export const STUDIO_BLOCKS_PANEL_ENABLED = resolveStudioBooleanEnvFlag(
|
|
env,
|
|
["VITE_STUDIO_ENABLE_BLOCKS_PANEL", "VITE_STUDIO_BLOCKS_PANEL_ENABLED"],
|
|
true,
|
|
);
|
|
|
|
export const STUDIO_GSAP_PANEL_ENABLED = resolveStudioBooleanEnvFlag(
|
|
env,
|
|
["VITE_STUDIO_ENABLE_GSAP_PANEL", "VITE_STUDIO_GSAP_PANEL_ENABLED"],
|
|
false,
|
|
);
|
|
|
|
export const STUDIO_PREVIEW_SELECTION_ENABLED = STUDIO_INSPECTOR_PANELS_ENABLED;
|
|
|
|
export const STUDIO_MANUAL_EDITING_DISABLED_TITLE = "Manual editing is temporarily disabled";
|