feat: router test

package.json

@@ -16,7 +16,7 @@
     "postcss": "^8.4.38",
     "svelte": "^4.2.18",
     "svelte-check": "^3.8.1",
-    "svelte-routing": "^2.13.0",
+    "svelte-spa-router": "^4.0.1",
     "tailwindcss": "^3.4.4",
     "tslib": "^2.6.3",
     "typescript": "^5.2.2",

src/App.svelte

@@ -1,14 +1,16 @@
 <script lang="ts">
-  import {Route, Router} from "svelte-routing";
+  import Router from "svelte-spa-router";
   import Canvas from "~pages/Canvas.svelte";
   import Effects from "~pages/Effects.svelte";
   import Spellbook from "~pages/Spellbook.svelte";
   import Strokes from "~pages/Strokes.svelte";
+
+  const routes = {
+    "/": Canvas,
+    "/spellbook/:spell": Spellbook,
+    "/strokes/:stroke": Strokes,
+    "/effects/:effect": Effects
+  };
 </script>
 
-<Router>
-  <Route path="/" component={Canvas} />
-  <Route path="spellbook/:id" component={Spellbook} />
-  <Route path="strokes/:id" component={Strokes} />
-  <Route path="effects/:id" component={Effects} />
-</Router>
+<Router {routes} />

src/components/PrimaryLinkButton.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  export let href: string;
+  export let current: boolean | null = null;
+</script>
+
+<a
+  {href}
+  aria-current={current}
+  class="p-2 text-center bg-primary text-base font-fantasy text-light rounded transition duration-300 hover:bg-accent hover:shadow-glow aria-current:bg-accent/70"
+>
+  <slot />
+</a>

src/pages/Canvas.svelte

@@ -2,11 +2,11 @@
   import {onMount} from "svelte";
   import PageContainer from "~components/PageContainer.svelte";
   import PrimaryButton from "~components/PrimaryButton.svelte";
+  import PrimaryLinkButton from "~components/PrimaryLinkButton.svelte";
   import {FADE_SPEED, HUE, MIN_POINTS, PI2} from "~lib/config";
   import DollarRecognizer from "~lib/dollar";
   import {type Particle, createEffect} from "~lib/effects";
   import spells, {type SpellConfig} from "~lib/spells";
-  import {page} from "~lib/store";
   import strokes from "~lib/strokes";
 
   let container: HTMLElement;
@@ -215,9 +215,9 @@
     <div id="comment" class="text-xl min-h-16 text-center text-shadow">{comment}</div>
     <div id="control-buttons" class="flex flex-col gap-2">
       <PrimaryButton onClick={clearCanvas}>Clear all</PrimaryButton>
-      <PrimaryButton onClick={() => page.set("spellbook")}>Spellbook</PrimaryButton>
-      <PrimaryButton onClick={() => page.set("strokes")}>Strokes</PrimaryButton>
-      <PrimaryButton onClick={() => page.set("effects")}>Effects</PrimaryButton>
+      <PrimaryLinkButton href="#/spellbook/0">Spellbook</PrimaryLinkButton>
+      <PrimaryLinkButton href="#/strokes/0">Strokes</PrimaryLinkButton>
+      <PrimaryLinkButton href="#/effects/0">Effects</PrimaryLinkButton>
     </div>
     <blockquote class="m-0 p-4 rounded italic bg-primary/30">
       {quote}

src/pages/Effects.svelte

@@ -4,7 +4,6 @@
   import PrimaryButton from "~components/PrimaryButton.svelte";
   import {PI2} from "~lib/config";
   import {createEffect, type Effect, effectsMap, type Particle} from "~lib/effects";
-  import {page} from "~lib/store";
 
   let container: HTMLElement;
   let particleCanvas: HTMLCanvasElement;
@@ -82,7 +81,7 @@
 
       <div class="flex flex-col gap-2">
         <PrimaryButton onClick={clearCanvas}>Clear canvas</PrimaryButton>
-        <PrimaryButton onClick={() => page.set("canvas")}>Back to practice</PrimaryButton>
+        <PrimaryLinkButton href="#">Back to practice</PrimaryLinkButton>
       </div>
     </nav>
   </aside>

src/pages/Spellbook.svelte

@@ -2,9 +2,9 @@
   import {draw, fly} from "svelte/transition";
   import PageContainer from "~components/PageContainer.svelte";
   import PrimaryButton from "~components/PrimaryButton.svelte";
+  import PrimaryLinkButton from "~components/PrimaryLinkButton.svelte";
   import {DRAW_TIME} from "~lib/config";
   import spells from "~lib/spells";
-  import {page} from "~lib/store";
   import strokes from "~lib/strokes";
 
   let spellIndex = 0;
@@ -98,7 +98,7 @@
           >
         {/each}
       </div>
-      <PrimaryButton onClick={() => page.set("canvas")}>Back to practice</PrimaryButton>
+      <PrimaryLinkButton href="#">Back to practice</PrimaryLinkButton>
     </nav>
   </aside>
 </PageContainer>

src/pages/Strokes.svelte

@@ -1,9 +1,7 @@
 <script lang="ts">
   import {draw} from "svelte/transition";
   import PageContainer from "~components/PageContainer.svelte";
-  import PrimaryButton from "~components/PrimaryButton.svelte";
   import {DRAW_TIME} from "~lib/config";
-  import {page} from "~lib/store";
   import strokes from "~lib/strokes";
 
   let animated: Record<string, boolean> = {};
@@ -40,7 +38,7 @@
     <h1 class="text-3xl text-center">Strokes</h1>
 
     <nav class="flex flex-col gap-4">
-      <PrimaryButton onClick={() => page.set("canvas")}>Back to practice</PrimaryButton>
+      <PrimaryLinkButton href="#">Back to practice</PrimaryLinkButton>
     </nav>
   </aside>
 </PageContainer>