80 lines
2.6 KiB
Markdown
80 lines
2.6 KiB
Markdown
---
|
|
|
|
# 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.
|
|
|
|
---
|