evolit 0.1.0-alpha.8 → 0.1.0

package/README.md

@@ -76,6 +76,98 @@ The current runtime is split into a few small layers:
 - `src/scaffold.js`: creates new site projects from templates
 - `src/cli.js`: framework entrypoint
 
+## Client Navigation
+
+Evolit hydrates a small browser router automatically for SSR page documents. It requests a route
+delta, replaces only the changed route segment, and keeps parent layouts mounted when possible.
+Plain `<a>` elements remain valid SSR HTML; same-origin links are progressively intercepted after
+hydration.
+
+Use `useNavigation()` inside a LitSX browser component for imperative navigation and pending UI:
+
+```jsx
+import { useNavigation } from "evolit/navigation";
+
+export default function CollectionControls() {
+  const navigation = useNavigation();
+
+  function changeSort(event) {
+    const searchParams = new URLSearchParams(window.location.search);
+    searchParams.delete("page");
+    searchParams.delete("skip");
+    searchParams.set("sort", event.target.value);
+    navigation.push(navigation.createHref("/explore/home-garden", searchParams));
+  }
+
+  return <select onChange={changeSort} disabled={navigation.status === "pending"}>…</select>;
+}
+```
+
+The hook returns `{ status, url, pendingUrl, error, push, replace, refresh, createHref }`:
+
+- `push(target, { scroll: false })` adds a browser-history entry. Pass
+  `scroll: false` to keep the current viewport position.
+- `replace(target, { scroll: false })` updates the current entry, useful for
+  visual-only query state. It accepts the same scroll option.
+- `refresh()` bypasses the client delta cache for the current URL.
+- `createHref(pathname, searchParams)` creates a relative internal URL. It accepts standard
+  `URLSearchParams`, preserving repeated keys such as `facet=brand&facet=material`.
+
+`createHref` can also be imported directly from `evolit/navigation`; it is browser-free and safe to
+share with server-evaluated route code. `useNavigation()` itself is browser-only and must only run
+from a connected client component.
+
+Client components can also read the active route state with browser-only hooks:
+
+```jsx
+import { useParams, useSearchParams } from "evolit/navigation";
+
+const { slug = [] } = useParams();
+const searchParams = useSearchParams();
+const selectedFacets = searchParams.getAll("facet");
+```
+
+Both hooks update after client navigation. `useParams()` returns a read-only snapshot; the
+`URLSearchParams` from `useSearchParams()` is a local snapshot, so build a new href and navigate to
+it to update the URL.
+
+### Development refresh
+
+In development, each browser subscribes its active URL over the Evolit WebSocket. After source
+invalidation, the server renders the fresh SSR representation once per request context and pushes
+the resulting delta directly to its subscribers. No follow-up browser request is needed. Server-only
+module and static-asset changes update only the affected route segment while preserving the document,
+scroll position, and persistent layouts.
+Changes to a hydrated client boundary rebuild its browser artifact and update the stable Evolit
+development proxy registered for that tag. Existing instances receive the new implementation
+without redefining the Custom Element or replacing the document. Invalid deltas and failed hot
+updates still fall back to a document reload.
+
+### Progressive links and forms
+
+Links work without JavaScript. With JavaScript, Evolit intercepts ordinary same-origin left-clicks.
+Set `data-evolit-navigation="false"` on a link to keep native navigation.
+
+Internal `<form method="get">` elements are treated the same way: their successful controls become
+`URLSearchParams` and navigate through a delta. Without JavaScript the browser submits the exact
+same GET form normally. Evolit intentionally does not intercept `POST`, file-upload, external,
+targeted, or opted-out forms.
+
+### Navigation cache and document updates
+
+The browser cache is scoped to browser-history entries, not a global URL map. Going back or forward
+can reuse the delta for that exact entry; opening a new branch after going back discards its known
+forward branch. This avoids an unbounded catalog cache in a long-lived tab.
+
+- `dynamic` routes are never cached in the browser.
+- `revalidate` entries remain reusable only until their route TTL expires.
+- `static` entries remain reusable while their history entry exists in the current tab session.
+
+Each delta also synchronizes route `<title>`, route-specific `<head>` markup, managed styles and
+module preloads, `html`/`body` attributes, scroll position, hash targets, and focus. If a response
+cannot be represented as an Evolit delta —for example a 404 from another adapter— navigation falls
+back to a normal document load.
+
 ## Route Cache Policies
 
 Route modules can export a `routeConfig` object with a `cache` policy:
@@ -104,12 +196,18 @@ export const routeConfig = {
 - `static`: prerender in `build` and serve from the response cache in `start`
 - `revalidate`: cache the HTML response for `N` seconds and regenerate on expiry
 
+Pages without `routeConfig.cache` default to `{ revalidate: 60 }`. This caches a normal SSR
+render by pathname and query string while keeping content fresh without requiring a cache
+declaration on every catalog or CMS page. Declare `cache: "static"` for fully static pages or
+`cache: "dynamic"` when a page must always render per request.
+
 The same semantics work in local development and in production runtimes. Only the backing cache
 store changes.
 
-The default cache key includes the pathname and query string. Reading the `request` prop, request
-headers, cookies, or `requestUrl()` makes the completed render dynamic; it is never stored in the
-HTML response cache. `routeConfig.cache` is the sole authority for HTML caching; setting a
+The default cache key includes the pathname and query string, so `params` and `searchParams` are
+cacheable by URL. Reading the `request` prop, request headers, cookies, or `requestUrl()` makes
+the completed render dynamic; it is never stored in the HTML response cache. `routeConfig.cache`
+is the sole authority for HTML caching; setting a
 `Cache-Control` response header does not alter that policy.
 
 ## Request APIs
@@ -141,6 +239,71 @@ headers. `redirect()` and `permanentRedirect()` end rendering with `307` and `30
 `notFound()` renders a `404`. Reading headers, cookies, or the request URL makes the completed
 render dynamic, so it is not stored by the route response cache.
 
+## Extensions
+
+Optional integrations are configured explicitly in `evolit.config.js`. Core only coordinates their
+request and browser-navigation lifecycles: it has no knowledge of tenants, locales, catalogues, or
+message formats. Plugins run in declaration order. Each request hook receives the URL produced by
+the preceding hook; a `rewrite` continues the chain, while a `redirect` or `Response` stops it.
+
+```js
+// evolit.config.js
+import { defineEvolitPlugin } from "evolit/extensions";
+
+export default {
+  plugins: [defineEvolitPlugin({
+    name: "tenant-prefix",
+    onRequest({ pathname, headers, set }) {
+      const tenant = headers().get("x-tenant") ?? "public";
+      set("tenant", tenant);
+      if (pathname === "/shop") return { rewrite: `/tenants/${tenant}/shop` };
+    },
+    client: {
+      module: "@example/evolit-tenant/client",
+      options: { prefix: "/tenants" },
+    },
+  })],
+};
+```
+
+`onRequest` is server-only. It can read the `Request`, headers, cookies and URL, set JSON-serializable
+request values, rewrite internally, or return `{ redirect, status? }` / a Web `Response`. Reading
+request-bound data marks the request dynamic. Server components and handlers read the values without
+prop drilling:
+
+```js
+import { getRequestContext } from "evolit/server";
+
+export default async function TenantPage() {
+  const { tenant } = getRequestContext();
+  return `<main>Tenant: ${tenant}</main>`;
+}
+```
+
+The `client.module` is a bare package specifier and is the only extension code included in the
+browser build. It must export a named `navigation` object (or `default`) with optional hooks:
+
+```js
+// @example/evolit-tenant/client
+export const navigation = {
+  // Synchronous and idempotent: it may run for generated links and intercepted links.
+  transformUrl({ url, options }) {
+    return url.startsWith(options.prefix) ? url : `${options.prefix}${url}`;
+  },
+  async beforeNavigate({ url }) {
+    if (url.endsWith("/blocked")) return false;
+  },
+  afterNavigate({ from, url }) {
+    // Browser-only analytics or state synchronization.
+  },
+};
+```
+
+`transformUrl` runs for `createHref()` and before a SPA navigation; `beforeNavigate` can transform
+or cancel a navigation, and `afterNavigate` runs after its delta is applied. Hooks are sequential
+and later hooks receive the URL returned by earlier hooks. Browser modules must not import server
+code. Request values are isolated with async request context and are discarded when rendering ends.
+
 ## Route Boundaries
 
 `not-found.litsx` and `error.litsx` are resolved from the current route directory up to `app/`.
@@ -231,6 +394,33 @@ export default {
 };
 ```
 
+For monorepos, development watches only the application project by default. Additional source
+trees can be opted into explicitly; generated output and dependency directories below every root
+remain ignored:
+
+```js
+export default {
+  development: {
+    managedSourceRoots: ["../packages/design-system/src"],
+  },
+};
+```
+
+Imports outside these roots remain unmanaged and produce the existing development warning.
+
+Evolit normally discovers browser boundaries from the static module graph and reconciles that
+inventory with the components actually emitted by SSR. A genuinely computed import cannot be
+enumerated at build time, so production applications can declare only those exceptional modules:
+
+```js
+export default {
+  clientBoundaries: ["./src/components/dynamic-card.litsx", "@acme/ui/product-card"],
+};
+```
+
+These modules are materialized as build artifacts, but are not automatically imported or
+preloaded. They reach the browser only when an SSR hydration root references them.
+
 The framework also exports `ObjectStorageResponseCacheStore`, which is intended for object-store
 backends such as S3. A concrete app can wire it to the AWS SDK without pulling AWS dependencies
 into `evolit` itself.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "evolit",
-  "version": "0.1.0-alpha.8",
+  "version": "0.1.0",
   "description": "A convention-driven application framework for LitSX and web components.",
   "type": "module",
   "packageManager": "yarn@4.10.3",
@@ -14,22 +14,34 @@
   "homepage": "https://github.com/litsxdev/nextsx#readme",
   "files": [
     "src",
-    "templates"
+    "templates/default/app/**",
+    "templates/default/jsconfig.json",
+    "templates/default/yarnrc.yml.template"
   ],
   "bin": "./src/cli.js",
   "main": "./src/index.js",
   "exports": {
     ".": "./src/index.js",
+    "./navigation": {
+      "browser": "./src/navigation-client.js",
+      "default": "./src/navigation-server.js"
+    },
     "./server": {
       "browser": "./src/request-context-browser.js",
       "default": "./src/server-api.js"
-    }
+    },
+    "./extensions": {
+      "browser": "./src/extensions-client.js",
+      "default": "./src/extensions.js"
+    },
+    "./internal/development-hot": "./src/development-hot-client.js"
   },
   "scripts": {
     "dev": "node ./src/cli.js dev",
     "build": "node ./src/cli.js build",
     "start": "node ./src/cli.js start",
-    "test": "node --test",
+    "test": "node --test test/*.test.js",
+    "test:browser": "playwright test",
     "typecheck": "litsx-tsc -p jsconfig.json --noEmit",
     "release:check": "yarn test && yarn typecheck && yarn pack --dry-run"
   },
@@ -47,10 +59,11 @@
   },
   "dependencies": {
     "@jridgewell/remapping": "^2.3.5",
-    "@litsx/compiler": "0.9.5-canary-feat-ssr-20260726130435",
-    "@litsx/core": "0.17.0-canary-feat-ssr-20260726130435",
-    "@litsx/ssr": "0.2.0-canary-feat-ssr-20260726130435",
+    "@litsx/compiler": "0.10.0-canary-feat-ssr-20260802205539",
+    "@litsx/core": "0.17.0-canary-feat-ssr-20260802205539",
+    "@litsx/ssr": "0.2.0-canary-feat-ssr-20260802205539",
     "@litsx/typescript": "^0.9.0",
+    "@rollup/plugin-commonjs": "^29.0.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "lit": "^3.3.3",
     "magic-string": "^1.1.0",
@@ -58,7 +71,17 @@
     "typescript": "^6.0.0",
     "ws": "^8.18.3"
   },
+  "peerDependencies": {
+    "@litsx/urql": "^0.3.0"
+  },
+  "peerDependenciesMeta": {
+    "@litsx/urql": {
+      "optional": true
+    }
+  },
   "devDependencies": {
+    "@playwright/test": "^1.62.0",
+    "@webcomponents/scoped-custom-element-registry": "^0.0.10",
     "vite": "^8.1.5"
   }
-}
+}

package/src/build.js

@@ -1,5 +1,6 @@
 import fs from "node:fs/promises";
 import path from "node:path";
+import { fileURLToPath } from "node:url";
 import {
   discoverAppRouteHandlers,
   discoverAppRoutes,
@@ -15,13 +16,22 @@ import {
   emitBundledClientAssets,
   emitHashedClientAssets,
   normalizeHydrationDataForClient,
-  resolveRouteClientImports,
+  resolveServerStyleUrls,
+  resolveHydrationRootClientImports,
   resolveSharedVendorModuleUrl,
   rewriteHydrationDataScript,
   rewriteServerAssetPlaceholders,
 } from "./client-assets.js";
-import { compileModuleGraph, importCompiledModule } from "./compiler.js";
+import {
+  collectClientGraphInventory,
+  compileModuleGraph,
+  emitClientStaticAssets,
+  getClientStaticAssetModule,
+  importCompiledModule,
+  resolveProjectModuleSpecifier,
+} from "./compiler.js";
 import { loadEvolitConfig } from "./config.js";
+import { getExtensionClientDescriptors, resolveEvolitExtensions } from "./extensions.js";
 import {
   BUILD_DIRECTORY,
   DEPLOY_ASSETS_MANIFEST_FILENAME,
@@ -39,6 +49,7 @@ import {
 import { serializeRouteCachePolicy } from "./route-config.js";
 import { createSsrAdapter, renderRouteTreeWithAdapter } from "./ssr-adapter.js";
 import { ensureDirectory, writeJson } from "./fs-utils.js";
+import { appendSsrUrqlData, runWithOptionalSsrUrqlScope } from "./urql-ssr.js";
 
 const CONTENT_TYPE_BY_EXTENSION = new Map([
   [".css", "text/css; charset=utf-8"],
@@ -119,11 +130,46 @@ async function writeDeploymentRuntimeEntry(buildRoot) {
 
 export async function buildProject(projectRoot) {
   const evolitConfig = await loadEvolitConfig(projectRoot);
+  const extensions = resolveEvolitExtensions(evolitConfig);
+  const extensionClientDescriptors = getExtensionClientDescriptors(extensions);
+  const sharedVendorOptions = {
+    additionalEntrySpecifiers: extensionClientDescriptors.map((descriptor) => descriptor.module),
+  };
   const routes = await discoverAppRoutes(projectRoot);
   const routeHandlers = await discoverAppRouteHandlers(projectRoot);
   const buildRoot = path.join(projectRoot, INTERNAL_DIRECTORY, BUILD_DIRECTORY);
   const entryClientModules = new Set();
+  const serverAssetImportsByEntry = {};
+  const clientBoundariesByEntry = {};
   const deployHandlers = [];
+  const compiledClientBoundaries = new Map();
+  const inventoriesBySourceEntry = new Map();
+
+  function getEntryInventory(entryPath) {
+    let inventory = inventoriesBySourceEntry.get(entryPath);
+    if (!inventory) {
+      inventory = collectClientGraphInventory([entryPath], { projectRoot });
+      inventoriesBySourceEntry.set(entryPath, inventory);
+    }
+    return inventory;
+  }
+
+  async function compileProductionClientBoundary(sourcePath) {
+    let clientModule = compiledClientBoundaries.get(sourcePath);
+    if (clientModule) return clientModule;
+    const clientBuild = await compileModuleGraph(sourcePath, {
+      projectRoot,
+      mode: "production",
+      sourceMaps: true,
+      target: "client",
+    });
+    clientModule = path.relative(clientBuild.outputRoot, clientBuild.entrypoint)
+      .split(path.sep)
+      .join("/");
+    compiledClientBoundaries.set(sourcePath, clientModule);
+    entryClientModules.add(clientModule);
+    return clientModule;
+  }
 
   await ensureDirectory(buildRoot);
 
@@ -166,16 +212,6 @@ export async function buildProject(projectRoot) {
       target: "server",
     });
 
-    const pageClientBuild = await compileModuleGraph(route.page, {
-      projectRoot,
-      mode: "production",
-      sourceMaps: true,
-      target: "client",
-    });
-    entryClientModules.add(
-      path.relative(pageClientBuild.outputRoot, pageClientBuild.entrypoint).split(path.sep).join("/"),
-    );
-
     for (const layoutPath of route.layouts) {
       await compileModuleGraph(layoutPath, {
         projectRoot,
@@ -185,15 +221,6 @@ export async function buildProject(projectRoot) {
         target: "server",
       });
 
-      const layoutClientBuild = await compileModuleGraph(layoutPath, {
-        projectRoot,
-        mode: "production",
-        sourceMaps: true,
-        target: "client",
-      });
-      entryClientModules.add(
-        path.relative(layoutClientBuild.outputRoot, layoutClientBuild.entrypoint).split(path.sep).join("/"),
-      );
     }
 
     const boundaryModules = [
@@ -208,23 +235,70 @@ export async function buildProject(projectRoot) {
         ssr: true,
         target: "server",
       });
+    }
 
-      const boundaryClientBuild = await compileModuleGraph(boundaryPath, {
+    const toProjectRelative = (filePath) => path.relative(projectRoot, filePath).split(path.sep).join("/");
+    const segmentEntries = [...new Set([route.page, ...route.layouts, ...boundaryModules])];
+    const inventoriesByEntry = new Map(await Promise.all(segmentEntries.map(async (entryPath) => [
+      entryPath,
+      await getEntryInventory(entryPath),
+    ])));
+    const allStyles = new Set();
+    const allAssets = new Set();
+    const allClientBoundaries = new Set();
+    for (const [entryPath, entryInventory] of inventoriesByEntry) {
+      serverAssetImportsByEntry[toProjectRelative(entryPath)] = {
+        styles: entryInventory.styles.map((filePath) => getClientStaticAssetModule(projectRoot, filePath)),
+        assets: entryInventory.assets.map((filePath) => getClientStaticAssetModule(projectRoot, filePath)),
+      };
+      entryInventory.styles.forEach((filePath) => allStyles.add(filePath));
+      entryInventory.assets.forEach((filePath) => allAssets.add(filePath));
+      entryInventory.clientBoundaries.forEach((filePath) => allClientBoundaries.add(filePath));
+    }
+    await emitClientStaticAssets([...allStyles, ...allAssets], {
+      projectRoot,
+      mode: "production",
+    });
+    const compiledBoundaryModules = new Map();
+    for (const clientBoundary of allClientBoundaries) {
+      compiledBoundaryModules.set(
+        clientBoundary,
+        await compileProductionClientBoundary(clientBoundary),
+      );
+    }
+    for (const [entryPath, entryInventory] of inventoriesByEntry) {
+      clientBoundariesByEntry[toProjectRelative(entryPath)] = entryInventory.clientBoundaries
+        .map((clientBoundary) => compiledBoundaryModules.get(clientBoundary))
+        .filter(Boolean)
+        .sort();
+    }
+  }
+
+  const configuredClientBoundaries = evolitConfig.clientBoundaries ?? [];
+  if (!Array.isArray(configuredClientBoundaries)) {
+    throw new Error("Expected clientBoundaries in evolit.config.js to be an array of module specifiers.");
+  }
+  for (const specifier of configuredClientBoundaries) {
+    if (typeof specifier !== "string" || specifier.length === 0) {
+      throw new Error("Expected every clientBoundaries entry to be a non-empty module specifier.");
+    }
+    const sourcePath = path.isAbsolute(specifier)
+      ? specifier
+      : await resolveProjectModuleSpecifier(
         projectRoot,
-        mode: "production",
-        sourceMaps: true,
-        target: "client",
-      });
-      entryClientModules.add(
-        path.relative(boundaryClientBuild.outputRoot, boundaryClientBuild.entrypoint)
-          .split(path.sep)
-          .join("/"),
+        path.join(projectRoot, "evolit.config.js"),
+        specifier,
       );
+    if (!sourcePath) {
+      throw new Error(`Unable to resolve configured client boundary ${JSON.stringify(specifier)}.`);
     }
+    await compileProductionClientBoundary(sourcePath);
   }
 
   const clientAssets = await emitBundledClientAssets(projectRoot, {
     entryClientModules,
+    serverAssetImportsByEntry,
+    clientBoundariesByEntry,
   });
   const staticAssetPublicUrls = createStaticAssetPublicUrlMap(clientAssets);
   await rewriteServerAssetPlaceholders(projectRoot, clientAssets);
@@ -239,33 +313,114 @@ export async function buildProject(projectRoot) {
     projectRoot,
     "production",
     "@litsx/ssr/hydration",
+    sharedVendorOptions,
   );
+  const navigationModuleUrl = await resolveSharedVendorModuleUrl(
+    projectRoot,
+    "production",
+    "evolit/navigation",
+    sharedVendorOptions,
+  );
+  const navigationExtensions = await Promise.all(extensionClientDescriptors.map(async (descriptor) => ({
+    ...descriptor,
+    module: await resolveSharedVendorModuleUrl(
+      projectRoot,
+      "production",
+      descriptor.module,
+      sharedVendorOptions,
+    ),
+  })));
   const ssrAdapter = createSsrAdapter({
     assetResolver,
+    async onSsrResult({ routeResult, result }) {
+      const renderedModules = [...new Set([
+        ...(Array.isArray(result.clientImports) ? result.clientImports : []),
+        ...(Array.isArray(result.hydrationData?.roots)
+          ? result.hydrationData.roots.map((root) => root?.moduleId)
+          : []),
+      ].filter((moduleId) => typeof moduleId === "string" && moduleId.length > 0))];
+      const unresolved = [];
+      for (const moduleId of renderedModules) {
+        if (assetResolver(moduleId) || clientAssets.byPublicPath?.[moduleId]) continue;
+        const importerPath = routeResult.boundaryModule
+          ?? routeResult.route?.page
+          ?? path.join(projectRoot, "app", "page.litsx");
+        let sourcePath = null;
+        if (moduleId.startsWith("file:")) {
+          try { sourcePath = fileURLToPath(moduleId); } catch {}
+        } else if (path.isAbsolute(moduleId) && !moduleId.startsWith("/app/") && !moduleId.startsWith("/src/")) {
+          sourcePath = moduleId;
+        } else if (moduleId.startsWith("/")) {
+          sourcePath = await resolveProjectModuleSpecifier(projectRoot, importerPath, `.${moduleId}`);
+        } else {
+          sourcePath = await resolveProjectModuleSpecifier(projectRoot, importerPath, moduleId);
+        }
+        const publicUrl = sourcePath ? assetResolver(sourcePath) : null;
+        if (!publicUrl) {
+          unresolved.push(moduleId);
+          continue;
+        }
+        for (const root of result.hydrationData?.roots ?? []) {
+          if (root?.moduleId === moduleId) root.moduleId = sourcePath;
+        }
+        if (Array.isArray(result.clientImports)) {
+          result.clientImports = result.clientImports.map((value) => value === moduleId ? publicUrl : value);
+        }
+        if (Array.isArray(result.hydrationData?.clientImports)) {
+          result.hydrationData.clientImports = result.hydrationData.clientImports
+            .map((value) => value === moduleId ? publicUrl : value);
+        }
+      }
+      if (unresolved.length > 0) {
+        throw new Error(
+          `SSR rendered client boundaries without build artifacts for ${routeResult.route?.pathname ?? "route"}: `
+          + `${unresolved.join(", ")}.`,
+        );
+      }
+    },
     async resolveAdditionalHead({ routeResult, result }) {
-      const clientImports = [
+      const clientImports = [...new Set([
         ...(Array.isArray(result.clientImports) ? result.clientImports : []),
-        ...resolveRouteClientImports(routeResult, projectRoot, clientAssets),
-      ];
-      const urls = collectTransitiveAssetPreloads(clientImports, clientAssets);
-      const styleUrls = collectTransitiveStyleUrls(clientImports, clientAssets);
+        ...resolveHydrationRootClientImports(result.hydrationData, assetResolver),
+      ])];
+      const hydratedClientImports = clientImports;
+      const urls = hydratedClientImports.length > 0
+        ? [...new Set([
+          ...hydratedClientImports,
+          ...collectTransitiveAssetPreloads(hydratedClientImports, clientAssets),
+        ])]
+        : [];
+      const styleUrls = [...new Set([
+        ...collectTransitiveStyleUrls(clientImports, clientAssets),
+        ...resolveServerStyleUrls(routeResult, projectRoot, clientAssets),
+      ])];
 
       return [
-        ...urls.map((href) => `<link rel="modulepreload" href="${href}">`),
-        ...styleUrls.map((href) => `<link rel="stylesheet" href="${href}">`),
+        ...urls.map((href) => `<link rel="modulepreload" href="${href}" data-evolit-route-asset="preload">`),
+        ...styleUrls.map((href) => `<link rel="stylesheet" href="${href}" data-evolit-route-asset="style">`),
       ].join("\n");
     },
-    resolveBootstrap({ result }) {
+    resolveBootstrap({ routeResult, result }) {
       return createHydrationBootstrap({
-        hydrationData: normalizeHydrationDataForClient(result.hydrationData, projectRoot),
+        hydrationData: normalizeHydrationDataForClient(
+          result.hydrationData,
+          projectRoot,
+          resolveHydrationRootClientImports(result.hydrationData, assetResolver),
+        ),
         assetResolver,
         hydrationModuleUrl,
+        navigationModuleUrl,
+        navigationExtensions,
       });
     },
-    transformDocument({ result, document }) {
+    transformDocument({ routeResult, result, document }) {
       return rewriteHydrationDataScript(
         document,
-        normalizeHydrationDataForClient(result.hydrationData, projectRoot),
+        normalizeHydrationDataForClient(
+          result.hydrationData,
+          projectRoot,
+          resolveHydrationRootClientImports(result.hydrationData, assetResolver),
+        ),
       );
     },
   });
@@ -313,12 +468,23 @@ export async function buildProject(projectRoot) {
       seenPrerenderTargets.add(targetPathname);
 
       const targetRequest = new Request(`http://evolit.local${targetPathname}`);
-      const routeResult = await routeResolver.resolveRequest(targetRequest);
-      if (routeResult.type !== "route" || routeResult.cachePolicy.mode === "dynamic") {
+      const { routeResult, response } = await runWithOptionalSsrUrqlScope(async (urqlAdapter) => {
+        const resolvedRouteResult = await routeResolver.resolveRequest(targetRequest);
+        if (resolvedRouteResult.type !== "route" || resolvedRouteResult.cachePolicy.mode === "dynamic") {
+          return { routeResult: resolvedRouteResult, response: null };
+        }
+
+        const renderedResponse = await renderRouteTreeWithAdapter(resolvedRouteResult, ssrAdapter);
+        return {
+          routeResult: resolvedRouteResult,
+          response: urqlAdapter
+            ? appendSsrUrqlData(renderedResponse, await urqlAdapter.getUrqlSsrData())
+            : renderedResponse,
+        };
+      });
+      if (!response) {
         continue;
       }
-
-      const response = await renderRouteTreeWithAdapter(routeResult, ssrAdapter);
       if (response.status !== 200) {
         continue;
       }