Frontend dep upgrades (#292)

* feat: add global declaration

* fix: update vue dependencies

* precommit fixes

---------

Co-authored-by: Davide Di Modica <webmaster.ddm@gmail.com>

frontend/package.json

@@ -36,7 +36,7 @@
 		"@fontsource/lexend": "^5.1.0",
 		"@fontsource/public-sans": "^5.1.0",
 		"@popperjs/core": "^2.11.8",
-		"@shikijs/markdown-it": "^1.17.0",
+		"@shikijs/markdown-it": "^1.17.6",
 		"@vueuse/components": "^11.0.3",
 		"@vueuse/core": "^11.0.3",
 		"apexcharts": "^3.53.0",
@@ -49,7 +49,7 @@
 		"echarts": "^5.5.1",
 		"file-saver": "^2.0.5",
 		"html-entities": "^2.5.2",
-		"jose": "^5.8.0",
+		"jose": "^5.9.0",
 		"js-md5": "^0.8.3",
 		"lodash": "^4.17.21",
 		"mitt": "^3.0.1",
@@ -58,13 +58,13 @@
 		"pinia": "^2.2.2",
 		"pinia-plugin-persistedstate": "^4.0.1",
 		"secure-ls": "^2.0.0",
-		"shiki": "^1.17.0",
+		"shiki": "^1.17.6",
 		"validator": "^13.12.0",
-		"vue": "^3.5.4",
+		"vue": "^3.5.5",
 		"vue-advanced-cropper": "^2.8.9",
 		"vue-highlight-words": "^3.0.1",
 		"vue-i18n": "^10.0.1",
-		"vue-router": "^4.4.4",
+		"vue-router": "^4.4.5",
 		"vue-sjv": "^0.0.6",
 		"vue3-apexcharts": "^1.6.0",
 		"vue3-marquee": "^4.2.2",
@@ -108,13 +108,14 @@
 		"tailwindcss": "^3.4.11",
 		"taze": "^0.16.8",
 		"type-fest": "^4.26.1",
+		"typescript": "~5.5.4",
 		"unplugin-vue-components": "^0.27.4",
-		"vite": "^5.4.4",
+		"vite": "^5.4.5",
 		"vite-bundle-analyzer": "^0.10.6",
 		"vite-bundle-visualizer": "^1.2.1",
 		"vite-plugin-vue-devtools": "^7.4.5",
 		"vite-svg-loader": "^5.1.0",
-		"vitest": "^2.0.5",
+		"vitest": "^2.1.1",
 		"vue-tsc": "^2.1.6"
 	},
 	"optionalDependencies": {
@@ -130,12 +131,8 @@
 		"@typescript-eslint/utils": {
 			"eslint": "^9.10.0"
 		},
-		"secure-ls": {
-			"crypto-js": "^4.2.0"
-		},
 		"micromatch": "^4.0.8",
-		"path-to-regexp": "^8.1.0",
-		"ws": "^8.18.0"
+		"path-to-regexp": "^8.1.0"
 	},
 	"engines": {
 		"node": ">=18.0.0"

frontend/src/global.d.ts

@@ -0,0 +1,18 @@
+export {}
+
+declare global {
+	interface Document {
+		startViewTransition?: (callback: () => Promise<void> | void) => ViewTransition
+	}
+
+	interface ViewTransition {
+		readonly ready: Promise<undefined>
+		readonly finished: Promise<undefined>
+		readonly updateCallbackDone: Promise<undefined>
+		skipTransition(): void
+	}
+
+	interface CSSStyleDeclaration {
+		viewTransitionName: string
+	}
+}

frontend/src/layouts/common/Toolbar/ThemeSwitch.vue

@@ -29,40 +29,40 @@ const isThemeDark = computed<boolean>(() => themeStore.isThemeDark)
 function toggleTheme(event?: MouseEvent) {
 	const isAppearanceTransition =
 		typeof document !== "undefined" &&
-		// @ts-expect-error: Transition API
-		document.startViewTransition &&
-		!window.matchMedia("(prefers-reduced-motion: reduce)").matches
+		document?.startViewTransition &&
+		!window?.matchMedia("(prefers-reduced-motion: reduce)").matches
 
 	if (!isAppearanceTransition || !event) {
 		themeStore.toggleTheme()
 		return
 	}
 
-	const x = event.clientX ?? innerWidth / 2
-	const y = event.clientY ?? innerHeight / 2
-	const endRadius = Math.hypot(Math.max(x, innerWidth - x), Math.max(y, innerHeight - y))
+	if (document?.startViewTransition) {
+		const x = event.clientX ?? innerWidth / 2
+		const y = event.clientY ?? innerHeight / 2
+		const endRadius = Math.hypot(Math.max(x, innerWidth - x), Math.max(y, innerHeight - y))
 
-	// @ts-expect-error: Transition API
-	const transition = document.startViewTransition(async () => {
-		themeStore.toggleTheme()
-		await nextTick()
-	})
+		const transition = document.startViewTransition(async () => {
+			themeStore.toggleTheme()
+			await nextTick()
+		})
 
-	transition.ready.then(() => {
-		const clipPath = [`circle(0px at ${x}px ${y}px)`, `circle(${endRadius}px at ${x}px ${y}px)`]
-		//const clipPath = [`inset(50%)`, `inset(0)`]
+		transition.ready.then(() => {
+			const clipPath = [`circle(0px at ${x}px ${y}px)`, `circle(${endRadius}px at ${x}px ${y}px)`]
+			//const clipPath = [`inset(50%)`, `inset(0)`]
 
-		document.documentElement.animate(
-			{
-				clipPath
-			},
-			{
-				duration: 300,
-				easing: "ease-in",
-				pseudoElement: "::view-transition-new(root)"
-			}
-		)
-	})
+			document.documentElement.animate(
+				{
+					clipPath
+				},
+				{
+					duration: 300,
+					easing: "ease-in",
+					pseudoElement: "::view-transition-new(root)"
+				}
+			)
+		})
+	}
 }
 </script>
 

frontend/src/stores/auth.ts

@@ -138,7 +138,7 @@ export const useAuthStore = defineStore("auth", {
 			getItem: key => ls.get(key),
 			setItem: (key, value) => ls.set(key, value)
 		},
-		paths: ["user"]
+		pick: ["user"]
 	}
 })
 

frontend/src/stores/i18n.ts

@@ -12,7 +12,8 @@ export const useLocalesStore = defineStore("i18n", {
 		}
 	},
 	persist: {
-		paths: ["locale"]
+		// @ts-expect-error "Type instantiation is excessively deep and possibly infinite" ts(2589)
+		pick: ["locale"]
 	}
 })
 

frontend/src/stores/settings.ts

@@ -47,7 +47,7 @@ export const useSettingsStore = defineStore("settings", {
 		}
 	},
 	persist: {
-		paths: ["settings"]
+		pick: ["settings"]
 	}
 })
 

frontend/src/stores/theme.ts

@@ -479,7 +479,7 @@ export const useThemeStore = defineStore("theme", {
 		}
 	},
 	persist: {
-		paths: ["layout", "themeName", "routerTransition", "boxed", "sidebar.collapsed"]
+		pick: ["layout", "themeName", "routerTransition", "boxed", "sidebar.collapsed"]
 	}
 })