Misc/audits (#127)

* update svelte and svelte kit * update vite and cypress * update jest * update svelte and svelte kit * update gh actions to node 22 * update gh actions to pnpm 9
emiljohansson · Dec 25, 2024 · 5143cc0 · 5143cc0
1 parent b687533
commit 5143cc0
Show file tree

Hide file tree

Showing 42 changed files with 1,786 additions and 1,559 deletions.
diff --git a/.github/workflows/build_test.yml b/.github/workflows/build_test.yml
@@ -22,15 +22,15 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [18.x]
+        node-version: [22.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:
       - uses: actions/checkout@v2
 
       - uses: pnpm/[email protected]
         with:
-          version: 7
+          version: 9
 
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v2

diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
@@ -18,14 +18,14 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [18.x]
+        node-version: [22.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:
       - uses: actions/checkout@v2
       - uses: pnpm/[email protected]
         with:
-          version: 7.1.7
+          version: 9
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v2
         with:

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
@@ -15,26 +15,28 @@
 		"@emiljohansson/random-string": "1.1.2",
 		"@faker-js/faker": "7.4.0",
 		"@repo/lib": "workspace:*",
-		"@sveltejs/adapter-auto": "2.1.1",
-		"@sveltejs/kit": "1.27.6",
+		"@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",
-		"svelte": "4.2.7",
-		"svelte-check": "3.6.2",
+		"prettier": "^3.1.0",
+		"prettier-plugin-svelte": "^3.2.6",
+		"svelte": "5.16.0",
+		"svelte-check": "4.1.1",
 		"tsconfig": "workspace:*",
 		"tslib": "2.4.1",
 		"typescript": "5.7.2",
-		"vite": "5.0.11"
+		"vite": "6.0.5"
 	},
 	"type": "module"
 }
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>
-	// import '@repo/ui/styles.css'
-	import "../app.css"
+<script lang="ts">
+	import '@repo/ui/styles.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,24 +1,16 @@
 <script lang="ts">
-	import { createCounter } from "./counter"
+	import { createCounter } from './counter.svelte'
 
-	let {count, increment, decrement, reset, set} = createCounter()
+	let counter = createCounter()
 </script>
 
 <article>
 	<h2>Counter</h2>
-	<p>Count: {$count}</p>
+	<p>Count: {counter.count}</p>
 	<div class="flex">
-		<button class="btn-secondary" on:click={increment}>
-			Increment
-		</button>
-		<button class="btn-secondary" on:click={decrement}>
-			Decrement
-		</button>
-		<button class="btn-secondary" on:click={reset}>
-			Reset
-		</button>
-		<button class="btn-secondary" on:click={() => 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>