From 82b5766d8b76336a81468c6ad7b309d92032cbb4 Mon Sep 17 00:00:00 2001
From: natxocc <natxocc@gmail.com>
Date: Sat, 14 Feb 2026 01:50:42 +0100
Subject: [PATCH] Init

---
 Readme.md | 79 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 79 insertions(+)
 create mode 100644 Readme.md

diff --git a/Readme.md b/Readme.md
new file mode 100644
index 0000000..f3932cd
--- /dev/null
+++ b/Readme.md
@@ -0,0 +1,79 @@
+---
+
+# 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.
+
+---