@real-router/svelte 0.0.1

package/dist/components/RouteView.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import { UNKNOWN_ROUTE } from "@real-router/core";
+  import { startsWithSegment } from "@real-router/route-utils";
+
+  import { useRouteNode } from "../composables/useRouteNode.svelte";
+
+  import type { Snippet } from "svelte";
+
+  let {
+    nodeName,
+    notFound,
+    ...segmentSnippets
+  }: {
+    nodeName: string;
+    notFound?: Snippet;
+    [key: string]: Snippet | string | undefined;
+  } = $props();
+
+  const routeContext = useRouteNode(nodeName);
+
+  function getActiveSegment(
+    routeName: string,
+    node: string,
+    snippets: Record<string, unknown>,
+  ): string {
+    for (const segment of Object.keys(snippets)) {
+      const fullSegmentName = node ? `${node}.${segment}` : segment;
+
+      if (startsWithSegment(routeName, fullSegmentName)) {
+        return segment;
+      }
+    }
+
+    return "";
+  }
+</script>
+
+{#if routeContext.route.current}
+  {@const route = routeContext.route.current}
+  {@const segment = getActiveSegment(route.name, nodeName, segmentSnippets)}
+  {#if segment && segmentSnippets[segment]}
+    {@render (segmentSnippets[segment] as Snippet)()}
+  {:else if route.name === UNKNOWN_ROUTE && notFound}
+    {@render notFound()}
+  {/if}
+{/if}

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

@@ -0,0 +1,9 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    nodeName: string;
+    notFound?: Snippet;
+    [key: string]: Snippet | string | undefined;
+};
+declare const RouteView: import("svelte").Component<$$ComponentProps, {}, "">;
+type RouteView = ReturnType<typeof RouteView>;
+export default RouteView;

package/dist/composables/useIsActiveRoute.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { Params } from "@real-router/core";
+export declare function useIsActiveRoute(routeName: string, params?: Params, strict?: boolean, ignoreQueryParams?: boolean): {
+    readonly current: boolean;
+};

package/dist/composables/useIsActiveRoute.svelte.js

@@ -0,0 +1,11 @@
+import { createActiveRouteSource } from "@real-router/sources";
+import { createReactiveSource } from "../createReactiveSource.svelte";
+import { useRouter } from "./useRouter.svelte";
+export function useIsActiveRoute(routeName, params, strict = false, ignoreQueryParams = true) {
+    const router = useRouter();
+    const source = createActiveRouteSource(router, routeName, params, {
+        strict,
+        ignoreQueryParams,
+    });
+    return createReactiveSource(source);
+}

package/dist/composables/useNavigator.svelte.d.ts

@@ -0,0 +1,2 @@
+import type { Navigator } from "@real-router/core";
+export declare const useNavigator: () => Navigator;

package/dist/composables/useNavigator.svelte.js

@@ -0,0 +1,9 @@
+import { getContext } from "svelte";
+import { NAVIGATOR_KEY } from "../context";
+export const useNavigator = () => {
+    const navigator = getContext(NAVIGATOR_KEY);
+    if (!navigator) {
+        throw new Error("useNavigator must be used within a RouterProvider");
+    }
+    return navigator;
+};

package/dist/composables/useRoute.svelte.d.ts

@@ -0,0 +1,2 @@
+import type { RouteContext } from "../types";
+export declare const useRoute: () => RouteContext;

package/dist/composables/useRoute.svelte.js

@@ -0,0 +1,9 @@
+import { getContext } from "svelte";
+import { ROUTE_KEY } from "../context";
+export const useRoute = () => {
+    const routeContext = getContext(ROUTE_KEY);
+    if (!routeContext) {
+        throw new Error("useRoute must be used within a RouterProvider");
+    }
+    return routeContext;
+};

package/dist/composables/useRouteNode.svelte.d.ts

@@ -0,0 +1,2 @@
+import type { RouteContext } from "../types";
+export declare function useRouteNode(nodeName: string): RouteContext;

package/dist/composables/useRouteNode.svelte.js

@@ -0,0 +1,27 @@
+import { getNavigator } from "@real-router/core";
+import { createRouteNodeSource } from "@real-router/sources";
+import { createReactiveSource } from "../createReactiveSource.svelte";
+import { useRouter } from "./useRouter.svelte";
+export function useRouteNode(nodeName) {
+    const router = useRouter();
+    const navigator = getNavigator(router);
+    const source = createRouteNodeSource(router, nodeName);
+    const reactive = createReactiveSource(source);
+    return {
+        navigator,
+        get route() {
+            return {
+                get current() {
+                    return reactive.current.route;
+                },
+            };
+        },
+        get previousRoute() {
+            return {
+                get current() {
+                    return reactive.current.previousRoute;
+                },
+            };
+        },
+    };
+}

package/dist/composables/useRouteUtils.svelte.d.ts

@@ -0,0 +1,2 @@
+import type { RouteUtils } from "@real-router/route-utils";
+export declare const useRouteUtils: () => RouteUtils;

package/dist/composables/useRouteUtils.svelte.js

@@ -0,0 +1,7 @@
+import { getPluginApi } from "@real-router/core/api";
+import { getRouteUtils } from "@real-router/route-utils";
+import { useRouter } from "./useRouter.svelte";
+export const useRouteUtils = () => {
+    const router = useRouter();
+    return getRouteUtils(getPluginApi(router).getTree());
+};

package/dist/composables/useRouter.svelte.d.ts

@@ -0,0 +1,2 @@
+import type { Router } from "@real-router/core";
+export declare const useRouter: () => Router;

package/dist/composables/useRouter.svelte.js

@@ -0,0 +1,9 @@
+import { getContext } from "svelte";
+import { ROUTER_KEY } from "../context";
+export const useRouter = () => {
+    const router = getContext(ROUTER_KEY);
+    if (!router) {
+        throw new Error("useRouter must be used within a RouterProvider");
+    }
+    return router;
+};

package/dist/composables/useRouterTransition.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { RouterTransitionSnapshot } from "@real-router/sources";
+export declare function useRouterTransition(): {
+    readonly current: RouterTransitionSnapshot;
+};

package/dist/composables/useRouterTransition.svelte.js

@@ -0,0 +1,8 @@
+import { createTransitionSource } from "@real-router/sources";
+import { createReactiveSource } from "../createReactiveSource.svelte";
+import { useRouter } from "./useRouter.svelte";
+export function useRouterTransition() {
+    const router = useRouter();
+    const source = createTransitionSource(router);
+    return createReactiveSource(source);
+}

package/dist/context.d.ts

@@ -0,0 +1,3 @@
+export declare const ROUTER_KEY = "real-router:router";
+export declare const NAVIGATOR_KEY = "real-router:navigator";
+export declare const ROUTE_KEY = "real-router:route";

package/dist/context.js

@@ -0,0 +1,3 @@
+export const ROUTER_KEY = "real-router:router";
+export const NAVIGATOR_KEY = "real-router:navigator";
+export const ROUTE_KEY = "real-router:route";

package/dist/createReactiveSource.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { RouterSource } from "@real-router/sources";
+export declare function createReactiveSource<T>(source: RouterSource<T>): {
+    readonly current: T;
+};

package/dist/createReactiveSource.svelte.js

@@ -0,0 +1,14 @@
+import { createSubscriber } from "svelte/reactivity";
+export function createReactiveSource(source) {
+    const subscribe = createSubscriber((update) => {
+        return source.subscribe(() => {
+            update();
+        });
+    });
+    return {
+        get current() {
+            subscribe();
+            return source.getSnapshot();
+        },
+    };
+}

package/dist/index.d.ts

@@ -0,0 +1,17 @@
+export { default as RouteView } from "./components/RouteView.svelte";
+export { default as Link } from "./components/Link.svelte";
+export { default as Lazy } from "./components/Lazy.svelte";
+export { createReactiveSource } from "./createReactiveSource.svelte";
+export { useRouter } from "./composables/useRouter.svelte";
+export { useNavigator } from "./composables/useNavigator.svelte";
+export { useRouteUtils } from "./composables/useRouteUtils.svelte";
+export { useRoute } from "./composables/useRoute.svelte";
+export { useRouteNode } from "./composables/useRouteNode.svelte";
+export { useRouterTransition } from "./composables/useRouterTransition.svelte";
+export { createLinkAction } from "./actions/link.svelte";
+export type { LinkActionParams } from "./actions/link.svelte";
+export { default as RouterProvider } from "./RouterProvider.svelte";
+export { ROUTER_KEY, NAVIGATOR_KEY, ROUTE_KEY } from "./context";
+export type { LinkProps, RouteContext } from "./types";
+export type { Navigator } from "@real-router/core";
+export type { RouterTransitionSnapshot } from "@real-router/sources";

package/dist/index.js

@@ -0,0 +1,18 @@
+// Components
+export { default as RouteView } from "./components/RouteView.svelte";
+export { default as Link } from "./components/Link.svelte";
+export { default as Lazy } from "./components/Lazy.svelte";
+// Reactive Primitives
+export { createReactiveSource } from "./createReactiveSource.svelte";
+// Composables
+export { useRouter } from "./composables/useRouter.svelte";
+export { useNavigator } from "./composables/useNavigator.svelte";
+export { useRouteUtils } from "./composables/useRouteUtils.svelte";
+export { useRoute } from "./composables/useRoute.svelte";
+export { useRouteNode } from "./composables/useRouteNode.svelte";
+export { useRouterTransition } from "./composables/useRouterTransition.svelte";
+// Actions
+export { createLinkAction } from "./actions/link.svelte";
+// Context
+export { default as RouterProvider } from "./RouterProvider.svelte";
+export { ROUTER_KEY, NAVIGATOR_KEY, ROUTE_KEY } from "./context";

package/dist/types.d.ts

@@ -0,0 +1,20 @@
+import type { NavigationOptions, Navigator, Params, State } from "@real-router/core";
+export interface RouteContext {
+    readonly navigator: Navigator;
+    readonly route: {
+        readonly current: State | undefined;
+    };
+    readonly previousRoute: {
+        readonly current: State | undefined;
+    };
+}
+export interface LinkProps<P extends Params = Params> {
+    readonly routeName: string;
+    readonly routeParams?: P;
+    readonly routeOptions?: NavigationOptions;
+    readonly class?: string;
+    readonly activeClassName?: string;
+    readonly activeStrict?: boolean;
+    readonly ignoreQueryParams?: boolean;
+    readonly target?: string;
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "@real-router/svelte",
+  "version": "0.0.1",
+  "type": "module",
+  "description": "Svelte 5 integration for Real-Router",
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "homepage": "https://github.com/greydragon888/real-router",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/greydragon888/real-router.git"
+  },
+  "bugs": {
+    "url": "https://github.com/greydragon888/real-router/issues"
+  },
+  "scripts": {
+    "build": "svelte-package -i src -o dist",
+    "test": "vitest",
+    "test:stress": "vitest run --config vitest.config.stress.mts",
+    "type-check": "svelte-check --tsconfig ./tsconfig.json",
+    "lint": "eslint --cache src/ tests/ --fix --max-warnings 0"
+  },
+  "keywords": [
+    "router",
+    "html5",
+    "history",
+    "tree",
+    "svelte",
+    "svelte5",
+    "runes",
+    "reactive",
+    "components",
+    "real-router"
+  ],
+  "author": {
+    "name": "Oleg Ivanov",
+    "email": "greydragon888@gmail.com",
+    "url": "https://github.com/greydragon888"
+  },
+  "license": "MIT",
+  "sideEffects": false,
+  "dependencies": {
+    "@real-router/core": "workspace:^",
+    "@real-router/route-utils": "workspace:^",
+    "@real-router/sources": "workspace:^",
+    "dom-utils": "workspace:^"
+  },
+  "devDependencies": {
+    "@real-router/browser-plugin": "workspace:^",
+    "@sveltejs/package": "2.5.7",
+    "@sveltejs/vite-plugin-svelte": "6.2.4",
+    "@testing-library/jest-dom": "6.9.1",
+    "@testing-library/svelte": "5.3.1",
+    "@testing-library/user-event": "14.6.1",
+    "eslint-plugin-svelte": "3.15.2",
+    "svelte": "5.54.0",
+    "svelte-check": "4.4.5",
+    "svelte-eslint-parser": "1.6.0"
+  },
+  "peerDependencies": {
+    "svelte": ">=5.7.0"
+  }
+}

package/src/RouterProvider.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import { getNavigator } from "@real-router/core";
+  import { createRouteSource } from "@real-router/sources";
+  import { createRouteAnnouncer } from "dom-utils";
+  import { setContext } from "svelte";
+
+  import { createReactiveSource } from "./createReactiveSource.svelte";
+  import { NAVIGATOR_KEY, ROUTE_KEY, ROUTER_KEY } from "./context";
+
+  import type { Router } from "@real-router/core";
+  import type { Snippet } from "svelte";
+
+  let {
+    router,
+    children,
+    announceNavigation,
+  }: { router: Router; children: Snippet; announceNavigation?: boolean } =
+    $props();
+
+  $effect(() => {
+    if (!announceNavigation) return;
+    const announcer = createRouteAnnouncer(router);
+    return () => announcer.destroy();
+  });
+
+  const navigator = getNavigator(router);
+  const source = createRouteSource(router);
+  const reactive = createReactiveSource(source);
+
+  setContext(ROUTER_KEY, router);
+  setContext(NAVIGATOR_KEY, navigator);
+  setContext(ROUTE_KEY, {
+    navigator,
+    get route() {
+      return {
+        get current() {
+          return reactive.current.route;
+        },
+      };
+    },
+    get previousRoute() {
+      return {
+        get current() {
+          return reactive.current.previousRoute;
+        },
+      };
+    },
+  });
+</script>
+
+{@render children()}

package/src/actions/link.svelte.ts

@@ -0,0 +1,90 @@
+import { getContext } from "svelte";
+import type { ActionReturn } from "svelte/action";
+import type { Router, Params, NavigationOptions } from "@real-router/core";
+import { ROUTER_KEY } from "../context";
+import { shouldNavigate, applyLinkA11y } from "dom-utils";
+
+export interface LinkActionParams {
+  name: string;
+  params?: Params;
+  options?: NavigationOptions;
+}
+
+/**
+ * Factory function that captures router context during component initialization.
+ * Must be called during component init (not inside event handlers or effects).
+ *
+ * @returns Action function for use with `use:` directive
+ * @throws Error if called outside RouterProvider
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { createLinkAction } from '@real-router/svelte';
+ *   const link = createLinkAction();
+ * </script>
+ *
+ * <button use:link={{ name: 'home' }}>Home</button>
+ * <a use:link={{ name: 'users', params: { id: '123' } }}>User Profile</a>
+ * ```
+ */
+export function createLinkAction(): (
+  node: HTMLElement,
+  params: LinkActionParams,
+) => ActionReturn<LinkActionParams> {
+  const router = getContext<Router | undefined>(ROUTER_KEY);
+
+  if (!router) {
+    throw new Error("createLinkAction must be called inside a RouterProvider");
+  }
+
+  return function link(
+    node: HTMLElement,
+    params: LinkActionParams,
+  ): ActionReturn<LinkActionParams> {
+    let currentParams = params;
+
+    applyLinkA11y(node);
+
+    function handleClick(evt: MouseEvent) {
+      if (!shouldNavigate(evt)) return;
+      evt.preventDefault();
+      // router is guaranteed to exist due to check in factory
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      router!
+        .navigate(
+          currentParams.name,
+          currentParams.params ?? {},
+          currentParams.options ?? {},
+        )
+        .catch(() => {});
+    }
+
+    function handleKeyDown(evt: KeyboardEvent) {
+      if (evt.key === "Enter" && !(node instanceof HTMLButtonElement)) {
+        // router is guaranteed to exist due to check in factory
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        router!
+          .navigate(
+            currentParams.name,
+            currentParams.params ?? {},
+            currentParams.options ?? {},
+          )
+          .catch(() => {});
+      }
+    }
+
+    node.addEventListener("click", handleClick);
+    node.addEventListener("keydown", handleKeyDown);
+
+    return {
+      update(newParams: LinkActionParams) {
+        currentParams = newParams;
+      },
+      destroy() {
+        node.removeEventListener("click", handleClick);
+        node.removeEventListener("keydown", handleKeyDown);
+      },
+    };
+  };
+}

package/src/components/Lazy.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import type { Component } from "svelte";
+
+  let {
+    loader,
+    fallback,
+  }: {
+    loader: () => Promise<{ default: Component }>;
+    fallback?: Component | undefined;
+  } = $props();
+
+  let LoadedComponent = $state<Component | null>(null);
+  let error = $state<Error | null>(null);
+  let loading = $state(true);
+
+  $effect(() => {
+    loading = true;
+    error = null;
+    LoadedComponent = null;
+    let active = true;
+
+    loader()
+      .then((module) => {
+        if (!active) return;
+        LoadedComponent = module.default;
+        loading = false;
+      })
+      .catch((err) => {
+        if (!active) return;
+        error = err;
+        loading = false;
+      });
+
+    return () => {
+      active = false;
+    };
+  });
+</script>
+
+{#if loading && fallback}
+  {@const Fallback = fallback}
+  <Fallback />
+{:else if error}
+  <p>Error loading component: {error.message}</p>
+{:else if LoadedComponent}
+  <LoadedComponent />
+{/if}

package/src/components/Link.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+  import { useIsActiveRoute } from "../composables/useIsActiveRoute.svelte";
+  import { useRouter } from "../composables/useRouter.svelte";
+  import { shouldNavigate, buildHref, buildActiveClassName } from "dom-utils";
+
+  import type { NavigationOptions, Params } from "@real-router/core";
+  import type { Snippet } from "svelte";
+
+  let {
+    routeName,
+    routeParams = {} as Params,
+    routeOptions = {} as NavigationOptions,
+    class: className = undefined,
+    activeClassName = "active",
+    activeStrict = false,
+    ignoreQueryParams = true,
+    target = undefined,
+    children = undefined,
+    onclick: userOnClick = undefined,
+    ...restProps
+  }: {
+    routeName: string;
+    routeParams?: Params;
+    routeOptions?: NavigationOptions;
+    class?: string;
+    activeClassName?: string;
+    activeStrict?: boolean;
+    ignoreQueryParams?: boolean;
+    target?: string;
+    children?: Snippet;
+    onclick?: (evt: MouseEvent) => void;
+    [key: string]: unknown;
+  } = $props();
+
+  const router = useRouter();
+  const activeState = useIsActiveRoute(
+    routeName,
+    routeParams,
+    activeStrict,
+    ignoreQueryParams,
+  );
+
+  const href = $derived(buildHref(router, routeName, routeParams));
+
+  const finalClassName = $derived(
+    buildActiveClassName(activeState.current, activeClassName, className),
+  );
+
+  function handleClick(evt: MouseEvent) {
+    if (userOnClick) {
+      userOnClick(evt);
+
+      if (evt.defaultPrevented) {
+        return;
+      }
+    }
+
+    if (!shouldNavigate(evt) || target === "_blank") {
+      return;
+    }
+
+    evt.preventDefault();
+    router.navigate(routeName, routeParams, routeOptions).catch(() => {});
+  }
+</script>
+
+<a {href} class={finalClassName} {target} onclick={handleClick} {...restProps}>
+  {@render children?.()}
+</a>

package/src/components/RouteView.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import { UNKNOWN_ROUTE } from "@real-router/core";
+  import { startsWithSegment } from "@real-router/route-utils";
+
+  import { useRouteNode } from "../composables/useRouteNode.svelte";
+
+  import type { Snippet } from "svelte";
+
+  let {
+    nodeName,
+    notFound,
+    ...segmentSnippets
+  }: {
+    nodeName: string;
+    notFound?: Snippet;
+    [key: string]: Snippet | string | undefined;
+  } = $props();
+
+  const routeContext = useRouteNode(nodeName);
+
+  function getActiveSegment(
+    routeName: string,
+    node: string,
+    snippets: Record<string, unknown>,
+  ): string {
+    for (const segment of Object.keys(snippets)) {
+      const fullSegmentName = node ? `${node}.${segment}` : segment;
+
+      if (startsWithSegment(routeName, fullSegmentName)) {
+        return segment;
+      }
+    }
+
+    return "";
+  }
+</script>
+
+{#if routeContext.route.current}
+  {@const route = routeContext.route.current}
+  {@const segment = getActiveSegment(route.name, nodeName, segmentSnippets)}
+  {#if segment && segmentSnippets[segment]}
+    {@render (segmentSnippets[segment] as Snippet)()}
+  {:else if route.name === UNKNOWN_ROUTE && notFound}
+    {@render notFound()}
+  {/if}
+{/if}