Merge branch 'main' into error-boundary-tutorial

apps/svelte.dev/content/docs/cli/20-commands/40-sv-migrate.md

@@ -2,7 +2,7 @@
 title: sv migrate
 ---
 
-`sv migrate` migrates Svelte(Kit) codebases. It delegates to the [`svelte-migrate`](https://github.com/sveltejs/kit/blob/main/packages/migrate) package.
+`sv migrate` migrates Svelte(Kit) codebases. It delegates to the [`svelte-migrate`](https://www.npmjs.com/package/svelte-migrate) package.
 
 Some migrations may annotate your codebase with tasks for completion that you can find by searching for `@migration`.
 

apps/svelte.dev/content/docs/kit/25-build-and-deploy/60-adapter-cloudflare.md

@@ -86,6 +86,8 @@ To include type declarations for your bindings, reference them in your `src/app.
 
 ```ts
 /// file: src/app.d.ts
+import { KVNamespace, DurableObjectNamespace } from '@cloudflare/workers-types';
+
 declare global {
 	namespace App {
 		interface Platform {

apps/svelte.dev/content/docs/kit/25-build-and-deploy/70-adapter-cloudflare-workers.md

@@ -107,6 +107,8 @@ To include type declarations for your bindings, reference them in your `src/app.
 
 ```ts
 /// file: src/app.d.ts
+import { KVNamespace, DurableObjectNamespace } from '@cloudflare/workers-types';
+
 declare global {
 	namespace App {
 		interface Platform {

apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md

@@ -94,9 +94,7 @@ Checks whether this is an action failure thrown by `fail`.
 <div class="ts-block">
 
 ```dts
-function isActionFailure(
-	e: unknown
-): e is ActionFailure<undefined>;
+function isActionFailure(e: unknown): e is ActionFailure;
 ```
 
 </div>

apps/svelte.dev/content/docs/svelte/05-special-elements/01-svelte-boundary.md

@@ -0,0 +1,79 @@
+---
+title: <svelte:boundary>
+---
+
+```svelte
+<svelte:boundary onerror={handler}>...</svelte:boundary>
+```
+
+Boundaries allow you to guard against errors in part of your app from breaking the app as a whole, and to recover from those errors.
+
+If an error occurs while rendering or updating the children of a `<svelte:boundary>`, or running any [`$effect`]($effect) functions contained therein, the contents will be removed.
+
+Errors occurring outside the rendering process (for example, in event handlers) are _not_ caught by error boundaries.
+
+## Properties
+
+For the boundary to do anything, one or both of `failed` and `onerror` must be provided.
+
+### `failed`
+
+If an `failed` snippet is provided, it will be rendered with the error that was thrown, and a `reset` function that recreates the contents ([demo](/playground/hello-world#H4sIAAAAAAAAE3VRy26DMBD8lS2tFCIh6JkAUlWp39Cq9EBg06CAbdlLArL87zWGKk8ORnhmd3ZnrD1WtOjFXqKO2BDGW96xqpBD5gXerm5QefG39mgQY9EIWHxueRMinLosti0UPsJLzggZKTeilLWgLGc51a3gkuCjKQ7DO7cXZotgJ3kLqzC6hmex1SZnSXTWYHcrj8LJjWTk0PHoZ8VqIdCOKayPykcpuQxAokJaG1dGybYj4gw4K5u6PKTasSbjXKgnIDlA8VvUdo-pzonraBY2bsH7HAl78mKSHZpgIcuHjq9jXSpZSLixRlveKYQUXhQVhL6GPobXAAb7BbNeyvNUs4qfRg3OnELLj5hqH9eQZqCnoBwR9lYcQxuVXeBzc8kMF8yXY4yNJ5oGiUzP_aaf_waTRGJib5_Ad3P_vbCuaYxzeNpbU0eUMPAOKh7Yw1YErgtoXyuYlPLzc10_xo_5A91zkQL_AgAA)):
+
+```svelte
+<svelte:boundary>
+	<FlakyComponent />
+
+	{#snippet failed(error, reset)}
+		<button onclick={reset}>oops! try again</button>
+	{/snippet}
+</svelte:boundary>
+```
+
+> [!NOTE]
+> As with [snippets passed to components](snippet#Passing-snippets-to-components), the `failed` snippet can be passed explicitly as a property...
+>
+> ```svelte
+> <svelte:boundary {failed}>...</svelte:boundary>
+> ```
+>
+> ...or implicitly by declaring it directly inside the boundary, as in the example above.
+
+### `onerror`
+
+If an `onerror` function is provided, it will be called with the same two `error` and `reset` arguments. This is useful for tracking the error with an error reporting service...
+
+```svelte
+<svelte:boundary onerror={(e) => report(e)}>
+	...
+</svelte:boundary>
+```
+
+...or using `error` and `reset` outside the boundary itself:
+
+```svelte
+<script>
+	let error = $state(null);
+	let reset = $state(() => {});
+
+	function onerror(e, r) {
+		error = e;
+		reset = r;
+	}
+</script>
+
+<svelte:boundary {onerror}>
+	<FlakyComponent />
+</svelte:boundary>
+
+{#if error}
+	<button onclick={() => {
+		error = null;
+		reset();
+	}}>
+		oops! try again
+	</button>
+{/if}
+```
+
+If an error occurs inside the `onerror` function (or if you rethrow the error), it will be handled by a parent boundary if such exists.

apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md

@@ -762,6 +762,18 @@ A component can have a single top-level `<style>` element
 `<svelte:body>` does not support non-event attributes or spread attributes
 ```
 
+### svelte_boundary_invalid_attribute
+
+```
+Valid attributes on `<svelte:boundary>` are `onerror` and `failed`
+```
+
+### svelte_boundary_invalid_attribute_value
+
+```
+Attribute value must be a non-string expression
+```
+
 ### svelte_component_invalid_this
 
 ```

apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md

@@ -445,6 +445,11 @@ namespace AST {
 		name: 'svelte:fragment';
 	}
 
+	export interface SvelteBoundary extends BaseElement {
+		type: 'SvelteBoundary';
+		name: 'svelte:boundary';
+	}
+
 	export interface SvelteHead extends BaseElement {
 		type: 'SvelteHead';
 		name: 'svelte:head';

apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-transition.md

@@ -143,7 +143,7 @@ function fly(
 
 ## scale
 
-Animates the opacity and scale of an element. `in` transitions animate from an element's current (default) values to the provided values, passed as parameters. `out` transitions animate from the provided values to an element's default values.
+Animates the opacity and scale of an element. `in` transitions animate from the provided values, passed as parameters, to an element's current (default) values. `out` transitions animate from an element's default values to the provided values.
 
 <div class="ts-block">
 

apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md

@@ -766,6 +766,18 @@ A component can have a single top-level `<style>` element
 `<svelte:body>` does not support non-event attributes or spread attributes
 ```
 
+### svelte_boundary_invalid_attribute
+
+```
+Valid attributes on `<svelte:boundary>` are `onerror` and `failed`
+```
+
+### svelte_boundary_invalid_attribute_value
+
+```
+Attribute value must be a non-string expression
+```
+
 ### svelte_component_invalid_this
 
 ```

apps/svelte.dev/package.json

@@ -48,6 +48,7 @@
 		"yootils": "^0.3.1"
 	},
 	"devDependencies": {
+		"@cloudflare/workers-types": "^4.20241127.0",
 		"@resvg/resvg-js": "^2.6.2",
 		"@supabase/supabase-js": "^2.43.4",
 		"@sveltejs/adapter-vercel": "^5.4.7",

apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte

@@ -17,7 +17,7 @@
 	// TODO this really sucks, why is `exercise.slug` not the slug?
 	let actual_slug = $derived.by(() => {
 		const parts = exercise.slug.split('/');
-		return `${parts[1]}/${parts[3]}`;
+		return `${parts[1].includes('kit') ? 'kit' : 'svelte'}/${parts[3]}`;
 	});
 </script>