Migrate to Svelte 5 and Sveltekit 2

rezbyte · rezbyte · commit 177caf98806d · 2025-01-06T15:17:04.000+08:00
diff --git a/.eslintignore b/.eslintignore
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
diff --git a/.yarnrc.yml b/.yarnrc.yml
diff --git a/eslint.config.js b/eslint.config.js
@@ -0,0 +1,55 @@
+// @ts-check
+
+import eslint from '@eslint/js';
+import globals from 'globals';
+import tseslint from 'typescript-eslint';
+import eslintPluginSvelte from 'eslint-plugin-svelte';
+import eslintConfigPrettier from 'eslint-config-prettier';
+import * as svelteParser from 'svelte-eslint-parser';
+import * as typescriptParser from '@typescript-eslint/parser';
+import svelteConfig from './svelte.config.js';
+
+export default [
+  {
+    ignores: [
+      '**/DS_Store',
+      'node_modules/',
+      'docs/',
+      '.svelte-kit/',
+      '**/package',
+      '**/.env',
+      '**/.env.*',
+      '**/!.env.example',
+      // Ignore files for PNPM, NPM and YARN
+      '**/pnpm-lock.yaml',
+      '**/package-lock.json',
+      '**/yarn.lock',
+      '**/.pnp.cjs',
+      '**/.pnp.loader.mjs',
+      '.yarn/'
+    ]
+  },
+  eslint.configs.recommended,
+  ...tseslint.configs.recommended,
+  ...eslintPluginSvelte.configs['flat/recommended'],
+  ...eslintPluginSvelte.configs['flat/prettier'],
+  eslintConfigPrettier,
+  {
+    files: ['**/*.svelte'],
+    languageOptions: {
+      parser: svelteParser,
+      globals: {
+        ...globals.browser,
+        ...globals.node
+      },
+      parserOptions: {
+        parser: typescriptParser,
+        svelteConfig,
+        sourceType: 'module',
+        ecmaVersion: 2025,
+        project: './tsconfig.json',
+        extraFileExtensions: ['.svelte']
+      }
+    }
+  }
+];
diff --git a/package.json b/package.json
@@ -9,28 +9,31 @@
     "preview": "vite preview",
     "check": "svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
-    "lint": "prettier --check --plugin-search-dir=. . ; eslint .",
-    "format": "prettier --write --plugin-search-dir=. ."
+    "lint": "prettier --check . ; eslint .",
+    "format": "prettier --write ."
   },
   "devDependencies": {
-    "@sveltejs/adapter-static": "2.0.1",
-    "@sveltejs/kit": "1.15.0",
-    "@typescript-eslint/eslint-plugin": "5.57.1",
-    "@typescript-eslint/parser": "5.57.1",
-    "eslint": "8.37.0",
-    "eslint-config-prettier": "8.8.0",
-    "eslint-plugin-svelte3": "4.0.0",
-    "prettier": "2.8.7",
-    "prettier-plugin-svelte": "2.10.0 ",
-    "svelte": "3.58.0",
-    "svelte-check": "3.1.4",
-    "svelte-preprocess": "5.0.3",
-    "tslib": "2.5.0",
-    "typescript": "5.0.3",
-    "vite": "4.2.1"
-  },
-  "installConfig": {
-    "pnp": true
+    "@eslint/js": "^9.17.0",
+    "@sveltejs/adapter-static": "^3.0.8",
+    "@sveltejs/kit": "^2.15.1",
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
+    "@types/node": "^22.10.5",
+    "@typescript-eslint/eslint-plugin": "8.19.0",
+    "@typescript-eslint/parser": "8.19.0",
+    "eslint": "9.17.0",
+    "eslint-config-prettier": "9.1.0",
+    "eslint-plugin-svelte": "^2.46.1",
+    "globals": "^15.14.0",
+    "prettier": "^3.4.2",
+    "prettier-plugin-svelte": "^3.3.2",
+    "svelte": "^5.16.2",
+    "svelte-check": "^4.1.1",
+    "svelte-eslint-parser": "^0.43.0",
+    "svelte-preprocess": "^6.0.3",
+    "tslib": "2.8.1",
+    "typescript": "^5.7.2",
+    "typescript-eslint": "^8.19.0",
+    "vite": "^6.0.7"
   },
   "type": "module",
   "packageManager": "yarn@4.6.0"
diff --git a/src/app.html b/src/app.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
diff --git a/src/lib/Gallery.svelte b/src/lib/Gallery.svelte
@@ -1,9 +1,14 @@
 <script lang="ts">
-  export let center = false;
+  interface Props {
+    center?: boolean;
+    children?: import('svelte').Snippet;
+  }
+
+  let { center = false, children }: Props = $props();
 </script>
 
 <div class={center ? 'center' : ''}>
-  <slot />
+  {@render children?.()}
 </div>
 
 <style>
diff --git a/src/lib/GalleryEntry.svelte b/src/lib/GalleryEntry.svelte
@@ -1,18 +1,29 @@
 <script lang="ts">
   import fallbackImage from '/src/lib/assets/no-image.jpg';
-  export let src: string = fallbackImage;
-  export let title = 'Unknown';
-  export let deployedLink: string | undefined = undefined;
-  export let repositoryLink: string | undefined = undefined;
+  interface Props {
+    src?: string;
+    title?: string;
+    deployedLink?: string | undefined;
+    repositoryLink?: string | undefined;
+    children?: import('svelte').Snippet;
+  }
+
+  let {
+    src = fallbackImage,
+    title = 'Unknown',
+    deployedLink = undefined,
+    repositoryLink = undefined,
+    children
+  }: Props = $props();
 
-  let touchmoved = false;
+  let touchmoved = $state(false);
   function handleTouch() {
     if (touchmoved === false) {
       toggle();
     }
   }
 
-  let isOpen = false;
+  let isOpen = $state(false);
   function open() {
     isOpen = true;
   }
@@ -30,20 +41,20 @@
 </script>
 
 <figure
-  on:mouseenter={() => open()}
-  on:mouseleave={() => close()}
-  on:touchstart={() => {
+  onmouseenter={() => open()}
+  onmouseleave={() => close()}
+  ontouchstart={() => {
     touchmoved = false;
   }}
-  on:touchmove={() => {
+  ontouchmove={() => {
     touchmoved = true;
   }}
-  on:touchend={handleTouch}
+  ontouchend={handleTouch}
 >
   <img {src} alt={title} />
   <figcaption class={isOpen ? 'opened' : 'closed'}>
     <h1>{title}</h1>
-    <slot />
+    {@render children?.()}
     <div>
       {#if deployedLink}
         <a href={deployedLink}>Visit Site</a>
diff --git a/src/lib/Sidebar.svelte b/src/lib/Sidebar.svelte
@@ -1,5 +1,13 @@
+<script lang="ts">
+  interface Props {
+    children?: import('svelte').Snippet;
+  }
+
+  let { children }: Props = $props();
+</script>
+
 <nav>
-  <slot />
+  {@render children?.()}
 </nav>
 
 <style>
diff --git a/src/lib/SidebarLink.svelte b/src/lib/SidebarLink.svelte
@@ -1,9 +1,15 @@
 <script lang="ts">
-  export let to: HTMLElement;
-  export let name: string;
+  import { preventDefault } from 'svelte/legacy';
+
+  interface Props {
+    to: HTMLElement;
+    name: string;
+  }
+
+  let { to, name }: Props = $props();
 </script>
 
-<a href="/" on:click|preventDefault={() => to.scrollIntoView({ behavior: 'smooth' })}>{name}</a>
+<a href="/" onclick={preventDefault(() => to.scrollIntoView({ behavior: 'smooth' }))}>{name}</a>
 
 <style>
   a {
diff --git a/src/lib/SquareLink.svelte b/src/lib/SquareLink.svelte
@@ -5,7 +5,11 @@
   import EmailLogo from '$lib/assets/email.svg';
   import XingLogo from '$lib/assets/xing.svg';
 
-  export let href: string;
+  interface Props {
+    href: string;
+  }
+
+  let { href }: Props = $props();
 
   const siteName = getSiteName(href);
 
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -5,7 +5,7 @@
   import SidebarLink from '$lib/SidebarLink.svelte';
   import SquareLink from '$lib/SquareLink.svelte';
 
-  let sections: { [key: string]: HTMLElement } = {};
+  let sections: { [key: string]: HTMLElement } = $state({});
 </script>
 
 <Sidebar>
diff --git a/vite.config.js b/vite.config.js
@@ -1,18 +1,9 @@
 // vite.config.js
 import { sveltekit } from '@sveltejs/kit/vite';
-import { searchForWorkspaceRoot } from 'vite';
 
 /** @type {import('vite').UserConfig} */
 const config = {
-  plugins: [sveltekit()],
-  server: {
-    fs: {
-      allow: [
-        // Workaround for Yarn PNP
-        searchForWorkspaceRoot(process.cwd())
-      ]
-    }
-  }
+  plugins: [sveltekit()]
 };
 
 export default config;
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<!DOCTYPE html>`
	`1`	`+<!doctype html>`
`2`	`2`	`<html lang="en">`
`3`	`3`	`<head>`
`4`	`4`	`<meta charset="utf-8" />`