Update/sveltekit breaking changes migration

package.json

@@ -12,8 +12,8 @@
 		"format": "prettier --write --plugin-search-dir=. ."
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-auto": "next",
-		"@sveltejs/kit": "next",
+		"@sveltejs/adapter-auto": "^1.0.0-next.80",
+		"@sveltejs/kit": "^1.0.0-next.499",
 		"marked": "^4.0.0",
 		"prettier": "^2.6.2",
 		"prettier-plugin-svelte": "^2.7.0",

src/hooks/index.js → src/hooks.server.js

@@ -6,14 +6,3 @@ export async function handle({ event, resolve }) {
 	event.locals.user = jwt ? JSON.parse(jwt) : null;
 	return await resolve(event);
 }
-
-export function getSession({ locals }) {
-	return {
-		user: locals.user && {
-			username: locals.user.username,
-			email: locals.user.email,
-			image: locals.user.image,
-			bio: locals.user.bio
-		}
-	};
-}

src/lib/ArticleList/index.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { session } from '$app/stores';
+	import { session } from '../../stores/sessions';
 	import ArticlePreview from './ArticlePreview.svelte';
 
 	export let articles;

src/lib/Nav.svelte

@@ -1,5 +1,6 @@
 <script>
-	import { page, session } from '$app/stores';
+	import { page } from '$app/stores';
+	import { session } from '../stores/sessions';
 </script>
 
 <nav class="navbar navbar-light">

src/routes/+error.svelte

@@ -3,7 +3,7 @@
 </script>
 
 <script>
-	import { dev } from '$app/env';
+	import { dev } from '$app/environment';
 </script>
 
 <svelte:head>

src/routes/+layout.server.js

@@ -0,0 +1,10 @@
+export async function load({ locals }) {
+	return locals.user ? { 
+		user: locals.user && {
+			username: locals.user.username,
+			email: locals.user.email,
+			image: locals.user.image,
+			bio: locals.user.bio
+		}
+	} : { user: null };
+}

src/routes/+layout.svelte

@@ -1,7 +1,11 @@
 <script>
+	import { page } from '$app/stores';
+	import { session } from '../stores/sessions';
 	import { navigating } from '$app/stores';
 	import Nav from '$lib/Nav.svelte';
 	import PreloadingIndicator from '$lib/PreloadingIndicator.svelte';
+
+	$session = $page.data;
 </script>
 
 {#if $navigating}

src/routes/+page.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { page, session } from '$app/stores';
+	import { page } from '$app/stores';
 	import ArticleList from '$lib/ArticleList/index.svelte';
 	import Pagination from '$lib/Pagination.svelte';
 
@@ -17,7 +17,7 @@
 </svelte:head>
 
 <div class="home-page">
-	{#if !$session.user}
+	{#if !$page.user}
 		<div class="banner">
 			<div class="container">
 				<h1 class="logo-font">conduit</h1>
@@ -42,7 +42,7 @@
 							</a>
 						</li>
 
-						{#if $session.user}
+						{#if $page.user}
 							<li class="nav-item">
 								<a href="/?tab=feed" rel="prefetch" class="nav-link" class:active={tab === 'feed'}>
 									Your Feed

src/routes/article/[slug]/+page.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { session } from '$app/stores';
+	import { page } from '$app/stores';
 	import { marked } from 'marked';
 
 	import ArticleMeta from './_ArticleMeta.svelte';
@@ -19,7 +19,7 @@
 	<div class="banner">
 		<div class="container">
 			<h1>{data.article.title}</h1>
-			<ArticleMeta article={data.article} user={$session.user} />
+			<ArticleMeta article={data.article} user={$page.user} />
 		</div>
 	</div>
 
@@ -43,7 +43,7 @@
 		<div class="article-actions" />
 
 		<div class="row">
-			<CommentContainer slug={data.slug} comments={data.comments} user={$session.user} errors={[]} />
+			<CommentContainer slug={data.slug} comments={data.comments} user={$page.user} errors={[]} />
 		</div>
 	</div>
 </div>

src/routes/editor/+page.js

@@ -1,7 +1,8 @@
 import { redirect } from '@sveltejs/kit';
 
-export function load({ session }) {
-	if (!session.user) {
+export async function load({ parent }) {
+	const { user } = await parent();
+	if (!user) {
 		throw redirect(302, `/login`);
 	}
 

src/routes/editor/[slug]/+page.js

@@ -1,8 +1,9 @@
 import { redirect } from '@sveltejs/kit';
 import * as api from '$lib/api.js';
 
-export async function load({ params, session }) {
-	if (!session.user) {
+export async function load({ params }) {
+	const { user } = await parent();
+	if (!user.user) {
 		throw redirect(302, `/login`);
 	}
 

src/routes/login/+page.js

@@ -1,7 +1,8 @@
 import { redirect } from '@sveltejs/kit';
+import { page } from '$app/stores';
 
-export async function load({ session }) {
-	if (session.user) {
+export async function load() {
+	if (page.user) {
 		throw redirect(302, '/');
 	}
 

src/routes/login/+page.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { session } from '$app/stores';
+	import { session } from '../../stores/sessions';
 	import { goto } from '$app/navigation';
 	import { post } from '$lib/utils.js';
 	import ListErrors from '$lib/ListErrors.svelte';

src/routes/profile/%40[user]/+layout.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { page, session } from '$app/stores';
+	import { page } from '$app/stores';
 
 	/** @type {import('./$types').PageData} */
 	export let data;
@@ -8,7 +8,7 @@
 	// https://github.com/sveltejs/kit/issues/269
 	$: segments = $page.url.pathname.split('/');
 	$: is_favorites = segments.length === 4 && segments[3] === 'favorites';
-	$: is_user = $session.user && data.profile.username === $session.user.username;
+	$: is_user = $page.user && data.profile.username === $page.user.username;
 
 	let current_token;
 	async function toggle_following() {
@@ -54,7 +54,7 @@
 							<i class="ion-gear-a" />
 							Edit Profile Settings
 						</a>
-					{:else if $session.user}
+					{:else if $page.user}
 						<button
 							class="btn btn-sm action-btn {data.profile.following
 								? 'btn-secondary'

src/routes/profile/+page.js

@@ -1,5 +1,6 @@
 import { redirect } from '@sveltejs/kit';
 
-export function load({ session }) {
-	throw redirect(302, session.user ? `/profile/@${session.user.username}` : '/login');
+export async function load({ parent }) {
+	const { user } = await parent();
+	throw redirect(302, user ? `/profile/@${user.username}` : '/login');
 }

src/routes/register/+page.js

@@ -1,7 +1,8 @@
 import { redirect } from '@sveltejs/kit';
 
-export async function load({ session }) {
-	if (session.user) {
+export async function load({ parent }) {
+	const { user } = await parent();
+	if (user) {
 		throw redirect(302, '/');
 	}
 	return {};

src/routes/register/+page.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { session } from '$app/stores';
+	import { page } from '$app/stores';
 	import { goto } from '$app/navigation';
 	import { post } from '$lib/utils.js';
 	import ListErrors from '$lib/ListErrors.svelte';
@@ -11,12 +11,11 @@
 
 	async function submit(event) {
 		const response = await post(`auth/register`, { username, email, password });
-
 		// TODO handle network errors
 		errors = response.errors;
 
 		if (response.user) {
-			$session.user = response.user;
+			page.user = response.user;
 			goto('/');
 		}
 	}

src/routes/settings/+page.js

@@ -1,7 +1,7 @@
 import { redirect } from '@sveltejs/kit';
 
-export function load({ session }) {
-	const { user } = session;
+export async function load({ parent }) {
+	const { user } = await parent();
 
 	if (!user) {
 		throw redirect(302, '/login');

src/routes/settings/+page.svelte

@@ -1,7 +1,9 @@
 <script>
-	import { session } from '$app/stores';
+	import { page } from '$app/stores';
+	import { session } from '../../stores/sessions';
 	import ListErrors from '$lib/ListErrors.svelte';
 	import { post } from '$lib/utils.js';
+	import { goto } from '$app/navigation';
 
 	/** @type {import('./$types').PageData} */
 	export let data;
@@ -15,15 +17,16 @@
 		// this will trigger a redirect, because it
 		// causes the `load` function to run again
 		$session.user = null;
+		goto('/')
 	}
 
 	async function save() {
 		in_progress = true;
 
-		const response = await post(`auth/save`, user);
+		const response = await post(`auth/save`, data.user);
 
 		errors = response.errors;
-		if (response.user) $session.user = response.user;
+		if (response.user) page.user = response.user;
 
 		in_progress = false;
 	}

src/stores/sessions.js

@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store'
+
+export const session = writable({ user: null })

svelte.config.js

@@ -2,9 +2,6 @@ import adapter from '@sveltejs/adapter-auto';
 
 export default {
 	kit: {
-		adapter: adapter(),
-		methodOverride: {
-			allowed: ['PUT', 'DELETE']
-		}
+		adapter: adapter()
 	}
 };