@rangojs/router 0.0.0-experimental.3 → 0.0.0-experimental.30

package/src/browser/link-interceptor.ts

@@ -1,5 +1,18 @@
 import type { LinkInterceptorOptions, NavigateOptions } from "./types.js";
 
+/**
+ * Check if an anchor points to the same page with only a hash change.
+ * Used by both Link component and link-interceptor to let the browser
+ * handle anchor scrolling natively.
+ */
+export function isHashOnlyNavigation(anchor: HTMLAnchorElement): boolean {
+  return (
+    anchor.pathname === window.location.pathname &&
+    anchor.search === window.location.search &&
+    !!anchor.hash
+  );
+}
+
 /**
  * Default link interception predicate
  *
@@ -44,6 +57,12 @@ export function defaultShouldIntercept(link: HTMLAnchorElement): boolean {
     return false;
   }
 
+  // Don't intercept hash-only navigation (same path, only fragment changes).
+  // Let the browser handle anchor scrolling natively.
+  if (isHashOnlyNavigation(link)) {
+    return false;
+  }
+
   return true;
 }
 
@@ -70,7 +89,7 @@ export function defaultShouldIntercept(link: HTMLAnchorElement): boolean {
  */
 export function setupLinkInterception(
   onNavigate: (url: string, options?: NavigateOptions) => void,
-  options?: LinkInterceptorOptions
+  options?: LinkInterceptorOptions,
 ): () => void {
   const shouldIntercept = options?.shouldIntercept ?? defaultShouldIntercept;
 
@@ -112,10 +131,7 @@ export function setupLinkInterception(
 
   document.addEventListener("click", handleClick);
 
-  console.log("[Browser] Link interception enabled");
-
   return () => {
     document.removeEventListener("click", handleClick);
-    console.log("[Browser] Link interception disabled");
   };
 }

package/src/browser/logging.ts

@@ -0,0 +1,55 @@
+import { INTERNAL_RANGO_DEBUG } from "../internal-debug.js";
+
+interface BrowserLogContext {
+  requestId: string;
+  txId: string;
+  operation: string;
+}
+
+let txCounter = 0;
+let requestCounter = 0;
+
+export function isBrowserDebugEnabled(): boolean {
+  return INTERNAL_RANGO_DEBUG;
+}
+
+function nextId(prefix: string, counter: number): string {
+  return `${prefix}${counter.toString(36)}`;
+}
+
+export function startBrowserTransaction(operation: string): BrowserLogContext {
+  txCounter += 1;
+  requestCounter += 1;
+  return {
+    operation,
+    txId: nextId("ctx-", txCounter),
+    requestId: nextId("creq-", requestCounter),
+  };
+}
+
+export function browserDebugLog(
+  ctx: BrowserLogContext,
+  message: string,
+  details?: Record<string, unknown>,
+): void {
+  if (!INTERNAL_RANGO_DEBUG) return;
+
+  const prefix = `[Browser][req:${ctx.requestId}][tx:${ctx.operation}-${ctx.txId}]`;
+  if (details) {
+    console.log(`${prefix} ${message}`, details);
+    return;
+  }
+
+  console.log(`${prefix} ${message}`);
+}
+
+/**
+ * Simple gated console.log for browser-side debug output.
+ * Unlike browserDebugLog, this doesn't require a transaction context -
+ * use it for standalone debug messages in partial-update, navigation-bridge, etc.
+ */
+export function debugLog(msg: string, ...args: unknown[]): void {
+  if (INTERNAL_RANGO_DEBUG) {
+    console.log(msg, ...args);
+  }
+}

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}`);
         }
       }
     }