@editframe/elements 0.30.2-beta.0 → 0.31.0-beta.1

package/test/profilingPlugin.ts

@@ -0,0 +1,223 @@
+/**
+ * Vitest Browser Profiling Plugin
+ *
+ * Captures Chrome DevTools CPU profiles during browser tests.
+ * Enable with VITEST_PROFILE=1 environment variable.
+ *
+ * Usage:
+ *   VITEST_PROFILE=1 ./scripts/browsertest <test-file>
+ *   ./scripts/browsertest --profile <test-file>
+ *
+ * Output:
+ *   Creates ./browsertest-profile.cpuprofile in the elements directory
+ */
+
+import type { Plugin } from "vite";
+import * as fs from "node:fs";
+import * as path from "node:path";
+
+interface ProfileNode {
+  id: number;
+  callFrame: {
+    functionName: string;
+    scriptId: string;
+    url: string;
+    lineNumber: number;
+    columnNumber: number;
+  };
+  hitCount?: number;
+  children?: number[];
+  positionTicks?: { line: number; ticks: number }[];
+}
+
+interface CPUProfile {
+  nodes: ProfileNode[];
+  startTime: number;
+  endTime: number;
+  samples: number[];
+  timeDeltas: number[];
+}
+
+// Global state for CDP session and profile
+let cdpSession: any = null;
+let profilingStartTime: number = 0;
+
+export function profilingPlugin(): Plugin {
+  const isProfilingEnabled = process.env.VITEST_PROFILE === "1";
+
+  if (!isProfilingEnabled) {
+    return { name: "vitest-profiling-disabled" };
+  }
+
+  console.log("\n🔬 CPU Profiling enabled for browser tests\n");
+
+  return {
+    name: "vitest-browser-profiling",
+
+    // Hook into server configuration to get access to the browser
+    configureServer(server) {
+      // We need to hook into the Vitest browser lifecycle
+      // This is tricky because Vitest manages the browser connection
+
+      // Add an endpoint that tests can call to start/stop profiling
+      server.middlewares.use("/__vitest_profile__/start", async (_req, res) => {
+        try {
+          // Get the CDP session from the connected browser
+          // This requires access to the Playwright page, which Vitest manages
+          res.writeHead(200, { "Content-Type": "application/json" });
+          res.end(JSON.stringify({ status: "profiling_start_requested" }));
+        } catch (error) {
+          res.writeHead(500, { "Content-Type": "application/json" });
+          res.end(JSON.stringify({ error: String(error) }));
+        }
+      });
+
+      server.middlewares.use("/__vitest_profile__/stop", async (_req, res) => {
+        try {
+          res.writeHead(200, { "Content-Type": "application/json" });
+          res.end(JSON.stringify({ status: "profiling_stop_requested" }));
+        } catch (error) {
+          res.writeHead(500, { "Content-Type": "application/json" });
+          res.end(JSON.stringify({ error: String(error) }));
+        }
+      });
+    },
+  };
+}
+
+/**
+ * Start CDP profiling on a Playwright page
+ * Call this from test setup or beforeAll
+ */
+export async function startProfiling(page: any): Promise<void> {
+  if (process.env.VITEST_PROFILE !== "1") return;
+
+  try {
+    // Get CDP session from Playwright page
+    // In Playwright, we access CDP via page.context().newCDPSession(page)
+    const context = page.context();
+    cdpSession = await context.newCDPSession(page);
+
+    await cdpSession.send("Profiler.enable");
+    await cdpSession.send("Profiler.setSamplingInterval", { interval: 100 }); // 100µs
+    await cdpSession.send("Profiler.start");
+
+    profilingStartTime = Date.now();
+    console.log("🎬 CPU profiling started");
+  } catch (error) {
+    console.error("Failed to start profiling:", error);
+  }
+}
+
+/**
+ * Stop CDP profiling and save the profile
+ * Call this from test teardown or afterAll
+ */
+export async function stopProfiling(
+  outputPath?: string,
+): Promise<CPUProfile | null> {
+  if (process.env.VITEST_PROFILE !== "1" || !cdpSession) return null;
+
+  try {
+    const { profile } = (await cdpSession.send("Profiler.stop")) as {
+      profile: CPUProfile;
+    };
+    await cdpSession.send("Profiler.disable");
+
+    const duration = Date.now() - profilingStartTime;
+    console.log(`⏱️  CPU profiling stopped after ${duration}ms`);
+
+    // Save profile
+    const finalPath = outputPath || "./browsertest-profile.cpuprofile";
+    const profileJson = JSON.stringify(profile, null, 2);
+    fs.writeFileSync(finalPath, profileJson);
+    console.log(`💾 Profile saved to: ${finalPath}`);
+    console.log(`   Load in Chrome DevTools → Performance → Load profile`);
+
+    // Print summary
+    printProfileSummary(profile, duration);
+
+    cdpSession = null;
+    return profile;
+  } catch (error) {
+    console.error("Failed to stop profiling:", error);
+    return null;
+  }
+}
+
+function printProfileSummary(profile: CPUProfile, wallClockMs: number): void {
+  const hitCounts = new Map<number, number>();
+  for (const sample of profile.samples) {
+    hitCounts.set(sample, (hitCounts.get(sample) || 0) + 1);
+  }
+
+  const sampleIntervalUs =
+    profile.timeDeltas.length > 0
+      ? profile.timeDeltas.reduce((a, b) => a + b, 0) /
+        profile.timeDeltas.length
+      : 1000;
+
+  const totalSamples = profile.samples.length;
+  const profileTimeMs = (totalSamples * sampleIntervalUs) / 1000;
+
+  // Build hotspots
+  const hotspots: { name: string; file: string; timeMs: number }[] = [];
+  for (const node of profile.nodes) {
+    const hitCount = hitCounts.get(node.id) || 0;
+    if (hitCount === 0) continue;
+
+    const selfTimeMs = (hitCount * sampleIntervalUs) / 1000;
+    const file =
+      node.callFrame.url?.split("/").slice(-1)[0]?.split("?")[0] || "(native)";
+
+    hotspots.push({
+      name: node.callFrame.functionName || "(anonymous)",
+      file,
+      timeMs: selfTimeMs,
+    });
+  }
+
+  hotspots.sort((a, b) => b.timeMs - a.timeMs);
+
+  // Group by file
+  const byFile = new Map<string, number>();
+  for (const h of hotspots) {
+    byFile.set(h.file, (byFile.get(h.file) || 0) + h.timeMs);
+  }
+  const sortedFiles = Array.from(byFile.entries()).sort((a, b) => b[1] - a[1]);
+
+  console.log(
+    `\n📊 Profile Summary (${wallClockMs}ms wall clock, ${profileTimeMs.toFixed(1)}ms profile time)`,
+  );
+  console.log(`\n   Top files:`);
+  for (const [file, time] of sortedFiles.slice(0, 10)) {
+    const pct = ((time / profileTimeMs) * 100).toFixed(1);
+    console.log(
+      `   ${time.toFixed(1).padStart(8)}ms (${pct.padStart(5)}%)  ${file}`,
+    );
+  }
+
+  // Our code
+  const ourCode = hotspots.filter(
+    (h) =>
+      h.file.includes(".ts") &&
+      !h.file.includes("node_modules") &&
+      (h.file.includes("render") ||
+        h.file.includes("preview") ||
+        h.file.includes("element") ||
+        h.file.includes("Timegroup") ||
+        h.file.includes("clone") ||
+        h.file.includes("sync")),
+  );
+
+  if (ourCode.length > 0) {
+    console.log(`\n   Top functions in our code:`);
+    for (const h of ourCode.slice(0, 10)) {
+      console.log(
+        `   ${h.timeMs.toFixed(1).padStart(8)}ms  ${h.name.slice(0, 40).padEnd(40)} ${h.file}`,
+      );
+    }
+  }
+
+  console.log();
+}

package/test/recordReplayProxyPlugin.js

@@ -3,8 +3,11 @@ import { existsSync } from "node:fs";
 import { mkdir, readFile, writeFile } from "node:fs/promises";
 import { dirname, join } from "node:path";
 import { fileURLToPath } from "node:url";
+import debug from "debug";
 import { TEST_SERVER_PORT } from "./constants.js";
 
+const log = debug("ef:recordReplayProxyPlugin");
+
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const CACHE_DIR = join(__dirname, "__cache__");
 const TARGET_HOST = "host.docker.internal";
@@ -43,7 +46,7 @@ export function recordReplayProxyPlugin() {
     name: "record-replay-proxy",
 
     configureServer(server) {
-      console.log(
+      log(
         `[Proxy Plugin] Configuring record-replay proxy middleware... ${CACHE_ONLY_MODE ? "(CACHE-ONLY MODE)" : ""}`,
       );
 
@@ -60,10 +63,10 @@ export function recordReplayProxyPlugin() {
         await handleProxyRequest(req, res, next);
       });
 
-      console.log("[Proxy Plugin] Proxy middleware configured");
-      console.log(`[Proxy Plugin] Cache directory: ${CACHE_DIR}`);
+      log("[Proxy Plugin] Proxy middleware configured");
+      log(`[Proxy Plugin] Cache directory: ${CACHE_DIR}`);
       if (CACHE_ONLY_MODE) {
-        console.log(
+        log(
           "[Proxy Plugin] ⚠️  Running in CACHE-ONLY mode - no remote fetching",
         );
       }
@@ -122,9 +125,7 @@ export function recordReplayProxyPlugin() {
             responseHeaders["content-length"] = body.length.toString();
           }
 
-          console.log(
-            `[Proxy] ✓ Rewrote cached URLs: ${originalHost} → ${proxyHost}`,
-          );
+          log(`[Proxy] ✓ Rewrote cached URLs: ${originalHost} → ${proxyHost}`);
         } catch (error) {
           console.warn(
             `[Proxy] Failed to rewrite cached URLs: ${error.message}`,
@@ -199,7 +200,7 @@ export function recordReplayProxyPlugin() {
       const dataFile = join(cacheDir, "data.bin");
       await writeFile(dataFile, body); // Write raw binary data
 
-      console.log("[Proxy] ✓ Cached response");
+      log("[Proxy] ✓ Cached response");
     } catch (error) {
       console.warn(`[Proxy] Failed to cache: ${error.message}`);
     }
@@ -226,9 +227,9 @@ export function recordReplayProxyPlugin() {
     }
 
     const fullPath = apiPath;
-    console.log(`[Proxy] → ${req.method} ${fullPath}`);
+    log(`[Proxy] → ${req.method} ${fullPath}`);
     if (req.headers.range) {
-      console.log(`[Proxy] Range: ${req.headers.range}`);
+      log(`[Proxy] Range: ${req.headers.range}`);
     }
 
     // Set CORS headers
@@ -257,9 +258,7 @@ export function recordReplayProxyPlugin() {
         try {
           const metadataFile = join(cacheDir, "metadata.json");
           if (existsSync(metadataFile)) {
-            console.log(
-              `[Proxy] ✓ CACHE-ONLY: Serving from cache: ${cacheKey}`,
-            );
+            log(`[Proxy] ✓ CACHE-ONLY: Serving from cache: ${cacheKey}`);
             await serveCachedResponse(res, cacheDir, req);
             return;
           }
@@ -268,7 +267,7 @@ export function recordReplayProxyPlugin() {
         }
       }
 
-      console.log(`[Proxy] ✗ CACHE-ONLY: No cache available for ${cacheKey}`);
+      log(`[Proxy] ✗ CACHE-ONLY: No cache available for ${cacheKey}`);
       res.writeHead(404, { "Content-Type": "application/json" });
       res.end(
         JSON.stringify({
@@ -339,9 +338,7 @@ export function recordReplayProxyPlugin() {
                 responseHeaders["content-length"] = body.length.toString();
               }
 
-              console.log(
-                `[Proxy] ✓ Rewrote URLs: ${originalHost} → ${proxyHost}`,
-              );
+              log(`[Proxy] ✓ Rewrote URLs: ${originalHost} → ${proxyHost}`);
             } catch (error) {
               console.warn(`[Proxy] Failed to rewrite URLs: ${error.message}`);
               // Continue with original body on error
@@ -350,8 +347,8 @@ export function recordReplayProxyPlugin() {
 
           // If we get a 404, try to serve from cache first
           if (response.status === 404) {
-            console.log("[Proxy] ✗ Target server returned 404");
-            console.log(`[Proxy] Checking cache: ${cacheKey}`);
+            log("[Proxy] ✗ Target server returned 404");
+            log(`[Proxy] Checking cache: ${cacheKey}`);
 
             if (existsSync(cacheDir)) {
               try {
@@ -360,7 +357,7 @@ export function recordReplayProxyPlugin() {
                   const metadata = JSON.parse(
                     await readFile(metadataFile, "utf-8"),
                   );
-                  console.log(
+                  log(
                     `[Proxy] ✓ Serving from cache instead of 404 (${metadata.timestamp})`,
                   );
                   await serveCachedResponse(res, cacheDir, req);
@@ -373,7 +370,7 @@ export function recordReplayProxyPlugin() {
               }
             }
 
-            console.log("[Proxy] ✗ No cache available, passing through 404");
+            log("[Proxy] ✗ No cache available, passing through 404");
           }
 
           res.writeHead(response.status, responseHeaders);
@@ -391,8 +388,8 @@ export function recordReplayProxyPlugin() {
             );
           }
         } catch (err) {
-          console.log(`[Proxy] ✗ Real server failed: ${err.message}`);
-          console.log(`[Proxy] Checking cache: ${cacheKey}`);
+          log(`[Proxy] ✗ Real server failed: ${err.message}`);
+          log(`[Proxy] Checking cache: ${cacheKey}`);
 
           if (existsSync(cacheDir)) {
             try {
@@ -401,9 +398,7 @@ export function recordReplayProxyPlugin() {
                 const metadata = JSON.parse(
                   await readFile(metadataFile, "utf-8"),
                 );
-                console.log(
-                  `[Proxy] ✓ Serving from cache (${metadata.timestamp})`,
-                );
+                log(`[Proxy] ✓ Serving from cache (${metadata.timestamp})`);
                 await serveCachedResponse(res, cacheDir, req);
                 return;
               }
@@ -414,7 +409,7 @@ export function recordReplayProxyPlugin() {
             }
           }
 
-          console.log("[Proxy] ✗ No cache available, failing request");
+          log("[Proxy] ✗ No cache available, failing request");
           res.writeHead(500, { "Content-Type": "application/json" });
           res.end(
             JSON.stringify({

package/test/thumbnail-performance-test.html

@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Thumbnail Performance Test</title>
+  <style>
+    body {
+      margin: 0;
+      padding: 20px;
+      font-family: system-ui;
+    }
+    ef-timegroup {
+      width: 1920px;
+      height: 1080px;
+      background: #000;
+    }
+    #results {
+      margin-top: 20px;
+      font-family: monospace;
+      white-space: pre-wrap;
+    }
+  </style>
+</head>
+<body>
+  <h1>Thumbnail Capture Performance Test</h1>
+  <p>Testing captureBatch with yield between captures and size limits</p>
+  
+  <ef-timegroup id="test-timegroup" mode="contain" fps="30" duration="10000">
+    <ef-video src="test-assets/bars-n-tone.mp4" start-time="0" duration="10000"></ef-video>
+  </ef-timegroup>
+  
+  <div id="results"></div>
+  
+  <script type="module">
+    import '/packages/elements/src/elements/EFTimegroup.js';
+    import '/packages/elements/src/elements/EFVideo.js';
+    
+    const timegroup = document.querySelector('ef-timegroup');
+    const results = document.getElementById('results');
+    
+    async function runTest() {
+      results.textContent = 'Waiting for timegroup to initialize...\n';
+      
+      // Wait for media to load
+      await timegroup.updateComplete;
+      if (timegroup.waitForMediaDurations) {
+        await timegroup.waitForMediaDurations();
+      }
+      
+      // Generate timestamps for 15 thumbnails
+      const duration = timegroup.durationMs;
+      const timestamps = [];
+      for (let i = 0; i < 15; i++) {
+        timestamps.push((i * duration) / 14);
+      }
+      
+      results.textContent += `Testing captureBatch with ${timestamps.length} thumbnails...\n`;
+      results.textContent += `Duration: ${duration}ms\n`;
+      results.textContent += `Timestamps: ${timestamps.map(t => Math.round(t)).join(', ')}ms\n\n`;
+      
+      // Measure captureBatch performance
+      const startTime = performance.now();
+      const canvases = await timegroup.captureBatch(timestamps, {
+        scale: 0.25,
+        contentReadyMode: 'immediate'
+      });
+      const endTime = performance.now();
+      const elapsed = endTime - startTime;
+      
+      results.textContent += `\n✅ Capture completed!\n`;
+      results.textContent += `Total time: ${elapsed.toFixed(2)}ms\n`;
+      results.textContent += `Average per thumbnail: ${(elapsed / timestamps.length).toFixed(2)}ms\n`;
+      results.textContent += `Canvases captured: ${canvases.length}\n`;
+      
+      // Check canvas dimensions
+      if (canvases.length > 0) {
+        const firstCanvas = canvases[0];
+        results.textContent += `\nCanvas dimensions:\n`;
+        results.textContent += `  Width: ${firstCanvas.width}px (logical: ${firstCanvas.style.width})\n`;
+        results.textContent += `  Height: ${firstCanvas.height}px (logical: ${firstCanvas.style.height})\n`;
+        
+        // Verify max size limit (480px max width)
+        const logicalWidth = parseInt(firstCanvas.style.width);
+        if (logicalWidth <= 480) {
+          results.textContent += `  ✅ Size limit enforced (${logicalWidth}px <= 480px)\n`;
+        } else {
+          results.textContent += `  ⚠️ Size limit NOT enforced (${logicalWidth}px > 480px)\n`;
+        }
+      }
+      
+      // Test responsiveness - try to interact during capture
+      results.textContent += `\nTesting responsiveness during capture...\n`;
+      let interactionCount = 0;
+      const interactionInterval = setInterval(() => {
+        interactionCount++;
+        results.textContent += `  Interaction ${interactionCount} processed\n`;
+      }, 10);
+      
+      const startTime2 = performance.now();
+      const canvases2 = await timegroup.captureBatch(timestamps.slice(0, 5), {
+        scale: 0.25,
+        contentReadyMode: 'immediate'
+      });
+      const endTime2 = performance.now();
+      clearInterval(interactionInterval);
+      
+      results.textContent += `\n✅ Responsiveness test completed!\n`;
+      results.textContent += `Capture time: ${(endTime2 - startTime2).toFixed(2)}ms\n`;
+      results.textContent += `Interactions processed: ${interactionCount}\n`;
+      results.textContent += `  (Higher is better - shows browser stayed responsive)\n`;
+    }
+    
+    // Run test after a short delay to ensure everything is loaded
+    setTimeout(runTest, 1000);
+  </script>
+</body>
+</html>