Sveltekit Braking changes: Routing, Load Function and new way of shadow endpoints

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.