feat!: Svelte 5 (#723)

* svelte 5: bump all deps

* svelte 5: migrate apps/web

* svelte 5: migrate storybook

* complete svelte 5 migration

* little format

* keep some legacy

* chore: lockfile

* ui: try adding patch script (temp sol)

* pls work

* patch storybook addon svelte csf package

* change default port of apps

* remove redundant patch scripts

* chore: bump deps again

* storybook import patches

* storybook: fix all invalid import

Author: leomotors

.github/workflows/deploy-docker.yaml

@@ -58,7 +58,7 @@ jobs:
 
     steps:
       - name: Checkout with tags
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
           ref: ${{ matrix.packages.ref }}

.github/workflows/e2e.yaml

@@ -11,7 +11,7 @@ jobs:
         name: Checkout
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v4
         id: pnpm-install
         with:
           run_install: false

.github/workflows/release-without-versioning.yaml

@@ -48,7 +48,7 @@ jobs:
           node-version-file: .nvmrc
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v4
         id: pnpm-install
         with:
           run_install: false

.github/workflows/release.yaml

@@ -76,7 +76,7 @@ jobs:
           node-version-file: .nvmrc
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v4
         id: pnpm-install
         with:
           run_install: false

.github/workflows/reusable-ci.yaml

@@ -22,7 +22,7 @@ jobs:
           fetch-depth: 0
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v4
         id: pnpm-install
         with:
           run_install: false

apps/analytics/package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@repo/database": "workspace:*",
-    "dotenv-cli": "^7.4.4",
+    "dotenv-cli": "^8.0.0",
     "drizzle-orm": "^0.38.1",
     "postgres": "^3.4.5",
     "tsx": "^4.19.2"

apps/storybook/package.json

@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "storybook dev -p 6006",
+    "dev": "storybook dev -p 5342",
     "build": "storybook build",
     "check": "svelte-check --tsconfig ./tsconfig.json",
     "lint": "eslint . && prettier --check \"src/**/*.mdx\"",
@@ -18,22 +18,22 @@
     "@storybook/addon-essentials": "^8.4.7",
     "@storybook/addon-interactions": "^8.4.7",
     "@storybook/addon-links": "^8.4.7",
-    "@storybook/addon-svelte-csf": "^4.2.0",
+    "@storybook/addon-svelte-csf": "^5.0.0-next.21",
     "@storybook/addon-themes": "^8.4.7",
     "@storybook/blocks": "^8.4.7",
     "@storybook/svelte": "^8.4.7",
     "@storybook/svelte-vite": "^8.4.7",
     "@storybook/test": "^8.4.7",
-    "@sveltejs/vite-plugin-svelte": "^3.1.2",
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "@tsconfig/svelte": "^5.0.4",
-    "eslint": "^9.16.0",
+    "eslint": "^9.17.0",
     "sass-embedded": "^1.83.0",
     "storybook": "^8.4.7",
-    "svelte": "^4.2.18",
+    "svelte": "^5.15.0",
     "svelte-check": "^4.1.1",
-    "tailwindcss": "^3.4.16",
+    "tailwindcss": "^3.4.17",
     "tslib": "^2.8.1",
     "typescript": "^5.7.2",
-    "vite": "^6.0.3"
+    "vite": "^6.0.5"
   }
 }

apps/web/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "vite dev",
+    "dev": "vite dev --clearScreen false",
     "build": "vite build",
     "preview": "vite preview",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
@@ -21,24 +21,24 @@
   "devDependencies": {
     "@playwright/test": "^1.49.1",
     "@repo/config": "workspace:^",
-    "@sveltejs/adapter-auto": "^3.3.1",
-    "@sveltejs/kit": "^2.11.1",
-    "@sveltejs/vite-plugin-svelte": "^3.1.2",
-    "@typescript-eslint/eslint-plugin": "^8.18.0",
-    "@typescript-eslint/parser": "^8.18.0",
+    "@sveltejs/adapter-node": "^5.2.11",
+    "@sveltejs/kit": "^2.15.0",
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
+    "@typescript-eslint/eslint-plugin": "^8.18.2",
+    "@typescript-eslint/parser": "^8.18.2",
     "autoprefixer": "^10.4.20",
     "drizzle-orm": "^0.38.1",
-    "eslint": "^9.16.0",
+    "eslint": "^9.17.0",
     "postcss": "^8.4.49",
     "postgres": "^3.4.5",
     "prettier": "^3.4.2",
     "prettier-plugin-svelte": "^3.3.2",
-    "svelte": "^4.2.18",
+    "svelte": "^5.15.0",
     "svelte-check": "^4.1.1",
-    "tailwindcss": "^3.4.16",
+    "tailwindcss": "^3.4.17",
     "tslib": "^2.8.1",
     "typescript": "^5.7.2",
-    "vite": "^5.4.11",
+    "vite": "^6.0.5",
     "vitest": "^2.1.8"
   }
 }

apps/web/src/routes/+layout.svelte

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

apps/web/src/routes/+page.server.ts

@@ -8,7 +8,7 @@
   import { Input } from '@repo/ui/input'
   import { RecommendedTag } from '@repo/ui/recommended-tag'
 
-  let counter = 0
+  let counter = $state(0)
 
   const onButtonClick = () => {
     counter++
@@ -17,7 +17,7 @@
 
 <h1>Web</h1>
 
-<Button on:click="{onButtonClick}">Button</Button>
+<Button onclick={onButtonClick}>Button</Button>
 
 {counter}
 
@@ -30,15 +30,17 @@
 <Chip>รหัสผ่าน</Chip>
 <Chip
   closable
-  onClose="{() => {
+  onClose={() => {
     console.log('close')
-  }}">Closable</Chip
+  }}
 >
+  Closable
+</Chip>
 <DayChip day="SA" />
 <GenedChip type="SC" />
 
 <h1>Testtsetst</h1>
-<CourseCard recommended="{true}" class="mt-4" />
+<CourseCard recommended={true} class="mt-4" />
 
 <h1>RecommendedTag</h1>
 <RecommendedTag />

apps/web/src/routes/+page.svelte

@@ -1,4 +1,4 @@
-import adapter from '@sveltejs/adapter-auto'
+import adapter from '@sveltejs/adapter-node'
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
 
 /** @type {import('@sveltejs/kit').Config} */
@@ -7,8 +7,6 @@ const config = {
   // for more information about preprocessors
   preprocess: vitePreprocess(),
   kit: {
-    // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
-    // If your environment is not supported or you settled on a specific environment, switch out the adapter.
     // See https://kit.svelte.dev/docs/adapters for more information about adapters.
     adapter: adapter(),
   },

apps/web/svelte.config.js

@@ -12,9 +12,12 @@ export default defineConfig({
     },
   },
   server: {
-    port: 5173,
+    port: 5343,
     fs: {
       allow: ['../../packages/ui/src'],
     },
   },
+  preview: {
+    port: 4343,
+  },
 })

apps/web/vite.config.ts

@@ -6,16 +6,16 @@
     "build": "turbo run build",
     "dev": "turbo run dev",
     "lint": "turbo run --continue lint",
-    "format": "turbo run --continue format"
+    "format": "turbo run --continue format",
+    "storybook:dev": "turbo run --filter=@app/storybook dev"
   },
   "devDependencies": {
     "@changesets/changelog-github": "^0.5.0",
-    "@changesets/cli": "^2.27.10",
+    "@changesets/cli": "^2.27.11",
     "@repo/config": "workspace:^",
-    "@types/eslint": "^9.6.1",
-    "eslint": "^9.16.0",
+    "eslint": "^9.17.0",
     "prettier": "^3.4.2",
     "turbo": "^2.3.3"
   },
-  "packageManager": "pnpm@9.15.0"
+  "packageManager": "pnpm@9.15.1"
 }

package.json

@@ -8,8 +8,8 @@
     "format": "eslint . --fix"
   },
   "dependencies": {
-    "@typescript-eslint/eslint-plugin": "^8.18.0",
-    "@typescript-eslint/parser": "^8.18.0",
+    "@typescript-eslint/eslint-plugin": "^8.18.2",
+    "@typescript-eslint/parser": "^8.18.2",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-turbo": "^2.3.3",
     "eslint-plugin-prettier": "^5.2.1",
@@ -20,12 +20,10 @@
     "prettier-plugin-svelte": "^3.3.2"
   },
   "devDependencies": {
-    "@eslint/js": "^9.16.0",
-    "@types/eslint": "^9.6.1",
-    "@types/eslint__js": "^8.42.3",
-    "eslint": "^9.16.0",
-    "globals": "^15.13.0",
+    "@eslint/js": "^9.17.0",
+    "eslint": "^9.17.0",
+    "globals": "^15.14.0",
     "typescript": "^5.7.2",
-    "typescript-eslint": "^8.18.0"
+    "typescript-eslint": "^8.18.2"
   }
 }

packages/config/package.json

@@ -21,7 +21,7 @@
     "@types/cli-progress": "^3.11.6",
     "@types/node": "^22.10.2",
     "cli-progress": "^3.12.0",
-    "dotenv-cli": "^7.4.4",
+    "dotenv-cli": "^8.0.0",
     "drizzle-kit": "^0.30.0",
     "tsx": "^4.19.2",
     "typescript": "^5.7.2"

packages/database/package.json

@@ -14,24 +14,25 @@
   },
   "scripts": {
     "lint": "eslint .",
-    "format": "eslint . --fix"
+    "format": "eslint . --fix",
+    "postinstall": "node scripts/patch-sb-csf.js"
   },
   "devDependencies": {
     "@repo/config": "workspace:^",
-    "@storybook/addon-svelte-csf": "^4.2.0",
+    "@storybook/addon-svelte-csf": "^5.0.0-next.21",
     "@storybook/svelte": "^8.4.7",
-    "@sveltejs/adapter-node": "^5.2.10",
-    "@sveltejs/kit": "^2.11.1",
-    "@sveltejs/vite-plugin-svelte": "^3.1.2",
-    "svelte": "^4.2.18",
+    "@sveltejs/adapter-node": "^5.2.11",
+    "@sveltejs/kit": "^2.15.0",
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
+    "svelte": "^5.15.0",
     "vitest": "^2.1.8"
   },
   "dependencies": {
     "bits-ui": "^0.22.0",
     "clsx": "^2.1.1",
-    "lucide-svelte": "^0.468.0",
-    "tailwind-merge": "^2.5.5",
+    "lucide-svelte": "^0.469.0",
+    "tailwind-merge": "^2.6.0",
     "tailwind-variants": "^0.3.0",
-    "tailwindcss": "^3.4.16"
+    "tailwindcss": "^3.4.17"
   }
 }