Merge branch 'main' into templating-mode-selector

paoloricciuti · web-flow · commit 5b363759e6ac · 2025-05-22T22:27:08.000+02:00
diff --git a/apps/svelte.dev/content/blog/2025-05-21-svelte-summit-videos.md b/apps/svelte.dev/content/blog/2025-05-21-svelte-summit-videos.md
@@ -0,0 +1,16 @@
+---
+title: 'Bringing Svelte Summit to the whole community'
+description: We're sponsoring the release of talks from Barcelona, starting this weekend
+author: The Svelte team
+authorURL: https://bsky.app/profile/svelte.dev
+---
+
+This month's [Svelte Summit](https://www.sveltesummit.com/) in Barcelona was a glorious celebration of the community. We had lively conversations, delightful dinners, and funny, imaginative and thought-provoking talks.
+
+For everyone who couldn't make it there in person, the conference also sold virtual tickets to the livestream, which give on-demand access to the talks. These ticket sales make it possible to (for example) hire AV technicians and ensure that the stream is reliable and high-quality. Running a conference is extremely difficult and time-consuming, and we're very grateful to [Svelte Society](https://bsky.app/profile/sveltesociety.dev) ([Kevin](https://bsky.app/profile/kevinak.se) in particular), [Mainmatter](https://mainmatter.com/), and everyone who bought a ticket for making the event a reality.
+
+But we've heard from many of you that the talks should be freely available so that they can be shared with the widest possible audience and... we agree!
+
+So the Svelte team has decided to sponsor the release of the talks, beginning this weekend. We're able to do this because of the generous financial support so many of you have given us via [opencollective.com/svelte](https://opencollective.com/svelte), which also funds important development work on the project.
+
+Subscribe to the [Svelte Society YouTube account](https://www.youtube.com/sveltesociety) to be the first to know when the videos are released.
diff --git a/apps/svelte.dev/content/docs/cli/30-add-ons/05-drizzle.md b/apps/svelte.dev/content/docs/cli/30-add-ons/05-drizzle.md
@@ -29,7 +29,7 @@ Which database variant to use:
 - `sqlite` — file-based database not requiring a database server
 
 ```bash
-npx sv add --drizzle=postgresql
+npx sv add drizzle=database:postgresql
 ```
 
 ### client
@@ -41,7 +41,7 @@ The SQL client to use, depends on `database`:
 - For `sqlite`: `better-sqlite3`, `libsql`, `turso`
 
 ```bash
-npx sv add --drizzle=postgresql,postgres.js
+npx sv add drizzle=database:postgresql+client:postgres.js
 ```
 
 Drizzle is compatible with well over a dozen database drivers. We just offer a few of the most common ones here for simplicity, but if you'd like to use another one you can choose one as a placeholder and swap it out for another after setup by choosing from [Drizzle's full list of compatible drivers](https://orm.drizzle.team/docs/connect-overview#next-steps).
@@ -50,9 +50,6 @@ Drizzle is compatible with well over a dozen database drivers. We just offer a f
 
 Whether to add Docker Compose configuration. Only available for [`database`](#Options-database) `postgresql` or `mysql`
 
-- `docker` - generates `docker-compose.yml`
-- `no-docker` - does not generate docker config
-
 ```bash
-npx sv add --drizzle=postgresql,postgres.js,docker
+npx sv add drizzle=database:postgresql+client:postgres.js+docker:yes
 ```
diff --git a/apps/svelte.dev/content/docs/cli/30-add-ons/15-lucia.md b/apps/svelte.dev/content/docs/cli/30-add-ons/15-lucia.md
@@ -23,5 +23,5 @@ npx sv add lucia
 Whether to include demo registration and login pages.
 
 ```bash
-npx sv add --lucia=demo
+npx sv add lucia=demo:yes
 ```
diff --git a/apps/svelte.dev/content/docs/cli/30-add-ons/25-paraglide.md b/apps/svelte.dev/content/docs/cli/30-add-ons/25-paraglide.md
@@ -22,18 +22,18 @@ npx sv add paraglide
 
 ## Options
 
-### availableLanguageTags
+### languageTags
 
 The languages you'd like to support specified as IETF BCP 47 language tags.
 
 ```bash
-npx sv add --paraglide=en,es
+npx sv add paraglide="languageTags:en,es"
 ```
 
 ### demo
 
 Whether to generate an optional demo page showing how to use paraglide.
 
 ```bash
-npx sv add --paraglide=demo
+npx sv add paraglide="demo:yes"
 ```
diff --git a/apps/svelte.dev/content/docs/cli/30-add-ons/45-sveltekit-adapter.md b/apps/svelte.dev/content/docs/cli/30-add-ons/45-sveltekit-adapter.md
@@ -29,5 +29,5 @@ Which SvelteKit adapter to use:
 - `netlify` — [`@sveltejs/adapter-netlify`](/docs/kit/adapter-netlify) allows you to deploy to Netlify
 
 ```bash
-npx sv add --sveltekit-adapter=node
+npx sv add sveltekit-adapter=adapter:node
 ```
diff --git a/apps/svelte.dev/content/docs/cli/30-add-ons/50-tailwind.md b/apps/svelte.dev/content/docs/cli/30-add-ons/50-tailwind.md
@@ -28,5 +28,5 @@ Which plugin to use:
 - `forms` — [`@tailwindcss/forms`](https://github.com/tailwindlabs/tailwindcss-forms)
 
 ```bash
-npx sv add --tailwindcss=typography
+npx sv add tailwindcss="plugins:typography"
 ```
diff --git a/apps/svelte.dev/content/docs/kit/20-core-concepts/40-page-options.md b/apps/svelte.dev/content/docs/kit/20-core-concepts/40-page-options.md
@@ -3,7 +3,7 @@ NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-doc
 title: Page options
 ---
 
-By default, SvelteKit will render (or [prerender](glossary#Prerendering)) any component first on the server and send it to the client as HTML. It will then render the component again in the browser to make it interactive in a process called [**hydration**](glossary#Hydration). For this reason, you need to ensure that components can run in both places. SvelteKit will then initialize a [**router**](routing) that takes over subsequent navigations.
+By default, SvelteKit will render (or [prerender](glossary#Prerendering)) any component first on the server and send it to the client as HTML. It will then render the component again in the browser to make it interactive in a process called [_hydration_](glossary#Hydration). For this reason, you need to ensure that components can run in both places. SvelteKit will then initialize a [_router_](routing) that takes over subsequent navigations.
 
 You can control each of these on a page-by-page basis by exporting options from [`+page.js`](routing#page-page.js) or [`+page.server.js`](routing#page-page.server.js), or for groups of pages using a shared [`+layout.js`](routing#layout-layout.js) or [`+layout.server.js`](routing#layout-layout.server.js). To define an option for the whole app, export it from the root layout. Child layouts and pages override values set in parent layouts, so — for example — you can enable prerendering for your entire app then disable it for pages that need to be dynamically rendered.
 
diff --git a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/30-adapter-auto.md b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/30-adapter-auto.md
@@ -9,7 +9,7 @@ When you create a new SvelteKit project with `npx sv create`, it installs [`adap
 - [`@sveltejs/adapter-netlify`](adapter-netlify) for [Netlify](https://netlify.com/)
 - [`@sveltejs/adapter-vercel`](adapter-vercel) for [Vercel](https://vercel.com/)
 - [`svelte-adapter-azure-swa`](https://github.com/geoffrich/svelte-adapter-azure-swa) for [Azure Static Web Apps](https://docs.microsoft.com/en-us/azure/static-web-apps/)
-- [`svelte-kit-sst`](https://github.com/sst/sst/tree/master/packages/svelte-kit-sst) for [AWS via SST](https://sst.dev/docs/start/aws/svelte)
+- [`svelte-kit-sst`](https://github.com/sst/v2/tree/master/packages/svelte-kit-sst) for [AWS via SST](https://sst.dev/docs/start/aws/svelte)
 - [`@sveltejs/adapter-node`](adapter-node) for [Google Cloud Run](https://cloud.google.com/run)
 
 It's recommended to install the appropriate adapter to your `devDependencies` once you've settled on a target environment, since this will add the adapter to your lockfile and slightly improve install times on CI.
diff --git a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/60-adapter-cloudflare.md b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/60-adapter-cloudflare.md
@@ -109,9 +109,9 @@ Please follow the [Get Started Guide](https://developers.cloudflare.com/pages/ge
 
 If you're using the [Git integration](https://developers.cloudflare.com/pages/get-started/git-integration/), your build settings should look like this:
 
-- **Framework preset** – SvelteKit
-- **Build command** – `npm run build` or `vite build`
-- **Build output directory** – `.svelte-kit/cloudflare`
+- Framework preset – SvelteKit
+- Build command – `npm run build` or `vite build`
+- Build output directory – `.svelte-kit/cloudflare`
 
 ### Further reading
 
@@ -158,7 +158,7 @@ export {};
 
 Cloudflare specific values in the `platform` property are emulated during dev and preview modes. Local [bindings](https://developers.cloudflare.com/workers/wrangler/configuration/#bindings) are created based on your [Wrangler configuration file](https://developers.cloudflare.com/workers/wrangler/) and are used to populate `platform.env` during development and preview. Use the adapter config [`platformProxy` option](#Options-platformProxy) to change your preferences for the bindings.
 
-For testing the build, you should use [Wrangler](https://developers.cloudflare.com/workers/wrangler/) **version 4**. Once you have built your site, run `wrangler dev .svelte-kit/cloudflare` if you're testing for Cloudflare Workers or `wrangler pages dev .svelte-kit/cloudflare` for Cloudflare Pages.
+For testing the build, you should use [Wrangler](https://developers.cloudflare.com/workers/wrangler/) version 4. Once you have built your site, run `wrangler dev .svelte-kit/cloudflare` if you're testing for Cloudflare Workers or `wrangler pages dev .svelte-kit/cloudflare` for Cloudflare Pages.
 
 ## Headers and redirects
 
diff --git a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/70-adapter-cloudflare-workers.md b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/70-adapter-cloudflare-workers.md
@@ -113,7 +113,7 @@ export {};
 
 Cloudflare Workers specific values in the `platform` property are emulated during dev and preview modes. Local [bindings](https://developers.cloudflare.com/workers/wrangler/configuration/#bindings) are created based on your [Wrangler configuration file](https://developers.cloudflare.com/workers/wrangler/) and are used to populate `platform.env` during development and preview. Use the adapter config [`platformProxy` option](#Options-platformProxy) to change your preferences for the bindings.
 
-For testing the build, you should use [Wrangler](https://developers.cloudflare.com/workers/wrangler/) **version 4**. Once you have built your site, run `wrangler dev`.
+For testing the build, you should use [Wrangler](https://developers.cloudflare.com/workers/wrangler/) version 4. Once you have built your site, run `wrangler dev`.
 
 ## Troubleshooting
 
diff --git a/apps/svelte.dev/content/docs/kit/30-advanced/20-hooks.md b/apps/svelte.dev/content/docs/kit/30-advanced/20-hooks.md
@@ -107,7 +107,7 @@ Note that `resolve(...)` will never throw an error, it will always return a `Pro
 
 ### handleFetch
 
-This function allows you to modify (or replace) a `fetch` request that happens inside a `load`, `action` or `handle` function that runs on the server (or during prerendering).
+This function allows you to modify (or replace) the result of an [`event.fetch`](load#Making-fetch-requests) call that runs on the server (or during prerendering) inside an endpoint, `load`, `action`, `handle`, `handleError` or `reroute`.
 
 For example, your `load` function might make a request to a public URL like `https://api.yourapp.com` when the user performs a client-side navigation to the respective page, but during SSR it might make sense to hit the API directly (bypassing whatever proxies and load balancers sit between it and the public internet).
 
@@ -127,13 +127,9 @@ export async function handleFetch({ request, fetch }) {
 }
 ```
 
-**Credentials**
+Requests made with `event.fetch` follow the browser's credentials model — for same-origin requests, `cookie` and `authorization` headers are forwarded unless the `credentials` option is set to `"omit"`. For cross-origin requests, `cookie` will be included if the request URL belongs to a subdomain of the app — for example if your app is on `my-domain.com`, and your API is on `api.my-domain.com`, cookies will be included in the request.
 
-For same-origin requests, SvelteKit's `fetch` implementation will forward `cookie` and `authorization` headers unless the `credentials` option is set to `"omit"`.
-
-For cross-origin requests, `cookie` will be included if the request URL belongs to a subdomain of the app — for example if your app is on `my-domain.com`, and your API is on `api.my-domain.com`, cookies will be included in the request.
-
-If your app and your API are on sibling subdomains — `www.my-domain.com` and `api.my-domain.com` for example — then a cookie belonging to a common parent domain like `my-domain.com` will _not_ be included, because SvelteKit has no way to know which domain the cookie belongs to. In these cases you will need to manually include the cookie using `handleFetch`:
+There is one caveat: if your app and your API are on sibling subdomains — `www.my-domain.com` and `api.my-domain.com` for example — then a cookie belonging to a common parent domain like `my-domain.com` will _not_ be included, because SvelteKit has no way to know which domain the cookie belongs to. In these cases you will need to manually include the cookie using `handleFetch`:
 
 ```js
 /// file: src/hooks.server.js
diff --git a/apps/svelte.dev/content/docs/kit/60-appendix/10-faq.md b/apps/svelte.dev/content/docs/kit/60-appendix/10-faq.md
@@ -194,9 +194,7 @@ Sort of. The Plug'n'Play feature, aka 'pnp', is broken (it deviates from the Nod
 
 Currently ESM Support within the latest Yarn (version 3) is considered [experimental](https://github.com/yarnpkg/berry/pull/2161).
 
-The below seems to work although your results may vary.
-
-First create a new application:
+The below seems to work although your results may vary. First create a new application:
 
 ```sh
 yarn create svelte myapp
@@ -210,8 +208,6 @@ yarn set version berry
 yarn install
 ```
 
-#### Yarn 3 global cache
-
 One of the more interesting features of Yarn Berry is the ability to have a single global cache for packages, instead of having multiple copies for each project on the disk. However, setting `enableGlobalCache` to true causes building to fail, so it is recommended to add the following to the `.yarnrc.yml` file:
 
 ```yaml
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md b/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
@@ -1110,7 +1110,7 @@ type HandleClientError = (input: {
 
 ## HandleFetch
 
-The [`handleFetch`](/docs/kit/hooks#Server-hooks-handleFetch) hook allows you to modify (or replace) a `fetch` request that happens inside a `load` function that runs on the server (or during prerendering).
+The [`handleFetch`](/docs/kit/hooks#Server-hooks-handleFetch) hook allows you to modify (or replace) the result of an [`event.fetch`](/docs/kit/load#Making-fetch-requests) call that runs on the server (or during prerendering) inside an endpoint, `load`, `action`, `handle`, `handleError` or `reroute`.
 
 <div class="ts-block">
 
diff --git a/apps/svelte.dev/content/docs/svelte/02-runes/02-$state.md b/apps/svelte.dev/content/docs/svelte/02-runes/02-$state.md
@@ -21,7 +21,7 @@ Unlike other frameworks you may have encountered, there is no API for interactin
 
 If `$state` is used with an array or a simple object, the result is a deeply reactive _state proxy_. [Proxies](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) allow Svelte to run code when you read or write properties, including via methods like `array.push(...)`, triggering granular updates.
 
-> [!NOTE] Classes like `Set` and `Map` will not be proxied, but Svelte provides reactive implementations for various built-ins like these that can be imported from [`svelte/reactivity`](./svelte-reactivity).
+> [!NOTE] Class instances are not proxied. You can create [reactive state fields](#Classes) on classes that you define. Svelte provides reactive implementations of built-ins like `Set` and `Map` that can be imported from [`svelte/reactivity`](svelte-reactivity).
 
 State is proxified recursively until Svelte finds something other than an array or simple object. In a case like this...
 
@@ -68,16 +68,15 @@ todos[0].done = !todos[0].done;
 
 ### Classes
 
-You can also use `$state` in class fields (whether public or private):
+You can also use `$state` in class fields (whether public or private), or as the first assignment to a property immediately inside the `constructor`:
 
 ```js
 // @errors: 7006 2554
 class Todo {
 	done = $state(false);
-	text = $state();
 
 	constructor(text) {
-		this.text = text;
+		this.text = $state(text);
 	}
 
 	reset() {
@@ -111,10 +110,9 @@ You can either use an inline function...
 // @errors: 7006 2554
 class Todo {
 	done = $state(false);
-	text = $state();
 
 	constructor(text) {
-		this.text = text;
+		this.text = $state(text);
 	}
 
 	+++reset = () => {+++
diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/01-basic-markup.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/01-basic-markup.md
@@ -83,12 +83,14 @@ As with elements, `name={name}` can be replaced with the `{name}` shorthand.
 <Widget foo={bar} answer={42} text="hello" />
 ```
 
+## Spread attributes
+
 _Spread attributes_ allow many attributes or properties to be passed to an element or component at once.
 
-An element or component can have multiple spread attributes, interspersed with regular ones.
+An element or component can have multiple spread attributes, interspersed with regular ones. Order matters — if `things.a` exists it will take precedence over `a="b"`, while `c="d"` would take precedence over `things.c`:
 
 ```svelte
-<Widget {...things} />
+<Widget a="b" {...things} c="d" />
 ```
 
 ## Events
diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/03-each.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/03-each.md
@@ -44,7 +44,9 @@ An each block can also specify an _index_, equivalent to the second argument in
 {#each expression as name, index (key)}...{/each}
 ```
 
-If a _key_ expression is provided — which must uniquely identify each list item — Svelte will use it to diff the list when data changes, rather than adding or removing items at the end. The key can be any object, but strings and numbers are recommended since they allow identity to persist when the objects themselves change.
+If a _key_ expression is provided — which must uniquely identify each list item — Svelte will use it to intelligently update the list when data changes by inserting, moving and deleting items, rather than adding or removing items at the end and updating the state in the middle.
+
+The key can be any object, but strings and numbers are recommended since they allow identity to persist when the objects themselves change.
 
 ```svelte
 {#each items as item (item.id)}
diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/09-@attach.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/09-@attach.md
diff --git a/apps/svelte.dev/content/docs/svelte/06-runtime/02-context.md b/apps/svelte.dev/content/docs/svelte/06-runtime/02-context.md
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
diff --git a/packages/repl/src/lib/Workspace.svelte.ts b/packages/repl/src/lib/Workspace.svelte.ts
diff --git a/packages/site-kit/src/lib/markdown/renderer.ts b/packages/site-kit/src/lib/markdown/renderer.ts
