more migration stuff

package.json

···
     "maplibre-gl": "^4.7.1"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.25.8",
+    "@babel/preset-env": "^7.25.9",
     "@eslint/js": "^9.13.0",
     "@sveltejs/adapter-static": "^3.0.5",
     "@sveltejs/enhanced-img": "^0.3.9",
     "@sveltejs/kit": "^2.7.2",
     "@types/cheerio": "^0.22.35",
     "@types/eslint__js": "^8.42.3",
-    "@types/node": "^22.7.7",
+    "@types/node": "^22.7.8",
     "@types/showdown": "^2.0.6",
     "cheerio": "^1.0.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-svelte": "^2.45.1",
+    "eslint-plugin-svelte": "^2.46.0",
     "feed": "^4.2.2",
     "glob": "^11.0.0",
     "globals": "^15.11.0",
···
     "prettier": "^3.3.3",
     "prettier-plugin-svelte": "^3.2.7",
     "showdown": "^2.1.0",
-    "svelte": "^5.0.2",
-    "svelte-eslint-parser": "^0.42.0",
+    "svelte": "^5.0.5",
+    "svelte-eslint-parser": "^0.43.0",
     "typescript": "^5.6.3",
-    "typescript-eslint": "^8.10.0",
+    "typescript-eslint": "^8.11.0",
     "vite": "^5.4.9"
   }
 }

src/lib/components/DitheredImage.svelte

···
   }
 
   let { matches }: Props = $props();
+
   const imgName = matches[1];
   const altText = matches[2];
   const found = Object.entries(dither).find(([path, _]) => path.endsWith(imgName))?.[1];

src/lib/components/InjectableHTML.svelte

···
 <script lang="ts">
   /* eslint svelte/no-at-html-tags: "off" */
-  import type { ComponentType } from 'svelte';
+  import type { Component } from 'svelte';
 
   interface Rule {
     split: RegExp;
     match: RegExp;
-    component: ComponentType;
+    component: Component<{ matches: string[] }>;
     props?: Record<string, unknown>;
   }
 

src/lib/components/spe_001/PostPage.svelte

···
 <script lang="ts">
-  import { run } from 'svelte/legacy';
-
   import { fade } from 'svelte/transition';
   import storyState from '$lib/stores/spe_001/state';
   import RallyeTable from '$lib/components/spe_001/RallyeTable.svelte';
···
       }
     });
 
-  run(() => {
+  $effect(() => {
     if ($storyState.showCredits) {
       setTrHover();
     }

src/lib/components/spe_001/RallyeTable.svelte

···
 <script lang="ts">
-  import { run } from 'svelte/legacy';
-
   import { onMount } from 'svelte';
   import { slide } from 'svelte/transition';
   import { decodeAsync } from '@msgpack/msgpack';
···
     scoring: Record<Year, TableScoring>;
   }
 
-  let rallyeData: RallyeData = $state();
-  let loading = $state(true);
+  let loading = $state(true),
+    rallyeData: RallyeData = $state()!,
+    rallyeSeasons: Year[] = $state([]),
+    currentRallyes: Rallye[] = $state([]),
+    currentRallye: Rallye = $state()!,
+    currentRallyeStages: RallyeStage[] = $state([]),
+    currentRallyeStage: RallyeStage = $state()!,
+    currentScoring: TableScoring = $state()!,
+    currentRallyesFiltered: Rallye[] = $state([]),
+    submitPressed: boolean = $state(false);
 
   onMount(async () => {
     const res = await fetch('/resources/spe_001/rallye_data.msgpack');
     if (res.body) rallyeData = (await decodeAsync(res.body)) as RallyeData;
     loading = false;
+
+    rallyeSeasons = Object.keys(rallyeData) as Year[];
+    currentRallyes = rallyeData[rallyeTableSettings.season];
+    currentRallye = currentRallyes[rallyeTableSettings.rallyeIndex];
+    currentRallyeStages = currentRallye.stages;
+    currentRallyeStage = currentRallye.stages[rallyeTableSettings.stageIndex];
+    currentScoring = rallyeTableSettings.scoring[rallyeTableSettings.season];
+    currentRallyesFiltered = currentRallyes.filter(
+      (e) => !currentScoring.ignoreRallyes.includes(e.title)
+    );
+    calcSeasonResults(rallyeTableSettings.season);
+    submitPressed = false;
   });
 
   const pointSystems: Record<PointSystem, number[]> = {
···
       setTimeout(() => window.scrollTo({ top: 0 }));
     }
   };
-
-  let rallyeSeasons: Year[] = $state(),
-    currentRallyes: Rallye[] = $state(),
-    currentRallye: Rallye = $state(),
-    currentRallyeStages: RallyeStage[] = $state(),
-    currentRallyeStage: RallyeStage = $state(),
-    currentScoring: TableScoring = $state(),
-    currentRallyesFiltered: Rallye[] = $state(),
-    submitPressed: boolean = $state();
-
-  run(() => {
-    if (!loading) {
-      rallyeSeasons = Object.keys(rallyeData) as Year[];
-      currentRallyes = rallyeData[rallyeTableSettings.season];
-      currentRallye = currentRallyes[rallyeTableSettings.rallyeIndex];
-      currentRallyeStages = currentRallye.stages;
-      currentRallyeStage = currentRallye.stages[rallyeTableSettings.stageIndex];
-      currentScoring = rallyeTableSettings.scoring[rallyeTableSettings.season];
-      currentRallyesFiltered = currentRallyes.filter(
-        (e) => !currentScoring.ignoreRallyes.includes(e.title)
-      );
-      calcSeasonResults(rallyeTableSettings.season);
-      submitPressed = false;
-    }
-  });
 </script>
 
 {#if loading}

src/lib/showdown/highlight.ts

···
       const flags = 'g';
 
       const replacement = (_wholeMatch: string, match: string, left: string, right: string) => {
-        const language = (left.match(/class="(\w+)/) || [])[1];
+        const language = (/class="(\w+)/.exec(left) ?? [])[1];
         const c = cheerio.load(match);
         match = c.root().text();
 

src/lib/showdown/spoiler.ts

···
   return [
     {
       type: 'lang',
-      regex: /(\>!\s?)(.*?)(\s?!<)/g,
+      regex: /(>!\s?)(.*?)(\s?!<)/g,
       replace: function (_match: string, _lead: string, content: string, _trail: string) {
         return `<span class="spoiler">${content.trim()}</span>`;
       }

src/routes/(base)/about/+page.svelte

···
   <a href="/atom">justin.duch.me/atom</a>
   <br />
   <a href="https://eldritch.cafe/@beanpup_py">@[e-mail]</a>
+  |
+  <a href="https://bsky.app/profile/quaso.engineering">@quaso.engineering</a>
   <br />
   <a href="https://git.sr.ht/~beanpup_py">sr.ht/~beanpup_py</a>
   <br />

src/routes/(base)/post/+page.svelte

···
       <div class="bottom-border">
         <div
           style="border-bottom: 0.5em solid rgb(255, 255, 255); max-width: 100%; width: {post.readtime}em;"
-></div>
+        ></div>
       </div>
 
       <div class="post-info">

src/routes/(blank)/post/spe_001/+page.svelte

···
 <script lang="ts">
-  import { run } from 'svelte/legacy';
-
   import { onMount } from 'svelte';
   import { PostPage, EntPage, MsgPage, FakePost } from '$lib/components/spe_001';
   import { fade } from 'svelte/transition';
···
     }
   };
 
-  let title = $derived($storyState.finish
-    ? 'Documenting Website Bloat'
-    : $storyState.showCredits
-      ? 'PSYCHO streamer MALDS over being SHORT'
-      : 'Solving the Greatest Crisis of Our Time');
+  let title = $derived(
+    $storyState.finish
+      ? 'Documenting Website Bloat'
+      : $storyState.showCredits
+        ? 'PSYCHO streamer MALDS over being SHORT'
+        : 'Solving the Greatest Crisis of Our Time'
+  );
 
-  run(() => {
+  $effect(() => {
     if ($storyState.startTransition === true) {
       trans = true;