feat(web): Update to latest version of SvelteKit (#705)

web/src/lib/components/album-page/album-viewer.svelte

@@ -25,7 +25,7 @@
 		notificationController,
 		NotificationType
 	} from '../shared-components/notification/notification';
-	import { browser } from '$app/env';
+	import { browser } from '$app/environment';
 	import { albumAssetSelectionStore } from '$lib/stores/album-asset-selection.store';
 
 	export let album: AlbumResponseDto;
@@ -69,9 +69,9 @@
 	$: isMultiSelectionMode = multiSelectAsset.size > 0;
 
 	afterNavigate(({ from }) => {
-		backUrl = from?.pathname ?? '/albums';
+		backUrl = from?.url.pathname ?? '/albums';
 
-		if (from?.pathname === '/sharing') {
+		if (from?.url.pathname === '/sharing') {
 			isCreatingSharedAlbum = true;
 		}
 	});

web/src/lib/components/asset-viewer/detail-panel.svelte

@@ -6,7 +6,7 @@
 	import MapMarkerOutline from 'svelte-material-icons/MapMarkerOutline.svelte';
 	import moment from 'moment';
 	import { createEventDispatcher, onMount } from 'svelte';
-	import { browser } from '$app/env';
+	import { browser } from '$app/environment';
 	import { env } from '$env/dynamic/public';
 	import { AssetResponseDto, AlbumResponseDto } from '@api';
 
@@ -216,7 +216,7 @@
 			<p class="text-sm pb-4">APPEARS IN</p>
 		{/if}
 		{#each albums as album}
-			<a sveltekit:prefetch href={`/albums/${album.id}`}>
+			<a data-sveltekit-prefetch href={`/albums/${album.id}`}>
 				<div class="flex gap-4 py-2 hover:cursor-pointer" on:click={() => dispatch('click', album)}>
 					<div>
 						<img

web/src/lib/components/shared-components/base-modal.svelte

@@ -3,7 +3,7 @@
 	import { quintOut } from 'svelte/easing';
 	import Close from 'svelte-material-icons/Close.svelte';
 	import { createEventDispatcher, onMount, onDestroy } from 'svelte';
-	import { browser } from '$app/env';
+	import { browser } from '$app/environment';
 	import CircleIconButton from './circle-icon-button.svelte';
 	import { clickOutside } from '$lib/utils/click-outside';
 

web/src/lib/components/shared-components/control-app-bar.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { browser } from '$app/env';
+	import { browser } from '$app/environment';
 
 	import { createEventDispatcher, onDestroy, onMount } from 'svelte';
 	import Close from 'svelte-material-icons/Close.svelte';

web/src/lib/components/shared-components/navigation-bar.svelte

@@ -44,7 +44,11 @@
 
 <section id="dashboard-navbar" class="fixed w-screen  z-[100] bg-immich-bg text-sm">
 	<div class="flex border-b place-items-center px-6 py-2 ">
-		<a sveltekit:prefetch class="flex gap-2 place-items-center hover:cursor-pointer" href="/photos">
+		<a
+			data-sveltekit-prefetch
+			class="flex gap-2 place-items-center hover:cursor-pointer"
+			href="/photos"
+		>
 			<img src="/immich-logo.svg" alt="immich logo" height="35" width="35" />
 			<h1 class="font-immich-title text-2xl text-immich-primary">IMMICH</h1>
 		</a>
@@ -67,7 +71,7 @@
 			{/if}
 
 			{#if user.isAdmin}
-				<a sveltekit:prefetch href={`admin`}>
+				<a data-sveltekit-prefetch href={`admin`}>
 					<button
 						class={`flex place-items-center place-content-center gap-2 hover:bg-immich-primary/5 p-2 rounded-lg font-medium ${
 							$page.url.pathname == '/admin' && 'text-immich-primary underline'

web/src/lib/components/shared-components/side-bar/side-bar.svelte

@@ -55,8 +55,8 @@
 <section id="sidebar" class="flex flex-col gap-1 pt-8 pr-6">
 	<!-- {domCount} -->
 	<a
-		sveltekit:prefetch
+		data-sveltekit-prefetch
-		sveltekit:noscroll
+		data-sveltekit-noscroll
 		href={$page.routeId !== 'photos' ? `/photos` : null}
 		class="relative"
 	>
@@ -92,7 +92,11 @@
 		</div>
 	</a>
 
-	<a sveltekit:prefetch href={$page.routeId !== 'sharing' ? `/sharing` : null} class="relative">
+	<a
+		data-sveltekit-prefetch
+		href={$page.routeId !== 'sharing' ? `/sharing` : null}
+		class="relative"
+	>
 		<SideBarButton
 			title="Sharing"
 			logo={AccountMultipleOutline}
@@ -126,7 +130,7 @@
 	<div class="text-xs ml-5 my-4">
 		<p>LIBRARY</p>
 	</div>
-	<a sveltekit:prefetch href={$page.routeId !== 'albums' ? `/albums` : null} class="relative">
+	<a data-sveltekit-prefetch href={$page.routeId !== 'albums' ? `/albums` : null} class="relative">
 		<SideBarButton
 			title="Albums"
 			logo={ImageAlbum}

web/src/lib/constants.ts

@@ -1,2 +1,2 @@
 import { env } from '$env/dynamic/public';
-export const loginPageMessage: string = env.PUBLIC_LOGIN_PAGE_MESSAGE;
+export const loginPageMessage: string | undefined = env.PUBLIC_LOGIN_PAGE_MESSAGE;

web/src/routes/+error.svelte

@@ -7,12 +7,12 @@
 		<code class="text-xs text-red-500">Error code {$page.status}</code>
 		<br />
 		<code class="text-sm">
-			{$page.error.message}
+			{$page.error?.message}
 		</code>
 		<br />
 		<div class="mt-5">
 			<p class="text-sm font-medium">Verbose</p>
-			<pre class="text-xs">{Object.values($page.error)}</pre>
+			<pre class="text-xs">{JSON.stringify($page.error)}</pre>
 		</div>
 
 		<a

web/src/routes/+page.ts

@@ -1,8 +1,8 @@
 export const prerender = false;
 import { redirect } from '@sveltejs/kit';
 import { api } from '@api';
-import { browser } from '$app/env';
 import type { PageLoad } from './$types';
+import { browser } from '$app/environment';
 
 export const load: PageLoad = async ({ parent }) => {
 	const { user } = await parent();

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

@@ -72,7 +72,7 @@
 			<div class="flex flex-wrap gap-8">
 				{#each $albums as album}
 					{#key album.id}
-						<a sveltekit:prefetch href={`albums/${album.id}`}>
+						<a data-sveltekit-prefetch href={`albums/${album.id}`}>
 							<AlbumCard
 								{album}
 								on:showalbumcontextmenu={(e) => showAlbumContextMenu(e.detail, album)}

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

@@ -70,7 +70,7 @@
 			<!-- Share Album List -->
 			<div class="w-full flex flex-col place-items-center">
 				{#each data.sharedAlbums as album}
-					<a sveltekit:prefetch href={`albums/${album.id}`}>
+					<a data-sveltekit-prefetch href={`albums/${album.id}`}>
 						<SharedAlbumListTile {album} user={data.user} />
 					</a>
 				{/each}

web/svelte.config.js

@@ -6,10 +6,7 @@ const config = {
 	preprocess: preprocess(),
 
 	kit: {
-		adapter: adapter({ out: 'build' }),
+		adapter: adapter({ out: 'build' })
-		methodOverride: {
-			allowed: ['PATCH', 'DELETE']
-		}
 	}
 };