@rangojs/router 0.0.0-experimental.e16b7c00 → 0.0.0-experimental.e9c0b2f2

package/src/vite/plugins/expose-action-id.ts

@@ -7,9 +7,6 @@ import { createRangoDebugger, createCounter, NS } from "../debug.js";
 
 const debug = createRangoDebugger(NS.transform);
 
-/**
- * Type for the RSC plugin's manager API
- */
 interface RscPluginManager {
   serverReferenceMetaMap: Record<
     string,
@@ -26,14 +23,9 @@ interface RscPluginApi {
   manager: RscPluginManager;
 }
 
-/**
- * Get the RSC plugin's API from Vite config
- */
 function getRscPluginApi(config: ResolvedConfig): RscPluginApi | undefined {
-  // Try by name first
   let plugin = config.plugins.find((p) => p.name === "rsc:minimal");
 
-  // Fallback: find by API structure if name lookup fails
   if (!plugin) {
     plugin = config.plugins.find(
       (p) =>
@@ -62,13 +54,11 @@ function getRscPluginApi(config: ResolvedConfig): RscPluginApi | undefined {
 function isUseServerModule(filePath: string): boolean {
   try {
     const content = fs.readFileSync(filePath, "utf-8");
-    // Remove leading comments and whitespace to find the first meaningful content
     const trimmed = content
-      .replace(/^\s*\/\/[^\n]*\n/gm, "") // Remove single-line comments
-      .replace(/^\s*\/\*[\s\S]*?\*\/\s*/gm, "") // Remove multi-line comments
+      .replace(/^\s*\/\/[^\n]*\n/gm, "")
+      .replace(/^\s*\/\*[\s\S]*?\*\/\s*/gm, "")
       .trimStart();
 
-    // Check if the file starts with "use server" directive
     return (
       trimmed.startsWith('"use server"') || trimmed.startsWith("'use server'")
     );
@@ -77,18 +67,6 @@ function isUseServerModule(filePath: string): boolean {
   }
 }
 
-/**
- * Transform code to expose action IDs on createServerReference calls.
- * Wraps each call with an IIFE that attaches $id to the returned function.
- *
- * @param code - The source code to transform
- * @param sourceId - The source file identifier (for sourcemap)
- * @param hashToFileMap - Optional mapping from hash to file path (for server bundles)
- */
-/**
- * Apply createServerReference wrapping to a MagicString instance.
- * Returns true if any changes were made.
- */
 function applyServerReferenceWrapping(
   code: string,
   s: MagicString,
@@ -98,11 +76,6 @@ function applyServerReferenceWrapping(
     return false;
   }
 
-  // Match: createServerReference("hash#actionName", ...) or $$ReactClient.createServerReference(...)
-  // The RSC plugin uses $$ReactClient namespace in transformed code.
-  // Note: [^)]* cannot handle nested parens in trailing args. This is safe in practice
-  // because the RSC plugin always generates simple variable references (e.g., callServer)
-  // as the second argument, never nested function calls.
   const pattern =
     /((?:\$\$\w+\.)?createServerReference)\(("[^"]+#[^"]+")([^)]*)\)/g;
 
@@ -115,23 +88,19 @@ function applyServerReferenceWrapping(
     const start = match.index;
     const end = start + fullMatch.length;
 
-    // Parse the ID to potentially replace hash with file path
     let finalIdArg = idArg;
     if (hashToFileMap) {
-      // idArg is like '"hash#actionName"', extract the parts
       const idValue = idArg.slice(1, -1); // Remove quotes
       const hashMatch = idValue.match(/^([^#]+)#(.+)$/);
       if (hashMatch) {
         const [, hash, actionName] = hashMatch;
         const filePath = hashToFileMap.get(hash);
         if (filePath) {
-          // Replace hash with file path for server-side
           finalIdArg = `"${filePath}#${actionName}"`;
         }
       }
     }
 
-    // Wrap the createServerReference call to attach $$id to the returned function
     const replacement = `(function(fn) { fn.$$id = ${finalIdArg}; return fn; })(${fnCall}(${idArg}${rest}))`;
     s.overwrite(start, end, replacement);
   }
@@ -155,29 +124,6 @@ function transformServerReferences(
   };
 }
 
-/**
- * Transform registerServerReference calls in server bundles to use file paths instead of hashes.
- * Pattern: registerServerReference(fn, "hash", "exportName")
- * React's registerServerReference sets $$id = hash + "#" + exportName
- * By replacing the hash with file path, $$id will contain the file path for revalidation matching.
- *
- * Only actions from module-level "use server" files are transformed.
- * Inline actions (defined in RSC components with "use server" inside a function) are NOT in
- * hashToFileMap and keep their hashed IDs. This is intentional for client security:
- * - Module-level "use server" files: shared action modules, file path helps revalidation
- * - Inline actions: one-off actions in RSC, hash ID prevents file path exposure to client
- *
- * @param code - The source code to transform
- * @param sourceId - The source file identifier (for sourcemap)
- * @param hashToFileMap - Mapping from hash to file path (only module-level "use server" files)
- */
-/**
- * Apply registerServerReference wrapping to a MagicString instance.
- * Returns true if any changes were made.
- *
- * Only actions from module-level "use server" files are transformed.
- * Inline actions keep their hashed IDs for client security.
- */
 function applyRegisterReferenceWrapping(
   code: string,
   s: MagicString,
@@ -187,8 +133,6 @@ function applyRegisterReferenceWrapping(
     return false;
   }
 
-  // Match: registerServerReference(fn, "hash", "exportName")
-  // The hash is the second argument, exportName is the third
   const pattern =
     /registerServerReference\(([^,]+),\s*"([^"]+)",\s*"([^"]+)"\)/g;
 
@@ -200,15 +144,9 @@ function applyRegisterReferenceWrapping(
     const start = match.index;
     const end = start + fullMatch.length;
 
-    // Look up the file path for this hash
     const filePath = hashToFileMap.get(hash);
     if (filePath) {
       hasChanges = true;
-      // WRAP the call to add $id property with file path
-      // Keep the original hash for React's action registry (so loadServerAction works)
-      // Add $id (single dollar) with file path for revalidation matching
-      // Note: We use $id instead of $$id because React's registerServerReference
-      // sets $$id as a non-writable property
       const filePathId = `${filePath}#${exportName}`;
       const replacement = `(function(fn) { fn.$id = "${filePathId}"; return fn; })(registerServerReference(${fnArg}, "${hash}", "${exportName}"))`;
       s.overwrite(start, end, replacement);
@@ -336,27 +274,19 @@ export function exposeActionId(): Plugin {
 
       const start = counterTransform ? performance.now() : 0;
       try {
-        // Dev mode: no hash-to-file mapping needed (IDs are already file paths)
         return transformServerReferences(code, id);
       } finally {
         counterTransform?.record(id, performance.now() - start);
       }
     },
 
-    // Build mode: renderChunk runs after all transforms and bundling complete
     renderChunk(code, chunk) {
       const start = counterRender ? performance.now() : 0;
       try {
-        // Only RSC bundle should get file paths for revalidation matching
-        // SSR bundle must NOT use file paths because client components run there
-        // and need to match the client bundle during hydration (otherwise: error #418)
         const isRscEnv = this.environment?.name === "rsc";
 
-        // Only use file path mapping for RSC environment
         const effectiveMap = isRscEnv ? hashToFileMap : undefined;
 
-        // For RSC bundles, both createServerReference and registerServerReference
-        // may need transforming. Use a single MagicString for correct sourcemaps.
         if (isRscEnv && hashToFileMap) {
           const s = new MagicString(code);
           const changed1 = applyServerReferenceWrapping(code, s, effectiveMap);
@@ -377,7 +307,6 @@ export function exposeActionId(): Plugin {
           return null;
         }
 
-        // Non-RSC environments: only transform createServerReference calls
         return transformServerReferences(code, chunk.fileName, effectiveMap);
       } finally {
         counterRender?.record(chunk.fileName, performance.now() - start);

package/src/vite/plugins/expose-id-utils.ts

@@ -8,21 +8,12 @@ export function normalizePath(p: string): string {
   return p.split(path.sep).join("/");
 }
 
-/**
- * Generate a short hash for an ID.
- * Uses first 8 chars of SHA-256 hash for uniqueness while keeping IDs short.
- * Appends export name for easier debugging in production: "abc123#ExportName"
- */
 export function hashId(filePath: string, exportName: string): string {
   const input = `${filePath}#${exportName}`;
   const hash = crypto.createHash("sha256").update(input).digest("hex");
   return `${hash.slice(0, 8)}#${exportName}`;
 }
 
-/**
- * Build a stable ID for an export binding. Uses hashed IDs in production
- * builds (short + opaque) and readable path#name IDs in dev.
- */
 export function makeStubId(
   filePath: string,
   exportName: string,
@@ -31,17 +22,6 @@ export function makeStubId(
   return isBuild ? hashId(filePath, exportName) : `${filePath}#${exportName}`;
 }
 
-/**
- * Generate an 8-char hex hash for an inline handler call site.
- *
- * Keyed on the source-order INDEX of the call (the Nth inline `fnName(...)` in
- * the file), NOT its line number. Line numbers shift between the prerender
- * build context and the production build context (preceding transforms differ,
- * e.g. plugin-react boilerplate), which would desync the prerender manifest key
- * from the runtime handler id and break prerender/static freezing. The
- * source-order index is invariant to line shifts; `fnName` keeps Static and
- * Prerender inline ids from colliding at the same index.
- */
 export function hashInlineId(
   filePath: string,
   fnName: string,
@@ -61,11 +41,6 @@ export interface DetectedImports {
   any: boolean;
 }
 
-/**
- * Build a map from local binding name to exported names by walking
- * ExportNamedDeclaration nodes. Handles `export const X`, `export { X }`,
- * and `export { X as Y }`. Skips re-exports (`export { X } from "..."`).
- */
 export function buildExportMap(program: any): Map<string, string[]> {
   const exportMap = new Map<string, string[]>();
 
@@ -105,10 +80,6 @@ export function buildExportMap(program: any): Map<string, string[]> {
   return exportMap;
 }
 
-/**
- * Single-pass detection of all create* imports from @rangojs/router.
- * Returns which create functions are imported so we can skip unnecessary transforms.
- */
 export function detectImports(code: string): DetectedImports {
   // Extract all import declarations from @rangojs/router in one scan
   const importPattern =
@@ -135,10 +106,6 @@ export function detectImports(code: string): DetectedImports {
     if (/\bcreateRouter\b/.test(imports)) result.router = true;
   }
 
-  // createRouter has a stricter check: only from "@rangojs/router" (not sub-paths).
-  // NOTE: This is intentional — detectImports is used as a fast pre-filter in
-  // exposeInternalIds (which does NOT handle router transforms). The separate
-  // exposeRouterId plugin handles createRouter and DOES accept the /server subpath.
   if (result.router) {
     result.router =
       /import\s*\{[^}]*\bcreateRouter\b[^}]*\}\s*from\s*["']@rangojs\/router["']/.test(
@@ -157,11 +124,6 @@ export function detectImports(code: string): DetectedImports {
   return result;
 }
 
-/**
- * Skip past a string literal, template literal, or comment starting at pos.
- * Returns the index after the closing delimiter, or pos if not at a
- * string/comment start. Handles escape sequences and nested ${} in templates.
- */
 export function skipStringOrComment(code: string, pos: number): number {
   const ch = code[pos];
 
@@ -219,11 +181,6 @@ export function skipStringOrComment(code: string, pos: number): number {
   return pos;
 }
 
-/**
- * Find the matching closing paren starting after an already-opened paren.
- * Skips strings, template literals, and comments so parens inside them
- * don't affect depth tracking. Returns the index after the closing paren.
- */
 export function findMatchingParen(code: string, startPos: number): number {
   let depth = 1;
   let i = startPos;
@@ -240,10 +197,6 @@ export function findMatchingParen(code: string, startPos: number): number {
   return i;
 }
 
-/**
- * Count the number of top-level arguments in a function call.
- * Skips nested parens, brackets, braces, strings, and comments.
- */
 export function countArgs(
   code: string,
   startPos: number,
@@ -257,7 +210,16 @@ export function countArgs(
   while (i < endPos) {
     const skipped = skipStringOrComment(code, i);
     if (skipped > i) {
-      hasContent = true;
+      // A comment is transparent: `createHandle(/* meta */)` has ZERO real
+      // arguments, so a comment-only region must NOT set hasContent (else the
+      // fallback path would count it as 1 arg and inject `, "id"` over an elided
+      // first slot — a syntax error). A string/template literal IS content.
+      const ch = code[i];
+      const isComment =
+        ch === "/" &&
+        i + 1 < code.length &&
+        (code[i + 1] === "/" || code[i + 1] === "*");
+      if (!isComment) hasContent = true;
       i = skipped;
       continue;
     }
@@ -279,10 +241,6 @@ export function countArgs(
   return hasContent ? argCount + 1 : 0;
 }
 
-/**
- * Find the end of a statement: skip whitespace and optional semicolon after
- * a closing paren position.
- */
 export function findStatementEnd(code: string, pos: number): number {
   let i = pos;
   while (i < code.length && /\s/.test(code[i])) {
@@ -294,10 +252,81 @@ export function findStatementEnd(code: string, pos: number): number {
   return i;
 }
 
+export { escapeRegExp } from "../../regex-escape.js";
+
 /**
- * Escape special regex characters in a string so it can be safely
- * interpolated into a RegExp pattern.
+ * Given an index pointing just past a `create*` callee identifier, return the
+ * index of the call's opening `(`, accounting for an optional generic type
+ * argument list `<...>` with arbitrarily nested `<>`. Returns -1 when the next
+ * non-trivia token is neither `<` nor `(` (i.e. not a call site).
+ *
+ * Replaces the single-level `<[^>]*>` regex assumption, which stopped at the
+ * first `>` and so never reached `(` for `createRouter<Config<Env>>(`.
+ *
+ * Whitespace, comments, and strings between the callee and `(` are skipped via
+ * skipStringOrComment. The `<...>` scan only balances angle brackets; it does
+ * not attempt to parse full TS type syntax (sufficient for locating the paren).
  */
-export function escapeRegExp(input: string): string {
-  return input.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+export function findCallParenAfterGenerics(
+  code: string,
+  afterCalleeIndex: number,
+): number {
+  let i = afterCalleeIndex;
+  // Skip leading whitespace/comments/strings before `<` or `(`.
+  while (i < code.length) {
+    const skipped = skipStringOrComment(code, i);
+    if (skipped > i) {
+      i = skipped;
+      continue;
+    }
+    if (/\s/.test(code[i])) {
+      i++;
+      continue;
+    }
+    break;
+  }
+
+  if (i >= code.length) return -1;
+
+  if (code[i] === "(") return i;
+
+  if (code[i] === "<") {
+    let depth = 0;
+    while (i < code.length) {
+      const skipped = skipStringOrComment(code, i);
+      if (skipped > i) {
+        i = skipped;
+        continue;
+      }
+      const ch = code[i];
+      if (ch === "<") {
+        depth++;
+      } else if (ch === ">") {
+        depth--;
+        if (depth === 0) {
+          i++;
+          break;
+        }
+      }
+      i++;
+    }
+    if (depth !== 0) return -1;
+    // After the balanced generic list, skip trivia and expect `(`.
+    while (i < code.length) {
+      const skipped = skipStringOrComment(code, i);
+      if (skipped > i) {
+        i = skipped;
+        continue;
+      }
+      if (/\s/.test(code[i])) {
+        i++;
+        continue;
+      }
+      break;
+    }
+    if (i < code.length && code[i] === "(") return i;
+    return -1;
+  }
+
+  return -1;
 }

package/src/vite/plugins/expose-ids/export-analysis.ts

@@ -5,16 +5,11 @@ import {
   findStatementEnd,
   buildExportMap,
   escapeRegExp,
+  findCallParenAfterGenerics,
 } from "../expose-id-utils.js";
 import { codeMatchIndices } from "../../../build/route-types/source-scan.js";
 import type { CreateExportBinding } from "./types.js";
 
-/**
- * Check whether every non-type export in `code` is accounted for by the given
- * bindings. Returns false if any export exists that is not one of the known
- * create* call locals/exports, allowing callers to bail out for mixed-export
- * files.
- */
 export function isExportOnlyFile(
   code: string,
   bindings: CreateExportBinding[],
@@ -28,10 +23,8 @@ export function isExportOnlyFile(
     for (const e of b.exportNames) knownExports.add(e);
   }
 
-  // Bail on star re-exports (unknown exports)
   if (/export\s*\*/.test(code)) return false;
 
-  // Check `export const/let/var/function/class/default X` declarations
   const declExportPattern =
     /export\s+(const|let|var|function|class|default)\s+(\w+)/g;
   let match: RegExpExecArray | null;
@@ -39,8 +32,6 @@ export function isExportOnlyFile(
     if (!knownExports.has(match[2])) return false;
   }
 
-  // Check `export { X }` and `export { X as Y }` specifiers: the local name
-  // must reference a known create* binding.
   const specExportPattern = /export\s*\{([^}]+)\}/g;
   while ((match = specExportPattern.exec(code)) !== null) {
     const specifiers = match[1]
@@ -60,24 +51,44 @@ export function isExportOnlyFile(
   return true;
 }
 
+// Matches the callee identifier only. The optional generic argument list
+// (which may be nested, e.g. createLoader<A<B>>(...)) and the call paren are
+// resolved per match via findCallParenAfterGenerics, so a nested `>` no longer
+// defeats the scan the way `<[^>]*>` did (it stopped at the first `>`).
 function createCallPattern(fnNames: string[]): RegExp {
-  return new RegExp(
-    `\\b(?:${fnNames.map(escapeRegExp).join("|")})\\s*(?:<[^>]*>\\s*)?\\(`,
-    "g",
+  return new RegExp(`\\b(?:${fnNames.map(escapeRegExp).join("|")})\\b`, "g");
+}
+
+/**
+ * Byte offsets of every create*-call site in real code: a callee-identifier
+ * match that is actually followed by a call `(` (after an optional nested
+ * generic list). Non-call references (type positions, the import specifier
+ * itself) yield -1 from findCallParenAfterGenerics and are dropped.
+ */
+function createCallStartIndices(code: string, fnNames: string[]): number[] {
+  return codeMatchIndices(code, createCallPattern(fnNames)).filter(
+    (index) =>
+      findCallParenAfterGenerics(
+        code,
+        index + matchedNameLength(code, index),
+      ) !== -1,
   );
 }
 
-// Counts real create*() call sites, ignoring occurrences inside comments and
-// string literals. Used by the unsupported-shape warning heuristic and the
-// inline-extraction pre-check.
+// Length of the identifier match at `index` (run of identifier chars).
+function matchedNameLength(code: string, index: number): number {
+  let i = index;
+  while (i < code.length && /[A-Za-z0-9_$]/.test(code[i])) i++;
+  return i - index;
+}
+
 export function countCreateCallsForNames(
   code: string,
   fnNames: string[],
 ): number {
-  return codeMatchIndices(code, createCallPattern(fnNames)).length;
+  return createCallStartIndices(code, fnNames).length;
 }
 
-/** Convert a 0-based byte offset to a 1-based { line, column }. */
 export function offsetToLineColumn(
   code: string,
   index: number,
@@ -94,21 +105,13 @@ export function offsetToLineColumn(
   return { line, column: index - lineStart + 1 };
 }
 
-/**
- * Locate every real create*() call site (comment/string-free) that is NOT one
- * of the supported, id-injectable export bindings, returning each as a 1-based
- * { line, column }. The empty result means every call is in a supported shape.
- * Both binding-collection paths anchor `callExprStart` at the start of the
- * create* identifier — exactly where this pattern matches — so the set
- * difference is exact.
- */
 export function findUnsupportedCreateCallSites(
   code: string,
   fnNames: string[],
   supportedBindings: CreateExportBinding[],
 ): Array<{ line: number; column: number }> {
   const supported = new Set(supportedBindings.map((b) => b.callExprStart));
-  return codeMatchIndices(code, createCallPattern(fnNames))
+  return createCallStartIndices(code, fnNames)
     .filter((index) => !supported.has(index))
     .map((index) => offsetToLineColumn(code, index));
 }
@@ -158,16 +161,6 @@ export function getCalledIdentifierFromCall(callExpr: any): string | null {
   return null;
 }
 
-/**
- * plugin-react's dev Fast Refresh wraps exports whose function body uses
- * hook-like calls in a signature-registration call. A loader/handle that calls
- * `ctx.use(...)` trips this heuristic, so `export const X = createLoader(...)`
- * becomes `export const X = _s(createLoader(...), "<sig>", true)` — the create*
- * call is the first argument of an unrelated wrapper call. Unwrap a single such
- * layer so ID injection still targets the inner create* call. The `$$id`
- * assignment is appended after the whole statement (against the export local),
- * which is unaffected by the wrapper since `_s(x)` returns `x`.
- */
 function unwrapSignatureWrappedCall(init: any, fnNameSet: Set<string>): any {
   if (init?.type !== "CallExpression") return init;
   const directId = getCalledIdentifierFromCall(init);
@@ -331,10 +324,6 @@ export function collectCreateExportBindings(
     }
   }
 
-  // When the JS parser misidentifies TypeScript generics (e.g.,
-  // createLocationState<{ text: string }>({...})) as binary expressions,
-  // the AST path finds 0 bindings even though calls exist. Fall back to
-  // regex-based detection which handles generics via <[^>]*> matching.
   if (bindings.length === 0) {
     return collectCreateExportBindingsFallback(code, fnNames);
   }
@@ -349,8 +338,6 @@ export function buildUnsupportedShapeWarning(
 ): string {
   const lines = [`[rango] Unsupported ${fnName} shape in "${filePath}".`];
 
-  // Point at the exact call(s) so the location is clickable in the terminal/IDE
-  // (file:line:column) instead of leaving the user to scan the whole file.
   if (sites.length === 1) {
     const s = sites[0];
     lines.push(

package/src/vite/plugins/expose-ids/handler-transform.ts

@@ -3,35 +3,24 @@ import { makeStubId } from "../expose-id-utils.js";
 import type { HandlerTransformConfig, CreateExportBinding } from "./types.js";
 import { isExportOnlyFile } from "./export-analysis.js";
 
-function analyzeCreateHandleArgs(
-  code: string,
-  startPos: number,
-  endPos: number,
-): { hasArgs: boolean } {
-  const content = code.slice(startPos, endPos).trim();
-  return { hasArgs: content.length > 0 };
-}
-
 export function transformHandles(
   bindings: CreateExportBinding[],
   s: MagicString,
-  code: string,
   filePath: string,
   isBuild: boolean,
 ): boolean {
   let hasChanges = false;
   for (const binding of bindings) {
     const exportName = binding.exportNames[0];
-    const args = analyzeCreateHandleArgs(
-      code,
-      binding.callOpenParenPos + 1,
-      binding.callCloseParenPos,
-    );
 
     const handleId = makeStubId(filePath, exportName, isBuild);
 
+    // Branch on the AST-derived argCount, not a string-trim of the raw arg
+    // slice. A comment-only arg list (`createHandle(/* meta */)`) trims to
+    // non-empty but is zero real arguments; injecting `, "id"` would emit
+    // `createHandle(/* meta */, "id")` — an elided first arg / syntax error.
     let paramInjection: string;
-    if (!args.hasArgs) {
+    if (binding.argCount === 0) {
       paramInjection = `undefined, "${handleId}"`;
     } else {
       paramInjection = `, "${handleId}"`;
@@ -69,10 +58,6 @@ export function transformLocationState(
   return hasChanges;
 }
 
-/**
- * Replace the entire file with lightweight stubs when ALL non-type exports are
- * handler calls of the given type. Returns null for files with mixed exports.
- */
 export function generateWholeFileStubs(
   cfg: HandlerTransformConfig,
   bindings: CreateExportBinding[],
@@ -91,10 +76,6 @@ export function generateWholeFileStubs(
   return { code: stubs.join("\n") + "\n", map: null };
 }
 
-/**
- * Replace handler call expressions with lightweight stub objects on the shared
- * unified-pipeline MagicString so all transforms share one sourcemap.
- */
 export function stubHandlerExprs(
   cfg: HandlerTransformConfig,
   bindings: CreateExportBinding[],
@@ -117,9 +98,6 @@ export function stubHandlerExprs(
   return hasChanges;
 }
 
-/**
- * Inject $$id into export const handler calls in RSC environments.
- */
 export function transformHandlerIds(
   cfg: HandlerTransformConfig,
   bindings: CreateExportBinding[],
@@ -133,10 +111,6 @@ export function transformHandlerIds(
 
     const handlerId = makeStubId(filePath, exportName, isBuild);
 
-    // Injection strategy matches the runtime overload signatures:
-    //   0 args                              -> inject undefined, "id"
-    //   1 arg  (handler)                    -> inject , undefined, "id"
-    //   2+ args                             -> inject , "id"
     let paramInjection: string;
     if (binding.argCount === 0) {
       paramInjection = `undefined, "${handlerId}"`;

package/src/vite/plugins/expose-ids/loader-transform.ts

@@ -9,18 +9,6 @@ export function hasCreateLoaderImport(code: string): boolean {
   );
 }
 
-/**
- * Generate lightweight client stubs for loader files.
- *
- * When a loader file is imported from a client component (e.g., for useLoader()),
- * the client only needs { __brand: "loader", $$id: "..." } objects.
- * This function replaces the entire file contents with just those stub exports,
- * preventing server-only data (constants, DB queries, etc.) from leaking into
- * the client bundle.
- *
- * Only applies when ALL named exports are createLoader() calls (plus type exports
- * which are erased at compile time). Files with mixed exports are left untouched.
- */
 export function generateClientLoaderStubs(
   bindings: CreateExportBinding[],
   code: string,
@@ -32,11 +20,18 @@ export function generateClientLoaderStubs(
   const lines: string[] = [];
 
   for (const binding of bindings) {
-    for (const name of binding.exportNames) {
-      const loaderId = makeStubId(filePath, name, isBuild);
-      lines.push(
-        `export const ${name} = { __brand: "loader", $$id: "${loaderId}" };`,
-      );
+    // Aliases share the primary export's id (matches the server side, which
+    // registers only exportNames[0] in the loader registry, and the mixed-type
+    // whole-file path). Emitting a distinct makeStubId per alias would make a
+    // client component importing the alias fetch an id absent from the server
+    // registry, so the fetchable-loader request would 404.
+    const primaryName = binding.exportNames[0];
+    const loaderId = makeStubId(filePath, primaryName, isBuild);
+    lines.push(
+      `export const ${primaryName} = { __brand: "loader", $$id: "${loaderId}" };`,
+    );
+    for (const alias of binding.exportNames.slice(1)) {
+      lines.push(`export const ${alias} = ${primaryName};`);
     }
   }
 
@@ -56,9 +51,6 @@ export function transformLoaders(
 
     const loaderId = makeStubId(filePath, exportName, isBuild);
 
-    // Inject $$id as hidden third parameter.
-    // createLoader(fn) -> createLoader(fn, undefined, "id")
-    // createLoader(fn, true) -> createLoader(fn, true, "id")
     const paramInjection =
       binding.argCount === 1 ? `, undefined, "${loaderId}"` : `, "${loaderId}"`;
     s.appendLeft(binding.callCloseParenPos, paramInjection);