svelte 5 migration

package-lock.json

@@ -13,19 +13,19 @@
       "devDependencies": {
         "@playwright/test": "^1.28.1",
         "@sveltejs/adapter-auto": "^3.0.0",
-        "@sveltejs/kit": "^2.0.0",
+        "@sveltejs/kit": "^2.5.27",
-        "@sveltejs/vite-plugin-svelte": "^3.0.0",
+        "@sveltejs/vite-plugin-svelte": "^4.0.0-next.0",
         "@types/ua-parser-js": "^0.7.39",
         "@types/user-agents": "^1.0.4",
         "less": "^4.2.0",
         "prettier": "^3.1.1",
-        "prettier-plugin-svelte": "^3.1.2",
+        "prettier-plugin-svelte": "^3.2.6",
-        "svelte": "^4.2.7",
+        "svelte": "^5.0.0-next.0",
         "svelte-check": "^4.0.0",
         "svelte-preprocess": "^6.0.3",
-        "typescript": "^5.0.0",
+        "typescript": "^5.5.0",
         "user-agents": "^1.1.325",
-        "vite": "^5.0.3",
+        "vite": "^5.4.4",
         "vitest": "^2.0.0"
       }
     },
@@ -781,43 +781,42 @@
       }
     },
     "node_modules/@sveltejs/vite-plugin-svelte": {
-      "version": "3.1.2",
+      "version": "4.0.0-next.8",
-      "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-3.1.2.tgz",
+      "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-4.0.0-next.8.tgz",
-      "integrity": "sha512-Txsm1tJvtiYeLUVRNqxZGKR/mI+CzuIQuc2gn+YCs9rMTowpNZ2Nqt53JdL8KF9bLhAf2ruR/dr9eZCwdTriRA==",
+      "integrity": "sha512-gUw2Kb9x4PlaJuPoMqIiD5bShlO4mSKpAxZMix1pFOq9pt8vaPUIzmHaXN4xeDT4psbZZVh2aeubMPFzRCgIyA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@sveltejs/vite-plugin-svelte-inspector": "^2.1.0",
+        "@sveltejs/vite-plugin-svelte-inspector": "^3.0.0-next.0||^3.0.0",
-        "debug": "^4.3.4",
+        "debug": "^4.3.7",
         "deepmerge": "^4.3.1",
         "kleur": "^4.1.5",
-        "magic-string": "^0.30.10",
+        "magic-string": "^0.30.11",
-        "svelte-hmr": "^0.16.0",
+        "vitefu": "^1.0.2"
-        "vitefu": "^0.2.5"
       },
       "engines": {
-        "node": "^18.0.0 || >=20"
+        "node": "^18.0.0 || ^20.0.0 || >=22"
       },
       "peerDependencies": {
-        "svelte": "^4.0.0 || ^5.0.0-next.0",
+        "svelte": "^5.0.0-next.96 || ^5.0.0",
         "vite": "^5.0.0"
       }
     },
     "node_modules/@sveltejs/vite-plugin-svelte-inspector": {
-      "version": "2.1.0",
+      "version": "3.0.0-next.3",
-      "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte-inspector/-/vite-plugin-svelte-inspector-2.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte-inspector/-/vite-plugin-svelte-inspector-3.0.0-next.3.tgz",
-      "integrity": "sha512-9QX28IymvBlSCqsCll5t0kQVxipsfhFFL+L2t3nTWfXnddYwxBuAEtTtlaVQpRz9c37BhJjltSeY4AJSC03SSg==",
+      "integrity": "sha512-kuGJ2CZ5lAw3gKF8Kw0AfKtUJWbwdlDHY14K413B0MCyrzvQvsKTorwmwZcky0+QqY6RnVIZ/5FttB9bQmkLXg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "debug": "^4.3.4"
+        "debug": "^4.3.5"
       },
       "engines": {
-        "node": "^18.0.0 || >=20"
+        "node": "^18.0.0 || ^20.0.0 || >=22"
       },
       "peerDependencies": {
-        "@sveltejs/vite-plugin-svelte": "^3.0.0",
+        "@sveltejs/vite-plugin-svelte": "^4.0.0-next.0||^4.0.0",
-        "svelte": "^4.0.0 || ^5.0.0-next.0",
+        "svelte": "^5.0.0-next.96 || ^5.0.0",
         "vite": "^5.0.0"
       }
     },
@@ -964,9 +963,9 @@
       }
     },
     "node_modules/acorn": {
-      "version": "8.12.1",
+      "version": "8.13.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.13.0.tgz",
-      "integrity": "sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==",
+      "integrity": "sha512-8zSiw54Oxrdym50NlZ9sUusyO1Z1ZchgRLWRaK6c86XJFClyCgFKetdowBg5bKxyp/u+CDBJG4Mpp0m3HLZl9w==",
       "dev": true,
       "license": "MIT",
       "bin": {
@@ -976,6 +975,16 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/acorn-typescript": {
+      "version": "1.4.13",
+      "resolved": "https://registry.npmjs.org/acorn-typescript/-/acorn-typescript-1.4.13.tgz",
+      "integrity": "sha512-xsc9Xv0xlVfwp2o7sQ+GCQ1PgbkdcpWdTzrwXxO3xDMTAywVS3oXVOcOHuRjAPkS4P9b+yc/qNF15460v+jp4Q==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "acorn": ">=8.9.0"
+      }
+    },
     "node_modules/aria-query": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
@@ -1059,20 +1068,6 @@
         "url": "https://paulmillr.com/funding/"
       }
     },
-    "node_modules/code-red": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/code-red/-/code-red-1.0.4.tgz",
-      "integrity": "sha512-7qJWqItLA8/VPVlKJlFXU+NBlo/qyfs39aJcuMT/2ere32ZqvF5OSxgdM5xOfJJ7O429gg2HM47y8v9P+9wrNw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.4.15",
-        "@types/estree": "^1.0.1",
-        "acorn": "^8.10.0",
-        "estree-walker": "^3.0.3",
-        "periscopic": "^3.1.0"
-      }
-    },
     "node_modules/cookie": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
@@ -1096,20 +1091,6 @@
         "url": "https://github.com/sponsors/mesqueeb"
       }
     },
-    "node_modules/css-tree": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
-      "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "mdn-data": "2.0.30",
-        "source-map-js": "^1.0.1"
-      },
-      "engines": {
-        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
-      }
-    },
     "node_modules/debug": {
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
@@ -1215,6 +1196,17 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/esrap": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/esrap/-/esrap-1.2.2.tgz",
+      "integrity": "sha512-F2pSJklxx1BlQIQgooczXCPHmcWpn6EsP5oo73LQfonG9fIlIENQ8vMmfGXeojP9MrkzUNAfyU5vdFlR9shHAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.4.15",
+        "@types/estree": "^1.0.1"
+      }
+    },
     "node_modules/estree-walker": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
@@ -1370,6 +1362,18 @@
         "source-map": "~0.6.0"
       }
     },
+    "node_modules/lilconfig": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
+      "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/locate-character": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
@@ -1416,13 +1420,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/mdn-data": {
-      "version": "2.0.30",
-      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
-      "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
-      "dev": true,
-      "license": "CC0-1.0"
-    },
     "node_modules/mime": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
@@ -1528,18 +1525,6 @@
         "node": ">= 14.16"
       }
     },
-    "node_modules/periscopic": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/periscopic/-/periscopic-3.1.0.tgz",
-      "integrity": "sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/estree": "^1.0.0",
-        "estree-walker": "^3.0.0",
-        "is-reference": "^3.0.0"
-      }
-    },
     "node_modules/picocolors": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz",
@@ -1547,6 +1532,21 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/picomatch": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
+      "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/pify": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
@@ -1619,6 +1619,38 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/postcss-load-config": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz",
+      "integrity": "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "lilconfig": "^2.0.5",
+        "yaml": "^1.10.2"
+      },
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": ">=8.0.9",
+        "ts-node": ">=9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "postcss": {
+          "optional": true
+        },
+        "ts-node": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/prettier": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz",
@@ -1809,29 +1841,28 @@
       "license": "MIT"
     },
     "node_modules/svelte": {
-      "version": "4.2.19",
+      "version": "5.0.0-next.268",
-      "resolved": "https://registry.npmjs.org/svelte/-/svelte-4.2.19.tgz",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-5.0.0-next.268.tgz",
-      "integrity": "sha512-IY1rnGr6izd10B0A8LqsBfmlT5OILVuZ7XsI0vdGPEvuonFV7NYEUK4dAkm9Zg2q0Um92kYjTpS1CAP3Nh/KWw==",
+      "integrity": "sha512-QshHUiDlrIfr9z2r0crFbKwhepw34qbMD7p7Hl8Fiyyo5McqIPBgGASV6QAvSqCIQ6zc0bQfh74oMB/8i9Fxvg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@ampproject/remapping": "^2.2.1",
+        "@ampproject/remapping": "^2.3.0",
-        "@jridgewell/sourcemap-codec": "^1.4.15",
+        "@jridgewell/sourcemap-codec": "^1.5.0",
-        "@jridgewell/trace-mapping": "^0.3.18",
+        "@types/estree": "^1.0.5",
-        "@types/estree": "^1.0.1",
+        "acorn": "^8.12.1",
-        "acorn": "^8.9.0",
+        "acorn-typescript": "^1.4.13",
-        "aria-query": "^5.3.0",
+        "aria-query": "^5.3.1",
-        "axobject-query": "^4.0.0",
+        "axobject-query": "^4.1.0",
-        "code-red": "^1.0.3",
+        "esm-env": "^1.0.0",
-        "css-tree": "^2.3.1",
+        "esrap": "^1.2.2",
-        "estree-walker": "^3.0.3",
+        "is-reference": "^3.0.2",
-        "is-reference": "^3.0.1",
         "locate-character": "^3.0.0",
-        "magic-string": "^0.30.4",
+        "magic-string": "^0.30.11",
-        "periscopic": "^3.1.0"
+        "zimmerframe": "^1.1.2"
       },
       "engines": {
-        "node": ">=16"
+        "node": ">=18"
       }
     },
     "node_modules/svelte-check": {
@@ -1858,19 +1889,6 @@
         "typescript": ">=5.0.0"
       }
     },
-    "node_modules/svelte-hmr": {
-      "version": "0.16.0",
-      "resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.16.0.tgz",
-      "integrity": "sha512-Gyc7cOS3VJzLlfj7wKS0ZnzDVdv3Pn2IuVeJPk9m2skfhcu5bq3wtIZyQGggr7/Iim5rH5cncyQft/kRLupcnA==",
-      "dev": true,
-      "license": "ISC",
-      "engines": {
-        "node": "^12.20 || ^14.13.1 || >= 16"
-      },
-      "peerDependencies": {
-        "svelte": "^3.19.0 || ^4.0.0"
-      }
-    },
     "node_modules/svelte-preprocess": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-6.0.3.tgz",
@@ -2147,13 +2165,17 @@
       }
     },
     "node_modules/vitefu": {
-      "version": "0.2.5",
+      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/vitefu/-/vitefu-0.2.5.tgz",
+      "resolved": "https://registry.npmjs.org/vitefu/-/vitefu-1.0.3.tgz",
-      "integrity": "sha512-SgHtMLoqaeeGnd2evZ849ZbACbnwQCIwRH57t18FxcXoZop0uQu0uzlIhJBlF/eWVzuce0sHeqPcDo+evVcg8Q==",
+      "integrity": "sha512-iKKfOMBHob2WxEJbqbJjHAkmYgvFDPhuqrO82om83S8RLk+17FtyMBfcyeH8GqD0ihShtkMW/zzJgiA51hCNCQ==",
       "dev": true,
       "license": "MIT",
+      "workspaces": [
+        "tests/deps/*",
+        "tests/projects/*"
+      ],
       "peerDependencies": {
-        "vite": "^3.0.0 || ^4.0.0 || ^5.0.0"
+        "vite": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0-beta.0"
       },
       "peerDependenciesMeta": {
         "vite": {
@@ -2242,6 +2264,25 @@
       "engines": {
         "node": ">=8"
       }
+    },
+    "node_modules/yaml": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "dev": true,
+      "license": "ISC",
+      "optional": true,
+      "peer": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/zimmerframe": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/zimmerframe/-/zimmerframe-1.1.2.tgz",
+      "integrity": "sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w==",
+      "dev": true,
+      "license": "MIT"
     }
   }
 }

package.json

@@ -20,19 +20,19 @@
   "devDependencies": {
     "@playwright/test": "^1.28.1",
     "@sveltejs/adapter-auto": "^3.0.0",
-    "@sveltejs/kit": "^2.0.0",
+    "@sveltejs/kit": "^2.5.27",
-    "@sveltejs/vite-plugin-svelte": "^3.0.0",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0-next.0",
     "@types/ua-parser-js": "^0.7.39",
     "@types/user-agents": "^1.0.4",
     "less": "^4.2.0",
     "prettier": "^3.1.1",
-    "prettier-plugin-svelte": "^3.1.2",
+    "prettier-plugin-svelte": "^3.2.6",
-    "svelte": "^4.2.7",
+    "svelte": "^5.0.0-next.0",
     "svelte-check": "^4.0.0",
     "svelte-preprocess": "^6.0.3",
-    "typescript": "^5.0.0",
+    "typescript": "^5.5.0",
     "user-agents": "^1.1.325",
-    "vite": "^5.0.3",
+    "vite": "^5.4.4",
     "vitest": "^2.0.0"
   },
   "type": "module"

src/lib/components/code-input.svelte

@@ -1,5 +1,9 @@
 <script lang="ts">
-  export let code: string;
+  interface Props {
+    code: string;
+  }
+
+  let { code = $bindable() }: Props = $props();
 </script>
 
 <textarea bind:value={code}></textarea>

src/lib/components/editor.svelte

@@ -1,17 +1,22 @@
 <script lang="ts">
-  import { pane as navStore, type Pane } from '$lib/stores/nav';
+  import { type Snippet } from 'svelte';
 
-  export let pane: Pane;
+  import { pane as navStore, type Pane } from '$lib/stores/nav.js';
 
-  export let testid: string | undefined = undefined;
+  interface Props {
+    pane: Pane;
+    testid?: string;
+    children?: Snippet;
+  }
+
+  let { pane, testid, children }: Props = $props();
 
   // don't show pane if we're not the current pane
-  let hidden: boolean;
+  let hidden: boolean = $derived(pane !== $navStore);
-  $: hidden = pane !== $navStore;
 </script>
 
 <div id={`pane-${pane}`} data-testid={testid} role="tabpanel" class:hidden>
-  <slot />
+  {@render children?.()}
 </div>
 
 <style lang="less">

src/lib/components/headline.svelte

@@ -1,5 +1,15 @@
+<script lang="ts">
+  import { type Snippet } from 'svelte';
+
+  interface Props {
+    children: Snippet;
+  }
+
+  let { children }: Props = $props();
+</script>
+
 <header>
-  <h1><slot /></h1>
+  <h1>{@render children()}</h1>
 </header>
 
 <style lang="less">

src/lib/components/nav-item.svelte

@@ -1,10 +1,16 @@
 <script lang="ts">
-  import { pane, type Pane } from '$lib/stores/nav';
+  import { type Snippet } from 'svelte';
 
-  export let destination: Pane;
+  import { pane, type Pane } from '$lib/stores/nav.js';
 
-  let selected: boolean;
+  interface Props {
-  $: selected = destination === $pane;
+    destination: Pane;
+    children: Snippet;
+  }
+
+  let { destination, children }: Props = $props();
+
+  let selected: boolean = $derived(destination === $pane);
 
   function handleKey({ key }: KeyboardEvent) {
     if (key === ' ' || key === 'Enter' || key === 'Spacebar') {
@@ -23,10 +29,10 @@
   role="tab"
   tabindex="0"
   class:selected
-  on:click={navigate}
+  onclick={navigate}
-  on:keyup={handleKey}
+  onkeyup={handleKey}
 >
-  <slot />
+  {@render children()}
 </li>
 
 <style lang="less">

src/lib/components/nav-toggle.svelte

@@ -1,16 +1,19 @@
 <script lang="ts">
-  export let navOpen: boolean;
+  interface Props {
+    navOpen: boolean;
+  }
+
+  let { navOpen = $bindable() }: Props = $props();
 
   // if nav is open, we should "hide" it on press. if not, we should "show" it.
-  let action: string;
+  let action: string = $derived(navOpen ? 'hide' : 'show');
-  $: action = navOpen ? 'hide' : 'show';
 
   function toggle() {
     navOpen = !navOpen;
   }
 </script>
 
-<button on:click={toggle}>{action} navigation</button>
+<button onclick={toggle}>{action} navigation</button>
 
 <style lang="less">
   button {

src/lib/components/nav-tree.svelte

@@ -1,11 +1,17 @@
 <script lang="ts">
+  import { type Snippet } from 'svelte';
   import { slide } from 'svelte/transition';
 
   import NavToggle from './nav-toggle.svelte';
 
-  export let mobile: boolean = true;
+  interface Props {
+    mobile?: boolean;
+    children: Snippet;
+  }
 
-  let open: boolean = false;
+  let { mobile = true, children }: Props = $props();
+
+  let open: boolean = $state(false);
 </script>
 
 <nav>
@@ -14,7 +20,7 @@
   {/if}
   {#if open || !mobile}
     <ul role="tablist" transition:slide={{ duration: 300 }}>
-      <slot />
+      {@render children()}
     </ul>
   {/if}
 </nav>

src/lib/components/preview.svelte

@@ -1,13 +1,15 @@
 <script lang="ts">
-  import { pane } from '$lib/stores/nav';
+  import { pane } from '$lib/stores/nav.js';
 
-  export let mobile: boolean;
+  interface Props {
+    mobile?: boolean;
+    markdown: string;
+    stylesheet: string;
+  }
 
-  let hidden: boolean;
+  let { mobile = true, markdown, stylesheet }: Props = $props();
-  $: hidden = mobile ? $pane !== 'preview' : true;
 
-  export let markdown: string;
+  let hidden: boolean = $derived(mobile ? $pane !== 'preview' : true);
-  export let stylesheet: string;
 </script>
 
 <main class:hidden class:mobile data-testid="preview-pane">

src/lib/index.ts

@@ -1 +0,0 @@
-// place files you want to import through the `$lib` alias in this folder.

src/routes/+layout.server.ts

@@ -1,6 +1,8 @@
+import { type RequestEvent } from '@sveltejs/kit';
+
 import { UAParser } from 'ua-parser-js';
 
-export async function load({ request }) {
+export async function load({ request }: RequestEvent) {
   const ua = request.headers.get('user-agent');
 
   if (!ua) {

src/routes/+layout.svelte

@@ -1,5 +1,13 @@
 <script lang="ts">
+  import { type Snippet } from 'svelte';
+
   import '../app.less';
+
+  interface Props {
+    children: Snippet;
+  }
+
+  let { children }: Props = $props();
 </script>
 
-<slot />
+{@render children()}

src/routes/+page.svelte

@@ -2,6 +2,8 @@
   import { onMount } from 'svelte';
   import { get } from 'svelte/store';
 
+  import type { PageData } from './$types';
+
   import { pane } from '$lib/stores/nav.js';
 
   import CodeInput from '$lib/components/code-input.svelte';
@@ -11,9 +13,13 @@
   import NavTree from '$lib/components/nav-tree.svelte';
   import Preview from '$lib/components/preview.svelte';
 
-  export let data;
+  interface Props {
+    data: PageData;
+  }
 
-  let mobile: boolean = data.mobile;
+  let { data }: Props = $props();
+
+  let mobile: boolean = $state(data.mobile);
 
   function checkIsDesktop() {
     // TODO: figure out how to remove hard-coded value here
@@ -34,8 +40,8 @@
     };
   });
 
-  let markdown: string = '';
+  let markdown: string = $state('');
-  let stylesheet: string = '';
+  let stylesheet: string = $state('');
 </script>
 
 <svelte:head>

svelte.config.js

@@ -18,6 +18,10 @@ const config = {
     // See https://kit.svelte.dev/docs/adapters for more information about adapters.
     adapter: adapter(),
   },
+
+  compilerOptions: {
+    runes: true,
+  },
 };
 
 export default config;