@noego/wood 0.4.1 → 0.4.3

package/dist/testing/browser.js

@@ -1,15 +1,31 @@
 import fs from "node:fs";
+import os from "node:os";
 import { createRequire } from "node:module";
 import path from "node:path";
 import { pathToFileURL } from "node:url";
 import {
-  createTraceCapture,
   dispatchRendererTracePayload
 } from "../tracing/index.js";
+import { TraceRecorder } from "../trace-testing/index.js";
 const DEFAULT_VIEWPORT = {
   width: 1280,
   height: 800
 };
+const DEFAULT_EXPECT_TIMEOUT_MS = 1e4;
+const DEFAULT_RESOURCE_CLOSE_TIMEOUT_MS = 5e3;
+const WORKER_RUNTIME_IDLE_CLOSE_MS = 5e3;
+const browserWorkerRuntimes = /* @__PURE__ */ new Map();
+const browserWorkerCacheDirs = /* @__PURE__ */ new Set();
+process.on("exit", () => {
+  for (const cacheDir of browserWorkerCacheDirs) {
+    try {
+      fs.rmSync(cacheDir, { recursive: true, force: true });
+    } catch {
+    }
+  }
+  browserWorkerCacheDirs.clear();
+  browserWorkerRuntimes.clear();
+});
 function normalizeRoot(rootDir) {
   return path.resolve(rootDir ?? process.cwd());
 }
@@ -32,6 +48,18 @@ function mergeBridge(base, override) {
     record: override?.record ?? base?.record
   };
 }
+async function waitForBoundedClose(promise, timeoutMs = DEFAULT_RESOURCE_CLOSE_TIMEOUT_MS) {
+  let timeout;
+  await Promise.race([
+    promise.catch(() => void 0),
+    new Promise((resolve) => {
+      timeout = setTimeout(resolve, timeoutMs);
+    })
+  ]);
+  if (timeout) {
+    clearTimeout(timeout);
+  }
+}
 function channelToManifestEntry(channel, handler) {
   const pathSegments = channel.split(".").filter(Boolean);
   const action = pathSegments.length > 0 ? pathSegments[pathSegments.length - 1] : channel;
@@ -133,6 +161,51 @@ async function loadPlaywright(browserName) {
 async function loadVite() {
   return await import("vite");
 }
+function createPackageRequire(rootDir) {
+  return createRequire(path.join(rootDir, "package.json"));
+}
+function resolvePackageModule(rootDir, source) {
+  const rootRequire = createPackageRequire(rootDir);
+  const processRequire = createRequire(path.join(process.cwd(), "package.json"));
+  try {
+    return rootRequire.resolve(source);
+  } catch {
+    try {
+      return processRequire.resolve(source);
+    } catch {
+      return null;
+    }
+  }
+}
+function resolvePackageDir(rootDir, packageName) {
+  const packageJson = resolvePackageModule(rootDir, `${packageName}/package.json`);
+  return packageJson ? path.dirname(packageJson) : null;
+}
+function createWoodBrowserResolver(rootDir) {
+  const sveltePackageDir = resolvePackageDir(rootDir, "svelte");
+  const svelteClientEntry = sveltePackageDir ? path.join(sveltePackageDir, "src", "index-client.js") : null;
+  const svelteLegacyClientEntry = sveltePackageDir ? path.join(sveltePackageDir, "src", "legacy", "legacy-client.js") : null;
+  const svelteReactivityClientEntry = sveltePackageDir ? path.join(sveltePackageDir, "src", "reactivity", "index-client.js") : null;
+  return {
+    name: "wood-browser-resolver",
+    enforce: "pre",
+    resolveId(source) {
+      if (source === "svelte") {
+        return svelteClientEntry;
+      }
+      if (source === "svelte/legacy") {
+        return svelteLegacyClientEntry;
+      }
+      if (source === "svelte/reactivity") {
+        return svelteReactivityClientEntry;
+      }
+      if (source.startsWith("svelte/")) {
+        return resolvePackageModule(rootDir, source);
+      }
+      return null;
+    }
+  };
+}
 async function loadSveltePlugin(rootDir) {
   try {
     const rootPluginPath = path.join(
@@ -163,22 +236,115 @@ async function loadViews(viewsPath) {
   const parser = await import("../parser/views_parser.js");
   return parser.parseViewsFile(viewsPath);
 }
-async function createViteServer(rootDir) {
+async function createViteServer(rootDir, cacheDir) {
   const vite = await loadVite();
   const svelte = await loadSveltePlugin(rootDir);
-  const plugins = svelte ? [svelte()] : [];
+  const plugins = [
+    createWoodBrowserResolver(rootDir),
+    ...svelte ? [svelte()] : []
+  ];
   const server = await vite.createServer({
     root: rootDir,
+    cacheDir,
     logLevel: process.env.WOOD_BROWSER_TEST_DEBUG ? "info" : "silent",
     plugins,
     resolve: {
       dedupe: ["svelte"]
     },
-    server: { port: 0 }
+    server: { port: 0, fs: { allow: [rootDir, os.tmpdir()] } }
   });
   await server.listen();
   return server;
 }
+function workerRuntimeKey(input) {
+  return [
+    input.rootDir,
+    input.browserName,
+    input.headless ? "headless" : "headed"
+  ].join("::");
+}
+async function createBrowserWorkerRuntime(input) {
+  const cacheRoot = fs.mkdtempSync(path.join(os.tmpdir(), "wood-browser-vite-"));
+  browserWorkerCacheDirs.add(cacheRoot);
+  let browser2 = null;
+  try {
+    const playwrightBrowser = await loadPlaywright(input.browserName);
+    browser2 = await playwrightBrowser.launch({ headless: input.headless });
+    const server = await createViteServer(input.rootDir, path.join(cacheRoot, ".vite"));
+    return {
+      browser: browser2,
+      server,
+      cacheDir: cacheRoot,
+      rootDir: input.rootDir,
+      key: input.key,
+      activeHarnesses: 0,
+      closing: false,
+      idleCloseTimer: null
+    };
+  } catch (error) {
+    await browser2?.close().catch(() => void 0);
+    fs.rmSync(cacheRoot, { recursive: true, force: true });
+    browserWorkerCacheDirs.delete(cacheRoot);
+    throw error;
+  }
+}
+async function acquireBrowserWorkerRuntime(input) {
+  const key = workerRuntimeKey(input);
+  let entry = browserWorkerRuntimes.get(key);
+  if (!entry) {
+    entry = {
+      promise: createBrowserWorkerRuntime({ ...input, key })
+    };
+    browserWorkerRuntimes.set(key, entry);
+  }
+  const runtime = await entry.promise;
+  if (runtime.closing) {
+    browserWorkerRuntimes.delete(key);
+    return await acquireBrowserWorkerRuntime(input);
+  }
+  if (runtime.idleCloseTimer) {
+    clearTimeout(runtime.idleCloseTimer);
+    runtime.idleCloseTimer = null;
+  }
+  runtime.activeHarnesses += 1;
+  return runtime;
+}
+async function closeBrowserWorkerRuntime(runtime) {
+  if (runtime.closing) {
+    return;
+  }
+  runtime.closing = true;
+  try {
+    await Promise.all([
+      waitForBoundedClose(runtime.server.close()),
+      waitForBoundedClose(runtime.browser.close())
+    ]);
+  } finally {
+    fs.rmSync(runtime.cacheDir, { recursive: true, force: true });
+    browserWorkerCacheDirs.delete(runtime.cacheDir);
+    const entry = browserWorkerRuntimes.get(runtime.key);
+    const current = entry ? await entry.promise.catch(() => null) : null;
+    if (current === runtime) {
+      browserWorkerRuntimes.delete(runtime.key);
+    }
+  }
+}
+function scheduleBrowserWorkerRuntimeClose(runtime) {
+  if (runtime.closing || runtime.activeHarnesses > 0 || runtime.idleCloseTimer) {
+    return;
+  }
+  runtime.idleCloseTimer = setTimeout(() => {
+    runtime.idleCloseTimer = null;
+    if (runtime.activeHarnesses === 0) {
+      void closeBrowserWorkerRuntime(runtime);
+    }
+  }, WORKER_RUNTIME_IDLE_CLOSE_MS);
+  runtime.idleCloseTimer.unref?.();
+}
+function releaseBrowserWorkerRuntime(runtime) {
+  runtime.activeHarnesses = Math.max(0, runtime.activeHarnesses - 1);
+  scheduleBrowserWorkerRuntimeClose(runtime);
+}
 function serverBaseUrl(server) {
   return server.resolvedUrls?.local?.[0] ?? "http://127.0.0.1:5173";
 }
@@ -385,8 +551,8 @@ async function installBridge(page, bridgeState, manifest, bridgeInit) {
     window.__WOOD_BROWSER_BRIDGE_MANIFEST__ = entries;
   }, manifest);
 }
-async function installTraceBinding(page, trace, context) {
-  if (!trace) {
+async function installTraceBinding(page, traceRecorder, context) {
+  if (!traceRecorder) {
     return;
   }
   await page.exposeBinding("__woodBrowserTrace", async (_source, payload) => {
@@ -469,20 +635,35 @@ async function elementRect(page, selector) {
   }).catch(() => null);
 }
 function createExpect(page, outputDir) {
+  async function waitForVisible(selector) {
+    const locator = page.locator(selector).first();
+    try {
+      await locator.waitFor({ state: "attached", timeout: DEFAULT_EXPECT_TIMEOUT_MS });
+    } catch {
+      throw new Error(`Expected "${selector}" to exist.`);
+    }
+    try {
+      await locator.waitFor({ state: "visible", timeout: DEFAULT_EXPECT_TIMEOUT_MS });
+    } catch {
+      throw new Error(`Expected "${selector}" to be visible.`);
+    }
+  }
   return {
     async visible(selector) {
-      const count = await page.locator(selector).count();
-      if (count < 1) throw new Error(`Expected "${selector}" to exist.`);
-      const visible = await page.locator(selector).first().isVisible();
-      if (!visible) throw new Error(`Expected "${selector}" to be visible.`);
+      await waitForVisible(selector);
     },
     async hidden(selector) {
-      const count = await page.locator(selector).count();
-      if (count < 1) return;
-      const visible = await page.locator(selector).first().isVisible();
-      if (visible) throw new Error(`Expected "${selector}" to be hidden.`);
+      try {
+        await page.locator(selector).first().waitFor({
+          state: "hidden",
+          timeout: DEFAULT_EXPECT_TIMEOUT_MS
+        });
+      } catch {
+        throw new Error(`Expected "${selector}" to be hidden.`);
+      }
     },
     async insideViewport(selector, options = {}) {
+      await waitForVisible(selector);
       const margin = options.margin ?? 0;
       const rect = await elementRect(page, selector);
       if (!rect) throw new Error(`Expected "${selector}" to exist.`);
@@ -493,6 +674,7 @@ function createExpect(page, outputDir) {
       }
     },
     async notClipped(selector) {
+      await waitForVisible(selector);
       const result = await page.locator(selector).first().evaluate((element) => {
         const rect = element.getBoundingClientRect();
         let parent = element.parentElement;
@@ -514,6 +696,8 @@ function createExpect(page, outputDir) {
       }
     },
     async notOverlapping(firstSelector, secondSelector) {
+      await waitForVisible(firstSelector);
+      await waitForVisible(secondSelector);
       const first = await elementRect(page, firstSelector);
       const second = await elementRect(page, secondSelector);
       if (!first || !second) throw new Error(`Expected both "${firstSelector}" and "${secondSelector}" to exist.`);
@@ -523,6 +707,8 @@ function createExpect(page, outputDir) {
       }
     },
     async zIndexAbove(topSelector, lowerSelector) {
+      await waitForVisible(topSelector);
+      await waitForVisible(lowerSelector);
       const values = await page.evaluate((payload) => {
         const { topSelector: top, lowerSelector: lower } = payload;
         const topElement = document.querySelector(top);
@@ -596,7 +782,7 @@ async function openMountPage(input) {
   await page.setViewportSize({ width: viewport.width, height: viewport.height });
   const entryPath = writeEntry(input.runtime.tempDir, input.name, input.entrySource);
   const htmlPath = writeHtml(input.runtime.tempDir, input.name, entryPath, input.css);
-  await installTraceBinding(input.runtime.page, input.trace, input.traceContext ?? {});
+  await installTraceBinding(input.runtime.page, input.traceRecorder, input.traceContext ?? {});
   await installBridge(page, input.bridge.state, input.bridge.manifest, input.bridge.bridgeInit);
   const mountedBridge = createMountedBridge(page, input.bridge.state);
   const context = {
@@ -629,23 +815,47 @@ async function openMountPage(input) {
 async function createHarness(config = {}) {
   const rootDir = normalizeRoot(config.rootDir);
   const browserName = config.browser?.browserName ?? "chromium";
-  const playwrightBrowser = await loadPlaywright(browserName);
-  const launchedBrowser = await playwrightBrowser.launch({
-    headless: config.browser?.headless ?? true
+  const headless = config.browser?.headless ?? true;
+  const workerRuntime = await acquireBrowserWorkerRuntime({
+    rootDir,
+    browserName,
+    headless
   });
-  const server = await createViteServer(rootDir);
-  const page = await launchedBrowser.newPage({
-    viewport: {
-      width: config.viewport?.width ?? DEFAULT_VIEWPORT.width,
-      height: config.viewport?.height ?? DEFAULT_VIEWPORT.height,
-      deviceScaleFactor: config.viewport?.deviceScaleFactor
+  let released = false;
+  let destroyed = false;
+  let tempDir = null;
+  let context = null;
+  let page = null;
+  let traceRecorder;
+  function releaseRuntimeOnce() {
+    if (released) {
+      return;
     }
-  });
-  const tempDir = fs.mkdtempSync(path.join(rootDir, ".wood-browser-harness-"));
-  const trace = config.trace?.enabled === true ? createTraceCapture({ maxEvents: config.trace.maxEvents }) : void 0;
+    released = true;
+    releaseBrowserWorkerRuntime(workerRuntime);
+  }
+  try {
+    tempDir = fs.mkdtempSync(path.join(os.tmpdir(), "wood-browser-harness-"));
+    context = await workerRuntime.browser.newContext({
+      viewport: {
+        width: config.viewport?.width ?? DEFAULT_VIEWPORT.width,
+        height: config.viewport?.height ?? DEFAULT_VIEWPORT.height,
+        deviceScaleFactor: config.viewport?.deviceScaleFactor
+      }
+    });
+    page = await context.newPage();
+    traceRecorder = config.trace?.enabled === true ? new TraceRecorder() : void 0;
+    traceRecorder?.enable({ maxEvents: config.trace?.maxEvents });
+  } catch (error) {
+    if (page) await waitForBoundedClose(page.close());
+    if (context) await waitForBoundedClose(context.close());
+    if (tempDir) fs.rmSync(tempDir, { recursive: true, force: true });
+    releaseRuntimeOnce();
+    throw error;
+  }
   const runtime = {
-    browser: launchedBrowser,
-    server,
+    context,
+    server: workerRuntime.server,
     page,
     tempDir,
     rootDir
@@ -657,7 +867,7 @@ async function createHarness(config = {}) {
   });
   return {
     page,
-    ...trace ? { trace } : {},
+    ...traceRecorder ? { traceRecorder } : {},
     async mountRoute(routeKey, options = {}) {
       const bridge = createBrowserBridgeFixtureWithTrace(mergeBridge(config.bridge, options.bridge), config.trace);
       const route = {
@@ -690,7 +900,7 @@ async function createHarness(config = {}) {
         css,
         viewport: options.viewport ?? config.viewport,
         bridge,
-        trace,
+        traceRecorder,
         traceContext: {
           windowId: config.trace?.windowId ?? routeKey.split(".")[0],
           routeKey,
@@ -727,7 +937,7 @@ async function createHarness(config = {}) {
         css,
         viewport: options.viewport ?? config.viewport,
         bridge,
-        trace,
+        traceRecorder,
         traceContext: {
           windowId: config.trace?.windowId ?? "wood-browser-harness",
           harnessId: config.trace?.harnessId
@@ -760,7 +970,7 @@ async function createHarness(config = {}) {
         css,
         viewport: tree.viewport ?? config.viewport,
         bridge,
-        trace,
+        traceRecorder,
         traceContext: {
           windowId: config.trace?.windowId ?? tree.page?.key?.split(".")[0] ?? "wood-browser-harness",
           routeKey: tree.page?.key,
@@ -777,11 +987,17 @@ async function createHarness(config = {}) {
       });
     },
     async destroy() {
-      await page.close().catch(() => void 0);
-      await server.close().catch(() => void 0);
-      await launchedBrowser.close().catch(() => void 0);
-      trace?.stop();
+      if (destroyed) {
+        return;
+      }
+      destroyed = true;
+      await Promise.all([
+        waitForBoundedClose(page.close()),
+        waitForBoundedClose(context.close())
+      ]);
+      traceRecorder?.disable();
       fs.rmSync(tempDir, { recursive: true, force: true });
+      releaseRuntimeOnce();
     }
   };
 }