This article going to explain all the breaking changes sveltekit just made this month. Yeah i know it's little bit crazy for big projects and I also had problems that's why I'm writing this post.
This all starts with migrations to new svelte version. You can check Github discussion where they have explained how to migrate.
List of changes
- Routes are directory based now.
- Load function props removed and return all the values and access them using data prop.
- Access all page data from page store.
Routes
Now sveltekit have introduced directory based routing earlier it was file-System based routing. Now you have a directory and which contains three different files in every route. Those files are +page.svelte, +page.js, +page.server.js, we will deep dive in every file. Here, I'm taking an example where my route is blog.
- blog/+page.svelte
<!--blog/+page.svelte-->
This page going to contain all the html css and js
frontend handling from now on there will be no `script`
tag with `module`. Which will also make our code more readable.
<h1>About this site</h1>
<p>TODO...</p>
<a href="/">Home</a>
- blog/+page.js
<!--blog/+page.js-->
Here you going to add your load function which will be called
on route rendering. Which basically means load have a
new separate file for itself.
This will be used to export values that configure the
page's behaviour:
- export const prerender = true or false
overrides config.kit.prerender.default
- export const hydrate = true or false
overrides config.kit.browser.hydrate
- export const router = true or false
overrides config.kit.browser.router
import { error } from '@sveltejs/kit';
/** @type {import('./$types').PageLoad} */
export function load({ params }) {
if (params.slug === 'hello-world') {
return {
title: 'Hello world!',
content: 'Welcome to our blog. Lorem ipsum
dolor sit amet...'
};
}
throw error(404, 'Not found');
}
- blog/+page.server.js
<!--blog/+page.server.js-->
This is your new way of shadow endpoints. You can write
your server side code here with all the request methods.
src/routes/blog/[slug]/+page.server.js
import { error } from '@sveltejs/kit';
/** @type {import('./$types').PageServerLoad} */
export async function load({ params }) {
const post = await getPostFromDatabase(params.slug);
if (post) {
return post;
}
throw error(404, 'Not found');
}
Load function
As load function got changed and added to file (+page.js) now you can return multiple props without added props property in return.
// +page.js
/** @type {import('./$types').LayoutLoad} */
export function load() {
return {
sections: [
{ slug: 'profile', title: 'Profile' },
{ slug: 'notifications', title: 'Notifications' }
]
};
}
// +page.svelte
<script>
/** @type {import('./$types').PageData} */
export let data;
</script>
{#each data.sections as section}
<h1>{section.slug}</h1>
<div>{section.title}</div>
{/each}
As you can see you have returned multiple things in load without props and you can use data prop to access all the data returned from load function.
Page Store
This made many things easy and sometimes tedious. It depends where you gonna use. This store have all the data for e.g. url, data, errors and etc.
<script>
import { page } from '$app/stores';
</script>
<h1>{$page.status}: {$page.error.message}</h1>
As you can see we imported our page from app store and used it to get status and error message.
These are the some specific breaking changes and if i have left anything just mention them in comments. For more information check out SvelteKit Docs.
This is me writing for you. If you wanna ask or suggest anything please put it in comment.
Top comments (0)