update svelte and svelte kit

emiljohansson · Dec 25, 2024 · 8099f4d · 8099f4d
1 parent 4861624
commit 8099f4d
Show file tree

Hide file tree

Showing 37 changed files with 302 additions and 250 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -27,3 +27,6 @@ apps/next/tsconfig.json
 
 # supabase database types
 apps/next/src/lib/database.types.ts
+
+# unfixable/dont have time for
+apps/svelte/src/app.html
diff --git a/apps/code-not-found/package.json b/apps/code-not-found/package.json
@@ -18,3 +18,4 @@
 		"tsconfig": "workspace:*"
 	}
 }
+
diff --git a/apps/design/package.json b/apps/design/package.json
@@ -29,3 +29,4 @@
 		"tsconfig": "workspace:*"
 	}
 }
+
diff --git a/apps/games/package.json b/apps/games/package.json
@@ -35,3 +35,4 @@
 		"tsconfig": "workspace:*"
 	}
 }
+
diff --git a/apps/next/package.json b/apps/next/package.json
@@ -58,3 +58,4 @@
 		"tsconfig": "workspace:*"
 	}
 }
+
diff --git a/apps/oauth-app/package.json b/apps/oauth-app/package.json
@@ -28,3 +28,4 @@
 		"@types/jsonwebtoken": "9.0.1"
 	}
 }
+
diff --git a/apps/password-manager/package.json b/apps/password-manager/package.json
@@ -27,3 +27,4 @@
 		"tsconfig": "workspace:*"
 	}
 }
+
diff --git a/apps/svelte/.prettierignore b/apps/svelte/.prettierignore
@@ -12,4 +12,6 @@ pnpm-lock.yaml
 package-lock.json
 yarn.lock
 
-*.timestamp-*.mjs
+*.timestamp-*.mjs
+
+./src/app.html
diff --git a/apps/svelte/.prettierrc b/apps/svelte/.prettierrc
@@ -4,7 +4,6 @@
 	"trailingComma": "all",
 	"printWidth": 100,
 	"plugins": ["prettier-plugin-svelte"],
-	"pluginSearchDirs": ["."],
 	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }],
 	"semi": false
 }
diff --git a/apps/svelte/package.json b/apps/svelte/package.json
@@ -18,18 +18,19 @@
 		"@repo/ui": "workspace:*",
 		"@sveltejs/adapter-auto": "3.3.1",
 		"@sveltejs/kit": "2.15.0",
+		"@sveltejs/vite-plugin-svelte": "5.0.3",
 		"@types/feather-icons": "4.29.1",
 		"@typescript-eslint/eslint-plugin": "6.12.0",
 		"@typescript-eslint/parser": "6.12.0",
 		"config": "workspace:*",
 		"eslint": "8.54.0",
 		"eslint-config-prettier": "8.5.0",
-		"eslint-plugin-svelte": "2.35.1",
+		"eslint-plugin-svelte": "^2.45.1",
 		"feather-icons": "4.29.0",
 		"just-debounce-it": "3.2.0",
 		"just-range": "4.1.1",
-		"prettier": "2.8.0",
-		"prettier-plugin-svelte": "3.1.2",
+		"prettier": "^3.1.0",
+		"prettier-plugin-svelte": "^3.2.6",
 		"svelte": "5.16.0",
 		"svelte-check": "4.1.1",
 		"tsconfig": "workspace:*",

diff --git a/apps/svelte/src/app.html b/apps/svelte/src/app.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />

diff --git a/apps/svelte/src/routes/+layout.svelte b/apps/svelte/src/routes/+layout.svelte
@@ -1,6 +1,11 @@
-<script>
+<script lang="ts">
 	import '@repo/ui/styles.css'
-	import "../app.css"
+	import '../app.css'
+	interface Props {
+		children?: import('svelte').Snippet
+	}
+
+	let { children }: Props = $props()
 	// import feather from "feather-icons"
 </script>
 
@@ -27,4 +32,4 @@
 	</a>
 </nav>
 
-<slot />
+{@render children?.()}
diff --git a/apps/svelte/src/routes/+page.svelte b/apps/svelte/src/routes/+page.svelte
@@ -1,73 +1,73 @@
 <script>
 	const projects = [
 		{
-			href: "https://emiljohansson.dev/design",
-			text: "Design System",
+			href: 'https://emiljohansson.dev/design',
+			text: 'Design System',
 			external: true,
-			description: "Design system for the apps developed by Emil Johansson.",
-			test: "design-system",
+			description: 'Design system for the apps developed by Emil Johansson.',
+			test: 'design-system',
 		},
 		{
-			href: "https://pw.emiljohansson.dev",
-			text: "Password Manager",
+			href: 'https://pw.emiljohansson.dev',
+			text: 'Password Manager',
 			external: true,
-			description: "Password manager for the apps developed by Emil Johansson.",
-			test: "password-manager",
+			description: 'Password manager for the apps developed by Emil Johansson.',
+			test: 'password-manager',
 		},
 		{
-			href: "https://games.emiljohansson.dev",
-			text: "Games",
+			href: 'https://games.emiljohansson.dev',
+			text: 'Games',
 			external: true,
-			description: "Some simple games.",
-			test: "games",
+			description: 'Some simple games.',
+			test: 'games',
 		},
 		{
-			href: "/password-generator",
-			text: "Password Generator",
-			description: "Generate a password that is difficult to guess.",
-			test: "password-generator",
+			href: '/password-generator',
+			text: 'Password Generator',
+			description: 'Generate a password that is difficult to guess.',
+			test: 'password-generator',
 		},
 		{
-			href: "/random-string",
-			text: "Random String",
-			description: "Generate a random string of characters.",
-			test: "random-string",
+			href: '/random-string',
+			text: 'Random String',
+			description: 'Generate a random string of characters.',
+			test: 'random-string',
 		},
 		{
-			href: "/current-time",
-			text: "Current Time",
-			description: "Get the current time.",
-			test: "current-time",
+			href: '/current-time',
+			text: 'Current Time',
+			description: 'Get the current time.',
+			test: 'current-time',
 		},
 		{
-			href: "/two-way-auth-generate",
-			text: "Two-Factor Authentication - Generate Code",
-			description: "Generate a two-factor authentication code.",
-			test: "two-way-auth-generate",
+			href: '/two-way-auth-generate',
+			text: 'Two-Factor Authentication - Generate Code',
+			description: 'Generate a two-factor authentication code.',
+			test: 'two-way-auth-generate',
 		},
 		{
-			href: "/two-way-auth-enter",
-			text: "Two-Factor Authentication - Enter Code",
-			description: "Enter a two-factor authentication code.",
-			test: "two-way-auth-enter",
+			href: '/two-way-auth-enter',
+			text: 'Two-Factor Authentication - Enter Code',
+			description: 'Enter a two-factor authentication code.',
+			test: 'two-way-auth-enter',
 		},
 		{
-			href: "/progress-bar",
-			text: "Progress Bar",
-			description: "Progress bar with a percentage.",
-			test: "progress-bar",
+			href: '/progress-bar',
+			text: 'Progress Bar',
+			description: 'Progress bar with a percentage.',
+			test: 'progress-bar',
 		},
 		{
-			href: "/confirm-button",
-			text: "Confirm Button",
-			description: "Hold down the button to confirm the action.",
-			test: "confirm-button",
+			href: '/confirm-button',
+			text: 'Confirm Button',
+			description: 'Hold down the button to confirm the action.',
+			test: 'confirm-button',
 		},
 		{
-			href: "/calculate",
-			text: "Calculate",
-			description: "Calculate a mathematical expression from an API route.",
-			test: "calculate",
+			href: '/calculate',
+			text: 'Calculate',
+			description: 'Calculate a mathematical expression from an API route.',
+			test: 'calculate',
 		},
 	]
 </script>
@@ -85,8 +85,8 @@
 					class="font-bold hover:underline"
 					{href}
 					data-test={test}
-					target={external ? "_blank" : null}
-					rel={external ? "noreferrer" : null}
+					target={external ? '_blank' : null}
+					rel={external ? 'noreferrer' : null}
 				>
 					{text}
 				</a>

diff --git a/apps/svelte/src/routes/current-time/+page.svelte b/apps/svelte/src/routes/current-time/+page.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-	import { onDestroy } from "svelte"
-	import { getCurrentTime } from "@repo/lib/utils/date"
+	import { onDestroy } from 'svelte'
+	import { getCurrentTime } from '@repo/lib/utils/date'
 
-	let { hours, minutes, meridiem } = getCurrentTime()
+	let { hours, minutes, meridiem } = $state(getCurrentTime())
 
 	const interval = setInterval(() => {
 		const newTime = getCurrentTime()

diff --git a/apps/svelte/src/routes/hooks/+page.svelte b/apps/svelte/src/routes/hooks/+page.svelte
@@ -5,7 +5,11 @@
 	import DebounceSection from './DebounceSection.svelte'
 	import RandomStringSection from './RandomStringSection.svelte'
 
-	export let data: PageData
+	interface Props {
+		data: PageData
+	}
+
+	let { data }: Props = $props()
 </script>
 
 <svelte:head>

diff --git a/apps/svelte/src/routes/hooks/ClickOutsideSection.svelte b/apps/svelte/src/routes/hooks/ClickOutsideSection.svelte
@@ -1,16 +1,18 @@
 <script lang="ts">
-	let isWithin = false
+	import { stopPropagation } from 'svelte/legacy'
+
+	let isWithin = $state(false)
 
 	function onGlobalClick() {
-		isWithin = false;
+		isWithin = false
 	}
 </script>
 
-<svelte:document on:click={onGlobalClick} />
+<svelte:document onclick={onGlobalClick} />
 
 <article>
 	<h2>Click Outside</h2>
-	<button class="btn-primary" on:click|stopPropagation={() => isWithin = true}>
+	<button class="btn-primary" onclick={stopPropagation(() => (isWithin = true))}>
 		{isWithin ? 'Within' : 'Outside'}
 	</button>
-</article>
+</article>
diff --git a/apps/svelte/src/routes/hooks/CounterSection.svelte b/apps/svelte/src/routes/hooks/CounterSection.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createCounter } from "./counter.svelte"
+	import { createCounter } from './counter.svelte'
 
 	let counter = createCounter()
 </script>
@@ -8,17 +8,9 @@
 	<h2>Counter</h2>
 	<p>Count: {counter.count}</p>
 	<div class="flex">
-		<button class="btn-secondary" on:click={counter.increment}>
-			Increment
-		</button>
-		<button class="btn-secondary" on:click={counter.decrement}>
-			Decrement
-		</button>
-		<button class="btn-secondary" on:click={counter.reset}>
-			Reset
-		</button>
-		<button class="btn-secondary" on:click={() => counter.set(5)}>
-			Set 5
-		</button>
+		<button class="btn-secondary" onclick={counter.increment}>Increment</button>
+		<button class="btn-secondary" onclick={counter.decrement}>Decrement</button>
+		<button class="btn-secondary" onclick={counter.reset}>Reset</button>
+		<button class="btn-secondary" onclick={() => counter.set(5)}>Set 5</button>
 	</div>
-</article>
+</article>
diff --git a/apps/svelte/src/routes/hooks/DebounceSection.svelte b/apps/svelte/src/routes/hooks/DebounceSection.svelte
@@ -1,22 +1,17 @@
 <script lang="ts">
-	let value = ''
-	let debounced = ''
-	let timer: ReturnType<typeof setTimeout> 
+	let value = $state('')
+	let debounced = $state('')
+	let timer: ReturnType<typeof setTimeout>
 
 	const debounce = (func: () => void, delay = 300) => {
-		clearTimeout(timer);
+		clearTimeout(timer)
 		timer = setTimeout(func, delay)
 	}
 </script>
 
 <article>
 	<h2>Debounce</h2>
-	<input
-		class="input"
-		type="text"
-		bind:value={value}
-		on:keyup={() => debounce(() => debounced = value)}
-	/>
+	<input class="input" type="text" bind:value onkeyup={() => debounce(() => (debounced = value))} />
 	<p>Value: {value}</p>
 	<p>Debounced: {debounced}</p>
-</article>
+</article>
diff --git a/apps/svelte/src/routes/hooks/RandomStringSection.svelte b/apps/svelte/src/routes/hooks/RandomStringSection.svelte
@@ -1,12 +1,16 @@
 <script lang="ts">
-	import { randomString } from "./randomString"
+	import { randomString } from './randomString'
 
-	export let initValue: string
+	interface Props {
+		initValue: string
+	}
 
-	let {value: random, generate} = randomString(initValue)
+	let { initValue }: Props = $props()
+
+	let { value: random, generate } = randomString(initValue)
 </script>
 
 <article>
 	<h2>Random String</h2>
-	<button on:click={generate}>{$random}</button>
-</article>
+	<button onclick={generate}>{$random}</button>
+</article>