Init

router.svelte

@@ -0,0 +1,87 @@
+<script>
+  import { onMount } from 'svelte';
+  let { loading, fallback } = $props();
+  const modules = import.meta.glob('../../routes/**/*.svelte');
+  const routes = Object.entries(modules).map(([key, load]) => {
+    const path = key
+      .replace('../../routes', '')
+      .replace('.svelte', '')
+      .replace(/\/index$/, '') || '/';
+
+    return {
+      pattern: new RegExp(path.replace(/\[([^\]]+)\]/g, '(?<$1>[^/]+)') + '$'),
+      load 
+    };
+  });
+
+  let match = $state(null);
+  let CurrentPage = $state(null);
+  let params = $state({});
+
+  async function update() {
+    const path = window.location.pathname;
+    let found = null;
+
+    for (const r of routes) {
+      const m = path.match(r.pattern);
+      if (m) {
+        found = r;
+        params = m.groups || {};
+        break;
+      }
+    }
+
+    if (found) {
+      const mod = await found.load();
+      CurrentPage = mod.default;
+      match = true;
+    } else {
+      match = false;
+    }
+  }
+
+  onMount(() => {
+    update();
+    
+    const handlePopState = () => update();
+    window.addEventListener('popstate', handlePopState);
+
+    const handleClick = (e) => {
+      const a = e.target.closest('a');
+      if (!a || a.target === '_blank' || e.ctrlKey || e.metaKey) return;
+      const href = a.getAttribute('href');
+      if (!href || href.startsWith('#') || href.includes('://')) return;
+
+      e.preventDefault();
+      history.pushState({}, '', new URL(href, window.location.href).pathname);
+      update();
+    };
+
+    window.addEventListener('click', handleClick);
+
+    return () => {
+      window.removeEventListener('popstate', handlePopState);
+      window.removeEventListener('click', handleClick);
+    };
+  });
+</script>
+
+{#if match === true}
+  {#if CurrentPage}
+    {#key CurrentPage}
+      <CurrentPage {...params} />
+    {/key}
+  {/if}
+{:else if match === false}
+  {#if fallback}
+    {@render fallback()}
+  {:else}
+    <h1>404 - Not found</h1>
+  {/if}
+{:else}
+  {#if loading}
+    {@render loading()}
+  {:else}
+    <p>Loading...</p>
+  {/if}
+{/if}