Big changes are landing on Sveltekit!

Recent discussion by Rich Harris indicates that Sveltekit will have more breaking changes before the release of 1.0

Update

The changes are already been merged!

I tried it right away and this is what I feel about it.

sveltekit is so good

A lot of things that were considered to be the standard are going to change in Sveltekit.

These changes are going to simplify Sveltekit in a good way. It is also going to clear some of the confusion users had about the load function in svelte components.

I will have to change a lot of things. Including this blog 😥

Directory-based routing

The current file-based routing is going to be replaced by directory-based routing which forces users to create folders for all the routes they need.

For example if you had /routes/about.svelte, now you will have /routes/about/+page.svelte.

We will end up having a lot of +page.svelte files in the editor but it was the same as having a bunch of index.svelte files before.

Here is a video by Rich Harris on how to find any route file by just typing <route>+ in the code editor.

Now, you can have any number of components in the same folder and it will not be rendered as a page! Check the directory structure at the end.

This makes the importing of components easier and also helps in organizing the sveltekit app.

Unloading the load function

The load function is moving out of the component!

It is a much-needed change that simplifies the component. Now, there will be only one <script> tag in the component.

Much better Endpoints

Endpoints are also getting a facelift with more control over the requests(especially POST). I’m guessing we will be able to validate forms using these endpoints without refresh!

Happy returns

The return functions are being simplified in this implementation. The load function returns data directly instead of using props.

Endpoints return data directly instead of using a body object.

Sample structure

webjeda-project/
│
└─src/
│ └─routes/
│   │ +page.svelte // your homepage
│   │ +page.js // homepage load function
│   │ +page.server.js //homepage endpoint
│   │
│   │ +layout.svelte // root layout
│   │ +layout.js // layout load function
│   │ +layout.server.js // layout endpoint
│   │
│   └─about/
│      │ +page.svelte // page component(contents of /about/)
│      │ +page.js // load function
│      │ +page.server.js // endpoint
│      │ +error.svelte // error page
│      │ +layout.svelte // page layout
│      │ Counter.svelte // a component
│      │ Widget.svelte // another component

I’m excited about the upcoming changes. Let me know your thoughts.

For the complete discussion, go here