refactor: ⬆️ upgrade to sveltekit v2

package.json

@@ -8,7 +8,7 @@
     "patchedDependencies": {
       "svelte-portal@2.2.0": "patches/svelte-portal@2.2.0.patch",
       "svelte-virtual-scroll-list@1.3.0": "patches/svelte-virtual-scroll-list@1.3.0.patch",
-      "markdown-it-shikiji@0.8.0": "patches/markdown-it-shikiji@0.8.0.patch"
+      "markdown-it-shikiji@0.9.7": "patches/markdown-it-shikiji@0.9.7.patch"
     }
   }
 }

packages/client/package.json

@@ -14,25 +14,26 @@
 	},
 	"devDependencies": {
 		"@biasdo/server-utils": "workspace:*",
-		"@sveltejs/adapter-vercel": "^3.1.0",
-		"@sveltejs/kit": "^1.27.7",
+		"@sveltejs/adapter-vercel": "^4.0.0",
+		"@sveltejs/kit": "^2.0.0",
+		"@sveltejs/vite-plugin-svelte": "^3.0.0",
 		"@types/dompurify": "^3.0.5",
 		"@types/markdown-it": "^13.0.7",
-		"@typescript-eslint/eslint-plugin": "^6.13.2",
-		"@typescript-eslint/parser": "^6.13.2",
+		"@typescript-eslint/eslint-plugin": "^6.14.0",
+		"@typescript-eslint/parser": "^6.14.0",
 		"autoprefixer": "^10.4.16",
-		"eslint": "^8.55.0",
+		"eslint": "^8.56.0",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-svelte": "^2.35.1",
 		"postcss": "^8.4.32",
-		"prettier": "^3.1.0",
-		"prettier-plugin-svelte": "^3.1.0",
+		"prettier": "^3.1.1",
+		"prettier-plugin-svelte": "^3.1.2",
 		"svelte": "^4.2.8",
 		"svelte-check": "^3.6.2",
 		"tailwindcss": "^3.3.6",
 		"tslib": "^2.6.2",
 		"typescript": "^5.3.3",
-		"vite": "^4.5.0",
+		"vite": "^5.0.10",
 		"vite-plugin-inspect": "^0.8.1"
 	},
 	"type": "module",
@@ -47,8 +48,8 @@
 		"katex": "^0.16.9",
 		"markdown-it": "^14.0.0",
 		"markdown-it-katex": "github:zackw/markdown-it-katex",
-		"markdown-it-shikiji": "^0.8.0",
-		"shikiji": "^0.8.0",
+		"markdown-it-shikiji": "^0.9.7",
+		"shikiji": "^0.9.7",
 		"svelte-floating-ui": "^1.5.8",
 		"svelte-portal": "^2.2.0",
 		"svelte-virtual-scroll-list": "^1.3.0",

packages/client/src/routes/+page.ts

@@ -10,7 +10,7 @@ export const load: PageLoad = async ({ fetch }) => {
 	})
 
 	if (!userRes.ok && userRes.status !== 401) {
-		throw error(userRes.status, 'An error occurred while fetching user data')
+		error(userRes.status, 'An error occurred while fetching user data');
 	}
 
 	const me = userRes.ok ? ((await userRes.json()) as User) : null

packages/client/src/routes/app/(sidebar-ui)/(messages)/+layout.ts

@@ -6,39 +6,41 @@ import { error } from '@sveltejs/kit'
 export const ssr = false
 
 export const load: LayoutLoad = async ({ fetch, params }) => {
-	const messagesRes = await fetch(
-		`${import.meta.env.VITE_API_URL}/v0/channels/${params.channelId}/messages`,
-		{ credentials: 'include' }
-	)
+	const [messagesRes, membersRes] = await Promise.all([
+		fetch(`${import.meta.env.VITE_API_URL}/v0/channels/${params.channelId}/messages`, {
+			credentials: 'include'
+		}).then(async (res) => ({
+			ok: res.ok,
+			status: res.status,
+			response: (await res.json()) as APIMessage[]
+		})),
+
+		params.serverId
+			? fetch(`${import.meta.env.VITE_API_URL}/v0/servers/${params.serverId}/members`, {
+					credentials: 'include'
+			  }).then(async (res) => ({
+					ok: res.ok,
+					status: res.status,
+					response: (await res.json()) as Member[]
+			  }))
+			: undefined
+	])
 
 	if (!messagesRes.ok) {
-		throw error(
+		error(
 			messagesRes.status,
 			messagesRes.status === 404
 				? 'Invalid server/channel id.'
 				: 'An error occurred while fetching messages'
 		)
 	}
 
-	const messages = (await messagesRes.json()) as APIMessage[]
-
-	let members: Member[] | undefined
-
-	if (params.serverId) {
-		const membersRes = await fetch(
-			`${import.meta.env.VITE_API_URL}/v0/servers/${params.serverId}/members`,
-			{ credentials: 'include' }
-		)
-
-		if (!membersRes.ok) {
-			throw error(membersRes.status, 'An error occurred while fetching members')
-		}
-
-		members = (await membersRes.json()) as Member[]
+	if (membersRes && !membersRes.ok) {
+		error(membersRes.status, 'An error occurred while fetching members')
 	}
 
 	return {
-		messages,
-		members
+		messages: messagesRes.response,
+		members: membersRes?.response
 	}
 }

packages/client/src/routes/app/(sidebar-ui)/+layout.ts

@@ -7,41 +7,51 @@ import type { User } from '@biasdo/server-utils/src/User'
 export const ssr = false
 
 export const load: LayoutLoad = async ({ fetch }) => {
-	const res = await fetch(`${import.meta.env.VITE_API_URL}/v0/servers`, { credentials: 'include' })
-
-	if (!res.ok) {
-		if (res.status === 401) {
-			throw redirect(302, '/auth')
+	const [serversRes, userRes, dmsRes] = await Promise.all([
+		fetch(`${import.meta.env.VITE_API_URL}/v0/servers`, { credentials: 'include' }).then(
+			async (res) => ({
+				ok: res.ok,
+				status: res.status,
+				response: (await res.json()) as (Server & { channels: Channel[] })[]
+			})
+		),
+
+		fetch(`${import.meta.env.VITE_API_URL}/v0/me`, {
+			credentials: 'include'
+		}).then(async (res) => ({
+			ok: res.ok,
+			status: res.status,
+			response: (await res.json()) as User
+		})),
+
+		fetch(`${import.meta.env.VITE_API_URL}/v0/direct-messages/channels`, {
+			credentials: 'include'
+		}).then(async (res) => ({
+			ok: res.ok,
+			status: res.status,
+			response: (await res.json()) as (Channel & { kind: 'DM'; recipients: User[] })[]
+		}))
+	])
+
+	if (!serversRes.ok) {
+		if (serversRes.status === 401) {
+			redirect(302, '/auth')
 		}
 
-		throw error(res.status, 'An error occurred while fetching servers')
+		error(serversRes.status, 'An error occurred while fetching servers')
 	}
 
-	const servers = (await res.json()) as (Server & { channels: Channel[] })[]
-
-	const userRes = await fetch(`${import.meta.env.VITE_API_URL}/v0/me`, {
-		credentials: 'include'
-	})
-
 	if (!userRes.ok) {
-		throw error(userRes.status, 'An error occurred while fetching user data')
+		error(userRes.status, 'An error occurred while fetching user data')
 	}
 
-	const me = (await userRes.json()) as User
-
-	const dmsRes = await fetch(`${import.meta.env.VITE_API_URL}/v0/direct-messages/channels`, {
-		credentials: 'include'
-	})
-
 	if (!dmsRes.ok) {
-		throw error(dmsRes.status, 'An error occurred while fetching direct messages')
+		error(dmsRes.status, 'An error occurred while fetching direct messages')
 	}
 
-	const channels = (await dmsRes.json()) as (Channel & { kind: 'DM'; recipients: User[] })[]
-
 	return {
-		me,
-		servers,
-		channels
+		me: userRes.response,
+		servers: serversRes.response,
+		channels: dmsRes.response
 	}
 }

packages/client/src/routes/app/(sidebar-ui)/servers/[serverId]/+page.ts

@@ -13,10 +13,10 @@ export const load: PageLoad = async ({ fetch, params }) => {
 	)
 
 	if (!res.ok) {
-		throw error(res.status, 'An error occurred while fetching channels')
+		error(res.status, 'An error occurred while fetching channels');
 	}
 
 	const channels = (await res.json()) as Channel[]
 
-	throw redirect(302, `/app/servers/${params.serverId}/channels/${channels[0].id}`)
+	redirect(302, `/app/servers/${params.serverId}/channels/${channels[0].id}`);
 }

packages/client/src/routes/app/(sidebar-ui)/servers/[serverId]/settings/+page.ts

@@ -10,7 +10,7 @@ export const load: PageLoad = async ({ fetch, params }) => {
 	})
 
 	if (!res.ok) {
-		throw error(res.status, 'An error occurred while fetching invites')
+		error(res.status, 'An error occurred while fetching invites');
 	}
 
 	const invites = (await res.json()) as Invite[]

packages/client/src/routes/app/invites/[inviteId]/+page.ts

@@ -12,14 +12,14 @@ export const load: PageLoad = async ({ fetch, params }) => {
 
 	if (!res.ok) {
 		if (res.status === 409) {
-			throw redirect(302, `/app/servers/${(await res.json()).server_id}`)
+			redirect(302, `/app/servers/${(await res.json()).server_id}`);
 		}
 
 		if (res.status === 401) {
-			throw redirect(302, '/auth')
+			redirect(302, '/auth');
 		}
 
-		throw error(res.status, 'An error occurred while fetching servers')
+		error(res.status, 'An error occurred while fetching servers');
 	}
 
 	const invite = (await res.json()) as Invite & { server: Server }

packages/client/svelte.config.js

@@ -1,5 +1,5 @@
 import adapter from '@sveltejs/adapter-vercel'
-import { vitePreprocess } from '@sveltejs/kit/vite'
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {

patches/markdown-it-shikiji@0.9.7.patch

@@ -0,0 +1,12 @@
+diff --git a/dist/core.mjs b/dist/core.mjs
+index f0156d7059f274a5f826cd76a858f110676527b8..be4800240cea58abc2d9ba5197f4ac485812a95c 100644
+--- a/dist/core.mjs
++++ b/dist/core.mjs
+@@ -22,6 +22,7 @@ function setupMarkdownIt(markdownit, highlighter, options) {
+     parseMetaString
+   } = options;
+   markdownit.options.highlight = (code, lang = "text", attrs) => {
++    if (!highlighter.getLoadedLanguages().includes(lang)) lang = "text";
+     const meta = parseMetaString?.(attrs, code, lang) || {};
+     const codeOptions = {
+       ...options,

patches/svelte-virtual-scroll-list@1.3.0.patch

@@ -1,7 +1,16 @@
 diff --git a/dist/VirtualScroll.svelte b/dist/VirtualScroll.svelte
-index dd0d175a45615889599eaa15ab275e373f8c06c1..6116d94027a0eca253d3dd2f13bc1a765800fc07 100644
+index dd0d175a45615889599eaa15ab275e373f8c06c1..121695d4bf6fca726b8ee7a290870c0365af584b 100644
 --- a/dist/VirtualScroll.svelte
 +++ b/dist/VirtualScroll.svelte
+@@ -64,7 +64,7 @@
+         buffer: Math.round(keeps / 3), // recommend for a third of keeps
+         uniqueIds: getUniqueIdFromDataSources(),
+     }, onRangeChanged)
+-    let root
++    export let root
+     let shepherd
+     const dispatch = createEventDispatcher()
+
 @@ -94,6 +94,18 @@
          }
      }
@@ -22,18 +31,26 @@ index dd0d175a45615889599eaa15ab275e373f8c06c1..6116d94027a0eca253d3dd2f13bc1a76
       * @type {() => number}
       */
 diff --git a/dist/VirtualScroll.svelte.d.ts b/dist/VirtualScroll.svelte.d.ts
-index b1d153a3fcf4bd281a89e340df5c74879860ce96..4e9e9591daa0286835387872a8a2ea1a9a90f7d7 100644
+index b1d153a3fcf4bd281a89e340df5c74879860ce96..258f0cbb0d73cf0aa760ddd37db803938b74391f 100644
 --- a/dist/VirtualScroll.svelte.d.ts
 +++ b/dist/VirtualScroll.svelte.d.ts
-@@ -21,6 +21,7 @@ export default class VirtualScroll extends SvelteComponentTyped<{
+@@ -12,6 +12,7 @@ export default class VirtualScroll extends SvelteComponentTyped<{
+     pageMode?: boolean | undefined;
+     topThreshold?: number | undefined;
+     bottomThreshold?: number | undefined;
++    root?: HTMLDivElement | undefined;
+     getSize?: ((id: number) => number) | undefined;
+     getSizes?: (() => number) | undefined;
+     getOffset?: (() => number) | undefined;
+@@ -21,6 +22,7 @@ export default class VirtualScroll extends SvelteComponentTyped<{
      scrollToOffset?: ((offset: number) => void) | undefined;
      scrollToIndex?: ((index: number) => void) | undefined;
      scrollToBottom?: (() => void) | undefined;
 +    getOffsetDimension?: () => number;
  }, {
      scroll: CustomEvent<any>;
      top: CustomEvent<any>;
-@@ -44,47 +45,49 @@ export default class VirtualScroll extends SvelteComponentTyped<{
+@@ -44,47 +46,50 @@ export default class VirtualScroll extends SvelteComponentTyped<{
      get scrollToOffset(): (offset: number) => void;
      get scrollToIndex(): (index: number) => void;
      get scrollToBottom(): () => void;
@@ -92,6 +109,7 @@ index b1d153a3fcf4bd281a89e340df5c74879860ce96..4e9e9591daa0286835387872a8a2ea1a
 +		pageMode?: boolean | undefined
 +		topThreshold?: number | undefined
 +		bottomThreshold?: number | undefined
++        root?: HTMLDivElement | undefined
 +		getSize?: ((id: number) => number) | undefined
 +		getSizes?: (() => number) | undefined
 +		getOffset?: (() => number) | undefined