Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SvelteKit 2 blog post #9919

Merged
merged 7 commits into from
Dec 14, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 43 additions & 0 deletions documentation/blog/2023-12-14-sveltekit-2.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
---
title: 'Announcing SvelteKit 2'
description: 'A special SvelteKit anniversary release'
author: The Svelte team
authorURL: https://kit.svelte.dev/
---

Version 2.0 of [SvelteKit](https://kit.svelte.dev), the official framework for building apps with Svelte, is now available. It is an incremental release that adds support for the newly-released [Vite 5](https://vitejs.dev/blog/announcing-vite5) along with a bevy of small improvements and one much-requested feature.

If you've been paying close attention to Svelte in recent months, you'll know that we've been [hard at work on Svelte 5](https://svelte-5-preview.vercel.app/docs/introduction), which is possibly the most anticipated release in the project's history. Upgrading to SvelteKit 2 will smooth the path for Svelte 5 when it is released in 2024, and we encourage all users to upgrade when you get a chance.

We recommend updating to the most recent 1.x release first, along with Svelte 4, in order to address any deprecation warnings. Then, upgrade to SvelteKit 2 by running the automated migration tool:

```bash
npx svelte-migrate sveltekit-2
```

The [migration guide](https://kit.svelte.dev/docs/migrating-to-sveltekit-2) has more details about what's new.

## Shallow routing

Way back in the mists of time — May, to be precise — we [teased a new feature](https://www.youtube.com/watch?v=HdkJTOTY-Js) that allows you to associate state with a history entry without causing navigation. It's very useful for creating modals that you can dismiss by swiping back, or pop-up views of routes you don't want to do a full navigation to.

That feature is called [shallow routing](https://kit.svelte.dev/docs/shallow-routing), and this week we finally dusted off the pull request and added it to the framework. We're excited to see what you use it for.

## One year of SvelteKit

Today is the one year anniversary of SvelteKit’s launch and we’re excited to celebrate how far SvelteKit has come. SvelteKit has been quickly embraced by the web development community:

<figure>
<img alt="Screenshot of @flaviocopes tweet with a poll titled 'You have to create a web app from scratch'. SvelteKit is the winner above Next, Nuxt and Laravel with 42.1% of the vote" src="/media/framework-poll.webp">
<figcaption><a href="https://twitter.com/flaviocopes/status/1730895911864189299">Tweet from @flaviocopes</a></figcaption>
</figure>

In the past year, we’ve seen a number of open source projects like [Storybook](https://github.com/storybookjs/storybook/blob/next/code/frameworks/sveltekit/README.md), [Tailwind](https://tailwindcss.com/docs/guides/sveltekit), and [Playwright](https://playwright.dev/docs/test-components) officially support SvelteKit as well as a number of commercial entities like [Prismic](https://prismic.io/blog/svelte-sveltekit-tutorial), [Sentry](https://docs.sentry.io/platforms/javascript/guides/sveltekit/), and [InLang](https://inlang.com/m/gerre34r/library-inlang-paraglideJs).

SvelteKit continues to benefit from the Svelte community, which has developed numerous great UI libraries like [Skeleton](https://www.skeleton.dev/), [shadcn-svelte](https://www.shadcn-svelte.com/), [Melt UI](https://melt-ui.com/), [Flowbite Svelte](https://flowbite-svelte.com/), [daisyUI](https://daisyui.com/), and [many more](https://sveltesociety.dev/components#design-systems). And [our first ever hackathon](https://hack.sveltesociety.dev/) saw winners from amazing Svelte projects like [Superforms](https://superforms.rocks/), [Threlte](https://threlte.xyz/), and [SvelteLab](https://www.sveltelab.dev/).

Finally, we’ve also launched major supporting projects like a new Svelte DevTools ([chrome web store](https://chromewebstore.google.com/detail/svelte-devtools/kfidecgcdjjfpeckbblhmfkhmlgecoff), [GitHub](https://github.com/sveltejs/svelte-devtools), [talk](https://www.sveltesummit.com/2023/fall/exploring-svelte-devtools)), Svelte Inspector ([docs](https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/inspector.md), [talk](https://www.sveltesummit.com/2023/spring/svelte-inspector-update)), and experimental image optimization support ([docs](https://kit.svelte.dev/docs/images), [talk](https://www.sveltesummit.com/2023/fall/enhanced-img)).

## Upcoming

In addition to the ongoing image work, we’ll be working to improve support for Svelte 5 and internationalization in upcoming releases. The first parts of that work have already landed in SvelteKit 2, which includes improved support for prerendering URLs with optional path segments often used to specify a language. Thank you to the team from InLang who contributed this improvement.
2 changes: 2 additions & 0 deletions sites/svelte.dev/src/routes/banner.json/+server.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import { json } from '@sveltejs/kit';
import { defineBanner } from '@sveltejs/site-kit/components';

export const prerender = true;

// This server route is used by all Svelte sites to load info about which banner to show.
// site-kit contains components/helpers to make fetching+displaying them easier.
export const GET = async () => {
Expand Down
Binary file not shown.