evolit 0.1.0-alpha.2 → 0.1.0-alpha.21

package/src/client-assets.js

@@ -3,6 +3,7 @@ import { existsSync, realpathSync } from "node:fs";
 import crypto from "node:crypto";
 import path from "node:path";
 import { createRequire } from "node:module";
+import { fileURLToPath } from "node:url";
 import MagicString from "magic-string";
 import { rollup } from "rollup";
 import { nodeResolve } from "@rollup/plugin-node-resolve";
@@ -24,10 +25,12 @@ const MODULE_SPECIFIER_PATTERN =
   /\b(?:import|export)\s*[^"']*?from\s*["']([^"']+)["']|\bimport\s*["']([^"']+)["']|\bimport\s*\(\s*["']([^"']+)["']\s*\)/g;
 
 const requireFromHere = createRequire(import.meta.url);
+const EVOLIT_NAVIGATION_BROWSER_ENTRY = fileURLToPath(new URL("./navigation-client.js", import.meta.url));
 const SHARED_VENDOR_SPECIFIERS = [
   "@litsx/core",
   "@litsx/core/elements",
   "@litsx/ssr/hydration",
+  "evolit/navigation",
   "lit",
 ];
 const browserSpecifierFilePathCache = new Map();
@@ -36,6 +39,23 @@ const sharedRuntimeBuildCache = new Map();
 const clientVendorSpecifierCache = new Map();
 const clientModuleMetadataCache = new Map();
 
+export function resetDevelopmentAssetCaches(projectRoot) {
+  const normalizedProjectRoot = path.resolve(projectRoot);
+  const developmentPrefix = `${normalizedProjectRoot}::development::`;
+
+  for (const cache of [
+    sharedRuntimeBuildCache,
+    clientVendorSpecifierCache,
+    clientModuleMetadataCache,
+  ]) {
+    for (const key of cache.keys()) {
+      if (key.startsWith(developmentPrefix)) {
+        cache.delete(key);
+      }
+    }
+  }
+}
+
 function isBareSpecifier(specifier) {
   return (
     typeof specifier === "string" &&
@@ -57,6 +77,31 @@ function isRelativeSpecifier(specifier) {
   );
 }
 
+function stripImportSearchAndHash(specifier) {
+  return String(specifier).split("?")[0].split("#")[0];
+}
+
+function resolveRelativeClientImportPath(fromClientModule, specifier) {
+  const normalizedSpecifier = stripImportSearchAndHash(specifier);
+  return path
+    .normalize(path.join(path.dirname(fromClientModule), normalizedSpecifier))
+    .split(path.sep)
+    .join("/");
+}
+
+function normalizeClientMetadataAssetPath(fromClientModule, importedAsset) {
+  if (typeof importedAsset !== "string") {
+    return null;
+  }
+
+  const normalizedAsset = stripImportSearchAndHash(importedAsset);
+  if (isRelativeSpecifier(normalizedAsset)) {
+    return resolveRelativeClientImportPath(fromClientModule, normalizedAsset);
+  }
+
+  return path.normalize(normalizedAsset).split(path.sep).join("/");
+}
+
 function parsePackageSpecifier(specifier) {
   if (!isBareSpecifier(specifier)) {
     return null;
@@ -217,9 +262,12 @@ function createSharedEntrySource(specifier) {
   ].join("\n");
 }
 
-export async function collectSharedVendorSpecifiers(additionalEntrySpecifiers = []) {
+export async function collectSharedVendorSpecifiers(
+  additionalEntrySpecifiers = [],
+  options = {},
+) {
   return [...new Set([
-    ...SHARED_VENDOR_SPECIFIERS,
+    ...(options.includeBase === false ? [] : SHARED_VENDOR_SPECIFIERS),
     ...additionalEntrySpecifiers.filter((specifier) => isBareSpecifier(specifier)),
   ])].sort();
 }
@@ -414,20 +462,52 @@ export async function buildSharedVendorRuntime(
       ? options.additionalEntrySpecifiers.filter((specifier) => isBareSpecifier(specifier))
       : [],
   )].sort();
-  const cacheKey = `${projectRoot}::${mode}::${additionalEntrySpecifiers.join("|")}`;
+  if (mode === "development" && !options.vendorGroup) {
+    const baseRuntime = await buildSharedVendorRuntime(projectRoot, mode, {
+      ...options,
+      additionalEntrySpecifiers: [],
+      vendorGroup: "base",
+      includeBase: true,
+    });
+    const additionalRuntimes = await Promise.all(
+      additionalEntrySpecifiers
+        .filter((specifier) => !SHARED_VENDOR_SPECIFIERS.includes(specifier))
+        .map((specifier) => buildSharedVendorRuntime(projectRoot, mode, {
+          ...options,
+          additionalEntrySpecifiers: [specifier],
+          vendorGroup: `vendor-${crypto.createHash("sha1").update(specifier).digest("hex").slice(0, 10)}`,
+          includeBase: false,
+        })),
+    );
+    return {
+      imports: Object.assign(
+        {},
+        baseRuntime.imports,
+        ...additionalRuntimes.map((runtime) => runtime.imports),
+      ),
+      outputRoot: getSharedOutputRoot(projectRoot, mode),
+    };
+  }
+
+  const vendorGroup = options.vendorGroup ?? null;
+  const cacheKey = `${projectRoot}::${mode}::${vendorGroup ?? "all"}::${additionalEntrySpecifiers.join("|")}`;
   if (sharedRuntimeBuildCache.has(cacheKey)) {
     return sharedRuntimeBuildCache.get(cacheKey);
   }
 
   const pendingBuild = (async () => {
-    const sharedRoot = getSharedOutputRoot(projectRoot, mode);
+    const sharedRootBase = getSharedOutputRoot(projectRoot, mode);
+    const sharedRoot = vendorGroup ? path.join(sharedRootBase, vendorGroup) : sharedRootBase;
     const entriesRoot = path.join(
       projectRoot,
       INTERNAL_DIRECTORY,
       mode === "development" ? DEV_DIRECTORY : BUILD_DIRECTORY,
       "__shared_entries__",
+      ...(vendorGroup ? [vendorGroup] : []),
     );
-    const specifiers = await collectSharedVendorSpecifiers(additionalEntrySpecifiers);
+    const specifiers = await collectSharedVendorSpecifiers(additionalEntrySpecifiers, {
+      includeBase: options.includeBase !== false,
+    });
     const inputEntries = await writeSharedRuntimeEntrySources(entriesRoot, specifiers);
 
     await fs.rm(sharedRoot, { recursive: true, force: true });
@@ -439,6 +519,15 @@ export async function buildSharedVendorRuntime(
     const bundle = await rollup({
       input: inputEntries,
       plugins: [
+        {
+          name: "evolit-browser-exports",
+          resolveId(source) {
+            // A consuming application does not normally have an `evolit`
+            // package nested in its node_modules. Resolve Evolit's own
+            // browser-only public entry before node-resolve marks it external.
+            return source === "evolit/navigation" ? EVOLIT_NAVIGATION_BROWSER_ENTRY : null;
+          },
+        },
         nodeResolve({
           browser: true,
           exportConditions: ["browser", "import", "default"],
@@ -482,7 +571,7 @@ export async function buildSharedVendorRuntime(
           continue;
         }
 
-        imports[specifier] = `/_evolit/shared/${chunk.fileName}`;
+        imports[specifier] = `/_evolit/shared/${vendorGroup ? `${vendorGroup}/` : ""}${chunk.fileName}`;
       }
 
       return {
@@ -561,7 +650,10 @@ async function resolveRelativeImportFilePath(fromFilePath, specifier) {
     return null;
   }
 
-  const candidatePath = path.resolve(path.dirname(fromFilePath), specifier);
+  const candidatePath = path.resolve(
+    path.dirname(stripImportSearchAndHash(fromFilePath)),
+    stripImportSearchAndHash(specifier),
+  );
   const candidatePaths = [
     candidatePath,
     `${candidatePath}.js`,
@@ -688,10 +780,16 @@ async function collectTransitiveClientModuleMetadata(projectRoot, mode, clientMo
     }
 
     for (const styleImport of metadata.styleImports) {
-      styleImports.add(styleImport);
+      const normalizedStyleImport = normalizeClientMetadataAssetPath(currentModule, styleImport);
+      if (normalizedStyleImport) {
+        styleImports.add(normalizedStyleImport);
+      }
     }
     for (const assetImport of metadata.assetImports) {
-      assetImports.add(assetImport);
+      const normalizedAssetImport = normalizeClientMetadataAssetPath(currentModule, assetImport);
+      if (normalizedAssetImport) {
+        assetImports.add(normalizedAssetImport);
+      }
     }
     for (const importedModule of metadata.moduleImports) {
       pendingModules.push(importedModule);
@@ -837,10 +935,25 @@ export function getClientOutputRoot(projectRoot, mode) {
 }
 
 export function toClientModuleRelativePath(projectRoot, sourcePath) {
-  const relativePath = path.relative(projectRoot, sourcePath);
+  const relativePath = toClientSourceRelativePath(projectRoot, sourcePath);
   return toCompiledClientModuleRelativePath(relativePath);
 }
 
+function toClientSourceRelativePath(projectRoot, sourcePath) {
+  const relativePath = path.relative(projectRoot, sourcePath);
+  const isOutsideProject = relativePath === ".."
+    || relativePath.startsWith(`..${path.sep}`)
+    || path.isAbsolute(relativePath);
+  if (!isOutsideProject) {
+    return relativePath;
+  }
+
+  return path.join(
+    "__unmanaged__",
+    ...relativePath.split(path.sep).map((segment) => segment === ".." ? "__up__" : segment),
+  );
+}
+
 function toCompiledClientModuleRelativePath(relativePath) {
   const extension = path.extname(relativePath);
   return extension
@@ -848,17 +961,66 @@ function toCompiledClientModuleRelativePath(relativePath) {
     : `${relativePath}.mjs`;
 }
 
+function toCatchAllClientModuleRelativePath(clientModule) {
+  return clientModule
+    .split(/[\\/]/)
+    .map((segment) => {
+      if (segment.startsWith("[[...") && segment.endsWith("]]")) {
+        return `**...${segment.slice(5, -2)}**`;
+      }
+
+      if (segment.startsWith("[...") && segment.endsWith("]")) {
+        return `*...${segment.slice(4, -1)}*`;
+      }
+
+      return segment;
+    })
+    .join("/");
+}
+
+function toRollupSafeClientModuleRelativePath(clientModule) {
+  return clientModule.replaceAll(/[\[\]]/g, "_");
+}
+
+function getClientModuleCandidates(clientModule) {
+  const normalizedClientModule = clientModule.split(path.sep).join("/");
+  return [...new Set([
+    normalizedClientModule,
+    toCatchAllClientModuleRelativePath(normalizedClientModule),
+    toRollupSafeClientModuleRelativePath(normalizedClientModule),
+  ])];
+}
+
+function getClientModulePublicUrl(assetManifest, clientModule) {
+  for (const candidate of getClientModuleCandidates(clientModule)) {
+    const publicUrl = assetManifest.byClientModule[candidate];
+    if (typeof publicUrl === "string" && publicUrl.length > 0) {
+      return publicUrl;
+    }
+  }
+
+  const candidates = new Set(getClientModuleCandidates(clientModule));
+  const asset = assetManifest.assets.find((entry) =>
+    candidates.has(entry?.clientModule) && typeof entry?.publicUrl === "string",
+  );
+  if (asset) {
+    return asset.publicUrl;
+  }
+
+  return null;
+}
+
+function isVirtualClientModuleId(moduleId) {
+  return moduleId.startsWith("/app/") || moduleId.startsWith("/__unmanaged__/");
+}
+
 function toPublicHydrationModuleId(projectRoot, moduleId) {
   if (typeof moduleId !== "string" || moduleId.length === 0) {
     return null;
   }
 
   if (path.isAbsolute(moduleId)) {
-    if (!moduleId.startsWith(projectRoot)) {
-      return null;
-    }
-
-    const relativePath = path.relative(projectRoot, moduleId).split(path.sep).join("/");
+    const relativePath = toClientSourceRelativePath(projectRoot, moduleId).split(path.sep).join("/");
     return `/${relativePath}`;
   }
 
@@ -900,14 +1062,10 @@ export function createAssetResolver(projectRoot, options = {}) {
     }
 
     let relativeClientModule = null;
-    if (moduleId.startsWith("/") && !moduleId.startsWith(projectRoot)) {
-      relativeClientModule = toCompiledClientModuleRelativePath(moduleId.slice(1));
-    } else if (path.isAbsolute(moduleId)) {
-      if (!moduleId.startsWith(projectRoot)) {
-        return null;
-      }
-
+    if (path.isAbsolute(moduleId) && !isVirtualClientModuleId(moduleId)) {
       relativeClientModule = toClientModuleRelativePath(projectRoot, moduleId);
+    } else if (moduleId.startsWith("/")) {
+      relativeClientModule = toCompiledClientModuleRelativePath(moduleId.slice(1));
     }
 
     if (!relativeClientModule) {
@@ -915,10 +1073,7 @@ export function createAssetResolver(projectRoot, options = {}) {
     }
 
     if (assetManifest) {
-      return getAssetByClientModule(
-        assetManifest,
-        relativeClientModule,
-      )?.publicUrl ?? null;
+      return getClientModulePublicUrl(assetManifest, relativeClientModule);
     }
 
     return null;
@@ -941,10 +1096,11 @@ export function createHydrationBootstrap({
   hydrationData,
   assetResolver,
   hydrationModuleUrl = "@litsx/ssr/hydration",
+  navigationModuleUrl = null,
 }) {
   const normalizedHydrationData = normalizeHydrationDataForClient(hydrationData);
-  const moduleUrls = [...new Set(
-    (normalizedHydrationData?.roots ?? [])
+  const rootModuleUrls = [...new Set([
+    ...(normalizedHydrationData?.roots ?? [])
       .map((root) => {
         if (typeof root?.moduleId !== "string" || root.moduleId.length === 0) {
           return null;
@@ -953,31 +1109,42 @@ export function createHydrationBootstrap({
         return assetResolver?.(root.moduleId) ?? null;
       })
       .filter((moduleUrl) => typeof moduleUrl === "string" && moduleUrl.length > 0),
+  ])];
+  const clientImports = [...new Set(
+    (Array.isArray(normalizedHydrationData?.clientImports)
+      ? normalizedHydrationData.clientImports
+      : []).filter((moduleUrl) => typeof moduleUrl === "string" && moduleUrl.length > 0),
   )];
 
-  if (moduleUrls.length === 0) {
+  if (rootModuleUrls.length === 0 && clientImports.length === 0) {
     return "";
   }
 
-  const moduleLoaders = moduleUrls
+  const moduleLoaders = rootModuleUrls
     .map((moduleUrl) => `  () => import(${JSON.stringify(moduleUrl)})`)
     .join(",\n");
 
   const source = `
 import { hydratePage, registerHydrationModules } from ${JSON.stringify(hydrationModuleUrl)};
+${navigationModuleUrl ? `import { getNavigation } from ${JSON.stringify(navigationModuleUrl)};` : ""}
 
 await hydratePage({
-  clientImports: [],
+  clientImports: ${JSON.stringify(clientImports)},
   register: () => registerHydrationModules([
 ${moduleLoaders}
   ])
 });
+${navigationModuleUrl ? "getNavigation();" : ""}
 `;
 
   return escapeInlineScriptText(source);
 }
 
-export function normalizeHydrationDataForClient(hydrationData, projectRoot = null) {
+export function normalizeHydrationDataForClient(
+  hydrationData,
+  projectRoot = null,
+  additionalClientImports = [],
+) {
   if (!hydrationData || typeof hydrationData !== "object") {
     return hydrationData ?? null;
   }
@@ -1010,7 +1177,10 @@ export function normalizeHydrationDataForClient(hydrationData, projectRoot = nul
     roots,
   };
   const payload = hydrationData.payload;
-  const clientImports = hydrationData.clientImports;
+  const clientImports = [...new Set([
+    ...(Array.isArray(hydrationData.clientImports) ? hydrationData.clientImports : []),
+    ...(Array.isArray(additionalClientImports) ? additionalClientImports : []),
+  ].filter((value) => typeof value === "string" && value.length > 0))];
 
   Object.defineProperties(normalizedHydrationData, {
     payload: {
@@ -1119,7 +1289,32 @@ function rewriteStaticAssetPlaceholdersWithMap(source, publicPathByRelativePath)
 }
 
 function rewriteRelativeCssAssetUrls(source, fileRelativePath, publicPathByRelativePath) {
-  return source.replaceAll(
+  const rewrittenImports = source.replaceAll(
+    /@import(\s+)(url\(\s*)?(?:(["'])([^"']+)\3|([^\s;)]+))(\s*\))?/g,
+    (match, whitespace, urlPrefix = "", quote = "", quotedSpecifier, unquotedSpecifier, closing = "") => {
+      const specifier = quotedSpecifier ?? unquotedSpecifier;
+      if (!isRelativeSpecifier(specifier)) {
+        return match;
+      }
+
+      const resolvedRelativePath = resolveRelativeClientImportPath(fileRelativePath, specifier);
+      const rewrittenTarget = publicPathByRelativePath.get(resolvedRelativePath);
+      if (!rewrittenTarget) {
+        return match;
+      }
+
+      const cleanSpecifier = stripImportSearchAndHash(specifier);
+      const rewrittenSpecifier = `${normalizeRelativeImportPath(
+        path.relative(
+          path.dirname(publicPathByRelativePath.get(fileRelativePath)),
+          rewrittenTarget,
+        ),
+      )}${specifier.slice(cleanSpecifier.length)}`;
+      return `@import${whitespace}${urlPrefix}${quote}${rewrittenSpecifier}${quote}${closing}`;
+    },
+  );
+
+  return rewrittenImports.replaceAll(
     /url\(\s*(['"]?)([^"'()]+)\1\s*\)/g,
     (match, quote = "", rawSpecifier) => {
       const specifier = String(rawSpecifier).trim();
@@ -1191,9 +1386,7 @@ function collectRelativeClientImportPaths(source, fileRelativePath, publicPathBy
       continue;
     }
 
-    const resolvedRelativePath = path.normalize(
-      path.join(path.dirname(fileRelativePath), specifier),
-    );
+    const resolvedRelativePath = resolveRelativeClientImportPath(fileRelativePath, specifier);
     if (!publicPathByRelativePath.has(resolvedRelativePath)) {
       continue;
     }
@@ -1217,9 +1410,7 @@ function rewriteRelativeClientImports(source, fileRelativePath, publicPathByRela
       continue;
     }
 
-    const resolvedRelativePath = path.normalize(
-      path.join(path.dirname(fileRelativePath), specifier),
-    );
+    const resolvedRelativePath = resolveRelativeClientImportPath(fileRelativePath, specifier);
     const rewrittenTarget = publicPathByRelativePath.get(resolvedRelativePath);
     if (!rewrittenTarget) {
       continue;
@@ -1324,8 +1515,12 @@ export async function emitHashedClientAssets(projectRoot, options = {}) {
     if (entry.type === "script") {
       try {
         const metadata = JSON.parse(await fs.readFile(`${entry.filePath}.meta.json`, "utf8"));
-        styleImports = Array.isArray(metadata?.styleImports) ? metadata.styleImports : [];
-        assetImports = Array.isArray(metadata?.assetImports) ? metadata.assetImports : [];
+        styleImports = (Array.isArray(metadata?.styleImports) ? metadata.styleImports : [])
+          .map((importedStyle) => normalizeClientMetadataAssetPath(entry.relativePath, importedStyle))
+          .filter((importedStyle) => typeof importedStyle === "string");
+        assetImports = (Array.isArray(metadata?.assetImports) ? metadata.assetImports : [])
+          .map((importedAsset) => normalizeClientMetadataAssetPath(entry.relativePath, importedAsset))
+          .filter((importedAsset) => typeof importedAsset === "string");
       } catch {
         styleImports = [];
         assetImports = [];
@@ -1449,7 +1644,9 @@ async function bundleClientAssets(projectRoot, options = {}) {
     publicPathByRelativePath.set(entry.relativePath, hashedRelativePath);
   }
 
-  await fs.rm(staticRoot, { recursive: true, force: true });
+  if (mode !== "development") {
+    await fs.rm(staticRoot, { recursive: true, force: true });
+  }
   await ensureDirectory(staticRoot);
 
   const nonScriptAssets = [];
@@ -1528,17 +1725,36 @@ async function bundleClientAssets(projectRoot, options = {}) {
         return isBareSpecifier(id);
       },
       plugins: [
+        {
+          name: "evolit-client-relative-imports",
+          resolveId(source, importer) {
+            if (!importer || !isRelativeSpecifier(source)) {
+              return null;
+            }
+
+            const cleanSource = stripImportSearchAndHash(source);
+            if (cleanSource === source) {
+              return null;
+            }
+
+            return path.resolve(
+              path.dirname(stripImportSearchAndHash(importer)),
+              cleanSource,
+            );
+          },
+        },
         {
           name: "evolit-client-input-sourcemaps",
           async load(id) {
-            if (!id.startsWith(clientRoot) || !id.endsWith(".mjs")) {
+            const filePath = stripImportSearchAndHash(id);
+            if (!filePath.startsWith(clientRoot) || !filePath.endsWith(".mjs")) {
               return null;
             }
 
             try {
               const [code, map] = await Promise.all([
-                fs.readFile(id, "utf8"),
-                fs.readFile(`${id}.map`, "utf8"),
+                fs.readFile(filePath, "utf8"),
+                fs.readFile(`${filePath}.map`, "utf8"),
               ]);
               return { code, map: JSON.parse(map) };
             } catch {
@@ -1596,9 +1812,14 @@ async function bundleClientAssets(projectRoot, options = {}) {
 
         const outputPath = path.join(staticRoot, chunk.fileName);
         const publicUrl = toStaticPublicUrl(chunk.fileName);
-        const isNamedEntry = chunk.isEntry && clientModuleByEntryName.has(chunk.name);
+        const entryClientModule = clientModuleByEntryName.get(chunk.name)
+          ?? [...clientModuleByEntryName.entries()].find(([entryName]) =>
+            toRollupSafeClientModuleRelativePath(entryName) === chunk.name,
+          )?.[1]
+          ?? null;
+        const isNamedEntry = chunk.isEntry && entryClientModule != null;
         const clientModule = isNamedEntry
-          ? clientModuleByEntryName.get(chunk.name)
+          ? entryClientModule
           : chunk.fileName;
         const transitiveMetadata = isNamedEntry
           ? await collectTransitiveClientModuleMetadata(projectRoot, mode, clientModule)
@@ -1640,30 +1861,43 @@ async function bundleClientAssets(projectRoot, options = {}) {
   }
 
   const mapAssets = [];
-  const staticFiles = await walkFiles(staticRoot);
-  for (const filePath of staticFiles) {
-    if (!filePath.endsWith(".map")) {
-      continue;
+  for (const asset of scriptAssetRecords) {
+    const mapPath = `${asset.outputPath}.map`;
+    try {
+      const stat = await fs.stat(mapPath);
+      const relativePath = path.relative(staticRoot, mapPath).split(path.sep).join("/");
+      const publicUrl = toStaticPublicUrl(relativePath);
+      byPublicPath[publicUrl] = mapPath;
+      mapAssets.push({
+        clientModule: relativePath,
+        type: "asset",
+        kind: "asset",
+        publicUrl,
+        outputPath: mapPath,
+        hash: null,
+        size: stat.size,
+        imports: [],
+        importUrls: [],
+        styleImports: [],
+        styleUrls: [],
+        assetImports: [],
+        assetUrls: [],
+      });
+    } catch {
+      // Source maps are optional in non-development builds.
     }
+  }
 
-    const relativePath = path.relative(staticRoot, filePath).split(path.sep).join("/");
-    const publicUrl = toStaticPublicUrl(relativePath);
-    byPublicPath[publicUrl] = filePath;
-    mapAssets.push({
-      clientModule: relativePath,
-      type: "asset",
-      kind: "asset",
-      publicUrl,
-      outputPath: filePath,
-      hash: null,
-      size: (await fs.stat(filePath)).size,
-      imports: [],
-      importUrls: [],
-      styleImports: [],
-      styleUrls: [],
-      assetImports: [],
-      assetUrls: [],
-    });
+  if (mode === "development") {
+    const retainedOutputPaths = new Set(
+      [...scriptAssetRecords, ...nonScriptAssets, ...mapAssets]
+        .map((asset) => asset.outputPath),
+    );
+    for (const filePath of await walkFiles(staticRoot)) {
+      if (!retainedOutputPaths.has(filePath)) {
+        await fs.rm(filePath, { force: true });
+      }
+    }
   }
 
   const assets = [...scriptAssetRecords, ...nonScriptAssets, ...mapAssets]
@@ -1776,6 +2010,28 @@ export function collectTransitiveAssetPreloads(publicUrls, assetManifest) {
   return discovered;
 }
 
+export function resolveRouteClientImports(routeResult, projectRoot, assetManifest) {
+  const normalizedManifest = normalizeClientAssetManifest(assetManifest);
+  if (!normalizedManifest) {
+    return [];
+  }
+
+  const routeModules = [
+    routeResult?.route?.page,
+    ...(routeResult?.route?.layouts ?? []),
+    routeResult?.boundaryModule,
+  ].filter((modulePath) => typeof modulePath === "string");
+
+  return [...new Set(routeModules.map((modulePath) => {
+    const relativePath = path.relative(projectRoot, modulePath).split(path.sep).join("/");
+    const extension = path.extname(relativePath);
+    const clientModule = extension
+      ? `${relativePath.slice(0, -extension.length)}.mjs`
+      : `${relativePath}.mjs`;
+    return getClientModulePublicUrl(normalizedManifest, clientModule);
+  }).filter((publicUrl) => typeof publicUrl === "string"))];
+}
+
 export function collectTransitiveStyleUrls(publicUrls, assetManifest) {
   const normalizedManifest = normalizeClientAssetManifest(assetManifest);
   if (!normalizedManifest) {