SvelteKit 2 blog post (#9919)

* .

* try this

* try this

* add some stuff on shallow routing

* style

* fix link

* update to svelte 4

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
pull/9978/head
Rich Harris 1 year ago committed by GitHub
parent 804f296368
commit a4a1b08905
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -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 SvelteKits launch and were 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, weve 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, weve 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, well 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.

@ -1,6 +1,8 @@
import { json } from '@sveltejs/kit'; import { json } from '@sveltejs/kit';
import { defineBanner } from '@sveltejs/site-kit/components'; 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. // 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. // site-kit contains components/helpers to make fetching+displaying them easier.
export const GET = async () => { export const GET = async () => {

Binary file not shown.

After

Width:  |  Height:  |  Size: 106 KiB

Loading…
Cancel
Save