chore: update all dependencies and adapt code to them

package.json

@@ -14,23 +14,23 @@
     "lint": "prettier --check . && eslint ."
   },
   "devDependencies": {
-    "@eslint/compat": "^1.2.5",
+    "@eslint/compat": "^2.0.5",
-    "@eslint/js": "^9.18.0",
+    "@eslint/js": "^10.0.1",
-    "@sveltejs/kit": "^2.16.0",
+    "@sveltejs/kit": "^2.57.1",
-    "@sveltejs/vite-plugin-svelte": "^5.0.0",
+    "@sveltejs/vite-plugin-svelte": "^7.0.0",
-    "eslint": "^9.28.0",
+    "eslint": "^10.2.0",
     "eslint-config-prettier": "^10.0.1",
-    "eslint-plugin-svelte": "^3.9.1",
+    "eslint-plugin-svelte": "^3.17.0",
-    "globals": "^16.0.0",
+    "globals": "^17.5.0",
-    "prettier": "^3.5.3",
+    "prettier": "^3.8.3",
-    "prettier-plugin-svelte": "^3.3.3",
+    "prettier-plugin-svelte": "^3.5.1",
-    "svelte": "^5.0.0",
+    "svelte": "^5.55.4",
-    "svelte-check": "^4.0.0",
+    "svelte-check": "^4.4.6",
-    "typescript": "^5.0.0",
+    "typescript": "^6.0.2",
-    "vite": "^6.2.6"
+    "vite": "^8.0.8"
   },
   "dependencies": {
-    "@sveltejs/adapter-node": "^5.2.12",
+    "@sveltejs/adapter-node": "^5.5.4",
     "accept-language-parser": "^1.5.0",
     "sveltekit-i18n": "^2.4.2"
   }

src/lib/components/CardList.svelte

@@ -52,7 +52,7 @@
 
 {#if files.length !== 0}
   <div id="container" style="width: 100%; heigth: 100vh;">
-    {#each Array.from(files) as file, i}
+    {#each Array.from(files) as file, i (i)}
       <div class="canvas-container">
         <canvas bind:this={canvasRefs[i]} class="canvas"></canvas>
         <p><strong>{file.name}</strong></p>

src/lib/components/Dropzone.svelte

@@ -12,6 +12,7 @@
 
 <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<!-- eslint-disable svelte/no-at-html-tags  -->
 <div
   id="dropzone"
   tabindex={0}

src/lib/components/FileList.svelte

@@ -11,7 +11,7 @@
   <div id="selected-files-container">
     <h2>{title}:</h2>
     <div id="files-list">
-      {#each Array.from(files) as file}
+      {#each Array.from(files) as file, i (i)}
         <div id={isError ? 'selected-file-card-error' : 'selected-file-card'}>
           <span>{file.name}</span>
           <span>{Math.round(file.size / 1000)} KB</span>

src/lib/components/Footer.svelte

@@ -1,8 +1,10 @@
 <script>
+  import { resolve } from '$app/paths';
   import { t } from '$lib/translations';
   import { appVersion } from '$lib/utils/env';
 </script>
 
+<!-- eslint-disable svelte/no-at-html-tags -->
 <footer>
   <div class="footer-content">
     <div class="footer-info">
@@ -24,9 +26,9 @@
     </div>
 
     <nav class="footer-nav">
-      <a href="/about">{$t('footer.about')}</a>
+      <a href={resolve('/about')}>{$t('footer.about')}</a>
-      <a href="/privacy-policy">{$t('footer.privacy.policy')}</a>
+      <a href={resolve('/privacy-policy')}>{$t('footer.privacy.policy')}</a>
-      <a href="/terms-of-service">{$t('footer.terms.of.service')}</a>
+      <a href={resolve('/terms-of-service')}>{$t('footer.terms.of.service')}</a>
     </nav>
   </div>
 </footer>

src/lib/components/Header.svelte

@@ -2,6 +2,7 @@
   import { t, locale, SUPPORTED_LOCALES } from '$lib/translations';
   import logo from '$lib/assets/logo.webp';
   import MediaQuery from './MediaQuery.svelte';
+  import { resolve } from '$app/paths';
 
   /**
    *
@@ -36,7 +37,7 @@
   <div class="logo">
     <MediaQuery query="(max-width: 768px)" let:matches>
       {@const configs = configsFor(matches)}
-      <a href="/">
+      <a href={resolve('/')}>
         <img
           src={configs.src}
           alt="Embroidery viewer logo"
@@ -60,16 +61,16 @@
     <nav class:is-open={isMenuOpen}>
       <ul>
         <li>
-          <a href="/">{$t('header.homeNav')}</a>
+          <a href={resolve('/')}>{$t('header.homeNav')}</a>
         </li>
         <li>
-          <a href="/viewer">{$t('header.viewerNav')}</a>
+          <a href={resolve('/viewer')}>{$t('header.viewerNav')}</a>
         </li>
         <li>
-          <a href="/about">{$t('header.aboutNav')}</a>
+          <a href={resolve('/about')}>{$t('header.aboutNav')}</a>
         </li>
         <li>
-          <a href="/donate">{$t('header.donateNav')}</a>
+          <a href={resolve('/donate')}>{$t('header.donateNav')}</a>
         </li>
       </ul>
     </nav>

src/lib/translations/index.js

@@ -57,7 +57,8 @@ const config = {
       locale: SUPPORTED_LOCALES.EN_US,
       key: 'mobile.app.privacy.policy',
       routes: ['/mobile-app/privacy-policy'],
-      loader: async () => (await import('./en-US/mobile-app-privacy-policy.json')).default,
+      loader: async () =>
+        (await import('./en-US/mobile-app-privacy-policy.json')).default,
     },
     {
       locale: SUPPORTED_LOCALES.EN_US,
@@ -110,7 +111,8 @@ const config = {
       locale: SUPPORTED_LOCALES.PT_BR,
       key: 'mobile.app.privacy.policy',
       routes: ['/mobile-app/privacy-policy'],
-      loader: async () => (await import('./pt-BR/mobile-app-privacy-policy.json')).default,
+      loader: async () =>
+        (await import('./pt-BR/mobile-app-privacy-policy.json')).default,
     },
     {
       locale: SUPPORTED_LOCALES.PT_BR,

src/routes/+layout.svelte

@@ -6,7 +6,9 @@
   import Footer from '$lib/components/Footer.svelte';
   import Analytics from '$lib/components/Analytics.svelte';
 
-  let mounted = false;
+	let { children } = $props();
+
+	let mounted = $state(false);
 
   if (browser) {
     onMount(() => {
@@ -20,7 +22,7 @@
 {#if mounted}
   <Header />
   <main>
-    <slot />
+		{@render children()}
   </main>
   <Footer />
 {/if}

src/routes/+page.js

@@ -1,4 +1,3 @@
-
 /** @type {import('./$types').PageLoad} */
 export function load() {
   return {

src/routes/+page.server.js

@@ -1,6 +1,5 @@
 import { EMAIL_ACCESS_KEY, EMAIL_BASE_URL } from '$env/static/private';
 
-
 /** @type {import('./$types').Actions} */
 export const actions = {
   default: async ({ request }) => {
@@ -15,20 +14,20 @@ export const actions = {
         name: formData.get('name'),
         email: formData.get('email'),
       }),
-			headers: { 'Content-Type': 'application/json' }
+      headers: { 'Content-Type': 'application/json' },
     });
 
     const json = await response.json();
     if (json.error === undefined) {
       return {
-				message: "home.banner.feedback.success",
+        message: 'home.banner.feedback.success',
-				textColor: 'green'
+        textColor: 'green',
       };
     } else {
       return {
         message: 'home.banner.feedback.error',
-				textColor: 'red'
+        textColor: 'red',
       };
     }
-	}
+  },
 };

src/routes/+page.svelte

@@ -4,11 +4,11 @@
   import { applyAction, enhance } from '$app/forms';
 	import { invalidateAll } from '$app/navigation';
   import { t, locale, SUPPORTED_LOCALES } from '$lib/translations';
+  import { resolve } from '$app/paths';
 
   import Seo from '$lib/components/Seo.svelte';
   import appScreenshot from '$lib/assets/app-with-frame.png';
   import appScreenshotPt from '$lib/assets/app-with-frame-pt.png';
-  import { browser } from '$app/environment';
 
   let { data } = $props();
   /**
@@ -21,6 +21,7 @@
    */
 	let loading = $state(false);
 
+  // svelte-ignore state_referenced_locally
     const metadata = data.metadata;
 
   const resetFeedback = () => {
@@ -31,6 +32,7 @@
 
 <Seo {...metadata} />
 
+<!-- eslint-disable svelte/no-at-html-tags -->
 <div class="beta-section">
   <div class="beta-content">
     <div class="beta-image">
@@ -104,7 +106,7 @@
     <h2 id="donation-title">{$t('home.donation.title')}</h2>
     {@html $t('home.donation.description')}
     <p>
-      <a href="/donate" class="button">{$t('home.donation.cta')}</a>
+      <a href={resolve("/donate")} class="button">{$t('home.donation.cta')}</a>
       – {$t('home.donation.cta.description')}
     </p>
   </section>
@@ -113,7 +115,7 @@
   <section aria-labelledby="cta-title">
     <h2 id="cta-title">{$t('home.cta.title')}</h2>
     <p>
-      <a href="/viewer" class="button">{$t('home.cta.cta')}</a>
+      <a href={resolve("/viewer")} class="button">{$t('home.cta.cta')}</a>
       – {@html $t('home.cta.cta.description')}
     </p>
   </section>

src/routes/about/+page.svelte

@@ -6,6 +6,7 @@
   /** @type {import('./$types').PageProps} */
   let { data } = $props();
 
+  // svelte-ignore state_referenced_locally
   const metadata = data.metadata;
 </script>
 
@@ -14,6 +15,7 @@
 <section aria-labelledby="about-heading">
   <h1 id="about-heading">{$t('about.title')}</h1>
 
+  <!-- eslint-disable-next-line svelte/no-at-html-tags -->
   {@html $t('about.content')}
 </section>
 

src/routes/donate/+page.svelte

@@ -10,6 +10,7 @@
   /** @type {import('./$types').PageProps} */
   let { data } = $props();
 
+  // svelte-ignore state_referenced_locally
   const metadata = data.metadata;
 
   const BTC_ADDRESS = 'bc1qpc4lpyr6stxrrg3u0k4clp4crlt6z4j6q845rq';
@@ -44,6 +45,7 @@
   <header>
     <h1 id="donate-title">{$t('donate.title')}</h1>
     <p class="donate-subtitle">{$t('donate.subtitle')}</p>
+    <!-- eslint-disable-next-line svelte/no-at-html-tags -->
     <p>{@html $t('donate.description')}</p>
   </header>
 
@@ -55,7 +57,7 @@
       <p>{$t('donate.bitcoin.description')}</p>
       <button
         aria-label="Copy Bitcoin address"
-        on:click={() => copyToClipboard(BTC_ADDRESS, 'btc')}
+        onclick={() => copyToClipboard(BTC_ADDRESS, 'btc')}
       >
         {#if copyStatus.btc}
           {$t(copyStatus.btc)}
@@ -71,7 +73,7 @@
       <p>{$t('donate.monero.description')}</p>
       <button
         aria-label="Copy Monero address"
-        on:click={() => copyToClipboard(XMR_ADDRESS, 'xmr')}
+        onclick={() => copyToClipboard(XMR_ADDRESS, 'xmr')}
       >
         {#if copyStatus.xmr}
           {$t(copyStatus.xmr)}

src/routes/mobile-app/privacy-policy/+page.svelte

@@ -5,6 +5,7 @@
   /** @type {import('./$types').PageProps} */
   let { data } = $props();
 
+  // svelte-ignore state_referenced_locally
   const metadata = data.metadata;
 </script>
 
@@ -14,6 +15,7 @@
   <h1 id="privacy-policy-heading">{$t('mobile.app.privacy.policy.title')}</h1>
   <p><em>{$t('mobile.app.privacy.policy.last.update')}</em></p>
 
+  <!-- eslint-disable-next-line svelte/no-at-html-tags -->
   {@html $t('mobile.app.privacy.policy.content')}
 </section>
 

src/routes/privacy-policy/+page.svelte

@@ -5,6 +5,7 @@
   /** @type {import('./$types').PageProps} */
   let { data } = $props();
 
+  // svelte-ignore state_referenced_locally
   const metadata = data.metadata;
 </script>
 
@@ -14,6 +15,7 @@
   <h1 id="privacy-policy-heading">{$t('privacy.policy.title')}</h1>
   <p><em>{$t('privacy.policy.last.update')}</em></p>
 
+  <!-- eslint-disable-next-line svelte/no-at-html-tags -->
   {@html $t('privacy.policy.content')}
 </section>
 

src/routes/terms-of-service/+page.svelte

@@ -5,6 +5,7 @@
   /** @type {import('./$types').PageProps} */
   let { data } = $props();
 
+  // svelte-ignore state_referenced_locally
   const metadata = data.metadata;
 </script>
 
@@ -14,6 +15,7 @@
   <h1 id="tos-heading">{$t('terms.of.service.title')}</h1>
   <p><em>{$t('terms.of.service.update')}</em></p>
 
+  <!-- eslint-disable-next-line svelte/no-at-html-tags -->
   {@html $t('terms.of.service.content')}
 </section>
 

src/routes/viewer/+page.svelte

@@ -1,4 +1,6 @@
 <script>
+  // @ts-nocheck
+
   import { t } from '$lib/translations';
 
   import CardList from '$lib/components/CardList.svelte';
@@ -80,11 +82,13 @@
   /** @type {import('./$types').PageProps} */
   let { data } = $props();
 
+  // svelte-ignore state_referenced_locally
   const metadata = data.metadata;
 </script>
 
 <Seo {...metadata} />
 
+<!-- eslint-disable svelte/no-at-html-tags -->
 <form id="form" enctype="multipart/form-data" onsubmit={onSubmit}>
   <div class="title-container">
     <h2>{$t('viewer.title')}</h2>