@editframe/elements 0.16.8-beta.0 → 0.18.3-beta.0

package/test/recordReplayProxyPlugin.js

@@ -0,0 +1,302 @@
+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";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const CACHE_DIR = join(__dirname, "__cache__");
+const TARGET_HOST = "host.docker.internal";
+const TARGET_PORT = 3000;
+
+/**
+ * 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) {
+      console.log(
+        "[Proxy Plugin] Configuring record-replay proxy middleware...",
+      );
+
+      // 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);
+      });
+
+      console.log("[Proxy Plugin] Proxy middleware configured");
+      console.log(`[Proxy Plugin] Cache directory: ${CACHE_DIR}`);
+    },
+  };
+
+  // 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}`;
+          const proxyHost = `${req.headers["x-forwarded-proto"] || "http"}://${req.headers.host}`;
+          const bodyText = body.toString("utf-8");
+          const rewrittenText = bodyText.replace(
+            new RegExp(originalHost, "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();
+          }
+
+          console.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" }));
+    }
+  }
+
+  // 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(),
+      };
+      const metadataFile = join(cacheDir, "metadata.json");
+      await writeFile(metadataFile, JSON.stringify(metadata, null, 2));
+
+      const dataFile = join(cacheDir, "data.bin");
+      await writeFile(dataFile, body); // Write raw binary data
+
+      console.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) {
+    const fullPath = `/api/v1/transcode${req.url}`;
+    console.log(`[Proxy] → ${req.method} ${fullPath}`);
+    if (req.headers.range) {
+      console.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);
+
+    try {
+      // Collect request body
+      const requestChunks = [];
+      req.on("data", (chunk) => {
+        requestChunks.push(chunk);
+      });
+
+      req.on("end", async () => {
+        try {
+          const requestBody = Buffer.concat(requestChunks);
+          // Reconstruct the full path since middleware strips the prefix
+          const fullPath = `/api/v1/transcode${req.url}`;
+          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}`;
+              const proxyHost = `${req.headers["x-forwarded-proto"] || "http"}://${req.headers.host}`;
+              const bodyText = body.toString("utf-8");
+              const rewrittenText = bodyText.replace(
+                new RegExp(originalHost, "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();
+              }
+
+              console.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) {
+            console.log("[Proxy] ✗ Target server returned 404");
+            console.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"),
+                  );
+                  console.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}`,
+                );
+              }
+            }
+
+            console.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) {
+          console.log(`[Proxy] ✗ Real server failed: ${err.message}`);
+          console.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"),
+                );
+                console.log(
+                  `[Proxy] ✓ Serving from cache (${metadata.timestamp})`,
+                );
+                await serveCachedResponse(res, cacheDir, req);
+                return;
+              }
+            } catch (cacheError) {
+              console.error(
+                `[Proxy] Failed to read cache: ${cacheError.message}`,
+              );
+            }
+          }
+
+          console.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();
+    }
+  }
+}

package/test/useAssetMSW.ts

@@ -0,0 +1,49 @@
+/**
+ * Asset-specific MSW handlers for testing
+ * Provides pre-configured handlers for asset fragment indexes and track data
+ */
+
+import { HttpResponse, http } from "msw";
+
+/**
+ * Asset MSW handlers that redirect requests to real test assets
+ * Use with MSW worker.use() to proxy asset requests to /test-assets/asset-mode/
+ */
+export const assetMSWHandlers = [
+  // Fragment index handler - rewrite to test asset
+  http.get("/@ef-track-fragment-index/*", async () => {
+    const response = await fetch("/asset-mode/index.json");
+    const data = await response.json();
+    return HttpResponse.json(data);
+  }),
+
+  // Track data handler - rewrite to test asset with proper range support
+  http.get("/@ef-track/*", async ({ request }) => {
+    const url = new URL(request.url);
+    const trackId = url.searchParams.get("trackId");
+    if (!trackId) {
+      return new HttpResponse(null, { status: 400 });
+    }
+
+    const rangeHeader = request.headers.get("range");
+    const response = await fetch(`/asset-mode/track-${trackId}.mp4`, {
+      headers: {
+        ...(rangeHeader && {
+          range: rangeHeader,
+        }),
+      },
+    });
+
+    const contentRangeHeader = response.headers.get("Content-Range");
+    return new HttpResponse(await response.arrayBuffer(), {
+      status: response.status,
+      headers: {
+        "Content-Type": "video/mp4",
+        "Accept-Ranges": "bytes",
+        ...(contentRangeHeader && {
+          "Content-Range": contentRangeHeader,
+        }),
+      },
+    });
+  }),
+];

package/test/useMSW.ts

@@ -0,0 +1,44 @@
+/**
+ * MSW integration for Vitest Browser Mode
+ * Based on: https://mswjs.io/docs/recipes/vitest-browser-mode/
+ */
+
+import { setupWorker } from "msw/browser";
+import { test as testBase } from "vitest";
+
+// Create the worker instance that will be shared across tests
+const worker = setupWorker();
+
+// Start the worker once when this module is loaded
+let workerStarted = false;
+
+/**
+ * Extended test with MSW worker integration for Vitest Browser Mode
+ * This follows the official MSW recommendation for Vitest Browser Mode
+ */
+export const test = testBase.extend<{
+  worker: typeof worker;
+}>({
+  worker: [
+    async ({}, use) => {
+      // Only start the worker once
+      if (!workerStarted) {
+        await worker.start({
+          onUnhandledRequest: "bypass", // Allow unhandled requests to pass through to server
+          quiet: true, // Enable logging to see what's being intercepted
+        });
+        workerStarted = true;
+      }
+
+      // Expose the worker object on the test's context
+      await use(worker);
+
+      // Remove any request handlers added in individual test cases
+      // This prevents them from affecting unrelated tests
+      worker.resetHandlers();
+    },
+    {
+      auto: true, // Critical: Auto-start MSW for all tests
+    },
+  ],
+});