@rangojs/router 0.24.0 → 0.24.1

package/dist/types/client-urls/types.d.ts

@@ -58,6 +58,14 @@ export interface ClientUrlRouteRecord {
     readonly options: Readonly<ClientPathOptions> | undefined;
     readonly component: ComponentType;
     readonly layouts: readonly ComponentType[];
+    /**
+     * One per entry in `layouts`: the layout() item's ordinal among its sibling
+     * layout()s, its React key. Routes under the same layout() share it, so
+     * ClientUrlsRoot keeps that layout's instance across them (#1124). Keys only
+     * need to be unique among siblings: a differing parent layout remounts the
+     * whole subtree anyway.
+     */
+    readonly layoutKeys: readonly number[];
     readonly loaders: readonly ClientUrlLoaderRecord[];
     readonly loading: ReactNode | undefined;
     readonly transition: Readonly<ClientTransitionConfig> | undefined;

package/dist/vite/index.js

@@ -5929,7 +5929,7 @@ import { resolve } from "node:path";
 // package.json
 var package_default = {
   name: "@rangojs/router",
-  version: "0.24.0",
+  version: "0.24.1",
   description: "Django-inspired RSC router with composable URL patterns",
   keywords: [
     "react",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rangojs/router",
-  "version": "0.24.0",
+  "version": "0.24.1",
   "description": "Django-inspired RSC router with composable URL patterns",
   "keywords": [
     "react",

package/skills/client-urls/SKILL.md

@@ -526,7 +526,8 @@ a hard load of the target URL renders the full route.
   reconciles instead of remounting. The canonical commit runs in a
   `startTransition` when no new segments mount, and the wrapping layout sees
   `useOutlet().pending === true` for the held window; a route-level
-  `loading()` does not re-flash there. `transition()` is not needed for the
+  `loading()` does not re-flash there. Across different routes, a `layout()`
+  keeps its instance while the navigation stays under it. `transition()` is not needed for the
   hold; it adds the view-transition animation. Inline `<Suspense>` above each
   `useLoader` read is still the finer-grained tool when different reads on
   one route should wait independently.

package/src/client-urls/client-root.tsx

@@ -194,13 +194,13 @@ export function ClientUrlsRoot({
     });
   }
 
+  // Keyed per layout() item, not per route (#1124).
   for (let index = route.layouts.length - 1; index >= 0; index--) {
-    const layoutKey = `${route.id}-layout-${index}`;
     content = createElement(OutletProvider, {
-      key: layoutKey,
+      key: route.layoutKeys[index],
       content,
       pending,
-      children: createElement(route.layouts[index], { key: layoutKey }),
+      children: createElement(route.layouts[index]),
     });
   }
 

package/src/client-urls/client-urls.ts

@@ -154,12 +154,14 @@ interface LoadingItem extends ItemBase {
 
 interface FlattenContext {
   readonly layouts: readonly ComponentType[];
+  readonly layoutKeys: readonly number[];
   readonly loaders: readonly ClientUrlLoaderRecord[];
   readonly loading: ReactNode | undefined;
 }
 
 const EMPTY_CONTEXT: FlattenContext = {
   layouts: [],
+  layoutKeys: [],
   loaders: [],
   loading: undefined,
 };
@@ -588,6 +590,7 @@ function applyConfig(
 
   return {
     layouts: context.layouts,
+    layoutKeys: context.layoutKeys,
     loaders,
     loading,
   };
@@ -614,6 +617,7 @@ function addPathRecord(
       options,
       component: item.component,
       layouts: Object.freeze([...routeContext.layouts]),
+      layoutKeys: Object.freeze([...routeContext.layoutKeys]),
       loaders: Object.freeze([...routeContext.loaders]),
       loading: routeContext.loading,
       transition: transitionItem
@@ -625,6 +629,7 @@ function addPathRecord(
 
 function flattenLayout(
   item: LayoutItem,
+  ordinal: number,
   context: FlattenContext,
   routes: ClientUrlRouteRecord[],
 ): void {
@@ -633,6 +638,7 @@ function flattenLayout(
     {
       ...context,
       layouts: [...context.layouts, item.component],
+      layoutKeys: [...context.layoutKeys, ordinal],
     },
     item.children,
   );
@@ -650,11 +656,12 @@ function flattenRoutes(
   context: FlattenContext,
   routes: ClientUrlRouteRecord[],
 ): void {
+  let layoutOrdinal = 0;
   for (const item of items) {
     if (item.type === "path") {
       addPathRecord(item, context, routes);
     } else if (item.type === "layout") {
-      flattenLayout(item, context, routes);
+      flattenLayout(item, layoutOrdinal++, context, routes);
     }
   }
 }

package/src/client-urls/types.ts

@@ -105,6 +105,14 @@ export interface ClientUrlRouteRecord {
   readonly options: Readonly<ClientPathOptions> | undefined;
   readonly component: ComponentType;
   readonly layouts: readonly ComponentType[];
+  /**
+   * One per entry in `layouts`: the layout() item's ordinal among its sibling
+   * layout()s, its React key. Routes under the same layout() share it, so
+   * ClientUrlsRoot keeps that layout's instance across them (#1124). Keys only
+   * need to be unique among siblings: a differing parent layout remounts the
+   * whole subtree anyway.
+   */
+  readonly layoutKeys: readonly number[];
   readonly loaders: readonly ClientUrlLoaderRecord[];
   readonly loading: ReactNode | undefined;
   readonly transition: Readonly<ClientTransitionConfig> | undefined;