@real-router/solid 0.3.0 → 0.4.0

package/src/components/Link.tsx

@@ -9,12 +9,48 @@ import {
   buildHref,
   buildActiveClassName,
 } from "../dom-utils/index.js";
-import { useRouter } from "../hooks/useRouter";
 
 import type { LinkProps } from "../types";
-import type { Params } from "@real-router/core";
+import type { Params, Router } from "@real-router/core";
+import type { RouterSource } from "@real-router/sources";
 import type { JSX } from "solid-js";
 
+// Slow-path source cache: shared per-router, keyed by routeName + params + flags.
+// Captured slow-path values are stable per Link (props captured at init), so the
+// cache key is guaranteed stable for the lifetime of any consumer.
+const activeSourceCache = new WeakMap<
+  Router,
+  Map<string, RouterSource<boolean>>
+>();
+
+function getOrCreateActiveSource(
+  router: Router,
+  routeName: string,
+  routeParams: Params,
+  activeStrict: boolean,
+  ignoreQueryParams: boolean,
+): RouterSource<boolean> {
+  let perRouter = activeSourceCache.get(router);
+
+  if (!perRouter) {
+    perRouter = new Map();
+    activeSourceCache.set(router, perRouter);
+  }
+
+  const key = `${routeName}|${JSON.stringify(routeParams)}|${activeStrict}|${ignoreQueryParams}`;
+  let source = perRouter.get(key);
+
+  if (!source) {
+    source = createActiveRouteSource(router, routeName, routeParams, {
+      strict: activeStrict,
+      ignoreQueryParams,
+    });
+    perRouter.set(key, source);
+  }
+
+  return source;
+}
+
 export function Link<P extends Params = Params>(
   props: Readonly<LinkProps<P>>,
 ): JSX.Element {
@@ -42,11 +78,15 @@ export function Link<P extends Params = Params>(
     "children",
   ]);
 
-  const router = useRouter();
   const ctx = useContext(RouterContext);
 
+  if (!ctx) {
+    throw new Error("Link must be used within a RouterProvider");
+  }
+
+  const router = ctx.router;
+
   const useFastPath =
-    ctx?.routeSelector &&
     !local.activeStrict &&
     local.ignoreQueryParams &&
     local.routeParams === EMPTY_PARAMS;
@@ -54,10 +94,13 @@ export function Link<P extends Params = Params>(
   const isActive = useFastPath
     ? () => ctx.routeSelector(local.routeName)
     : createSignalFromSource(
-        createActiveRouteSource(router, local.routeName, local.routeParams, {
-          strict: local.activeStrict,
-          ignoreQueryParams: local.ignoreQueryParams,
-        }),
+        getOrCreateActiveSource(
+          router,
+          local.routeName,
+          local.routeParams,
+          local.activeStrict,
+          local.ignoreQueryParams,
+        ),
       );
 
   const href = createMemo(() =>

package/src/components/RouteView/RouteView.tsx

@@ -1,4 +1,4 @@
-import { children as resolveChildren } from "solid-js";
+import { children as resolveChildren, createMemo } from "solid-js";
 
 import { Match, NotFound } from "./components";
 import { buildRenderList, collectElements } from "./helpers";
@@ -13,6 +13,14 @@ function RouteViewRoot(props: Readonly<RouteViewProps>): JSX.Element {
 
   const resolved = resolveChildren(() => props.children);
 
+  const elements = createMemo(() => {
+    const arr: RouteViewMarker[] = [];
+
+    collectElements(resolved(), arr);
+
+    return arr;
+  });
+
   return (
     <>
       {(() => {
@@ -22,24 +30,16 @@ function RouteViewRoot(props: Readonly<RouteViewProps>): JSX.Element {
           return null;
         }
 
-        const elements: RouteViewMarker[] = [];
-
-        collectElements(resolved(), elements);
-
-        const { rendered } = buildRenderList(
-          elements,
+        const rendered = buildRenderList(
+          elements(),
           state.route.name,
           props.nodeName,
         );
 
-        if (rendered.length > 0) {
-          return rendered;
-        }
-
-        return null;
+        return rendered.length > 0 ? rendered : null;
       })()}
     </>
-  ) as unknown as JSX.Element;
+  );
 }
 
 RouteViewRoot.displayName = "RouteView";

package/src/components/RouteView/components.tsx

@@ -1,9 +1,11 @@
 import type { MatchProps, NotFoundProps } from "./types";
 import type { JSX } from "solid-js";
 
-export const MATCH_MARKER = Symbol.for("RouteView.Match");
+// 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 NOT_FOUND_MARKER = Symbol.for("RouteView.NotFound");
+export const NOT_FOUND_MARKER = Symbol("RouteView.NotFound");
 
 export interface MatchMarker {
   $$type: typeof MATCH_MARKER;
@@ -21,7 +23,7 @@ export interface NotFoundMarker {
 export type RouteViewMarker = MatchMarker | NotFoundMarker;
 
 export function Match(props: MatchProps): JSX.Element {
-  const result = {
+  const result: MatchMarker = {
     $$type: MATCH_MARKER,
     segment: props.segment,
     exact: props.exact ?? false,
@@ -29,21 +31,25 @@ export function Match(props: MatchProps): JSX.Element {
     get children(): JSX.Element {
       return props.children;
     },
-  } as MatchMarker;
+  };
 
+  // Marker object is identified by $$type Symbol in RouteView/helpers.tsx,
+  // not rendered as JSX. Cast required because JSX.Element does not include
+  // arbitrary marker shapes.
   return result as unknown as JSX.Element;
 }
 
 Match.displayName = "RouteView.Match";
 
 export function NotFound(props: NotFoundProps): JSX.Element {
-  const result = {
+  const result: NotFoundMarker = {
     $$type: NOT_FOUND_MARKER,
     get children(): JSX.Element {
       return props.children;
     },
-  } as NotFoundMarker;
+  };
 
+  // See Match for the marker-pattern rationale.
   return result as unknown as JSX.Element;
 }
 

package/src/components/RouteView/helpers.tsx

@@ -11,7 +11,7 @@ import type {
 } from "./components";
 import type { JSX } from "solid-js";
 
-function isSegmentMatch(
+export function isSegmentMatch(
   routeName: string,
   fullSegmentName: string,
   exact: boolean,
@@ -66,7 +66,7 @@ export function buildRenderList(
   elements: RouteViewMarker[],
   routeName: string,
   nodeName: string,
-): { rendered: JSX.Element[]; activeMatchFound: boolean } {
+): JSX.Element[] {
   let notFoundChildren: JSX.Element | null = null;
   let activeMatchFound = false;
   const rendered: JSX.Element[] = [];
@@ -77,23 +77,25 @@ export function buildRenderList(
       continue;
     }
 
+    if (activeMatchFound) {
+      continue;
+    }
+
     const { segment, exact, fallback } = child;
     const fullSegmentName = nodeName ? `${nodeName}.${segment}` : segment;
-    const isActive =
-      !activeMatchFound && isSegmentMatch(routeName, fullSegmentName, exact);
-
-    if (isActive) {
-      activeMatchFound = true;
-      const matchContent = child.children;
-      const content =
-        fallback === undefined ? (
-          matchContent
-        ) : (
-          <Suspense fallback={fallback}>{matchContent}</Suspense>
-        );
-
-      rendered.push(content);
+
+    if (!isSegmentMatch(routeName, fullSegmentName, exact)) {
+      continue;
     }
+
+    activeMatchFound = true;
+    rendered.push(
+      fallback === undefined ? (
+        child.children
+      ) : (
+        <Suspense fallback={fallback}>{child.children}</Suspense>
+      ),
+    );
   }
 
   if (
@@ -104,5 +106,5 @@ export function buildRenderList(
     rendered.push(notFoundChildren);
   }
 
-  return { rendered, activeMatchFound };
+  return rendered;
 }

package/src/components/RouterErrorBoundary.tsx

@@ -1,4 +1,4 @@
-import { createEffect, createMemo, createSignal } from "solid-js";
+import { createEffect, createMemo, createSignal, Show } from "solid-js";
 
 import { useRouterError } from "../hooks/useRouterError";
 
@@ -43,11 +43,9 @@ export function RouterErrorBoundary(
   return (
     <>
       {props.children}
-      {(() => {
-        const error = visibleError();
-
-        return error ? props.fallback(error, resetError) : null;
-      })()}
+      <Show when={visibleError()}>
+        {(error) => props.fallback(error(), resetError)}
+      </Show>
     </>
   );
 }

package/src/createSignalFromSource.ts

@@ -8,10 +8,18 @@ export function createSignalFromSource<T>(
 ): Accessor<T> {
   const [value, setValue] = createSignal<T>(source.getSnapshot());
 
+  const sync = (): T => source.getSnapshot();
+
   const unsubscribe = source.subscribe(() => {
-    setValue(() => source.getSnapshot());
+    setValue(sync);
   });
 
+  // Re-read after subscribe: lazy sources reconcile their snapshot in
+  // onFirstSubscribe (when reused after disconnect via cache). Listener is not
+  // notified for that internal update, so we must sync the signal manually.
+  // No-op when snapshot is unchanged (signal equality check).
+  setValue(sync);
+
   onCleanup(() => {
     unsubscribe();
   });

package/src/createStoreFromSource.ts

@@ -6,9 +6,7 @@ import type { RouterSource } from "@real-router/sources";
 export function createStoreFromSource<T extends object>(
   source: RouterSource<T>,
 ): T {
-  const [state, setState] = createStore<T>(
-    structuredClone(source.getSnapshot()),
-  );
+  const [state, setState] = createStore<T>({ ...source.getSnapshot() });
 
   const unsubscribe = source.subscribe(() => {
     setState(reconcile(source.getSnapshot()));

package/src/hooks/sharedNodeSource.ts

@@ -0,0 +1,30 @@
+import { createRouteNodeSource } from "@real-router/sources";
+
+import type { Router } from "@real-router/core";
+import type { RouteNodeSnapshot, RouterSource } from "@real-router/sources";
+
+const cache = new WeakMap<
+  Router,
+  Map<string, RouterSource<RouteNodeSnapshot>>
+>();
+
+export function getOrCreateNodeSource(
+  router: Router,
+  nodeName: string,
+): RouterSource<RouteNodeSnapshot> {
+  let perRouter = cache.get(router);
+
+  if (!perRouter) {
+    perRouter = new Map();
+    cache.set(router, perRouter);
+  }
+
+  let source = perRouter.get(nodeName);
+
+  if (!source) {
+    source = createRouteNodeSource(router, nodeName);
+    perRouter.set(nodeName, source);
+  }
+
+  return source;
+}

package/src/hooks/useRouteNode.tsx

@@ -1,6 +1,5 @@
-import { createRouteNodeSource } from "@real-router/sources";
-
 import { createSignalFromSource } from "../createSignalFromSource";
+import { getOrCreateNodeSource } from "./sharedNodeSource";
 import { useRouter } from "./useRouter";
 
 import type { RouteState } from "../types";
@@ -8,7 +7,6 @@ import type { Accessor } from "solid-js";
 
 export function useRouteNode(nodeName: string): Accessor<RouteState> {
   const router = useRouter();
-  const store = createRouteNodeSource(router, nodeName);
 
-  return createSignalFromSource(store);
+  return createSignalFromSource(getOrCreateNodeSource(router, nodeName));
 }

package/src/hooks/useRouteNodeStore.tsx

@@ -1,6 +1,5 @@
-import { createRouteNodeSource } from "@real-router/sources";
-
 import { createStoreFromSource } from "../createStoreFromSource";
+import { getOrCreateNodeSource } from "./sharedNodeSource";
 import { useRouter } from "./useRouter";
 
 import type { RouteState } from "../types";
@@ -8,5 +7,5 @@ import type { RouteState } from "../types";
 export function useRouteNodeStore(nodeName: string): RouteState {
   const router = useRouter();
 
-  return createStoreFromSource(createRouteNodeSource(router, nodeName));
+  return createStoreFromSource(getOrCreateNodeSource(router, nodeName));
 }

package/src/hooks/useRouteStore.tsx

@@ -1,19 +1,11 @@
 import { createRouteSource } from "@real-router/sources";
-import { useContext } from "solid-js";
 
-import { RouteContext } from "../context";
 import { createStoreFromSource } from "../createStoreFromSource";
 import { useRouter } from "./useRouter";
 
 import type { RouteState } from "../types";
 
 export function useRouteStore(): RouteState {
-  const ctx = useContext(RouteContext);
-
-  if (!ctx) {
-    throw new Error("useRouteStore must be used within a RouterProvider");
-  }
-
   const router = useRouter();
 
   return createStoreFromSource(createRouteSource(router));

package/src/hooks/useRouterTransition.tsx

@@ -3,12 +3,24 @@ import { createTransitionSource } from "@real-router/sources";
 import { createSignalFromSource } from "../createSignalFromSource";
 import { useRouter } from "./useRouter";
 
-import type { RouterTransitionSnapshot } from "@real-router/sources";
+import type { Router } from "@real-router/core";
+import type {
+  RouterSource,
+  RouterTransitionSnapshot,
+} from "@real-router/sources";
 import type { Accessor } from "solid-js";
 
+const cache = new WeakMap<Router, RouterSource<RouterTransitionSnapshot>>();
+
 export function useRouterTransition(): Accessor<RouterTransitionSnapshot> {
   const router = useRouter();
-  const store = createTransitionSource(router);
 
-  return createSignalFromSource(store);
+  let source = cache.get(router);
+
+  if (!source) {
+    source = createTransitionSource(router);
+    cache.set(router, source);
+  }
+
+  return createSignalFromSource(source);
 }