new svelte 5

.eslintrc

@@ -7,14 +7,15 @@
     "**/wasm/*"
   ],
   "extends": [
-    "eslint:recommended"
+    "eslint:recommended",
+    "plugin:svelte/recommended"
   ],
   "overrides": [
     {
       "files": [
         "*.svelte"
       ],
-      "processor": "svelte3/svelte3"
+      "parser": "svelte-eslint-parser"
     }
   ],
   "rules": {

package.json

@@ -8,7 +8,8 @@
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
-    "lint": "eslint --ext .svelte,.js src/"
+    "lint": "eslint --ext .svelte,.js src/",
+    "format": "prettier --ignore-path .gitignore --write src/"
   },
   "devDependencies": {
     "@browser-logos/android-webview": "^1.0.2",
@@ -26,22 +27,22 @@
     "@browser-logos/samsung-internet": "^4.0.6",
     "@browser-logos/uc": "^1.1.0",
     "@browser-logos/web": "^3.0.1",
-    "@sveltejs/vite-plugin-svelte": "^3.1.2",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
     "eslint": "^8.57.1",
     "eslint-import-resolver-node": "^0.3.9",
-    "eslint-plugin-import": "^2.30.0",
-    "eslint-plugin-svelte3": "^4.0.0",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-svelte": "^2.46.0",
     "focus-visible": "^5.2.1",
     "normalize.css": "^8.0.1",
     "postcss": "^8.4.47",
     "postcss-import": "^16.1.0",
     "postcss-nested": "^6.2.0",
-    "postcss-preset-env": "^10.0.5",
+    "postcss-preset-env": "^10.0.8",
     "postcss-reporter": "^7.1.0",
     "prettier": "^3.3.3",
     "prettier-plugin-svelte": "^3.2.7",
-    "svelte": "^4.2.19",
-    "vite": "^5.4.8",
+    "svelte": "^5.1.3",
+    "vite": "^5.4.10",
     "vite-plugin-pwa": "^0.20.5",
     "wasm-pack": "0.12.1"
   },

src/App.svelte

@@ -1,5 +1,3 @@
-<svelte:options immutable="{true}" />
-
 <script>
   import {memoize} from '@utils/memoize'
   import {browserInfoFromStr, sortBrowsers} from '@utils/browsers'
@@ -8,9 +6,9 @@
   import GithubCorner from './components/GithubCorner.svelte'
   import BrowserInfo from './components/BrowserInfo.svelte'
 
-  let browserInput = '>0.3%, not IE 11, not dead'
-  let browsersResult = null
-  let timeout = null
+  let browserInput = $state('>0.3%, not IE 11, not dead')
+  let browsersResult = $state(null)
+  let timeout = $state(null)
 
   const getBrowserList = () => {
     try {
@@ -133,11 +131,7 @@
     <h1 class="header-title">Browserlist WASM</h1>
   </div>
   <div class="input-wrapper">
-    <input
-      class="main-input"
-      bind:value="{browserInput}"
-      on:keyup="{() => debounceBrowserList()}"
-    />
+    <input class="main-input" bind:value={browserInput} onkeyup={() => debounceBrowserList()} />
   </div>
   <div class="result">
     {#await loadWasm()}
@@ -149,7 +143,7 @@
       {#if browsersResult}
         <div class="results-list">
           {#each browsersResult as browserInfo (browserInfo.key)}
-            <BrowserInfo browserInfo="{browserInfo}" />
+            <BrowserInfo browserInfo={browserInfo} />
           {/each}
         </div>
       {:else}

src/components/BrowserInfo.svelte

@@ -1,7 +1,5 @@
-<svelte:options immutable="{true}" />
-
 <script>
-  export let browserInfo
+  let {browserInfo} = $props()
 </script>
 
 <style>
@@ -27,6 +25,6 @@
 </style>
 
 <div class="browser-wrapper">
-  <img class="browser-icon" src="{browserInfo.icon}" alt="{browserInfo.name}" />
+  <img class="browser-icon" src={browserInfo.icon} alt={browserInfo.name} />
   <span class="browser-name">{browserInfo.name}</span>
 </div>

src/components/GithubCorner.svelte

@@ -1,11 +1,9 @@
-<svelte:options immutable="{true}" />
-
 <script>
   import {onMount} from 'svelte'
 
-  const lightColor = '#fff'
-  const darkColor = '#151513'
-  let svgRoot = null
+  const lightColor = $state('#fff')
+  const darkColor = $state('#151513')
+  let svgRoot = $state(null)
 
   const applyStyles = (isDark = false) => {
     if (!svgRoot) {
@@ -76,7 +74,7 @@
   aria-label="View source on Github"
 >
   <svg
-    bind:this="{svgRoot}"
+    bind:this={svgRoot}
     width="80"
     height="80"
     viewBox="0 0 250 250"
@@ -88,10 +86,12 @@
       d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
       fill="currentColor"
       style="transform-origin: 130px 106px"
-      class="github-corner-arm"></path>
+      class="github-corner-arm"
+    ></path>
     <path
       d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
       fill="currentColor"
-      class="github-corner-body"></path>
+      class="github-corner-body"
+    ></path>
   </svg>
 </a>

src/components/SWPrompt.svelte

@@ -1,11 +1,10 @@
-<svelte:options immutable="{true}" />
-
 <script>
   import {useRegisterSW} from 'virtual:pwa-register/svelte'
 
   const {needRefresh, updateServiceWorker} = useRegisterSW({})
 
-  const close = () => {
+  const close = (e) => {
+    e.preventDefault()
     needRefresh.set(false)
   }
 </script>
@@ -55,11 +54,14 @@
       <div class="sw-message-content">New content available, click on reload button to update</div>
       <button
         class="sw-button sw-reload-button"
-        on:click|preventDefault="{() => updateServiceWorker(true)}"
+        onclick={(e) => {
+          e.preventDefault()
+          updateServiceWorker(true)
+        }}
       >
         Reload
       </button>
-      <button class="sw-button" on:click|preventDefault="{close}"> Close </button>
+      <button class="sw-button" onclick={close}> Close </button>
     </div>
   </div>
 {/if}