@real-router/solid 0.5.2 → 0.7.0

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/directives/link.tsx

@@ -3,11 +3,7 @@ import { createEffect, onCleanup } from "solid-js";
 
 import { EMPTY_PARAMS, EMPTY_OPTIONS } from "../constants";
 import { createSignalFromSource } from "../createSignalFromSource";
-import {
-  shouldNavigate,
-  applyLinkA11y,
-  buildHref,
-} from "../dom-utils/index.js";
+import { shouldNavigate, applyLinkA11y, buildHref } from "../dom-utils";
 import { useRouter } from "../hooks/useRouter";
 
 import type { Params } from "@real-router/core";

package/src/index.tsx

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