@real-router/svelte 0.10.1 → 0.12.0

package/dist/dom-utils/scroll-restore.js

@@ -22,20 +22,36 @@ export function createScrollRestoration(router, options) {
     const getContainer = options?.scrollContainer;
     const behavior = options?.behavior ?? "auto";
     const storageKey = options?.storageKey ?? DEFAULT_STORAGE_KEY;
+    // Write-through in-memory cache: parse sessionStorage once per provider
+    // mount, then mutate in-memory. Avoids a JSON.parse + JSON.stringify pair
+    // on every subscribeLeave / pagehide event.
+    let store;
     const loadStore = () => {
+        if (store !== undefined) {
+            return store;
+        }
         try {
             const raw = sessionStorage.getItem(storageKey);
-            return raw ? JSON.parse(raw) : {};
+            store = raw ? JSON.parse(raw) : {};
         }
         catch {
-            return {};
+            store = {};
         }
+        return store;
     };
     const putPos = (key, pos) => {
         try {
-            const store = loadStore();
-            store[key] = pos;
-            sessionStorage.setItem(storageKey, JSON.stringify(store));
+            const cached = loadStore();
+            // Skip-same-value: when a route is left at the same scroll position it
+            // already holds in the cache (e.g. tab-switching without scrolling),
+            // both the in-memory write and the JSON.stringify + setItem pair are
+            // no-ops. Eliminates redundant serialization on the navigation hot
+            // path for the common "click tabs without scrolling" case.
+            if (cached[key] === pos) {
+                return;
+            }
+            cached[key] = pos;
+            sessionStorage.setItem(storageKey, JSON.stringify(cached));
         }
         catch {
             // Ignore quota / security errors.
@@ -106,6 +122,27 @@ export function createScrollRestoration(router, options) {
         writePos(0);
     };
     let destroyed = false;
+    let unserializableWarned = false;
+    // `keyOf` defers to `canonicalJson` which calls `JSON.stringify`. Two
+    // realistic inputs blow up the serializer and would otherwise crash the
+    // subscribe callback (taking scroll-restore offline for the whole session):
+    //   - `BigInt` params → `TypeError: Do not know how to serialize a BigInt`
+    //   - cyclic params (reactive proxies, DOM-ref back-pointers) → stack
+    //     overflow.
+    // The defensive wrapper drops capture/restore for that specific navigation
+    // and warns once per provider — the rest of the cache stays usable.
+    const safeKeyOf = (state) => {
+        try {
+            return keyOf(state);
+        }
+        catch {
+            if (!unserializableWarned) {
+                unserializableWarned = true;
+                console.error(`[real-router] scroll-restore: route "${state.name}" has params that cannot be canonicalized (e.g. BigInt or cyclic structure). Scroll position will not be captured or restored for this route.`);
+            }
+            return null;
+        }
+    };
     const unsubscribe = router.subscribe(({ route, previousRoute }) => {
         const nav = route.context
             .navigation;
@@ -113,25 +150,36 @@ export function createScrollRestoration(router, options) {
         // previousRoute is undefined and capture is naturally skipped. The
         // pre-refresh position was already persisted via pagehide.
         if (previousRoute) {
-            putPos(keyOf(previousRoute), readPos());
+            const prevKey = safeKeyOf(previousRoute);
+            if (prevKey !== null) {
+                putPos(prevKey, readPos());
+            }
         }
-        // Single rAF so DOM is committed before we read anchors / write scroll.
-        // Guard against destroy() racing with the callback.
         requestAnimationFrame(() => {
             if (destroyed) {
                 return;
             }
-            if (mode === "top" || !nav) {
+            if (mode === "top") {
                 scrollToHashOrTop(route);
                 return;
             }
-            if (nav.navigationType === "replace") {
+            if (route.transition.replace || nav?.navigationType === "replace") {
+                return;
+            }
+            // Both arms are required: `transition.reload` only fires for programmatic
+            // `router.navigate({reload:true})`. F5 under navigation-plugin primes
+            // `nav.navigationType === "reload"` via #531 getActivationType but leaves
+            // opts.reload undefined, so dropping the plugin arm would regress F5
+            // scroll-restore. Same belt-and-suspenders pattern is used for replace
+            // above. Browser-plugin's F5 is not covered (no priming, out of scope).
+            if (route.transition.reload || nav?.navigationType === "reload") {
+                const key = safeKeyOf(route);
+                writePos(key === null ? 0 : (loadStore()[key] ?? 0));
                 return;
             }
-            if (nav.direction === "back" ||
-                nav.navigationType === "traverse" ||
-                nav.navigationType === "reload") {
-                writePos(loadStore()[keyOf(route)] ?? 0);
+            if (nav?.direction === "back" || nav?.navigationType === "traverse") {
+                const key = safeKeyOf(route);
+                writePos(key === null ? 0 : (loadStore()[key] ?? 0));
                 return;
             }
             scrollToHashOrTop(route);
@@ -140,7 +188,10 @@ export function createScrollRestoration(router, options) {
     const onPageHide = () => {
         const current = router.getState();
         if (current) {
-            putPos(keyOf(current), readPos());
+            const key = safeKeyOf(current);
+            if (key !== null) {
+                putPos(key, readPos());
+            }
         }
     };
     globalThis.addEventListener("pagehide", onPageHide);
@@ -161,15 +212,103 @@ export function createScrollRestoration(router, options) {
         },
     };
 }
-function keyOf(state) {
-    return `${state.name}:${canonicalJson(state.params)}`;
+/**
+ * Internal cache-key builder for scroll-position storage.
+ *
+ * **Exported for testing only — not part of the public API** (intentionally
+ * excluded from `index.ts` barrel). Adapter property tests import it via
+ * the direct path to lock the `(name, canonicalJson(params))` key shape
+ * as a regression guard (§8b H20 / audit-2026-05-16 #S3). A change to
+ * key format would silently lose scroll positions across an upgrade —
+ * the test set is the contract.
+ *
+ * ## Identity-based memoization (audit-2026-05-17 §8b #2)
+ *
+ * `State` objects emitted by core are frozen per-navigation: their
+ * `name` / `params` are immutable for the lifetime of the snapshot, and
+ * any change produces a new `State` reference. A `WeakMap<State, string>`
+ * therefore safely caches the canonicalised key by identity — repeat
+ * `keyOf(state)` calls on the same snapshot (typical on
+ * back/forward/traverse where the same prior `State` is re-emitted)
+ * skip the recursive `canonicalJson` pass entirely.
+ *
+ * The cache key is the `State` reference, so entries auto-release when
+ * the snapshot is GC'd — no eviction needed.
+ */
+const KEY_CACHE = new WeakMap();
+export function keyOf(state) {
+    const cached = KEY_CACHE.get(state);
+    if (cached !== undefined) {
+        return cached;
+    }
+    const key = `${state.name}:${canonicalJson(state.params)}`;
+    KEY_CACHE.set(state, key);
+    return key;
 }
-function canonicalJson(value) {
+/**
+ * Stable JSON serializer with sorted object keys.
+ *
+ * **Exported for testing only — not part of the public API** (intentionally
+ * excluded from `index.ts` barrel). Adapter property tests import it via
+ * the direct path to lock the key-order-insensitive property
+ * (`canonicalJson({a:1,b:2}) === canonicalJson({b:2,a:1})`).
+ *
+ * ## Divergence from `@real-router/sources/canonicalJson` — by design
+ *
+ * Two independent implementations live in the monorepo:
+ *
+ * - **`shared/dom-utils/scroll-restore.canonicalJson`** (this file) — scroll
+ *   cache key builder. Uses `localeCompare` and a plain-object accumulator;
+ *   tolerates `__proto__`-keyed inputs only insofar as `JSON.stringify`'s
+ *   replacer happens to sort them; relies on `JSON.stringify`'s native cycle
+ *   detector. Designed to be cheap on the navigation hot path. The
+ *   surrounding [[safeKeyOf]] wrapper catches the two crash inputs (`BigInt`,
+ *   cyclic) and skips the offending capture/restore.
+ *
+ * - **`@real-router/sources/canonicalJson`** — sources cache key builder.
+ *   Uses byte-order compare (`< / >`) for locale-independence, a
+ *   `Object.create(null)` accumulator to prevent prototype pollution, and a
+ *   bespoke path-based cycle detector (the native one cannot see the cloned
+ *   graph). Throws eagerly on `Map`/`Set`/`RegExp`/cycles — the caller falls
+ *   back to a non-cached source.
+ *
+ * **They are intentionally NOT interchangeable.** Aligning them would either
+ * regress scroll-restore performance (byte-order + recursive clone is heavier
+ * per call) or weaken the sources cache (locale dependence breaks
+ * deterministic cache keys across machines). No cross-package equivalence
+ * test exists or should be added; the relationship is "different invariants,
+ * different costs, different consumers." Audit-2 / audit-2026-05-17 §2
+ * documents the choice.
+ */
+export function canonicalJson(value) {
     return JSON.stringify(value, canonicalReplacer);
 }
 function canonicalReplacer(_key, val) {
+    // audit-2026-05-17 §5 MEDIUM (Sprint A.3) — function/Symbol marker.
+    // `JSON.stringify` silently drops function and symbol values from
+    // object output. Two routes that differ ONLY in a function/Symbol
+    // value would canonicalize to the same string → silent scroll-cache
+    // key collision (positions clobber each other). Replacing the value
+    // with a sentinel string breaks the collision while keeping the
+    // canonical form deterministic. The sentinels are intentionally
+    // ASCII-only and lexically distinct from valid JSON-stringified
+    // values; consumers will see `"<fn>"` / `"<sym>"` if they ever
+    // round-trip the cache key, signalling the substitution clearly.
+    if (typeof val === "function") {
+        return "<fn>";
+    }
+    if (typeof val === "symbol") {
+        return "<sym>";
+    }
     if (val !== null && typeof val === "object" && !Array.isArray(val)) {
-        const sorted = {};
+        // Null-prototype accumulator: a plain `{}` would interpret
+        // `sorted["__proto__"] = x` as a prototype assignment (silently dropped
+        // from JSON.stringify output AND a prototype-pollution vector). Mirrors
+        // the same guard in `@real-router/sources/canonicalJson`. The two
+        // implementations are still intentionally divergent (see the doc-block
+        // on [[canonicalJson]] above), but prototype-safety is non-negotiable
+        // on both. Lock-test: scrollRestoreKey.properties.ts Invariant 11.
+        const sorted = Object.create(null);
         // eslint-disable-next-line unicorn/no-array-sort -- ng-packagr uses pre-ES2023 lib; toSorted unavailable
         const keys = Object.keys(val).sort((left, right) => left.localeCompare(right));
         for (const key of keys) {

package/dist/ssr.d.ts

@@ -0,0 +1,9 @@
+export { default as ClientOnly } from "./components/ClientOnly.svelte";
+export { default as ServerOnly } from "./components/ServerOnly.svelte";
+export { default as Await } from "./components/Await.svelte";
+export { default as Streamed } from "./components/Streamed.svelte";
+export { default as HttpStatusCode } from "./components/HttpStatusCode.svelte";
+export { default as HttpStatusProvider } from "./components/HttpStatusProvider.svelte";
+export { useDeferred } from "./composables/useDeferred.svelte";
+export { createHttpStatusSink } from "./utils/createHttpStatusSink";
+export type { HttpStatusSink } from "./utils/createHttpStatusSink";

package/dist/ssr.js

@@ -0,0 +1,17 @@
+// SSR-feature entry — Svelte 5+
+//
+// Server-side and SSR-aware components/composables. Mirror of `@real-router/react/ssr`
+// — same exports, Svelte-native idioms (`{#await}` block under the hood,
+// `$state` rune for ClientOnly/ServerOnly, useDeferred returns Promise<T>
+// for direct use with native `{#await}`).
+// Components
+export { default as ClientOnly } from "./components/ClientOnly.svelte";
+export { default as ServerOnly } from "./components/ServerOnly.svelte";
+export { default as Await } from "./components/Await.svelte";
+export { default as Streamed } from "./components/Streamed.svelte";
+export { default as HttpStatusCode } from "./components/HttpStatusCode.svelte";
+export { default as HttpStatusProvider } from "./components/HttpStatusProvider.svelte";
+// Composables
+export { useDeferred } from "./composables/useDeferred.svelte";
+// Utilities
+export { createHttpStatusSink } from "./utils/createHttpStatusSink";

package/dist/types.d.ts

@@ -1,4 +1,5 @@
 import type { NavigationOptions, Navigator, Params, State } from "@real-router/core";
+import type { Snippet } from "svelte";
 export interface RouteContext<P extends Params = Params> {
     readonly navigator: Navigator;
     readonly route: {
@@ -8,7 +9,18 @@ export interface RouteContext<P extends Params = Params> {
         readonly current: State | undefined;
     };
 }
+/**
+ * Props accepted by `<Link>`. Mirrors the inline prop shape in
+ * `src/components/Link.svelte` — any prop landed by `Link.svelte` is also
+ * declared here, including the rest-props index signature for arbitrary
+ * HTML attributes spread onto the rendered `<a>`.
+ */
 export interface LinkProps<P extends Params = Params> {
+    /**
+     * All other props are spread onto the rendered `<a>` element. Use this for
+     * `aria-*`, `data-*`, `id`, `title`, and any other native attributes.
+     */
+    readonly [key: string]: unknown;
     readonly routeName: string;
     readonly routeParams?: P;
     readonly routeOptions?: NavigationOptions;
@@ -16,5 +28,16 @@ export interface LinkProps<P extends Params = Params> {
     readonly activeClassName?: string;
     readonly activeStrict?: boolean;
     readonly ignoreQueryParams?: boolean;
+    /**
+     * URL fragment (decoded, no leading "#") — #532.
+     * - `undefined` → preserve current `state.context.url.hash` on click.
+     * - `""` → clear the hash.
+     * - `"value"` → set the hash; same-route different-hash clicks route through
+     *   `navigateWithHash`, which adds `force: true, hashChange: true` to
+     *   bypass core's SAME_STATES check.
+     */
+    readonly hash?: string;
     readonly target?: string;
+    readonly children?: Snippet;
+    readonly onclick?: (evt: MouseEvent) => void;
 }

package/dist/utils/createHttpStatusSink.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Render-scoped HTTP status sink. Created per request on the server, passed to
+ * `<HttpStatusProvider sink={...}>`, and read after `await render()` from
+ * `svelte/server` to apply the value to the HTTP response.
+ *
+ * Last write wins: if the rendered tree mounts more than one
+ * `<HttpStatusCode />`, the value reflects the last component that ran during
+ * the render pass.
+ *
+ * No-op on the client — `<HttpStatusCode />` reads the optional injected sink
+ * and skips the write when no provider is mounted, so the same component tree
+ * can be hydrated without changing behaviour.
+ *
+ * Constraints:
+ * - **Per-request only.** Don't share a sink across requests; the rendered
+ *   tree mutates `code` in place. Module-level singletons leak status
+ *   between concurrent requests.
+ * - **Don't `Object.freeze` the sink.** The component writes to `.code`;
+ *   freezing makes the assignment throw under ESM strict mode.
+ * - **Hydration is tolerant.** Svelte 5's hydration walker accepts
+ *   `{#if}`-branch asymmetry between server and client (verified by `ssr/`
+ *   e2e), so the example app uses a server-only provider wrapper. This
+ *   contrasts with Vue/Solid, which require symmetric provider mounting.
+ */
+export interface HttpStatusSink {
+    code: number | undefined;
+}
+export declare function createHttpStatusSink(): HttpStatusSink;

package/dist/utils/createHttpStatusSink.js

@@ -0,0 +1,3 @@
+export function createHttpStatusSink() {
+    return { code: undefined };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@real-router/svelte",
-  "version": "0.10.1",
+  "version": "0.12.0",
   "type": "module",
   "description": "Svelte 5 integration for Real-Router",
   "svelte": "./dist/index.js",
@@ -10,6 +10,11 @@
       "types": "./dist/index.d.ts",
       "svelte": "./dist/index.js",
       "default": "./dist/index.js"
+    },
+    "./ssr": {
+      "types": "./dist/ssr.d.ts",
+      "svelte": "./dist/ssr.js",
+      "default": "./dist/ssr.js"
     }
   },
   "files": [
@@ -44,9 +49,9 @@
   "license": "MIT",
   "sideEffects": false,
   "dependencies": {
-    "@real-router/core": "^0.52.0",
+    "@real-router/core": "^0.54.1",
     "@real-router/route-utils": "^0.2.2",
-    "@real-router/sources": "^0.8.1"
+    "@real-router/sources": "^0.8.3"
   },
   "devDependencies": {
     "@sveltejs/package": "2.5.7",
@@ -55,10 +60,10 @@
     "@testing-library/svelte": "5.3.1",
     "@testing-library/user-event": "14.6.1",
     "eslint-plugin-svelte": "3.17.1",
-    "svelte": "5.54.0",
+    "svelte": "5.55.7",
     "svelte-check": "4.4.5",
     "svelte-eslint-parser": "1.6.0",
-    "@real-router/browser-plugin": "^0.17.1"
+    "@real-router/browser-plugin": "^0.17.4"
   },
   "peerDependencies": {
     "svelte": ">=5.7.0"

package/src/RouterProvider.svelte

@@ -47,9 +47,18 @@
 
   $effect(() => {
     if (!srEnabled) return;
-    // Read scrollRestoration object props via `untrack` for non-primitive
-    // refs that naturally change each render. Primitive $derived memos
-    // (mode/anchor/behavior/storageKey) drive re-runs.
+    // Pin primitive $derived deps as explicit dependencies of this effect
+    // BEFORE constructing the utility. The four `void srX` reads make
+    // intent unambiguous: even if `createScrollRestoration` throws after
+    // partial argument evaluation (e.g. invalid `mode` rejected), every
+    // srMode/srAnchor/srBehavior/srStorageKey is already in this effect's
+    // dependency set — the next change to any of them re-runs the effect
+    // and the utility gets rebuilt. Without these reads, the dependency
+    // tracking would depend on Svelte's argument-evaluation order inside
+    // the factory call, which is brittle. Non-primitive refs (like
+    // `scrollContainer` — a DOM element that changes ref every render but
+    // is identity-equal in practice) are deliberately read via `untrack`
+    // to keep this effect from re-running on every parent re-render.
     void srMode;
     void srAnchor;
     void srBehavior;

package/src/components/Await.svelte

@@ -0,0 +1,48 @@
+<!--
+  @component
+  Reads `useDeferred(name)` and renders the `children` snippet with the
+  resolved value via Svelte's native `{#await}` block. Optional `fallback`
+  snippet shown while the promise is pending; rejection bubbles to the
+  nearest `{:catch}` handler in the surrounding `{#await}` chain (or
+  `<Streamed>`).
+
+  ```svelte
+  <Await name="reviews">
+    {#snippet children(reviews)}
+      <ReviewList items={reviews} />
+    {/snippet}
+    {#snippet fallback()}
+      <Spinner />
+    {/snippet}
+  </Await>
+  ```
+-->
+<script lang="ts" generics="T">
+  import { useDeferred } from "../composables/useDeferred.svelte";
+
+  import type { Snippet } from "svelte";
+
+  interface Props {
+    /** Deferred key declared in the loader's `defer({ deferred: { <name>: ... } })`. */
+    name: string;
+    /** Render snippet for the resolved value. */
+    children: Snippet<[T]>;
+    /** Snippet shown while the promise is pending. */
+    fallback?: Snippet;
+  }
+
+  let { name, children, fallback }: Props = $props();
+
+  // `useDeferred(name)` reads `state.context.ssrDataDeferred[name]` —
+  // wrap in `$derived` so a dynamic `name` prop re-resolves the promise
+  // (vs. capturing the initial value at component init).
+  const promise = $derived(useDeferred<T>(name));
+</script>
+
+{#await promise}
+  {#if fallback}
+    {@render fallback()}
+  {/if}
+{:then value}
+  {@render children(value)}
+{/await}

package/src/components/ClientOnly.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  interface Props {
+    children: Snippet;
+    fallback?: Snippet;
+  }
+
+  let { children, fallback }: Props = $props();
+
+  let mounted = $state(false);
+
+  $effect(() => {
+    mounted = true;
+  });
+</script>
+
+{#if mounted}
+  {@render children()}
+{:else if fallback}
+  {@render fallback()}
+{/if}

package/src/components/HttpStatusCode.svelte

@@ -0,0 +1,63 @@
+<!--
+  @component
+  Render-time HTTP status declaration. Mount inside a route component (typical
+  use case: a glob `*` route's NotFound page) when the status is decided by
+  the rendered tree rather than a loader.
+
+  Writes `code` to the nearest `<HttpStatusProvider>`'s sink during component
+  init and renders nothing. With no provider mounted (the standard
+  client-side case) the component is a silent no-op — same component tree
+  hydrates without touching the DOM or warning about mismatches.
+
+  Loader-driven errors (`LoaderNotFound` → 404, `LoaderRedirect` → 30x) keep
+  working as before; this component covers render-time decisions only.
+
+  Last write wins when several `<HttpStatusCode />` instances mount in the
+  same render pass — sink reflects the last component that ran.
+
+  ```svelte
+  <HttpStatusCode code={404} />
+  ```
+
+  **Streaming SSR ({#await}):** Svelte 5 stable does NOT chunk-stream HTTP
+  for `{#await}` — the server emits the pending branch and returns the full
+  response immediately, async resolution happens client-side. So the sink
+  is always written by the time `await render(App, ...)` resolves, regardless
+  of where `<HttpStatusCode />` is mounted. (This is RSC-like, not React 19
+  / Solid streaming.) No ordering concern.
+
+  **Hydration symmetry:** Svelte 5's hydration walker tolerates `{#if}`-branch
+  asymmetry between server and client (verified by `ssr/` e2e — no warnings
+  fire when SSR has the wrapper but CSR doesn't). The example's `App.svelte`
+  uses `{#if httpStatusSink}` so the wrapper is server-only; this is safe in
+  Svelte but would be a hydration mismatch in Vue/Solid.
+
+  **Valid `code` range:** Node's `res.end()` throws `Invalid status code` on
+  `NaN`, `0`, negative values, or values `> 999` — this surfaces as a 5xx /
+  dropped connection, not silent corruption. Pass a real HTTP status integer
+  (commonly 4xx/5xx; 100-999 is what Node accepts).
+-->
+<script lang="ts">
+  import { getContext } from "svelte";
+
+  import { HTTP_STATUS_KEY } from "../context";
+
+  import type { HttpStatusSink } from "../utils/createHttpStatusSink";
+
+  interface Props {
+    /** HTTP status to apply to the response. Common values: 404, 410, 451, 503. */
+    code: number;
+  }
+
+  let { code }: Props = $props();
+
+  const sink = getContext<HttpStatusSink | undefined>(HTTP_STATUS_KEY);
+
+  if (sink) {
+    // svelte-ignore state_referenced_locally
+    // Intentional one-time write at component init: the sink is read by the
+    // server after `await render()` and a single value is the contract.
+    // Consumers that need to update the code mid-render should remount.
+    sink.code = code;
+  }
+</script>

package/src/components/HttpStatusProvider.svelte

@@ -0,0 +1,45 @@
+<!--
+  @component
+  Wraps an SSR tree with a render-scoped `HttpStatusSink`. `<HttpStatusCode />`
+  reads the sink via `getContext` and writes its `code` to it during component
+  init. Read `sink.code` after `await render()` to set the HTTP response
+  status.
+
+  ```svelte
+  <script lang="ts">
+    import {
+      HttpStatusProvider,
+      createHttpStatusSink,
+    } from "@real-router/svelte/ssr";
+
+    const sink = createHttpStatusSink();
+  </script>
+
+  <HttpStatusProvider {sink}>
+    <App />
+  </HttpStatusProvider>
+  ```
+-->
+<script lang="ts">
+  import { setContext } from "svelte";
+
+  import { HTTP_STATUS_KEY } from "../context";
+
+  import type { HttpStatusSink } from "../utils/createHttpStatusSink";
+  import type { Snippet } from "svelte";
+
+  interface Props {
+    sink: HttpStatusSink;
+    children: Snippet;
+  }
+
+  let { sink, children }: Props = $props();
+
+  // svelte-ignore state_referenced_locally
+  // The sink reference is captured once at provider init — replacing the sink
+  // mid-render isn't a supported usage pattern (the server reads it once
+  // after `await render()`).
+  setContext(HTTP_STATUS_KEY, sink);
+</script>
+
+{@render children()}

package/src/components/RouteView.helpers.ts

@@ -0,0 +1,24 @@
+import { startsWithSegment } from "@real-router/route-utils";
+
+// Snippet names reserved by RouteView for non-segment slots. Iteration in
+// `getActiveSegment` skips these so they don't accidentally match a route.
+const RESERVED_SLOT_NAMES = new Set(["self", "notFound"]);
+
+export function getActiveSegment(
+  routeName: string,
+  node: string,
+  snippets: Record<string, unknown>,
+): string {
+  const prefix = node ? `${node}.` : "";
+
+  for (const segment in snippets) {
+    if (RESERVED_SLOT_NAMES.has(segment)) {
+      continue;
+    }
+    if (startsWithSegment(routeName, prefix + segment)) {
+      return segment;
+    }
+  }
+
+  return "";
+}

package/src/components/RouteView.svelte

@@ -1,32 +1,8 @@
-<script lang="ts" module>
-  import { startsWithSegment } from "@real-router/route-utils";
-
-  // Snippet names reserved by RouteView for non-segment slots. Iteration in
-  // `getActiveSegment` skips these so they don't accidentally match a route.
-  const RESERVED_SLOT_NAMES = new Set(["self", "notFound"]);
-
-  export function getActiveSegment(
-    routeName: string,
-    node: string,
-    snippets: Record<string, unknown>,
-  ): string {
-    const prefix = node ? `${node}.` : "";
-
-    for (const segment in snippets) {
-      if (RESERVED_SLOT_NAMES.has(segment)) continue;
-      if (startsWithSegment(routeName, prefix + segment)) {
-        return segment;
-      }
-    }
-
-    return "";
-  }
-</script>
-
 <script lang="ts">
   import { UNKNOWN_ROUTE } from "@real-router/core";
 
   import { useRouteNode } from "../composables/useRouteNode.svelte";
+  import { getActiveSegment } from "./RouteView.helpers";
 
   import type { Snippet } from "svelte";