---

# Svelte 5 Micro-Router (File-Based)

This is a lightweight, custom-built file-based router for **Svelte 5** that mimics the SvelteKit routing system for standalone Single Page Applications (SPA) powered by **Vite**.

## 🚀 Features

* **File-based Routing:** Automatically detects and maps `.svelte` files inside the `routes` directory.
* **Dynamic Routes:** Full support for dynamic parameters using the `[id].svelte` syntax.
* **Svelte 5 Native:** Built using **Runes** (`$state`, `$props`, `{@render}`) for reactive performance and modern syntax.
* **Zero Dependencies:** No heavy routing libraries required; uses native Browser APIs.

## 📁 Recommended Directory Structure

The router scans for files within `src/routes/`. Your project should look like this:

```text
src/
├── routes/
│   ├── index.svelte          // Route: /
│   ├── about-us.svelte       // Route: /about-us
│   └── post/
│       └── [id].svelte       // Route: /post/:id
└── App.svelte                // Import and use this Router here

```

## 🛠️ How it Works

### 1. Route Scanning

The router uses `import.meta.glob` to analyze your file system at build time. It converts file paths into Regular Expressions:

* `index.svelte` ➔ `/`
* `[id].svelte` ➔ `/(?<id>[^/]+)` (Captures the ID as a Regex group).

### 2. Navigation Interception

The component attaches a global **Click Event Listener** to the `window`. When a user clicks an internal `<a>` tag:

1. It prevents the default page reload (`e.preventDefault()`).
2. It updates the URL via the **History API** (`pushState`).
3. It triggers the `update()` function to swap the UI component.

### 4. Dynamic Rendering

By using the `{#key CurrentPage}` block, the router ensures that components are properly destroyed and re-mounted when navigating between different instances of the same route (e.g., navigating from `/post/1` to `/post/2`).

## 💻 Usage in App.svelte

```svelte
<script>
  import Router from './lib/Router.svelte';
</script>

<Router>
  {#snippet loading()}
    <div class="spinner">Loading page...</div>
  {/snippet}

  {#snippet fallback()}
    <div class="error">
      <h1>404</h1>
      <p>The page you are looking for does not exist.</p>
      <a href="/">Go back home</a>
    </div>
  {/snippet}
</Router>

```

## ⚠️ Current Limitations

* **Nesting:** Does not support nested `layout.svelte` files automatically (requires extra logic).
* **Preloading:** Components are loaded only when the navigation occurs.
* **Query Params:** While they won't break the app, they are currently ignored by the parameter parser.

---