### Basic Svelte5 Router Usage

Source: https://github.com/mateothegreat/svelte5-router/blob/main/docs/getting-started.md

Demonstrates how to use the Router component in a Svelte application. It defines a list of routes, each mapping a path to a component, and passes this configuration to the Router. Assumes `Home`, `Products`, and `Settings` components are defined elsewhere.

```svelte
<script lang="ts">
  import { Router, type RouteConfig } from "@mateothegreat/svelte5-router";

  const routes: RouteConfig[] = [
    {
      component: Home
    }
    {
      path: "products",
      component: Products
    },
    {
      path: "settings",
      component: Settings
    }
  ];
</script>

<Router {routes} />
```

--------------------------------

### Svelte5 Router Basic Route Setup

Source: https://github.com/mateothegreat/svelte5-router/blob/main/llms.txt

Illustrates the basic setup for routes in Svelte5 Router, including defining route configurations with paths and components. It shows how to import necessary types and components for routing.

```svelte
<script lang="ts">
  import { RouterInstance, type Route } from "@mateothegreat/svelte5-router";
  import Router from "@mateothegreat/svelte5-router/router.svelte";

  let router: RouterInstance = $state();

  const routes: Route[] = [
    {
      // Starting paths with "/" is not required, but it's a good idea to
      // do so for clarity in some cases.
      //
    }
  ];
</script>

<Router bind:instance={router} {routes} />
```

--------------------------------

### Display Route Properties Example

Source: https://github.com/mateothegreat/svelte5-router/blob/main/docs/llms.txt

An example of how to display route properties, specifically focusing on matching paths with query parameters. It shows how to use the 'querystring' configuration option and accesses route results.

```svelte
<script lang="ts">
  let { route } = $props();
</script>

<div class="flex flex-col gap-4 border-t-2 border-slate-800 pt-4">
  <div class="flex flex-col gap-5">
    <div class="w-fit px-2 flex items-center gap-1 font-bold text-indigo-300 bg-gray-800 rounded-sm p-2">
      match path
      <InlineCode text={route.route.path.toString()} />
      to
      <InlineCode text={`${route.route.path}?someQueryParam=123`} />
    </div>
    <div class="flex flex-col gap-4 text-sm text-gray-400">
      <div class=" gap-1">
        This demo shows how to use the route's
        <InlineCode text="querystring" />
        configuration option to match against the current
        <InlineCode text="location.search" />
        value passed in by the browser.
      </div>
      <Badge
        variant="success"
        class="w-fit">
        Because we did not specify any <InlineCode text="querystring" /> parameters, the route render regardless of the
        <InlineCode text="querystring" /> and will be passed to the component as shown below.
      </Badge>
    </div>
  </div>
  <Code
    title={"{#snippet displayRouteProps()}"}
    file="src/routes/home.svelte">
    {JSON.stringify(route.result, null, 2)}
  </Code>
</div>

```

--------------------------------

### Query Class Test Suite Setup (TypeScript)

Source: https://github.com/mateothegreat/svelte5-router/blob/main/docs/llms.txt

This snippet demonstrates the setup for testing the `Query` class using Vitest. It imports the necessary testing utilities and the `Query` class itself, preparing for unit tests.

```typescript
import { describe, expect, test } from "vitest";

import { Query } from "./query.svelte";

describe("query", () => {
  test("should create a query object from a string", () => {
    // Test implementation would follow
  });
});

```

--------------------------------

### Installation of Svelte 5 SPA Router

Source: https://github.com/mateothegreat/svelte5-router/blob/main/llms.txt

Provides the npm command to install the Svelte 5 SPA Router package. This is the initial step required to integrate the router into a Svelte 5 project.

```bash
npm install @mateothegreat/svelte5-router

```

--------------------------------

### Install Svelte 5 SPA Router

Source: https://github.com/mateothegreat/svelte5-router/blob/main/docs/readme.md

Installs the svelte5-router package using npm. This is the initial step to integrate the router into your Svelte application.

```bash
npm install @mateothegreat/svelte5-router
```

--------------------------------

### Route Querystring Matching Example (TypeScript)

Source: https://github.com/mateothegreat/svelte5-router/blob/main/docs/llms.txt

Provides an example of the querystring evaluation results within a RouteResult. It shows the condition, original querystring data, and extracted parameters.

```typescript
// For URL "?filter=active&page=2"
const querystringResult = {
  condition: "exact-match",
  original: { filter: "active", page: "2" },
  params: { filter: "active", page: "2" }
};
```

--------------------------------

### Querystring Parameter Example (TypeScript)

Source: https://github.com/mateothegreat/svelte5-router/blob/main/docs/llms.txt

Demonstrates the 'original' property of the querystring result, showing both parsed object and raw string formats for query parameters.

```typescript
// Parsed object format
original: { filter: "active", sort: "name" }

// Raw string format
original: "filter=active&sort=name"
```

--------------------------------

### Svelte 5 Router: Protected Route Authentication Example

Source: https://github.com/mateothegreat/svelte5-router/blob/main/docs/llms.txt

This example demonstrates how to set up protected routes in a Svelte 5 application using a custom router. It includes a login route and an authentication guard ('authGuardFast') to control access to the 'manage-account' route. The 'pre' hook in the route configuration is used to execute the authentication guard before rendering the component.

```svelte
<script>
  let { route } = $props();

  /**
   * This is a helper state variable that can be used to determine if the
   * current route is the same as the route that is being rendered so
   * that we can show a badge to indicate this is the last router in the
   * nested routing hierarchy.
   */
  let end = $state(true);

  $effect(() => {
    end = 
      router.current?.result.path.condition === "default-match" ||
      location.pathname === "/protected/login" ||
      location.pathname === "/protected/denied";
  });
</script>

{#snippet snippet()}
  <div class="rounded-md border-4 border-slate-400 bg-gradient-to-b from-blue-100 to-blue-300">
    <div class="mx-auto max-w-6xl px-4 py-12">
      <div class="mb-16 text-center">
        <h1 class="mb-6 text-4xl font-bold text-blue-500 md:text-6xl">Welcome to SPA Router Bank!</h1>
        <p class="mb-8 text-xl text-black">Your trusted partner in routing.</p>
        <button
          onclick={() => goto("/protected/login")}
          class="mx-auto flex items-center gap-2 rounded-lg bg-blue-600 px-8 py-3 font-semibold text-white transition-colors hover:bg-blue-700">
          Login <ArrowRight size={20} />
        </button>
      </div>
      <div class="mb-16 grid gap-8 md:grid-cols-3">
        <div class="rounded-xl bg-white p-6 shadow-md transition-shadow hover:shadow-lg">
          <Shield class="mb-4 h-12 w-12 text-blue-600" />
          <h3 class="mb-2 text-xl font-semibold text-gray-800">Secure Banking</h3>
          <p class="text-gray-600">State-of-the-art security measures to protect your financial data</p>
        </div>
        <div class="rounded-xl bg-white p-6 shadow-md transition-shadow hover:shadow-lg">
          <Building2 class="mb-4 h-12 w-12 text-blue-600" />
          <h3 class="mb-2 text-xl font-semibold text-gray-800">Business Solutions</h3>
          <p class="text-gray-600">Comprehensive banking solutions for businesses of all sizes</p>
        </div>
        <div class="rounded-xl bg-white p-6 shadow-md transition-shadow hover:shadow-lg">
          <Wallet class="mb-4 h-12 w-12 text-blue-600" />
          <h3 class="mb-2 text-xl font-semibold text-gray-800">Personal Banking</h3>
          <p class="text-gray-600">Tailored financial services for your personal needs</p>
        </div>
      </div>
    </div>
  </div>
{/snippet}

<RouteWrapper
  {router}
  name="/protected"
  {route}
  {end}
  title={{
    file: "src/routes/protected/main.svelte",
    content: "Demo to show how you can use hooks to control the navigation of your app to control authentication, etc."
  }}
  links={[
    {
      href: "/protected",
      label: "default path",
      options: {
        active: {
          absolute: true
        }
      }
    },
    {
      href: "/protected/login",
      label: "/protected/login"
    },
    {
      href: "/protected/manage-account",
      label: "/protected/manage-account"
    },
    {
      href: "/protected/denied",
      label: "/protected/denied"
    }
  ]}>
  <Router
    id="protected-router"
    basePath="/protected"
    bind:instance={router}
    routes={[    
      {
        component: snippet
      },
      {
        path: "login",
        component: Login
      },
      {
        path: "manage-account",
        component: async () => import("./manage-account/manage-account.svelte"),
        hooks: {
          pre: authGuardFast
        },
      },
      {
        path: "denied",
        component: Denied
      }
    ]}
    {...myDefaultRouterConfig} />
</RouteWrapper>

{#if registry.get("manage-account-router")?.navigating}
  <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
    <div class="flex flex-col items-center gap-4 rounded-md border-2 border-green-400 bg-black/70 px-20 py-6">
      <Loader2 class="h-12 w-12 text-green-500  animate-spin" />
      <div class="text-slate-300 font-bold">Doing some work...</div>
      <div class="text-slate-400 w-96 text-center">
        We've added some pre and post hooks to the manage-account router to simulate doing some work.
      </div>
    </div>
  </div>
{/if}
```

--------------------------------

### Main Protected Route Setup

Source: https://github.com/mateothegreat/svelte5-router/blob/main/docs/llms.txt

Sets up the main protected route in the application using svelte5-router. It imports necessary components and utilities, including authentication guards and the router instance.

```svelte
<script lang="ts">
  import RouteWrapper from "$lib/components/routes/route-wrapper.svelte";
  import { myDefaultRouterConfig } from "$lib/default-route-config";
  import { goto, registry, Router, RouterInstance } from "@mateothegreat/svelte5-router";
  import { ArrowRight, Building2, Loader2, Shield, Wallet } from "lucide-svelte";
  import Denied from "./denied.svelte";
  import Login from "./login.svelte";
  import { authGuardFast } from "./manage-account/auth-guard-fast";

  let router: RouterInstance = $state();

```

--------------------------------

### Vitest Setup with Jest DOM

Source: https://github.com/mateothegreat/svelte5-router/blob/main/docs/llms.txt

Sets up Vitest testing environment by importing the Jest DOM matchers for testing DOM elements within Svelte components.

```typescript
import '@testing-library/jest-dom/vitest';
```

--------------------------------

### Svelte Preprocessor Configuration

Source: https://github.com/mateothegreat/svelte5-router/blob/main/llms.txt

Basic Svelte configuration using Vite's preprocessor. This setup is minimal and assumes standard Svelte preprocessing needs.

```typescript
import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";

export default {
	preprocess: [vitePreprocess({})]
};

```

--------------------------------

### Nested Path Matching in Svelte

Source: https://github.com/mateothegreat/svelte5-router/blob/main/docs/llms.txt

This Svelte component illustrates how to configure routes to match nested paths. It shows a scenario where a route can match any path starting with a specific prefix, allowing for further sub-path matching. The example also displays the route props passed to the component.

```html
<div class="flex flex-col gap-4 p-4">
  <div>
    <h1 class="text-xl font-semibold text-slate-200">Nested Paths</h1>
    <p class="text-slate-400">
      This example will match any path that starts with `/path/path/path` and can be nested further.
    </p>
  </div>
  <div class="bg-slate-800/50 rounded-lg p-3">
    <h3 class="text-sm font-medium text-slate-300 mb-2">Route Props:</h3>
    <pre class="text-xs text-slate-400 overflow-auto">{JSON.stringify(props, null, 2)}</pre>
  </div>
</div>
```

--------------------------------

### Welcome Snippet for Svelte 5 Router - Svelte

Source: https://github.com/mateothegreat/svelte5-router/blob/main/llms.txt

A welcome snippet for the svelte5-router. It displays the project title, provides a brief description of the router's capabilities, and includes links to the documentation, GitHub repository, and issue tracker. It also lists key features and installation instructions.

```html
<!DOCTYPE html>
{#snippet welcome()}
  <div class="flex flex-col gap-5 rounded-md border-2 border-gray-800 bg-gray-800/50 p-4 text-sm text-slate-300">
    <h1 class="text-xl font-bold">Single Page Application Router (SPAR) for Svelte 5+</h1>
    <p>
      <InlineCode
        text="@mateothegreat/svelte5-router"
        class="bg-black text-blue-500" /> is an SPA router for Svelte that allows you to divide & conquer your app with nested
      routers, snippets, and more.
    </p>
    <div class="flex gap-3">
      <div
        class="flex h-9 cursor-pointer items-center gap-1 rounded-sm border-2 border-slate-400 bg-violet-600 p-2 transition-all duration-500 hover:bg-blue-600">
        <Newspaper class="h-5 w-5" />
        <a
          target="_blank"
          href="https://github.com/mateothegreat/svelte5-router/blob/main/docs/readme.md"
          class="">
          Documentation
        </a>
      </div>
      <div
        class="flex h-9 cursor-pointer items-center gap-1 rounded-sm border-2 border-slate-400 bg-slate-600 p-2 transition-all duration-500 hover:bg-blue-600">
        <Github class="h-5 w-5" />
        <a
          target="_blank"
          href="https://github.com/mateothegreat/svelte5-router"
          class="">
          GitHub Repository
        </a>
      </div>
      <div
        class="flex h-9 cursor-pointer items-center gap-1 rounded-sm border-2 border-slate-400 bg-slate-600 p-2 transition-all duration-500 hover:bg-blue-600">
        <MessageCircleQuestion class="h-5 w-5" />
        <a href="https://github.com/mateothegreat/svelte5-router/issues">GitHub Issues</a>
      </div>
    </div>
    <div class="flex flex-col gap-2">
      <h2 class="text-lg font-semibold text-indigo-400">Features</h2>
      <ul class="list-disc space-y-1 pl-6 text-slate-300">
        <li>Built for Svelte 5 🚀!</li>
        <li>Divide & conquer - use nested routers all over the place</li>
        <li class="text-teal-400">Use components, snippets, or both 🔥!</li>
        <li>Use regex paths (e.g. /foo/(.*?)/bar) and/or named parameters together</li>
        <li>Use async routes simply with component: async () => import("./my-component.svelte")</li>
        <li class="font-bold">Add hooks to your routes to control the navigation flow 🔧</li>
        <li>Automagic styling of your anchor tags 💄</li>
        <li>Helper methods 🛠️ to make your life easier</li>
        <li>Debugging tools included 🔍</li>
      </ul>
    </div>
    <div class="flex items-center">
      Get started now with
      <InlineCode
        text="npm install @mateothegreat/svelte5-router"
        class="mx-1 bg-black" />
      and check out the
      <a
        class="mx-1 cursor-pointer text-violet-400 hover:text-green-500 hover:underline"
        href="https://github.com/mateothegreat/svelte5-router/blob/main/docs/getting-started.md">
        getting started guide..
      </a>
    </div>
  </div>
{/snippet}
```

--------------------------------

### Route Path Matching Example (TypeScript)

Source: https://github.com/mateothegreat/svelte5-router/blob/main/docs/llms.txt

Illustrates the structure of a path result object for a route. It shows the condition, original path, and extracted parameters, particularly for routes with dynamic segments.

```typescript
// For a route with path "/users/:id" and URL "/users/123"
const pathResult = {
  condition: "exact-match",
  original: "/users/123",
  params: { id: "123" }
};
```

--------------------------------

### Basic Route Configuration

Source: https://github.com/mateothegreat/svelte5-router/blob/main/docs/llms.txt

Configures a basic route setup with a default home route and an about route. The routes are defined as an array of RouteConfig objects and then passed to the Router component.

```ts
const routes: RouteConfig[] = [
  {
    // Notice that we don't need to specify the path.
    // The router will use this route as the default route when "/" is visited.
    component: Home
  },
  {
    path: "/about",
    component: About
  }
];
```

```svelte
<Router {routes} />
```

--------------------------------

### RouteResult Path Evaluation Example (TypeScript)

Source: https://github.com/mateothegreat/svelte5-router/blob/main/docs/llms.txt

Demonstrates how to access path evaluation results from a RouteResult object. This includes the original path, matched parameters, and the matching condition.

```typescript
console.log(routeResult.result.path.original); // "/users/123"
console.log(routeResult.result.path.params?.id); // "123"
console.log(routeResult.result.status); // 200
```

--------------------------------

### QueryString Class Usage for URL Query Parameters

Source: https://github.com/mateothegreat/svelte5-router/blob/main/docs/llms.txt

Demonstrates basic usage of the QueryString class for getting, setting, and converting query parameters to a string. It also shows how to navigate with query parameters. This class is part of the @mateothegreat/svelte5-router library.

```typescript
import { QueryString } from "@mateothegreat/svelte5-router";

const query = new QueryString();

query.get("foo", "bar"); // "bar"
query.set("baz", "qux");
query.toString();        // "foo=bar&baz=qux"

// ...
query.set("foo", "baz");
query.set("baz", "qux");
// ...

query.goto("/test"); // Navigates to "/test?foo=baz&baz=qux"

// Alternatively, pass query object directly to goto:
goto("/test", { foo: "baz" }); // Navigates to "/test?foo=baz"
```

--------------------------------

### Configure Active Action Options (Svelte)

Source: https://github.com/mateothegreat/svelte5-router/blob/main/docs/llms.txt

The `active` action accepts a subset of the `route` action's options, specifically for configuring the active state. This example demonstrates setting CSS classes, enabling `absolute` path matching, and `querystring` matching for the active state.

```svelte
<a 
  href="/dashboard" 
  use:active={{
    active: {
      class: ['text-blue-600', 'font-bold'],
      absolute: true,
      querystring: true
    }
  }}>
  Dashboard
</a>
```

--------------------------------

### Svelte 5 Router Component Usage

Source: https://github.com/mateothegreat/svelte5-router/blob/main/llms.txt

Demonstrates the usage of the Svelte 5 Router component to manage navigation within the application. It includes examples of setting up a base path, binding the router instance, and defining navigation links with specific options.

```svelte
<RouteWrapper
  {router}
  name="/paths-and-params"
  {route}
  end={true}
  title={{
    file: "src/routes/paths-and-params/paths-and-params.svelte",
    content: "This demo shows how to pass values downstream to the component that is rendered."
  }}
  links={[    {
      href: "/paths-and-params",
      label: "default path",
      options: {
        active: {
          absolute: true
        }
      }
    },
    {
      href: "/paths-and-params/foo",
      label: "foo"
    },
    {
      href: "/paths-and-params/query-matcher?pagination=2,23&company=123",
      label: "query-matcher?pagination=2,23&company=123"
    },
    {
      href: `/paths-and-params/query-matcher?string=123&float=${randoms.float}`,
      label: `query-matcher?string=123&float=${randoms.float}`
    }
  ]}>
  <Router
    id="props-router"
    basePath="/paths-and-params"
    bind:instance={router}
  />
</RouteWrapper>
```

--------------------------------

### Svelte Component: RouteWrapper Configuration

Source: https://github.com/mateothegreat/svelte5-router/blob/main/docs/llms.txt

Illustrates the configuration of a `RouteWrapper` component in Svelte, likely used for rendering routes and providing navigation context. It includes an example of setting up navigation links with active state options and passing router and route data.

```svelte
<RouteWrapper
  name="main app router"
  title={{
    file: "src/app.svelte",
    content:
      "This is the main app component, it contains the top level router and then uses nested routers to divide and conquer your complex routing requirements! 🚀"
  }}
  {router}
  {route}
  links={[
    {
      href: "/",
      label: "/",
      options: {
        active: {
          absolute: true
        }
      }
    },
    {
      href: "/home",
      label: "/home"
    },
    {
      href: "/patterns",
      label: "/patterns"
    },
    {
      href: "/protected",
      label: "/protected"
    },
    {
      href: "/paths-and-params",
      label: "/paths-and-params"
    },
    {
      href: "/nested",
      label: "/nested"
    },
    {
      href: "/transitions",
      label: "/transitions"
    },
    {

```

--------------------------------

### Query Class: Constructor and Basic Operations (TypeScript)

Source: https://github.com/mateothegreat/svelte5-router/blob/main/llms.txt

Initializes a Query object from various inputs (string, object, or another Query instance) and provides methods for managing query parameters: get, set, delete, and clear. It handles marshaling of input data into a usable format.

```typescript
import { marshal } from "./helpers/marshal";
import type { ReturnParam } from "./helpers/urls";

export type QueryType<T = unknown> = Record<string, string | number | RegExp | Function | Promise<T>>;

export class Query {
  params: Record<string, ReturnParam> = {};
  original?: string;

  constructor(query?: Record<string, string> | string | Query | Record<string, ReturnParam>) {
    if (typeof query === "string") {
      this.original = query;
    }

    if (query) {
      const marshalled = marshal(query);
      if (marshalled.value) {
        this.params = marshalled.value as Record<string, ReturnParam>;
      }
    }
  }

  get<T>(key: string, defaultValue?: T): T {
    return (this.params[key] as T) || defaultValue;
  }

  set(key: string, value: string) {}

  delete(key: string) {
    delete this.params[key];
  }

  clear() {
    this.params = {};
  }

  goto(path: string) {
    goto(path, this.params);
  }

  toString() {
    const stringifyValue = (value: any): string => {
      if (Array.isArray(value)) {
        return value.map((v) => stringifyValue(v)).join(",");
      }
      if (typeof value === "object" && value !== null) {
        return Object.entries(value)
          .map(([k, v]) => `${k}:${stringifyValue(v)}`)
          .join(",");
      }
      return encodeURIComponent(value);
    };

    return Object.entries(this.params)
      .map(([key, value]) => `${encodeURIComponent(key)}=${stringifyValue(value)}`)
      .join("&");
  }

  toJSON(preserveOriginal?: boolean) {
    return Object.fromEntries(Object.entries(this.params).map(([key, value]) => [key, value.toString()]));
  }
}

```

--------------------------------

### Accessing Props in a Svelte Component

Source: https://github.com/mateothegreat/svelte5-router/blob/main/llms.txt

Illustrates how to access props passed to a Svelte component from the router. The example uses the `$props()` store to get the `route` object, which contains `params`, `props`, `query`, and other route-related information. This is typically used within a Svelte component rendered by the router.

```svelte
<script lang="ts">
  let { route } = $props();
</script>

<pre>{JSON.JSON.stringify(route, null, 2)}</pre>

```

--------------------------------

### Display User Welcome Message with Quick Stats - Svelte

Source: https://github.com/mateothegreat/svelte5-router/blob/main/docs/llms.txt

Renders a welcome message for the user and displays their quick financial statistics. It uses svelte/transition for a fade-in effect and lucide-svelte icons for visual representation. The data is hardcoded for demonstration purposes.

```svelte
<script lang="ts">
  import { route } from "@mateothegreat/svelte5-router";
  import { Activity, PiggyBank, Send, Wallet } from "lucide-svelte";
  import { fade } from "svelte/transition";

  // Fake user data
  const userData = {
    name: "Svelte Boss",
    lastLogin: new Date().toLocaleString(),
    quickStats: [
      { title: "Total Balance", amount: "$45,250.80", icon: Wallet },
      { title: "Monthly Savings", amount: "$2,450.00", icon: PiggyBank },
      { title: "Recent Activity", count: "12 transactions", icon: Activity }
    ]
  };
</script>

<div
  class="p-6"
  in:fade={{ duration: 300 }}>
  <div class="mb-6">
    <h1 class="text-2xl text-gray-400">
      Welcome back,
      <span class="text-indigo-400 font-bold">{userData.name}</span>
    </h1>
    <p class="text-gray-400">Last login: {userData.lastLogin}</p>
  </div>

  <div class="grid gap-6 md:grid-cols-3">
    {#each userData.quickStats as stat}
      <div class="rounded-xl bg-slate-700/30 p-6 shadow-lg transition-transform hover:scale-[1.02]">
        <div class="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-blue-100">
          <svelte:component
            this={stat.icon}
            class="h-6 w-6 text-blue-600" />
        </div>
        <h3 class="text-lg text-gray-400">{stat.title}</h3>
        <p class="mt-1 text-xl font-bold text-green-400">{stat.amount || stat.count}</p>
      </div>
    {/each}
  </div>

  <div class="mt-8">
    <a
      use:route
      href="/protected/manage-account/balance"
      class="flex items-center justify-center gap-2 rounded-lg bg-blue-600 px-6 py-4 font-semibold text-white transition-colors hover:bg-blue-700">
      <Send class="h-5 w-5" />
      View Balance
    </a>
  </div>
</div>

```

--------------------------------

### Testing Generic Type Example

Source: https://github.com/mateothegreat/svelte5-router/blob/main/llms.txt

Demonstrates the 'Testing' generic type, which can be used to create variables of a specified type. The examples show its usage with string and number types.

```typescript
export type Testing<T> = T;

// Example usage:
// const a: Testing<string> = "asdf";
// const b: Testing<number> = 123;
```

--------------------------------

### Helper Function: goto

Source: https://github.com/mateothegreat/svelte5-router/blob/main/docs/llms.txt

Demonstrates the usage of the `goto` helper function for programmatic navigation within the Svelte5 Router. It allows specifying a path and optional query parameters.

```typescript
goto("/foo", { bar: "baz" });
```

--------------------------------

### Main Router Configuration and Entry Point in Svelte

Source: https://github.com/mateothegreat/svelte5-router/blob/main/llms.txt

This Svelte component configures and initializes the svelte5-router for the application. It sets up route definitions, applies a default configuration, and includes a session management store. The component also demonstrates the use of a custom authentication guard ('authGuardSlow') for protected routes. It renders a 'RouteWrapper' to handle route rendering and navigation.

```html
<script lang="ts">
  import RouteWrapper from "$lib/components/routes/route-wrapper.svelte";
  import { myDefaultRouterConfig } from "$lib/default-route-config";
  import { session } from "$lib/session.svelte";
  import { goto, Router, RouterInstance } from "@mateothegreat/svelte5-router";
  import { ArrowRight, Building2, Shield, Wallet } from "lucide-svelte";
  import { client } from "../account-state.svelte";
  import { authGuardSlow } from "./auth-guard-slow";
  import Balance from "./balance.svelte";
  import Home from "./home.svelte";

  let router: RouterInstance = $state();
  let { route } = $props();
</script>

{#snippet snippet()}
  <div class="rounded-md border-4 border-slate-400 bg-gradient-to-b from-blue-100 to-blue-300">
    <div class="mx-auto max-w-6xl px-4 py-12">
      <div class="mb-16 text-center">
        <h1 class="mb-6 text-4xl font-bold text-blue-500 md:text-6xl">Welcome to SPA Router Bank!</h1>
        <p class="mb-8 text-xl text-black">Your trusted partner in routing.</p>
        <button
          onclick={() => goto("/protected/login")}
          class="mx-auto flex items-center gap-2 rounded-lg bg-blue-600 px-8 py-3 font-semibold text-white transition-colors hover:bg-blue-700">
          Login <ArrowRight size={20} />
        </button>
      </div>
      <div class="mb-16 grid gap-8 md:grid-cols-3">
        <div class="rounded-xl bg-white p-6 shadow-md transition-shadow hover:shadow-lg">
          <Shield class="mb-4 h-12 w-12 text-blue-600" />
          <h3 class="mb-2 text-xl font-semibold text-gray-800">Secure Banking</h3>
          <p class="text-gray-600">State-of-the-art security measures to protect your financial data</p>
        </div>
        <div class="rounded-xl bg-white p-6 shadow-md transition-shadow hover:shadow-lg">
          <Building2 class="mb-4 h-12 w-12 text-blue-600" />
          <h3 class="mb-2 text-xl font-semibold text-gray-800">Business Solutions</h3>

```

--------------------------------

### Svelte Router Initialization and State Management

Source: https://github.com/mateothegreat/svelte5-router/blob/main/docs/llms.txt

This Svelte component code demonstrates the initialization and registration of a router instance. It includes tracing for component mounting and handles state changes, ensuring proper cleanup via onDestroy. Dependencies include a RouterInstanceConfig, tracing utilities, and Svelte's onDestroy lifecycle function.

```svelte
<script>
  // ... other imports and definitions

  router = registry.register(new RouterInstanceConfig(rest), apply, span);

  span?.trace({
    prefix: "✅",
    name: "<Router/> Component",
    description: "new component mounted",
    metadata: {
      router: {
        id: router.config.id,
        basePath: router.config.basePath
      },
      location: "/src/lib/router.svelte:mount()"
    }
  });

  instance = router;

  if (span) {
    span.metadata = {
      router: router.config.id
    };
  }

  router.handleStateChange(location.toString(), span);

  onDestroy(() => {
    router.deregister(span);
  });

  const { routes, basePath, ...restWithoutRoutes } = rest;
</script>

<RenderableComponent
  {route}
  {...additionalProps}
  {...restWithoutRoutes} />

```

--------------------------------

### Querystring Evaluation Result Example (TypeScript)

Source: https://github.com/mateothegreat/svelte5-router/blob/main/llms.txt

Provides an example of the 'querystring' property within the result object, detailing how query parameters from a URL are parsed and matched. It shows the match condition, original querystring data, and extracted parameters.

```typescript
const querystringResult = {
  condition: "exact-match",
  original: { filter: "active", page: "2" },
  params: { filter: "active", page: "2" }
};
```

--------------------------------

### Svelte App Setup with svelte5-router

Source: https://github.com/mateothegreat/svelte5-router/blob/main/docs/llms.txt

This Svelte component sets up the svelte5-router, defining routes and managing the router instance. It includes imports for necessary components and router functionalities, defines route configurations with hooks, and initializes the router with a state variable. The `$effect` hook demonstrates logging route changes.

```svelte
<script lang="ts">
  import RouteWrapper from "$lib/components/routes/route-wrapper.svelte";
  import { myDefaultRouterConfig } from "$lib/default-route-config";
  import { session } from "$lib/session.svelte";
  import Extras from "$routes/extras/extras.svelte";
  import Home from "$routes/home.svelte";
  import Nested from "$routes/nested/nested.svelte";
  import PathsAndParams from "$routes/paths-and-params/paths-and-params.svelte";
  import Patterns from "$routes/patterns/patterns.svelte";
  import Protected from "$routes/protected/main.svelte";
  import Transitions from "$routes/transitions/transitions.svelte";
  import type { RouteConfig, RouteResult } from "@mateothegreat/svelte5-router";
  import { goto, logging, registry, type Route, Router, type RouterInstance } from "@mateothegreat/svelte5-router";
  import { BookHeart, Github, HelpCircle, MousePointerClick } from "lucide-svelte";

  /**
   * Only needed for the demo environment development.
   *
   * It is not needed for including the router package in your project.
   */
  if (import.meta.hot) {
    import.meta.hot.accept(() => {
      import.meta.hot!.invalidate();
    });
  }

  /**
   * This is a state variable that will hold the router instance.
   *
   * It can be used to access the current route, navigate, etc:
   */
  let router: RouterInstance = $state();

  /**
   * Get notified when the current route changes:
   */
  const route = $derived(router.current);
  $effect(() => {
    if (router.current) {
      logging.info(
        `🚀 I'm an $effect in app.svelte and i'm running because the current route is now ${router.current.result.path.original}ционных!`
      );
    }
  });

  /**
   * Let's declare our routes for the main app router:
   */
  const routes: RouteConfig[] = [
    {
      // You can name your routes anything you want for tracking or debugging:
      name: "default-route",
      hooks: {
        pre: async (route: RouteResult) => {
          console.error(`redirecting to ${session.mode === "hash" ? "/#" : ""}/home using a pre hook!`, route);
          goto(`${session.mode === "hash" ? "/#" : ""}/home`);
        },
        post: async (route: RouteResult) => {
          console.error(`post hook fired for route`, route);
        }
      }
    },
    {
      path: "/patterns",

```

--------------------------------

### Navigate with Query Parameters in Svelte

Source: https://github.com/mateothegreat/svelte5-router/blob/main/llms.txt

Demonstrates how to use the `goto` helper function to navigate to a new route with query parameters. This function takes a path and an optional record of query parameters, constructing the full URL accordingly.

```typescript
// Assuming goto is imported or globally available
// import { goto } from "@mateothegreat/svelte5-router";

goto("/foo", { bar: "baz" });
// This will navigate to "/foo?bar=baz".
```

--------------------------------

### Svelte 5 Transition: Fade Effect Example

Source: https://github.com/mateothegreat/svelte5-router/blob/main/docs/llms.txt

This example demonstrates how to apply a fade transition to a Svelte component using the `fade` function from 'svelte/transition'. The transition is applied directly to the `div` element using the `in:fade` directive, with a specified duration of 500 milliseconds. This creates a smooth fading-in effect when the component is mounted.

```svelte
<script>
  import Badge from "$lib/components/badge.svelte";
  import Container from "$lib/components/container.svelte";
  import InlineCode from "$lib/components/inline-code.svelte";
  import { fade } from "svelte/transition";
</script>

<div in:fade={{ duration: 500 }}>
  <Container
    title="Fade"
    file="src/routes/transitions/fade.svelte">
    <div class="flex flex-col items-center gap-6 bg-sky-600 p-10 text-center">
      <Badge variant="info">This is a transition that is applied to the component directly</Badge>
      <div class="flex flex-col gap-3">
        This is a transition that is applied to the component directly:
        <InlineCode text={"{`<div in:fade={{ duration: 300 }}>..</div>`}"} />
      </div>
    </div>
  </Container>
</div>
```

--------------------------------

### Query Class Initialization and Basic Operations (TypeScript)

Source: https://github.com/mateothegreat/svelte5-router/blob/main/docs/llms.txt

This snippet shows how to initialize a Query object from various inputs (string, object, another Query) and demonstrates basic operations like getting, setting, deleting, and clearing query parameters. It handles marshaling of input values.

```typescript
import { marshal } from "./helpers/marshal";
import type { ReturnParam } from "./helpers/urls";

export type QueryType<T = unknown> = Record<string, string | number | RegExp | Function | Promise<T>>;

export type QueryEvaluationResult = {
  condition: Condition;
  matches?: Record<string, ReturnParam>;
};

export class Query {
  params: Record<string, ReturnParam> = {};
  original?: string;

  constructor(query?: Record<string, string> | string | Query | Record<string, ReturnParam>) {
    if (typeof query === "string") {
      this.original = query;
    }

    if (query) {
      const marshalled = marshal(query);
      if (marshalled.value) {
        this.params = marshalled.value as Record<string, ReturnParam>;
      }
    }
  }

  get<T>(key: string, defaultValue?: T): T {
    return (this.params[key] as T) || defaultValue;
  }

  set(key: string, value: string) {}

  delete(key: string) {
    delete this.params[key];
  }

  clear() {
    this.params = {};
  }

  goto(path: string) {
    goto(path, this.params);
  }

  test(inbound: Query): QueryEvaluationResult {
    // ... test logic ...
  }

  toString() {
    // ... toString logic ...
  }

  toJSON(preserveOriginal?: boolean) {
    return Object.fromEntries(Object.entries(this.params).map(([key, value]) => [key, value.toString()]));
  }
}
```

--------------------------------

### Vite + Svelte + TS HTML Entry Point

Source: https://github.com/mateothegreat/svelte5-router/blob/main/llms.txt

This is the main HTML file for a Vite-powered Svelte application. It sets up the basic document structure, includes meta tags for responsiveness, and crucially, mounts the Svelte application into a div with the ID 'app'. It also links to the main TypeScript entry point for the application.

```html
<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<link rel="icon" type="image/svg+xml" href="/vite.svg" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Vite + Svelte + TS</title>
	</head>
	<body class="dark">
		<div id="app"></div>
		<script type="module" src="/src/main.ts"></script>
	</body>
</html>
```

--------------------------------

### Route Action with Detailed State Options

Source: https://github.com/mateothegreat/svelte5-router/blob/main/docs/actions.md

An example of the 'route' action applied to a dashboard link, showcasing custom classes and exact path matching for the active state.

```svelte
<a 
  href="/dashboard" 
  use:route={{
    default: { class: 'text-gray-600' },
    active: { 
      class: 'text-blue-600 font-bold',
      absolute: true 
    }
  }}
>
  Dashboard
</a>
```

--------------------------------

### Create a Protected Route with Navigation - Svelte

Source: https://github.com/mateothegreat/svelte5-router/blob/main/docs/llms.txt

Sets up a protected route for account management using Svelte5 Router. It includes a RouteWrapper component to manage route properties like title and links. The snippet demonstrates how to use `goto` for navigation and applies an authentication guard (`authGuardSlow`).

```svelte
<script lang="ts">
  import RouteWrapper from "$lib/components/routes/route-wrapper.svelte";
  import { myDefaultRouterConfig } from "$lib/default-route-config";
  import { session } from "$lib/session.svelte";
  import { goto, Router, RouterInstance } from "@mateothegreat/svelte5-router";
  import { ArrowRight, Building2, Shield, Wallet } from "lucide-svelte";
  import { client } from "../account-state.svelte";
  import { authGuardSlow } from "./auth-guard-slow";
  import Balance from "./balance.svelte";
  import Home from "./home.svelte";

  let router: RouterInstance = $state();
  let { route } = $props();
</script>

{#snippet snippet()}
  <div class="rounded-md border-4 border-slate-400 bg-gradient-to-b from-blue-100 to-blue-300">
    <div class="mx-auto max-w-6xl px-4 py-12">
      <div class="mb-16 text-center">
        <h1 class="mb-6 text-4xl font-bold text-blue-500 md:text-6xl">Welcome to SPA Router Bank!</h1>
        <p class="mb-8 text-xl text-black">Your trusted partner in routing.</p>
        <button
          onclick={() => goto("/protected/login")}
          class="mx-auto flex items-center gap-2 rounded-lg bg-blue-600 px-8 py-3 font-semibold text-white transition-colors hover:bg-blue-700">
          Login <ArrowRight size={20} />
        </button>
      </div>
      <div class="mb-16 grid gap-8 md:grid-cols-3">
        <div class="rounded-xl bg-white p-6 shadow-md transition-shadow hover:shadow-lg">
          <Shield class="mb-4 h-12 w-12 text-blue-600" />
          <h3 class="mb-2 text-xl font-semibold text-gray-800">Secure Banking</h3>
          <p class="text-gray-600">State-of-the-art security measures to protect your financial data</p>
        </div>
        <div class="rounded-xl bg-white p-6 shadow-md transition-shadow hover:shadow-lg">
          <Building2 class="mb-4 h-12 w-12 text-blue-600" />
          <h3 class="mb-2 text-xl font-semibold text-gray-800">Business Solutions</h3>
          <p class="text-gray-600">Comprehensive banking solutions for businesses of all sizes</p>
        </div>
        <div class="rounded-xl bg-white p-6 shadow-md transition-shadow hover:shadow-lg">
          <Wallet class="mb-4 h-12 w-12 text-blue-600" />
          <h3 class="mb-2 text-xl font-semibold text-gray-800">Personal Banking</h3>
          <p class="text-gray-600">Tailored financial services for your personal needs</p>
        </div>
      </div>
    </div>
  </div>
{/snippet}

<RouteWrapper
  {router}
  name="/protected/manage-account"
  {route}
  end={true}
  title={{
    file: "src/routes/protected/manage-account/manage-account.svelte",
    content: "This router demonstrates how you can restrict access to routes based on the user's authentication state."
  }}
  links={[ { href: "/protected/manage-account", label: "default path", options: { active: { absolute: true } } }]}>
  <Home />
</RouteWrapper>

<Router
  instance={router}
  config={myDefaultRouterConfig}
  routes={[
    {
      name: "protected/manage-account",
      path: "/protected/manage-account",
      component: Home,
      guards: [authGuardSlow]
    },
    {
      name: "protected/manage-account/home",
      path: "/protected/manage-account/home",
      component: Home,
      guards: [authGuardSlow]
    },
    {
      name: "protected/manage-account/balance",
      path: "/protected/manage-account/balance",
      component: Balance,
      guards: [authGuardSlow]
    }
  ]} />

```

--------------------------------

### Define Routes Array in TypeScript

Source: https://github.com/mateothegreat/svelte5-router/blob/main/llms.txt

An example of defining a routes array using the Route type. It shows how to specify components and handle dynamic path parameters using named capture groups.

```typescript
const routes: Route[] = [
  {
    component: Home
  },
  {
     path: "(?<child>.*)",
     component: ParseRouteParams
  }
]
```