@real-router/react 0.19.0 → 0.20.0

package/README.md

@@ -310,9 +310,9 @@ Full documentation: [Wiki](https://github.com/greydragon888/real-router/wiki)
 
 ## Examples
 
-14 runnable examples — each is a standalone Vite app. Run: `cd examples/react/basic && pnpm dev`
+14 runnable examples — each is a standalone Vite app. Run: `cd examples/web/react/basic && pnpm dev`
 
-[basic](../../examples/react/basic) · [nested-routes](../../examples/react/nested-routes) · [auth-guards](../../examples/react/auth-guards) · [data-loading](../../examples/react/data-loading) · [lazy-loading](../../examples/react/lazy-loading) · [async-guards](../../examples/react/async-guards) · [hash-routing](../../examples/react/hash-routing) · [persistent-params](../../examples/react/persistent-params) · [error-handling](../../examples/react/error-handling) · [dynamic-routes](../../examples/react/dynamic-routes) · [keep-alive](../../examples/react/keep-alive) · [legacy-entry](../../examples/react/legacy-entry) · [hmr](../../examples/react/hmr) · [combined](../../examples/react/combined)
+[basic](../../examples/web/react/basic) · [nested-routes](../../examples/web/react/nested-routes) · [auth-guards](../../examples/web/react/auth-guards) · [data-loading](../../examples/web/react/data-loading) · [lazy-loading](../../examples/web/react/lazy-loading) · [async-guards](../../examples/web/react/async-guards) · [hash-routing](../../examples/web/react/hash-routing) · [persistent-params](../../examples/web/react/persistent-params) · [error-handling](../../examples/web/react/error-handling) · [dynamic-routes](../../examples/web/react/dynamic-routes) · [keep-alive](../../examples/web/react/keep-alive) · [legacy-entry](../../examples/web/react/legacy-entry) · [hmr](../../examples/web/react/hmr) · [combined](../../examples/web/react/combined)
 
 ## Related Packages
 

package/dist/cjs/index.d.ts

@@ -8,7 +8,7 @@ import { RouterTransitionSnapshot } from "@real-router/sources";
 interface RouteViewProps {
   /** Route tree node name to subscribe to. "" for root. */
   readonly nodeName: string;
-  /** <RouteView.Match> and <RouteView.NotFound> elements. */
+  /** <RouteView.Match>, <RouteView.Self>, and <RouteView.NotFound> elements. */
   readonly children: ReactNode;
 }
 interface MatchProps {
@@ -23,6 +23,17 @@ interface MatchProps {
   /** Content to render when matched. */
   readonly children: ReactNode;
 }
+interface SelfProps {
+  /**
+   * Fallback content to show while children are suspended.
+   *
+   * Symmetric with `<RouteView.Match fallback>` — wraps children in
+   * `<Suspense>` when defined.
+   */
+  readonly fallback?: ReactNode;
+  /** Content to render when the active route name equals the parent RouteView's nodeName. */
+  readonly children: ReactNode;
+}
 interface NotFoundProps {
   /** Content to render on UNKNOWN_ROUTE. */
   readonly children: ReactNode;
@@ -33,6 +44,10 @@ declare function Match(_props: MatchProps): null;
 declare namespace Match {
   var displayName: string;
 }
+declare function Self(_props: SelfProps): null;
+declare namespace Self {
+  var displayName: string;
+}
 declare function NotFound(_props: NotFoundProps): null;
 declare namespace NotFound {
   var displayName: string;
@@ -48,8 +63,9 @@ declare namespace RouteViewRoot {
 }
 declare const RouteView: typeof RouteViewRoot & {
   Match: typeof Match;
+  Self: typeof Self;
   NotFound: typeof NotFound;
 };
 //#endregion
-export { Link, type LinkProps, type Navigator, RouteView, type MatchProps as RouteViewMatchProps, type NotFoundProps as RouteViewNotFoundProps, type RouteViewProps, RouterErrorBoundary, type RouterErrorBoundaryProps, RouterProvider, type RouterTransitionSnapshot, useNavigator, useRoute, useRouteNode, useRouteUtils, useRouter, useRouterTransition };
+export { Link, type LinkProps, type Navigator, RouteView, type MatchProps as RouteViewMatchProps, type NotFoundProps as RouteViewNotFoundProps, type RouteViewProps, type SelfProps as RouteViewSelfProps, RouterErrorBoundary, type RouterErrorBoundaryProps, RouterProvider, type RouterTransitionSnapshot, useNavigator, useRoute, useRouteNode, useRouteUtils, useRouter, useRouterTransition };
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../../src/components/modern/RouteView/types.ts","../../src/components/modern/RouteView/components.tsx","../../src/components/modern/RouteView/RouteView.tsx"],"mappings":";;;;;;;UAEiB,cAAA;;WAEN,QAAA;;WAEA,QAAA,EAAU,SAAA;AAAA;AAAA,UAGJ,UAAA;EAPc;EAAA,SASpB,OAAA;EALmB;EAAA,SAOnB,KAAA;EAPA;EAAA,SASA,SAAA;EATmB;EAAA,SAWnB,QAAA,GAAW,SAAA;EARL;EAAA,SAUN,QAAA,EAAU,SAAA;AAAA;AAAA,UAGJ,aAAA;EAXN;EAAA,SAaA,QAAA,EAAU,SAAA;AAAA;;;iBCtBL,KAAA,CAAM,MAAA,EAAQ,UAAA;AAAA,kBAAd,KAAA;EAAA,IAAK,WAAA;AAAA;AAAA,iBAML,QAAA,CAAS,MAAA,EAAQ,aAAA;AAAA,kBAAjB,QAAA;EAAA,IAAQ,WAAA;AAAA;;;iBCCf,aAAA,CAAA;EACP,QAAA;EACA;AAAA,GACC,QAAA,CAAS,cAAA,IAAkB,YAAA;AAAA,kBAHrB,aAAA;EAAA,IAAa,WAAA;AAAA;AAAA,cA0CT,SAAA,SAAS,aAAA"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../src/components/modern/RouteView/types.ts","../../src/components/modern/RouteView/components.tsx","../../src/components/modern/RouteView/RouteView.tsx"],"mappings":";;;;;;;UAEiB,cAAA;;WAEN,QAAA;;WAEA,QAAA,EAAU,SAAA;AAAA;AAAA,UAGJ,UAAA;EAPc;EAAA,SASpB,OAAA;EALmB;EAAA,SAOnB,KAAA;EAPA;EAAA,SASA,SAAA;EATmB;EAAA,SAWnB,QAAA,GAAW,SAAA;EARL;EAAA,SAUN,QAAA,EAAU,SAAA;AAAA;AAAA,UAGJ,SAAA;EAXN;;;;;;EAAA,SAkBA,QAAA,GAAW,SAAA;EAVQ;EAAA,SAYnB,QAAA,EAAU,SAAA;AAAA;AAAA,UAGJ,aAAA;;WAEN,QAAA,EAAU,SAAA;AAAA;;;iBClCL,KAAA,CAAM,MAAA,EAAQ,UAAA;AAAA,kBAAd,KAAA;EAAA,IAAK,WAAA;AAAA;AAAA,iBAML,IAAA,CAAK,MAAA,EAAQ,SAAA;AAAA,kBAAb,IAAA;EAAA,IAAI,WAAA;AAAA;AAAA,iBAMJ,QAAA,CAAS,MAAA,EAAQ,aAAA;AAAA,kBAAjB,QAAA;EAAA,IAAQ,WAAA;AAAA;;;iBCLf,aAAA,CAAA;EACP,QAAA;EACA;AAAA,GACC,QAAA,CAAS,cAAA,IAAkB,YAAA;AAAA,kBAHrB,aAAA;EAAA,IAAa,WAAA;AAAA;AAAA,cA0CT,SAAA,SAAS,aAAA"}

package/dist/cjs/index.js

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./RouterProvider-BOWw6Z_i.js`),t=require(`./Link-CFGcNhCQ.js`);let n=require(`react`),r=require(`@real-router/core`),i=require(`@real-router/route-utils`),a=require(`react/jsx-runtime`);function o(e){return null}o.displayName=`RouteView.Match`;function s(e){return null}s.displayName=`RouteView.NotFound`;function c(e,t,n){return t===``?!1:n?e===t:(0,i.startsWithSegment)(e,t)}function l(e,t){for(let r of n.Children.toArray(e))(0,n.isValidElement)(r)&&(r.type===o||r.type===s?t.push(r):l(r.props.children,t))}function u(e,t,r,i,o){let s=o===void 0?e:(0,a.jsx)(n.Suspense,{fallback:o,children:e});return r?(0,a.jsx)(n.Activity,{mode:i,children:s},t):(0,a.jsx)(n.Fragment,{children:s},t)}function d(e,t,i,o){let l=null,d=!1,f=[];for(let n of e){if(n.type===s){l=n.props.children;continue}let{segment:e,exact:r=!1,keepAlive:a=!1,fallback:p}=n.props,m=i?`${i}.${e}`:e;!d&&c(t,m,r)?(d=!0,o.add(m),f.push(u(n.props.children,m,a,`visible`,p))):a&&o.has(m)&&f.push(u(n.props.children,m,a,`hidden`,p))}return!d&&t===r.UNKNOWN_ROUTE&&l!==null&&f.push((0,a.jsx)(n.Fragment,{children:l},`__route-view-not-found__`)),{rendered:f,activeMatchFound:d}}function f({nodeName:t,children:r}){let{route:i}=e.m(t),o=(0,n.useRef)(null);o.current??=new Set;let s=(0,n.useMemo)(()=>{let e=[];return l(r,e),e},[r]);if(!i)return null;let{rendered:c}=d(s,i.name,t,o.current);return c.length>0?(0,a.jsx)(a.Fragment,{children:c}):null}f.displayName=`RouteView`;const p=Object.assign(f,{Match:o,NotFound:s});exports.Link=t.t,exports.RouteView=p,exports.RouterErrorBoundary=e.o,exports.RouterProvider=e.t,exports.useNavigator=e.a,exports.useRoute=e.r,exports.useRouteNode=e.m,exports.useRouteUtils=e.i,exports.useRouter=e.h,exports.useRouterTransition=e.n;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./RouterProvider-BOWw6Z_i.js`),t=require(`./Link-CFGcNhCQ.js`);let n=require(`react`),r=require(`@real-router/core`),i=require(`@real-router/route-utils`),a=require(`react/jsx-runtime`);function o(e){return null}o.displayName=`RouteView.Match`;function s(e){return null}s.displayName=`RouteView.Self`;function c(e){return null}c.displayName=`RouteView.NotFound`;function l(e,t,n){return t===``?!1:n?e===t:(0,i.startsWithSegment)(e,t)}function u(e,t){for(let r of n.Children.toArray(e))(0,n.isValidElement)(r)&&(r.type===o||r.type===s||r.type===c?t.push(r):u(r.props.children,t))}function d(e,t,r,i,o){let s=o===void 0?e:(0,a.jsx)(n.Suspense,{fallback:o,children:e});return r?(0,a.jsx)(n.Activity,{mode:i,children:s},t):(0,a.jsx)(n.Fragment,{children:s},t)}function f(e,t){return e.type===c?(t.notFoundChildren=e.props.children,!0):e.type===s?(t.selfFound||=(t.selfChildren=e.props.children,t.selfFallback=e.props.fallback,!0),!0):!1}function p(e,t,n,r,i){let{segment:a,exact:o=!1,keepAlive:s=!1,fallback:c}=e.props,u=n?`${n}.${a}`:a;return!i&&l(t,u,o)?(r.add(u),{rendered:d(e.props.children,u,s,`visible`,c),matched:!0}):s&&r.has(u)?{rendered:d(e.props.children,u,s,`hidden`,c),matched:!1}:{rendered:null,matched:!1}}function m(e,t,i,o){if(o.selfFound&&t===i){e.push(d(o.selfChildren,`__route-view-self__`,!1,`visible`,o.selfFallback));return}t===r.UNKNOWN_ROUTE&&o.notFoundChildren!==null&&e.push((0,a.jsx)(n.Fragment,{children:o.notFoundChildren},`__route-view-not-found__`))}function h(e,t,n,r){let i={selfChildren:null,selfFallback:void 0,selfFound:!1,notFoundChildren:null},a=!1,o=[];for(let s of e){if(f(s,i))continue;let e=p(s,t,n,r,a);e.matched&&(a=!0),e.rendered!==null&&o.push(e.rendered)}return a||m(o,t,n,i),{rendered:o,activeMatchFound:a}}function g({nodeName:t,children:r}){let{route:i}=e.m(t),o=(0,n.useRef)(null);o.current??=new Set;let s=(0,n.useMemo)(()=>{let e=[];return u(r,e),e},[r]);if(!i)return null;let{rendered:c}=h(s,i.name,t,o.current);return c.length>0?(0,a.jsx)(a.Fragment,{children:c}):null}g.displayName=`RouteView`;const _=Object.assign(g,{Match:o,Self:s,NotFound:c});exports.Link=t.t,exports.RouteView=_,exports.RouterErrorBoundary=e.o,exports.RouterProvider=e.t,exports.useNavigator=e.a,exports.useRoute=e.r,exports.useRouteNode=e.m,exports.useRouteUtils=e.i,exports.useRouter=e.h,exports.useRouterTransition=e.n;
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Children","Suspense","Activity","Fragment","UNKNOWN_ROUTE","useRouteNode"],"sources":["../../src/components/modern/RouteView/components.tsx","../../src/components/modern/RouteView/helpers.tsx","../../src/components/modern/RouteView/RouteView.tsx"],"sourcesContent":["import type { MatchProps, NotFoundProps } from \"./types\";\n\nexport function Match(_props: MatchProps): null {\n  return null;\n}\n\nMatch.displayName = \"RouteView.Match\";\n\nexport function NotFound(_props: NotFoundProps): null {\n  return null;\n}\n\nNotFound.displayName = \"RouteView.NotFound\";\n","import { UNKNOWN_ROUTE } from \"@real-router/core\";\nimport { startsWithSegment } from \"@real-router/route-utils\";\nimport { Activity, Children, Fragment, Suspense, isValidElement } from \"react\";\n\nimport { Match, NotFound } from \"./components\";\n\nimport type { MatchProps, NotFoundProps } from \"./types\";\nimport type { ReactElement, ReactNode } from \"react\";\n\nfunction isSegmentMatch(\n  routeName: string,\n  fullSegmentName: string,\n  exact: boolean,\n): boolean {\n  if (fullSegmentName === \"\") {\n    return false;\n  }\n\n  if (exact) {\n    return routeName === fullSegmentName;\n  }\n\n  return startsWithSegment(routeName, fullSegmentName);\n}\n\nexport function collectElements(\n  children: ReactNode,\n  result: ReactElement[],\n): void {\n  // eslint-disable-next-line @eslint-react/no-children-to-array\n  for (const child of Children.toArray(children)) {\n    if (!isValidElement(child)) {\n      continue;\n    }\n\n    if (child.type === Match || child.type === NotFound) {\n      result.push(child);\n    } else {\n      collectElements(\n        (child.props as { readonly children: ReactNode }).children,\n        result,\n      );\n    }\n  }\n}\n\nfunction renderMatchElement(\n  matchChildren: ReactNode,\n  fullSegmentName: string,\n  keepAlive: boolean,\n  mode: \"visible\" | \"hidden\",\n  fallback?: ReactNode,\n): ReactElement {\n  const content =\n    fallback === undefined ? (\n      matchChildren\n    ) : (\n      <Suspense fallback={fallback}>{matchChildren}</Suspense>\n    );\n\n  if (keepAlive) {\n    return (\n      <Activity mode={mode} key={fullSegmentName}>\n        {content}\n      </Activity>\n    );\n  }\n\n  return <Fragment key={fullSegmentName}>{content}</Fragment>;\n}\n\nexport function buildRenderList(\n  elements: ReactElement[],\n  routeName: string,\n  nodeName: string,\n  hasBeenActivated: Set<string>,\n): { rendered: ReactElement[]; activeMatchFound: boolean } {\n  let notFoundChildren: ReactNode = null;\n  let activeMatchFound = false;\n  const rendered: ReactElement[] = [];\n\n  for (const child of elements) {\n    if (child.type === NotFound) {\n      notFoundChildren = (child.props as NotFoundProps).children;\n      continue;\n    }\n\n    const {\n      segment,\n      exact = false,\n      keepAlive = false,\n      fallback,\n    } = child.props as MatchProps;\n    const fullSegmentName = nodeName ? `${nodeName}.${segment}` : segment;\n    const isActive =\n      !activeMatchFound && isSegmentMatch(routeName, fullSegmentName, exact);\n\n    if (isActive) {\n      activeMatchFound = true;\n      hasBeenActivated.add(fullSegmentName);\n      rendered.push(\n        renderMatchElement(\n          (child.props as MatchProps).children,\n          fullSegmentName,\n          keepAlive,\n          \"visible\",\n          fallback,\n        ),\n      );\n    } else if (keepAlive && hasBeenActivated.has(fullSegmentName)) {\n      rendered.push(\n        renderMatchElement(\n          (child.props as MatchProps).children,\n          fullSegmentName,\n          keepAlive,\n          \"hidden\",\n          fallback,\n        ),\n      );\n    }\n  }\n\n  if (\n    !activeMatchFound &&\n    routeName === UNKNOWN_ROUTE &&\n    notFoundChildren !== null\n  ) {\n    rendered.push(\n      <Fragment key=\"__route-view-not-found__\">{notFoundChildren}</Fragment>,\n    );\n  }\n\n  return { rendered, activeMatchFound };\n}\n","import { useMemo, useRef } from \"react\";\n\nimport { Match, NotFound } from \"./components\";\nimport { buildRenderList, collectElements } from \"./helpers\";\nimport { useRouteNode } from \"../../../hooks/useRouteNode\";\n\nimport type { RouteViewProps } from \"./types\";\nimport type { ReactElement } from \"react\";\n\nfunction RouteViewRoot({\n  nodeName,\n  children,\n}: Readonly<RouteViewProps>): ReactElement | null {\n  const { route } = useRouteNode(nodeName);\n  const hasBeenActivatedRef = useRef<Set<string> | null>(null);\n\n  // eslint-disable-next-line @eslint-react/refs -- lazy init: assign once when null to avoid `new Set()` allocation on every render\n  hasBeenActivatedRef.current ??= new Set();\n\n  // Skip the Children.toArray + collectElements traversal when children\n  // reference is unchanged. children only changes when the parent re-renders\n  // with a new ReactNode, so this caches the steady-state.\n  const elements = useMemo(() => {\n    const collected: ReactElement[] = [];\n\n    collectElements(children, collected);\n\n    return collected;\n  }, [children]);\n\n  if (!route) {\n    return null;\n  }\n\n  const { rendered } = buildRenderList(\n    elements,\n    route.name,\n    nodeName,\n    // eslint-disable-next-line @eslint-react/refs -- stable Set ref read for keepAlive tracking (never reassigned)\n    hasBeenActivatedRef.current,\n  );\n\n  if (rendered.length > 0) {\n    return <>{rendered}</>;\n  }\n\n  return null;\n}\n\nRouteViewRoot.displayName = \"RouteView\";\n\nexport const RouteView = Object.assign(RouteViewRoot, { Match, NotFound });\n\nexport type {\n  RouteViewProps,\n  MatchProps as RouteViewMatchProps,\n  NotFoundProps as RouteViewNotFoundProps,\n} from \"./types\";\n"],"mappings":"8QAEA,SAAgB,EAAM,EAA0B,CAC9C,OAAO,KAGT,EAAM,YAAc,kBAEpB,SAAgB,EAAS,EAA6B,CACpD,OAAO,KAGT,EAAS,YAAc,qBCHvB,SAAS,EACP,EACA,EACA,EACS,CAST,OARI,IAAoB,GACf,GAGL,EACK,IAAc,GAGvB,EAAA,EAAA,mBAAyB,EAAW,EAAgB,CAGtD,SAAgB,EACd,EACA,EACM,CAEN,IAAK,IAAM,KAASA,EAAAA,SAAS,QAAQ,EAAS,EACxC,EAAA,EAAA,gBAAgB,EAAM,GAItB,EAAM,OAAS,GAAS,EAAM,OAAS,EACzC,EAAO,KAAK,EAAM,CAElB,EACG,EAAM,MAA2C,SAClD,EACD,EAKP,SAAS,EACP,EACA,EACA,EACA,EACA,EACc,CACd,IAAM,EACJ,IAAa,IAAA,GACX,GAEA,EAAA,EAAA,KAACC,EAAAA,SAAD,CAAoB,oBAAW,EAAyB,CAAA,CAW5D,OARI,GAEA,EAAA,EAAA,KAACC,EAAAA,SAAD,CAAgB,gBACb,EACQ,CAFgB,EAEhB,EAIR,EAAA,EAAA,KAACC,EAAAA,SAAD,CAAA,SAAiC,EAAmB,CAArC,EAAqC,CAG7D,SAAgB,EACd,EACA,EACA,EACA,EACyD,CACzD,IAAI,EAA8B,KAC9B,EAAmB,GACjB,EAA2B,EAAE,CAEnC,IAAK,IAAM,KAAS,EAAU,CAC5B,GAAI,EAAM,OAAS,EAAU,CAC3B,EAAoB,EAAM,MAAwB,SAClD,SAGF,GAAM,CACJ,UACA,QAAQ,GACR,YAAY,GACZ,YACE,EAAM,MACJ,EAAkB,EAAW,GAAG,EAAS,GAAG,IAAY,EAE5D,CAAC,GAAoB,EAAe,EAAW,EAAiB,EAAM,EAGtE,EAAmB,GACnB,EAAiB,IAAI,EAAgB,CACrC,EAAS,KACP,EACG,EAAM,MAAqB,SAC5B,EACA,EACA,UACA,EACD,CACF,EACQ,GAAa,EAAiB,IAAI,EAAgB,EAC3D,EAAS,KACP,EACG,EAAM,MAAqB,SAC5B,EACA,EACA,SACA,EACD,CACF,CAcL,MATE,CAAC,GACD,IAAcC,EAAAA,eACd,IAAqB,MAErB,EAAS,MACP,EAAA,EAAA,KAACD,EAAAA,SAAD,CAAA,SAA0C,EAA4B,CAAxD,2BAAwD,CACvE,CAGI,CAAE,WAAU,mBAAkB,CC3HvC,SAAS,EAAc,CACrB,WACA,YACgD,CAChD,GAAM,CAAE,SAAUE,EAAAA,EAAa,EAAS,CAClC,GAAA,EAAA,EAAA,QAAiD,KAAK,CAG5D,EAAoB,UAAY,IAAI,IAKpC,IAAM,GAAA,EAAA,EAAA,aAAyB,CAC7B,IAAM,EAA4B,EAAE,CAIpC,OAFA,EAAgB,EAAU,EAAU,CAE7B,GACN,CAAC,EAAS,CAAC,CAEd,GAAI,CAAC,EACH,OAAO,KAGT,GAAM,CAAE,YAAa,EACnB,EACA,EAAM,KACN,EAEA,EAAoB,QACrB,CAMD,OAJI,EAAS,OAAS,GACb,EAAA,EAAA,KAAA,EAAA,SAAA,CAAA,SAAG,EAAY,CAAA,CAGjB,KAGT,EAAc,YAAc,YAE5B,MAAa,EAAY,OAAO,OAAO,EAAe,CAAE,QAAO,WAAU,CAAC"}
+{"version":3,"file":"index.js","names":["Children","Suspense","Activity","Fragment","UNKNOWN_ROUTE","useRouteNode"],"sources":["../../src/components/modern/RouteView/components.tsx","../../src/components/modern/RouteView/helpers.tsx","../../src/components/modern/RouteView/RouteView.tsx"],"sourcesContent":["import type { MatchProps, NotFoundProps, SelfProps } from \"./types\";\n\nexport function Match(_props: MatchProps): null {\n  return null;\n}\n\nMatch.displayName = \"RouteView.Match\";\n\nexport function Self(_props: SelfProps): null {\n  return null;\n}\n\nSelf.displayName = \"RouteView.Self\";\n\nexport function NotFound(_props: NotFoundProps): null {\n  return null;\n}\n\nNotFound.displayName = \"RouteView.NotFound\";\n","import { UNKNOWN_ROUTE } from \"@real-router/core\";\nimport { startsWithSegment } from \"@real-router/route-utils\";\nimport { Activity, Children, Fragment, Suspense, isValidElement } from \"react\";\n\nimport { Match, NotFound, Self } from \"./components\";\n\nimport type { MatchProps, NotFoundProps, SelfProps } from \"./types\";\nimport type { ReactElement, ReactNode } from \"react\";\n\ninterface FallbackSlots {\n  selfChildren: ReactNode;\n  selfFallback: ReactNode | undefined;\n  selfFound: boolean;\n  notFoundChildren: ReactNode;\n}\n\nfunction isSegmentMatch(\n  routeName: string,\n  fullSegmentName: string,\n  exact: boolean,\n): boolean {\n  if (fullSegmentName === \"\") {\n    return false;\n  }\n\n  if (exact) {\n    return routeName === fullSegmentName;\n  }\n\n  return startsWithSegment(routeName, fullSegmentName);\n}\n\nexport function collectElements(\n  children: ReactNode,\n  result: ReactElement[],\n): void {\n  // eslint-disable-next-line @eslint-react/no-children-to-array\n  for (const child of Children.toArray(children)) {\n    if (!isValidElement(child)) {\n      continue;\n    }\n\n    if (\n      child.type === Match ||\n      child.type === Self ||\n      child.type === NotFound\n    ) {\n      result.push(child);\n    } else {\n      collectElements(\n        (child.props as { readonly children: ReactNode }).children,\n        result,\n      );\n    }\n  }\n}\n\nfunction renderSlotElement(\n  slotChildren: ReactNode,\n  key: string,\n  keepAlive: boolean,\n  mode: \"visible\" | \"hidden\",\n  fallback?: ReactNode,\n): ReactElement {\n  const content =\n    fallback === undefined ? (\n      slotChildren\n    ) : (\n      <Suspense fallback={fallback}>{slotChildren}</Suspense>\n    );\n\n  if (keepAlive) {\n    return (\n      <Activity mode={mode} key={key}>\n        {content}\n      </Activity>\n    );\n  }\n\n  return <Fragment key={key}>{content}</Fragment>;\n}\n\nfunction recordFallback(child: ReactElement, slots: FallbackSlots): boolean {\n  if (child.type === NotFound) {\n    slots.notFoundChildren = (child.props as NotFoundProps).children;\n\n    return true;\n  }\n\n  if (child.type === Self) {\n    // First-wins: subsequent <Self> elements are ignored, mirroring NotFound.\n    if (!slots.selfFound) {\n      slots.selfChildren = (child.props as SelfProps).children;\n      slots.selfFallback = (child.props as SelfProps).fallback;\n      slots.selfFound = true;\n    }\n\n    return true;\n  }\n\n  return false;\n}\n\nfunction processMatch(\n  child: ReactElement,\n  routeName: string,\n  nodeName: string,\n  hasBeenActivated: Set<string>,\n  alreadyActive: boolean,\n): { rendered: ReactElement | null; matched: boolean } {\n  const {\n    segment,\n    exact = false,\n    keepAlive = false,\n    fallback,\n  } = child.props as MatchProps;\n  const fullSegmentName = nodeName ? `${nodeName}.${segment}` : segment;\n  const isActive =\n    !alreadyActive && isSegmentMatch(routeName, fullSegmentName, exact);\n\n  if (isActive) {\n    hasBeenActivated.add(fullSegmentName);\n\n    return {\n      rendered: renderSlotElement(\n        (child.props as MatchProps).children,\n        fullSegmentName,\n        keepAlive,\n        \"visible\",\n        fallback,\n      ),\n      matched: true,\n    };\n  }\n\n  if (keepAlive && hasBeenActivated.has(fullSegmentName)) {\n    return {\n      rendered: renderSlotElement(\n        (child.props as MatchProps).children,\n        fullSegmentName,\n        keepAlive,\n        \"hidden\",\n        fallback,\n      ),\n      matched: false,\n    };\n  }\n\n  return { rendered: null, matched: false };\n}\n\nfunction appendFallback(\n  rendered: ReactElement[],\n  routeName: string,\n  nodeName: string,\n  slots: FallbackSlots,\n): void {\n  if (slots.selfFound && routeName === nodeName) {\n    rendered.push(\n      renderSlotElement(\n        slots.selfChildren,\n        \"__route-view-self__\",\n        false,\n        \"visible\",\n        slots.selfFallback,\n      ),\n    );\n\n    return;\n  }\n\n  if (routeName === UNKNOWN_ROUTE && slots.notFoundChildren !== null) {\n    rendered.push(\n      <Fragment key=\"__route-view-not-found__\">\n        {slots.notFoundChildren}\n      </Fragment>,\n    );\n  }\n}\n\nexport function buildRenderList(\n  elements: ReactElement[],\n  routeName: string,\n  nodeName: string,\n  hasBeenActivated: Set<string>,\n): { rendered: ReactElement[]; activeMatchFound: boolean } {\n  const slots: FallbackSlots = {\n    selfChildren: null,\n    selfFallback: undefined,\n    selfFound: false,\n    notFoundChildren: null,\n  };\n  let activeMatchFound = false;\n  const rendered: ReactElement[] = [];\n\n  for (const child of elements) {\n    if (recordFallback(child, slots)) {\n      continue;\n    }\n\n    const result = processMatch(\n      child,\n      routeName,\n      nodeName,\n      hasBeenActivated,\n      activeMatchFound,\n    );\n\n    if (result.matched) {\n      activeMatchFound = true;\n    }\n\n    if (result.rendered !== null) {\n      rendered.push(result.rendered);\n    }\n  }\n\n  if (!activeMatchFound) {\n    appendFallback(rendered, routeName, nodeName, slots);\n  }\n\n  return { rendered, activeMatchFound };\n}\n","import { useMemo, useRef } from \"react\";\n\nimport { Match, NotFound, Self } from \"./components\";\nimport { buildRenderList, collectElements } from \"./helpers\";\nimport { useRouteNode } from \"../../../hooks/useRouteNode\";\n\nimport type { RouteViewProps } from \"./types\";\nimport type { ReactElement } from \"react\";\n\nfunction RouteViewRoot({\n  nodeName,\n  children,\n}: Readonly<RouteViewProps>): ReactElement | null {\n  const { route } = useRouteNode(nodeName);\n  const hasBeenActivatedRef = useRef<Set<string> | null>(null);\n\n  // eslint-disable-next-line @eslint-react/refs -- lazy init: assign once when null to avoid `new Set()` allocation on every render\n  hasBeenActivatedRef.current ??= new Set();\n\n  // Skip the Children.toArray + collectElements traversal when children\n  // reference is unchanged. children only changes when the parent re-renders\n  // with a new ReactNode, so this caches the steady-state.\n  const elements = useMemo(() => {\n    const collected: ReactElement[] = [];\n\n    collectElements(children, collected);\n\n    return collected;\n  }, [children]);\n\n  if (!route) {\n    return null;\n  }\n\n  const { rendered } = buildRenderList(\n    elements,\n    route.name,\n    nodeName,\n    // eslint-disable-next-line @eslint-react/refs -- stable Set ref read for keepAlive tracking (never reassigned)\n    hasBeenActivatedRef.current,\n  );\n\n  if (rendered.length > 0) {\n    return <>{rendered}</>;\n  }\n\n  return null;\n}\n\nRouteViewRoot.displayName = \"RouteView\";\n\nexport const RouteView = Object.assign(RouteViewRoot, {\n  Match,\n  Self,\n  NotFound,\n});\n\nexport type {\n  RouteViewProps,\n  MatchProps as RouteViewMatchProps,\n  SelfProps as RouteViewSelfProps,\n  NotFoundProps as RouteViewNotFoundProps,\n} from \"./types\";\n"],"mappings":"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"}

package/dist/esm/index.d.mts

@@ -8,7 +8,7 @@ import { RouterTransitionSnapshot } from "@real-router/sources";
 interface RouteViewProps {
   /** Route tree node name to subscribe to. "" for root. */
   readonly nodeName: string;
-  /** <RouteView.Match> and <RouteView.NotFound> elements. */
+  /** <RouteView.Match>, <RouteView.Self>, and <RouteView.NotFound> elements. */
   readonly children: ReactNode;
 }
 interface MatchProps {
@@ -23,6 +23,17 @@ interface MatchProps {
   /** Content to render when matched. */
   readonly children: ReactNode;
 }
+interface SelfProps {
+  /**
+   * Fallback content to show while children are suspended.
+   *
+   * Symmetric with `<RouteView.Match fallback>` — wraps children in
+   * `<Suspense>` when defined.
+   */
+  readonly fallback?: ReactNode;
+  /** Content to render when the active route name equals the parent RouteView's nodeName. */
+  readonly children: ReactNode;
+}
 interface NotFoundProps {
   /** Content to render on UNKNOWN_ROUTE. */
   readonly children: ReactNode;
@@ -33,6 +44,10 @@ declare function Match(_props: MatchProps): null;
 declare namespace Match {
   var displayName: string;
 }
+declare function Self(_props: SelfProps): null;
+declare namespace Self {
+  var displayName: string;
+}
 declare function NotFound(_props: NotFoundProps): null;
 declare namespace NotFound {
   var displayName: string;
@@ -48,8 +63,9 @@ declare namespace RouteViewRoot {
 }
 declare const RouteView: typeof RouteViewRoot & {
   Match: typeof Match;
+  Self: typeof Self;
   NotFound: typeof NotFound;
 };
 //#endregion
-export { Link, type LinkProps, type Navigator, RouteView, type MatchProps as RouteViewMatchProps, type NotFoundProps as RouteViewNotFoundProps, type RouteViewProps, RouterErrorBoundary, type RouterErrorBoundaryProps, RouterProvider, type RouterTransitionSnapshot, useNavigator, useRoute, useRouteNode, useRouteUtils, useRouter, useRouterTransition };
+export { Link, type LinkProps, type Navigator, RouteView, type MatchProps as RouteViewMatchProps, type NotFoundProps as RouteViewNotFoundProps, type RouteViewProps, type SelfProps as RouteViewSelfProps, RouterErrorBoundary, type RouterErrorBoundaryProps, RouterProvider, type RouterTransitionSnapshot, useNavigator, useRoute, useRouteNode, useRouteUtils, useRouter, useRouterTransition };
 //# sourceMappingURL=index.d.mts.map

package/dist/esm/index.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.mts","names":[],"sources":["../../src/components/modern/RouteView/types.ts","../../src/components/modern/RouteView/components.tsx","../../src/components/modern/RouteView/RouteView.tsx"],"mappings":";;;;;;;UAEiB,cAAA;;WAEN,QAAA;;WAEA,QAAA,EAAU,SAAA;AAAA;AAAA,UAGJ,UAAA;EAPc;EAAA,SASpB,OAAA;EALmB;EAAA,SAOnB,KAAA;EAPA;EAAA,SASA,SAAA;EATmB;EAAA,SAWnB,QAAA,GAAW,SAAA;EARL;EAAA,SAUN,QAAA,EAAU,SAAA;AAAA;AAAA,UAGJ,aAAA;EAXN;EAAA,SAaA,QAAA,EAAU,SAAA;AAAA;;;iBCtBL,KAAA,CAAM,MAAA,EAAQ,UAAA;AAAA,kBAAd,KAAA;EAAA,IAAK,WAAA;AAAA;AAAA,iBAML,QAAA,CAAS,MAAA,EAAQ,aAAA;AAAA,kBAAjB,QAAA;EAAA,IAAQ,WAAA;AAAA;;;iBCCf,aAAA,CAAA;EACP,QAAA;EACA;AAAA,GACC,QAAA,CAAS,cAAA,IAAkB,YAAA;AAAA,kBAHrB,aAAA;EAAA,IAAa,WAAA;AAAA;AAAA,cA0CT,SAAA,SAAS,aAAA"}
+{"version":3,"file":"index.d.mts","names":[],"sources":["../../src/components/modern/RouteView/types.ts","../../src/components/modern/RouteView/components.tsx","../../src/components/modern/RouteView/RouteView.tsx"],"mappings":";;;;;;;UAEiB,cAAA;;WAEN,QAAA;;WAEA,QAAA,EAAU,SAAA;AAAA;AAAA,UAGJ,UAAA;EAPc;EAAA,SASpB,OAAA;EALmB;EAAA,SAOnB,KAAA;EAPA;EAAA,SASA,SAAA;EATmB;EAAA,SAWnB,QAAA,GAAW,SAAA;EARL;EAAA,SAUN,QAAA,EAAU,SAAA;AAAA;AAAA,UAGJ,SAAA;EAXN;;;;;;EAAA,SAkBA,QAAA,GAAW,SAAA;EAVQ;EAAA,SAYnB,QAAA,EAAU,SAAA;AAAA;AAAA,UAGJ,aAAA;;WAEN,QAAA,EAAU,SAAA;AAAA;;;iBClCL,KAAA,CAAM,MAAA,EAAQ,UAAA;AAAA,kBAAd,KAAA;EAAA,IAAK,WAAA;AAAA;AAAA,iBAML,IAAA,CAAK,MAAA,EAAQ,SAAA;AAAA,kBAAb,IAAA;EAAA,IAAI,WAAA;AAAA;AAAA,iBAMJ,QAAA,CAAS,MAAA,EAAQ,aAAA;AAAA,kBAAjB,QAAA;EAAA,IAAQ,WAAA;AAAA;;;iBCLf,aAAA,CAAA;EACP,QAAA;EACA;AAAA,GACC,QAAA,CAAS,cAAA,IAAkB,YAAA;AAAA,kBAHrB,aAAA;EAAA,IAAa,WAAA;AAAA;AAAA,cA0CT,SAAA,SAAS,aAAA"}

package/dist/esm/index.mjs

@@ -1,2 +1,2 @@
-import{a as e,h as t,i as n,m as r,n as i,o as a,r as o,t as s}from"./RouterProvider-Cx0t2IIF.mjs";import{t as c}from"./Link-coFvvMgW.mjs";import{Activity as l,Children as u,Fragment as d,Suspense as f,isValidElement as p,useMemo as m,useRef as h}from"react";import{UNKNOWN_ROUTE as g}from"@real-router/core";import{startsWithSegment as _}from"@real-router/route-utils";import{Fragment as v,jsx as y}from"react/jsx-runtime";function b(e){return null}b.displayName=`RouteView.Match`;function x(e){return null}x.displayName=`RouteView.NotFound`;function S(e,t,n){return t===``?!1:n?e===t:_(e,t)}function C(e,t){for(let n of u.toArray(e))p(n)&&(n.type===b||n.type===x?t.push(n):C(n.props.children,t))}function w(e,t,n,r,i){let a=i===void 0?e:y(f,{fallback:i,children:e});return n?y(l,{mode:r,children:a},t):y(d,{children:a},t)}function T(e,t,n,r){let i=null,a=!1,o=[];for(let s of e){if(s.type===x){i=s.props.children;continue}let{segment:e,exact:c=!1,keepAlive:l=!1,fallback:u}=s.props,d=n?`${n}.${e}`:e;!a&&S(t,d,c)?(a=!0,r.add(d),o.push(w(s.props.children,d,l,`visible`,u))):l&&r.has(d)&&o.push(w(s.props.children,d,l,`hidden`,u))}return!a&&t===g&&i!==null&&o.push(y(d,{children:i},`__route-view-not-found__`)),{rendered:o,activeMatchFound:a}}function E({nodeName:e,children:t}){let{route:n}=r(e),i=h(null);i.current??=new Set;let a=m(()=>{let e=[];return C(t,e),e},[t]);if(!n)return null;let{rendered:o}=T(a,n.name,e,i.current);return o.length>0?y(v,{children:o}):null}E.displayName=`RouteView`;const D=Object.assign(E,{Match:b,NotFound:x});export{c as Link,D as RouteView,a as RouterErrorBoundary,s as RouterProvider,e as useNavigator,o as useRoute,r as useRouteNode,n as useRouteUtils,t as useRouter,i as useRouterTransition};
+import{a as e,h as t,i as n,m as r,n as i,o as a,r as o,t as s}from"./RouterProvider-Cx0t2IIF.mjs";import{t as c}from"./Link-coFvvMgW.mjs";import{Activity as l,Children as u,Fragment as d,Suspense as f,isValidElement as p,useMemo as m,useRef as h}from"react";import{UNKNOWN_ROUTE as g}from"@real-router/core";import{startsWithSegment as _}from"@real-router/route-utils";import{Fragment as v,jsx as y}from"react/jsx-runtime";function b(e){return null}b.displayName=`RouteView.Match`;function x(e){return null}x.displayName=`RouteView.Self`;function S(e){return null}S.displayName=`RouteView.NotFound`;function C(e,t,n){return t===``?!1:n?e===t:_(e,t)}function w(e,t){for(let n of u.toArray(e))p(n)&&(n.type===b||n.type===x||n.type===S?t.push(n):w(n.props.children,t))}function T(e,t,n,r,i){let a=i===void 0?e:y(f,{fallback:i,children:e});return n?y(l,{mode:r,children:a},t):y(d,{children:a},t)}function E(e,t){return e.type===S?(t.notFoundChildren=e.props.children,!0):e.type===x?(t.selfFound||=(t.selfChildren=e.props.children,t.selfFallback=e.props.fallback,!0),!0):!1}function D(e,t,n,r,i){let{segment:a,exact:o=!1,keepAlive:s=!1,fallback:c}=e.props,l=n?`${n}.${a}`:a;return!i&&C(t,l,o)?(r.add(l),{rendered:T(e.props.children,l,s,`visible`,c),matched:!0}):s&&r.has(l)?{rendered:T(e.props.children,l,s,`hidden`,c),matched:!1}:{rendered:null,matched:!1}}function O(e,t,n,r){if(r.selfFound&&t===n){e.push(T(r.selfChildren,`__route-view-self__`,!1,`visible`,r.selfFallback));return}t===g&&r.notFoundChildren!==null&&e.push(y(d,{children:r.notFoundChildren},`__route-view-not-found__`))}function k(e,t,n,r){let i={selfChildren:null,selfFallback:void 0,selfFound:!1,notFoundChildren:null},a=!1,o=[];for(let s of e){if(E(s,i))continue;let e=D(s,t,n,r,a);e.matched&&(a=!0),e.rendered!==null&&o.push(e.rendered)}return a||O(o,t,n,i),{rendered:o,activeMatchFound:a}}function A({nodeName:e,children:t}){let{route:n}=r(e),i=h(null);i.current??=new Set;let a=m(()=>{let e=[];return w(t,e),e},[t]);if(!n)return null;let{rendered:o}=k(a,n.name,e,i.current);return o.length>0?y(v,{children:o}):null}A.displayName=`RouteView`;const j=Object.assign(A,{Match:b,Self:x,NotFound:S});export{c as Link,j as RouteView,a as RouterErrorBoundary,s as RouterProvider,e as useNavigator,o as useRoute,r as useRouteNode,n as useRouteUtils,t as useRouter,i as useRouterTransition};
 //# sourceMappingURL=index.mjs.map

package/dist/esm/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../src/components/modern/RouteView/components.tsx","../../src/components/modern/RouteView/helpers.tsx","../../src/components/modern/RouteView/RouteView.tsx"],"sourcesContent":["import type { MatchProps, NotFoundProps } from \"./types\";\n\nexport function Match(_props: MatchProps): null {\n  return null;\n}\n\nMatch.displayName = \"RouteView.Match\";\n\nexport function NotFound(_props: NotFoundProps): null {\n  return null;\n}\n\nNotFound.displayName = \"RouteView.NotFound\";\n","import { UNKNOWN_ROUTE } from \"@real-router/core\";\nimport { startsWithSegment } from \"@real-router/route-utils\";\nimport { Activity, Children, Fragment, Suspense, isValidElement } from \"react\";\n\nimport { Match, NotFound } from \"./components\";\n\nimport type { MatchProps, NotFoundProps } from \"./types\";\nimport type { ReactElement, ReactNode } from \"react\";\n\nfunction isSegmentMatch(\n  routeName: string,\n  fullSegmentName: string,\n  exact: boolean,\n): boolean {\n  if (fullSegmentName === \"\") {\n    return false;\n  }\n\n  if (exact) {\n    return routeName === fullSegmentName;\n  }\n\n  return startsWithSegment(routeName, fullSegmentName);\n}\n\nexport function collectElements(\n  children: ReactNode,\n  result: ReactElement[],\n): void {\n  // eslint-disable-next-line @eslint-react/no-children-to-array\n  for (const child of Children.toArray(children)) {\n    if (!isValidElement(child)) {\n      continue;\n    }\n\n    if (child.type === Match || child.type === NotFound) {\n      result.push(child);\n    } else {\n      collectElements(\n        (child.props as { readonly children: ReactNode }).children,\n        result,\n      );\n    }\n  }\n}\n\nfunction renderMatchElement(\n  matchChildren: ReactNode,\n  fullSegmentName: string,\n  keepAlive: boolean,\n  mode: \"visible\" | \"hidden\",\n  fallback?: ReactNode,\n): ReactElement {\n  const content =\n    fallback === undefined ? (\n      matchChildren\n    ) : (\n      <Suspense fallback={fallback}>{matchChildren}</Suspense>\n    );\n\n  if (keepAlive) {\n    return (\n      <Activity mode={mode} key={fullSegmentName}>\n        {content}\n      </Activity>\n    );\n  }\n\n  return <Fragment key={fullSegmentName}>{content}</Fragment>;\n}\n\nexport function buildRenderList(\n  elements: ReactElement[],\n  routeName: string,\n  nodeName: string,\n  hasBeenActivated: Set<string>,\n): { rendered: ReactElement[]; activeMatchFound: boolean } {\n  let notFoundChildren: ReactNode = null;\n  let activeMatchFound = false;\n  const rendered: ReactElement[] = [];\n\n  for (const child of elements) {\n    if (child.type === NotFound) {\n      notFoundChildren = (child.props as NotFoundProps).children;\n      continue;\n    }\n\n    const {\n      segment,\n      exact = false,\n      keepAlive = false,\n      fallback,\n    } = child.props as MatchProps;\n    const fullSegmentName = nodeName ? `${nodeName}.${segment}` : segment;\n    const isActive =\n      !activeMatchFound && isSegmentMatch(routeName, fullSegmentName, exact);\n\n    if (isActive) {\n      activeMatchFound = true;\n      hasBeenActivated.add(fullSegmentName);\n      rendered.push(\n        renderMatchElement(\n          (child.props as MatchProps).children,\n          fullSegmentName,\n          keepAlive,\n          \"visible\",\n          fallback,\n        ),\n      );\n    } else if (keepAlive && hasBeenActivated.has(fullSegmentName)) {\n      rendered.push(\n        renderMatchElement(\n          (child.props as MatchProps).children,\n          fullSegmentName,\n          keepAlive,\n          \"hidden\",\n          fallback,\n        ),\n      );\n    }\n  }\n\n  if (\n    !activeMatchFound &&\n    routeName === UNKNOWN_ROUTE &&\n    notFoundChildren !== null\n  ) {\n    rendered.push(\n      <Fragment key=\"__route-view-not-found__\">{notFoundChildren}</Fragment>,\n    );\n  }\n\n  return { rendered, activeMatchFound };\n}\n","import { useMemo, useRef } from \"react\";\n\nimport { Match, NotFound } from \"./components\";\nimport { buildRenderList, collectElements } from \"./helpers\";\nimport { useRouteNode } from \"../../../hooks/useRouteNode\";\n\nimport type { RouteViewProps } from \"./types\";\nimport type { ReactElement } from \"react\";\n\nfunction RouteViewRoot({\n  nodeName,\n  children,\n}: Readonly<RouteViewProps>): ReactElement | null {\n  const { route } = useRouteNode(nodeName);\n  const hasBeenActivatedRef = useRef<Set<string> | null>(null);\n\n  // eslint-disable-next-line @eslint-react/refs -- lazy init: assign once when null to avoid `new Set()` allocation on every render\n  hasBeenActivatedRef.current ??= new Set();\n\n  // Skip the Children.toArray + collectElements traversal when children\n  // reference is unchanged. children only changes when the parent re-renders\n  // with a new ReactNode, so this caches the steady-state.\n  const elements = useMemo(() => {\n    const collected: ReactElement[] = [];\n\n    collectElements(children, collected);\n\n    return collected;\n  }, [children]);\n\n  if (!route) {\n    return null;\n  }\n\n  const { rendered } = buildRenderList(\n    elements,\n    route.name,\n    nodeName,\n    // eslint-disable-next-line @eslint-react/refs -- stable Set ref read for keepAlive tracking (never reassigned)\n    hasBeenActivatedRef.current,\n  );\n\n  if (rendered.length > 0) {\n    return <>{rendered}</>;\n  }\n\n  return null;\n}\n\nRouteViewRoot.displayName = \"RouteView\";\n\nexport const RouteView = Object.assign(RouteViewRoot, { Match, NotFound });\n\nexport type {\n  RouteViewProps,\n  MatchProps as RouteViewMatchProps,\n  NotFoundProps as RouteViewNotFoundProps,\n} from \"./types\";\n"],"mappings":"waAEA,SAAgB,EAAM,EAA0B,CAC9C,OAAO,KAGT,EAAM,YAAc,kBAEpB,SAAgB,EAAS,EAA6B,CACpD,OAAO,KAGT,EAAS,YAAc,qBCHvB,SAAS,EACP,EACA,EACA,EACS,CAST,OARI,IAAoB,GACf,GAGL,EACK,IAAc,EAGhB,EAAkB,EAAW,EAAgB,CAGtD,SAAgB,EACd,EACA,EACM,CAEN,IAAK,IAAM,KAAS,EAAS,QAAQ,EAAS,CACvC,EAAe,EAAM,GAItB,EAAM,OAAS,GAAS,EAAM,OAAS,EACzC,EAAO,KAAK,EAAM,CAElB,EACG,EAAM,MAA2C,SAClD,EACD,EAKP,SAAS,EACP,EACA,EACA,EACA,EACA,EACc,CACd,IAAM,EACJ,IAAa,IAAA,GACX,EAEA,EAAC,EAAD,CAAoB,oBAAW,EAAyB,CAAA,CAW5D,OARI,EAEA,EAAC,EAAD,CAAgB,gBACb,EACQ,CAFgB,EAEhB,CAIR,EAAC,EAAD,CAAA,SAAiC,EAAmB,CAArC,EAAqC,CAG7D,SAAgB,EACd,EACA,EACA,EACA,EACyD,CACzD,IAAI,EAA8B,KAC9B,EAAmB,GACjB,EAA2B,EAAE,CAEnC,IAAK,IAAM,KAAS,EAAU,CAC5B,GAAI,EAAM,OAAS,EAAU,CAC3B,EAAoB,EAAM,MAAwB,SAClD,SAGF,GAAM,CACJ,UACA,QAAQ,GACR,YAAY,GACZ,YACE,EAAM,MACJ,EAAkB,EAAW,GAAG,EAAS,GAAG,IAAY,EAE5D,CAAC,GAAoB,EAAe,EAAW,EAAiB,EAAM,EAGtE,EAAmB,GACnB,EAAiB,IAAI,EAAgB,CACrC,EAAS,KACP,EACG,EAAM,MAAqB,SAC5B,EACA,EACA,UACA,EACD,CACF,EACQ,GAAa,EAAiB,IAAI,EAAgB,EAC3D,EAAS,KACP,EACG,EAAM,MAAqB,SAC5B,EACA,EACA,SACA,EACD,CACF,CAcL,MATE,CAAC,GACD,IAAc,GACd,IAAqB,MAErB,EAAS,KACP,EAAC,EAAD,CAAA,SAA0C,EAA4B,CAAxD,2BAAwD,CACvE,CAGI,CAAE,WAAU,mBAAkB,CC3HvC,SAAS,EAAc,CACrB,WACA,YACgD,CAChD,GAAM,CAAE,SAAU,EAAa,EAAS,CAClC,EAAsB,EAA2B,KAAK,CAG5D,EAAoB,UAAY,IAAI,IAKpC,IAAM,EAAW,MAAc,CAC7B,IAAM,EAA4B,EAAE,CAIpC,OAFA,EAAgB,EAAU,EAAU,CAE7B,GACN,CAAC,EAAS,CAAC,CAEd,GAAI,CAAC,EACH,OAAO,KAGT,GAAM,CAAE,YAAa,EACnB,EACA,EAAM,KACN,EAEA,EAAoB,QACrB,CAMD,OAJI,EAAS,OAAS,EACb,EAAA,EAAA,CAAA,SAAG,EAAY,CAAA,CAGjB,KAGT,EAAc,YAAc,YAE5B,MAAa,EAAY,OAAO,OAAO,EAAe,CAAE,QAAO,WAAU,CAAC"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/components/modern/RouteView/components.tsx","../../src/components/modern/RouteView/helpers.tsx","../../src/components/modern/RouteView/RouteView.tsx"],"sourcesContent":["import type { MatchProps, NotFoundProps, SelfProps } from \"./types\";\n\nexport function Match(_props: MatchProps): null {\n  return null;\n}\n\nMatch.displayName = \"RouteView.Match\";\n\nexport function Self(_props: SelfProps): null {\n  return null;\n}\n\nSelf.displayName = \"RouteView.Self\";\n\nexport function NotFound(_props: NotFoundProps): null {\n  return null;\n}\n\nNotFound.displayName = \"RouteView.NotFound\";\n","import { UNKNOWN_ROUTE } from \"@real-router/core\";\nimport { startsWithSegment } from \"@real-router/route-utils\";\nimport { Activity, Children, Fragment, Suspense, isValidElement } from \"react\";\n\nimport { Match, NotFound, Self } from \"./components\";\n\nimport type { MatchProps, NotFoundProps, SelfProps } from \"./types\";\nimport type { ReactElement, ReactNode } from \"react\";\n\ninterface FallbackSlots {\n  selfChildren: ReactNode;\n  selfFallback: ReactNode | undefined;\n  selfFound: boolean;\n  notFoundChildren: ReactNode;\n}\n\nfunction isSegmentMatch(\n  routeName: string,\n  fullSegmentName: string,\n  exact: boolean,\n): boolean {\n  if (fullSegmentName === \"\") {\n    return false;\n  }\n\n  if (exact) {\n    return routeName === fullSegmentName;\n  }\n\n  return startsWithSegment(routeName, fullSegmentName);\n}\n\nexport function collectElements(\n  children: ReactNode,\n  result: ReactElement[],\n): void {\n  // eslint-disable-next-line @eslint-react/no-children-to-array\n  for (const child of Children.toArray(children)) {\n    if (!isValidElement(child)) {\n      continue;\n    }\n\n    if (\n      child.type === Match ||\n      child.type === Self ||\n      child.type === NotFound\n    ) {\n      result.push(child);\n    } else {\n      collectElements(\n        (child.props as { readonly children: ReactNode }).children,\n        result,\n      );\n    }\n  }\n}\n\nfunction renderSlotElement(\n  slotChildren: ReactNode,\n  key: string,\n  keepAlive: boolean,\n  mode: \"visible\" | \"hidden\",\n  fallback?: ReactNode,\n): ReactElement {\n  const content =\n    fallback === undefined ? (\n      slotChildren\n    ) : (\n      <Suspense fallback={fallback}>{slotChildren}</Suspense>\n    );\n\n  if (keepAlive) {\n    return (\n      <Activity mode={mode} key={key}>\n        {content}\n      </Activity>\n    );\n  }\n\n  return <Fragment key={key}>{content}</Fragment>;\n}\n\nfunction recordFallback(child: ReactElement, slots: FallbackSlots): boolean {\n  if (child.type === NotFound) {\n    slots.notFoundChildren = (child.props as NotFoundProps).children;\n\n    return true;\n  }\n\n  if (child.type === Self) {\n    // First-wins: subsequent <Self> elements are ignored, mirroring NotFound.\n    if (!slots.selfFound) {\n      slots.selfChildren = (child.props as SelfProps).children;\n      slots.selfFallback = (child.props as SelfProps).fallback;\n      slots.selfFound = true;\n    }\n\n    return true;\n  }\n\n  return false;\n}\n\nfunction processMatch(\n  child: ReactElement,\n  routeName: string,\n  nodeName: string,\n  hasBeenActivated: Set<string>,\n  alreadyActive: boolean,\n): { rendered: ReactElement | null; matched: boolean } {\n  const {\n    segment,\n    exact = false,\n    keepAlive = false,\n    fallback,\n  } = child.props as MatchProps;\n  const fullSegmentName = nodeName ? `${nodeName}.${segment}` : segment;\n  const isActive =\n    !alreadyActive && isSegmentMatch(routeName, fullSegmentName, exact);\n\n  if (isActive) {\n    hasBeenActivated.add(fullSegmentName);\n\n    return {\n      rendered: renderSlotElement(\n        (child.props as MatchProps).children,\n        fullSegmentName,\n        keepAlive,\n        \"visible\",\n        fallback,\n      ),\n      matched: true,\n    };\n  }\n\n  if (keepAlive && hasBeenActivated.has(fullSegmentName)) {\n    return {\n      rendered: renderSlotElement(\n        (child.props as MatchProps).children,\n        fullSegmentName,\n        keepAlive,\n        \"hidden\",\n        fallback,\n      ),\n      matched: false,\n    };\n  }\n\n  return { rendered: null, matched: false };\n}\n\nfunction appendFallback(\n  rendered: ReactElement[],\n  routeName: string,\n  nodeName: string,\n  slots: FallbackSlots,\n): void {\n  if (slots.selfFound && routeName === nodeName) {\n    rendered.push(\n      renderSlotElement(\n        slots.selfChildren,\n        \"__route-view-self__\",\n        false,\n        \"visible\",\n        slots.selfFallback,\n      ),\n    );\n\n    return;\n  }\n\n  if (routeName === UNKNOWN_ROUTE && slots.notFoundChildren !== null) {\n    rendered.push(\n      <Fragment key=\"__route-view-not-found__\">\n        {slots.notFoundChildren}\n      </Fragment>,\n    );\n  }\n}\n\nexport function buildRenderList(\n  elements: ReactElement[],\n  routeName: string,\n  nodeName: string,\n  hasBeenActivated: Set<string>,\n): { rendered: ReactElement[]; activeMatchFound: boolean } {\n  const slots: FallbackSlots = {\n    selfChildren: null,\n    selfFallback: undefined,\n    selfFound: false,\n    notFoundChildren: null,\n  };\n  let activeMatchFound = false;\n  const rendered: ReactElement[] = [];\n\n  for (const child of elements) {\n    if (recordFallback(child, slots)) {\n      continue;\n    }\n\n    const result = processMatch(\n      child,\n      routeName,\n      nodeName,\n      hasBeenActivated,\n      activeMatchFound,\n    );\n\n    if (result.matched) {\n      activeMatchFound = true;\n    }\n\n    if (result.rendered !== null) {\n      rendered.push(result.rendered);\n    }\n  }\n\n  if (!activeMatchFound) {\n    appendFallback(rendered, routeName, nodeName, slots);\n  }\n\n  return { rendered, activeMatchFound };\n}\n","import { useMemo, useRef } from \"react\";\n\nimport { Match, NotFound, Self } from \"./components\";\nimport { buildRenderList, collectElements } from \"./helpers\";\nimport { useRouteNode } from \"../../../hooks/useRouteNode\";\n\nimport type { RouteViewProps } from \"./types\";\nimport type { ReactElement } from \"react\";\n\nfunction RouteViewRoot({\n  nodeName,\n  children,\n}: Readonly<RouteViewProps>): ReactElement | null {\n  const { route } = useRouteNode(nodeName);\n  const hasBeenActivatedRef = useRef<Set<string> | null>(null);\n\n  // eslint-disable-next-line @eslint-react/refs -- lazy init: assign once when null to avoid `new Set()` allocation on every render\n  hasBeenActivatedRef.current ??= new Set();\n\n  // Skip the Children.toArray + collectElements traversal when children\n  // reference is unchanged. children only changes when the parent re-renders\n  // with a new ReactNode, so this caches the steady-state.\n  const elements = useMemo(() => {\n    const collected: ReactElement[] = [];\n\n    collectElements(children, collected);\n\n    return collected;\n  }, [children]);\n\n  if (!route) {\n    return null;\n  }\n\n  const { rendered } = buildRenderList(\n    elements,\n    route.name,\n    nodeName,\n    // eslint-disable-next-line @eslint-react/refs -- stable Set ref read for keepAlive tracking (never reassigned)\n    hasBeenActivatedRef.current,\n  );\n\n  if (rendered.length > 0) {\n    return <>{rendered}</>;\n  }\n\n  return null;\n}\n\nRouteViewRoot.displayName = \"RouteView\";\n\nexport const RouteView = Object.assign(RouteViewRoot, {\n  Match,\n  Self,\n  NotFound,\n});\n\nexport type {\n  RouteViewProps,\n  MatchProps as RouteViewMatchProps,\n  SelfProps as RouteViewSelfProps,\n  NotFoundProps as RouteViewNotFoundProps,\n} from \"./types\";\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@real-router/react",
-  "version": "0.19.0",
+  "version": "0.20.0",
   "type": "commonjs",
   "description": "React integration for Real-Router",
   "main": "./dist/cjs/index.js",
@@ -76,7 +76,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"
   },
@@ -88,7 +88,7 @@
     "ink": "7.0.1",
     "ink-testing-library": "4.0.0",
     "vitest-react-profiler": "1.12.0",
-    "@real-router/browser-plugin": "^0.14.0"
+    "@real-router/browser-plugin": "^0.15.1"
   },
   "peerDependencies": {
     "@types/react": ">=18.0.0",

package/src/components/modern/RouteView/RouteView.tsx

@@ -1,6 +1,6 @@
 import { useMemo, useRef } from "react";
 
-import { Match, NotFound } from "./components";
+import { Match, NotFound, Self } from "./components";
 import { buildRenderList, collectElements } from "./helpers";
 import { useRouteNode } from "../../../hooks/useRouteNode";
 
@@ -49,10 +49,15 @@ function RouteViewRoot({
 
 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/modern/RouteView/components.tsx

@@ -1,4 +1,4 @@
-import type { MatchProps, NotFoundProps } from "./types";
+import type { MatchProps, NotFoundProps, SelfProps } from "./types";
 
 export function Match(_props: MatchProps): null {
   return null;
@@ -6,6 +6,12 @@ export function Match(_props: MatchProps): null {
 
 Match.displayName = "RouteView.Match";
 
+export function Self(_props: SelfProps): null {
+  return null;
+}
+
+Self.displayName = "RouteView.Self";
+
 export function NotFound(_props: NotFoundProps): null {
   return null;
 }

package/src/components/modern/RouteView/helpers.tsx

@@ -2,11 +2,18 @@ import { UNKNOWN_ROUTE } from "@real-router/core";
 import { startsWithSegment } from "@real-router/route-utils";
 import { Activity, Children, Fragment, Suspense, isValidElement } from "react";
 
-import { Match, NotFound } from "./components";
+import { Match, NotFound, Self } from "./components";
 
-import type { MatchProps, NotFoundProps } from "./types";
+import type { MatchProps, NotFoundProps, SelfProps } from "./types";
 import type { ReactElement, ReactNode } from "react";
 
+interface FallbackSlots {
+  selfChildren: ReactNode;
+  selfFallback: ReactNode | undefined;
+  selfFound: boolean;
+  notFoundChildren: ReactNode;
+}
+
 function isSegmentMatch(
   routeName: string,
   fullSegmentName: string,
@@ -33,7 +40,11 @@ export function collectElements(
       continue;
     }
 
-    if (child.type === Match || child.type === NotFound) {
+    if (
+      child.type === Match ||
+      child.type === Self ||
+      child.type === NotFound
+    ) {
       result.push(child);
     } else {
       collectElements(
@@ -44,29 +55,127 @@ export function collectElements(
   }
 }
 
-function renderMatchElement(
-  matchChildren: ReactNode,
-  fullSegmentName: string,
+function renderSlotElement(
+  slotChildren: ReactNode,
+  key: string,
   keepAlive: boolean,
   mode: "visible" | "hidden",
   fallback?: ReactNode,
 ): ReactElement {
   const content =
     fallback === undefined ? (
-      matchChildren
+      slotChildren
     ) : (
-      <Suspense fallback={fallback}>{matchChildren}</Suspense>
+      <Suspense fallback={fallback}>{slotChildren}</Suspense>
     );
 
   if (keepAlive) {
     return (
-      <Activity mode={mode} key={fullSegmentName}>
+      <Activity mode={mode} key={key}>
         {content}
       </Activity>
     );
   }
 
-  return <Fragment key={fullSegmentName}>{content}</Fragment>;
+  return <Fragment key={key}>{content}</Fragment>;
+}
+
+function recordFallback(child: ReactElement, slots: FallbackSlots): boolean {
+  if (child.type === NotFound) {
+    slots.notFoundChildren = (child.props as NotFoundProps).children;
+
+    return true;
+  }
+
+  if (child.type === Self) {
+    // First-wins: subsequent <Self> elements are ignored, mirroring NotFound.
+    if (!slots.selfFound) {
+      slots.selfChildren = (child.props as SelfProps).children;
+      slots.selfFallback = (child.props as SelfProps).fallback;
+      slots.selfFound = true;
+    }
+
+    return true;
+  }
+
+  return false;
+}
+
+function processMatch(
+  child: ReactElement,
+  routeName: string,
+  nodeName: string,
+  hasBeenActivated: Set<string>,
+  alreadyActive: boolean,
+): { rendered: ReactElement | null; matched: boolean } {
+  const {
+    segment,
+    exact = false,
+    keepAlive = false,
+    fallback,
+  } = child.props as MatchProps;
+  const fullSegmentName = nodeName ? `${nodeName}.${segment}` : segment;
+  const isActive =
+    !alreadyActive && isSegmentMatch(routeName, fullSegmentName, exact);
+
+  if (isActive) {
+    hasBeenActivated.add(fullSegmentName);
+
+    return {
+      rendered: renderSlotElement(
+        (child.props as MatchProps).children,
+        fullSegmentName,
+        keepAlive,
+        "visible",
+        fallback,
+      ),
+      matched: true,
+    };
+  }
+
+  if (keepAlive && hasBeenActivated.has(fullSegmentName)) {
+    return {
+      rendered: renderSlotElement(
+        (child.props as MatchProps).children,
+        fullSegmentName,
+        keepAlive,
+        "hidden",
+        fallback,
+      ),
+      matched: false,
+    };
+  }
+
+  return { rendered: null, matched: false };
+}
+
+function appendFallback(
+  rendered: ReactElement[],
+  routeName: string,
+  nodeName: string,
+  slots: FallbackSlots,
+): void {
+  if (slots.selfFound && routeName === nodeName) {
+    rendered.push(
+      renderSlotElement(
+        slots.selfChildren,
+        "__route-view-self__",
+        false,
+        "visible",
+        slots.selfFallback,
+      ),
+    );
+
+    return;
+  }
+
+  if (routeName === UNKNOWN_ROUTE && slots.notFoundChildren !== null) {
+    rendered.push(
+      <Fragment key="__route-view-not-found__">
+        {slots.notFoundChildren}
+      </Fragment>,
+    );
+  }
 }
 
 export function buildRenderList(
@@ -75,59 +184,39 @@ export function buildRenderList(
   nodeName: string,
   hasBeenActivated: Set<string>,
 ): { rendered: ReactElement[]; activeMatchFound: boolean } {
-  let notFoundChildren: ReactNode = null;
+  const slots: FallbackSlots = {
+    selfChildren: null,
+    selfFallback: undefined,
+    selfFound: false,
+    notFoundChildren: null,
+  };
   let activeMatchFound = false;
   const rendered: ReactElement[] = [];
 
   for (const child of elements) {
-    if (child.type === NotFound) {
-      notFoundChildren = (child.props as NotFoundProps).children;
+    if (recordFallback(child, slots)) {
       continue;
     }
 
-    const {
-      segment,
-      exact = false,
-      keepAlive = false,
-      fallback,
-    } = child.props as MatchProps;
-    const fullSegmentName = nodeName ? `${nodeName}.${segment}` : segment;
-    const isActive =
-      !activeMatchFound && isSegmentMatch(routeName, fullSegmentName, exact);
-
-    if (isActive) {
+    const result = processMatch(
+      child,
+      routeName,
+      nodeName,
+      hasBeenActivated,
+      activeMatchFound,
+    );
+
+    if (result.matched) {
       activeMatchFound = true;
-      hasBeenActivated.add(fullSegmentName);
-      rendered.push(
-        renderMatchElement(
-          (child.props as MatchProps).children,
-          fullSegmentName,
-          keepAlive,
-          "visible",
-          fallback,
-        ),
-      );
-    } else if (keepAlive && hasBeenActivated.has(fullSegmentName)) {
-      rendered.push(
-        renderMatchElement(
-          (child.props as MatchProps).children,
-          fullSegmentName,
-          keepAlive,
-          "hidden",
-          fallback,
-        ),
-      );
+    }
+
+    if (result.rendered !== null) {
+      rendered.push(result.rendered);
     }
   }
 
-  if (
-    !activeMatchFound &&
-    routeName === UNKNOWN_ROUTE &&
-    notFoundChildren !== null
-  ) {
-    rendered.push(
-      <Fragment key="__route-view-not-found__">{notFoundChildren}</Fragment>,
-    );
+  if (!activeMatchFound) {
+    appendFallback(rendered, routeName, nodeName, slots);
   }
 
   return { rendered, activeMatchFound };

package/src/components/modern/RouteView/index.ts

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

package/src/components/modern/RouteView/types.ts

@@ -3,7 +3,7 @@ import type { ReactNode } from "react";
 export interface RouteViewProps {
   /** Route tree node name to subscribe to. "" for root. */
   readonly nodeName: string;
-  /** <RouteView.Match> and <RouteView.NotFound> elements. */
+  /** <RouteView.Match>, <RouteView.Self>, and <RouteView.NotFound> elements. */
   readonly children: ReactNode;
 }
 
@@ -20,6 +20,18 @@ export interface MatchProps {
   readonly children: ReactNode;
 }
 
+export interface SelfProps {
+  /**
+   * Fallback content to show while children are suspended.
+   *
+   * Symmetric with `<RouteView.Match fallback>` — wraps children in
+   * `<Suspense>` when defined.
+   */
+  readonly fallback?: ReactNode;
+  /** Content to render when the active route name equals the parent RouteView's nodeName. */
+  readonly children: ReactNode;
+}
+
 export interface NotFoundProps {
   /** Content to render on UNKNOWN_ROUTE. */
   readonly children: ReactNode;

package/src/index.ts

@@ -29,6 +29,7 @@ export type { LinkProps } from "./types";
 export type {
   RouteViewProps,
   RouteViewMatchProps,
+  RouteViewSelfProps,
   RouteViewNotFoundProps,
 } from "./components/modern/RouteView";