@real-router/solid 0.6.0 → 0.7.0

package/README.md

@@ -341,9 +341,9 @@ Full documentation: [Wiki](https://github.com/greydragon888/real-router/wiki)
 
 ## Examples
 
-14 runnable examples — each is a standalone Vite app. Run: `cd examples/solid/basic && pnpm dev`
+14 runnable examples — each is a standalone Vite app. Run: `cd examples/web/solid/basic && pnpm dev`
 
-[basic](../../examples/solid/basic) · [nested-routes](../../examples/solid/nested-routes) · [auth-guards](../../examples/solid/auth-guards) · [data-loading](../../examples/solid/data-loading) · [lazy-loading](../../examples/solid/lazy-loading) · [async-guards](../../examples/solid/async-guards) · [hash-routing](../../examples/solid/hash-routing) · [persistent-params](../../examples/solid/persistent-params) · [error-handling](../../examples/solid/error-handling) · [dynamic-routes](../../examples/solid/dynamic-routes) · [store-based-state](../../examples/solid/store-based-state) · [use-link-directive](../../examples/solid/use-link-directive) · [signal-primitives](../../examples/solid/signal-primitives) · [combined](../../examples/solid/combined)
+[basic](../../examples/web/solid/basic) · [nested-routes](../../examples/web/solid/nested-routes) · [auth-guards](../../examples/web/solid/auth-guards) · [data-loading](../../examples/web/solid/data-loading) · [lazy-loading](../../examples/web/solid/lazy-loading) · [async-guards](../../examples/web/solid/async-guards) · [hash-routing](../../examples/web/solid/hash-routing) · [persistent-params](../../examples/web/solid/persistent-params) · [error-handling](../../examples/web/solid/error-handling) · [dynamic-routes](../../examples/web/solid/dynamic-routes) · [store-based-state](../../examples/web/solid/store-based-state) · [use-link-directive](../../examples/web/solid/use-link-directive) · [signal-primitives](../../examples/web/solid/signal-primitives) · [combined](../../examples/web/solid/combined)
 
 ## Related Packages
 

package/dist/cjs/index.d.ts

@@ -17,6 +17,12 @@ interface MatchProps {
     readonly fallback?: JSX.Element;
     readonly children: JSX.Element;
 }
+interface SelfProps {
+    /** Fallback content while children are suspended. */
+    readonly fallback?: JSX.Element;
+    /** Content to render when the active route name equals the parent RouteView's nodeName. */
+    readonly children: JSX.Element;
+}
 interface NotFoundProps {
     readonly children: JSX.Element;
 }
@@ -25,6 +31,10 @@ declare function Match(props: MatchProps): JSX.Element;
 declare namespace Match {
     var displayName: string;
 }
+declare function Self(props: SelfProps): JSX.Element;
+declare namespace Self {
+    var displayName: string;
+}
 declare function NotFound(props: NotFoundProps): JSX.Element;
 declare namespace NotFound {
     var displayName: string;
@@ -36,6 +46,7 @@ declare namespace RouteViewRoot {
 }
 declare const RouteView: typeof RouteViewRoot & {
     Match: typeof Match;
+    Self: typeof Self;
     NotFound: typeof NotFound;
 };
 
@@ -116,4 +127,4 @@ declare function createSignalFromSource<T>(source: RouterSource<T>): Accessor<T>
 declare function createStoreFromSource<T extends object>(source: RouterSource<T>): T;
 
 export { Link, RouteContext, RouteView, RouterContext, RouterErrorBoundary, RouterProvider, createSignalFromSource, createStoreFromSource, link, useNavigator, useRoute, useRouteNode, useRouteNodeStore, useRouteStore, useRouteUtils, useRouter, useRouterTransition };
-export type { LinkDirectiveOptions, LinkProps, RouteState, MatchProps as RouteViewMatchProps, NotFoundProps as RouteViewNotFoundProps, RouteViewProps, RouterErrorBoundaryProps };
+export type { LinkDirectiveOptions, LinkProps, RouteState, MatchProps as RouteViewMatchProps, NotFoundProps as RouteViewNotFoundProps, RouteViewProps, SelfProps as RouteViewSelfProps, RouterErrorBoundaryProps };

package/dist/cjs/index.js

@@ -11,6 +11,7 @@ var core = require('@real-router/core');
 // Local (non-global) Symbols — Symbol.for() would expose markers to spoofing
 // via the global Symbol registry. See Gotchas section "RouteView Marker Objects".
 const MATCH_MARKER = Symbol("RouteView.Match");
+const SELF_MARKER = Symbol("RouteView.Self");
 const NOT_FOUND_MARKER = Symbol("RouteView.NotFound");
 function Match(props) {
   const result = {
@@ -29,6 +30,19 @@ function Match(props) {
   return result;
 }
 Match.displayName = "RouteView.Match";
+function Self(props) {
+  const result = {
+    $$type: SELF_MARKER,
+    fallback: props.fallback,
+    get children() {
+      return props.children;
+    }
+  };
+
+  // See Match for the marker-pattern rationale.
+  return result;
+}
+Self.displayName = "RouteView.Self";
 function NotFound(props) {
   const result = {
     $$type: NOT_FOUND_MARKER,
@@ -51,6 +65,9 @@ function isSegmentMatch(routeName, fullSegmentName, exact) {
 function isMatchMarker(value) {
   return value != null && typeof value === "object" && "$$type" in value && value.$$type === MATCH_MARKER;
 }
+function isSelfMarker(value) {
+  return value != null && typeof value === "object" && "$$type" in value && value.$$type === SELF_MARKER;
+}
 function isNotFoundMarker(value) {
   return value != null && typeof value === "object" && "$$type" in value && value.$$type === NOT_FOUND_MARKER;
 }
@@ -64,11 +81,48 @@ function collectElements(children, result) {
     }
     return;
   }
-  if (isMatchMarker(children) || isNotFoundMarker(children)) {
+  if (isMatchMarker(children) || isSelfMarker(children) || isNotFoundMarker(children)) {
     result.push(children);
   }
 }
+
+// child.children is a getter — read it INSIDE the JSX expression so Solid
+// creates a reactive dependency. Pulling it into a variable freezes the
+// value at template-build time and breaks Suspense fallback transitions
+// (lazy() resolution).
+function renderMatch(child) {
+  return child.fallback === undefined ? child.children : web.createComponent(solidJs.Suspense, {
+    get fallback() {
+      return child.fallback;
+    },
+    get children() {
+      return child.children;
+    }
+  });
+}
+function renderSelf(self) {
+  return self.fallback === undefined ? self.children : web.createComponent(solidJs.Suspense, {
+    get fallback() {
+      return self.fallback;
+    },
+    get children() {
+      return self.children;
+    }
+  });
+}
+function processMatchChild(child, routeName, nodeName) {
+  const {
+    segment,
+    exact
+  } = child;
+  const fullSegmentName = nodeName ? `${nodeName}.${segment}` : segment;
+  if (!isSegmentMatch(routeName, fullSegmentName, exact)) {
+    return null;
+  }
+  return renderMatch(child);
+}
 function buildRenderList(elements, routeName, nodeName) {
+  let selfMarker = null;
   let notFoundChildren = null;
   let activeMatchFound = false;
   const rendered = [];
@@ -77,28 +131,25 @@ function buildRenderList(elements, routeName, nodeName) {
       notFoundChildren = child.children;
       continue;
     }
-    if (activeMatchFound) {
+    if (isSelfMarker(child)) {
+      selfMarker ??= child;
       continue;
     }
-    const {
-      segment,
-      exact,
-      fallback
-    } = child;
-    const fullSegmentName = nodeName ? `${nodeName}.${segment}` : segment;
-    if (!isSegmentMatch(routeName, fullSegmentName, exact)) {
+    if (activeMatchFound) {
       continue;
     }
-    activeMatchFound = true;
-    rendered.push(fallback === undefined ? child.children : web.createComponent(solidJs.Suspense, {
-      fallback: fallback,
-      get children() {
-        return child.children;
-      }
-    }));
+    const matchRendered = processMatchChild(child, routeName, nodeName);
+    if (matchRendered !== null) {
+      activeMatchFound = true;
+      rendered.push(matchRendered);
+    }
   }
-  if (!activeMatchFound && routeName === core.UNKNOWN_ROUTE && notFoundChildren !== null) {
-    rendered.push(notFoundChildren);
+  if (!activeMatchFound) {
+    if (selfMarker !== null && routeName === nodeName) {
+      rendered.push(renderSelf(selfMarker));
+    } else if (routeName === core.UNKNOWN_ROUTE && notFoundChildren !== null) {
+      rendered.push(notFoundChildren);
+    }
   }
   return rendered;
 }
@@ -157,6 +208,7 @@ function RouteViewRoot(props) {
 RouteViewRoot.displayName = "RouteView";
 const RouteView = Object.assign(RouteViewRoot, {
   Match,
+  Self,
   NotFound
 });
 

package/dist/esm/index.d.mts

@@ -17,6 +17,12 @@ interface MatchProps {
     readonly fallback?: JSX.Element;
     readonly children: JSX.Element;
 }
+interface SelfProps {
+    /** Fallback content while children are suspended. */
+    readonly fallback?: JSX.Element;
+    /** Content to render when the active route name equals the parent RouteView's nodeName. */
+    readonly children: JSX.Element;
+}
 interface NotFoundProps {
     readonly children: JSX.Element;
 }
@@ -25,6 +31,10 @@ declare function Match(props: MatchProps): JSX.Element;
 declare namespace Match {
     var displayName: string;
 }
+declare function Self(props: SelfProps): JSX.Element;
+declare namespace Self {
+    var displayName: string;
+}
 declare function NotFound(props: NotFoundProps): JSX.Element;
 declare namespace NotFound {
     var displayName: string;
@@ -36,6 +46,7 @@ declare namespace RouteViewRoot {
 }
 declare const RouteView: typeof RouteViewRoot & {
     Match: typeof Match;
+    Self: typeof Self;
     NotFound: typeof NotFound;
 };
 
@@ -116,4 +127,4 @@ declare function createSignalFromSource<T>(source: RouterSource<T>): Accessor<T>
 declare function createStoreFromSource<T extends object>(source: RouterSource<T>): T;
 
 export { Link, RouteContext, RouteView, RouterContext, RouterErrorBoundary, RouterProvider, createSignalFromSource, createStoreFromSource, link, useNavigator, useRoute, useRouteNode, useRouteNodeStore, useRouteStore, useRouteUtils, useRouter, useRouterTransition };
-export type { LinkDirectiveOptions, LinkProps, RouteState, MatchProps as RouteViewMatchProps, NotFoundProps as RouteViewNotFoundProps, RouteViewProps, RouterErrorBoundaryProps };
+export type { LinkDirectiveOptions, LinkProps, RouteState, MatchProps as RouteViewMatchProps, NotFoundProps as RouteViewNotFoundProps, RouteViewProps, SelfProps as RouteViewSelfProps, RouterErrorBoundaryProps };

package/dist/esm/index.mjs

@@ -9,6 +9,7 @@ import { UNKNOWN_ROUTE, getNavigator } from '@real-router/core';
 // Local (non-global) Symbols — Symbol.for() would expose markers to spoofing
 // via the global Symbol registry. See Gotchas section "RouteView Marker Objects".
 const MATCH_MARKER = Symbol("RouteView.Match");
+const SELF_MARKER = Symbol("RouteView.Self");
 const NOT_FOUND_MARKER = Symbol("RouteView.NotFound");
 function Match(props) {
   const result = {
@@ -27,6 +28,19 @@ function Match(props) {
   return result;
 }
 Match.displayName = "RouteView.Match";
+function Self(props) {
+  const result = {
+    $$type: SELF_MARKER,
+    fallback: props.fallback,
+    get children() {
+      return props.children;
+    }
+  };
+
+  // See Match for the marker-pattern rationale.
+  return result;
+}
+Self.displayName = "RouteView.Self";
 function NotFound(props) {
   const result = {
     $$type: NOT_FOUND_MARKER,
@@ -49,6 +63,9 @@ function isSegmentMatch(routeName, fullSegmentName, exact) {
 function isMatchMarker(value) {
   return value != null && typeof value === "object" && "$$type" in value && value.$$type === MATCH_MARKER;
 }
+function isSelfMarker(value) {
+  return value != null && typeof value === "object" && "$$type" in value && value.$$type === SELF_MARKER;
+}
 function isNotFoundMarker(value) {
   return value != null && typeof value === "object" && "$$type" in value && value.$$type === NOT_FOUND_MARKER;
 }
@@ -62,11 +79,48 @@ function collectElements(children, result) {
     }
     return;
   }
-  if (isMatchMarker(children) || isNotFoundMarker(children)) {
+  if (isMatchMarker(children) || isSelfMarker(children) || isNotFoundMarker(children)) {
     result.push(children);
   }
 }
+
+// child.children is a getter — read it INSIDE the JSX expression so Solid
+// creates a reactive dependency. Pulling it into a variable freezes the
+// value at template-build time and breaks Suspense fallback transitions
+// (lazy() resolution).
+function renderMatch(child) {
+  return child.fallback === undefined ? child.children : createComponent(Suspense, {
+    get fallback() {
+      return child.fallback;
+    },
+    get children() {
+      return child.children;
+    }
+  });
+}
+function renderSelf(self) {
+  return self.fallback === undefined ? self.children : createComponent(Suspense, {
+    get fallback() {
+      return self.fallback;
+    },
+    get children() {
+      return self.children;
+    }
+  });
+}
+function processMatchChild(child, routeName, nodeName) {
+  const {
+    segment,
+    exact
+  } = child;
+  const fullSegmentName = nodeName ? `${nodeName}.${segment}` : segment;
+  if (!isSegmentMatch(routeName, fullSegmentName, exact)) {
+    return null;
+  }
+  return renderMatch(child);
+}
 function buildRenderList(elements, routeName, nodeName) {
+  let selfMarker = null;
   let notFoundChildren = null;
   let activeMatchFound = false;
   const rendered = [];
@@ -75,28 +129,25 @@ function buildRenderList(elements, routeName, nodeName) {
       notFoundChildren = child.children;
       continue;
     }
-    if (activeMatchFound) {
+    if (isSelfMarker(child)) {
+      selfMarker ??= child;
       continue;
     }
-    const {
-      segment,
-      exact,
-      fallback
-    } = child;
-    const fullSegmentName = nodeName ? `${nodeName}.${segment}` : segment;
-    if (!isSegmentMatch(routeName, fullSegmentName, exact)) {
+    if (activeMatchFound) {
       continue;
     }
-    activeMatchFound = true;
-    rendered.push(fallback === undefined ? child.children : createComponent(Suspense, {
-      fallback: fallback,
-      get children() {
-        return child.children;
-      }
-    }));
+    const matchRendered = processMatchChild(child, routeName, nodeName);
+    if (matchRendered !== null) {
+      activeMatchFound = true;
+      rendered.push(matchRendered);
+    }
   }
-  if (!activeMatchFound && routeName === UNKNOWN_ROUTE && notFoundChildren !== null) {
-    rendered.push(notFoundChildren);
+  if (!activeMatchFound) {
+    if (selfMarker !== null && routeName === nodeName) {
+      rendered.push(renderSelf(selfMarker));
+    } else if (routeName === UNKNOWN_ROUTE && notFoundChildren !== null) {
+      rendered.push(notFoundChildren);
+    }
   }
   return rendered;
 }
@@ -155,6 +206,7 @@ function RouteViewRoot(props) {
 RouteViewRoot.displayName = "RouteView";
 const RouteView = Object.assign(RouteViewRoot, {
   Match,
+  Self,
   NotFound
 });
 

package/dist/types/components/RouteView/RouteView.d.ts

@@ -1,4 +1,4 @@
-import { Match, NotFound } from "./components";
+import { Match, NotFound, Self } from "./components";
 import type { RouteViewProps } from "./types";
 import type { JSX } from "solid-js";
 declare function RouteViewRoot(props: Readonly<RouteViewProps>): JSX.Element;
@@ -7,7 +7,8 @@ declare namespace RouteViewRoot {
 }
 export declare const RouteView: typeof RouteViewRoot & {
     Match: typeof Match;
+    Self: typeof Self;
     NotFound: typeof NotFound;
 };
-export type { RouteViewProps, MatchProps as RouteViewMatchProps, NotFoundProps as RouteViewNotFoundProps, } from "./types";
+export type { RouteViewProps, MatchProps as RouteViewMatchProps, SelfProps as RouteViewSelfProps, NotFoundProps as RouteViewNotFoundProps, } from "./types";
 //# sourceMappingURL=RouteView.d.ts.map

package/dist/types/components/RouteView/RouteView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RouteView.d.ts","sourceRoot":"","sources":["../../../../src/components/RouteView/RouteView.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAK/C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAEpC,iBAAS,aAAa,CAAC,KAAK,EAAE,QAAQ,CAAC,cAAc,CAAC,GAAG,GAAG,CAAC,OAAO,CAgCnE;kBAhCQ,aAAa;;;AAoCtB,eAAO,MAAM,SAAS;;;CAAoD,CAAC;AAE3E,YAAY,EACV,cAAc,EACd,UAAU,IAAI,mBAAmB,EACjC,aAAa,IAAI,sBAAsB,GACxC,MAAM,SAAS,CAAC"}
+{"version":3,"file":"RouteView.d.ts","sourceRoot":"","sources":["../../../../src/components/RouteView/RouteView.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAKrD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAEpC,iBAAS,aAAa,CAAC,KAAK,EAAE,QAAQ,CAAC,cAAc,CAAC,GAAG,GAAG,CAAC,OAAO,CAgCnE;kBAhCQ,aAAa;;;AAoCtB,eAAO,MAAM,SAAS;;;;CAIpB,CAAC;AAEH,YAAY,EACV,cAAc,EACd,UAAU,IAAI,mBAAmB,EACjC,SAAS,IAAI,kBAAkB,EAC/B,aAAa,IAAI,sBAAsB,GACxC,MAAM,SAAS,CAAC"}

package/dist/types/components/RouteView/components.d.ts

@@ -1,6 +1,7 @@
-import type { MatchProps, NotFoundProps } from "./types";
+import type { MatchProps, NotFoundProps, SelfProps } from "./types";
 import type { JSX } from "solid-js";
 export declare const MATCH_MARKER: unique symbol;
+export declare const SELF_MARKER: unique symbol;
 export declare const NOT_FOUND_MARKER: unique symbol;
 export interface MatchMarker {
     $$type: typeof MATCH_MARKER;
@@ -9,15 +10,24 @@ export interface MatchMarker {
     fallback?: JSX.Element;
     children: JSX.Element;
 }
+export interface SelfMarker {
+    $$type: typeof SELF_MARKER;
+    fallback?: JSX.Element;
+    children: JSX.Element;
+}
 export interface NotFoundMarker {
     $$type: typeof NOT_FOUND_MARKER;
     children: JSX.Element;
 }
-export type RouteViewMarker = MatchMarker | NotFoundMarker;
+export type RouteViewMarker = MatchMarker | SelfMarker | NotFoundMarker;
 export declare function Match(props: MatchProps): JSX.Element;
 export declare namespace Match {
     var displayName: string;
 }
+export declare function Self(props: SelfProps): JSX.Element;
+export declare namespace Self {
+    var displayName: string;
+}
 export declare function NotFound(props: NotFoundProps): JSX.Element;
 export declare namespace NotFound {
     var displayName: string;

package/dist/types/components/RouteView/components.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../../../src/components/RouteView/components.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAIpC,eAAO,MAAM,YAAY,eAA4B,CAAC;AAEtD,eAAO,MAAM,gBAAgB,eAA+B,CAAC;AAE7D,MAAM,WAAW,WAAW;IAC1B,MAAM,EAAE,OAAO,YAAY,CAAC;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,OAAO,gBAAgB,CAAC;IAChC,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;CACvB;AAED,MAAM,MAAM,eAAe,GAAG,WAAW,GAAG,cAAc,CAAC;AAE3D,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,GAAG,GAAG,CAAC,OAAO,CAepD;yBAfe,KAAK;;;AAmBrB,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,GAAG,CAAC,OAAO,CAU1D;yBAVe,QAAQ"}
+{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../../../src/components/RouteView/components.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACpE,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAIpC,eAAO,MAAM,YAAY,eAA4B,CAAC;AAEtD,eAAO,MAAM,WAAW,eAA2B,CAAC;AAEpD,eAAO,MAAM,gBAAgB,eAA+B,CAAC;AAE7D,MAAM,WAAW,WAAW;IAC1B,MAAM,EAAE,OAAO,YAAY,CAAC;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,UAAU;IACzB,MAAM,EAAE,OAAO,WAAW,CAAC;IAC3B,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,OAAO,gBAAgB,CAAC;IAChC,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;CACvB;AAED,MAAM,MAAM,eAAe,GAAG,WAAW,GAAG,UAAU,GAAG,cAAc,CAAC;AAExE,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,GAAG,GAAG,CAAC,OAAO,CAepD;yBAfe,KAAK;;;AAmBrB,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,CAWlD;yBAXe,IAAI;;;AAepB,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,GAAG,CAAC,OAAO,CAU1D;yBAVe,QAAQ"}

package/dist/types/components/RouteView/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../src/components/RouteView/helpers.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAGV,eAAe,EAChB,MAAM,cAAc,CAAC;AACtB,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAEpC,wBAAgB,cAAc,CAC5B,SAAS,EAAE,MAAM,EACjB,eAAe,EAAE,MAAM,EACvB,KAAK,EAAE,OAAO,GACb,OAAO,CAMT;AAoBD,wBAAgB,eAAe,CAC7B,QAAQ,EAAE,OAAO,EACjB,MAAM,EAAE,eAAe,EAAE,GACxB,IAAI,CAgBN;AAED,wBAAgB,eAAe,CAC7B,QAAQ,EAAE,eAAe,EAAE,EAC3B,SAAS,EAAE,MAAM,EACjB,QAAQ,EAAE,MAAM,GACf,GAAG,CAAC,OAAO,EAAE,CAyCf"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../src/components/RouteView/helpers.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAGV,eAAe,EAEhB,MAAM,cAAc,CAAC;AACtB,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAEpC,wBAAgB,cAAc,CAC5B,SAAS,EAAE,MAAM,EACjB,eAAe,EAAE,MAAM,EACvB,KAAK,EAAE,OAAO,GACb,OAAO,CAMT;AA6BD,wBAAgB,eAAe,CAC7B,QAAQ,EAAE,OAAO,EACjB,MAAM,EAAE,eAAe,EAAE,GACxB,IAAI,CAoBN;AAqCD,wBAAgB,eAAe,CAC7B,QAAQ,EAAE,eAAe,EAAE,EAC3B,SAAS,EAAE,MAAM,EACjB,QAAQ,EAAE,MAAM,GACf,GAAG,CAAC,OAAO,EAAE,CAsCf"}

package/dist/types/components/RouteView/index.d.ts

@@ -1,3 +1,3 @@
 export { RouteView } from "./RouteView";
-export type { RouteViewProps, RouteViewMatchProps, RouteViewNotFoundProps, } from "./RouteView";
+export type { RouteViewProps, RouteViewMatchProps, RouteViewSelfProps, RouteViewNotFoundProps, } from "./RouteView";
 //# sourceMappingURL=index.d.ts.map

package/dist/types/components/RouteView/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/RouteView/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,YAAY,EACV,cAAc,EACd,mBAAmB,EACnB,sBAAsB,GACvB,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/RouteView/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,YAAY,EACV,cAAc,EACd,mBAAmB,EACnB,kBAAkB,EAClB,sBAAsB,GACvB,MAAM,aAAa,CAAC"}

package/dist/types/components/RouteView/types.d.ts

@@ -9,6 +9,12 @@ export interface MatchProps {
     readonly fallback?: JSX.Element;
     readonly children: JSX.Element;
 }
+export interface SelfProps {
+    /** Fallback content while children are suspended. */
+    readonly fallback?: JSX.Element;
+    /** Content to render when the active route name equals the parent RouteView's nodeName. */
+    readonly children: JSX.Element;
+}
 export interface NotFoundProps {
     readonly children: JSX.Element;
 }

package/dist/types/components/RouteView/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/RouteView/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAEpC,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;CAChC;AAED,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAChC,QAAQ,CAAC,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;CAChC;AAED,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;CAChC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/RouteView/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAEpC,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;CAChC;AAED,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAChC,QAAQ,CAAC,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;CAChC;AAED,MAAM,WAAW,SAAS;IACxB,qDAAqD;IACrD,QAAQ,CAAC,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAChC,2FAA2F;IAC3F,QAAQ,CAAC,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;CAChC;AAED,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;CAChC"}

package/dist/types/index.d.ts

@@ -17,7 +17,7 @@ export { createStoreFromSource } from "./createStoreFromSource";
 export type { LinkProps, RouteState } from "./types";
 export type { RouterErrorBoundaryProps } from "./components/RouterErrorBoundary";
 export type { LinkDirectiveOptions } from "./directives/link";
-export type { RouteViewProps, RouteViewMatchProps, RouteViewNotFoundProps, } from "./components/RouteView";
+export type { RouteViewProps, RouteViewMatchProps, RouteViewSelfProps, RouteViewNotFoundProps, } from "./components/RouteView";
 export type { Navigator } from "@real-router/core";
 export type { RouterTransitionSnapshot } from "@real-router/sources";
 //# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAEnD,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AAEvE,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAE9C,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAEpD,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAEtD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE5C,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAEpD,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAEtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAE9D,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAElE,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAExD,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAElE,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAEhE,YAAY,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErD,YAAY,EAAE,wBAAwB,EAAE,MAAM,kCAAkC,CAAC;AAEjF,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAE9D,YAAY,EACV,cAAc,EACd,mBAAmB,EACnB,sBAAsB,GACvB,MAAM,wBAAwB,CAAC;AAEhC,YAAY,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEnD,YAAY,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAEnD,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AAEvE,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAE9C,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAEpD,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAEtD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE5C,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAEpD,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAEtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAE9D,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAElE,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAExD,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAElE,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAEhE,YAAY,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErD,YAAY,EAAE,wBAAwB,EAAE,MAAM,kCAAkC,CAAC;AAEjF,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAE9D,YAAY,EACV,cAAc,EACd,mBAAmB,EACnB,kBAAkB,EAClB,sBAAsB,GACvB,MAAM,wBAAwB,CAAC;AAEhC,YAAY,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEnD,YAAY,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@real-router/solid",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "type": "commonjs",
   "description": "Solid.js integration for Real-Router",
   "main": "./dist/cjs/index.js",
@@ -51,7 +51,7 @@
   "license": "MIT",
   "sideEffects": false,
   "dependencies": {
-    "@real-router/core": "^0.50.0",
+    "@real-router/core": "^0.50.1",
     "@real-router/route-utils": "^0.2.1",
     "@real-router/sources": "^0.7.2"
   },
@@ -71,7 +71,7 @@
     "solid-js": "1.9.12",
     "vite-plugin-solid": "2.11.11",
     "vitest": "4.1.0",
-    "@real-router/browser-plugin": "^0.14.0"
+    "@real-router/browser-plugin": "^0.15.1"
   },
   "peerDependencies": {
     "solid-js": ">=1.7.0"

package/src/components/RouteView/RouteView.tsx

@@ -1,6 +1,6 @@
 import { children as resolveChildren, createMemo } from "solid-js";
 
-import { Match, NotFound } from "./components";
+import { Match, NotFound, Self } from "./components";
 import { buildRenderList, collectElements } from "./helpers";
 import { useRouteNode } from "../../hooks/useRouteNode";
 
@@ -44,10 +44,15 @@ function RouteViewRoot(props: Readonly<RouteViewProps>): JSX.Element {
 
 RouteViewRoot.displayName = "RouteView";
 
-export const RouteView = Object.assign(RouteViewRoot, { Match, NotFound });
+export const RouteView = Object.assign(RouteViewRoot, {
+  Match,
+  Self,
+  NotFound,
+});
 
 export type {
   RouteViewProps,
   MatchProps as RouteViewMatchProps,
+  SelfProps as RouteViewSelfProps,
   NotFoundProps as RouteViewNotFoundProps,
 } from "./types";

package/src/components/RouteView/components.tsx

@@ -1,10 +1,12 @@
-import type { MatchProps, NotFoundProps } from "./types";
+import type { MatchProps, NotFoundProps, SelfProps } from "./types";
 import type { JSX } from "solid-js";
 
 // Local (non-global) Symbols — Symbol.for() would expose markers to spoofing
 // via the global Symbol registry. See Gotchas section "RouteView Marker Objects".
 export const MATCH_MARKER = Symbol("RouteView.Match");
 
+export const SELF_MARKER = Symbol("RouteView.Self");
+
 export const NOT_FOUND_MARKER = Symbol("RouteView.NotFound");
 
 export interface MatchMarker {
@@ -15,12 +17,18 @@ export interface MatchMarker {
   children: JSX.Element;
 }
 
+export interface SelfMarker {
+  $$type: typeof SELF_MARKER;
+  fallback?: JSX.Element;
+  children: JSX.Element;
+}
+
 export interface NotFoundMarker {
   $$type: typeof NOT_FOUND_MARKER;
   children: JSX.Element;
 }
 
-export type RouteViewMarker = MatchMarker | NotFoundMarker;
+export type RouteViewMarker = MatchMarker | SelfMarker | NotFoundMarker;
 
 export function Match(props: MatchProps): JSX.Element {
   const result: MatchMarker = {
@@ -41,6 +49,21 @@ export function Match(props: MatchProps): JSX.Element {
 
 Match.displayName = "RouteView.Match";
 
+export function Self(props: SelfProps): JSX.Element {
+  const result: SelfMarker = {
+    $$type: SELF_MARKER,
+    fallback: props.fallback,
+    get children(): JSX.Element {
+      return props.children;
+    },
+  };
+
+  // See Match for the marker-pattern rationale.
+  return result as unknown as JSX.Element;
+}
+
+Self.displayName = "RouteView.Self";
+
 export function NotFound(props: NotFoundProps): JSX.Element {
   const result: NotFoundMarker = {
     $$type: NOT_FOUND_MARKER,

package/src/components/RouteView/helpers.tsx

@@ -2,12 +2,13 @@ import { UNKNOWN_ROUTE } from "@real-router/core";
 import { startsWithSegment } from "@real-router/route-utils";
 import { Suspense } from "solid-js";
 
-import { MATCH_MARKER, NOT_FOUND_MARKER } from "./components";
+import { MATCH_MARKER, NOT_FOUND_MARKER, SELF_MARKER } from "./components";
 
 import type {
   MatchMarker,
   NotFoundMarker,
   RouteViewMarker,
+  SelfMarker,
 } from "./components";
 import type { JSX } from "solid-js";
 
@@ -32,6 +33,15 @@ function isMatchMarker(value: unknown): value is MatchMarker {
   );
 }
 
+function isSelfMarker(value: unknown): value is SelfMarker {
+  return (
+    value != null &&
+    typeof value === "object" &&
+    "$$type" in value &&
+    value.$$type === SELF_MARKER
+  );
+}
+
 function isNotFoundMarker(value: unknown): value is NotFoundMarker {
   return (
     value != null &&
@@ -57,16 +67,56 @@ export function collectElements(
     return;
   }
 
-  if (isMatchMarker(children) || isNotFoundMarker(children)) {
+  if (
+    isMatchMarker(children) ||
+    isSelfMarker(children) ||
+    isNotFoundMarker(children)
+  ) {
     result.push(children);
   }
 }
 
+// child.children is a getter — read it INSIDE the JSX expression so Solid
+// creates a reactive dependency. Pulling it into a variable freezes the
+// value at template-build time and breaks Suspense fallback transitions
+// (lazy() resolution).
+function renderMatch(child: MatchMarker): JSX.Element {
+  return child.fallback === undefined ? (
+    child.children
+  ) : (
+    <Suspense fallback={child.fallback}>{child.children}</Suspense>
+  );
+}
+
+function renderSelf(self: SelfMarker): JSX.Element {
+  return self.fallback === undefined ? (
+    self.children
+  ) : (
+    <Suspense fallback={self.fallback}>{self.children}</Suspense>
+  );
+}
+
+function processMatchChild(
+  child: MatchMarker,
+  routeName: string,
+  nodeName: string,
+): JSX.Element | null {
+  const { segment, exact } = child;
+  const fullSegmentName = nodeName ? `${nodeName}.${segment}` : segment;
+
+  if (!isSegmentMatch(routeName, fullSegmentName, exact)) {
+    return null;
+  }
+
+  return renderMatch(child);
+}
+
 export function buildRenderList(
   elements: RouteViewMarker[],
   routeName: string,
   nodeName: string,
 ): JSX.Element[] {
+  let selfMarker: SelfMarker | null = null;
   let notFoundChildren: JSX.Element | null = null;
   let activeMatchFound = false;
   const rendered: JSX.Element[] = [];
@@ -77,33 +127,29 @@ export function buildRenderList(
       continue;
     }
 
-    if (activeMatchFound) {
+    if (isSelfMarker(child)) {
+      selfMarker ??= child;
       continue;
     }
 
-    const { segment, exact, fallback } = child;
-    const fullSegmentName = nodeName ? `${nodeName}.${segment}` : segment;
-
-    if (!isSegmentMatch(routeName, fullSegmentName, exact)) {
+    if (activeMatchFound) {
       continue;
     }
 
-    activeMatchFound = true;
-    rendered.push(
-      fallback === undefined ? (
-        child.children
-      ) : (
-        <Suspense fallback={fallback}>{child.children}</Suspense>
-      ),
-    );
+    const matchRendered = processMatchChild(child, routeName, nodeName);
+
+    if (matchRendered !== null) {
+      activeMatchFound = true;
+      rendered.push(matchRendered);
+    }
   }
 
-  if (
-    !activeMatchFound &&
-    routeName === UNKNOWN_ROUTE &&
-    notFoundChildren !== null
-  ) {
-    rendered.push(notFoundChildren);
+  if (!activeMatchFound) {
+    if (selfMarker !== null && routeName === nodeName) {
+      rendered.push(renderSelf(selfMarker));
+    } else if (routeName === UNKNOWN_ROUTE && notFoundChildren !== null) {
+      rendered.push(notFoundChildren);
+    }
   }
 
   return rendered;

package/src/components/RouteView/index.ts

@@ -3,5 +3,6 @@ export { RouteView } from "./RouteView";
 export type {
   RouteViewProps,
   RouteViewMatchProps,
+  RouteViewSelfProps,
   RouteViewNotFoundProps,
 } from "./RouteView";

package/src/components/RouteView/types.ts

@@ -12,6 +12,13 @@ export interface MatchProps {
   readonly children: JSX.Element;
 }
 
+export interface SelfProps {
+  /** Fallback content while children are suspended. */
+  readonly fallback?: JSX.Element;
+  /** Content to render when the active route name equals the parent RouteView's nodeName. */
+  readonly children: JSX.Element;
+}
+
 export interface NotFoundProps {
   readonly children: JSX.Element;
 }

package/src/index.tsx

@@ -39,6 +39,7 @@ export type { LinkDirectiveOptions } from "./directives/link";
 export type {
   RouteViewProps,
   RouteViewMatchProps,
+  RouteViewSelfProps,
   RouteViewNotFoundProps,
 } from "./components/RouteView";