mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-05 17:30:50 +00:00
Miguel Ángel
0bf15119f8
Compositions are now self-contained: the compiler captures font files and embeds them as woff2 data URIs, eliminating silent render-time fallback when the render environment lacks the author's fonts. Resolution order (each tier falls through to the next): 1. Existing @font-face → use as-is 2. Bundled alias (38 cross-platform mappings) → embed data URI 3. Google Fonts → fetch, cache, embed 4. Local system font → locate on OS, compress to woff2, embed 5. Local @font-face paths → read file, compress, inline as data URI 6. External CDN stylesheets → fetch CSS, extract @font-face, inline 7. Alias map fallback → closest bundled equivalent 8. Actionable error with guidance Key changes: - System font locator (macOS/Windows/Linux) with path-bounding and symlink defense (realpathSync + O_NOFOLLOW) - woff2 compression via wawoff2 (WASM, cross-platform) - Multi-weight/style variant capture with length-sorted token matching - External stylesheet inlining with SSRF defense (assertPublicHttpsUrl, HTTPS-only, private-host blocking, 2MB cap, 4-concurrent limit) - Studio auto-import via GET /fonts/file API + renderAliasFor() derived from shared FONT_ALIAS_MAP (no more hand-curated drift) - failClosedFontFetch throws on unresolved fonts in distributed renders - Single source of truth: @hyperframes/core/fonts/aliases - system_font_will_alias lint rule (escalates to warning for distributed) - Default to Inter + JetBrains Mono in templates and CSS reset
116 lines
3.7 KiB
TypeScript
116 lines
3.7 KiB
TypeScript
import { describe, it, expect } from "vitest";
|
|
import { generateBaseHtml, getStageStyles } from "./base.js";
|
|
import {
|
|
GSAP_CDN,
|
|
BASE_STYLES,
|
|
ELEMENT_BASE_STYLES,
|
|
MEDIA_STYLES,
|
|
TEXT_STYLES,
|
|
ZOOM_CONTAINER_STYLES,
|
|
} from "./constants.js";
|
|
|
|
describe("generateBaseHtml", () => {
|
|
it("generates valid HTML structure with DOCTYPE", () => {
|
|
const html = generateBaseHtml();
|
|
expect(html).toContain("<!DOCTYPE html>");
|
|
expect(html).toContain("<html");
|
|
expect(html).toContain("</html>");
|
|
expect(html).toContain("<head>");
|
|
expect(html).toContain("</head>");
|
|
expect(html).toContain("<body>");
|
|
expect(html).toContain("</body>");
|
|
});
|
|
|
|
it("includes #stage element", () => {
|
|
const html = generateBaseHtml();
|
|
expect(html).toContain('id="stage"');
|
|
});
|
|
|
|
it("includes #stage-zoom-container element", () => {
|
|
const html = generateBaseHtml();
|
|
expect(html).toContain('id="stage-zoom-container"');
|
|
});
|
|
|
|
it("defaults to portrait resolution", () => {
|
|
const html = generateBaseHtml();
|
|
expect(html).toContain('data-resolution="portrait"');
|
|
});
|
|
|
|
it("accepts landscape resolution", () => {
|
|
const html = generateBaseHtml("landscape");
|
|
expect(html).toContain('data-resolution="landscape"');
|
|
});
|
|
|
|
it("accepts portrait resolution explicitly", () => {
|
|
const html = generateBaseHtml("portrait");
|
|
expect(html).toContain('data-resolution="portrait"');
|
|
});
|
|
|
|
it("includes meta charset and viewport", () => {
|
|
const html = generateBaseHtml();
|
|
expect(html).toContain('charset="UTF-8"');
|
|
expect(html).toContain('name="viewport"');
|
|
});
|
|
});
|
|
|
|
describe("getStageStyles", () => {
|
|
it("returns landscape stage styles (1920x1080)", () => {
|
|
const styles = getStageStyles("landscape");
|
|
expect(styles).toContain("width: 1920px");
|
|
expect(styles).toContain("height: 1080px");
|
|
expect(styles).toContain("position: relative");
|
|
expect(styles).toContain("overflow: hidden");
|
|
});
|
|
|
|
it("returns portrait stage styles (1080x1920)", () => {
|
|
const styles = getStageStyles("portrait");
|
|
expect(styles).toContain("width: 1080px");
|
|
expect(styles).toContain("height: 1920px");
|
|
});
|
|
|
|
it("defaults to portrait", () => {
|
|
const styles = getStageStyles();
|
|
expect(styles).toContain("width: 1080px");
|
|
expect(styles).toContain("height: 1920px");
|
|
});
|
|
});
|
|
|
|
describe("constants", () => {
|
|
it("GSAP_CDN is a valid URL", () => {
|
|
expect(GSAP_CDN).toMatch(/^https:\/\//);
|
|
expect(GSAP_CDN).toContain("gsap");
|
|
expect(GSAP_CDN).toContain(".min.js");
|
|
});
|
|
|
|
it("BASE_STYLES contains reset styles", () => {
|
|
expect(BASE_STYLES).toContain("margin: 0");
|
|
expect(BASE_STYLES).toContain("padding: 0");
|
|
expect(BASE_STYLES).toContain("box-sizing: border-box");
|
|
});
|
|
|
|
it("ELEMENT_BASE_STYLES includes position and visibility", () => {
|
|
expect(ELEMENT_BASE_STYLES).toContain("position: absolute");
|
|
expect(ELEMENT_BASE_STYLES).toContain("visibility: hidden");
|
|
});
|
|
|
|
it("MEDIA_STYLES includes object-fit", () => {
|
|
expect(MEDIA_STYLES).toContain("object-fit: contain");
|
|
expect(MEDIA_STYLES).toContain("width: 100%");
|
|
expect(MEDIA_STYLES).toContain("height: 100%");
|
|
});
|
|
|
|
it("TEXT_STYLES includes font and alignment", () => {
|
|
expect(TEXT_STYLES).toContain('font-family: "Inter"');
|
|
expect(TEXT_STYLES).toContain("font-size: 48px");
|
|
expect(TEXT_STYLES).toContain("font-weight: bold");
|
|
expect(TEXT_STYLES).toContain("color: white");
|
|
expect(TEXT_STYLES).toContain("display: flex");
|
|
});
|
|
|
|
it("ZOOM_CONTAINER_STYLES includes transform-origin", () => {
|
|
expect(ZOOM_CONTAINER_STYLES).toContain("transform-origin: 0 0");
|
|
expect(ZOOM_CONTAINER_STYLES).toContain("position: absolute");
|
|
expect(ZOOM_CONTAINER_STYLES).toContain("inset: 0");
|
|
});
|
|
});
|