@rangojs/router 0.0.0-experimental.7 → 0.0.0-experimental.71

package/src/browser/merge-segment-loaders.ts

@@ -1,4 +1,5 @@
 import type { ResolvedSegment } from "./types.js";
+import { debugLog } from "./logging.js";
 
 /**
  * Merge partial loader data from server with cached loader data.
@@ -13,13 +14,13 @@ import type { ResolvedSegment } from "./types.js";
  */
 export function mergeSegmentLoaders(
   fromServer: ResolvedSegment,
-  fromCache: ResolvedSegment
+  fromCache: ResolvedSegment,
 ): ResolvedSegment {
   const serverLoaderIds = fromServer.loaderIds || [];
   const cachedLoaderIds = fromCache.loaderIds || [];
 
-  console.log(
-    `[Browser] Merging partial loaders: server has ${serverLoaderIds.join(", ")}, cache has ${cachedLoaderIds.join(", ")}`
+  debugLog(
+    `[Browser] Merging partial loaders: server has ${serverLoaderIds.join(", ")}, cache has ${cachedLoaderIds.join(", ")}`,
   );
 
   return {
@@ -54,7 +55,7 @@ export function mergeSegmentLoaders(
  */
 export function needsLoaderMerge(
   fromServer: ResolvedSegment,
-  fromCache: ResolvedSegment | undefined
+  fromCache: ResolvedSegment | undefined,
 ): fromCache is ResolvedSegment {
   return !!(
     fromCache &&
@@ -86,10 +87,15 @@ export function insertMissingDiffSegments(
   allSegments: ResolvedSegment[],
   diff: string[] | undefined,
   matchedIdSet: Set<string>,
-  newSegmentMap: Map<string, ResolvedSegment>
+  newSegmentMap: Map<string, ResolvedSegment>,
 ): void {
   if (!diff || diff.length === 0) return;
 
+  // Track how many siblings have been inserted per parent so each new
+  // sibling goes after the last one rather than always at parentIndex + 1
+  // (which would reverse the server order).
+  const insertedPerParent = new Map<string, number>();
+
   diff.forEach((diffId: string) => {
     if (!matchedIdSet.has(diffId)) {
       const fromServer = newSegmentMap.get(diffId);
@@ -100,25 +106,27 @@ export function insertMissingDiffSegments(
         if (loaderMatch) {
           const parentLayoutId = loaderMatch[1];
           const parentIndex = allSegments.findIndex(
-            (s) => s.id === parentLayoutId
+            (s) => s.id === parentLayoutId,
           );
           if (parentIndex !== -1) {
-            // Insert loader segment right after its parent layout
-            allSegments.splice(parentIndex + 1, 0, fromServer);
-            console.log(
-              `[Browser] Inserted diff segment ${diffId} after ${parentLayoutId}`
+            const alreadyInserted = insertedPerParent.get(parentLayoutId) ?? 0;
+            const insertAt = parentIndex + 1 + alreadyInserted;
+            allSegments.splice(insertAt, 0, fromServer);
+            insertedPerParent.set(parentLayoutId, alreadyInserted + 1);
+            debugLog(
+              `[Browser] Inserted diff segment ${diffId} after ${parentLayoutId}`,
             );
           } else {
             // Fallback: append to end if parent not found
             allSegments.push(fromServer);
             console.warn(
-              `[Browser] Appended diff segment ${diffId} (parent ${parentLayoutId} not found)`
+              `[Browser] Appended diff segment ${diffId} (parent ${parentLayoutId} not found)`,
             );
           }
         } else {
           // Non-loader diff segment not in matched - append to end
           allSegments.push(fromServer);
-          console.log(`[Browser] Appended diff segment ${diffId}`);
+          debugLog(`[Browser] Appended diff segment ${diffId}`);
         }
       }
     }