@noego/wood 0.1.2 → 0.2.0

package/dist/testing/browser.js

@@ -0,0 +1,754 @@
+import fs from "node:fs";
+import { createRequire } from "node:module";
+import path from "node:path";
+import { pathToFileURL } from "node:url";
+const DEFAULT_VIEWPORT = {
+  width: 1280,
+  height: 800
+};
+function normalizeRoot(rootDir) {
+  return path.resolve(rootDir ?? process.cwd());
+}
+function resolveFromRoot(rootDir, filePath) {
+  return path.isAbsolute(filePath) ? filePath : path.resolve(rootDir, filePath);
+}
+function viteImport(filePath) {
+  return `/@fs/${filePath.replace(/\\/g, "/").replace(/^\/+/, "")}`;
+}
+function mergeBridge(base, override) {
+  return {
+    operations: {
+      ...base?.operations ?? {},
+      ...override?.operations ?? {}
+    },
+    events: {
+      ...base?.events ?? {},
+      ...override?.events ?? {}
+    },
+    record: override?.record ?? base?.record
+  };
+}
+function channelToManifestEntry(channel, handler) {
+  const pathSegments = channel.split(".").filter(Boolean);
+  const action = pathSegments.length > 0 ? pathSegments[pathSegments.length - 1] : channel;
+  const controller = pathSegments.length > 1 ? pathSegments[0] : channel;
+  return {
+    channel,
+    controller,
+    action,
+    path: pathSegments,
+    hasInput: typeof handler === "function"
+  };
+}
+function createBridgeState(input) {
+  const initialEvents = Object.entries(input?.events ?? {}).flatMap(([channel, payloadOrList]) => {
+    const payloads = Array.isArray(payloadOrList) ? payloadOrList : [payloadOrList];
+    return payloads.map((payload) => ({
+      channel,
+      payload,
+      timestamp: (/* @__PURE__ */ new Date()).toISOString()
+    }));
+  });
+  return {
+    operations: new Map(Object.entries(input?.operations ?? {})),
+    initialEvents,
+    calls: [],
+    emittedEvents: [],
+    record: input?.record ?? true
+  };
+}
+function createBrowserBridgeFixture(input) {
+  const state = createBridgeState(input);
+  const manifest = Array.from(state.operations.entries()).map(([channel, handler]) => channelToManifestEntry(channel, handler));
+  return {
+    state,
+    manifest,
+    bridgeInit: buildBridgeInitScript(manifest)
+  };
+}
+function buildBridgeInitScript(manifest) {
+  return `
+(() => {
+  const manifest = ${JSON.stringify(manifest)};
+  const listeners = new Map();
+  const bridge = {
+    __rpcManifest: manifest,
+    __woodConfig: async () => ({ rendererTraceEnabled: false }),
+    __log: () => {},
+    __trace: () => {},
+    __window: {
+      current: async () => ({ ok: true, windowId: 'wood-browser-harness', defaultRoute: window.__WOOD_BROWSER_DEFAULT_ROUTE__ }),
+      open: async () => ({}),
+      close: async () => ({}),
+      focus: async () => ({}),
+      minimize: async () => ({}),
+      maximize: async () => ({}),
+    },
+    on(channel, callback) {
+      if (!listeners.has(channel)) listeners.set(channel, new Set());
+      listeners.get(channel).add(callback);
+      return () => listeners.get(channel)?.delete(callback);
+    },
+  };
+
+  for (const entry of manifest) {
+    let current = bridge;
+    for (let i = 0; i < entry.path.length - 1; i += 1) {
+      const segment = entry.path[i];
+      current[segment] ??= {};
+      current = current[segment];
+    }
+    const leaf = entry.path[entry.path.length - 1];
+    current[leaf] = async (data) => window.__woodBrowserInvoke(entry.channel, data);
+  }
+
+  window.__woodBrowserEmit = (channel, payload) => {
+    const handlers = listeners.get(channel);
+    if (!handlers) return;
+    for (const handler of handlers) handler(payload);
+  };
+  window.__NOEGO_WOOD_BRIDGE__ = bridge;
+  window.wood = bridge;
+  globalThis.__NOEGO_WOOD_BRIDGE__ = bridge;
+  globalThis.wood = bridge;
+})();
+`;
+}
+async function loadPlaywright(browserName) {
+  const playwright = await import("playwright");
+  return playwright[browserName];
+}
+async function loadVite() {
+  return await import("vite");
+}
+async function loadSveltePlugin(rootDir) {
+  try {
+    const rootPluginPath = path.join(
+      rootDir,
+      "node_modules",
+      "@sveltejs",
+      "vite-plugin-svelte",
+      "src",
+      "index.js"
+    );
+    if (fs.existsSync(rootPluginPath)) {
+      const mod2 = await import(pathToFileURL(rootPluginPath).href);
+      return mod2.svelte;
+    }
+    const rootRequire = createRequire(path.join(rootDir, "package.json"));
+    const mod = await import(pathToFileURL(rootRequire.resolve("@sveltejs/vite-plugin-svelte")).href);
+    return mod.svelte;
+  } catch {
+    try {
+      const mod = await import("@sveltejs/vite-plugin-svelte");
+      return mod.svelte;
+    } catch {
+      return null;
+    }
+  }
+}
+async function loadViews(viewsPath) {
+  const parser = await import("../parser/views_parser.js");
+  return parser.parseViewsFile(viewsPath);
+}
+async function createViteServer(rootDir) {
+  const vite = await loadVite();
+  const svelte = await loadSveltePlugin(rootDir);
+  const plugins = svelte ? [svelte()] : [];
+  const server = await vite.createServer({
+    root: rootDir,
+    logLevel: process.env.WOOD_BROWSER_TEST_DEBUG ? "info" : "silent",
+    plugins,
+    resolve: {
+      dedupe: ["svelte"]
+    },
+    server: { port: 0 }
+  });
+  await server.listen();
+  return server;
+}
+function serverBaseUrl(server) {
+  return server.resolvedUrls?.local?.[0] ?? "http://127.0.0.1:5173";
+}
+function assertFileExists(filePath, label) {
+  if (!fs.existsSync(filePath)) {
+    throw new Error(`${label} does not exist: ${filePath}`);
+  }
+}
+function writeEntry(tempDir, name, source) {
+  fs.mkdirSync(tempDir, { recursive: true });
+  const entryPath = path.join(tempDir, `${name}.ts`);
+  fs.writeFileSync(entryPath, source);
+  return entryPath;
+}
+function writeHtml(tempDir, name, entryPath, cssFiles) {
+  const styles = cssFiles.map((cssPath) => `<link rel="stylesheet" href="${viteImport(cssPath)}" />`).join("\n");
+  const htmlPath = path.join(tempDir, `${name}.html`);
+  fs.writeFileSync(htmlPath, `<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    ${styles}
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="${viteImport(entryPath)}"></script>
+  </body>
+</html>
+`);
+  return htmlPath;
+}
+function viewKey(view) {
+  return `${view.windowName}.${view.pageName}`;
+}
+function findView(views, routeKey) {
+  const found = views.find((view) => viewKey(view) === routeKey);
+  if (!found) {
+    throw new Error(
+      `Unknown Wood route "${routeKey}". Available routes: ${views.map(viewKey).join(", ")}`
+    );
+  }
+  return found;
+}
+function resolveComponentPath(rootDir, componentDir, filePath) {
+  if (path.isAbsolute(filePath)) return filePath;
+  const base = componentDir ? resolveFromRoot(rootDir, componentDir) : rootDir;
+  const componentDirName = componentDir ? path.basename(componentDir) : "";
+  if (componentDirName && filePath.replace(/\\/g, "/").startsWith(`${componentDirName}/`)) {
+    return path.resolve(base, filePath.slice(componentDirName.length + 1));
+  }
+  return path.resolve(base, filePath);
+}
+function buildRouteEntrySource(input) {
+  const { view, rootDir, componentDir, routeKey, route } = input;
+  const viewPath = resolveComponentPath(rootDir, componentDir, view.viewPath);
+  const layoutPaths = view.layouts.map((layout) => resolveComponentPath(rootDir, componentDir, layout));
+  const controllerPath = view.controller ? resolveComponentPath(rootDir, componentDir, view.controller) : null;
+  const layoutControllerPaths = view.layoutControllers?.map(
+    (controller) => controller ? resolveComponentPath(rootDir, componentDir, controller) : null
+  ) ?? [];
+  const imports = [
+    `import { mount } from 'svelte';`,
+    `import NavigationShell from '@noego/wood/navigation-shell';`,
+    `import { getContainer } from '@noego/wood/client';`,
+    `import { getNavigation } from '@noego/wood/navigation';`,
+    `import ViewComponent from '${viteImport(viewPath)}';`,
+    ...layoutPaths.map((layoutPath, index) => `import Layout${index} from '${viteImport(layoutPath)}';`),
+    ...controllerPath ? [`import PageController from '${viteImport(controllerPath)}';`] : [],
+    ...layoutControllerPaths.map(
+      (controllerPath2, index) => controllerPath2 ? `import LayoutController${index} from '${viteImport(controllerPath2)}';` : ""
+    ).filter(Boolean)
+  ];
+  const layoutControllerClasses = layoutControllerPaths.map(
+    (controllerPath2, index) => controllerPath2 ? `LayoutController${index}` : "undefined"
+  );
+  return `${imports.join("\n")}
+
+const entry = {
+  key: ${JSON.stringify(routeKey)},
+  windowName: ${JSON.stringify(view.windowName)},
+  pageName: ${JSON.stringify(view.pageName)},
+  viewPath: ${JSON.stringify(view.viewPath)},
+  layoutPaths: ${JSON.stringify(view.layouts)},
+  layoutControllers: ${JSON.stringify(view.layoutControllers ?? [])},
+  controller: ${JSON.stringify(view.controller)},
+  layoutControllerClasses: [${layoutControllerClasses.join(", ")}],
+  controllerClass: ${controllerPath ? "PageController" : "undefined"},
+  view: ViewComponent,
+  layouts: [${layoutPaths.map((_, index) => `Layout${index}`).join(", ")}],
+};
+
+function createScopedContainer() {
+  const root = getContainer();
+  const scope = root.extend();
+  return scope;
+}
+
+async function resolveController(ControllerClass) {
+  if (!ControllerClass) return undefined;
+  const scope = createScopedContainer();
+  scope.registerClass?.(ControllerClass);
+  return await scope.get(ControllerClass);
+}
+
+async function createViewController(nextEntry) {
+  return await resolveController(nextEntry.controllerClass);
+}
+
+async function createLayoutControllers(nextEntry) {
+  const controllers = [];
+  for (const ControllerClass of nextEntry.layoutControllerClasses) {
+    controllers.push(await resolveController(ControllerClass));
+  }
+  return controllers;
+}
+
+function getViewManifestEntry(nextKey) {
+  return nextKey === entry.key ? entry : null;
+}
+
+const navigation = getNavigation();
+navigation.replace(entry.key, ${JSON.stringify(route.params)}, ${JSON.stringify(route.query)});
+
+const controller = await createViewController(entry);
+const layoutControllers = await createLayoutControllers(entry);
+
+window.__WOOD_BROWSER_APP__ = mount(NavigationShell, {
+  target: document.getElementById('app'),
+  props: {
+    manifest: { [entry.key]: entry },
+    initialEntry: entry,
+    initialController: controller,
+    initialLayoutControllers: layoutControllers,
+    createViewControllerFn: createViewController,
+    createLayoutControllersFn: createLayoutControllers,
+    getViewManifestEntryFn: getViewManifestEntry,
+  },
+});
+`;
+}
+function buildGeneratedAppEntrySource(input) {
+  return `import { app } from '${viteImport(input.generatedApp)}';
+window.__WOOD_BROWSER_DEFAULT_ROUTE__ = ${JSON.stringify(input.routeKey)};
+window.__WOOD_BROWSER_APP__ = await app(document.getElementById('app'));
+`;
+}
+function buildComponentEntrySource(input) {
+  return `import { mount } from 'svelte';
+import Component from '${viteImport(input.componentPath)}';
+window.__WOOD_BROWSER_APP__ = mount(Component, {
+  target: document.getElementById('app'),
+  props: ${JSON.stringify(input.props)},
+});
+`;
+}
+function buildTreeEntrySource(input) {
+  const imports = [
+    `import { mount } from 'svelte';`,
+    `import WoodRecursiveRender from '@noego/wood/recursive-render';`,
+    `import ViewComponent from '${viteImport(input.view.component)}';`,
+    ...input.layouts.map((layout, index) => `import Layout${index} from '${viteImport(layout.component)}';`)
+  ];
+  const layoutControllers = input.layouts.map((layout) => ({
+    data: layout.props?.data,
+    input: layout.props?.input,
+    events: layout.props?.events
+  }));
+  const viewController = {
+    data: input.view.props?.data,
+    input: input.view.props?.input,
+    events: input.view.props?.events
+  };
+  return `${imports.join("\n")}
+window.__WOOD_BROWSER_APP__ = mount(WoodRecursiveRender, {
+  target: document.getElementById('app'),
+  props: {
+    layouts: [${input.layouts.map((_, index) => `Layout${index}`).join(", ")}],
+    layoutControllers: ${JSON.stringify(layoutControllers)},
+    view: ViewComponent,
+    controller: ${JSON.stringify(viewController)},
+  },
+});
+`;
+}
+async function installBridge(page, bridgeState, manifest, bridgeInit) {
+  await page.exposeBinding("__woodBrowserInvoke", async (_source, channel, input) => {
+    const call = {
+      channel,
+      input,
+      timestamp: (/* @__PURE__ */ new Date()).toISOString()
+    };
+    if (bridgeState.record) {
+      bridgeState.calls.push(call);
+    }
+    const handler = bridgeState.operations.get(channel);
+    if (typeof handler === "function") {
+      return await handler(input, { channel, calls: bridgeState.calls });
+    }
+    return handler;
+  });
+  await page.addInitScript(bridgeInit);
+  await page.addInitScript((entries) => {
+    window.__WOOD_BROWSER_BRIDGE_MANIFEST__ = entries;
+  }, manifest);
+}
+function createMountedBridge(page, state) {
+  return {
+    async emit(channel, payload) {
+      state.emittedEvents.push({
+        channel,
+        payload,
+        timestamp: (/* @__PURE__ */ new Date()).toISOString()
+      });
+      await page.evaluate(({ eventChannel, eventPayload }) => {
+        window.__woodBrowserEmit?.(eventChannel, eventPayload);
+      }, { eventChannel: channel, eventPayload: payload });
+    },
+    calls(channel) {
+      return channel ? state.calls.filter((call) => call.channel === channel) : [...state.calls];
+    },
+    events(channel) {
+      return channel ? state.emittedEvents.filter((event) => event.channel === channel) : [...state.emittedEvents];
+    },
+    setOperation(channel, handler) {
+      state.operations.set(channel, handler);
+    },
+    clearCalls() {
+      state.calls.length = 0;
+    }
+  };
+}
+function createMountedNavigation(page) {
+  return {
+    async current() {
+      return await page.evaluate(async () => {
+        const specifier = "@noego/wood/navigation";
+        const mod = await import(
+          /* @vite-ignore */
+          specifier
+        );
+        return mod.getNavigation().getCurrent();
+      });
+    },
+    async go(routePage, params = {}, query = {}) {
+      await page.evaluate(async (payload) => {
+        const { routePage: nextPage, params: nextParams, query: nextQuery } = payload;
+        const specifier = "@noego/wood/navigation";
+        const mod = await import(
+          /* @vite-ignore */
+          specifier
+        );
+        mod.getNavigation().go(nextPage, nextParams, nextQuery);
+      }, { routePage, params, query });
+    },
+    async replace(routePage, params = {}, query = {}) {
+      await page.evaluate(async (payload) => {
+        const { routePage: nextPage, params: nextParams, query: nextQuery } = payload;
+        const specifier = "@noego/wood/navigation";
+        const mod = await import(
+          /* @vite-ignore */
+          specifier
+        );
+        mod.getNavigation().replace(nextPage, nextParams, nextQuery);
+      }, { routePage, params, query });
+    }
+  };
+}
+async function elementRect(page, selector) {
+  return await page.locator(selector).evaluate((element) => {
+    const rect = element.getBoundingClientRect();
+    return {
+      top: rect.top,
+      left: rect.left,
+      right: rect.right,
+      bottom: rect.bottom,
+      width: rect.width,
+      height: rect.height
+    };
+  }).catch(() => null);
+}
+function createExpect(page, outputDir) {
+  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.`);
+    },
+    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.`);
+    },
+    async insideViewport(selector, options = {}) {
+      const margin = options.margin ?? 0;
+      const rect = await elementRect(page, selector);
+      if (!rect) throw new Error(`Expected "${selector}" to exist.`);
+      const viewport = page.viewportSize();
+      if (!viewport) throw new Error("Cannot assert viewport bounds without a viewport.");
+      if (rect.left < margin || rect.top < margin || rect.right > viewport.width - margin || rect.bottom > viewport.height - margin) {
+        throw new Error(`Expected "${selector}" to be inside viewport. Rect: ${JSON.stringify(rect)}, viewport: ${JSON.stringify(viewport)}`);
+      }
+    },
+    async notClipped(selector) {
+      const result = await page.locator(selector).first().evaluate((element) => {
+        const rect = element.getBoundingClientRect();
+        let parent = element.parentElement;
+        while (parent) {
+          const style = window.getComputedStyle(parent);
+          const clips = /(auto|hidden|scroll|clip)/.test(`${style.overflow}${style.overflowX}${style.overflowY}`);
+          if (clips) {
+            const parentRect = parent.getBoundingClientRect();
+            if (rect.left < parentRect.left || rect.top < parentRect.top || rect.right > parentRect.right || rect.bottom > parentRect.bottom) {
+              return { ok: false, parent: parent.tagName, rect, parentRect };
+            }
+          }
+          parent = parent.parentElement;
+        }
+        return { ok: true };
+      });
+      if (!result.ok) {
+        throw new Error(`Expected "${selector}" not to be clipped. ${JSON.stringify(result)}`);
+      }
+    },
+    async notOverlapping(firstSelector, 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.`);
+      const overlaps = first.left < second.right && first.right > second.left && first.top < second.bottom && first.bottom > second.top;
+      if (overlaps) {
+        throw new Error(`Expected "${firstSelector}" not to overlap "${secondSelector}".`);
+      }
+    },
+    async zIndexAbove(topSelector, lowerSelector) {
+      const values = await page.evaluate((payload) => {
+        const { topSelector: top, lowerSelector: lower } = payload;
+        const topElement = document.querySelector(top);
+        const lowerElement = document.querySelector(lower);
+        if (!topElement || !lowerElement) return null;
+        return {
+          top: Number(window.getComputedStyle(topElement).zIndex) || 0,
+          lower: Number(window.getComputedStyle(lowerElement).zIndex) || 0
+        };
+      }, { topSelector, lowerSelector });
+      if (!values) throw new Error(`Expected both "${topSelector}" and "${lowerSelector}" to exist.`);
+      if (values.top <= values.lower) {
+        throw new Error(`Expected "${topSelector}" z-index (${values.top}) to be above "${lowerSelector}" (${values.lower}).`);
+      }
+    },
+    async stableAfterAnimation(selector = "body", options = {}) {
+      const frameCount = options.frameCount ?? 3;
+      const timeoutMs = options.timeoutMs ?? 2e3;
+      const startedAt = Date.now();
+      let previous = "";
+      let stableFrames = 0;
+      while (Date.now() - startedAt < timeoutMs) {
+        const current = JSON.stringify(await elementRect(page, selector));
+        if (current === previous) {
+          stableFrames += 1;
+          if (stableFrames >= frameCount) return;
+        } else {
+          stableFrames = 0;
+          previous = current;
+        }
+        await page.evaluate(() => new Promise((resolve) => requestAnimationFrame(() => resolve(void 0))));
+      }
+      throw new Error(`Expected "${selector}" to become stable within ${timeoutMs}ms.`);
+    },
+    async screenshot(name, options = {}) {
+      const outputPath = path.join(outputDir, `${name}.png`);
+      await fs.promises.mkdir(outputDir, { recursive: true });
+      const masks = options.mask?.map((selector) => page.locator(selector)) ?? [];
+      await page.screenshot({
+        path: outputPath,
+        fullPage: options.fullPage ?? true,
+        mask: masks
+      });
+    }
+  };
+}
+function createSurface(input) {
+  return {
+    page: input.page,
+    bridge: input.bridge,
+    navigation: createMountedNavigation(input.page),
+    expect: createExpect(input.page, input.outputDir),
+    locator(selector) {
+      return input.page.locator(selector);
+    },
+    async click(selector) {
+      await input.page.locator(selector).click();
+    },
+    async fill(selector, value) {
+      await input.page.locator(selector).fill(value);
+    },
+    async evaluate(fn) {
+      return await input.page.evaluate(fn);
+    },
+    destroy: input.destroy
+  };
+}
+async function openMountPage(input) {
+  const page = input.runtime.page;
+  const viewport = input.viewport ?? DEFAULT_VIEWPORT;
+  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 installBridge(page, input.bridge.state, input.bridge.manifest, input.bridge.bridgeInit);
+  const mountedBridge = createMountedBridge(page, input.bridge.state);
+  const context = {
+    page,
+    bridge: mountedBridge,
+    ...input.context
+  };
+  await input.hooks?.beforeMount?.(context);
+  await page.goto(`${serverBaseUrl(input.runtime.server)}${viteImport(htmlPath)}`, {
+    waitUntil: "domcontentloaded"
+  });
+  for (const event of input.bridge.state.initialEvents) {
+    await mountedBridge.emit(event.channel, event.payload);
+  }
+  await input.hooks?.afterMount?.(context);
+  return createSurface({
+    page,
+    bridge: mountedBridge,
+    outputDir: path.join(input.runtime.rootDir, "test-results", "wood-browser"),
+    destroy: async () => {
+      await page.evaluate(() => {
+        const app = window.__WOOD_BROWSER_APP__;
+        if (app && typeof app === "object" && typeof app.$destroy === "function") {
+          app.$destroy();
+        }
+      }).catch(() => void 0);
+    }
+  });
+}
+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 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
+    }
+  });
+  const tempDir = fs.mkdtempSync(path.join(rootDir, ".wood-browser-harness-"));
+  const runtime = {
+    browser: launchedBrowser,
+    server,
+    page,
+    tempDir,
+    rootDir
+  };
+  const css = (config.css ?? []).map((cssPath) => {
+    const resolved = resolveFromRoot(rootDir, cssPath);
+    assertFileExists(resolved, "CSS file");
+    return resolved;
+  });
+  return {
+    page,
+    async mountRoute(routeKey, options = {}) {
+      const bridge = createBrowserBridgeFixture(mergeBridge(config.bridge, options.bridge));
+      const route = {
+        params: options.route?.params ?? {},
+        query: options.route?.query ?? {}
+      };
+      let entrySource;
+      if (config.viewsConfig) {
+        const viewsPath = resolveFromRoot(rootDir, config.viewsConfig);
+        const views = await loadViews(viewsPath);
+        const view = findView(views, routeKey);
+        entrySource = buildRouteEntrySource({
+          routeKey,
+          view,
+          rootDir,
+          componentDir: config.componentDir,
+          route
+        });
+      } else if (config.generatedApp) {
+        const generatedApp = resolveFromRoot(rootDir, config.generatedApp);
+        assertFileExists(generatedApp, "Generated app");
+        entrySource = buildGeneratedAppEntrySource({ generatedApp, routeKey });
+      } else {
+        throw new Error("mountRoute requires either viewsConfig or generatedApp in browser.createHarness().");
+      }
+      const mounted = await openMountPage({
+        runtime,
+        entrySource,
+        name: `route-${routeKey.replace(/[^a-zA-Z0-9_-]/g, "-")}`,
+        css,
+        viewport: options.viewport ?? config.viewport,
+        bridge,
+        context: {
+          route: {
+            key: routeKey,
+            params: route.params,
+            query: route.query
+          }
+        },
+        hooks: {
+          beforeMount: options.page?.beforeMount ?? config.page?.beforeMount,
+          afterMount: options.page?.afterMount ?? config.page?.afterMount
+        }
+      });
+      return {
+        ...mounted,
+        routeKey
+      };
+    },
+    async mountComponent(component, options = {}) {
+      const componentPath = resolveFromRoot(rootDir, component);
+      assertFileExists(componentPath, "Component");
+      const bridge = createBrowserBridgeFixture(mergeBridge(config.bridge, options.bridge));
+      return await openMountPage({
+        runtime,
+        entrySource: buildComponentEntrySource({
+          componentPath,
+          props: options.props ?? {}
+        }),
+        name: `component-${path.basename(componentPath).replace(/[^a-zA-Z0-9_-]/g, "-")}`,
+        css,
+        viewport: options.viewport ?? config.viewport,
+        bridge,
+        context: {},
+        hooks: {
+          beforeMount: options.page?.beforeMount ?? config.page?.beforeMount,
+          afterMount: options.page?.afterMount ?? config.page?.afterMount
+        }
+      });
+    },
+    async mountTree(tree) {
+      const bridge = createBrowserBridgeFixture(mergeBridge(config.bridge, tree.bridge));
+      const layouts = (tree.layouts ?? []).map((layout) => ({
+        component: resolveFromRoot(rootDir, layout.component),
+        props: layout.props
+      }));
+      for (const layout of layouts) {
+        assertFileExists(layout.component, "Layout component");
+      }
+      const view = {
+        component: resolveFromRoot(rootDir, tree.view.component),
+        props: tree.view.props
+      };
+      assertFileExists(view.component, "View component");
+      return await openMountPage({
+        runtime,
+        entrySource: buildTreeEntrySource({ layouts, view }),
+        name: `tree-${path.basename(view.component).replace(/[^a-zA-Z0-9_-]/g, "-")}`,
+        css,
+        viewport: tree.viewport ?? config.viewport,
+        bridge,
+        context: tree.page?.key ? {
+          route: {
+            key: tree.page.key,
+            params: tree.page.params ?? {},
+            query: tree.page.query ?? {}
+          }
+        } : {},
+        hooks: config.page
+      });
+    },
+    async destroy() {
+      await page.close().catch(() => void 0);
+      await server.close().catch(() => void 0);
+      await launchedBrowser.close().catch(() => void 0);
+      fs.rmSync(tempDir, { recursive: true, force: true });
+    }
+  };
+}
+const browser = {
+  createHarness
+};
+export {
+  browser,
+  createBrowserBridgeFixture
+};
+//# sourceMappingURL=browser.js.map