@noego/wood 0.4.0 → 0.4.2

package/dist/testing/browser.js

@@ -2,10 +2,18 @@ import fs from "node:fs";
 import { createRequire } from "node:module";
 import path from "node:path";
 import { pathToFileURL } from "node:url";
+import {
+  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();
 function normalizeRoot(rootDir) {
   return path.resolve(rootDir ?? process.cwd());
 }
@@ -28,6 +36,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;
@@ -58,24 +78,32 @@ function createBridgeState(input) {
   };
 }
 function createBrowserBridgeFixture(input) {
+  return createBrowserBridgeFixtureWithTrace(input, void 0);
+}
+function createBrowserBridgeFixtureWithTrace(input, traceConfig) {
   const state = createBridgeState(input);
   const manifest = Array.from(state.operations.entries()).map(([channel, handler]) => channelToManifestEntry(channel, handler));
   return {
     state,
     manifest,
-    bridgeInit: buildBridgeInitScript(manifest)
+    bridgeInit: buildBridgeInitScript(manifest, traceConfig)
   };
 }
-function buildBridgeInitScript(manifest) {
+function buildBridgeInitScript(manifest, traceConfig) {
+  const traceEnabled = traceConfig?.enabled === true;
+  const traceMinLevel = traceConfig?.minLevel ?? "debug";
   return `
 (() => {
   const manifest = ${JSON.stringify(manifest)};
   const listeners = new Map();
   const bridge = {
     __rpcManifest: manifest,
-    __woodConfig: async () => ({ rendererTraceEnabled: false }),
+    __woodConfig: async () => ({
+      rendererTraceEnabled: ${JSON.stringify(traceEnabled)},
+      rendererTraceMinLevel: ${JSON.stringify(traceMinLevel)}
+    }),
     __log: () => {},
-    __trace: () => {},
+    __trace: (payload) => window.__woodBrowserTrace?.(payload),
     __window: {
       current: async () => ({ ok: true, windowId: 'wood-browser-harness', defaultRoute: window.__WOOD_BROWSER_DEFAULT_ROUTE__ }),
       open: async () => ({}),
@@ -151,12 +179,13 @@ 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 server = await vite.createServer({
     root: rootDir,
+    cacheDir,
     logLevel: process.env.WOOD_BROWSER_TEST_DEBUG ? "info" : "silent",
     plugins,
     resolve: {
@@ -167,6 +196,92 @@ async function createViteServer(rootDir) {
   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(input.rootDir, ".wood-browser-vite-"));
+  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 });
+    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 });
+    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";
 }
@@ -373,6 +488,14 @@ async function installBridge(page, bridgeState, manifest, bridgeInit) {
     window.__WOOD_BROWSER_BRIDGE_MANIFEST__ = entries;
   }, manifest);
 }
+async function installTraceBinding(page, traceRecorder, context) {
+  if (!traceRecorder) {
+    return;
+  }
+  await page.exposeBinding("__woodBrowserTrace", async (_source, payload) => {
+    dispatchRendererTracePayload(payload, context);
+  });
+}
 function createMountedBridge(page, state) {
   return {
     async emit(channel, payload) {
@@ -449,20 +572,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.`);
@@ -473,6 +611,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;
@@ -494,6 +633,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.`);
@@ -503,6 +644,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);
@@ -576,6 +719,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.traceRecorder, input.traceContext ?? {});
   await installBridge(page, input.bridge.state, input.bridge.manifest, input.bridge.bridgeInit);
   const mountedBridge = createMountedBridge(page, input.bridge.state);
   const context = {
@@ -608,22 +752,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-"));
+    released = true;
+    releaseBrowserWorkerRuntime(workerRuntime);
+  }
+  try {
+    tempDir = fs.mkdtempSync(path.join(rootDir, ".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
@@ -635,8 +804,9 @@ async function createHarness(config = {}) {
   });
   return {
     page,
+    ...traceRecorder ? { traceRecorder } : {},
     async mountRoute(routeKey, options = {}) {
-      const bridge = createBrowserBridgeFixture(mergeBridge(config.bridge, options.bridge));
+      const bridge = createBrowserBridgeFixtureWithTrace(mergeBridge(config.bridge, options.bridge), config.trace);
       const route = {
         params: options.route?.params ?? {},
         query: options.route?.query ?? {}
@@ -667,6 +837,12 @@ async function createHarness(config = {}) {
         css,
         viewport: options.viewport ?? config.viewport,
         bridge,
+        traceRecorder,
+        traceContext: {
+          windowId: config.trace?.windowId ?? routeKey.split(".")[0],
+          routeKey,
+          harnessId: config.trace?.harnessId
+        },
         context: {
           route: {
             key: routeKey,
@@ -687,7 +863,7 @@ async function createHarness(config = {}) {
     async mountComponent(component, options = {}) {
       const componentPath = resolveFromRoot(rootDir, component);
       assertFileExists(componentPath, "Component");
-      const bridge = createBrowserBridgeFixture(mergeBridge(config.bridge, options.bridge));
+      const bridge = createBrowserBridgeFixtureWithTrace(mergeBridge(config.bridge, options.bridge), config.trace);
       return await openMountPage({
         runtime,
         entrySource: buildComponentEntrySource({
@@ -698,6 +874,11 @@ async function createHarness(config = {}) {
         css,
         viewport: options.viewport ?? config.viewport,
         bridge,
+        traceRecorder,
+        traceContext: {
+          windowId: config.trace?.windowId ?? "wood-browser-harness",
+          harnessId: config.trace?.harnessId
+        },
         context: {},
         hooks: {
           beforeMount: options.page?.beforeMount ?? config.page?.beforeMount,
@@ -706,7 +887,7 @@ async function createHarness(config = {}) {
       });
     },
     async mountTree(tree) {
-      const bridge = createBrowserBridgeFixture(mergeBridge(config.bridge, tree.bridge));
+      const bridge = createBrowserBridgeFixtureWithTrace(mergeBridge(config.bridge, tree.bridge), config.trace);
       const layouts = (tree.layouts ?? []).map((layout) => ({
         component: resolveFromRoot(rootDir, layout.component),
         props: layout.props
@@ -726,6 +907,12 @@ async function createHarness(config = {}) {
         css,
         viewport: tree.viewport ?? config.viewport,
         bridge,
+        traceRecorder,
+        traceContext: {
+          windowId: config.trace?.windowId ?? tree.page?.key?.split(".")[0] ?? "wood-browser-harness",
+          routeKey: tree.page?.key,
+          harnessId: config.trace?.harnessId
+        },
         context: tree.page?.key ? {
           route: {
             key: tree.page.key,
@@ -737,10 +924,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);
+      if (destroyed) {
+        return;
+      }
+      destroyed = true;
+      await Promise.all([
+        waitForBoundedClose(page.close()),
+        waitForBoundedClose(context.close())
+      ]);
+      traceRecorder?.disable();
       fs.rmSync(tempDir, { recursive: true, force: true });
+      releaseRuntimeOnce();
     }
   };
 }