@editframe/elements 0.42.5 → 0.42.8

package/test/profilingPlugin.ts

@@ -1,221 +0,0 @@
-/**
- * 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> {
-  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 (!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

@@ -1,428 +0,0 @@
-import crypto from "node:crypto";
-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";
-const TARGET_PORT = 3000;
-// Get worktree domain from environment (set by worktree-config)
-const WORKTREE_DOMAIN = process.env.WORKTREE_DOMAIN || "main.localhost";
-
-// Detect CI environment - check multiple indicators
-// GITHUB_ACTIONS is set by GitHub Actions, CI is a common CI indicator
-// Also check if we're running in ci-runner service (no Traefik)
-const isCI =
-  Boolean(process.env.GITHUB_ACTIONS) ||
-  Boolean(process.env.CI) ||
-  process.env.DOCKER_SERVICE === "ci-runner";
-
-// Check if we should run in cache-only mode (for CI/prepare-release)
-const CACHE_ONLY_MODE = process.env.EF_CACHE_ONLY === "true";
-
-// Determine the proxy host to use for URL rewriting
-// In CI, use localhost:TEST_SERVER_PORT (no Traefik)
-// In local dev, use WORKTREE_DOMAIN:4322 (Traefik routing)
-function getProxyHost() {
-  if (isCI) {
-    return `http://localhost:${TEST_SERVER_PORT}`;
-  }
-  return `http://${WORKTREE_DOMAIN}:4322`;
-}
-
-/**
- * Vite plugin that adds record-and-replay proxy middleware
- * This proxy intercepts requests to /api/v1/transcode/*, caches responses to disk,
- * and serves cached responses when the real server is unavailable.
- */
-export function recordReplayProxyPlugin() {
-  return {
-    name: "record-replay-proxy",
-
-    configureServer(server) {
-      log(
-        `[Proxy Plugin] Configuring record-replay proxy middleware... ${CACHE_ONLY_MODE ? "(CACHE-ONLY MODE)" : ""}`,
-      );
-
-      // Initialize cache directory
-      mkdir(CACHE_DIR, { recursive: true }).catch(console.error);
-
-      // Add middleware to handle /api/v1/transcode/* requests
-      server.middlewares.use("/api/v1/transcode", async (req, res, next) => {
-        await handleProxyRequest(req, res, next);
-      });
-
-      // Add middleware to handle /api/v1/url-token requests (for URL signing)
-      server.middlewares.use("/api/v1/url-token", async (req, res, next) => {
-        await handleProxyRequest(req, res, next);
-      });
-
-      log("[Proxy Plugin] Proxy middleware configured");
-      log(`[Proxy Plugin] Cache directory: ${CACHE_DIR}`);
-      if (CACHE_ONLY_MODE) {
-        log(
-          "[Proxy Plugin] ⚠️  Running in CACHE-ONLY mode - no remote fetching",
-        );
-      }
-    },
-  };
-
-  // Create cache key from request
-  function getCacheKey(method, url, headers) {
-    const range = headers.range || "";
-    const key = `${method}_${url}_${range}`;
-    const hash = crypto.createHash("md5").update(key).digest("hex");
-    const sanitized = key.replace(/[^a-zA-Z0-9]/g, "_").substring(0, 100);
-    return `${sanitized}_${hash}`; // Returns directory name
-  }
-
-  // Serve cached response
-  async function serveCachedResponse(res, cacheDir, _req) {
-    try {
-      const metadataFile = join(cacheDir, "metadata.json");
-      const dataFile = join(cacheDir, "data.bin");
-
-      const metadata = JSON.parse(await readFile(metadataFile, "utf-8"));
-      let body = await readFile(dataFile);
-
-      // Rewrite URLs in cached JSON/text responses to point back to current proxy
-      const responseHeaders = { ...metadata.headers };
-      const contentType = responseHeaders["content-type"] || "";
-      if (
-        contentType.includes("application/json") ||
-        contentType.includes("text/")
-      ) {
-        try {
-          const originalHost = `http://${TARGET_HOST}:${TARGET_PORT}`;
-          // Determine the correct proxy host to use
-          // In CI, use localhost:TEST_SERVER_PORT; in local dev, use Traefik URL
-          const proxyHost = getProxyHost();
-          const bodyText = body.toString("utf-8");
-          // Replace both the original host and localhost:63315 with the proxy host
-          let rewrittenText = bodyText.replace(
-            new RegExp(
-              originalHost.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"),
-              "g",
-            ),
-            proxyHost,
-          );
-          // Always replace localhost:63315 (cached responses may contain it)
-          // Note: Using hardcoded port here for regex matching cached responses
-          rewrittenText = rewrittenText.replace(
-            /http:\/\/localhost:63315/g,
-            proxyHost,
-          );
-          body = Buffer.from(rewrittenText, "utf-8");
-
-          // Update content-length if it changed
-          if (bodyText.length !== rewrittenText.length) {
-            responseHeaders["content-length"] = body.length.toString();
-          }
-
-          log(`[Proxy] ✓ Rewrote cached URLs: ${originalHost} → ${proxyHost}`);
-        } catch (error) {
-          console.warn(
-            `[Proxy] Failed to rewrite cached URLs: ${error.message}`,
-          );
-          // Continue with original body on error
-        }
-      }
-
-      res.writeHead(metadata.statusCode, responseHeaders);
-      res.end(body);
-    } catch (error) {
-      console.error(
-        `[Proxy] Failed to serve cached response: ${error.message}`,
-      );
-      res.writeHead(500, { "Content-Type": "application/json" });
-      res.end(JSON.stringify({ error: "Failed to read cache" }));
-    }
-  }
-
-  // Normalize metadata by removing irrelevant dynamic fields
-  function normalizeMetadata(metadata) {
-    const normalized = { ...metadata };
-
-    // Remove dynamic headers that change on every request but don't affect functionality
-    if (normalized.headers) {
-      const headers = { ...normalized.headers };
-      delete headers.date;
-      delete headers["x-total-server-time-ms"];
-      delete headers["x-transcode-time-ms"]; // This varies between requests
-      delete headers["x-cache"]; // This can vary between HIT/MISS
-      normalized.headers = headers;
-    }
-
-    // Remove timestamp field since it always changes
-    delete normalized.timestamp;
-
-    return normalized;
-  }
-
-  // Save response to cache
-  async function cacheResponse(
-    cacheDir,
-    statusCode,
-    headers,
-    body,
-    method,
-    url,
-    range,
-  ) {
-    try {
-      await mkdir(cacheDir, { recursive: true }); // Create cache directory
-
-      const metadata = {
-        statusCode,
-        headers,
-        url,
-        method,
-        range: range || null,
-        timestamp: new Date().toISOString(),
-      };
-
-      // Always write the response to cache - binary content can change even if headers don't
-      // Write normalized metadata to disk (without dynamic fields)
-      const normalizedMetadata = normalizeMetadata(metadata);
-
-      const metadataFile = join(cacheDir, "metadata.json");
-      await writeFile(
-        metadataFile,
-        JSON.stringify(normalizedMetadata, null, 2),
-      );
-
-      const dataFile = join(cacheDir, "data.bin");
-      await writeFile(dataFile, body); // Write raw binary data
-
-      log("[Proxy] ✓ Cached response");
-    } catch (error) {
-      console.warn(`[Proxy] Failed to cache: ${error.message}`);
-    }
-  }
-
-  // Handle proxy request as middleware
-  async function handleProxyRequest(req, res, next) {
-    // Determine the API path prefix based on the request URL
-    // req.url will be like "/transcode/manifest.json" or "/url-token" or "" (empty) or "/" (root for exact match)
-    let apiPath;
-    if (req.url.startsWith("/transcode")) {
-      apiPath = `/api/v1/transcode${req.url}`;
-    } else if (
-      req.url.startsWith("/url-token") ||
-      req.url === "" ||
-      req.url === "/"
-    ) {
-      // Handle empty string or root path for exact /api/v1/url-token match
-      // When middleware is registered with "/api/v1/url-token", exact match gives req.url = "" or "/"
-      apiPath = `/api/v1/url-token${req.url.replace("/url-token", "")}`;
-    } else {
-      // Fallback: assume transcode if path doesn't match
-      apiPath = `/api/v1/transcode${req.url}`;
-    }
-
-    const fullPath = apiPath;
-    log(`[Proxy] → ${req.method} ${fullPath}`);
-    if (req.headers.range) {
-      log(`[Proxy] Range: ${req.headers.range}`);
-    }
-
-    // Set CORS headers
-    res.setHeader("Access-Control-Allow-Origin", "*");
-    res.setHeader(
-      "Access-Control-Allow-Methods",
-      "GET, POST, PUT, DELETE, OPTIONS",
-    );
-    res.setHeader(
-      "Access-Control-Allow-Headers",
-      "Content-Type, Range, Authorization",
-    );
-
-    if (req.method === "OPTIONS") {
-      res.writeHead(200);
-      res.end();
-      return;
-    }
-
-    const cacheKey = getCacheKey(req.method, fullPath, req.headers);
-    const cacheDir = join(CACHE_DIR, cacheKey);
-
-    // In cache-only mode, try to serve from cache first
-    if (CACHE_ONLY_MODE) {
-      if (existsSync(cacheDir)) {
-        try {
-          const metadataFile = join(cacheDir, "metadata.json");
-          if (existsSync(metadataFile)) {
-            log(`[Proxy] ✓ CACHE-ONLY: Serving from cache: ${cacheKey}`);
-            await serveCachedResponse(res, cacheDir, req);
-            return;
-          }
-        } catch (cacheError) {
-          console.error(`[Proxy] Failed to read cache: ${cacheError.message}`);
-        }
-      }
-
-      log(`[Proxy] ✗ CACHE-ONLY: No cache available for ${cacheKey}`);
-      res.writeHead(404, { "Content-Type": "application/json" });
-      res.end(
-        JSON.stringify({
-          error: "Cache-only mode enabled but no cache found",
-          cacheKey,
-          suggestion: "Run tests locally first to populate cache",
-        }),
-      );
-      return;
-    }
-
-    try {
-      // Collect request body
-      const requestChunks = [];
-      req.on("data", (chunk) => {
-        requestChunks.push(chunk);
-      });
-
-      req.on("end", async () => {
-        try {
-          const requestBody = Buffer.concat(requestChunks);
-          // Use the full path we determined earlier
-          const targetUrl = `http://${TARGET_HOST}:${TARGET_PORT}${fullPath}`;
-
-          const fetchOptions = {
-            method: req.method,
-            headers: req.headers,
-            body: requestBody.length > 0 ? requestBody : undefined,
-          };
-
-          const response = await fetch(targetUrl, fetchOptions);
-          let body = Buffer.from(await response.arrayBuffer());
-
-          const responseHeaders = {};
-          response.headers.forEach((value, key) => {
-            responseHeaders[key] = value;
-          });
-
-          // Rewrite URLs in JSON/text responses to point back to proxy
-          const contentType = responseHeaders["content-type"] || "";
-          if (
-            contentType.includes("application/json") ||
-            contentType.includes("text/")
-          ) {
-            try {
-              const originalHost = `http://${TARGET_HOST}:${TARGET_PORT}`;
-              // Determine the correct proxy host to use
-              // In CI, use localhost:TEST_SERVER_PORT; in local dev, use Traefik URL
-              const proxyHost = getProxyHost();
-              const bodyText = body.toString("utf-8");
-              // Replace both the original host and localhost:63315 with the proxy host
-              let rewrittenText = bodyText.replace(
-                new RegExp(
-                  originalHost.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"),
-                  "g",
-                ),
-                proxyHost,
-              );
-              // Always replace localhost:63315 (responses may contain it from previous rewrites or cache)
-              rewrittenText = rewrittenText.replace(
-                /http:\/\/localhost:63315/g,
-                proxyHost,
-              );
-              body = Buffer.from(rewrittenText, "utf-8");
-
-              // Update content-length if it changed
-              if (bodyText.length !== rewrittenText.length) {
-                responseHeaders["content-length"] = body.length.toString();
-              }
-
-              log(`[Proxy] ✓ Rewrote URLs: ${originalHost} → ${proxyHost}`);
-            } catch (error) {
-              console.warn(`[Proxy] Failed to rewrite URLs: ${error.message}`);
-              // Continue with original body on error
-            }
-          }
-
-          // If we get a 404, try to serve from cache first
-          if (response.status === 404) {
-            log("[Proxy] ✗ Target server returned 404");
-            log(`[Proxy] Checking cache: ${cacheKey}`);
-
-            if (existsSync(cacheDir)) {
-              try {
-                const metadataFile = join(cacheDir, "metadata.json");
-                if (existsSync(metadataFile)) {
-                  const metadata = JSON.parse(
-                    await readFile(metadataFile, "utf-8"),
-                  );
-                  log(
-                    `[Proxy] ✓ Serving from cache instead of 404 (${metadata.timestamp})`,
-                  );
-                  await serveCachedResponse(res, cacheDir, req);
-                  return;
-                }
-              } catch (cacheError) {
-                console.error(
-                  `[Proxy] Failed to read cache: ${cacheError.message}`,
-                );
-              }
-            }
-
-            log("[Proxy] ✗ No cache available, passing through 404");
-          }
-
-          res.writeHead(response.status, responseHeaders);
-          res.end(body);
-
-          if (response.status >= 200 && response.status < 300) {
-            await cacheResponse(
-              cacheDir,
-              response.status,
-              responseHeaders,
-              body,
-              req.method,
-              fullPath,
-              req.headers.range,
-            );
-          }
-        } catch (err) {
-          log(`[Proxy] ✗ Real server failed: ${err.message}`);
-          log(`[Proxy] Checking cache: ${cacheKey}`);
-
-          if (existsSync(cacheDir)) {
-            try {
-              const metadataFile = join(cacheDir, "metadata.json");
-              if (existsSync(metadataFile)) {
-                const metadata = JSON.parse(
-                  await readFile(metadataFile, "utf-8"),
-                );
-                log(`[Proxy] ✓ Serving from cache (${metadata.timestamp})`);
-                await serveCachedResponse(res, cacheDir, req);
-                return;
-              }
-            } catch (cacheError) {
-              console.error(
-                `[Proxy] Failed to read cache: ${cacheError.message}`,
-              );
-            }
-          }
-
-          log("[Proxy] ✗ No cache available, failing request");
-          res.writeHead(500, { "Content-Type": "application/json" });
-          res.end(
-            JSON.stringify({
-              error: "Server unavailable and no cache found",
-              cacheKey,
-              originalError: err.message,
-            }),
-          );
-        }
-      });
-    } catch (error) {
-      console.error(`[Proxy] Middleware error: ${error.message}`);
-      next();
-    }
-  }
-}