@hyperframes/engine 0.1.13 → 0.1.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/package.json +2 -2
  2. package/scripts/test-fitTextFontSize-browser.ts +131 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hyperframes/engine",
3
- "version": "0.1.13",
3
+ "version": "0.1.14",
4
4
  "description": "Seekable web page to video rendering engine (Puppeteer + FFmpeg)",
5
5
  "repository": {
6
6
  "type": "git",
@@ -19,7 +19,7 @@
19
19
  "linkedom": "^0.18.12",
20
20
  "puppeteer": "^24.0.0",
21
21
  "puppeteer-core": "^24.39.1",
22
- "@hyperframes/core": "^0.1.13"
22
+ "@hyperframes/core": "^0.1.14"
23
23
  },
24
24
  "devDependencies": {
25
25
  "@types/node": "^22.10.1",
package/scripts/test-fitTextFontSize-browser.ts ADDED
@@ -0,0 +1,131 @@
1
+ /**
2
+ * Browser integration test for fitTextFontSize.
3
+ *
4
+ * Launches headless Chrome, loads the runtime IIFE into a page,
5
+ * and verifies that window.__hyperframes.fitTextFontSize produces
6
+ * correct results with real canvas measureText.
7
+ *
8
+ * Requires: puppeteer (dep of @hyperframes/engine)
9
+ * Run: cd packages/engine && npx tsx scripts/test-fitTextFontSize-browser.ts
10
+ */
11
+
12
+ import { buildHyperframesRuntimeScript } from "../../core/src/inline-scripts/hyperframesRuntime.engine";
13
+
14
+ function assert(condition: unknown, message: string): void {
15
+ if (!condition) {
16
+ throw new Error(`FAIL: ${message}`);
17
+ }
18
+ }
19
+
20
+ async function main() {
21
+ // Dynamic import — puppeteer is a monorepo dep, not a core dep
22
+ let puppeteer;
23
+ try {
24
+ puppeteer = (await import("puppeteer")).default;
25
+ } catch {
26
+ console.log(
27
+ JSON.stringify({
28
+ event: "fitTextFontSize_browser_test_skipped",
29
+ reason: "puppeteer not available",
30
+ }),
31
+ );
32
+ return;
33
+ }
34
+
35
+ const runtimeSource = buildHyperframesRuntimeScript({ minify: false });
36
+
37
+ const html = `<!DOCTYPE html>
38
+ <html><head>
39
+ <style>
40
+ @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@900&display=block');
41
+ </style>
42
+ </head><body>
43
+ <script>${runtimeSource}</script>
44
+ <script>
45
+ window.__testResults = {};
46
+
47
+ // Test 1: Short text should fit at base size
48
+ var r1 = window.__hyperframes.fitTextFontSize("HI");
49
+ window.__testResults.shortText = r1;
50
+
51
+ // Test 2: Wide text should shrink below base size but still fit at 1600px
52
+ var r2 = window.__hyperframes.fitTextFontSize(
53
+ "CONGRATULATIONS TO EVERYBODY IN THE WORLD",
54
+ { fontFamily: "sans-serif", fontWeight: 900, maxWidth: 1600 }
55
+ );
56
+ window.__testResults.wideText = r2;
57
+
58
+ // Test 3: Extremely wide text that can't fit should return minFontSize
59
+ var r3 = window.__hyperframes.fitTextFontSize(
60
+ "WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW",
61
+ { fontFamily: "sans-serif", fontWeight: 900, maxWidth: 400 }
62
+ );
63
+ window.__testResults.extremeText = r3;
64
+
65
+ // Test 4: Function exists and is callable
66
+ window.__testResults.exists = typeof window.__hyperframes.fitTextFontSize === "function";
67
+ </script>
68
+ </body></html>`;
69
+
70
+ const browser = await puppeteer.launch({
71
+ headless: true,
72
+ args: ["--no-sandbox", "--disable-setuid-sandbox"],
73
+ });
74
+
75
+ try {
76
+ const page = await browser.newPage();
77
+ await page.setContent(html, { waitUntil: "networkidle0", timeout: 10000 });
78
+
79
+ // Wait for font to potentially load (best effort — sans-serif fallback is fine for testing)
80
+ await new Promise((r) => setTimeout(r, 1000));
81
+
82
+ const results = await page.evaluate(() => (window as any).__testResults);
83
+
84
+ // Test 1: Short text fits at base size (78px default)
85
+ assert(results.exists === true, "fitTextFontSize should exist on window.__hyperframes");
86
+ assert(
87
+ results.shortText.fits === true,
88
+ `Short text should fit, got fits=${results.shortText.fits}`,
89
+ );
90
+ assert(
91
+ results.shortText.fontSize === 78,
92
+ `Short text should use base size 78, got ${results.shortText.fontSize}`,
93
+ );
94
+
95
+ // Test 2: Wide text should shrink below base size
96
+ assert(
97
+ results.wideText.fits === true,
98
+ `Wide text should still fit, got fits=${results.wideText.fits}`,
99
+ );
100
+ assert(
101
+ results.wideText.fontSize < 78,
102
+ `Wide text should shrink below 78, got ${results.wideText.fontSize}`,
103
+ );
104
+
105
+ // Test 3: Extreme text should hit floor
106
+ assert(
107
+ results.extremeText.fontSize === 42,
108
+ `Extreme text should hit minFontSize 42, got ${results.extremeText.fontSize}`,
109
+ );
110
+ assert(
111
+ results.extremeText.fits === false,
112
+ `Extreme text should not fit, got fits=${results.extremeText.fits}`,
113
+ );
114
+
115
+ console.log(
116
+ JSON.stringify({
117
+ event: "fitTextFontSize_browser_test_passed",
118
+ shortText: results.shortText,
119
+ wideText: results.wideText,
120
+ extremeText: results.extremeText,
121
+ }),
122
+ );
123
+ } finally {
124
+ await browser.close();
125
+ }
126
+ }
127
+
128
+ main().catch((err) => {
129
+ console.error(err.message);
130
+ process.exit(1);
131
+ });