From 8d0937a53427d6ecd50a5fdd41fbfbd6aff3168c Mon Sep 17 00:00:00 2001
From: Tim Deschryver <28659384+timdeschryver@users.noreply.github.com>
Date: Sat, 2 Nov 2024 20:09:23 +0100
Subject: [PATCH 001/159] docs: fix compilation error (#14121)

---
 documentation/docs/06-runtime/03-lifecycle-hooks.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/documentation/docs/06-runtime/03-lifecycle-hooks.md b/documentation/docs/06-runtime/03-lifecycle-hooks.md
index 16ab0e8e87..a3dbe04b00 100644
--- a/documentation/docs/06-runtime/03-lifecycle-hooks.md
+++ b/documentation/docs/06-runtime/03-lifecycle-hooks.md
@@ -71,9 +71,9 @@ While there's no "after update" hook, you can use `tick` to ensure that the UI i
 
 	$effect.pre(() => {
 		console.log('the component is about to update');
-		tick().then(
+		tick().then(() => {
 				console.log('the component just updated');
-		);
+		});
 	});
 </script>
 ```

From 4038b0cad67f8eebf652cee04e5c2691bcc40e89 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 2 Nov 2024 22:19:48 -0400
Subject: [PATCH 002/159] chore: setup docs previews (#14128)

* chore: setup docs previews

* test

* delete
---
 .../workflows/docs-preview-create-request.yml | 26 ++++++++++++++++++
 .../workflows/docs-preview-delete-request.yml | 27 +++++++++++++++++++
 2 files changed, 53 insertions(+)
 create mode 100644 .github/workflows/docs-preview-create-request.yml
 create mode 100644 .github/workflows/docs-preview-delete-request.yml

diff --git a/.github/workflows/docs-preview-create-request.yml b/.github/workflows/docs-preview-create-request.yml
new file mode 100644
index 0000000000..95ea820928
--- /dev/null
+++ b/.github/workflows/docs-preview-create-request.yml
@@ -0,0 +1,26 @@
+# https://github.com/sveltejs/svelte.dev/blob/main/apps/svelte.dev/scripts/sync-docs/README.md
+name: Docs preview create request
+
+on:
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  dispatch:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Repository Dispatch
+        uses: peter-evans/repository-dispatch@v3
+        with:
+          token: ${{ secrets.SYNC_REQUEST_TOKEN }}
+          repository: sveltejs/svelte.dev
+          event-type: docs-preview-create
+          client-payload: |-
+            {
+              "package": "svelte",
+              "repo": "${{ github.repository }}",
+              "owner": "${{ github.event.pull_request.head.repo.owner.login }}",
+              "branch": "${{ github.event.pull_request.head.ref }}",
+              "pr": ${{ github.event.pull_request.number }}
+            }
diff --git a/.github/workflows/docs-preview-delete-request.yml b/.github/workflows/docs-preview-delete-request.yml
new file mode 100644
index 0000000000..d14704107d
--- /dev/null
+++ b/.github/workflows/docs-preview-delete-request.yml
@@ -0,0 +1,27 @@
+# https://github.com/sveltejs/svelte.dev/blob/main/apps/svelte.dev/scripts/sync-docs/README.md
+name: Docs preview delete request
+
+on:
+  pull_request:
+    branches:
+      - main
+    types: [closed]
+
+jobs:
+  dispatch:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Repository Dispatch
+        uses: peter-evans/repository-dispatch@v3
+        with:
+          token: ${{ secrets.SYNC_REQUEST_TOKEN }}
+          repository: sveltejs/svelte.dev
+          event-type: docs-preview-delete
+          client-payload: |-
+            {
+              "package": "svelte",
+              "repo": "${{ github.repository }}",
+              "owner": "${{ github.event.pull_request.head.repo.owner.login }}",
+              "branch": "${{ github.event.pull_request.head.ref }}",
+              "pr": ${{ github.event.pull_request.number }}
+            }

From 00f5b14d4029760b6e0583d5d4c0ebc7b3484520 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Sun, 3 Nov 2024 03:23:32 +0100
Subject: [PATCH 003/159] docs: fix description (#14109)

Since Svelte 5, comments are also preserved on the client
---
 packages/svelte/src/compiler/types/index.d.ts | 2 +-
 packages/svelte/types/index.d.ts              | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/svelte/src/compiler/types/index.d.ts b/packages/svelte/src/compiler/types/index.d.ts
index 40611b31ae..8a45f2d4fd 100644
--- a/packages/svelte/src/compiler/types/index.d.ts
+++ b/packages/svelte/src/compiler/types/index.d.ts
@@ -110,7 +110,7 @@ export interface CompileOptions extends ModuleCompileOptions {
 	 */
 	cssHash?: CssHashGetter;
 	/**
-	 * If `true`, your HTML comments will be preserved during server-side rendering. By default, they are stripped out.
+	 * If `true`, your HTML comments will be preserved in the output. By default, they are stripped out.
 	 *
 	 * @default false
 	 */
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
index 0f08fabfcb..ca67923ee1 100644
--- a/packages/svelte/types/index.d.ts
+++ b/packages/svelte/types/index.d.ts
@@ -812,7 +812,7 @@ declare module 'svelte/compiler' {
 		 */
 		cssHash?: CssHashGetter;
 		/**
-		 * If `true`, your HTML comments will be preserved during server-side rendering. By default, they are stripped out.
+		 * If `true`, your HTML comments will be preserved in the output. By default, they are stripped out.
 		 *
 		 * @default false
 		 */
@@ -2183,7 +2183,7 @@ declare module 'svelte/types/compiler/interfaces' {
 		 */
 		cssHash?: CssHashGetter;
 		/**
-		 * If `true`, your HTML comments will be preserved during server-side rendering. By default, they are stripped out.
+		 * If `true`, your HTML comments will be preserved in the output. By default, they are stripped out.
 		 *
 		 * @default false
 		 */

From a952860232203cbb3228387f5a3e70de28192796 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Sun, 3 Nov 2024 03:24:10 +0100
Subject: [PATCH 004/159] docs: more docs on TS types (#14065)

* docs: more docs on TS types

and a few related changes/enhancements
closes #13940

* Apply suggestions from code review

* adjust

* Apply suggestions from code review

* Update documentation/docs/07-misc/03-typescript.md

* Update documentation/docs/07-misc/03-typescript.md

* Update documentation/docs/07-misc/03-typescript.md

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 documentation/docs/07-misc/03-typescript.md     | 17 ++++++++++++++++-
 .../docs/07-misc/07-v5-migration-guide.md       |  5 +++--
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/documentation/docs/07-misc/03-typescript.md b/documentation/docs/07-misc/03-typescript.md
index 525ba51d2f..5e16382187 100644
--- a/documentation/docs/07-misc/03-typescript.md
+++ b/documentation/docs/07-misc/03-typescript.md
@@ -195,7 +195,9 @@ Using it together with dynamic components to restrict what kinds of component ca
 <DynamicComponent prop="foo" />
 ```
 
-Closely related to the `Component` type is the `ComponentProps` type which extracts the properties a component expects.
+> [!LEGACY] In Svelte 4, components were of type `SvelteComponent`
+
+To extract the properties from a component, use `ComponentProps`.
 
 ```ts
 import type { Component, ComponentProps } from 'svelte';
@@ -211,6 +213,19 @@ function withProps<TComponent extends Component<any>>(
 withProps(MyComponent, { foo: 'bar' });
 ```
 
+To declare that a variable expects the constructor or instance type of a component:
+
+```svelte
+<script lang="ts">
+	import MyComponent from './MyComponent.svelte';
+
+	let componentConstructor: typeof MyComponent = MyComponent;
+	let componentInstance: MyComponent;
+</script>
+
+<MyComponent bind:this={componentInstance} />
+```
+
 ## Enhancing built-in DOM types
 
 Svelte provides a best effort of all the HTML DOM types that exist. Sometimes you may want to use experimental attributes or custom events coming from an action. In these cases, TypeScript will throw a type error, saying that it does not know these types. If it's a non-experimental standard attribute/event, this may very well be a missing typing from our [HTML typings](https://github.com/sveltejs/svelte/blob/main/packages/svelte/elements.d.ts). In that case, you are welcome to open an issue and/or a PR fixing it.
diff --git a/documentation/docs/07-misc/07-v5-migration-guide.md b/documentation/docs/07-misc/07-v5-migration-guide.md
index 093ec5b86b..c7cdd36106 100644
--- a/documentation/docs/07-misc/07-v5-migration-guide.md
+++ b/documentation/docs/07-misc/07-v5-migration-guide.md
@@ -599,13 +599,14 @@ To declare that a component of a certain type is required:
 
 ```svelte
 <script lang="ts">
-	import type { Component } from 'svelte';
+	import type { ---SvelteComponent--- +++Component+++ } from 'svelte';
 	import {
 		ComponentA,
 		ComponentB
 	} from 'component-library';
 
-	let component: Component<{ foo: string }> = $state(
+	---let component: typeof SvelteComponent<{ foo: string }>---
+	+++let component: Component<{ foo: string }>+++ = $state(
 		Math.random() ? ComponentA : ComponentB
 	);
 </script>

From 74a2c6b5807de1540f48db3875dab36d56ca738e Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Sun, 3 Nov 2024 14:31:54 +0100
Subject: [PATCH 005/159] fix: migrate multiple declarations with only some
 exported correctly (#14126)

---
 .changeset/yellow-pumas-rule.md               |  5 +++
 packages/svelte/src/compiler/migrate/index.js | 41 +++++++++++++++----
 .../input.svelte                              |  6 +++
 .../output.svelte                             | 12 ++++++
 4 files changed, 57 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/yellow-pumas-rule.md
 create mode 100644 packages/svelte/tests/migrate/samples/export-props-multiple-declarations/input.svelte
 create mode 100644 packages/svelte/tests/migrate/samples/export-props-multiple-declarations/output.svelte

diff --git a/.changeset/yellow-pumas-rule.md b/.changeset/yellow-pumas-rule.md
new file mode 100644
index 0000000000..02def3c178
--- /dev/null
+++ b/.changeset/yellow-pumas-rule.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: migrate multiple declarations with only some exported correctly
diff --git a/packages/svelte/src/compiler/migrate/index.js b/packages/svelte/src/compiler/migrate/index.js
index ee5abc8853..011d28d61a 100644
--- a/packages/svelte/src/compiler/migrate/index.js
+++ b/packages/svelte/src/compiler/migrate/index.js
@@ -505,7 +505,8 @@ const instance_script = {
 
 		let nr_of_props = 0;
 
-		for (const declarator of node.declarations) {
+		for (let i = 0; i < node.declarations.length; i++) {
+			const declarator = node.declarations[i];
 			if (state.analysis.runes) {
 				if (get_rune(declarator.init, state.scope) === '$props') {
 					state.props_insertion_point = /** @type {number} */ (declarator.id.start) + 1;
@@ -605,12 +606,38 @@ const instance_script = {
 					});
 				}
 
-				state.props_insertion_point = /** @type {number} */ (declarator.end);
-				state.str.update(
-					/** @type {number} */ (declarator.start),
-					/** @type {number} */ (declarator.end),
-					''
-				);
+				let start = /** @type {number} */ (declarator.start);
+				let end = /** @type {number} */ (declarator.end);
+
+				// handle cases like let a,b,c; where only some are exported
+				if (node.declarations.length > 1) {
+					// move the insertion point after the node itself;
+					state.props_insertion_point = /** @type {number} */ (node.end);
+					// if it's not the first declaration remove from the , of the previous declaration
+					if (i !== 0) {
+						start = state.str.original.indexOf(
+							',',
+							/** @type {number} */ (node.declarations[i - 1].end)
+						);
+					}
+					// if it's not the last declaration remove either from up until the
+					// start of the next declaration (if it's the first declaration) or
+					// up until the last index of , from the next declaration
+					if (i !== node.declarations.length - 1) {
+						if (i === 0) {
+							end = /** @type {number} */ (node.declarations[i + 1].start);
+						} else {
+							end = state.str.original.lastIndexOf(
+								',',
+								/** @type {number} */ (node.declarations[i + 1].start)
+							);
+						}
+					}
+				} else {
+					state.props_insertion_point = /** @type {number} */ (declarator.end);
+				}
+
+				state.str.update(start, end, '');
 
 				continue;
 			}
diff --git a/packages/svelte/tests/migrate/samples/export-props-multiple-declarations/input.svelte b/packages/svelte/tests/migrate/samples/export-props-multiple-declarations/input.svelte
new file mode 100644
index 0000000000..198bd44fc0
--- /dev/null
+++ b/packages/svelte/tests/migrate/samples/export-props-multiple-declarations/input.svelte
@@ -0,0 +1,6 @@
+<script>
+	let a, b, c, d;
+	let e, f, g, h;
+
+	export {a, c , f, h}
+</script>
\ No newline at end of file
diff --git a/packages/svelte/tests/migrate/samples/export-props-multiple-declarations/output.svelte b/packages/svelte/tests/migrate/samples/export-props-multiple-declarations/output.svelte
new file mode 100644
index 0000000000..bb16ea2ff9
--- /dev/null
+++ b/packages/svelte/tests/migrate/samples/export-props-multiple-declarations/output.svelte
@@ -0,0 +1,12 @@
+<script>
+	let b, d;
+	let e, g;
+	let {
+		a,
+		c,
+		f,
+		h
+	} = $props();
+
+	
+</script>
\ No newline at end of file

From 8de5605b6a5ffa436d6fb9be5991345477e09f73 Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Sun, 3 Nov 2024 14:36:11 +0100
Subject: [PATCH 006/159] fix: prevent migrated snippet from shadow snippet
 prop (#14127)

---
 .changeset/silent-tigers-lay.md               |  5 +++
 packages/svelte/src/compiler/migrate/index.js | 44 +++++++++++++++++++
 .../shadowed-forwarded-slot/input.svelte      | 15 +++++++
 .../shadowed-forwarded-slot/output.svelte     | 33 ++++++++++++++
 4 files changed, 97 insertions(+)
 create mode 100644 .changeset/silent-tigers-lay.md
 create mode 100644 packages/svelte/tests/migrate/samples/shadowed-forwarded-slot/input.svelte
 create mode 100644 packages/svelte/tests/migrate/samples/shadowed-forwarded-slot/output.svelte

diff --git a/.changeset/silent-tigers-lay.md b/.changeset/silent-tigers-lay.md
new file mode 100644
index 0000000000..8debfd7151
--- /dev/null
+++ b/.changeset/silent-tigers-lay.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: prevent migrated snippet from shadow snippet prop
diff --git a/packages/svelte/src/compiler/migrate/index.js b/packages/svelte/src/compiler/migrate/index.js
index 011d28d61a..3513098a20 100644
--- a/packages/svelte/src/compiler/migrate/index.js
+++ b/packages/svelte/src/compiler/migrate/index.js
@@ -168,6 +168,7 @@ export function migrate(source, { filename, use_ts } = {}) {
 			legacy_imports: new Set(),
 			script_insertions: new Set(),
 			derived_components: new Map(),
+			derived_conflicting_slots: new Map(),
 			derived_labeled_statements: new Set(),
 			has_svelte_self: false,
 			uses_ts:
@@ -199,6 +200,7 @@ export function migrate(source, { filename, use_ts } = {}) {
 		const need_script =
 			state.legacy_imports.size > 0 ||
 			state.derived_components.size > 0 ||
+			state.derived_conflicting_slots.size > 0 ||
 			state.script_insertions.size > 0 ||
 			state.props.length > 0 ||
 			analysis.uses_rest_props ||
@@ -365,6 +367,13 @@ export function migrate(source, { filename, use_ts } = {}) {
 			);
 		}
 
+		if (state.derived_conflicting_slots.size > 0) {
+			str.appendRight(
+				insertion_point,
+				`\n${indent}${[...state.derived_conflicting_slots.entries()].map(([name, init]) => `const ${name} = $derived(${init});`).join(`\n${indent}`)}\n`
+			);
+		}
+
 		if (state.props.length > 0 && state.analysis.accessors) {
 			str.appendRight(
 				insertion_point,
@@ -414,6 +423,7 @@ export function migrate(source, { filename, use_ts } = {}) {
  * 	legacy_imports: Set<string>;
  * 	script_insertions: Set<string>;
  *  derived_components: Map<string, string>;
+ *  derived_conflicting_slots: Map<string, string>;
  * 	derived_labeled_statements: Set<LabeledStatement>;
  *  has_svelte_self: boolean;
  *  uses_ts: boolean;
@@ -1133,6 +1143,7 @@ const template = {
 		let name = 'children';
 		let slot_name = 'default';
 		let slot_props = '{ ';
+		let aliased_slot_name;
 
 		for (const attr of node.attributes) {
 			if (attr.type === 'SpreadAttribute') {
@@ -1144,6 +1155,37 @@ const template = {
 
 				if (attr.name === 'name') {
 					slot_name = /** @type {any} */ (attr.value)[0].data;
+					// if some of the parents or this node itself har a slot
+					// attribute with the sane name of this slot
+					// we want to create a derived or the migrated snippet
+					// will shadow the slot prop
+					if (
+						path.some(
+							(parent) =>
+								(parent.type === 'RegularElement' ||
+									parent.type === 'SvelteElement' ||
+									parent.type === 'Component' ||
+									parent.type === 'SvelteComponent' ||
+									parent.type === 'SvelteFragment') &&
+								parent.attributes.some(
+									(attribute) =>
+										attribute.type === 'Attribute' &&
+										attribute.name === 'slot' &&
+										is_text_attribute(attribute) &&
+										attribute.value[0].data === slot_name
+								)
+						) ||
+						node.attributes.some(
+							(attribute) =>
+								attribute.type === 'Attribute' &&
+								attribute.name === 'slot' &&
+								is_text_attribute(attribute) &&
+								attribute.value[0].data === slot_name
+						)
+					) {
+						aliased_slot_name = `${slot_name}_render`;
+						state.derived_conflicting_slots.set(aliased_slot_name, slot_name);
+					}
 				} else {
 					const attr_value =
 						attr.value === true || Array.isArray(attr.value) ? attr.value : [attr.value];
@@ -1200,6 +1242,8 @@ const template = {
 			existing_prop.needs_refine_type = false;
 		}
 
+		name = aliased_slot_name ?? name;
+
 		if (node.fragment.nodes.length > 0) {
 			next();
 			state.str.update(
diff --git a/packages/svelte/tests/migrate/samples/shadowed-forwarded-slot/input.svelte b/packages/svelte/tests/migrate/samples/shadowed-forwarded-slot/input.svelte
new file mode 100644
index 0000000000..800ef2532c
--- /dev/null
+++ b/packages/svelte/tests/migrate/samples/shadowed-forwarded-slot/input.svelte
@@ -0,0 +1,15 @@
+{#if $$slots.label}
+	<slot name="label" />
+{/if}
+<MyInput>
+	<slot name="label" slot="label"/>
+</MyInput>
+<MyInput>
+	<div slot="label">
+		<MyComponent>
+			<div slot="label">
+				<slot name="label" />
+			</div>
+		</MyComponent>
+	</div>
+</MyInput>
\ No newline at end of file
diff --git a/packages/svelte/tests/migrate/samples/shadowed-forwarded-slot/output.svelte b/packages/svelte/tests/migrate/samples/shadowed-forwarded-slot/output.svelte
new file mode 100644
index 0000000000..3c763349c6
--- /dev/null
+++ b/packages/svelte/tests/migrate/samples/shadowed-forwarded-slot/output.svelte
@@ -0,0 +1,33 @@
+<script>
+	/**
+	 * @typedef {Object} Props
+	 * @property {import('svelte').Snippet} [label]
+	 */
+
+	/** @type {Props} */
+	let { label } = $props();
+	const label_render = $derived(label);
+
+</script>
+
+{#if label}
+	{@render label?.()}
+{/if}
+<MyInput>
+	{#snippet label()}
+		{@render label_render?.()}
+	{/snippet}
+</MyInput>
+<MyInput>
+	{#snippet label()}
+		<div >
+			<MyComponent>
+				{#snippet label()}
+						<div >
+						{@render label_render?.()}
+					</div>
+					{/snippet}
+			</MyComponent>
+		</div>
+	{/snippet}
+</MyInput>
\ No newline at end of file

From 551284ca2259d934d34b71a38071d85684bd6d4f Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Sun, 3 Nov 2024 15:04:52 +0100
Subject: [PATCH 007/159] fix: correctly infer `<a>` tag namespace (#14134)

`<a>` tags are valid in both the SVG and HTML namespace.  If there's no parent, we therefore have to look downwards to see if it's the parent of a SVG or HTML element.

fixes #7807
fixes #13793
---
 .changeset/modern-pets-punch.md               |  5 ++++
 .../src/compiler/phases/2-analyze/types.d.ts  |  4 +++
 .../2-analyze/visitors/RegularElement.js      | 13 ++++++++++
 .../2-analyze/visitors/shared/component.js    |  3 ++-
 .../html-namespace-infer-a-tag/_config.js     | 26 +++++++++++++++++++
 .../html-namespace-infer-a-tag/div.svelte     |  7 +++++
 .../html-namespace-infer-a-tag/main.svelte    | 24 +++++++++++++++++
 .../svg-namespace-infer-a-tag/_config.js      | 26 +++++++++++++++++++
 .../svg-namespace-infer-a-tag/main.svelte     | 24 +++++++++++++++++
 .../svg-namespace-infer-a-tag/svg.svelte      |  7 +++++
 10 files changed, 138 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/modern-pets-punch.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/html-namespace-infer-a-tag/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/html-namespace-infer-a-tag/div.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/html-namespace-infer-a-tag/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/svg-namespace-infer-a-tag/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/svg-namespace-infer-a-tag/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/svg-namespace-infer-a-tag/svg.svelte

diff --git a/.changeset/modern-pets-punch.md b/.changeset/modern-pets-punch.md
new file mode 100644
index 0000000000..981547e9e5
--- /dev/null
+++ b/.changeset/modern-pets-punch.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: correctly infer `<a>` tag namespace
diff --git a/packages/svelte/src/compiler/phases/2-analyze/types.d.ts b/packages/svelte/src/compiler/phases/2-analyze/types.d.ts
index 265f58130d..dedbe95ace 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/types.d.ts
+++ b/packages/svelte/src/compiler/phases/2-analyze/types.d.ts
@@ -9,6 +9,10 @@ export interface AnalysisState {
 	analysis: ComponentAnalysis;
 	options: ValidatedCompileOptions;
 	ast_type: 'instance' | 'template' | 'module';
+	/**
+	 * Tag name of the parent element. `null` if the parent is `svelte:element`, `#snippet`, a component or the root.
+	 * Parent doesn't necessarily mean direct path predecessor because there could be `#each`, `#if` etc in-between.
+	 */
 	parent_element: string | null;
 	has_props_rune: boolean;
 	/** Which slots the current parent component has */
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js
index 98bb1ca92a..60bd1dd0c5 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js
@@ -174,4 +174,17 @@ export function RegularElement(node, context) {
 	}
 
 	context.next({ ...context.state, parent_element: node.name });
+
+	// Special case: <a> tags are valid in both the SVG and HTML namespace.
+	// If there's no parent, look downwards to see if it's the parent of a SVG or HTML element.
+	if (node.name === 'a' && !context.state.parent_element) {
+		for (const child of node.fragment.nodes) {
+			if (child.type === 'RegularElement') {
+				if (child.metadata.svg && child.name !== 'svg') {
+					node.metadata.svg = true;
+					break;
+				}
+			}
+		}
+	}
 }
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/component.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/component.js
index 73b051a848..9a432341a0 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/component.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/component.js
@@ -1,5 +1,5 @@
 /** @import { AST } from '#compiler' */
-/** @import { Context } from '../../types' */
+/** @import { AnalysisState, Context } from '../../types' */
 import * as e from '../../../../errors.js';
 import { get_attribute_expression, is_expression_attribute } from '../../../../utils/ast.js';
 import { determine_slot } from '../../../../utils/slot.js';
@@ -96,6 +96,7 @@ export function visit_component(node, context) {
 	const component_slots = new Set();
 
 	for (const slot_name in nodes) {
+		/** @type {AnalysisState} */
 		const state = {
 			...context.state,
 			scope: node.metadata.scopes[slot_name],
diff --git a/packages/svelte/tests/runtime-runes/samples/html-namespace-infer-a-tag/_config.js b/packages/svelte/tests/runtime-runes/samples/html-namespace-infer-a-tag/_config.js
new file mode 100644
index 0000000000..982e3a3d18
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/html-namespace-infer-a-tag/_config.js
@@ -0,0 +1,26 @@
+import { test } from '../../test';
+
+export default test({
+	html: `
+	<div><a><span>Hello</span></a></div>
+	<div><a><span>Hello</span></a></div>
+	<div><a><span>Hello</span></a></div>
+`,
+	test({ assert, target }) {
+		const div = target.querySelectorAll('div');
+		const a = target.querySelectorAll('a');
+		const span = target.querySelectorAll('span');
+
+		for (const element of div) {
+			assert.equal(element.namespaceURI, 'http://www.w3.org/1999/xhtml');
+		}
+
+		for (const element of a) {
+			assert.equal(element.namespaceURI, 'http://www.w3.org/1999/xhtml');
+		}
+
+		for (const element of span) {
+			assert.equal(element.namespaceURI, 'http://www.w3.org/1999/xhtml');
+		}
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/html-namespace-infer-a-tag/div.svelte b/packages/svelte/tests/runtime-runes/samples/html-namespace-infer-a-tag/div.svelte
new file mode 100644
index 0000000000..d3d283c634
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/html-namespace-infer-a-tag/div.svelte
@@ -0,0 +1,7 @@
+<script>
+    let { children } = $props();
+</script>
+
+<div>
+    {@render children()}
+</div>
diff --git a/packages/svelte/tests/runtime-runes/samples/html-namespace-infer-a-tag/main.svelte b/packages/svelte/tests/runtime-runes/samples/html-namespace-infer-a-tag/main.svelte
new file mode 100644
index 0000000000..e5d9d78860
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/html-namespace-infer-a-tag/main.svelte
@@ -0,0 +1,24 @@
+<script>
+  import Div from './div.svelte';
+</script>
+
+<div>
+	<a>
+		<span>Hello</span>
+	</a>
+</div>
+
+<div>
+	{#snippet test()}
+		<a>
+			<span>Hello</span>
+		</a>
+	{/snippet}
+	{@render test()}
+</div>
+
+<Div>
+  <a>
+    <span>Hello</span>
+  </a>
+</Div>
diff --git a/packages/svelte/tests/runtime-runes/samples/svg-namespace-infer-a-tag/_config.js b/packages/svelte/tests/runtime-runes/samples/svg-namespace-infer-a-tag/_config.js
new file mode 100644
index 0000000000..86309a1c86
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/svg-namespace-infer-a-tag/_config.js
@@ -0,0 +1,26 @@
+import { test } from '../../test';
+
+export default test({
+	html: `
+	<svg><a><text>Hello</text></a></svg>
+	<svg><a><text>Hello</text></a></svg>
+	<svg><a><text>Hello</text></a></svg>
+`,
+	test({ assert, target }) {
+		const svg = target.querySelectorAll('svg');
+		const a = target.querySelectorAll('a');
+		const text = target.querySelectorAll('text');
+
+		for (const element of svg) {
+			assert.equal(element.namespaceURI, 'http://www.w3.org/2000/svg');
+		}
+
+		for (const element of a) {
+			assert.equal(element.namespaceURI, 'http://www.w3.org/2000/svg');
+		}
+
+		for (const element of text) {
+			assert.equal(element.namespaceURI, 'http://www.w3.org/2000/svg');
+		}
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/svg-namespace-infer-a-tag/main.svelte b/packages/svelte/tests/runtime-runes/samples/svg-namespace-infer-a-tag/main.svelte
new file mode 100644
index 0000000000..6d3a658c36
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/svg-namespace-infer-a-tag/main.svelte
@@ -0,0 +1,24 @@
+<script>
+  import Svg from './svg.svelte';
+</script>
+
+<svg>
+	<a>
+		<text>Hello</text>
+	</a>
+</svg>
+
+<svg>
+	{#snippet test()}
+		<a>
+			<text>Hello</text>
+		</a>
+	{/snippet}
+	{@render test()}
+</svg>
+
+<Svg>
+  <a>
+    <text>Hello</text>
+  </a>
+</Svg>
diff --git a/packages/svelte/tests/runtime-runes/samples/svg-namespace-infer-a-tag/svg.svelte b/packages/svelte/tests/runtime-runes/samples/svg-namespace-infer-a-tag/svg.svelte
new file mode 100644
index 0000000000..b5ca463293
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/svg-namespace-infer-a-tag/svg.svelte
@@ -0,0 +1,7 @@
+<script>
+    let { children } = $props();
+</script>
+
+<svg>
+    {@render children()}
+</svg>

From 8731f4f780da8c439e6b1abfcce579a3c07efb48 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Mon, 4 Nov 2024 17:32:50 +0100
Subject: [PATCH 008/159] docs: note what the value of `this` can be on
 `svelte:element` (#14117)

closes #7575
---
 documentation/docs/05-special-elements/05-svelte-element.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/documentation/docs/05-special-elements/05-svelte-element.md b/documentation/docs/05-special-elements/05-svelte-element.md
index 17ce06799c..ef7dc32066 100644
--- a/documentation/docs/05-special-elements/05-svelte-element.md
+++ b/documentation/docs/05-special-elements/05-svelte-element.md
@@ -29,3 +29,5 @@ Svelte tries its best to infer the correct namespace from the element's surround
 ```svelte
 <svelte:element this={tag} xmlns="http://www.w3.org/2000/svg" />
 ```
+
+`this` needs to be a valid DOM element tag, things like `#text` or `svelte:head` will not work.

From c6904e892f9560f97573d4528cdcb6ea2f209f32 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 4 Nov 2024 15:08:15 -0500
Subject: [PATCH 009/159] use pull_request_target (#14148)

---
 .github/workflows/docs-preview-create-request.yml | 2 +-
 .github/workflows/docs-preview-delete-request.yml | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/docs-preview-create-request.yml b/.github/workflows/docs-preview-create-request.yml
index 95ea820928..f57766dc36 100644
--- a/.github/workflows/docs-preview-create-request.yml
+++ b/.github/workflows/docs-preview-create-request.yml
@@ -2,7 +2,7 @@
 name: Docs preview create request
 
 on:
-  pull_request:
+  pull_request_target:
     branches:
       - main
 
diff --git a/.github/workflows/docs-preview-delete-request.yml b/.github/workflows/docs-preview-delete-request.yml
index d14704107d..4eb0e996a6 100644
--- a/.github/workflows/docs-preview-delete-request.yml
+++ b/.github/workflows/docs-preview-delete-request.yml
@@ -2,7 +2,7 @@
 name: Docs preview delete request
 
 on:
-  pull_request:
+  pull_request_target:
     branches:
       - main
     types: [closed]

From 87d83ffa39802ec0d6a798f399ab6790f6c19cd6 Mon Sep 17 00:00:00 2001
From: Christoph Sanz <22081130+christophsanz@users.noreply.github.com>
Date: Mon, 4 Nov 2024 22:09:09 +0100
Subject: [PATCH 010/159] Add same note as in tutorial to doc. (#14136)

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 documentation/docs/03-template-syntax/11-bind.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/documentation/docs/03-template-syntax/11-bind.md b/documentation/docs/03-template-syntax/11-bind.md
index 4fe3e7c4a8..7dd03a6b04 100644
--- a/documentation/docs/03-template-syntax/11-bind.md
+++ b/documentation/docs/03-template-syntax/11-bind.md
@@ -223,6 +223,8 @@ All visible elements have the following readonly bindings, measured with a `Resi
 </div>
 ```
 
+> [!NOTE] `display: inline` elements do not have a width or height (except for elements with 'intrinsic' dimensions, like `<img>` and `<canvas>`), and cannot be observed with a `ResizeObserver`. You will need to change the `display` style of these elements to something else, such as `inline-block`.
+
 ## bind:this
 
 ```svelte

From 57e27ae90e19df103a01a9a56117bf2402bb029a Mon Sep 17 00:00:00 2001
From: wackbyte <wackbyte@protonmail.com>
Date: Mon, 4 Nov 2024 16:19:53 -0500
Subject: [PATCH 011/159] fix: only output the key for each_key_duplicate
 (#14147)

Fixes #14146
---
 .changeset/short-lions-search.md                | 5 +++++
 packages/svelte/src/internal/client/validate.js | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/short-lions-search.md

diff --git a/.changeset/short-lions-search.md b/.changeset/short-lions-search.md
new file mode 100644
index 0000000000..ed3abdc053
--- /dev/null
+++ b/.changeset/short-lions-search.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: only output the key for each_key_duplicate
diff --git a/packages/svelte/src/internal/client/validate.js b/packages/svelte/src/internal/client/validate.js
index c3b1821947..eddcb69d9e 100644
--- a/packages/svelte/src/internal/client/validate.js
+++ b/packages/svelte/src/internal/client/validate.js
@@ -37,7 +37,7 @@ export function validate_each_keys(collection, key_fn) {
 				const b = String(i);
 
 				/** @type {string | null} */
-				let k = String(array[i]);
+				let k = String(key);
 				if (k.startsWith('[object ')) k = null;
 
 				e.each_key_duplicate(a, b, k);

From 7dbe812fc92ad87e30a91ddb3270261964531c54 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Mon, 4 Nov 2024 22:49:54 +0100
Subject: [PATCH 012/159] fix: ensure non-matching elements are scoped for
 `:not(...)` selector (#13999)

If the contents of a `:not` selector don't match, then it's actually a match for `:not` because it's inverted. Therefore, we need to scope such elements. We're also making sure that contents of `:not` that never match actually count as a used (because the result is negated), and as such the contents of `:not` that always match are actually marked as unused.

Fixes #13974
---
 .changeset/dirty-parrots-smell.md             |  5 ++
 .../phases/2-analyze/css/css-prune.js         | 89 ++++++++++++-------
 .../samples/not-selector-global/_config.js    | 20 +++++
 .../samples/not-selector-global/expected.css  | 19 ++++
 .../samples/not-selector-global/expected.html |  1 +
 .../samples/not-selector-global/input.svelte  | 23 +++++
 .../_config.js                                |  5 ++
 .../expected.css                              |  4 +
 .../expected.html                             |  1 +
 .../input.svelte                              |  8 ++
 .../tests/css/samples/not-selector/_config.js | 46 ++++------
 .../css/samples/not-selector/expected.css     | 21 ++---
 .../css/samples/not-selector/expected.html    |  1 +
 .../css/samples/not-selector/input.svelte     | 19 ++--
 14 files changed, 172 insertions(+), 90 deletions(-)
 create mode 100644 .changeset/dirty-parrots-smell.md
 create mode 100644 packages/svelte/tests/css/samples/not-selector-global/_config.js
 create mode 100644 packages/svelte/tests/css/samples/not-selector-global/expected.css
 create mode 100644 packages/svelte/tests/css/samples/not-selector-global/expected.html
 create mode 100644 packages/svelte/tests/css/samples/not-selector-global/input.svelte
 create mode 100644 packages/svelte/tests/css/samples/not-selector-hash-on-right-elements/_config.js
 create mode 100644 packages/svelte/tests/css/samples/not-selector-hash-on-right-elements/expected.css
 create mode 100644 packages/svelte/tests/css/samples/not-selector-hash-on-right-elements/expected.html
 create mode 100644 packages/svelte/tests/css/samples/not-selector-hash-on-right-elements/input.svelte
 create mode 100644 packages/svelte/tests/css/samples/not-selector/expected.html

diff --git a/.changeset/dirty-parrots-smell.md b/.changeset/dirty-parrots-smell.md
new file mode 100644
index 0000000000..50864d20a4
--- /dev/null
+++ b/.changeset/dirty-parrots-smell.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ensure non-matching elements are scoped for `:not(...)` selector
diff --git a/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js b/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js
index f71a860958..fae89f11ed 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js
@@ -10,6 +10,7 @@ import { get_attribute_chunks, is_text_attribute } from '../../../utils/ast.js';
  *   stylesheet: Compiler.Css.StyleSheet;
  *   element: Compiler.AST.RegularElement | Compiler.AST.SvelteElement;
  *   from_render_tag: boolean;
+ *   inside_not: boolean;
  * }} State
  */
 /** @typedef {NODE_PROBABLY_EXISTS | NODE_DEFINITELY_EXISTS} NodeExistsValue */
@@ -61,9 +62,13 @@ export function prune(stylesheet, element) {
 		const parent = get_element_parent(element);
 		if (!parent) return;
 
-		walk(stylesheet, { stylesheet, element: parent, from_render_tag: true }, visitors);
+		walk(
+			stylesheet,
+			{ stylesheet, element: parent, from_render_tag: true, inside_not: false },
+			visitors
+		);
 	} else {
-		walk(stylesheet, { stylesheet, element, from_render_tag: false }, visitors);
+		walk(stylesheet, { stylesheet, element, from_render_tag: false, inside_not: false }, visitors);
 	}
 }
 
@@ -127,7 +132,7 @@ const visitors = {
 							selectors_to_check,
 							/** @type {Compiler.Css.Rule} */ (node.metadata.rule),
 							element,
-							context.state.stylesheet
+							context.state
 						)
 					) {
 						mark(inner, element);
@@ -143,7 +148,7 @@ const visitors = {
 				selectors,
 				/** @type {Compiler.Css.Rule} */ (node.metadata.rule),
 				context.state.element,
-				context.state.stylesheet
+				context.state
 			)
 		) {
 			mark(inner, context.state.element);
@@ -188,10 +193,10 @@ function truncate(node) {
  * @param {Compiler.Css.RelativeSelector[]} relative_selectors
  * @param {Compiler.Css.Rule} rule
  * @param {Compiler.AST.RegularElement | Compiler.AST.SvelteElement} element
- * @param {Compiler.Css.StyleSheet} stylesheet
+ * @param {State} state
  * @returns {boolean}
  */
-function apply_selector(relative_selectors, rule, element, stylesheet) {
+function apply_selector(relative_selectors, rule, element, state) {
 	const parent_selectors = relative_selectors.slice();
 	const relative_selector = parent_selectors.pop();
 
@@ -201,7 +206,7 @@ function apply_selector(relative_selectors, rule, element, stylesheet) {
 		relative_selector,
 		rule,
 		element,
-		stylesheet
+		state
 	);
 
 	if (!possible_match) {
@@ -215,14 +220,14 @@ function apply_selector(relative_selectors, rule, element, stylesheet) {
 			parent_selectors,
 			rule,
 			element,
-			stylesheet
+			state
 		);
 	}
 
 	// if this is the left-most non-global selector, mark it — we want
 	// `x y z {...}` to become `x.blah y z.blah {...}`
 	const parent = parent_selectors[parent_selectors.length - 1];
-	if (!parent || is_global(parent, rule)) {
+	if (!state.inside_not && (!parent || is_global(parent, rule))) {
 		mark(relative_selector, element);
 	}
 
@@ -235,17 +240,10 @@ function apply_selector(relative_selectors, rule, element, stylesheet) {
  * @param {Compiler.Css.RelativeSelector[]} parent_selectors
  * @param {Compiler.Css.Rule} rule
  * @param {Compiler.AST.RegularElement | Compiler.AST.SvelteElement} element
- * @param {Compiler.Css.StyleSheet} stylesheet
+ * @param {State} state
  * @returns {boolean}
  */
-function apply_combinator(
-	combinator,
-	relative_selector,
-	parent_selectors,
-	rule,
-	element,
-	stylesheet
-) {
+function apply_combinator(combinator, relative_selector, parent_selectors, rule, element, state) {
 	const name = combinator.name;
 
 	switch (name) {
@@ -269,9 +267,9 @@ function apply_combinator(
 				}
 
 				if (parent.type === 'RegularElement' || parent.type === 'SvelteElement') {
-					if (apply_selector(parent_selectors, rule, parent, stylesheet)) {
+					if (apply_selector(parent_selectors, rule, parent, state)) {
 						// TODO the `name === ' '` causes false positives, but removing it causes false negatives...
-						if (name === ' ' || crossed_component_boundary) {
+						if (!state.inside_not && (name === ' ' || crossed_component_boundary)) {
 							mark(parent_selectors[parent_selectors.length - 1], parent);
 						}
 
@@ -297,11 +295,15 @@ function apply_combinator(
 				if (possible_sibling.type === 'RenderTag' || possible_sibling.type === 'SlotElement') {
 					// `{@render foo()}<p>foo</p>` with `:global(.x) + p` is a match
 					if (parent_selectors.length === 1 && parent_selectors[0].metadata.is_global) {
-						mark(relative_selector, element);
+						if (!state.inside_not) {
+							mark(relative_selector, element);
+						}
 						sibling_matched = true;
 					}
-				} else if (apply_selector(parent_selectors, rule, possible_sibling, stylesheet)) {
-					mark(relative_selector, element);
+				} else if (apply_selector(parent_selectors, rule, possible_sibling, state)) {
+					if (!state.inside_not) {
+						mark(relative_selector, element);
+					}
 					sibling_matched = true;
 				}
 			}
@@ -381,10 +383,10 @@ const regex_backslash_and_following_character = /\\(.)/g;
  * @param {Compiler.Css.RelativeSelector} relative_selector
  * @param {Compiler.Css.Rule} rule
  * @param {Compiler.AST.RegularElement | Compiler.AST.SvelteElement} element
- * @param {Compiler.Css.StyleSheet} stylesheet
+ * @param {State} state
  * @returns {boolean  }
  */
-function relative_selector_might_apply_to_node(relative_selector, rule, element, stylesheet) {
+function relative_selector_might_apply_to_node(relative_selector, rule, element, state) {
 	// Sort :has(...) selectors in one bucket and everything else into another
 	const has_selectors = [];
 	const other_selectors = [];
@@ -458,7 +460,7 @@ function relative_selector_might_apply_to_node(relative_selector, rule, element,
 					if (
 						selectors.length === 0 /* is :global(...) */ ||
 						(element.metadata.scoped && selector_matched) ||
-						apply_selector(selectors, rule, element, stylesheet)
+						apply_selector(selectors, rule, element, state)
 					) {
 						complex_selector.metadata.used = true;
 						selector_matched = matched = true;
@@ -504,7 +506,7 @@ function relative_selector_might_apply_to_node(relative_selector, rule, element,
 				) {
 					const args = selector.args;
 					const complex_selector = args.children[0];
-					return apply_selector(complex_selector.children, rule, element, stylesheet);
+					return apply_selector(complex_selector.children, rule, element, state);
 				}
 
 				// We came across a :global, everything beyond it is global and therefore a potential match
@@ -515,12 +517,37 @@ function relative_selector_might_apply_to_node(relative_selector, rule, element,
 
 					for (const complex_selector of selector.args.children) {
 						const relative = truncate(complex_selector);
-						if (
-							relative.length === 0 /* is :global(...) */ ||
-							apply_selector(relative, rule, element, stylesheet)
+						const is_global = relative.length === 0;
+
+						if (is_global) {
+							complex_selector.metadata.used = true;
+							matched = true;
+						} else if (name !== 'not' && apply_selector(relative, rule, element, state)) {
+							complex_selector.metadata.used = true;
+							matched = true;
+						} else if (
+							name === 'not' &&
+							!apply_selector(relative, rule, element, { ...state, inside_not: true })
 						) {
+							// For `:not(...)` we gotta do the inverse: If it did not match, mark the element and possibly
+							// everything above (if the selector is written is a such) as scoped (because they matched by not matching).
+							element.metadata.scoped = true;
 							complex_selector.metadata.used = true;
 							matched = true;
+
+							for (const r of relative) {
+								r.metadata.scoped = true;
+							}
+
+							// bar:not(foo bar) means that foo is an ancestor of bar
+							if (complex_selector.children.length > 1) {
+								/** @type {Compiler.AST.RegularElement | Compiler.AST.SvelteElement | null} */
+								let el = get_element_parent(element);
+								while (el) {
+									el.metadata.scoped = true;
+									el = get_element_parent(el);
+								}
+							}
 						} else if (complex_selector.children.length > 1 && (name == 'is' || name == 'where')) {
 							// foo :is(bar baz) can also mean that bar is an ancestor of foo, and baz a descendant.
 							// We can't fully check if that actually matches with our current algorithm, so we just assume it does.
@@ -618,7 +645,7 @@ function relative_selector_might_apply_to_node(relative_selector, rule, element,
 				const parent = /** @type {Compiler.Css.Rule} */ (rule.metadata.parent_rule);
 
 				for (const complex_selector of parent.prelude.children) {
-					if (apply_selector(truncate(complex_selector), parent, element, stylesheet)) {
+					if (apply_selector(truncate(complex_selector), parent, element, state)) {
 						complex_selector.metadata.used = true;
 						matched = true;
 					}
diff --git a/packages/svelte/tests/css/samples/not-selector-global/_config.js b/packages/svelte/tests/css/samples/not-selector-global/_config.js
new file mode 100644
index 0000000000..2776ac227a
--- /dev/null
+++ b/packages/svelte/tests/css/samples/not-selector-global/_config.js
@@ -0,0 +1,20 @@
+import { test } from '../../test';
+
+export default test({
+	warnings: [
+		{
+			code: 'css_unused_selector',
+			message: 'Unused CSS selector ":global(.x) :not(p)"',
+			start: {
+				line: 14,
+				column: 1,
+				character: 197
+			},
+			end: {
+				line: 14,
+				column: 20,
+				character: 216
+			}
+		}
+	]
+});
diff --git a/packages/svelte/tests/css/samples/not-selector-global/expected.css b/packages/svelte/tests/css/samples/not-selector-global/expected.css
new file mode 100644
index 0000000000..f90edd0c88
--- /dev/null
+++ b/packages/svelte/tests/css/samples/not-selector-global/expected.css
@@ -0,0 +1,19 @@
+
+	.svelte-xyz:not(.foo) {
+		color: green;
+	}
+	.svelte-xyz:not(.foo:where(.svelte-xyz)):not(.unused) {
+		color: green;
+	}
+	.x:not(.foo.svelte-xyz) {
+		color: green;
+	}
+	/* (unused) :global(.x) :not(p) {
+		color: red;
+	}*/
+	.x:not(p.svelte-xyz) {
+		color: red; /* TODO would be nice to prune this one day */
+	}
+	.x .svelte-xyz:not(.unused:where(.svelte-xyz)) {
+		color: green;
+	}
diff --git a/packages/svelte/tests/css/samples/not-selector-global/expected.html b/packages/svelte/tests/css/samples/not-selector-global/expected.html
new file mode 100644
index 0000000000..b4834bb818
--- /dev/null
+++ b/packages/svelte/tests/css/samples/not-selector-global/expected.html
@@ -0,0 +1 @@
+<p class="foo svelte-xyz">foo</p> <p class="bar svelte-xyz">bar</p>
\ No newline at end of file
diff --git a/packages/svelte/tests/css/samples/not-selector-global/input.svelte b/packages/svelte/tests/css/samples/not-selector-global/input.svelte
new file mode 100644
index 0000000000..578052d943
--- /dev/null
+++ b/packages/svelte/tests/css/samples/not-selector-global/input.svelte
@@ -0,0 +1,23 @@
+<p class="foo">foo</p>
+<p class="bar">bar</p>
+
+<style>
+	:not(:global(.foo)) {
+		color: green;
+	}
+	:not(.foo):not(:global(.unused)) {
+		color: green;
+	}
+	:global(.x):not(.foo) {
+		color: green;
+	}
+	:global(.x) :not(p) {
+		color: red;
+	}
+	:global(.x):not(p) {
+		color: red; /* TODO would be nice to prune this one day */
+	}
+	:global(.x) :not(.unused) {
+		color: green;
+	}
+</style>
\ No newline at end of file
diff --git a/packages/svelte/tests/css/samples/not-selector-hash-on-right-elements/_config.js b/packages/svelte/tests/css/samples/not-selector-hash-on-right-elements/_config.js
new file mode 100644
index 0000000000..292c6c49ac
--- /dev/null
+++ b/packages/svelte/tests/css/samples/not-selector-hash-on-right-elements/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	warnings: []
+});
diff --git a/packages/svelte/tests/css/samples/not-selector-hash-on-right-elements/expected.css b/packages/svelte/tests/css/samples/not-selector-hash-on-right-elements/expected.css
new file mode 100644
index 0000000000..8fe09de6dc
--- /dev/null
+++ b/packages/svelte/tests/css/samples/not-selector-hash-on-right-elements/expected.css
@@ -0,0 +1,4 @@
+
+	.svelte-xyz:not(.bar:where(.svelte-xyz)) {
+		color: green;
+	}
diff --git a/packages/svelte/tests/css/samples/not-selector-hash-on-right-elements/expected.html b/packages/svelte/tests/css/samples/not-selector-hash-on-right-elements/expected.html
new file mode 100644
index 0000000000..fa4ca95c60
--- /dev/null
+++ b/packages/svelte/tests/css/samples/not-selector-hash-on-right-elements/expected.html
@@ -0,0 +1 @@
+<p class="foo svelte-xyz">foo</p> <p class="bar">bar</p>
\ No newline at end of file
diff --git a/packages/svelte/tests/css/samples/not-selector-hash-on-right-elements/input.svelte b/packages/svelte/tests/css/samples/not-selector-hash-on-right-elements/input.svelte
new file mode 100644
index 0000000000..6599a21ca6
--- /dev/null
+++ b/packages/svelte/tests/css/samples/not-selector-hash-on-right-elements/input.svelte
@@ -0,0 +1,8 @@
+<p class="foo">foo</p>
+<p class="bar">bar</p>
+
+<style>
+	:not(.bar) {
+		color: green;
+	}
+</style>
\ No newline at end of file
diff --git a/packages/svelte/tests/css/samples/not-selector/_config.js b/packages/svelte/tests/css/samples/not-selector/_config.js
index 6ab49a8809..27b4f91a6a 100644
--- a/packages/svelte/tests/css/samples/not-selector/_config.js
+++ b/packages/svelte/tests/css/samples/not-selector/_config.js
@@ -4,58 +4,44 @@ export default test({
 	warnings: [
 		{
 			code: 'css_unused_selector',
-			message: 'Unused CSS selector ":not(.unused)"',
+			message: 'Unused CSS selector ":not(p)"',
 			start: {
-				line: 8,
+				line: 11,
 				column: 1,
-				character: 89
+				character: 125
 			},
 			end: {
-				line: 8,
-				column: 14,
-				character: 102
-			}
-		},
-		{
-			code: 'css_unused_selector',
-			message: 'Unused CSS selector ":not(.foo):not(.unused)"',
-			start: {
-				line: 18,
-				column: 1,
-				character: 221
-			},
-			end: {
-				line: 18,
-				column: 24,
-				character: 244
+				line: 11,
+				column: 8,
+				character: 132
 			}
 		},
 		{
 			code: 'css_unused_selector',
 			message: 'Unused CSS selector "p :not(.foo)"',
 			start: {
-				line: 25,
+				line: 22,
 				column: 1,
-				character: 300
+				character: 235
 			},
 			end: {
-				line: 25,
+				line: 22,
 				column: 13,
-				character: 312
+				character: 247
 			}
 		},
 		{
 			code: 'css_unused_selector',
-			message: 'Unused CSS selector ":global(.x) :not(.unused)"',
+			message: 'Unused CSS selector "p :not(.unused)"',
 			start: {
-				line: 34,
+				line: 25,
 				column: 1,
-				character: 469
+				character: 268
 			},
 			end: {
-				line: 34,
-				column: 26,
-				character: 494
+				line: 25,
+				column: 16,
+				character: 283
 			}
 		}
 	]
diff --git a/packages/svelte/tests/css/samples/not-selector/expected.css b/packages/svelte/tests/css/samples/not-selector/expected.css
index 45e9ad69c0..b4d51bf269 100644
--- a/packages/svelte/tests/css/samples/not-selector/expected.css
+++ b/packages/svelte/tests/css/samples/not-selector/expected.css
@@ -2,19 +2,16 @@
 	.svelte-xyz:not(.foo:where(.svelte-xyz)) {
 		color: green;
 	}
-	/* (unused) :not(.unused) {
-		color: red;
-	}*/
-	.svelte-xyz:not(.foo) {
+	.svelte-xyz:not(.unused:where(.svelte-xyz)) {
 		color: green;
 	}
+	/* (unused) :not(p) {
+		color: red;
+	}*/
 
-	.svelte-xyz:not(.foo:where(.svelte-xyz)):not(.unused) {
+	.svelte-xyz:not(.foo:where(.svelte-xyz)):not(.unused:where(.svelte-xyz)) {
 		color: green;
 	}
-	/* (unused) :not(.foo):not(.unused) {
-		color: red;
-	}*/
 
 	p.svelte-xyz:not(.foo:where(.svelte-xyz)) {
 		color: green;
@@ -22,12 +19,6 @@
 	/* (unused) p :not(.foo) {
 		color: red;
 	}*/
-	.x:not(.foo.svelte-xyz) {
-		color: green;
-	}
-	.x:not(.unused.svelte-xyz) {
-		color: red; /* TODO would be nice to prune this one day */
-	}
-	/* (unused) :global(.x) :not(.unused) {
+	/* (unused) p :not(.unused) {
 		color: red;
 	}*/
diff --git a/packages/svelte/tests/css/samples/not-selector/expected.html b/packages/svelte/tests/css/samples/not-selector/expected.html
new file mode 100644
index 0000000000..b4834bb818
--- /dev/null
+++ b/packages/svelte/tests/css/samples/not-selector/expected.html
@@ -0,0 +1 @@
+<p class="foo svelte-xyz">foo</p> <p class="bar svelte-xyz">bar</p>
\ No newline at end of file
diff --git a/packages/svelte/tests/css/samples/not-selector/input.svelte b/packages/svelte/tests/css/samples/not-selector/input.svelte
index 57d062cf49..a0e72c7be8 100644
--- a/packages/svelte/tests/css/samples/not-selector/input.svelte
+++ b/packages/svelte/tests/css/samples/not-selector/input.svelte
@@ -6,17 +6,14 @@
 		color: green;
 	}
 	:not(.unused) {
-		color: red;
-	}
-	:not(:global(.foo)) {
 		color: green;
 	}
-
-	:not(.foo):not(:global(.unused)) {
-		color: green;
+	:not(p) {
+		color: red;
 	}
+
 	:not(.foo):not(.unused) {
-		color: red;
+		color: green;
 	}
 
 	p:not(.foo) {
@@ -25,13 +22,7 @@
 	p :not(.foo) {
 		color: red;
 	}
-	:global(.x):not(.foo) {
-		color: green;
-	}
-	:global(.x):not(.unused) {
-		color: red; /* TODO would be nice to prune this one day */
-	}
-	:global(.x) :not(.unused) {
+	p :not(.unused) {
 		color: red;
 	}
 </style>
\ No newline at end of file

From e6dd871819a5da9a749e7e0f015a774be8eb5ee3 Mon Sep 17 00:00:00 2001
From: Gonzalo Ruiz <rgon@outlook.com>
Date: Mon, 4 Nov 2024 23:31:36 +0100
Subject: [PATCH 013/159] fix: ensure migrate keeps inline/trailing comments in
 $props type definition and produces non-broken code (#14143)

* feat[sv migrate]: keep inline/trailing comments when migrating export let types to type definition

* test: add tests for inline comment migration

* chore: add changeset

* fix: migrate trailing multiline comment parsing no longer results in broken code, FIXES PR #14143#issuecomment-2455702689

* test: add migrate test with same-line trailing multiline comments and same-line leading multiline comments

* chore: add changeset

* fix: lint

---------

Co-authored-by: Gonzalo Ruiz <rgon@rgon.es>
Co-authored-by: paoloricciuti <ricciutipaolo@gmail.com>
---
 .changeset/mean-seas-give.md                  |  5 ++
 .changeset/purple-owls-hug.md                 |  5 ++
 packages/svelte/src/compiler/migrate/index.js | 72 +++++++++++++++++--
 .../samples/jsdoc-with-comments/input.svelte  | 17 ++++-
 .../samples/jsdoc-with-comments/output.svelte | 16 ++++-
 .../migrate/samples/props-ts/input.svelte     | 10 +++
 .../migrate/samples/props-ts/output.svelte    | 20 +++++-
 7 files changed, 134 insertions(+), 11 deletions(-)
 create mode 100644 .changeset/mean-seas-give.md
 create mode 100644 .changeset/purple-owls-hug.md

diff --git a/.changeset/mean-seas-give.md b/.changeset/mean-seas-give.md
new file mode 100644
index 0000000000..0c16ac6d55
--- /dev/null
+++ b/.changeset/mean-seas-give.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ensure trailing multiline comments on props produce correct code (#14143#issuecomment-2455702689)
diff --git a/.changeset/purple-owls-hug.md b/.changeset/purple-owls-hug.md
new file mode 100644
index 0000000000..f3dcb0a5e3
--- /dev/null
+++ b/.changeset/purple-owls-hug.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ensure migrate keeps inline/trailing comments in $props type definition
diff --git a/packages/svelte/src/compiler/migrate/index.js b/packages/svelte/src/compiler/migrate/index.js
index 3513098a20..8e8670c824 100644
--- a/packages/svelte/src/compiler/migrate/index.js
+++ b/packages/svelte/src/compiler/migrate/index.js
@@ -279,7 +279,7 @@ export function migrate(source, { filename, use_ts } = {}) {
 						type = `interface ${type_name} {${newline_separator}${state.props
 							.map((prop) => {
 								const comment = prop.comment ? `${prop.comment}${newline_separator}` : '';
-								return `${comment}${prop.exported}${prop.optional ? '?' : ''}: ${prop.type};`;
+								return `${comment}${prop.exported}${prop.optional ? '?' : ''}: ${prop.type};${prop.trailing_comment ? ' ' + prop.trailing_comment : ''}`;
 							})
 							.join(newline_separator)}`;
 						if (analysis.uses_props || analysis.uses_rest_props) {
@@ -289,7 +289,7 @@ export function migrate(source, { filename, use_ts } = {}) {
 					} else {
 						type = `/**\n${indent} * @typedef {Object} ${type_name}${state.props
 							.map((prop) => {
-								return `\n${indent} * @property {${prop.type}} ${prop.optional ? `[${prop.exported}]` : prop.exported}${prop.comment ? ` - ${prop.comment}` : ''}`;
+								return `\n${indent} * @property {${prop.type}} ${prop.optional ? `[${prop.exported}]` : prop.exported}${prop.comment ? ` - ${prop.comment}` : ''}${prop.trailing_comment ? ` - ${prop.trailing_comment.trim()}` : ''}`;
 							})
 							.join(``)}\n${indent} */`;
 					}
@@ -414,7 +414,7 @@ export function migrate(source, { filename, use_ts } = {}) {
  *  analysis: ComponentAnalysis;
  *  filename?: string;
  *  indent: string;
- *  props: Array<{ local: string; exported: string; init: string; bindable: boolean; slot_name?: string; optional: boolean; type: string; comment?: string; type_only?: boolean; needs_refine_type?: boolean; }>;
+ *  props: Array<{ local: string; exported: string; init: string; bindable: boolean; slot_name?: string; optional: boolean; type: string; comment?: string; trailing_comment?: string; type_only?: boolean; needs_refine_type?: boolean; }>;
  *  props_insertion_point: number;
  *  has_props_rune: boolean;
  *  has_type_or_fallback: boolean;
@@ -1497,13 +1497,28 @@ function extract_type_and_comment(declarator, state, path) {
 		str.update(comment_start, comment_end, '');
 	}
 
+	// Find trailing comments
+	const trailing_comment_node = /** @type {Node} */ (parent)?.trailingComments?.at(0);
+	const trailing_comment_start = /** @type {any} */ (trailing_comment_node)?.start;
+	const trailing_comment_end = /** @type {any} */ (trailing_comment_node)?.end;
+	let trailing_comment =
+		trailing_comment_node && str.original.substring(trailing_comment_start, trailing_comment_end);
+
+	if (trailing_comment_node) {
+		str.update(trailing_comment_start, trailing_comment_end, '');
+	}
+
 	if (declarator.id.typeAnnotation) {
 		state.has_type_or_fallback = true;
 		let start = declarator.id.typeAnnotation.start + 1; // skip the colon
 		while (str.original[start] === ' ') {
 			start++;
 		}
-		return { type: str.original.substring(start, declarator.id.typeAnnotation.end), comment };
+		return {
+			type: str.original.substring(start, declarator.id.typeAnnotation.end),
+			comment,
+			trailing_comment
+		};
 	}
 
 	let cleaned_comment_arr = comment
@@ -1526,12 +1541,43 @@ function extract_type_and_comment(declarator, state, path) {
 		?.slice(0, first_at_comment !== -1 ? first_at_comment : cleaned_comment_arr.length)
 		.join('\n');
 
+	let cleaned_comment_arr_trailing = trailing_comment
+		?.split('\n')
+		.map((line) =>
+			line
+				.trim()
+				// replace `// ` for one liners
+				.replace(/^\/\/\s*/g, '')
+				// replace `\**` for the initial JSDoc
+				.replace(/^\/\*\*?\s*/g, '')
+				// migrate `*/` for the end of JSDoc
+				.replace(/\s*\*\/$/g, '')
+				// remove any initial `* ` to clean the comment
+				.replace(/^\*\s*/g, '')
+		)
+		.filter(Boolean);
+	const first_at_comment_trailing = cleaned_comment_arr_trailing?.findIndex((line) =>
+		line.startsWith('@')
+	);
+	let cleaned_comment_trailing = cleaned_comment_arr_trailing
+		?.slice(
+			0,
+			first_at_comment_trailing !== -1
+				? first_at_comment_trailing
+				: cleaned_comment_arr_trailing.length
+		)
+		.join('\n');
+
 	// try to find a comment with a type annotation, hinting at jsdoc
 	if (parent?.type === 'ExportNamedDeclaration' && comment_node) {
 		state.has_type_or_fallback = true;
 		const match = /@type {(.+)}/.exec(comment_node.value);
 		if (match) {
-			return { type: match[1], comment: cleaned_comment };
+			return {
+				type: match[1],
+				comment: cleaned_comment,
+				trailing_comment: cleaned_comment_trailing
+			};
 		}
 	}
 
@@ -1540,11 +1586,19 @@ function extract_type_and_comment(declarator, state, path) {
 		state.has_type_or_fallback = true; // only assume type if it's trivial to infer - else someone would've added a type annotation
 		const type = typeof declarator.init.value;
 		if (type === 'string' || type === 'number' || type === 'boolean') {
-			return { type, comment: state.uses_ts ? comment : cleaned_comment };
+			return {
+				type,
+				comment: state.uses_ts ? comment : cleaned_comment,
+				trailing_comment: state.uses_ts ? trailing_comment : cleaned_comment_trailing
+			};
 		}
 	}
 
-	return { type: 'any', comment: state.uses_ts ? comment : cleaned_comment };
+	return {
+		type: 'any',
+		comment: state.uses_ts ? comment : cleaned_comment,
+		trailing_comment: state.uses_ts ? trailing_comment : cleaned_comment_trailing
+	};
 }
 
 // Ensure modifiers are applied in the same order as Svelte 4
@@ -1779,10 +1833,13 @@ function handle_identifier(node, state, path) {
 						comment = state.str.original.substring(comment_node.start, comment_node.end);
 					}
 
+					const trailing_comment = member.trailingComments?.at(0)?.value;
+
 					if (prop) {
 						prop.type = type;
 						prop.optional = member.optional;
 						prop.comment = comment ?? prop.comment;
+						prop.trailing_comment = trailing_comment ?? prop.trailing_comment;
 					} else {
 						state.props.push({
 							local: member.key.name,
@@ -1792,6 +1849,7 @@ function handle_identifier(node, state, path) {
 							optional: member.optional,
 							type,
 							comment,
+							trailing_comment,
 							type_only: true
 						});
 					}
diff --git a/packages/svelte/tests/migrate/samples/jsdoc-with-comments/input.svelte b/packages/svelte/tests/migrate/samples/jsdoc-with-comments/input.svelte
index 333980513a..f2efb1db80 100644
--- a/packages/svelte/tests/migrate/samples/jsdoc-with-comments/input.svelte
+++ b/packages/svelte/tests/migrate/samples/jsdoc-with-comments/input.svelte
@@ -24,5 +24,20 @@
 	/**
 	 * This is optional
 	 */
-	 export let optional = {stuff: true};
+	export let optional = {stuff: true};
+	
+	export let inline_commented; // this should stay a comment
+
+	/**
+	 * This comment should be merged
+	 */
+	export let inline_commented_merged; // with this inline comment
+
+	/*
+	* this is a same-line leading multiline comment
+	**/ export let inline_multiline_leading_comment = 'world';
+
+	export let inline_multiline_trailing_comment = 'world'; /*
+	* this is a same-line trailing multiline comment
+	**/
 </script>
\ No newline at end of file
diff --git a/packages/svelte/tests/migrate/samples/jsdoc-with-comments/output.svelte b/packages/svelte/tests/migrate/samples/jsdoc-with-comments/output.svelte
index 271dd23ffb..19fbe38b50 100644
--- a/packages/svelte/tests/migrate/samples/jsdoc-with-comments/output.svelte
+++ b/packages/svelte/tests/migrate/samples/jsdoc-with-comments/output.svelte
@@ -9,6 +9,12 @@
 	
 
 	
+	
+
+	
+
+	
+
 	/**
 	 * @typedef {Object} Props
 	 * @property {string} comment - My wonderful comment
@@ -17,6 +23,10 @@
 	 * @property {any} no_comment
 	 * @property {boolean} type_no_comment
 	 * @property {any} [optional] - This is optional
+	 * @property {any} inline_commented - this should stay a comment
+	 * @property {any} inline_commented_merged - This comment should be merged - with this inline comment
+	 * @property {string} [inline_multiline_leading_comment] - this is a same-line leading multiline comment
+	 * @property {string} [inline_multiline_trailing_comment] - this is a same-line trailing multiline comment
 	 */
 
 	/** @type {Props} */
@@ -26,6 +36,10 @@
 		one_line,
 		no_comment,
 		type_no_comment,
-		optional = {stuff: true}
+		optional = {stuff: true},
+		inline_commented,
+		inline_commented_merged,
+		inline_multiline_leading_comment = 'world',
+		inline_multiline_trailing_comment = 'world'
 	} = $props();
 </script>
\ No newline at end of file
diff --git a/packages/svelte/tests/migrate/samples/props-ts/input.svelte b/packages/svelte/tests/migrate/samples/props-ts/input.svelte
index 34007c08b7..9378c54ecf 100644
--- a/packages/svelte/tests/migrate/samples/props-ts/input.svelte
+++ b/packages/svelte/tests/migrate/samples/props-ts/input.svelte
@@ -6,6 +6,16 @@
 	export let bindingOptional: string | undefined = 'bar';
 	/** this should stay a comment */
 	export let no_type_but_comment = 0;
+	export let type_and_inline_comment:number; // this should also stay a comment
+	export let no_type_and_inline_comment = 0;         // this should stay as well
+
+	/*
+	* this is a same-line leading multiline comment
+	**/ export let inline_multiline_leading_comment = 'world';
+
+	export let inline_multiline_trailing_comment = 'world'; /*
+	* this is a same-line trailing multiline comment
+	**/
 </script>
 
 {readonly}
diff --git a/packages/svelte/tests/migrate/samples/props-ts/output.svelte b/packages/svelte/tests/migrate/samples/props-ts/output.svelte
index 36a0b0f4fb..e9deea1384 100644
--- a/packages/svelte/tests/migrate/samples/props-ts/output.svelte
+++ b/packages/svelte/tests/migrate/samples/props-ts/output.svelte
@@ -1,6 +1,9 @@
 <script lang="ts">
 	
 	
+
+	
+
 	interface Props {
 		/** some comment */
 		readonly: number;
@@ -9,6 +12,15 @@
 		bindingOptional?: string | undefined;
 		/** this should stay a comment */
 		no_type_but_comment?: number;
+		type_and_inline_comment: number; // this should also stay a comment
+		no_type_and_inline_comment?: number; // this should stay as well
+		/*
+	* this is a same-line leading multiline comment
+	**/
+		inline_multiline_leading_comment?: string;
+		inline_multiline_trailing_comment?: string; /*
+	* this is a same-line trailing multiline comment
+	**/
 	}
 
 	let {
@@ -16,11 +28,15 @@
 		optional = 'foo',
 		binding = $bindable(),
 		bindingOptional = $bindable('bar'),
-		no_type_but_comment = 0
+		no_type_but_comment = 0,
+		type_and_inline_comment,
+		no_type_and_inline_comment = 0,
+		inline_multiline_leading_comment = 'world',
+		inline_multiline_trailing_comment = 'world'
 	}: Props = $props();
 </script>
 
 {readonly}
 {optional}
 <input bind:value={binding} />
-<input bind:value={bindingOptional} />
\ No newline at end of file
+<input bind:value={bindingOptional} />

From 3d67cd53dbee6079834e208de4f65861798a3131 Mon Sep 17 00:00:00 2001
From: Pig Fang <g-plane@hotmail.com>
Date: Tue, 5 Nov 2024 17:13:46 +0800
Subject: [PATCH 014/159] docs: fix migration guide typo (#14155)

---
 documentation/docs/07-misc/07-v5-migration-guide.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/documentation/docs/07-misc/07-v5-migration-guide.md b/documentation/docs/07-misc/07-v5-migration-guide.md
index c7cdd36106..4ebfb5f905 100644
--- a/documentation/docs/07-misc/07-v5-migration-guide.md
+++ b/documentation/docs/07-misc/07-v5-migration-guide.md
@@ -36,7 +36,7 @@ In Svelte 4, a `$:` statement at the top level of a component could be used to d
 </script>
 ```
 
-As with `$state`, nothing else changes. `double` is still the number itself, and you read it directly, without a wrapper like `.value` or `getCount()`.
+As with `$state`, nothing else changes. `double` is still the number itself, and you read it directly, without a wrapper like `.value` or `getDouble()`.
 
 A `$:` statement could also be used to create side effects. In Svelte 5, this is achieved using the `$effect` rune:
 

From 0ce4b559f213944b426eb5cb687d5b22ba51bef7 Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Tue, 5 Nov 2024 14:07:54 +0100
Subject: [PATCH 015/159] chore: add custom comment with link to playground for
 `pkg.pr.new` (#14151)

* chore: add custom comment with link to playground for `pkg.pr.new`

* chore: small updates to the script output

* chore: refine comment a bit, include multiple packages

* tweak comment

* chore: two steps workflow

* chore: update workflow

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .github/workflows/pkg.pr.new-comment.yml | 107 +++++++++++++++++++++++
 .github/workflows/pkg.pr.new.yml         |  18 +++-
 2 files changed, 124 insertions(+), 1 deletion(-)
 create mode 100644 .github/workflows/pkg.pr.new-comment.yml

diff --git a/.github/workflows/pkg.pr.new-comment.yml b/.github/workflows/pkg.pr.new-comment.yml
new file mode 100644
index 0000000000..b6ad1272f0
--- /dev/null
+++ b/.github/workflows/pkg.pr.new-comment.yml
@@ -0,0 +1,107 @@
+name: Update pkg.pr.new comment
+
+on:
+  workflow_run:
+    workflows: ['Publish Any Commit']
+    types:
+      - completed
+
+jobs:
+  build:
+    name: 'Update comment'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Download artifact
+        uses: actions/download-artifact@v4
+        with:
+          name: output.json
+          path: output.json
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          run-id: ${{ github.event.workflow_run.id }}
+      - name: 'Post or update comment'
+        uses: actions/github-script@v6
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          script: |
+            const fs = require('fs');
+            const output = JSON.parse(fs.readFileSync('output.json', 'utf8'));
+
+            const bot_comment_identifier = `<!-- pkg.pr.new comment -->`;
+
+            const body = (number) => `${bot_comment_identifier}
+
+            [Playground](https://svelte.dev/playground?version=pr-${number})
+
+            \`\`\`
+            ${output.packages.map((p) => `pnpm add https://pkg.pr.new/${p.name}@${number}`).join('\n')}
+            \`\`\`
+            `;
+
+            async function find_bot_comment(issue_number) {
+              if (!issue_number) return null;
+              const comments = await github.rest.issues.listComments({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                issue_number: issue_number,
+              });
+              return comments.data.find((comment) =>
+                comment.body.includes(bot_comment_identifier)
+              );
+            }
+
+            async function create_or_update_comment(issue_number) {
+              if (!issue_number) {
+                console.log('No issue number provided. Cannot post or update comment.');
+                return;
+              }
+
+              const existing_comment = await find_bot_comment(issue_number);
+              if (existing_comment) {
+                await github.rest.issues.updateComment({
+                  owner: context.repo.owner,
+                  repo: context.repo.repo,
+                  comment_id: existing_comment.id,
+                  body: body(issue_number),
+                });
+              } else {
+                await github.rest.issues.createComment({
+                  issue_number: issue_number,
+                  owner: context.repo.owner,
+                  repo: context.repo.repo,
+                  body: body(issue_number),
+                });
+              }
+            }
+
+            async function log_publish_info() {
+              console.log('\n' + '='.repeat(50));
+              console.log('Publish Information');
+              console.log('='.repeat(50));
+              console.log('\nPublished Packages:');
+              console.log(packages);
+              console.log('\nPlayground URL:');
+              console.log(`\nhttps://svelte.dev/playground?version=commit-${output.sha.substring(0, 7)}`)
+              console.log('\n' + '='.repeat(50));
+            }
+
+            if (output.event_name === 'pull_request') {
+              if (context.issue.number) {
+                await create_or_update_comment(context.issue.number);
+              }
+            } else if (output.event_name === 'push') {
+              const pull_requests = await github.rest.pulls.list({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                state: 'open',
+                head: `${context.repo.owner}:${output.ref.replace('refs/heads/', '')}`,
+              });
+
+              if (pull_requests.data.length > 0) {
+                await create_or_update_comment(pull_requests.data[0].number);
+              } else {
+                console.log(
+                  'No open pull request found for this push. Logging publish information to console:'
+                );
+                await log_publish_info();
+              }
+            }
diff --git a/.github/workflows/pkg.pr.new.yml b/.github/workflows/pkg.pr.new.yml
index 76736782a0..ccb05ec93b 100644
--- a/.github/workflows/pkg.pr.new.yml
+++ b/.github/workflows/pkg.pr.new.yml
@@ -21,4 +21,20 @@ jobs:
       - name: Build
         run: pnpm build
 
-      - run: pnpx pkg-pr-new publish --compact --no-template './packages/svelte'
+      - run: pnpx pkg-pr-new publish --comment=off --json output.json --compact --no-template './packages/svelte'
+      - name: Add metadata to output
+        uses: actions/github-script@v6
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          script: |
+            const fs = require('fs');
+            const output = JSON.parse(fs.readFileSync('output.json', 'utf8'));
+            output.number = context.issue.number;
+            output.event_name = context.eventName;
+            output.ref = context.ref;
+            fs.writeFileSync('output.json', JSON.stringify(output), 'utf8');
+      - name: Upload output
+        uses: actions/upload-artifact@v4
+        with:
+          name: output.json
+          path: output.json

From f1f4c29a9980480eefe75b973272c894aceaad17 Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Tue, 5 Nov 2024 15:03:23 +0100
Subject: [PATCH 016/159] =?UTF-8?q?fix:=20`pkg.pr.new`=C2=A0comment=20work?=
 =?UTF-8?q?flow=20(#14156)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: `pkg.pr.new` comment workflow

* chore: remove path from initial workflow and add ls

* chore: add path back since it's mandatory
---
 .github/workflows/pkg.pr.new-comment.yml | 7 ++++---
 .github/workflows/pkg.pr.new.yml         | 4 +++-
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/.github/workflows/pkg.pr.new-comment.yml b/.github/workflows/pkg.pr.new-comment.yml
index b6ad1272f0..10d979121f 100644
--- a/.github/workflows/pkg.pr.new-comment.yml
+++ b/.github/workflows/pkg.pr.new-comment.yml
@@ -15,9 +15,10 @@ jobs:
         uses: actions/download-artifact@v4
         with:
           name: output.json
-          path: output.json
           github-token: ${{ secrets.GITHUB_TOKEN }}
           run-id: ${{ github.event.workflow_run.id }}
+
+      - run: ls -R .
       - name: 'Post or update comment'
         uses: actions/github-script@v6
         with:
@@ -85,8 +86,8 @@ jobs:
             }
 
             if (output.event_name === 'pull_request') {
-              if (context.issue.number) {
-                await create_or_update_comment(context.issue.number);
+              if (output.number) {
+                await create_or_update_comment(output.number);
               }
             } else if (output.event_name === 'push') {
               const pull_requests = await github.rest.pulls.list({
diff --git a/.github/workflows/pkg.pr.new.yml b/.github/workflows/pkg.pr.new.yml
index ccb05ec93b..a55dd5963c 100644
--- a/.github/workflows/pkg.pr.new.yml
+++ b/.github/workflows/pkg.pr.new.yml
@@ -37,4 +37,6 @@ jobs:
         uses: actions/upload-artifact@v4
         with:
           name: output.json
-          path: output.json
+          path: ./output
+
+      - run: ls -R .

From 16a40a8bcea44ff2ea8a062d20bc6e109bf65a22 Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Tue, 5 Nov 2024 15:30:04 +0100
Subject: [PATCH 017/159] fix: use both correct paths (#14157)

* fix: try to read from right folder

* fix: use both correct paths
---
 .github/workflows/pkg.pr.new-comment.yml | 2 +-
 .github/workflows/pkg.pr.new.yml         | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/pkg.pr.new-comment.yml b/.github/workflows/pkg.pr.new-comment.yml
index 10d979121f..65038c9a4c 100644
--- a/.github/workflows/pkg.pr.new-comment.yml
+++ b/.github/workflows/pkg.pr.new-comment.yml
@@ -14,7 +14,7 @@ jobs:
       - name: Download artifact
         uses: actions/download-artifact@v4
         with:
-          name: output.json
+          name: output
           github-token: ${{ secrets.GITHUB_TOKEN }}
           run-id: ${{ github.event.workflow_run.id }}
 
diff --git a/.github/workflows/pkg.pr.new.yml b/.github/workflows/pkg.pr.new.yml
index a55dd5963c..4292ec900a 100644
--- a/.github/workflows/pkg.pr.new.yml
+++ b/.github/workflows/pkg.pr.new.yml
@@ -36,7 +36,7 @@ jobs:
       - name: Upload output
         uses: actions/upload-artifact@v4
         with:
-          name: output.json
-          path: ./output
+          name: output
+          path: ./output.json
 
       - run: ls -R .

From 0c853208ceba88053516312e27797df387d45c82 Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Tue, 5 Nov 2024 15:46:01 +0100
Subject: [PATCH 018/159] fix: we are getting there...this should be it
 (#14158)

---
 .github/workflows/pkg.pr.new-comment.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/pkg.pr.new-comment.yml b/.github/workflows/pkg.pr.new-comment.yml
index 65038c9a4c..c3924799d8 100644
--- a/.github/workflows/pkg.pr.new-comment.yml
+++ b/.github/workflows/pkg.pr.new-comment.yml
@@ -79,7 +79,7 @@ jobs:
               console.log('Publish Information');
               console.log('='.repeat(50));
               console.log('\nPublished Packages:');
-              console.log(packages);
+              console.log(output.packages.map((p) => `${p.name} - pnpm add https://pkg.pr.new/${p.name}@${number}`).join('\n'));
               console.log('\nPlayground URL:');
               console.log(`\nhttps://svelte.dev/playground?version=commit-${output.sha.substring(0, 7)}`)
               console.log('\n' + '='.repeat(50));

From e786729555c58ce8ab4409e6c0de1780d65d205d Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Tue, 5 Nov 2024 17:05:21 +0100
Subject: [PATCH 019/159] fix: find the right sha for logging (#14159)

---
 .github/workflows/pkg.pr.new-comment.yml | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/pkg.pr.new-comment.yml b/.github/workflows/pkg.pr.new-comment.yml
index c3924799d8..1698a456d3 100644
--- a/.github/workflows/pkg.pr.new-comment.yml
+++ b/.github/workflows/pkg.pr.new-comment.yml
@@ -75,13 +75,17 @@ jobs:
             }
 
             async function log_publish_info() {
+              const svelte_package = output.packages.find(p => p.name === 'svelte');
+              const svelte_sha = svelte_package.url.replace(/^.+@([^@]+)$/, '$1');
               console.log('\n' + '='.repeat(50));
               console.log('Publish Information');
               console.log('='.repeat(50));
               console.log('\nPublished Packages:');
-              console.log(output.packages.map((p) => `${p.name} - pnpm add https://pkg.pr.new/${p.name}@${number}`).join('\n'));
-              console.log('\nPlayground URL:');
-              console.log(`\nhttps://svelte.dev/playground?version=commit-${output.sha.substring(0, 7)}`)
+              console.log(output.packages.map((p) => `${p.name} - pnpm add https://pkg.pr.new/${p.name}@${p.url.replace(/^.+@([^@]+)$/, '$1')}`).join('\n'));
+              if(svelte_sha){
+                console.log('\nPlayground URL:');
+                console.log(`\nhttps://svelte.dev/playground?version=commit-${svelte_sha}`)
+              }
               console.log('\n' + '='.repeat(50));
             }
 

From 927319c139a2bf729499ba4f576ced369a6ba41f Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 5 Nov 2024 13:51:50 -0500
Subject: [PATCH 020/159] fix: update links in JSDoc (#14165)

---
 .changeset/rotten-toys-fix.md           | 5 +++++
 packages/svelte/src/transition/index.js | 2 +-
 packages/svelte/types/index.d.ts        | 2 +-
 3 files changed, 7 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/rotten-toys-fix.md

diff --git a/.changeset/rotten-toys-fix.md b/.changeset/rotten-toys-fix.md
new file mode 100644
index 0000000000..fdaff54c1b
--- /dev/null
+++ b/.changeset/rotten-toys-fix.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: update links in JSDoc
diff --git a/packages/svelte/src/transition/index.js b/packages/svelte/src/transition/index.js
index 3978d088a3..8cc054cba2 100644
--- a/packages/svelte/src/transition/index.js
+++ b/packages/svelte/src/transition/index.js
@@ -209,7 +209,7 @@ function assign(tar, src) {
 }
 
 /**
- * The `crossfade` function creates a pair of [transitions](https://svelte.dev/docs#template-syntax-element-directives-transition-fn) called `send` and `receive`. When an element is 'sent', it looks for a corresponding element being 'received', and generates a transition that transforms the element to its counterpart's position and fades it out. When an element is 'received', the reverse happens. If there is no counterpart, the `fallback` transition is used.
+ * The `crossfade` function creates a pair of [transitions](https://svelte.dev/docs/svelte/transition) called `send` and `receive`. When an element is 'sent', it looks for a corresponding element being 'received', and generates a transition that transforms the element to its counterpart's position and fades it out. When an element is 'received', the reverse happens. If there is no counterpart, the `fallback` transition is used.
  *
  * @param {CrossfadeParams & {
  * 	fallback?: (node: Element, params: CrossfadeParams, intro: boolean) => TransitionConfig;
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
index ca67923ee1..00ba2556d9 100644
--- a/packages/svelte/types/index.d.ts
+++ b/packages/svelte/types/index.d.ts
@@ -1947,7 +1947,7 @@ declare module 'svelte/transition' {
 		getTotalLength(): number;
 	}, { delay, speed, duration, easing }?: DrawParams | undefined): TransitionConfig;
 	/**
-	 * The `crossfade` function creates a pair of [transitions](https://svelte.dev/docs#template-syntax-element-directives-transition-fn) called `send` and `receive`. When an element is 'sent', it looks for a corresponding element being 'received', and generates a transition that transforms the element to its counterpart's position and fades it out. When an element is 'received', the reverse happens. If there is no counterpart, the `fallback` transition is used.
+	 * The `crossfade` function creates a pair of [transitions](https://svelte.dev/docs/svelte/transition) called `send` and `receive`. When an element is 'sent', it looks for a corresponding element being 'received', and generates a transition that transforms the element to its counterpart's position and fades it out. When an element is 'received', the reverse happens. If there is no counterpart, the `fallback` transition is used.
 	 *
 	 * */
 	export function crossfade({ fallback, ...defaults }: CrossfadeParams & {

From ecc9b97a5be9a475f6dcc6fc84b46d9ad9ebceba Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 5 Nov 2024 13:54:18 -0500
Subject: [PATCH 021/159] Version Packages (#14097)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/dirty-parrots-smell.md   |  5 -----
 .changeset/empty-hairs-love.md      |  5 -----
 .changeset/mean-seas-give.md        |  5 -----
 .changeset/modern-pets-punch.md     |  5 -----
 .changeset/polite-timers-tell.md    |  5 -----
 .changeset/purple-owls-hug.md       |  5 -----
 .changeset/rotten-toys-fix.md       |  5 -----
 .changeset/selfish-chicken-argue.md |  5 -----
 .changeset/short-lions-search.md    |  5 -----
 .changeset/silent-tigers-lay.md     |  5 -----
 .changeset/silly-bulldogs-rest.md   |  5 -----
 .changeset/warm-eyes-protect.md     |  5 -----
 .changeset/yellow-pumas-rule.md     |  5 -----
 packages/svelte/CHANGELOG.md        | 30 +++++++++++++++++++++++++++++
 packages/svelte/package.json        |  2 +-
 packages/svelte/src/version.js      |  2 +-
 16 files changed, 32 insertions(+), 67 deletions(-)
 delete mode 100644 .changeset/dirty-parrots-smell.md
 delete mode 100644 .changeset/empty-hairs-love.md
 delete mode 100644 .changeset/mean-seas-give.md
 delete mode 100644 .changeset/modern-pets-punch.md
 delete mode 100644 .changeset/polite-timers-tell.md
 delete mode 100644 .changeset/purple-owls-hug.md
 delete mode 100644 .changeset/rotten-toys-fix.md
 delete mode 100644 .changeset/selfish-chicken-argue.md
 delete mode 100644 .changeset/short-lions-search.md
 delete mode 100644 .changeset/silent-tigers-lay.md
 delete mode 100644 .changeset/silly-bulldogs-rest.md
 delete mode 100644 .changeset/warm-eyes-protect.md
 delete mode 100644 .changeset/yellow-pumas-rule.md

diff --git a/.changeset/dirty-parrots-smell.md b/.changeset/dirty-parrots-smell.md
deleted file mode 100644
index 50864d20a4..0000000000
--- a/.changeset/dirty-parrots-smell.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: ensure non-matching elements are scoped for `:not(...)` selector
diff --git a/.changeset/empty-hairs-love.md b/.changeset/empty-hairs-love.md
deleted file mode 100644
index a56e6c6334..0000000000
--- a/.changeset/empty-hairs-love.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: ensure video elements autoplay in safari
diff --git a/.changeset/mean-seas-give.md b/.changeset/mean-seas-give.md
deleted file mode 100644
index 0c16ac6d55..0000000000
--- a/.changeset/mean-seas-give.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: ensure trailing multiline comments on props produce correct code (#14143#issuecomment-2455702689)
diff --git a/.changeset/modern-pets-punch.md b/.changeset/modern-pets-punch.md
deleted file mode 100644
index 981547e9e5..0000000000
--- a/.changeset/modern-pets-punch.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: correctly infer `<a>` tag namespace
diff --git a/.changeset/polite-timers-tell.md b/.changeset/polite-timers-tell.md
deleted file mode 100644
index b98a89c95f..0000000000
--- a/.changeset/polite-timers-tell.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: check options namespace for top level `svelte:element`s
diff --git a/.changeset/purple-owls-hug.md b/.changeset/purple-owls-hug.md
deleted file mode 100644
index f3dcb0a5e3..0000000000
--- a/.changeset/purple-owls-hug.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: ensure migrate keeps inline/trailing comments in $props type definition
diff --git a/.changeset/rotten-toys-fix.md b/.changeset/rotten-toys-fix.md
deleted file mode 100644
index fdaff54c1b..0000000000
--- a/.changeset/rotten-toys-fix.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: update links in JSDoc
diff --git a/.changeset/selfish-chicken-argue.md b/.changeset/selfish-chicken-argue.md
deleted file mode 100644
index 32e0d0afef..0000000000
--- a/.changeset/selfish-chicken-argue.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: ensure SvelteMap and SvelteSet work with generators in dev
diff --git a/.changeset/short-lions-search.md b/.changeset/short-lions-search.md
deleted file mode 100644
index ed3abdc053..0000000000
--- a/.changeset/short-lions-search.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: only output the key for each_key_duplicate
diff --git a/.changeset/silent-tigers-lay.md b/.changeset/silent-tigers-lay.md
deleted file mode 100644
index 8debfd7151..0000000000
--- a/.changeset/silent-tigers-lay.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: prevent migrated snippet from shadow snippet prop
diff --git a/.changeset/silly-bulldogs-rest.md b/.changeset/silly-bulldogs-rest.md
deleted file mode 100644
index f92eb81575..0000000000
--- a/.changeset/silly-bulldogs-rest.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: pass along `anchor` in legacy class wrappers
diff --git a/.changeset/warm-eyes-protect.md b/.changeset/warm-eyes-protect.md
deleted file mode 100644
index fbb971f314..0000000000
--- a/.changeset/warm-eyes-protect.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: recognize all custom element prop definitions
diff --git a/.changeset/yellow-pumas-rule.md b/.changeset/yellow-pumas-rule.md
deleted file mode 100644
index 02def3c178..0000000000
--- a/.changeset/yellow-pumas-rule.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: migrate multiple declarations with only some exported correctly
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 0786d007f3..cdda3a12c3 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,35 @@
 # svelte
 
+## 5.1.10
+
+### Patch Changes
+
+- fix: ensure non-matching elements are scoped for `:not(...)` selector ([#13999](https://github.com/sveltejs/svelte/pull/13999))
+
+- fix: ensure video elements autoplay in safari ([#14095](https://github.com/sveltejs/svelte/pull/14095))
+
+- fix: ensure trailing multiline comments on props produce correct code (#14143#issuecomment-2455702689) ([#14143](https://github.com/sveltejs/svelte/pull/14143))
+
+- fix: correctly infer `<a>` tag namespace ([#14134](https://github.com/sveltejs/svelte/pull/14134))
+
+- fix: check options namespace for top level `svelte:element`s ([#14101](https://github.com/sveltejs/svelte/pull/14101))
+
+- fix: ensure migrate keeps inline/trailing comments in $props type definition ([#14143](https://github.com/sveltejs/svelte/pull/14143))
+
+- fix: update links in JSDoc ([#14165](https://github.com/sveltejs/svelte/pull/14165))
+
+- fix: ensure SvelteMap and SvelteSet work with generators in dev ([#14103](https://github.com/sveltejs/svelte/pull/14103))
+
+- fix: only output the key for each_key_duplicate ([#14147](https://github.com/sveltejs/svelte/pull/14147))
+
+- fix: prevent migrated snippet from shadow snippet prop ([#14127](https://github.com/sveltejs/svelte/pull/14127))
+
+- fix: pass along `anchor` in legacy class wrappers ([#14100](https://github.com/sveltejs/svelte/pull/14100))
+
+- fix: recognize all custom element prop definitions ([#14084](https://github.com/sveltejs/svelte/pull/14084))
+
+- fix: migrate multiple declarations with only some exported correctly ([#14126](https://github.com/sveltejs/svelte/pull/14126))
+
 ## 5.1.9
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 257d3924bf..5234e334b6 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.1.9",
+  "version": "5.1.10",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index e6a9988e3a..d91ee8164e 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.1.9';
+export const VERSION = '5.1.10';
 export const PUBLIC_VERSION = '5';

From 5077061695a00f8e6fccc37cf7fd66490e061ae4 Mon Sep 17 00:00:00 2001
From: Caique Torres <56696506+caiquetorres@users.noreply.github.com>
Date: Tue, 5 Nov 2024 16:29:38 -0300
Subject: [PATCH 022/159] fix: issue with implicit public modifier causing
 undefined properties (#14153)

closes #14152
---
 .changeset/four-countries-taste.md                 |  5 +++++
 .../phases/1-parse/remove_typescript_nodes.js      |  2 +-
 .../runtime-runes/samples/typescript/main.svelte   |  5 ++++-
 .../ts-unsupported-modifier-readonly/errors.json   | 14 ++++++++++++++
 .../ts-unsupported-modifier-readonly/input.svelte  |  5 +++++
 5 files changed, 29 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/four-countries-taste.md
 create mode 100644 packages/svelte/tests/validator/samples/ts-unsupported-modifier-readonly/errors.json
 create mode 100644 packages/svelte/tests/validator/samples/ts-unsupported-modifier-readonly/input.svelte

diff --git a/.changeset/four-countries-taste.md b/.changeset/four-countries-taste.md
new file mode 100644
index 0000000000..6873b2ae2d
--- /dev/null
+++ b/.changeset/four-countries-taste.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: error on TypeScript's `readonly` modifier
diff --git a/packages/svelte/src/compiler/phases/1-parse/remove_typescript_nodes.js b/packages/svelte/src/compiler/phases/1-parse/remove_typescript_nodes.js
index edbb673bd5..5febef420d 100644
--- a/packages/svelte/src/compiler/phases/1-parse/remove_typescript_nodes.js
+++ b/packages/svelte/src/compiler/phases/1-parse/remove_typescript_nodes.js
@@ -94,7 +94,7 @@ const visitors = {
 		e.typescript_invalid_feature(node, 'enums');
 	},
 	TSParameterProperty(node, context) {
-		if (node.accessibility && context.path.at(-2)?.kind === 'constructor') {
+		if ((node.readonly || node.accessibility) && context.path.at(-2)?.kind === 'constructor') {
 			e.typescript_invalid_feature(node, 'accessibility modifiers on constructor parameters');
 		}
 		return node.parameter;
diff --git a/packages/svelte/tests/runtime-runes/samples/typescript/main.svelte b/packages/svelte/tests/runtime-runes/samples/typescript/main.svelte
index d1c4f361ba..6c9cacdeff 100644
--- a/packages/svelte/tests/runtime-runes/samples/typescript/main.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/typescript/main.svelte
@@ -9,7 +9,10 @@
 	}
 
 	class Foo {
-		constructor(readonly name: string) {}
+		public name: string;
+		constructor(name: string) {
+			this.name = name;
+		}
 	}
 
 	declare const declared_const: number;
diff --git a/packages/svelte/tests/validator/samples/ts-unsupported-modifier-readonly/errors.json b/packages/svelte/tests/validator/samples/ts-unsupported-modifier-readonly/errors.json
new file mode 100644
index 0000000000..44399179c0
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/ts-unsupported-modifier-readonly/errors.json
@@ -0,0 +1,14 @@
+[
+	{
+		"code": "typescript_invalid_feature",
+		"message": "TypeScript language features like accessibility modifiers on constructor parameters are not natively supported, and their use is generally discouraged. Outside of `<script>` tags, these features are not supported. For use within `<script>` tags, you will need to use a preprocessor to convert it to JavaScript before it gets passed to the Svelte compiler. If you are using `vitePreprocess`, make sure to specifically enable preprocessing script tags (`vitePreprocess({ script: true })`)",
+		"start": {
+			"line": 3,
+			"column": 14
+		},
+		"end": {
+			"line": 3,
+			"column": 32
+		}
+	}
+]
diff --git a/packages/svelte/tests/validator/samples/ts-unsupported-modifier-readonly/input.svelte b/packages/svelte/tests/validator/samples/ts-unsupported-modifier-readonly/input.svelte
new file mode 100644
index 0000000000..b099667fa2
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/ts-unsupported-modifier-readonly/input.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+	class Foo {
+		constructor(readonly x: number) {}
+	}
+</script>

From aa23415179364d7f50f652c4e1a704e5a5d2ff16 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Wed, 6 Nov 2024 13:49:37 +0100
Subject: [PATCH 025/159] fix: remove scoping for most `:not` selectors 
 (#14177)

fixes #14168

This reverts the whole "selectors inside `:not` are scoped" logic. Scoping is done so that styles don't bleed. But within `:not`,everything is reversed, which means scoping the selectors now means they are more likely to bleed. That is the opposite of what we want to achieve, therefore we should just leave those selectors alone.

The exception are `:not` selectors with descendant selectors, as that means "look up the tree" and we need to scope all ancestor elements in that case.
---
 .changeset/quick-eels-occur.md                |  5 ++
 packages/svelte/src/compiler/migrate/index.js |  6 +-
 .../phases/2-analyze/css/css-prune.js         | 80 +++++++++----------
 .../compiler/phases/3-transform/css/index.js  | 43 +++++-----
 .../samples/not-selector-global/_config.js    | 17 +---
 .../samples/not-selector-global/expected.css  | 26 ++++--
 .../samples/not-selector-global/expected.html |  4 +-
 .../samples/not-selector-global/input.svelte  | 20 ++++-
 .../_config.js                                |  5 --
 .../expected.css                              |  4 -
 .../expected.html                             |  1 -
 .../input.svelte                              |  8 --
 .../tests/css/samples/not-selector/_config.js | 38 +++------
 .../css/samples/not-selector/expected.css     | 25 +++---
 .../css/samples/not-selector/expected.html    |  4 +-
 .../css/samples/not-selector/input.svelte     | 19 ++++-
 packages/svelte/tests/css/test.ts             | 28 +++----
 .../samples/is-not-where-has/output.svelte    | 10 +--
 18 files changed, 172 insertions(+), 171 deletions(-)
 create mode 100644 .changeset/quick-eels-occur.md
 delete mode 100644 packages/svelte/tests/css/samples/not-selector-hash-on-right-elements/_config.js
 delete mode 100644 packages/svelte/tests/css/samples/not-selector-hash-on-right-elements/expected.css
 delete mode 100644 packages/svelte/tests/css/samples/not-selector-hash-on-right-elements/expected.html
 delete mode 100644 packages/svelte/tests/css/samples/not-selector-hash-on-right-elements/input.svelte

diff --git a/.changeset/quick-eels-occur.md b/.changeset/quick-eels-occur.md
new file mode 100644
index 0000000000..e5eb153fbf
--- /dev/null
+++ b/.changeset/quick-eels-occur.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: remove scoping for `:not` selectors
diff --git a/packages/svelte/src/compiler/migrate/index.js b/packages/svelte/src/compiler/migrate/index.js
index 8e8670c824..387b6a5485 100644
--- a/packages/svelte/src/compiler/migrate/index.js
+++ b/packages/svelte/src/compiler/migrate/index.js
@@ -50,9 +50,9 @@ function migrate_css(state) {
 	while (code) {
 		if (
 			code.startsWith(':has') ||
-			code.startsWith(':not') ||
 			code.startsWith(':is') ||
-			code.startsWith(':where')
+			code.startsWith(':where') ||
+			code.startsWith(':not')
 		) {
 			let start = code.indexOf('(') + 1;
 			let is_global = false;
@@ -74,7 +74,7 @@ function migrate_css(state) {
 				char = code[end];
 			}
 			if (start && end) {
-				if (!is_global) {
+				if (!is_global && !code.startsWith(':not')) {
 					str.prependLeft(starting + start, ':global(');
 					str.appendRight(starting + end - 1, ')');
 				}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js b/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js
index fae89f11ed..4306d49d81 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js
@@ -10,7 +10,6 @@ import { get_attribute_chunks, is_text_attribute } from '../../../utils/ast.js';
  *   stylesheet: Compiler.Css.StyleSheet;
  *   element: Compiler.AST.RegularElement | Compiler.AST.SvelteElement;
  *   from_render_tag: boolean;
- *   inside_not: boolean;
  * }} State
  */
 /** @typedef {NODE_PROBABLY_EXISTS | NODE_DEFINITELY_EXISTS} NodeExistsValue */
@@ -62,13 +61,9 @@ export function prune(stylesheet, element) {
 		const parent = get_element_parent(element);
 		if (!parent) return;
 
-		walk(
-			stylesheet,
-			{ stylesheet, element: parent, from_render_tag: true, inside_not: false },
-			visitors
-		);
+		walk(stylesheet, { stylesheet, element: parent, from_render_tag: true }, visitors);
 	} else {
-		walk(stylesheet, { stylesheet, element, from_render_tag: false, inside_not: false }, visitors);
+		walk(stylesheet, { stylesheet, element, from_render_tag: false }, visitors);
 	}
 }
 
@@ -179,9 +174,9 @@ function truncate(node) {
 						selector.type === 'PseudoClassSelector' &&
 						selector.args !== null &&
 						(selector.name === 'has' ||
-							selector.name === 'not' ||
 							selector.name === 'is' ||
-							selector.name === 'where')
+							selector.name === 'where' ||
+							selector.name === 'not')
 				))
 		);
 	});
@@ -227,7 +222,7 @@ function apply_selector(relative_selectors, rule, element, state) {
 	// if this is the left-most non-global selector, mark it — we want
 	// `x y z {...}` to become `x.blah y z.blah {...}`
 	const parent = parent_selectors[parent_selectors.length - 1];
-	if (!state.inside_not && (!parent || is_global(parent, rule))) {
+	if (!parent || is_global(parent, rule)) {
 		mark(relative_selector, element);
 	}
 
@@ -269,7 +264,7 @@ function apply_combinator(combinator, relative_selector, parent_selectors, rule,
 				if (parent.type === 'RegularElement' || parent.type === 'SvelteElement') {
 					if (apply_selector(parent_selectors, rule, parent, state)) {
 						// TODO the `name === ' '` causes false positives, but removing it causes false negatives...
-						if (!state.inside_not && (name === ' ' || crossed_component_boundary)) {
+						if (name === ' ' || crossed_component_boundary) {
 							mark(parent_selectors[parent_selectors.length - 1], parent);
 						}
 
@@ -295,15 +290,11 @@ function apply_combinator(combinator, relative_selector, parent_selectors, rule,
 				if (possible_sibling.type === 'RenderTag' || possible_sibling.type === 'SlotElement') {
 					// `{@render foo()}<p>foo</p>` with `:global(.x) + p` is a match
 					if (parent_selectors.length === 1 && parent_selectors[0].metadata.is_global) {
-						if (!state.inside_not) {
-							mark(relative_selector, element);
-						}
+						mark(relative_selector, element);
 						sibling_matched = true;
 					}
 				} else if (apply_selector(parent_selectors, rule, possible_sibling, state)) {
-					if (!state.inside_not) {
-						mark(relative_selector, element);
-					}
+					mark(relative_selector, element);
 					sibling_matched = true;
 				}
 			}
@@ -512,7 +503,35 @@ function relative_selector_might_apply_to_node(relative_selector, rule, element,
 				// We came across a :global, everything beyond it is global and therefore a potential match
 				if (name === 'global' && selector.args === null) return true;
 
-				if ((name === 'is' || name === 'where' || name === 'not') && selector.args) {
+				// :not(...) contents should stay unscoped. Scoping them would achieve the opposite of what we want,
+				// because they are then _more_ likely to bleed out of the component. The exception is complex selectors
+				// with descendants, in which case we scope them all.
+				if (name === 'not' && selector.args) {
+					for (const complex_selector of selector.args.children) {
+						complex_selector.metadata.used = true;
+						const relative = truncate(complex_selector);
+
+						if (complex_selector.children.length > 1) {
+							// foo:not(bar foo) means that bar is an ancestor of foo (side note: ending with foo is the only way the selector make sense).
+							// We can't fully check if that actually matches with our current algorithm, so we just assume it does.
+							// The result may not match a real element, so the only drawback is the missing prune.
+							for (const selector of relative) {
+								selector.metadata.scoped = true;
+							}
+
+							/** @type {Compiler.AST.RegularElement | Compiler.AST.SvelteElement | null} */
+							let el = element;
+							while (el) {
+								el.metadata.scoped = true;
+								el = get_element_parent(el);
+							}
+						}
+					}
+
+					break;
+				}
+
+				if ((name === 'is' || name === 'where') && selector.args) {
 					let matched = false;
 
 					for (const complex_selector of selector.args.children) {
@@ -522,32 +541,9 @@ function relative_selector_might_apply_to_node(relative_selector, rule, element,
 						if (is_global) {
 							complex_selector.metadata.used = true;
 							matched = true;
-						} else if (name !== 'not' && apply_selector(relative, rule, element, state)) {
+						} else if (apply_selector(relative, rule, element, state)) {
 							complex_selector.metadata.used = true;
 							matched = true;
-						} else if (
-							name === 'not' &&
-							!apply_selector(relative, rule, element, { ...state, inside_not: true })
-						) {
-							// For `:not(...)` we gotta do the inverse: If it did not match, mark the element and possibly
-							// everything above (if the selector is written is a such) as scoped (because they matched by not matching).
-							element.metadata.scoped = true;
-							complex_selector.metadata.used = true;
-							matched = true;
-
-							for (const r of relative) {
-								r.metadata.scoped = true;
-							}
-
-							// bar:not(foo bar) means that foo is an ancestor of bar
-							if (complex_selector.children.length > 1) {
-								/** @type {Compiler.AST.RegularElement | Compiler.AST.SvelteElement | null} */
-								let el = get_element_parent(element);
-								while (el) {
-									el.metadata.scoped = true;
-									el = get_element_parent(el);
-								}
-							}
 						} else if (complex_selector.children.length > 1 && (name == 'is' || name == 'where')) {
 							// foo :is(bar baz) can also mean that bar is an ancestor of foo, and baz a descendant.
 							// We can't fully check if that actually matches with our current algorithm, so we just assume it does.
diff --git a/packages/svelte/src/compiler/phases/3-transform/css/index.js b/packages/svelte/src/compiler/phases/3-transform/css/index.js
index 62c520e994..350eca35d8 100644
--- a/packages/svelte/src/compiler/phases/3-transform/css/index.js
+++ b/packages/svelte/src/compiler/phases/3-transform/css/index.js
@@ -278,29 +278,10 @@ const visitors = {
 	ComplexSelector(node, context) {
 		const before_bumped = context.state.specificity.bumped;
 
-		/**
-		 * @param {Css.PseudoClassSelector} selector
-		 * @param {Css.Combinator | null} combinator
-		 */
-		function remove_global_pseudo_class(selector, combinator) {
-			if (selector.args === null) {
-				let start = selector.start;
-				if (combinator?.name === ' ') {
-					// div :global.x becomes div.x
-					while (/\s/.test(context.state.code.original[start - 1])) start--;
-				}
-				context.state.code.remove(start, selector.start + ':global'.length);
-			} else {
-				context.state.code
-					.remove(selector.start, selector.start + ':global('.length)
-					.remove(selector.end - 1, selector.end);
-			}
-		}
-
 		for (const relative_selector of node.children) {
 			if (relative_selector.metadata.is_global) {
 				const global = /** @type {Css.PseudoClassSelector} */ (relative_selector.selectors[0]);
-				remove_global_pseudo_class(global, relative_selector.combinator);
+				remove_global_pseudo_class(global, relative_selector.combinator, context.state);
 
 				if (
 					node.metadata.rule?.metadata.parent_rule &&
@@ -328,7 +309,7 @@ const visitors = {
 				// for any :global() or :global at the middle of compound selector
 				for (const selector of relative_selector.selectors) {
 					if (selector.type === 'PseudoClassSelector' && selector.name === 'global') {
-						remove_global_pseudo_class(selector, null);
+						remove_global_pseudo_class(selector, null, context.state);
 					}
 				}
 
@@ -380,6 +361,26 @@ const visitors = {
 	}
 };
 
+/**
+ * @param {Css.PseudoClassSelector} selector
+ * @param {Css.Combinator | null} combinator
+ * @param {State} state
+ */
+function remove_global_pseudo_class(selector, combinator, state) {
+	if (selector.args === null) {
+		let start = selector.start;
+		if (combinator?.name === ' ') {
+			// div :global.x becomes div.x
+			while (/\s/.test(state.code.original[start - 1])) start--;
+		}
+		state.code.remove(start, selector.start + ':global'.length);
+	} else {
+		state.code
+			.remove(selector.start, selector.start + ':global('.length)
+			.remove(selector.end - 1, selector.end);
+	}
+}
+
 /**
  * Walk backwards until we find a non-whitespace character
  * @param {number} end
diff --git a/packages/svelte/tests/css/samples/not-selector-global/_config.js b/packages/svelte/tests/css/samples/not-selector-global/_config.js
index 2776ac227a..292c6c49ac 100644
--- a/packages/svelte/tests/css/samples/not-selector-global/_config.js
+++ b/packages/svelte/tests/css/samples/not-selector-global/_config.js
@@ -1,20 +1,5 @@
 import { test } from '../../test';
 
 export default test({
-	warnings: [
-		{
-			code: 'css_unused_selector',
-			message: 'Unused CSS selector ":global(.x) :not(p)"',
-			start: {
-				line: 14,
-				column: 1,
-				character: 197
-			},
-			end: {
-				line: 14,
-				column: 20,
-				character: 216
-			}
-		}
-	]
+	warnings: []
 });
diff --git a/packages/svelte/tests/css/samples/not-selector-global/expected.css b/packages/svelte/tests/css/samples/not-selector-global/expected.css
index f90edd0c88..ea9ff39486 100644
--- a/packages/svelte/tests/css/samples/not-selector-global/expected.css
+++ b/packages/svelte/tests/css/samples/not-selector-global/expected.css
@@ -2,18 +2,28 @@
 	.svelte-xyz:not(.foo) {
 		color: green;
 	}
-	.svelte-xyz:not(.foo:where(.svelte-xyz)):not(.unused) {
+	.svelte-xyz:not(.foo):not(.unused) {
 		color: green;
 	}
-	.x:not(.foo.svelte-xyz) {
+	.x:not(.foo) {
 		color: green;
 	}
-	/* (unused) :global(.x) :not(p) {
-		color: red;
-	}*/
-	.x:not(p.svelte-xyz) {
-		color: red; /* TODO would be nice to prune this one day */
+	.x .svelte-xyz:not(p) {
+		color: green;
+	}
+	.x:not(p) {
+		color: green;
+	}
+	.x .svelte-xyz:not(.unused) {
+		color: green;
+	}
+
+	span:not(p.svelte-xyz span:where(.svelte-xyz)) {
+		color: green;
+	}
+	span.svelte-xyz:not(p span) {
+		color: green;
 	}
-	.x .svelte-xyz:not(.unused:where(.svelte-xyz)) {
+	span:not(p span) {
 		color: green;
 	}
diff --git a/packages/svelte/tests/css/samples/not-selector-global/expected.html b/packages/svelte/tests/css/samples/not-selector-global/expected.html
index b4834bb818..5eeb2be294 100644
--- a/packages/svelte/tests/css/samples/not-selector-global/expected.html
+++ b/packages/svelte/tests/css/samples/not-selector-global/expected.html
@@ -1 +1,3 @@
-<p class="foo svelte-xyz">foo</p> <p class="bar svelte-xyz">bar</p>
\ No newline at end of file
+<p class="foo svelte-xyz">foo</p>
+<p class="bar svelte-xyz">bar <span class="svelte-xyz">baz</span></p>
+<span class="svelte-xyz">buzz</span>
\ No newline at end of file
diff --git a/packages/svelte/tests/css/samples/not-selector-global/input.svelte b/packages/svelte/tests/css/samples/not-selector-global/input.svelte
index 578052d943..1f0e6cd6db 100644
--- a/packages/svelte/tests/css/samples/not-selector-global/input.svelte
+++ b/packages/svelte/tests/css/samples/not-selector-global/input.svelte
@@ -1,5 +1,9 @@
 <p class="foo">foo</p>
-<p class="bar">bar</p>
+<p class="bar">
+	bar
+	<span>baz</span>
+</p>
+<span>buzz</span>
 
 <style>
 	:not(:global(.foo)) {
@@ -12,12 +16,22 @@
 		color: green;
 	}
 	:global(.x) :not(p) {
-		color: red;
+		color: green;
 	}
 	:global(.x):not(p) {
-		color: red; /* TODO would be nice to prune this one day */
+		color: green;
 	}
 	:global(.x) :not(.unused) {
 		color: green;
 	}
+
+	:global(span):not(p span) {
+		color: green;
+	}
+	span:not(:global(p span)) {
+		color: green;
+	}
+	:global(span:not(p span)) {
+		color: green;
+	}
 </style>
\ No newline at end of file
diff --git a/packages/svelte/tests/css/samples/not-selector-hash-on-right-elements/_config.js b/packages/svelte/tests/css/samples/not-selector-hash-on-right-elements/_config.js
deleted file mode 100644
index 292c6c49ac..0000000000
--- a/packages/svelte/tests/css/samples/not-selector-hash-on-right-elements/_config.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import { test } from '../../test';
-
-export default test({
-	warnings: []
-});
diff --git a/packages/svelte/tests/css/samples/not-selector-hash-on-right-elements/expected.css b/packages/svelte/tests/css/samples/not-selector-hash-on-right-elements/expected.css
deleted file mode 100644
index 8fe09de6dc..0000000000
--- a/packages/svelte/tests/css/samples/not-selector-hash-on-right-elements/expected.css
+++ /dev/null
@@ -1,4 +0,0 @@
-
-	.svelte-xyz:not(.bar:where(.svelte-xyz)) {
-		color: green;
-	}
diff --git a/packages/svelte/tests/css/samples/not-selector-hash-on-right-elements/expected.html b/packages/svelte/tests/css/samples/not-selector-hash-on-right-elements/expected.html
deleted file mode 100644
index fa4ca95c60..0000000000
--- a/packages/svelte/tests/css/samples/not-selector-hash-on-right-elements/expected.html
+++ /dev/null
@@ -1 +0,0 @@
-<p class="foo svelte-xyz">foo</p> <p class="bar">bar</p>
\ No newline at end of file
diff --git a/packages/svelte/tests/css/samples/not-selector-hash-on-right-elements/input.svelte b/packages/svelte/tests/css/samples/not-selector-hash-on-right-elements/input.svelte
deleted file mode 100644
index 6599a21ca6..0000000000
--- a/packages/svelte/tests/css/samples/not-selector-hash-on-right-elements/input.svelte
+++ /dev/null
@@ -1,8 +0,0 @@
-<p class="foo">foo</p>
-<p class="bar">bar</p>
-
-<style>
-	:not(.bar) {
-		color: green;
-	}
-</style>
\ No newline at end of file
diff --git a/packages/svelte/tests/css/samples/not-selector/_config.js b/packages/svelte/tests/css/samples/not-selector/_config.js
index 27b4f91a6a..9c91a2a4c0 100644
--- a/packages/svelte/tests/css/samples/not-selector/_config.js
+++ b/packages/svelte/tests/css/samples/not-selector/_config.js
@@ -4,44 +4,30 @@ export default test({
 	warnings: [
 		{
 			code: 'css_unused_selector',
-			message: 'Unused CSS selector ":not(p)"',
+			message: 'Unused CSS selector "span :not(.foo)"',
 			start: {
-				line: 11,
+				line: 26,
 				column: 1,
-				character: 125
+				character: 276
 			},
 			end: {
-				line: 11,
-				column: 8,
-				character: 132
-			}
-		},
-		{
-			code: 'css_unused_selector',
-			message: 'Unused CSS selector "p :not(.foo)"',
-			start: {
-				line: 22,
-				column: 1,
-				character: 235
-			},
-			end: {
-				line: 22,
-				column: 13,
-				character: 247
+				line: 26,
+				column: 16,
+				character: 291
 			}
 		},
 		{
 			code: 'css_unused_selector',
-			message: 'Unused CSS selector "p :not(.unused)"',
+			message: 'Unused CSS selector "span :not(.unused)"',
 			start: {
-				line: 25,
+				line: 29,
 				column: 1,
-				character: 268
+				character: 312
 			},
 			end: {
-				line: 25,
-				column: 16,
-				character: 283
+				line: 29,
+				column: 19,
+				character: 330
 			}
 		}
 	]
diff --git a/packages/svelte/tests/css/samples/not-selector/expected.css b/packages/svelte/tests/css/samples/not-selector/expected.css
index b4d51bf269..ea0b3aacac 100644
--- a/packages/svelte/tests/css/samples/not-selector/expected.css
+++ b/packages/svelte/tests/css/samples/not-selector/expected.css
@@ -1,24 +1,31 @@
 
-	.svelte-xyz:not(.foo:where(.svelte-xyz)) {
+	.svelte-xyz:not(.foo) {
 		color: green;
 	}
-	.svelte-xyz:not(.unused:where(.svelte-xyz)) {
+	.svelte-xyz:not(.unused) {
+		color: green;
+	}
+	.svelte-xyz:not(p) {
 		color: green;
 	}
-	/* (unused) :not(p) {
-		color: red;
-	}*/
 
-	.svelte-xyz:not(.foo:where(.svelte-xyz)):not(.unused:where(.svelte-xyz)) {
+	.svelte-xyz:not(.foo):not(.unused) {
 		color: green;
 	}
 
-	p.svelte-xyz:not(.foo:where(.svelte-xyz)) {
+	p.svelte-xyz:not(.foo) {
 		color: green;
 	}
-	/* (unused) p :not(.foo) {
+	/* (unused) span :not(.foo) {
 		color: red;
 	}*/
-	/* (unused) p :not(.unused) {
+	/* (unused) span :not(.unused) {
 		color: red;
 	}*/
+
+	span.svelte-xyz:not(p:where(.svelte-xyz) span:where(.svelte-xyz)) {
+		color: green;
+	}
+	span.svelte-xyz:not(:focus) {
+		color: green;
+	}
diff --git a/packages/svelte/tests/css/samples/not-selector/expected.html b/packages/svelte/tests/css/samples/not-selector/expected.html
index b4834bb818..5eeb2be294 100644
--- a/packages/svelte/tests/css/samples/not-selector/expected.html
+++ b/packages/svelte/tests/css/samples/not-selector/expected.html
@@ -1 +1,3 @@
-<p class="foo svelte-xyz">foo</p> <p class="bar svelte-xyz">bar</p>
\ No newline at end of file
+<p class="foo svelte-xyz">foo</p>
+<p class="bar svelte-xyz">bar <span class="svelte-xyz">baz</span></p>
+<span class="svelte-xyz">buzz</span>
\ No newline at end of file
diff --git a/packages/svelte/tests/css/samples/not-selector/input.svelte b/packages/svelte/tests/css/samples/not-selector/input.svelte
index a0e72c7be8..3a786530a2 100644
--- a/packages/svelte/tests/css/samples/not-selector/input.svelte
+++ b/packages/svelte/tests/css/samples/not-selector/input.svelte
@@ -1,5 +1,9 @@
 <p class="foo">foo</p>
-<p class="bar">bar</p>
+<p class="bar">
+	bar
+	<span>baz</span>
+</p>
+<span>buzz</span>
 
 <style>
 	:not(.foo) {
@@ -9,7 +13,7 @@
 		color: green;
 	}
 	:not(p) {
-		color: red;
+		color: green;
 	}
 
 	:not(.foo):not(.unused) {
@@ -19,10 +23,17 @@
 	p:not(.foo) {
 		color: green;
 	}
-	p :not(.foo) {
+	span :not(.foo) {
 		color: red;
 	}
-	p :not(.unused) {
+	span :not(.unused) {
 		color: red;
 	}
+
+	span:not(p span) {
+		color: green;
+	}
+	span:not(:focus) {
+		color: green;
+	}
 </style>
\ No newline at end of file
diff --git a/packages/svelte/tests/css/test.ts b/packages/svelte/tests/css/test.ts
index 30ad96369a..443ee02958 100644
--- a/packages/svelte/tests/css/test.ts
+++ b/packages/svelte/tests/css/test.ts
@@ -32,30 +32,17 @@ const { test, run } = suite<CssTest>(async (config, cwd) => {
 	await compile_directory(cwd, 'client', { cssHash: () => 'svelte-xyz', ...config.compileOptions });
 	await compile_directory(cwd, 'server', { cssHash: () => 'svelte-xyz', ...config.compileOptions });
 
-	const dom_css = fs.readFileSync(`${cwd}/_output/client/input.svelte.css`, 'utf-8').trim();
-	const ssr_css = fs.readFileSync(`${cwd}/_output/server/input.svelte.css`, 'utf-8').trim();
-
-	assert.equal(dom_css, ssr_css);
-
-	const dom_warnings = load_warnings(`${cwd}/_output/client/input.svelte.warnings.json`);
-	const ssr_warnings = load_warnings(`${cwd}/_output/server/input.svelte.warnings.json`);
-	const expected_warnings = (config.warnings || []).map(normalize_warning);
-	assert.deepEqual(dom_warnings, ssr_warnings);
-	assert.deepEqual(dom_warnings.map(normalize_warning), expected_warnings);
-
 	const expected = {
 		html: try_read_file(`${cwd}/expected.html`),
 		css: try_read_file(`${cwd}/expected.css`)
 	};
 
-	assert.equal(dom_css.trim().replace(/\r\n/g, '\n'), (expected.css ?? '').trim());
-
 	// we do this here, rather than in the expected.html !== null
 	// block, to verify that valid code was generated
 	const ClientComponent = (await import(`${cwd}/_output/client/input.svelte.js`)).default;
 	const ServerComponent = (await import(`${cwd}/_output/server/input.svelte.js`)).default;
 
-	// verify that the right elements have scoping selectors
+	// verify that the right elements have scoping selectors (do this first to ensure all actual files are written to disk)
 	if (expected.html !== null) {
 		const target = window.document.createElement('main');
 
@@ -75,6 +62,19 @@ const { test, run } = suite<CssTest>(async (config, cwd) => {
 		// const actual_ssr = ServerComponent.render(config.props).html;
 		// assert_html_equal(actual_ssr, expected.html);
 	}
+
+	const dom_css = fs.readFileSync(`${cwd}/_output/client/input.svelte.css`, 'utf-8').trim();
+	const ssr_css = fs.readFileSync(`${cwd}/_output/server/input.svelte.css`, 'utf-8').trim();
+
+	assert.equal(dom_css, ssr_css);
+
+	const dom_warnings = load_warnings(`${cwd}/_output/client/input.svelte.warnings.json`);
+	const ssr_warnings = load_warnings(`${cwd}/_output/server/input.svelte.warnings.json`);
+	const expected_warnings = (config.warnings || []).map(normalize_warning);
+	assert.deepEqual(dom_warnings, ssr_warnings);
+	assert.deepEqual(dom_warnings.map(normalize_warning), expected_warnings);
+
+	assert.equal(dom_css.trim().replace(/\r\n/g, '\n'), (expected.css ?? '').trim());
 });
 
 export { test };
diff --git a/packages/svelte/tests/migrate/samples/is-not-where-has/output.svelte b/packages/svelte/tests/migrate/samples/is-not-where-has/output.svelte
index 1e02e9bdfd..d8bb703ac5 100644
--- a/packages/svelte/tests/migrate/samples/is-not-where-has/output.svelte
+++ b/packages/svelte/tests/migrate/samples/is-not-where-has/output.svelte
@@ -21,22 +21,22 @@ what if i'm talking about `:has()` in my blog?
 
 <style lang="postcss">
 	div:has(:global(span)){}
-	div > :not(:global(span)){}
+	div > :not(span){}
 	div > :is(:global(span)){}
 	div > :where(:global(span)){}
 
 	div:has(:global(:is(span))){}
-	div > :not(:global(:is(span))){}
+	div > :not(:is(span)){}
 	div > :is(:global(:is(span))){}
 	div > :where(:global(:is(span))){}
 
 	div:has(:global(.class:is(span))){}
-	div > :not(:global(.class:is(span))){}
+	div > :not(.class:is(span)){}
 	div > :is(:global(.class:is(span))){}
 	div > :where(:global(.class:is(span))){}
 
 	div :has(:global(.class:is(span:where(:focus)))){}
-	div :not(:global(.class:is(span:where(:focus-within)))){}
+	div :not(.class:is(span:where(:focus-within))){}
 	div :is(:global(.class:is(span:is(:hover)))){}
 	div :where(:global(.class:is(span:has(* > *)))){}
 	div :is(:global(.class:is(span:is(:hover)), .x)){}
@@ -51,7 +51,7 @@ what if i'm talking about `:has()` in my blog?
 		p:has(:global(&)){
 
 		}
-		:not(:global(span > *)){
+		:not(span > *){
 			:where(:global(form)){}
 		}
 	}

From c49949621b1ce2bfc53963a369c649ae2d65a824 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Wed, 6 Nov 2024 08:01:05 -0500
Subject: [PATCH 026/159] Version Packages (#14167)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/four-countries-taste.md | 5 -----
 .changeset/quick-eels-occur.md     | 5 -----
 packages/svelte/CHANGELOG.md       | 8 ++++++++
 packages/svelte/package.json       | 2 +-
 packages/svelte/src/version.js     | 2 +-
 5 files changed, 10 insertions(+), 12 deletions(-)
 delete mode 100644 .changeset/four-countries-taste.md
 delete mode 100644 .changeset/quick-eels-occur.md

diff --git a/.changeset/four-countries-taste.md b/.changeset/four-countries-taste.md
deleted file mode 100644
index 6873b2ae2d..0000000000
--- a/.changeset/four-countries-taste.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: error on TypeScript's `readonly` modifier
diff --git a/.changeset/quick-eels-occur.md b/.changeset/quick-eels-occur.md
deleted file mode 100644
index e5eb153fbf..0000000000
--- a/.changeset/quick-eels-occur.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: remove scoping for `:not` selectors
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index cdda3a12c3..b57d72ea0a 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,13 @@
 # svelte
 
+## 5.1.11
+
+### Patch Changes
+
+- fix: error on TypeScript's `readonly` modifier ([#14153](https://github.com/sveltejs/svelte/pull/14153))
+
+- fix: remove scoping for `:not` selectors ([#14177](https://github.com/sveltejs/svelte/pull/14177))
+
 ## 5.1.10
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 5234e334b6..4ee792827d 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.1.10",
+  "version": "5.1.11",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index d91ee8164e..c5cc14a530 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.1.10';
+export const VERSION = '5.1.11';
 export const PUBLIC_VERSION = '5';

From 9b2a8f15fbf9c96b3cdb7af54eb72f557730a177 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Wed, 6 Nov 2024 16:48:27 +0100
Subject: [PATCH 027/159] fix: ignore `as` type expressions on property
 definitions (#14181)

fixes #14179
---
 .changeset/dull-laws-end.md                                  | 5 +++++
 .../src/compiler/phases/1-parse/remove_typescript_nodes.js   | 5 +++--
 .../svelte/tests/runtime-runes/samples/typescript/_config.js | 1 +
 .../tests/runtime-runes/samples/typescript/main.svelte       | 1 +
 4 files changed, 10 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/dull-laws-end.md

diff --git a/.changeset/dull-laws-end.md b/.changeset/dull-laws-end.md
new file mode 100644
index 0000000000..595424826e
--- /dev/null
+++ b/.changeset/dull-laws-end.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ignore `as` type expressions on property definitions
diff --git a/packages/svelte/src/compiler/phases/1-parse/remove_typescript_nodes.js b/packages/svelte/src/compiler/phases/1-parse/remove_typescript_nodes.js
index 5febef420d..36a25f5124 100644
--- a/packages/svelte/src/compiler/phases/1-parse/remove_typescript_nodes.js
+++ b/packages/svelte/src/compiler/phases/1-parse/remove_typescript_nodes.js
@@ -56,13 +56,14 @@ const visitors = {
 		if (node.exportKind === 'type') return b.empty;
 		return node;
 	},
-	PropertyDefinition(node) {
+	PropertyDefinition(node, { next }) {
 		if (node.accessor) {
 			e.typescript_invalid_feature(
 				node,
 				'accessor fields (related TSC proposal is not stage 4 yet)'
 			);
 		}
+		return next();
 	},
 	TSAsExpression(node, context) {
 		return context.visit(node.expression);
@@ -97,7 +98,7 @@ const visitors = {
 		if ((node.readonly || node.accessibility) && context.path.at(-2)?.kind === 'constructor') {
 			e.typescript_invalid_feature(node, 'accessibility modifiers on constructor parameters');
 		}
-		return node.parameter;
+		return context.visit(node.parameter);
 	},
 	FunctionExpression: remove_this_param,
 	FunctionDeclaration: remove_this_param,
diff --git a/packages/svelte/tests/runtime-runes/samples/typescript/_config.js b/packages/svelte/tests/runtime-runes/samples/typescript/_config.js
index 7c9552b7b2..c15cd18225 100644
--- a/packages/svelte/tests/runtime-runes/samples/typescript/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/typescript/_config.js
@@ -1,6 +1,7 @@
 import { flushSync } from 'svelte';
 import { test } from '../../test';
 
+// This test mainly checks that all types are properly ignored by the compiler
 export default test({
 	html: '<button>clicks: 0</button>',
 
diff --git a/packages/svelte/tests/runtime-runes/samples/typescript/main.svelte b/packages/svelte/tests/runtime-runes/samples/typescript/main.svelte
index 6c9cacdeff..71638688f2 100644
--- a/packages/svelte/tests/runtime-runes/samples/typescript/main.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/typescript/main.svelte
@@ -10,6 +10,7 @@
 
 	class Foo {
 		public name: string;
+		x = 'x' as const;
 		constructor(name: string) {
 			this.name = name;
 		}

From 26d109cb115507928e944f164ff1da7fdb93f1bd Mon Sep 17 00:00:00 2001
From: Scott <sw@scottwu.ca>
Date: Thu, 7 Nov 2024 00:32:12 +0800
Subject: [PATCH 028/159] docs: `SvelteHTMLElements` can be used for creating
 component wrapper (#14162)

---
 documentation/docs/07-misc/03-typescript.md | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/documentation/docs/07-misc/03-typescript.md b/documentation/docs/07-misc/03-typescript.md
index 5e16382187..9e4297b275 100644
--- a/documentation/docs/07-misc/03-typescript.md
+++ b/documentation/docs/07-misc/03-typescript.md
@@ -132,7 +132,7 @@ The content of `generics` is what you would put between the `<...>` tags of a ge
 
 ## Typing wrapper components
 
-In case you're writing a component that wraps a native element, you may want to expose all the attributes of underlying element to the user. In that case, use (or extend from) one of the interfaces provided by `svelte/elements`. Here's an example for a `Button` component:
+In case you're writing a component that wraps a native element, you may want to expose all the attributes of the underlying element to the user. In that case, use (or extend from) one of the interfaces provided by `svelte/elements`. Here's an example for a `Button` component:
 
 ```svelte
 <script lang="ts">
@@ -146,6 +146,20 @@ In case you're writing a component that wraps a native element, you may want to
 </button>
 ```
 
+Not all elements have a specific type definition, in those cases, use `SvelteHTMLElements`:
+
+```svelte
+<script lang="ts">
+	import type { SvelteHTMLElements } from 'svelte/elements';
+
+	let { children, ...rest }: SvelteHTMLElements['div'] = $props();
+</script>
+
+<div {...rest}>
+	{@render children()}
+</div>
+```
+
 ## Typing `$state`
 
 You can type `$state` like any other variable.

From f1aeaf19e5ed0044e5728a6357403f617abc6f6e Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Wed, 6 Nov 2024 16:41:17 +0000
Subject: [PATCH 029/159] feat: adds legacy mode flag (#14180)

* feat: adds legacy mode flag

* feedback

* feedback and tweaks

* feedback and tweaks

* tweaks

* tweaks

* tweaks

* tweaks
---
 .changeset/warm-snakes-remain.md              |  5 +++
 packages/svelte/package.json                  |  3 ++
 .../svelte/scripts/check-treeshakeability.js  | 17 ++++++++-
 .../3-transform/client/transform-client.js    |  4 ++
 packages/svelte/src/index-client.js           |  3 +-
 .../src/internal/client/dom/blocks/each.js    | 38 +++++++++----------
 .../src/internal/client/reactivity/props.js   |  3 +-
 .../src/internal/client/reactivity/sources.js |  3 +-
 .../svelte/src/internal/client/runtime.js     |  5 ++-
 packages/svelte/src/internal/flags/index.js   |  5 +++
 packages/svelte/src/internal/flags/legacy.js  |  3 ++
 .../migrate/samples/derivations/output.svelte |  2 +-
 .../migrate/samples/props-ts/output.svelte    |  2 +-
 .../_expected/client/index.svelte.js          |  1 +
 .../_expected/client/index.svelte.js          |  1 +
 .../_expected/client/index.svelte.js          |  1 +
 .../hmr/_expected/client/index.svelte.js      |  1 +
 .../_expected/client/index.svelte.js          |  1 +
 .../purity/_expected/client/index.svelte.js   |  1 +
 19 files changed, 71 insertions(+), 28 deletions(-)
 create mode 100644 .changeset/warm-snakes-remain.md
 create mode 100644 packages/svelte/src/internal/flags/index.js
 create mode 100644 packages/svelte/src/internal/flags/legacy.js

diff --git a/.changeset/warm-snakes-remain.md b/.changeset/warm-snakes-remain.md
new file mode 100644
index 0000000000..508e8763e5
--- /dev/null
+++ b/.changeset/warm-snakes-remain.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+chore: adds legacy mode flag reducing bundle size in runes mode only apps
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 4ee792827d..62fa40620a 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -53,6 +53,9 @@
     "./internal/disclose-version": {
       "default": "./src/internal/disclose-version.js"
     },
+    "./internal/flags/legacy": {
+      "default": "./src/internal/flags/legacy.js"
+    },
     "./internal/server": {
       "default": "./src/internal/server/index.js"
     },
diff --git a/packages/svelte/scripts/check-treeshakeability.js b/packages/svelte/scripts/check-treeshakeability.js
index 9263649956..1b50111b87 100644
--- a/packages/svelte/scripts/check-treeshakeability.js
+++ b/packages/svelte/scripts/check-treeshakeability.js
@@ -57,6 +57,7 @@ for (const key in pkg.exports) {
 	if (key === './compiler') continue;
 	if (key === './internal') continue;
 	if (key === './internal/disclose-version') continue;
+	if (key === './internal/flags/legacy') continue;
 
 	for (const type of ['browser', 'default']) {
 		if (!pkg.exports[key][type]) continue;
@@ -83,6 +84,7 @@ const bundle = await bundle_code(
 	// Use all features which contain hydration code to ensure it's treeshakeable
 	compile(
 		`
+<svelte:options runes />
 <script>
 	import { mount } from ${JSON.stringify(client_main)}; mount();
 	let foo;
@@ -118,12 +120,23 @@ if (!bundle.includes('hydrate_node') && !bundle.includes('hydrate_next')) {
 	// eslint-disable-next-line no-console
 	console.error(`✅ Hydration code treeshakeable`);
 } else {
-	// eslint-disable-next-line no-console
-	console.error(bundle);
+	failed = true;
 	// eslint-disable-next-line no-console
 	console.error(`❌ Hydration code not treeshakeable`);
+}
+
+if (!bundle.includes('component_context.l')) {
+	// eslint-disable-next-line no-console
+	console.error(`✅ Legacy code treeshakeable`);
+} else {
 	failed = true;
+	// eslint-disable-next-line no-console
+	console.error(`❌ Legacy code not treeshakeable`);
+}
 
+if (failed) {
+	// eslint-disable-next-line no-console
+	console.error(bundle);
 	fs.writeFileSync('scripts/_bundle.js', bundle);
 }
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js b/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
index 4daff53efb..5349f60255 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
@@ -531,6 +531,10 @@ export function client_component(analysis, options) {
 		body.push(b.stmt(b.call(b.id('$.mark_module_end'), b.id(analysis.name))));
 	}
 
+	if (!analysis.runes) {
+		body.unshift(b.imports([], 'svelte/internal/flags/legacy'));
+	}
+
 	if (options.discloseVersion) {
 		body.unshift(b.imports([], 'svelte/internal/disclose-version'));
 	}
diff --git a/packages/svelte/src/index-client.js b/packages/svelte/src/index-client.js
index ff477595a1..72811c8f17 100644
--- a/packages/svelte/src/index-client.js
+++ b/packages/svelte/src/index-client.js
@@ -6,6 +6,7 @@ import { is_array } from './internal/shared/utils.js';
 import { user_effect } from './internal/client/index.js';
 import * as e from './internal/client/errors.js';
 import { lifecycle_outside_component } from './internal/shared/errors.js';
+import { legacy_mode_flag } from './internal/flags/index.js';
 
 /**
  * The `onMount` function schedules a callback to run as soon as the component has been mounted to the DOM.
@@ -25,7 +26,7 @@ export function onMount(fn) {
 		lifecycle_outside_component('onMount');
 	}
 
-	if (component_context.l !== null) {
+	if (legacy_mode_flag && component_context.l !== null) {
 		init_update_callbacks(component_context).m.push(fn);
 	} else {
 		user_effect(() => {
diff --git a/packages/svelte/src/internal/client/dom/blocks/each.js b/packages/svelte/src/internal/client/dom/blocks/each.js
index 0fef7d343b..d62c575391 100644
--- a/packages/svelte/src/internal/client/dom/blocks/each.js
+++ b/packages/svelte/src/internal/client/dom/blocks/each.js
@@ -490,27 +490,27 @@ function update_item(item, value, index, type) {
  */
 function create_item(anchor, state, prev, next, value, key, index, render_fn, flags) {
 	var previous_each_item = current_each_item;
+	var reactive = (flags & EACH_ITEM_REACTIVE) !== 0;
+	var mutable = (flags & EACH_ITEM_IMMUTABLE) === 0;
+
+	var v = reactive ? (mutable ? mutable_source(value) : source(value)) : value;
+	var i = (flags & EACH_INDEX_REACTIVE) === 0 ? index : source(index);
+
+	/** @type {EachItem} */
+	var item = {
+		i,
+		v,
+		k: key,
+		a: null,
+		// @ts-expect-error
+		e: null,
+		prev,
+		next
+	};
+
+	current_each_item = item;
 
 	try {
-		var reactive = (flags & EACH_ITEM_REACTIVE) !== 0;
-		var mutable = (flags & EACH_ITEM_IMMUTABLE) === 0;
-
-		var v = reactive ? (mutable ? mutable_source(value) : source(value)) : value;
-		var i = (flags & EACH_INDEX_REACTIVE) === 0 ? index : source(index);
-
-		/** @type {EachItem} */
-		var item = {
-			i,
-			v,
-			k: key,
-			a: null,
-			// @ts-expect-error
-			e: null,
-			prev,
-			next
-		};
-
-		current_each_item = item;
 		item.e = branch(() => render_fn(anchor, v, i), hydrating);
 
 		item.e.prev = prev && prev.e;
diff --git a/packages/svelte/src/internal/client/reactivity/props.js b/packages/svelte/src/internal/client/reactivity/props.js
index e24deb5a20..ae934c01a5 100644
--- a/packages/svelte/src/internal/client/reactivity/props.js
+++ b/packages/svelte/src/internal/client/reactivity/props.js
@@ -23,6 +23,7 @@ import * as e from '../errors.js';
 import { BRANCH_EFFECT, LEGACY_DERIVED_PROP, ROOT_EFFECT } from '../constants.js';
 import { proxy } from '../proxy.js';
 import { capture_store_binding } from './store.js';
+import { legacy_mode_flag } from '../../flags/index.js';
 
 /**
  * @param {((value?: number) => number)} fn
@@ -270,7 +271,7 @@ function with_parent_branch(fn) {
  */
 export function prop(props, key, flags, fallback) {
 	var immutable = (flags & PROPS_IS_IMMUTABLE) !== 0;
-	var runes = (flags & PROPS_IS_RUNES) !== 0;
+	var runes = !legacy_mode_flag || (flags & PROPS_IS_RUNES) !== 0;
 	var bindable = (flags & PROPS_IS_BINDABLE) !== 0;
 	var lazy = (flags & PROPS_IS_LAZY_INITIAL) !== 0;
 	var is_store_sub = false;
diff --git a/packages/svelte/src/internal/client/reactivity/sources.js b/packages/svelte/src/internal/client/reactivity/sources.js
index bb97ea34c8..4bbd470d08 100644
--- a/packages/svelte/src/internal/client/reactivity/sources.js
+++ b/packages/svelte/src/internal/client/reactivity/sources.js
@@ -32,6 +32,7 @@ import {
 	BLOCK_EFFECT
 } from '../constants.js';
 import * as e from '../errors.js';
+import { legacy_mode_flag } from '../../flags/index.js';
 
 export let inspect_effects = new Set();
 
@@ -80,7 +81,7 @@ export function mutable_source(initial_value, immutable = false) {
 
 	// bind the signal to the component context, in case we need to
 	// track updates to trigger beforeUpdate/afterUpdate callbacks
-	if (component_context !== null && component_context.l !== null) {
+	if (legacy_mode_flag && component_context !== null && component_context.l !== null) {
 		(component_context.l.s ??= []).push(s);
 	}
 
diff --git a/packages/svelte/src/internal/client/runtime.js b/packages/svelte/src/internal/client/runtime.js
index bd4d23dd15..e9f1c773e6 100644
--- a/packages/svelte/src/internal/client/runtime.js
+++ b/packages/svelte/src/internal/client/runtime.js
@@ -33,6 +33,7 @@ import { destroy_derived, execute_derived, update_derived } from './reactivity/d
 import * as e from './errors.js';
 import { lifecycle_outside_component } from '../shared/errors.js';
 import { FILENAME } from '../../constants.js';
+import { legacy_mode_flag } from '../flags/index.js';
 
 const FLUSH_MICROTASK = 0;
 const FLUSH_SYNC = 1;
@@ -162,7 +163,7 @@ export function increment_version() {
 
 /** @returns {boolean} */
 export function is_runes() {
-	return component_context !== null && component_context.l === null;
+	return !legacy_mode_flag || (component_context !== null && component_context.l === null);
 }
 
 /**
@@ -1025,7 +1026,7 @@ export function push(props, runes = false, fn) {
 		l: null
 	};
 
-	if (!runes) {
+	if (legacy_mode_flag && !runes) {
 		component_context.l = {
 			s: null,
 			u: null,
diff --git a/packages/svelte/src/internal/flags/index.js b/packages/svelte/src/internal/flags/index.js
new file mode 100644
index 0000000000..767a40a765
--- /dev/null
+++ b/packages/svelte/src/internal/flags/index.js
@@ -0,0 +1,5 @@
+export let legacy_mode_flag = false;
+
+export function enable_legacy_mode_flag() {
+	legacy_mode_flag = true;
+}
diff --git a/packages/svelte/src/internal/flags/legacy.js b/packages/svelte/src/internal/flags/legacy.js
new file mode 100644
index 0000000000..cab3c01063
--- /dev/null
+++ b/packages/svelte/src/internal/flags/legacy.js
@@ -0,0 +1,3 @@
+import { enable_legacy_mode_flag } from './index.js';
+
+enable_legacy_mode_flag();
diff --git a/packages/svelte/tests/migrate/samples/derivations/output.svelte b/packages/svelte/tests/migrate/samples/derivations/output.svelte
index 79ff089018..5200b7f8a7 100644
--- a/packages/svelte/tests/migrate/samples/derivations/output.svelte
+++ b/packages/svelte/tests/migrate/samples/derivations/output.svelte
@@ -13,4 +13,4 @@
 	
 </script>
 
-{count} / {doubled} / {quadrupled} / {time_8} / {time_16}
+{count} / {doubled} / {quadrupled} / {time_8} / {time_16}
\ No newline at end of file
diff --git a/packages/svelte/tests/migrate/samples/props-ts/output.svelte b/packages/svelte/tests/migrate/samples/props-ts/output.svelte
index e9deea1384..b75f4383f5 100644
--- a/packages/svelte/tests/migrate/samples/props-ts/output.svelte
+++ b/packages/svelte/tests/migrate/samples/props-ts/output.svelte
@@ -39,4 +39,4 @@
 {readonly}
 {optional}
 <input bind:value={binding} />
-<input bind:value={bindingOptional} />
+<input bind:value={bindingOptional} />
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/bind-this/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/bind-this/_expected/client/index.svelte.js
index bd24eca962..fedcc87696 100644
--- a/packages/svelte/tests/snapshot/samples/bind-this/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/bind-this/_expected/client/index.svelte.js
@@ -1,4 +1,5 @@
 import "svelte/internal/disclose-version";
+import "svelte/internal/flags/legacy";
 import * as $ from "svelte/internal/client";
 
 export default function Bind_this($$anchor) {
diff --git a/packages/svelte/tests/snapshot/samples/each-string-template/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/each-string-template/_expected/client/index.svelte.js
index 81c06f23ec..80f2da11a2 100644
--- a/packages/svelte/tests/snapshot/samples/each-string-template/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/each-string-template/_expected/client/index.svelte.js
@@ -1,4 +1,5 @@
 import "svelte/internal/disclose-version";
+import "svelte/internal/flags/legacy";
 import * as $ from "svelte/internal/client";
 
 export default function Each_string_template($$anchor) {
diff --git a/packages/svelte/tests/snapshot/samples/hello-world/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/hello-world/_expected/client/index.svelte.js
index 92354d8f14..9f6f291669 100644
--- a/packages/svelte/tests/snapshot/samples/hello-world/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/hello-world/_expected/client/index.svelte.js
@@ -1,4 +1,5 @@
 import "svelte/internal/disclose-version";
+import "svelte/internal/flags/legacy";
 import * as $ from "svelte/internal/client";
 
 var root = $.template(`<h1>hello world</h1>`);
diff --git a/packages/svelte/tests/snapshot/samples/hmr/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/hmr/_expected/client/index.svelte.js
index 01daada7ac..86c2880abc 100644
--- a/packages/svelte/tests/snapshot/samples/hmr/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/hmr/_expected/client/index.svelte.js
@@ -1,4 +1,5 @@
 import "svelte/internal/disclose-version";
+import "svelte/internal/flags/legacy";
 import * as $ from "svelte/internal/client";
 
 var root = $.template(`<h1>hello world</h1>`);
diff --git a/packages/svelte/tests/snapshot/samples/imports-in-modules/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/imports-in-modules/_expected/client/index.svelte.js
index 464ef519af..9c7d2f3f23 100644
--- a/packages/svelte/tests/snapshot/samples/imports-in-modules/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/imports-in-modules/_expected/client/index.svelte.js
@@ -1,4 +1,5 @@
 import "svelte/internal/disclose-version";
+import "svelte/internal/flags/legacy";
 import * as $ from "svelte/internal/client";
 import { random } from './module.svelte';
 
diff --git a/packages/svelte/tests/snapshot/samples/purity/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/purity/_expected/client/index.svelte.js
index 305e9aa0d7..0a627a55ae 100644
--- a/packages/svelte/tests/snapshot/samples/purity/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/purity/_expected/client/index.svelte.js
@@ -1,4 +1,5 @@
 import "svelte/internal/disclose-version";
+import "svelte/internal/flags/legacy";
 import * as $ from "svelte/internal/client";
 
 var root = $.template(`<p></p> <p></p> <!>`, 1);

From 44a833fafee1dc760dfc6f18f2e699b74cb4baea Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Wed, 6 Nov 2024 18:51:09 +0100
Subject: [PATCH 030/159] fix: restore active reaction if then block throws
 (#14191)

---
 .changeset/pink-doors-chew.md                 |  5 ++
 .../src/internal/client/dom/blocks/await.js   | 64 ++++++++++---------
 .../_config.js                                | 16 +++++
 .../main.svelte                               | 21 ++++++
 4 files changed, 75 insertions(+), 31 deletions(-)
 create mode 100644 .changeset/pink-doors-chew.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/await-render-error-restore-reaction/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/await-render-error-restore-reaction/main.svelte

diff --git a/.changeset/pink-doors-chew.md b/.changeset/pink-doors-chew.md
new file mode 100644
index 0000000000..ea43c5e00c
--- /dev/null
+++ b/.changeset/pink-doors-chew.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: restore active reaction if then block throws
diff --git a/packages/svelte/src/internal/client/dom/blocks/await.js b/packages/svelte/src/internal/client/dom/blocks/await.js
index 3c6bc9900d..29ef15452f 100644
--- a/packages/svelte/src/internal/client/dom/blocks/await.js
+++ b/packages/svelte/src/internal/client/dom/blocks/await.js
@@ -70,42 +70,44 @@ export function await_block(node, get_input, pending_fn, then_fn, catch_fn) {
 			if (DEV) set_dev_current_component_function(component_function);
 		}
 
-		if (state === PENDING && pending_fn) {
-			if (pending_effect) resume_effect(pending_effect);
-			else pending_effect = branch(() => pending_fn(anchor));
-		}
-
-		if (state === THEN && then_fn) {
-			if (then_effect) resume_effect(then_effect);
-			else then_effect = branch(() => then_fn(anchor, input_source));
-		}
+		try {
+			if (state === PENDING && pending_fn) {
+				if (pending_effect) resume_effect(pending_effect);
+				else pending_effect = branch(() => pending_fn(anchor));
+			}
 
-		if (state === CATCH && catch_fn) {
-			if (catch_effect) resume_effect(catch_effect);
-			else catch_effect = branch(() => catch_fn(anchor, error_source));
-		}
+			if (state === THEN && then_fn) {
+				if (then_effect) resume_effect(then_effect);
+				else then_effect = branch(() => then_fn(anchor, input_source));
+			}
 
-		if (state !== PENDING && pending_effect) {
-			pause_effect(pending_effect, () => (pending_effect = null));
-		}
+			if (state === CATCH && catch_fn) {
+				if (catch_effect) resume_effect(catch_effect);
+				else catch_effect = branch(() => catch_fn(anchor, error_source));
+			}
 
-		if (state !== THEN && then_effect) {
-			pause_effect(then_effect, () => (then_effect = null));
-		}
+			if (state !== PENDING && pending_effect) {
+				pause_effect(pending_effect, () => (pending_effect = null));
+			}
 
-		if (state !== CATCH && catch_effect) {
-			pause_effect(catch_effect, () => (catch_effect = null));
-		}
+			if (state !== THEN && then_effect) {
+				pause_effect(then_effect, () => (then_effect = null));
+			}
 
-		if (restore) {
-			if (DEV) set_dev_current_component_function(null);
-			set_component_context(null);
-			set_active_reaction(null);
-			set_active_effect(null);
-
-			// without this, the DOM does not update until two ticks after the promise
-			// resolves, which is unexpected behaviour (and somewhat irksome to test)
-			flush_sync();
+			if (state !== CATCH && catch_effect) {
+				pause_effect(catch_effect, () => (catch_effect = null));
+			}
+		} finally {
+			if (restore) {
+				if (DEV) set_dev_current_component_function(null);
+				set_component_context(null);
+				set_active_reaction(null);
+				set_active_effect(null);
+
+				// without this, the DOM does not update until two ticks after the promise
+				// resolves, which is unexpected behaviour (and somewhat irksome to test)
+				flush_sync();
+			}
 		}
 	}
 
diff --git a/packages/svelte/tests/runtime-runes/samples/await-render-error-restore-reaction/_config.js b/packages/svelte/tests/runtime-runes/samples/await-render-error-restore-reaction/_config.js
new file mode 100644
index 0000000000..5cae253851
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/await-render-error-restore-reaction/_config.js
@@ -0,0 +1,16 @@
+import { ok, test } from '../../test';
+import { flushSync } from 'svelte';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+	async test({ target, errors, assert, window }) {
+		const btn = target.querySelector('button');
+		ok(btn);
+		flushSync(() => {
+			btn.click();
+		});
+		assert.deepEqual(errors, []);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/await-render-error-restore-reaction/main.svelte b/packages/svelte/tests/runtime-runes/samples/await-render-error-restore-reaction/main.svelte
new file mode 100644
index 0000000000..4e9e32dcab
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/await-render-error-restore-reaction/main.svelte
@@ -0,0 +1,21 @@
+<script>
+	let count = $state(0);
+
+	function listen(node){
+		function handler(){
+			count++;
+		}
+		node.addEventListener("click", handler);
+		return {
+			destroy(){
+				node.removeEventListener("click", handler);
+			}
+		}
+	}
+</script>
+
+<button use:listen></button>
+
+{#await Promise.resolve() then}
+	{err.or}
+{/await}
\ No newline at end of file

From 5ce1159ec32f6d6d7e422e63903a540dc14200bf Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 6 Nov 2024 20:54:04 -0500
Subject: [PATCH 031/159] Update 03-typescript.md (#14197)

---
 documentation/docs/07-misc/03-typescript.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/documentation/docs/07-misc/03-typescript.md b/documentation/docs/07-misc/03-typescript.md
index 9e4297b275..e02ac7b6b1 100644
--- a/documentation/docs/07-misc/03-typescript.md
+++ b/documentation/docs/07-misc/03-typescript.md
@@ -146,7 +146,7 @@ In case you're writing a component that wraps a native element, you may want to
 </button>
 ```
 
-Not all elements have a specific type definition, in those cases, use `SvelteHTMLElements`:
+Not all elements have a dedicated type definition. For those without one, use `SvelteHTMLElements`:
 
 ```svelte
 <script lang="ts">

From 7eb4cb91d78278f391fcf41839adafad5d87b7a1 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Thu, 7 Nov 2024 08:58:37 +0000
Subject: [PATCH 032/159] chore: ensure binding events are without context
 (#14194)

* chore: ensure binding events are without context

* doh
---
 .../client/dom/elements/bindings/input.js     |  2 +-
 .../client/dom/elements/bindings/shared.js    | 25 ++++++++++++++++++-
 .../client/dom/elements/bindings/window.js    | 17 +++++++------
 .../internal/client/dom/elements/events.js    | 13 +++-------
 4 files changed, 37 insertions(+), 20 deletions(-)

diff --git a/packages/svelte/src/internal/client/dom/elements/bindings/input.js b/packages/svelte/src/internal/client/dom/elements/bindings/input.js
index 7af20b932a..e528d1699e 100644
--- a/packages/svelte/src/internal/client/dom/elements/bindings/input.js
+++ b/packages/svelte/src/internal/client/dom/elements/bindings/input.js
@@ -1,6 +1,6 @@
 import { DEV } from 'esm-env';
 import { render_effect, teardown } from '../../../reactivity/effects.js';
-import { listen_to_event_and_reset_event } from './shared.js';
+import { listen_to_event_and_reset_event, without_reactive_context } from './shared.js';
 import * as e from '../../../errors.js';
 import { is } from '../../../proxy.js';
 import { queue_micro_task } from '../../task.js';
diff --git a/packages/svelte/src/internal/client/dom/elements/bindings/shared.js b/packages/svelte/src/internal/client/dom/elements/bindings/shared.js
index 195eae2200..832b7f45e5 100644
--- a/packages/svelte/src/internal/client/dom/elements/bindings/shared.js
+++ b/packages/svelte/src/internal/client/dom/elements/bindings/shared.js
@@ -1,4 +1,10 @@
 import { teardown } from '../../../reactivity/effects.js';
+import {
+	active_effect,
+	active_reaction,
+	set_active_effect,
+	set_active_reaction
+} from '../../../runtime.js';
 import { add_form_reset_listener } from '../misc.js';
 
 /**
@@ -25,6 +31,23 @@ export function listen(target, events, handler, call_handler_immediately = true)
 	});
 }
 
+/**
+ * @template T
+ * @param {() => T} fn
+ */
+export function without_reactive_context(fn) {
+	var previous_reaction = active_reaction;
+	var previous_effect = active_effect;
+	set_active_reaction(null);
+	set_active_effect(null);
+	try {
+		return fn();
+	} finally {
+		set_active_reaction(previous_reaction);
+		set_active_effect(previous_effect);
+	}
+}
+
 /**
  * Listen to the given event, and then instantiate a global form reset listener if not already done,
  * to notify all bindings when the form is reset
@@ -34,7 +57,7 @@ export function listen(target, events, handler, call_handler_immediately = true)
  * @param {() => void} [on_reset]
  */
 export function listen_to_event_and_reset_event(element, event, handler, on_reset = handler) {
-	element.addEventListener(event, handler);
+	element.addEventListener(event, () => without_reactive_context(handler));
 	// @ts-expect-error
 	const prev = element.__on_r;
 	if (prev) {
diff --git a/packages/svelte/src/internal/client/dom/elements/bindings/window.js b/packages/svelte/src/internal/client/dom/elements/bindings/window.js
index 61775b9d4b..2f7e44c5d9 100644
--- a/packages/svelte/src/internal/client/dom/elements/bindings/window.js
+++ b/packages/svelte/src/internal/client/dom/elements/bindings/window.js
@@ -1,5 +1,5 @@
 import { effect, render_effect, teardown } from '../../../reactivity/effects.js';
-import { listen } from './shared.js';
+import { listen, without_reactive_context } from './shared.js';
 
 /**
  * @param {'x' | 'y'} type
@@ -10,13 +10,14 @@ import { listen } from './shared.js';
 export function bind_window_scroll(type, get, set = get) {
 	var is_scrolling_x = type === 'x';
 
-	var target_handler = () => {
-		scrolling = true;
-		clearTimeout(timeout);
-		timeout = setTimeout(clear, 100); // TODO use scrollend event if supported (or when supported everywhere?)
+	var target_handler = () =>
+		without_reactive_context(() => {
+			scrolling = true;
+			clearTimeout(timeout);
+			timeout = setTimeout(clear, 100); // TODO use scrollend event if supported (or when supported everywhere?)
 
-		set(window[is_scrolling_x ? 'scrollX' : 'scrollY']);
-	};
+			set(window[is_scrolling_x ? 'scrollX' : 'scrollY']);
+		});
 
 	addEventListener('scroll', target_handler, {
 		passive: true
@@ -61,5 +62,5 @@ export function bind_window_scroll(type, get, set = get) {
  * @param {(size: number) => void} set
  */
 export function bind_window_size(type, set) {
-	listen(window, ['resize'], () => set(window[type]));
+	listen(window, ['resize'], () => without_reactive_context(() => set(window[type])));
 }
diff --git a/packages/svelte/src/internal/client/dom/elements/events.js b/packages/svelte/src/internal/client/dom/elements/events.js
index 12108b00f8..f2038f96ad 100644
--- a/packages/svelte/src/internal/client/dom/elements/events.js
+++ b/packages/svelte/src/internal/client/dom/elements/events.js
@@ -11,6 +11,7 @@ import {
 	set_active_effect,
 	set_active_reaction
 } from '../../runtime.js';
+import { without_reactive_context } from './bindings/shared.js';
 
 /** @type {Set<string>} */
 export const all_registered_events = new Set();
@@ -61,17 +62,9 @@ export function create_event(event_name, dom, handler, options) {
 			handle_event_propagation.call(dom, event);
 		}
 		if (!event.cancelBubble) {
-			var previous_reaction = active_reaction;
-			var previous_effect = active_effect;
-
-			set_active_reaction(null);
-			set_active_effect(null);
-			try {
+			return without_reactive_context(() => {
 				return handler.call(this, event);
-			} finally {
-				set_active_reaction(previous_reaction);
-				set_active_effect(previous_effect);
-			}
+			});
 		}
 	}
 

From d7caf0833c2ee5b4b59da1bf4b801873a6a013bc Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 7 Nov 2024 09:00:26 +0000
Subject: [PATCH 033/159] Version Packages (#14184)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/dull-laws-end.md      |  5 -----
 .changeset/pink-doors-chew.md    |  5 -----
 .changeset/warm-snakes-remain.md |  5 -----
 packages/svelte/CHANGELOG.md     | 10 ++++++++++
 packages/svelte/package.json     |  2 +-
 packages/svelte/src/version.js   |  2 +-
 6 files changed, 12 insertions(+), 17 deletions(-)
 delete mode 100644 .changeset/dull-laws-end.md
 delete mode 100644 .changeset/pink-doors-chew.md
 delete mode 100644 .changeset/warm-snakes-remain.md

diff --git a/.changeset/dull-laws-end.md b/.changeset/dull-laws-end.md
deleted file mode 100644
index 595424826e..0000000000
--- a/.changeset/dull-laws-end.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: ignore `as` type expressions on property definitions
diff --git a/.changeset/pink-doors-chew.md b/.changeset/pink-doors-chew.md
deleted file mode 100644
index ea43c5e00c..0000000000
--- a/.changeset/pink-doors-chew.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: restore active reaction if then block throws
diff --git a/.changeset/warm-snakes-remain.md b/.changeset/warm-snakes-remain.md
deleted file mode 100644
index 508e8763e5..0000000000
--- a/.changeset/warm-snakes-remain.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-chore: adds legacy mode flag reducing bundle size in runes mode only apps
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index b57d72ea0a..4283f406d6 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,15 @@
 # svelte
 
+## 5.1.12
+
+### Patch Changes
+
+- fix: ignore `as` type expressions on property definitions ([#14181](https://github.com/sveltejs/svelte/pull/14181))
+
+- fix: restore active reaction if then block throws ([#14191](https://github.com/sveltejs/svelte/pull/14191))
+
+- chore: adds legacy mode flag reducing bundle size in runes mode only apps ([#14180](https://github.com/sveltejs/svelte/pull/14180))
+
 ## 5.1.11
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 62fa40620a..0b0eb32ffd 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.1.11",
+  "version": "5.1.12",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index c5cc14a530..9c883457e8 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.1.11';
+export const VERSION = '5.1.12';
 export const PUBLIC_VERSION = '5';

From 1eed645919bf9f0f5a2d609752ce1570e3d5876e Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Thu, 7 Nov 2024 15:30:06 +0100
Subject: [PATCH 034/159] fix: ensure explicit nesting selector is always
 applied (#14193)

Previously, we were applying an explicit nesting selector to the start of a relative selector chain only when starting the traversal. Prepending the selector is important because it ensures we traverse upwards to the parent rule when the current selectors all matched and there's still more to do. But we forgot to do the prepend for parent rules, which meant that if we were nested two levels deep, we would stop too early. This fix ensures we prepend in that case, too.

Fixes #14178
---
 .changeset/nice-numbers-remember.md           |  5 ++
 .../phases/2-analyze/css/css-prune.js         | 77 +++++++++++--------
 .../css/samples/nested-in-pseudo/_config.js   |  5 --
 .../css/samples/nested-in-pseudo/expected.css |  6 --
 .../samples/nested-in-pseudo/expected.html    |  1 -
 .../css/samples/nested-in-pseudo/input.svelte | 11 ---
 .../css/samples/nesting-selectors/_config.js  | 48 ++++++++++++
 .../samples/nesting-selectors/expected.css    | 37 +++++++++
 .../samples/nesting-selectors/expected.html   |  1 +
 .../samples/nesting-selectors/input.svelte    | 42 ++++++++++
 10 files changed, 179 insertions(+), 54 deletions(-)
 create mode 100644 .changeset/nice-numbers-remember.md
 delete mode 100644 packages/svelte/tests/css/samples/nested-in-pseudo/_config.js
 delete mode 100644 packages/svelte/tests/css/samples/nested-in-pseudo/expected.css
 delete mode 100644 packages/svelte/tests/css/samples/nested-in-pseudo/expected.html
 delete mode 100644 packages/svelte/tests/css/samples/nested-in-pseudo/input.svelte
 create mode 100644 packages/svelte/tests/css/samples/nesting-selectors/_config.js
 create mode 100644 packages/svelte/tests/css/samples/nesting-selectors/expected.css
 create mode 100644 packages/svelte/tests/css/samples/nesting-selectors/expected.html
 create mode 100644 packages/svelte/tests/css/samples/nesting-selectors/input.svelte

diff --git a/.changeset/nice-numbers-remember.md b/.changeset/nice-numbers-remember.md
new file mode 100644
index 0000000000..810343aedf
--- /dev/null
+++ b/.changeset/nice-numbers-remember.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ensure explicit nesting selector is always applied
diff --git a/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js b/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js
index 4306d49d81..4207a16502 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js
@@ -77,38 +77,9 @@ const visitors = {
 		}
 	},
 	ComplexSelector(node, context) {
-		const selectors = truncate(node);
+		const selectors = get_relative_selectors(node);
 		const inner = selectors[selectors.length - 1];
 
-		if (node.metadata.rule?.metadata.parent_rule && selectors.length > 0) {
-			let has_explicit_nesting_selector = false;
-
-			// nesting could be inside pseudo classes like :is, :has or :where
-			for (let selector of selectors) {
-				walk(
-					selector,
-					{},
-					{
-						// @ts-ignore
-						NestingSelector() {
-							has_explicit_nesting_selector = true;
-						}
-					}
-				);
-				// if we found one we can break from the others
-				if (has_explicit_nesting_selector) break;
-			}
-
-			if (!has_explicit_nesting_selector) {
-				selectors[0] = {
-					...selectors[0],
-					combinator: descendant_combinator
-				};
-
-				selectors.unshift(nesting_selector);
-			}
-		}
-
 		if (context.state.from_render_tag) {
 			// We're searching for a match that crosses a render tag boundary. That means we have to both traverse up
 			// the element tree (to see if we find an entry point) but also remove selectors from the end (assuming
@@ -156,6 +127,50 @@ const visitors = {
 	}
 };
 
+/**
+ * Retrieves the relative selectors (minus the trailing globals) from a complex selector.
+ * Also searches them for any existing `&` selectors and adds one if none are found.
+ * This ensures we traverse up to the parent rule when the inner selectors match and we're
+ * trying to see if the parent rule also matches.
+ * @param {Compiler.Css.ComplexSelector} node
+ */
+function get_relative_selectors(node) {
+	const selectors = truncate(node);
+
+	if (node.metadata.rule?.metadata.parent_rule && selectors.length > 0) {
+		let has_explicit_nesting_selector = false;
+
+		// nesting could be inside pseudo classes like :is, :has or :where
+		for (let selector of selectors) {
+			walk(
+				selector,
+				{},
+				{
+					// @ts-ignore
+					NestingSelector() {
+						has_explicit_nesting_selector = true;
+					}
+				}
+			);
+			// if we found one we can break from the others
+			if (has_explicit_nesting_selector) break;
+		}
+
+		if (!has_explicit_nesting_selector) {
+			if (selectors[0].combinator === null) {
+				selectors[0] = {
+					...selectors[0],
+					combinator: descendant_combinator
+				};
+			}
+
+			selectors.unshift(nesting_selector);
+		}
+	}
+
+	return selectors;
+}
+
 /**
  * Discard trailing `:global(...)` selectors without a `:has/is/where/not(...)` modifier, these are unused for scoping purposes
  * @param {Compiler.Css.ComplexSelector} node
@@ -641,7 +656,7 @@ function relative_selector_might_apply_to_node(relative_selector, rule, element,
 				const parent = /** @type {Compiler.Css.Rule} */ (rule.metadata.parent_rule);
 
 				for (const complex_selector of parent.prelude.children) {
-					if (apply_selector(truncate(complex_selector), parent, element, state)) {
+					if (apply_selector(get_relative_selectors(complex_selector), parent, element, state)) {
 						complex_selector.metadata.used = true;
 						matched = true;
 					}
diff --git a/packages/svelte/tests/css/samples/nested-in-pseudo/_config.js b/packages/svelte/tests/css/samples/nested-in-pseudo/_config.js
deleted file mode 100644
index 292c6c49ac..0000000000
--- a/packages/svelte/tests/css/samples/nested-in-pseudo/_config.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import { test } from '../../test';
-
-export default test({
-	warnings: []
-});
diff --git a/packages/svelte/tests/css/samples/nested-in-pseudo/expected.css b/packages/svelte/tests/css/samples/nested-in-pseudo/expected.css
deleted file mode 100644
index 3f365a8988..0000000000
--- a/packages/svelte/tests/css/samples/nested-in-pseudo/expected.css
+++ /dev/null
@@ -1,6 +0,0 @@
-
-nav.svelte-xyz{
-	header:where(.svelte-xyz):has(&){
-		color: red;
-	}
-}	
diff --git a/packages/svelte/tests/css/samples/nested-in-pseudo/expected.html b/packages/svelte/tests/css/samples/nested-in-pseudo/expected.html
deleted file mode 100644
index 44a5d4a52d..0000000000
--- a/packages/svelte/tests/css/samples/nested-in-pseudo/expected.html
+++ /dev/null
@@ -1 +0,0 @@
-<header class="svelte-xyz"><nav class="svelte-xyz"></nav></header>
\ No newline at end of file
diff --git a/packages/svelte/tests/css/samples/nested-in-pseudo/input.svelte b/packages/svelte/tests/css/samples/nested-in-pseudo/input.svelte
deleted file mode 100644
index 8a6758f60f..0000000000
--- a/packages/svelte/tests/css/samples/nested-in-pseudo/input.svelte
+++ /dev/null
@@ -1,11 +0,0 @@
-<header>
-	<nav></nav>		
-</header>
-
-<style>
-nav{
-	header:has(&){
-		color: red;
-	}
-}	
-</style>
\ No newline at end of file
diff --git a/packages/svelte/tests/css/samples/nesting-selectors/_config.js b/packages/svelte/tests/css/samples/nesting-selectors/_config.js
new file mode 100644
index 0000000000..8960eff1b6
--- /dev/null
+++ b/packages/svelte/tests/css/samples/nesting-selectors/_config.js
@@ -0,0 +1,48 @@
+import { test } from '../../test';
+
+export default test({
+	warnings: [
+		{
+			code: 'css_unused_selector',
+			message: 'Unused CSS selector ".unused:has(&)"',
+			start: {
+				line: 10,
+				column: 2,
+				character: 105
+			},
+			end: {
+				line: 10,
+				column: 16,
+				character: 119
+			}
+		},
+		{
+			code: 'css_unused_selector',
+			message: 'Unused CSS selector "&.unused"',
+			start: {
+				line: 23,
+				column: 3,
+				character: 223
+			},
+			end: {
+				line: 23,
+				column: 11,
+				character: 231
+			}
+		},
+		{
+			code: 'css_unused_selector',
+			message: 'Unused CSS selector "&.unused"',
+			start: {
+				line: 37,
+				column: 3,
+				character: 344
+			},
+			end: {
+				line: 37,
+				column: 11,
+				character: 352
+			}
+		}
+	]
+});
diff --git a/packages/svelte/tests/css/samples/nesting-selectors/expected.css b/packages/svelte/tests/css/samples/nesting-selectors/expected.css
new file mode 100644
index 0000000000..1b606b10ca
--- /dev/null
+++ b/packages/svelte/tests/css/samples/nesting-selectors/expected.css
@@ -0,0 +1,37 @@
+
+	nav.svelte-xyz {
+		header:where(.svelte-xyz):has(&){
+			color: green;
+		}
+		/* (unused) .unused:has(&){
+			color: red;
+		}*/
+	}
+
+	header.svelte-xyz {
+		> nav:where(.svelte-xyz) {
+			color: green;
+
+			&.active {
+				color: green;
+			}
+
+			/* (unused) &.unused {
+				color: red;
+			}*/
+		}
+	}
+
+	header.svelte-xyz {
+		& > nav:where(.svelte-xyz) {
+			color: green;
+
+			&.active {
+				color: green;
+			}
+
+			/* (unused) &.unused {
+				color: red;
+			}*/
+		}
+	}
diff --git a/packages/svelte/tests/css/samples/nesting-selectors/expected.html b/packages/svelte/tests/css/samples/nesting-selectors/expected.html
new file mode 100644
index 0000000000..59e17c2d02
--- /dev/null
+++ b/packages/svelte/tests/css/samples/nesting-selectors/expected.html
@@ -0,0 +1 @@
+<header class="svelte-xyz"><nav class="active svelte-xyz"></nav></header>
\ No newline at end of file
diff --git a/packages/svelte/tests/css/samples/nesting-selectors/input.svelte b/packages/svelte/tests/css/samples/nesting-selectors/input.svelte
new file mode 100644
index 0000000000..98881237c0
--- /dev/null
+++ b/packages/svelte/tests/css/samples/nesting-selectors/input.svelte
@@ -0,0 +1,42 @@
+<header>
+	<nav class="active"></nav>		
+</header>
+
+<style>
+	nav {
+		header:has(&){
+			color: green;
+		}
+		.unused:has(&){
+			color: red;
+		}
+	}
+
+	header {
+		> nav {
+			color: green;
+
+			&.active {
+				color: green;
+			}
+
+			&.unused {
+				color: red;
+			}
+		}
+	}
+
+	header {
+		& > nav {
+			color: green;
+
+			&.active {
+				color: green;
+			}
+
+			&.unused {
+				color: red;
+			}
+		}
+	}
+</style>
\ No newline at end of file

From ea0d80e1950b5c62547c69a26c823282e8d88ad3 Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Thu, 7 Nov 2024 15:33:02 +0100
Subject: [PATCH 035/159] fix: consider variables with synthetic store sub as
 state (#14195)

Fixes #14183
---
 .changeset/giant-waves-act.md                 |  5 ++++
 .../src/compiler/phases/2-analyze/index.js    | 11 +++++++
 .../variable-assigned-store-state/Test.svelte | 11 +++++++
 .../variable-assigned-store-state/_config.js  | 29 +++++++++++++++++++
 .../variable-assigned-store-state/main.svelte |  9 ++++++
 5 files changed, 65 insertions(+)
 create mode 100644 .changeset/giant-waves-act.md
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/variable-assigned-store-state/Test.svelte
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/variable-assigned-store-state/_config.js
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/variable-assigned-store-state/main.svelte

diff --git a/.changeset/giant-waves-act.md b/.changeset/giant-waves-act.md
new file mode 100644
index 0000000000..591f0f25ba
--- /dev/null
+++ b/.changeset/giant-waves-act.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: consider variables with synthetic store sub as state
diff --git a/packages/svelte/src/compiler/phases/2-analyze/index.js b/packages/svelte/src/compiler/phases/2-analyze/index.js
index f5a31d09a7..36d8145145 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/index.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/index.js
@@ -351,6 +351,17 @@ export function analyze_component(root, source, options) {
 				}
 			}
 
+			// if we are creating a synthetic binding for a let declaration we should also declare
+			// the declaration as state in case it's reassigned
+			if (
+				declaration !== null &&
+				declaration.kind === 'normal' &&
+				declaration.declaration_kind === 'let' &&
+				declaration.reassigned
+			) {
+				declaration.kind = 'state';
+			}
+
 			const binding = instance.scope.declare(b.id(name), 'store_sub', 'synthetic');
 			binding.references = references;
 			instance.scope.references.set(name, references);
diff --git a/packages/svelte/tests/runtime-legacy/samples/variable-assigned-store-state/Test.svelte b/packages/svelte/tests/runtime-legacy/samples/variable-assigned-store-state/Test.svelte
new file mode 100644
index 0000000000..8b11acb279
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/variable-assigned-store-state/Test.svelte
@@ -0,0 +1,11 @@
+<script>
+	export let store;
+
+	let currentStore;
+	function update(){
+		currentStore = store
+	}
+</script>
+
+<button on:click={update}></button>
+<p>{$currentStore}</p>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-legacy/samples/variable-assigned-store-state/_config.js b/packages/svelte/tests/runtime-legacy/samples/variable-assigned-store-state/_config.js
new file mode 100644
index 0000000000..eecdcb2462
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/variable-assigned-store-state/_config.js
@@ -0,0 +1,29 @@
+import { flushSync } from 'svelte';
+import { ok, test } from '../../test';
+
+export default test({
+	async test({ assert, target, window }) {
+		const [btn1, btn2] = target.querySelectorAll('button');
+		const p = target.querySelector('p');
+
+		assert.equal(p?.innerHTML, '');
+
+		flushSync(() => {
+			btn2.click();
+		});
+
+		assert.equal(p?.innerHTML, '1');
+
+		flushSync(() => {
+			btn1.click();
+		});
+
+		assert.equal(p?.innerHTML, '1');
+
+		flushSync(() => {
+			btn2.click();
+		});
+
+		assert.equal(p?.innerHTML, '2');
+	}
+});
diff --git a/packages/svelte/tests/runtime-legacy/samples/variable-assigned-store-state/main.svelte b/packages/svelte/tests/runtime-legacy/samples/variable-assigned-store-state/main.svelte
new file mode 100644
index 0000000000..5033fbc526
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/variable-assigned-store-state/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	import { writable } from 'svelte/store'
+	import Test from './Test.svelte'
+	let counter = 1
+	let store = writable(counter)
+</script>
+
+<button on:click={() => store = writable(++counter)}></button>
+<Test {store} />
\ No newline at end of file

From 53af138d588f77bb8f4f10f9ad15fd4f798b50ef Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Thu, 7 Nov 2024 21:18:45 +0100
Subject: [PATCH 036/159] fix: read index as a source in legacy keyed each
 block (#14208)

Fixes #14203
---
 .changeset/late-dodos-film.md                          |  5 +++++
 .../phases/3-transform/client/visitors/EachBlock.js    |  4 ++--
 .../keyed-each-bind-read-index/Component.svelte        |  5 +++++
 .../samples/keyed-each-bind-read-index/_config.js      |  9 +++++++++
 .../samples/keyed-each-bind-read-index/main.svelte     | 10 ++++++++++
 5 files changed, 31 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/late-dodos-film.md
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/keyed-each-bind-read-index/Component.svelte
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/keyed-each-bind-read-index/_config.js
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/keyed-each-bind-read-index/main.svelte

diff --git a/.changeset/late-dodos-film.md b/.changeset/late-dodos-film.md
new file mode 100644
index 0000000000..c3636019da
--- /dev/null
+++ b/.changeset/late-dodos-film.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: read index as a source in legacy keyed each block
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/EachBlock.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/EachBlock.js
index fb6338cae3..55d7ded247 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/EachBlock.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/EachBlock.js
@@ -196,7 +196,7 @@ export function EachBlock(node, context) {
 					// forbidden in runes mode
 					return b.member(
 						each_node_meta.array_name ? b.call(each_node_meta.array_name) : collection,
-						index,
+						(flags & EACH_INDEX_REACTIVE) !== 0 ? get_value(index) : index,
 						true
 					);
 				}
@@ -208,7 +208,7 @@ export function EachBlock(node, context) {
 
 				const left = b.member(
 					each_node_meta.array_name ? b.call(each_node_meta.array_name) : collection,
-					index,
+					(flags & EACH_INDEX_REACTIVE) !== 0 ? get_value(index) : index,
 					true
 				);
 
diff --git a/packages/svelte/tests/runtime-legacy/samples/keyed-each-bind-read-index/Component.svelte b/packages/svelte/tests/runtime-legacy/samples/keyed-each-bind-read-index/Component.svelte
new file mode 100644
index 0000000000..988c2b6457
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/keyed-each-bind-read-index/Component.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let item;
+	console.log(item);
+	item = 1;
+</script>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-legacy/samples/keyed-each-bind-read-index/_config.js b/packages/svelte/tests/runtime-legacy/samples/keyed-each-bind-read-index/_config.js
new file mode 100644
index 0000000000..8b5db4df40
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/keyed-each-bind-read-index/_config.js
@@ -0,0 +1,9 @@
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target, logs }) {
+		const p = target.querySelector('p');
+		assert.equal(p?.innerHTML, '1');
+		assert.deepEqual(logs, [0]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-legacy/samples/keyed-each-bind-read-index/main.svelte b/packages/svelte/tests/runtime-legacy/samples/keyed-each-bind-read-index/main.svelte
new file mode 100644
index 0000000000..384722f5aa
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/keyed-each-bind-read-index/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	import Component from './Component.svelte';
+	const items = [0];
+</script>
+
+{#each items as item, idx(item)}
+	<Component bind:item />
+{/each}
+
+<p>{items}</p>
\ No newline at end of file

From 870745fc5370d0bb6b2c5186bffcc1602168a4a7 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Fri, 8 Nov 2024 10:53:43 +0100
Subject: [PATCH 037/159] fix: handle sibling combinators within `:has`
 (#14213)

We didn't collect sibling elements of a given element to then check the `:has` selectors. This adds the logic for that. Fixes #14072
---
 .changeset/four-jobs-care.md                  |  5 ++
 .../phases/2-analyze/css/css-prune.js         | 53 ++++++++++++++++++-
 .../svelte/tests/css/samples/has/_config.js   | 14 +++++
 .../svelte/tests/css/samples/has/expected.css | 10 ++++
 .../svelte/tests/css/samples/has/input.svelte | 10 ++++
 5 files changed, 91 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/four-jobs-care.md

diff --git a/.changeset/four-jobs-care.md b/.changeset/four-jobs-care.md
new file mode 100644
index 0000000000..51e5d22313
--- /dev/null
+++ b/.changeset/four-jobs-care.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: handle sibling combinators within `:has`
diff --git a/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js b/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js
index 4207a16502..a9ea9fe913 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js
@@ -412,6 +412,8 @@ function relative_selector_might_apply_to_node(relative_selector, rule, element,
 		const child_elements = [];
 		/** @type {Array<Compiler.AST.RegularElement | Compiler.AST.SvelteElement>} */
 		const descendant_elements = [];
+		/** @type {Array<Compiler.AST.RegularElement | Compiler.AST.SvelteElement>} */
+		let sibling_elements; // do them lazy because it's rarely used and expensive to calculate
 
 		walk(
 			/** @type {Compiler.SvelteNode} */ (element.fragment),
@@ -457,7 +459,11 @@ function relative_selector_might_apply_to_node(relative_selector, rule, element,
 				}
 
 				const descendants =
-					left_most_combinator.name === '>' ? child_elements : descendant_elements;
+					left_most_combinator.name === '+' || left_most_combinator.name === '~'
+						? (sibling_elements ??= get_following_sibling_elements(element))
+						: left_most_combinator.name === '>'
+							? child_elements
+							: descendant_elements;
 
 				let selector_matched = false;
 
@@ -675,6 +681,51 @@ function relative_selector_might_apply_to_node(relative_selector, rule, element,
 	return true;
 }
 
+/** @param {Compiler.AST.RegularElement | Compiler.AST.SvelteElement} element */
+function get_following_sibling_elements(element) {
+	/** @type {Compiler.AST.RegularElement | Compiler.AST.SvelteElement | Compiler.AST.Root | null} */
+	let parent = get_element_parent(element);
+
+	if (!parent) {
+		parent = element;
+		while (parent?.type !== 'Root') {
+			parent = /** @type {any} */ (parent).parent;
+		}
+	}
+
+	/** @type {Array<Compiler.AST.RegularElement | Compiler.AST.SvelteElement>} */
+	const sibling_elements = [];
+	let found_parent = false;
+
+	for (const el of parent.fragment.nodes) {
+		if (found_parent) {
+			walk(
+				el,
+				{},
+				{
+					RegularElement(node) {
+						sibling_elements.push(node);
+					},
+					SvelteElement(node) {
+						sibling_elements.push(node);
+					}
+				}
+			);
+		} else {
+			/** @type {any} */
+			let child = element;
+			while (child !== el && child !== parent) {
+				child = child.parent;
+			}
+			if (child === el) {
+				found_parent = true;
+			}
+		}
+	}
+
+	return sibling_elements;
+}
+
 /**
  * @param {any} operator
  * @param {any} expected_value
diff --git a/packages/svelte/tests/css/samples/has/_config.js b/packages/svelte/tests/css/samples/has/_config.js
index 675254c5b7..8b8e7760f5 100644
--- a/packages/svelte/tests/css/samples/has/_config.js
+++ b/packages/svelte/tests/css/samples/has/_config.js
@@ -127,6 +127,20 @@ export default test({
 				column: 11,
 				character: 1134
 			}
+		},
+		{
+			code: 'css_unused_selector',
+			message: 'Unused CSS selector "x:has(~ y)"',
+			start: {
+				line: 121,
+				column: 1,
+				character: 1326
+			},
+			end: {
+				line: 121,
+				column: 11,
+				character: 1336
+			}
 		}
 	]
 });
diff --git a/packages/svelte/tests/css/samples/has/expected.css b/packages/svelte/tests/css/samples/has/expected.css
index 251a6952d5..4cb8d76bf6 100644
--- a/packages/svelte/tests/css/samples/has/expected.css
+++ b/packages/svelte/tests/css/samples/has/expected.css
@@ -101,3 +101,13 @@
 	x.svelte-xyz:has(y:where(.svelte-xyz)) + c:where(.svelte-xyz) {
 		color: green;
 	}
+
+	x.svelte-xyz:has(+ c:where(.svelte-xyz)) {
+		color: green;
+	}
+	x.svelte-xyz:has(~ c:where(.svelte-xyz)) {
+		color: green;
+	}
+	/* (unused) x:has(~ y) {
+		color: red;
+	}*/
diff --git a/packages/svelte/tests/css/samples/has/input.svelte b/packages/svelte/tests/css/samples/has/input.svelte
index 7a62b69c0b..8eb6296f05 100644
--- a/packages/svelte/tests/css/samples/has/input.svelte
+++ b/packages/svelte/tests/css/samples/has/input.svelte
@@ -111,4 +111,14 @@
 	x:has(y) + c {
 		color: green;
 	}
+
+	x:has(+ c) {
+		color: green;
+	}
+	x:has(~ c) {
+		color: green;
+	}
+	x:has(~ y) {
+		color: red;
+	}
 </style>

From 438de04fb2a753287bfd9fd420711cc7cd971012 Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Fri, 8 Nov 2024 11:18:50 +0100
Subject: [PATCH 038/159] fix: add migration task when there's a variable named
 that would conflict with a rune (#14216)

Closes #14215
---
 .changeset/chatty-gorillas-poke.md            |  5 ++
 packages/svelte/src/compiler/migrate/index.js | 50 +++++++++++++++++++
 .../_config.js                                |  8 +++
 .../input.svelte                              |  6 +++
 .../output.svelte                             |  8 +++
 .../_config.js                                |  8 +++
 .../input.svelte                              |  9 ++++
 .../output.svelte                             | 11 ++++
 .../_config.js                                |  8 +++
 .../input.svelte                              |  5 ++
 .../output.svelte                             |  7 +++
 .../_config.js                                |  8 +++
 .../input.svelte                              |  6 +++
 .../output.svelte                             |  7 +++
 .../_config.js                                |  8 +++
 .../input.svelte                              | 10 ++++
 .../output.svelte                             | 12 +++++
 .../_config.js                                |  8 +++
 .../input.svelte                              |  4 ++
 .../output.svelte                             |  6 +++
 .../_config.js                                |  8 +++
 .../input.svelte                              |  7 +++
 .../output.svelte                             |  9 ++++
 .../_config.js                                |  8 +++
 .../input.svelte                              |  7 +++
 .../output.svelte                             |  9 ++++
 .../_config.js                                |  8 +++
 .../input.svelte                              |  7 +++
 .../output.svelte                             |  9 ++++
 29 files changed, 266 insertions(+)
 create mode 100644 .changeset/chatty-gorillas-poke.md
 create mode 100644 packages/svelte/tests/migrate/samples/impossible-migrate-$bindable-bindable-var-1/_config.js
 create mode 100644 packages/svelte/tests/migrate/samples/impossible-migrate-$bindable-bindable-var-1/input.svelte
 create mode 100644 packages/svelte/tests/migrate/samples/impossible-migrate-$bindable-bindable-var-1/output.svelte
 create mode 100644 packages/svelte/tests/migrate/samples/impossible-migrate-$derived-derived-var-1/_config.js
 create mode 100644 packages/svelte/tests/migrate/samples/impossible-migrate-$derived-derived-var-1/input.svelte
 create mode 100644 packages/svelte/tests/migrate/samples/impossible-migrate-$derived-derived-var-1/output.svelte
 create mode 100644 packages/svelte/tests/migrate/samples/impossible-migrate-$derived-derived-var-2/_config.js
 create mode 100644 packages/svelte/tests/migrate/samples/impossible-migrate-$derived-derived-var-2/input.svelte
 create mode 100644 packages/svelte/tests/migrate/samples/impossible-migrate-$derived-derived-var-2/output.svelte
 create mode 100644 packages/svelte/tests/migrate/samples/impossible-migrate-$derived-derived-var-3/_config.js
 create mode 100644 packages/svelte/tests/migrate/samples/impossible-migrate-$derived-derived-var-3/input.svelte
 create mode 100644 packages/svelte/tests/migrate/samples/impossible-migrate-$derived-derived-var-3/output.svelte
 create mode 100644 packages/svelte/tests/migrate/samples/impossible-migrate-$derived-derived-var-4/_config.js
 create mode 100644 packages/svelte/tests/migrate/samples/impossible-migrate-$derived-derived-var-4/input.svelte
 create mode 100644 packages/svelte/tests/migrate/samples/impossible-migrate-$derived-derived-var-4/output.svelte
 create mode 100644 packages/svelte/tests/migrate/samples/impossible-migrate-$props-props-var-1/_config.js
 create mode 100644 packages/svelte/tests/migrate/samples/impossible-migrate-$props-props-var-1/input.svelte
 create mode 100644 packages/svelte/tests/migrate/samples/impossible-migrate-$props-props-var-1/output.svelte
 create mode 100644 packages/svelte/tests/migrate/samples/impossible-migrate-$state-state-var-1/_config.js
 create mode 100644 packages/svelte/tests/migrate/samples/impossible-migrate-$state-state-var-1/input.svelte
 create mode 100644 packages/svelte/tests/migrate/samples/impossible-migrate-$state-state-var-1/output.svelte
 create mode 100644 packages/svelte/tests/migrate/samples/impossible-migrate-$state-state-var-2/_config.js
 create mode 100644 packages/svelte/tests/migrate/samples/impossible-migrate-$state-state-var-2/input.svelte
 create mode 100644 packages/svelte/tests/migrate/samples/impossible-migrate-$state-state-var-2/output.svelte
 create mode 100644 packages/svelte/tests/migrate/samples/impossible-migrate-$state-state-var-3/_config.js
 create mode 100644 packages/svelte/tests/migrate/samples/impossible-migrate-$state-state-var-3/input.svelte
 create mode 100644 packages/svelte/tests/migrate/samples/impossible-migrate-$state-state-var-3/output.svelte

diff --git a/.changeset/chatty-gorillas-poke.md b/.changeset/chatty-gorillas-poke.md
new file mode 100644
index 0000000000..744adcf214
--- /dev/null
+++ b/.changeset/chatty-gorillas-poke.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: add migration task when there's a variable named that would conflict with a rune
diff --git a/packages/svelte/src/compiler/migrate/index.js b/packages/svelte/src/compiler/migrate/index.js
index 387b6a5485..b7687af09f 100644
--- a/packages/svelte/src/compiler/migrate/index.js
+++ b/packages/svelte/src/compiler/migrate/index.js
@@ -239,6 +239,18 @@ export function migrate(source, { filename, use_ts } = {}) {
 
 		insertion_point = state.props_insertion_point;
 
+		/**
+		 * @param {"derived"|"props"|"bindable"} rune
+		 */
+		function check_rune_binding(rune) {
+			const has_rune_binding = !!state.scope.get(rune);
+			if (has_rune_binding) {
+				throw new MigrationError(
+					`migrating this component would require adding a \`$${rune}\` rune but there's already a variable named ${rune}.\n     Rename the variable and try again or migrate by hand.`
+				);
+			}
+		}
+
 		if (state.props.length > 0 || analysis.uses_rest_props || analysis.uses_props) {
 			const has_many_props = state.props.length > 3;
 			const newline_separator = `\n${indent}${indent}`;
@@ -253,6 +265,7 @@ export function migrate(source, { filename, use_ts } = {}) {
 						let prop_str =
 							prop.local === prop.exported ? prop.local : `${prop.exported}: ${prop.local}`;
 						if (prop.bindable) {
+							check_rune_binding('bindable');
 							prop_str += ` = $bindable(${prop.init})`;
 						} else if (prop.init) {
 							prop_str += ` = ${prop.init}`;
@@ -300,11 +313,13 @@ export function migrate(source, { filename, use_ts } = {}) {
 					if (type) {
 						props_declaration = `${type}\n\n${indent}${props_declaration}`;
 					}
+					check_rune_binding('props');
 					props_declaration = `${props_declaration}${type ? `: ${type_name}` : ''} = $props();`;
 				} else {
 					if (type) {
 						props_declaration = `${state.props.length > 0 ? `${type}\n\n${indent}` : ''}/** @type {${state.props.length > 0 ? type_name : ''}${analysis.uses_props || analysis.uses_rest_props ? `${state.props.length > 0 ? ' & ' : ''}{ [key: string]: any }` : ''}} */\n${indent}${props_declaration}`;
 					}
+					check_rune_binding('props');
 					props_declaration = `${props_declaration} = $props();`;
 				}
 
@@ -361,6 +376,7 @@ export function migrate(source, { filename, use_ts } = {}) {
 			: insertion_point;
 
 		if (state.derived_components.size > 0) {
+			check_rune_binding('derived');
 			str.appendRight(
 				insertion_point,
 				`\n${indent}${[...state.derived_components.entries()].map(([init, name]) => `const ${name} = $derived(${init});`).join(`\n${indent}`)}\n`
@@ -368,6 +384,7 @@ export function migrate(source, { filename, use_ts } = {}) {
 		}
 
 		if (state.derived_conflicting_slots.size > 0) {
+			check_rune_binding('derived');
 			str.appendRight(
 				insertion_point,
 				`\n${indent}${[...state.derived_conflicting_slots.entries()].map(([name, init]) => `const ${name} = $derived(${init});`).join(`\n${indent}`)}\n`
@@ -652,6 +669,18 @@ const instance_script = {
 				continue;
 			}
 
+			/**
+			 * @param {"state"|"derived"} rune
+			 */
+			function check_rune_binding(rune) {
+				const has_rune_binding = !!state.scope.get(rune);
+				if (has_rune_binding) {
+					throw new MigrationError(
+						`can't migrate \`${state.str.original.substring(/** @type {number} */ (node.start), node.end)}\` to \`$${rune}\` because there's a variable named ${rune}.\n     Rename the variable and try again or migrate by hand.`
+					);
+				}
+			}
+
 			// state
 			if (declarator.init) {
 				let { start, end } = /** @type {{ start: number, end: number }} */ (declarator.init);
@@ -661,6 +690,8 @@ const instance_script = {
 					while (state.str.original[end - 1] !== ')') end += 1;
 				}
 
+				check_rune_binding('state');
+
 				state.str.prependLeft(start, '$state(');
 				state.str.appendRight(end, ')');
 			} else {
@@ -755,6 +786,8 @@ const instance_script = {
 						}
 					}
 
+					check_rune_binding('derived');
+
 					// Someone wrote a `$: { ... }` statement which we can turn into a `$derived`
 					state.str.appendRight(
 						/** @type {number} */ (declarator.id.typeAnnotation?.end ?? declarator.id.end),
@@ -795,6 +828,8 @@ const instance_script = {
 						}
 					}
 				} else {
+					check_rune_binding('state');
+
 					state.str.prependLeft(
 						/** @type {number} */ (declarator.id.typeAnnotation?.end ?? declarator.id.end),
 						' = $state('
@@ -858,6 +893,18 @@ const instance_script = {
 
 		next();
 
+		/**
+		 * @param {"state"|"derived"} rune
+		 */
+		function check_rune_binding(rune) {
+			const has_rune_binding = state.scope.get(rune);
+			if (has_rune_binding) {
+				throw new MigrationError(
+					`can't migrate \`$: ${state.str.original.substring(/** @type {number} */ (node.body.start), node.body.end)}\` to \`$${rune}\` because there's a variable named ${rune}.\n     Rename the variable and try again or migrate by hand.`
+				);
+			}
+		}
+
 		if (
 			node.body.type === 'ExpressionStatement' &&
 			node.body.expression.type === 'AssignmentExpression'
@@ -878,6 +925,8 @@ const instance_script = {
 					node.body.expression.right
 				);
 
+				check_rune_binding('derived');
+
 				// $derived
 				state.str.update(
 					/** @type {number} */ (node.start),
@@ -902,6 +951,7 @@ const instance_script = {
 			} else {
 				for (const binding of reassigned_bindings) {
 					if (binding && (ids.includes(binding.node) || expression_ids.length === 0)) {
+						check_rune_binding('state');
 						const init =
 							binding.kind === 'state'
 								? ' = $state()'
diff --git a/packages/svelte/tests/migrate/samples/impossible-migrate-$bindable-bindable-var-1/_config.js b/packages/svelte/tests/migrate/samples/impossible-migrate-$bindable-bindable-var-1/_config.js
new file mode 100644
index 0000000000..aceae9ce69
--- /dev/null
+++ b/packages/svelte/tests/migrate/samples/impossible-migrate-$bindable-bindable-var-1/_config.js
@@ -0,0 +1,8 @@
+import { test } from '../../test';
+
+export default test({
+	logs: [
+		'One or more `@migration-task` comments were added to `output.svelte`, please check them and complete the migration manually.'
+	],
+	errors: []
+});
diff --git a/packages/svelte/tests/migrate/samples/impossible-migrate-$bindable-bindable-var-1/input.svelte b/packages/svelte/tests/migrate/samples/impossible-migrate-$bindable-bindable-var-1/input.svelte
new file mode 100644
index 0000000000..e66dfea9f7
--- /dev/null
+++ b/packages/svelte/tests/migrate/samples/impossible-migrate-$bindable-bindable-var-1/input.svelte
@@ -0,0 +1,6 @@
+<script>
+	let bindable;
+	export let something;
+</script>
+
+<input bind:value={something} />
\ No newline at end of file
diff --git a/packages/svelte/tests/migrate/samples/impossible-migrate-$bindable-bindable-var-1/output.svelte b/packages/svelte/tests/migrate/samples/impossible-migrate-$bindable-bindable-var-1/output.svelte
new file mode 100644
index 0000000000..f956c2cd75
--- /dev/null
+++ b/packages/svelte/tests/migrate/samples/impossible-migrate-$bindable-bindable-var-1/output.svelte
@@ -0,0 +1,8 @@
+<!-- @migration-task Error while migrating Svelte code: migrating this component would require adding a `$bindable` rune but there's already a variable named bindable.
+     Rename the variable and try again or migrate by hand. -->
+<script>
+	let bindable;
+	export let something;
+</script>
+
+<input bind:value={something} />
\ No newline at end of file
diff --git a/packages/svelte/tests/migrate/samples/impossible-migrate-$derived-derived-var-1/_config.js b/packages/svelte/tests/migrate/samples/impossible-migrate-$derived-derived-var-1/_config.js
new file mode 100644
index 0000000000..aceae9ce69
--- /dev/null
+++ b/packages/svelte/tests/migrate/samples/impossible-migrate-$derived-derived-var-1/_config.js
@@ -0,0 +1,8 @@
+import { test } from '../../test';
+
+export default test({
+	logs: [
+		'One or more `@migration-task` comments were added to `output.svelte`, please check them and complete the migration manually.'
+	],
+	errors: []
+});
diff --git a/packages/svelte/tests/migrate/samples/impossible-migrate-$derived-derived-var-1/input.svelte b/packages/svelte/tests/migrate/samples/impossible-migrate-$derived-derived-var-1/input.svelte
new file mode 100644
index 0000000000..f8bde54909
--- /dev/null
+++ b/packages/svelte/tests/migrate/samples/impossible-migrate-$derived-derived-var-1/input.svelte
@@ -0,0 +1,9 @@
+<script>
+	let name = 'world';
+
+	let derived;
+
+	$: other = name;
+</script>
+
+<input bind:value={name} />
\ No newline at end of file
diff --git a/packages/svelte/tests/migrate/samples/impossible-migrate-$derived-derived-var-1/output.svelte b/packages/svelte/tests/migrate/samples/impossible-migrate-$derived-derived-var-1/output.svelte
new file mode 100644
index 0000000000..64c61be00c
--- /dev/null
+++ b/packages/svelte/tests/migrate/samples/impossible-migrate-$derived-derived-var-1/output.svelte
@@ -0,0 +1,11 @@
+<!-- @migration-task Error while migrating Svelte code: can't migrate `$: other = name;` to `$derived` because there's a variable named derived.
+     Rename the variable and try again or migrate by hand. -->
+<script>
+	let name = 'world';
+
+	let derived;
+
+	$: other = name;
+</script>
+
+<input bind:value={name} />
\ No newline at end of file
diff --git a/packages/svelte/tests/migrate/samples/impossible-migrate-$derived-derived-var-2/_config.js b/packages/svelte/tests/migrate/samples/impossible-migrate-$derived-derived-var-2/_config.js
new file mode 100644
index 0000000000..aceae9ce69
--- /dev/null
+++ b/packages/svelte/tests/migrate/samples/impossible-migrate-$derived-derived-var-2/_config.js
@@ -0,0 +1,8 @@
+import { test } from '../../test';
+
+export default test({
+	logs: [
+		'One or more `@migration-task` comments were added to `output.svelte`, please check them and complete the migration manually.'
+	],
+	errors: []
+});
diff --git a/packages/svelte/tests/migrate/samples/impossible-migrate-$derived-derived-var-2/input.svelte b/packages/svelte/tests/migrate/samples/impossible-migrate-$derived-derived-var-2/input.svelte
new file mode 100644
index 0000000000..0b298cc7d2
--- /dev/null
+++ b/packages/svelte/tests/migrate/samples/impossible-migrate-$derived-derived-var-2/input.svelte
@@ -0,0 +1,5 @@
+<script>
+	let derived;
+</script>
+
+<svelte:component this={derived} />
diff --git a/packages/svelte/tests/migrate/samples/impossible-migrate-$derived-derived-var-2/output.svelte b/packages/svelte/tests/migrate/samples/impossible-migrate-$derived-derived-var-2/output.svelte
new file mode 100644
index 0000000000..01864be058
--- /dev/null
+++ b/packages/svelte/tests/migrate/samples/impossible-migrate-$derived-derived-var-2/output.svelte
@@ -0,0 +1,7 @@
+<!-- @migration-task Error while migrating Svelte code: migrating this component would require adding a `$derived` rune but there's already a variable named derived.
+     Rename the variable and try again or migrate by hand. -->
+<script>
+	let derived;
+</script>
+
+<svelte:component this={derived} />
\ No newline at end of file
diff --git a/packages/svelte/tests/migrate/samples/impossible-migrate-$derived-derived-var-3/_config.js b/packages/svelte/tests/migrate/samples/impossible-migrate-$derived-derived-var-3/_config.js
new file mode 100644
index 0000000000..aceae9ce69
--- /dev/null
+++ b/packages/svelte/tests/migrate/samples/impossible-migrate-$derived-derived-var-3/_config.js
@@ -0,0 +1,8 @@
+import { test } from '../../test';
+
+export default test({
+	logs: [
+		'One or more `@migration-task` comments were added to `output.svelte`, please check them and complete the migration manually.'
+	],
+	errors: []
+});
diff --git a/packages/svelte/tests/migrate/samples/impossible-migrate-$derived-derived-var-3/input.svelte b/packages/svelte/tests/migrate/samples/impossible-migrate-$derived-derived-var-3/input.svelte
new file mode 100644
index 0000000000..9203fdf30c
--- /dev/null
+++ b/packages/svelte/tests/migrate/samples/impossible-migrate-$derived-derived-var-3/input.svelte
@@ -0,0 +1,6 @@
+<script>
+	let derived;
+</script>
+<Component>
+	<slot name="derived" slot="derived" />
+</Component>
\ No newline at end of file
diff --git a/packages/svelte/tests/migrate/samples/impossible-migrate-$derived-derived-var-3/output.svelte b/packages/svelte/tests/migrate/samples/impossible-migrate-$derived-derived-var-3/output.svelte
new file mode 100644
index 0000000000..9e4f086aed
--- /dev/null
+++ b/packages/svelte/tests/migrate/samples/impossible-migrate-$derived-derived-var-3/output.svelte
@@ -0,0 +1,7 @@
+<!-- @migration-task Error while migrating Svelte code: This migration would change the name of a slot making the component unusable -->
+<script>
+	let derived;
+</script>
+<Component>
+	<slot name="derived" slot="derived" />
+</Component>
\ No newline at end of file
diff --git a/packages/svelte/tests/migrate/samples/impossible-migrate-$derived-derived-var-4/_config.js b/packages/svelte/tests/migrate/samples/impossible-migrate-$derived-derived-var-4/_config.js
new file mode 100644
index 0000000000..aceae9ce69
--- /dev/null
+++ b/packages/svelte/tests/migrate/samples/impossible-migrate-$derived-derived-var-4/_config.js
@@ -0,0 +1,8 @@
+import { test } from '../../test';
+
+export default test({
+	logs: [
+		'One or more `@migration-task` comments were added to `output.svelte`, please check them and complete the migration manually.'
+	],
+	errors: []
+});
diff --git a/packages/svelte/tests/migrate/samples/impossible-migrate-$derived-derived-var-4/input.svelte b/packages/svelte/tests/migrate/samples/impossible-migrate-$derived-derived-var-4/input.svelte
new file mode 100644
index 0000000000..c4179c7185
--- /dev/null
+++ b/packages/svelte/tests/migrate/samples/impossible-migrate-$derived-derived-var-4/input.svelte
@@ -0,0 +1,10 @@
+<script>
+	let name = 'world';
+
+	let derived;
+
+	let other;
+	$: other = name;
+</script>
+
+<input bind:value={name} />
\ No newline at end of file
diff --git a/packages/svelte/tests/migrate/samples/impossible-migrate-$derived-derived-var-4/output.svelte b/packages/svelte/tests/migrate/samples/impossible-migrate-$derived-derived-var-4/output.svelte
new file mode 100644
index 0000000000..05cd363682
--- /dev/null
+++ b/packages/svelte/tests/migrate/samples/impossible-migrate-$derived-derived-var-4/output.svelte
@@ -0,0 +1,12 @@
+<!-- @migration-task Error while migrating Svelte code: can't migrate `let other;` to `$derived` because there's a variable named derived.
+     Rename the variable and try again or migrate by hand. -->
+<script>
+	let name = 'world';
+
+	let derived;
+
+	let other;
+	$: other = name;
+</script>
+
+<input bind:value={name} />
\ No newline at end of file
diff --git a/packages/svelte/tests/migrate/samples/impossible-migrate-$props-props-var-1/_config.js b/packages/svelte/tests/migrate/samples/impossible-migrate-$props-props-var-1/_config.js
new file mode 100644
index 0000000000..aceae9ce69
--- /dev/null
+++ b/packages/svelte/tests/migrate/samples/impossible-migrate-$props-props-var-1/_config.js
@@ -0,0 +1,8 @@
+import { test } from '../../test';
+
+export default test({
+	logs: [
+		'One or more `@migration-task` comments were added to `output.svelte`, please check them and complete the migration manually.'
+	],
+	errors: []
+});
diff --git a/packages/svelte/tests/migrate/samples/impossible-migrate-$props-props-var-1/input.svelte b/packages/svelte/tests/migrate/samples/impossible-migrate-$props-props-var-1/input.svelte
new file mode 100644
index 0000000000..bc50d58776
--- /dev/null
+++ b/packages/svelte/tests/migrate/samples/impossible-migrate-$props-props-var-1/input.svelte
@@ -0,0 +1,4 @@
+<script>
+	let props;
+	export let something;
+</script>
\ No newline at end of file
diff --git a/packages/svelte/tests/migrate/samples/impossible-migrate-$props-props-var-1/output.svelte b/packages/svelte/tests/migrate/samples/impossible-migrate-$props-props-var-1/output.svelte
new file mode 100644
index 0000000000..33532dbaf5
--- /dev/null
+++ b/packages/svelte/tests/migrate/samples/impossible-migrate-$props-props-var-1/output.svelte
@@ -0,0 +1,6 @@
+<!-- @migration-task Error while migrating Svelte code: migrating this component would require adding a `$props` rune but there's already a variable named props.
+     Rename the variable and try again or migrate by hand. -->
+<script>
+	let props;
+	export let something;
+</script>
\ No newline at end of file
diff --git a/packages/svelte/tests/migrate/samples/impossible-migrate-$state-state-var-1/_config.js b/packages/svelte/tests/migrate/samples/impossible-migrate-$state-state-var-1/_config.js
new file mode 100644
index 0000000000..aceae9ce69
--- /dev/null
+++ b/packages/svelte/tests/migrate/samples/impossible-migrate-$state-state-var-1/_config.js
@@ -0,0 +1,8 @@
+import { test } from '../../test';
+
+export default test({
+	logs: [
+		'One or more `@migration-task` comments were added to `output.svelte`, please check them and complete the migration manually.'
+	],
+	errors: []
+});
diff --git a/packages/svelte/tests/migrate/samples/impossible-migrate-$state-state-var-1/input.svelte b/packages/svelte/tests/migrate/samples/impossible-migrate-$state-state-var-1/input.svelte
new file mode 100644
index 0000000000..8999063751
--- /dev/null
+++ b/packages/svelte/tests/migrate/samples/impossible-migrate-$state-state-var-1/input.svelte
@@ -0,0 +1,7 @@
+<script>
+	let state = 'world';
+
+	let other;
+</script>
+
+<input bind:value={other} />
\ No newline at end of file
diff --git a/packages/svelte/tests/migrate/samples/impossible-migrate-$state-state-var-1/output.svelte b/packages/svelte/tests/migrate/samples/impossible-migrate-$state-state-var-1/output.svelte
new file mode 100644
index 0000000000..d795f588ec
--- /dev/null
+++ b/packages/svelte/tests/migrate/samples/impossible-migrate-$state-state-var-1/output.svelte
@@ -0,0 +1,9 @@
+<!-- @migration-task Error while migrating Svelte code: can't migrate `let other;` to `$state` because there's a variable named state.
+     Rename the variable and try again or migrate by hand. -->
+<script>
+	let state = 'world';
+
+	let other;
+</script>
+
+<input bind:value={other} />
\ No newline at end of file
diff --git a/packages/svelte/tests/migrate/samples/impossible-migrate-$state-state-var-2/_config.js b/packages/svelte/tests/migrate/samples/impossible-migrate-$state-state-var-2/_config.js
new file mode 100644
index 0000000000..aceae9ce69
--- /dev/null
+++ b/packages/svelte/tests/migrate/samples/impossible-migrate-$state-state-var-2/_config.js
@@ -0,0 +1,8 @@
+import { test } from '../../test';
+
+export default test({
+	logs: [
+		'One or more `@migration-task` comments were added to `output.svelte`, please check them and complete the migration manually.'
+	],
+	errors: []
+});
diff --git a/packages/svelte/tests/migrate/samples/impossible-migrate-$state-state-var-2/input.svelte b/packages/svelte/tests/migrate/samples/impossible-migrate-$state-state-var-2/input.svelte
new file mode 100644
index 0000000000..354110f521
--- /dev/null
+++ b/packages/svelte/tests/migrate/samples/impossible-migrate-$state-state-var-2/input.svelte
@@ -0,0 +1,7 @@
+<script>
+	let state = 'world';
+
+	let other = 42;
+</script>
+
+<input bind:value={other} />
\ No newline at end of file
diff --git a/packages/svelte/tests/migrate/samples/impossible-migrate-$state-state-var-2/output.svelte b/packages/svelte/tests/migrate/samples/impossible-migrate-$state-state-var-2/output.svelte
new file mode 100644
index 0000000000..cf084c0364
--- /dev/null
+++ b/packages/svelte/tests/migrate/samples/impossible-migrate-$state-state-var-2/output.svelte
@@ -0,0 +1,9 @@
+<!-- @migration-task Error while migrating Svelte code: can't migrate `let other = 42;` to `$state` because there's a variable named state.
+     Rename the variable and try again or migrate by hand. -->
+<script>
+	let state = 'world';
+
+	let other = 42;
+</script>
+
+<input bind:value={other} />
\ No newline at end of file
diff --git a/packages/svelte/tests/migrate/samples/impossible-migrate-$state-state-var-3/_config.js b/packages/svelte/tests/migrate/samples/impossible-migrate-$state-state-var-3/_config.js
new file mode 100644
index 0000000000..aceae9ce69
--- /dev/null
+++ b/packages/svelte/tests/migrate/samples/impossible-migrate-$state-state-var-3/_config.js
@@ -0,0 +1,8 @@
+import { test } from '../../test';
+
+export default test({
+	logs: [
+		'One or more `@migration-task` comments were added to `output.svelte`, please check them and complete the migration manually.'
+	],
+	errors: []
+});
diff --git a/packages/svelte/tests/migrate/samples/impossible-migrate-$state-state-var-3/input.svelte b/packages/svelte/tests/migrate/samples/impossible-migrate-$state-state-var-3/input.svelte
new file mode 100644
index 0000000000..ddf64172fe
--- /dev/null
+++ b/packages/svelte/tests/migrate/samples/impossible-migrate-$state-state-var-3/input.svelte
@@ -0,0 +1,7 @@
+<script>
+	let state = 'world';
+
+	$: other = 42;
+</script>
+
+<input bind:value={other} />
\ No newline at end of file
diff --git a/packages/svelte/tests/migrate/samples/impossible-migrate-$state-state-var-3/output.svelte b/packages/svelte/tests/migrate/samples/impossible-migrate-$state-state-var-3/output.svelte
new file mode 100644
index 0000000000..3e41b632d1
--- /dev/null
+++ b/packages/svelte/tests/migrate/samples/impossible-migrate-$state-state-var-3/output.svelte
@@ -0,0 +1,9 @@
+<!-- @migration-task Error while migrating Svelte code: can't migrate `$: other = 42;` to `$state` because there's a variable named state.
+     Rename the variable and try again or migrate by hand. -->
+<script>
+	let state = 'world';
+
+	$: other = 42;
+</script>
+
+<input bind:value={other} />
\ No newline at end of file

From 31e6bbb6466d1a8dad71efeb9f63b7e1c1010d32 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Fri, 8 Nov 2024 12:25:03 +0100
Subject: [PATCH 039/159] fix: add `lang="ts"` attribute during migration if
 needed (#14222)

* fix: add `lang="ts"` attribute during migration if needed

fixes #14219

* fix
---
 .changeset/seven-clocks-pull.md                     |  5 +++++
 packages/svelte/src/compiler/migrate/index.js       | 10 +++++++++-
 .../tests/migrate/samples/slot-use_ts-2/_config.js  |  5 +++++
 .../migrate/samples/slot-use_ts-2/input.svelte      |  5 +++++
 .../migrate/samples/slot-use_ts-2/output.svelte     | 10 ++++++++++
 .../tests/migrate/samples/slot-use_ts-3/_config.js  |  5 +++++
 .../migrate/samples/slot-use_ts-3/input.svelte      |  6 ++++++
 .../migrate/samples/slot-use_ts-3/output.svelte     | 13 +++++++++++++
 .../tests/migrate/samples/slot-use_ts/output.svelte |  2 +-
 9 files changed, 59 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/seven-clocks-pull.md
 create mode 100644 packages/svelte/tests/migrate/samples/slot-use_ts-2/_config.js
 create mode 100644 packages/svelte/tests/migrate/samples/slot-use_ts-2/input.svelte
 create mode 100644 packages/svelte/tests/migrate/samples/slot-use_ts-2/output.svelte
 create mode 100644 packages/svelte/tests/migrate/samples/slot-use_ts-3/_config.js
 create mode 100644 packages/svelte/tests/migrate/samples/slot-use_ts-3/input.svelte
 create mode 100644 packages/svelte/tests/migrate/samples/slot-use_ts-3/output.svelte

diff --git a/.changeset/seven-clocks-pull.md b/.changeset/seven-clocks-pull.md
new file mode 100644
index 0000000000..e426560b7b
--- /dev/null
+++ b/.changeset/seven-clocks-pull.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: add `lang="ts"` attribute during migration if needed
diff --git a/packages/svelte/src/compiler/migrate/index.js b/packages/svelte/src/compiler/migrate/index.js
index b7687af09f..5bcf160e8b 100644
--- a/packages/svelte/src/compiler/migrate/index.js
+++ b/packages/svelte/src/compiler/migrate/index.js
@@ -207,8 +207,12 @@ export function migrate(source, { filename, use_ts } = {}) {
 			analysis.uses_props ||
 			state.has_svelte_self;
 
+		const need_ts_tag =
+			state.uses_ts &&
+			(!parsed.instance || !parsed.instance.attributes.some((attr) => attr.name === 'lang'));
+
 		if (!parsed.instance && need_script) {
-			str.appendRight(0, '<script>');
+			str.appendRight(0, need_ts_tag ? '<script lang="ts">' : '<script>');
 		}
 
 		if (state.has_svelte_self && filename) {
@@ -326,6 +330,10 @@ export function migrate(source, { filename, use_ts } = {}) {
 				props_declaration = `\n${indent}${props_declaration}`;
 				str.appendRight(insertion_point, props_declaration);
 			}
+
+			if (parsed.instance && need_ts_tag) {
+				str.appendRight(parsed.instance.start + '<script'.length, ' lang="ts"');
+			}
 		}
 
 		/**
diff --git a/packages/svelte/tests/migrate/samples/slot-use_ts-2/_config.js b/packages/svelte/tests/migrate/samples/slot-use_ts-2/_config.js
new file mode 100644
index 0000000000..dbc620d66e
--- /dev/null
+++ b/packages/svelte/tests/migrate/samples/slot-use_ts-2/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	use_ts: true
+});
diff --git a/packages/svelte/tests/migrate/samples/slot-use_ts-2/input.svelte b/packages/svelte/tests/migrate/samples/slot-use_ts-2/input.svelte
new file mode 100644
index 0000000000..0ea83a56d8
--- /dev/null
+++ b/packages/svelte/tests/migrate/samples/slot-use_ts-2/input.svelte
@@ -0,0 +1,5 @@
+<script>
+    // script tag but no lang="ts", because for example only imports present
+</script>
+
+<slot />
diff --git a/packages/svelte/tests/migrate/samples/slot-use_ts-2/output.svelte b/packages/svelte/tests/migrate/samples/slot-use_ts-2/output.svelte
new file mode 100644
index 0000000000..a8e8db66b1
--- /dev/null
+++ b/packages/svelte/tests/migrate/samples/slot-use_ts-2/output.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+    interface Props {
+        children?: import('svelte').Snippet;
+    }
+
+    let { children }: Props = $props();
+    // script tag but no lang="ts", because for example only imports present
+</script>
+
+{@render children?.()}
\ No newline at end of file
diff --git a/packages/svelte/tests/migrate/samples/slot-use_ts-3/_config.js b/packages/svelte/tests/migrate/samples/slot-use_ts-3/_config.js
new file mode 100644
index 0000000000..dbc620d66e
--- /dev/null
+++ b/packages/svelte/tests/migrate/samples/slot-use_ts-3/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	use_ts: true
+});
diff --git a/packages/svelte/tests/migrate/samples/slot-use_ts-3/input.svelte b/packages/svelte/tests/migrate/samples/slot-use_ts-3/input.svelte
new file mode 100644
index 0000000000..b228fef106
--- /dev/null
+++ b/packages/svelte/tests/migrate/samples/slot-use_ts-3/input.svelte
@@ -0,0 +1,6 @@
+<script>
+    /** @type {ShouldNotUseTSBecauseImUsingJsDoc} */
+    export let data;
+</script>
+
+<slot />
diff --git a/packages/svelte/tests/migrate/samples/slot-use_ts-3/output.svelte b/packages/svelte/tests/migrate/samples/slot-use_ts-3/output.svelte
new file mode 100644
index 0000000000..ab95eace3a
--- /dev/null
+++ b/packages/svelte/tests/migrate/samples/slot-use_ts-3/output.svelte
@@ -0,0 +1,13 @@
+<script>
+    
+    /**
+     * @typedef {Object} Props
+     * @property {ShouldNotUseTSBecauseImUsingJsDoc} data
+     * @property {import('svelte').Snippet} [children]
+     */
+
+    /** @type {Props} */
+    let { data, children } = $props();
+</script>
+
+{@render children?.()}
\ No newline at end of file
diff --git a/packages/svelte/tests/migrate/samples/slot-use_ts/output.svelte b/packages/svelte/tests/migrate/samples/slot-use_ts/output.svelte
index 3e92f5ceb1..0ba0bf53e9 100644
--- a/packages/svelte/tests/migrate/samples/slot-use_ts/output.svelte
+++ b/packages/svelte/tests/migrate/samples/slot-use_ts/output.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 	interface Props {
 		children?: import('svelte').Snippet;
 	}

From f0c2d4c69833d161778ddfde3ed77740499f674e Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Fri, 8 Nov 2024 14:14:56 +0100
Subject: [PATCH 040/159] fix: account for shadowing children slot during
 migration (#14224)

Fixes #14171
---
 .changeset/lazy-chefs-float.md                 |  5 +++++
 packages/svelte/src/compiler/migrate/index.js  | 15 +++++++++++++++
 .../shadowed-forwarded-slot/input.svelte       | 10 ++++++++++
 .../shadowed-forwarded-slot/output.svelte      | 18 +++++++++++++++++-
 4 files changed, 47 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/lazy-chefs-float.md

diff --git a/.changeset/lazy-chefs-float.md b/.changeset/lazy-chefs-float.md
new file mode 100644
index 0000000000..ce15e3dabc
--- /dev/null
+++ b/.changeset/lazy-chefs-float.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: account for shadowing children slot during migration
diff --git a/packages/svelte/src/compiler/migrate/index.js b/packages/svelte/src/compiler/migrate/index.js
index 5bcf160e8b..8c2429b1c9 100644
--- a/packages/svelte/src/compiler/migrate/index.js
+++ b/packages/svelte/src/compiler/migrate/index.js
@@ -1300,6 +1300,21 @@ const template = {
 			existing_prop.needs_refine_type = false;
 		}
 
+		if (
+			slot_name === 'default' &&
+			path.some(
+				(parent) =>
+					(parent.type === 'SvelteComponent' ||
+						parent.type === 'Component' ||
+						parent.type === 'RegularElement' ||
+						parent.type === 'SvelteElement' ||
+						parent.type === 'SvelteFragment') &&
+					parent.attributes.some((attr) => (attr.type = 'LetDirective'))
+			)
+		) {
+			aliased_slot_name = `${name}_render`;
+			state.derived_conflicting_slots.set(aliased_slot_name, name);
+		}
 		name = aliased_slot_name ?? name;
 
 		if (node.fragment.nodes.length > 0) {
diff --git a/packages/svelte/tests/migrate/samples/shadowed-forwarded-slot/input.svelte b/packages/svelte/tests/migrate/samples/shadowed-forwarded-slot/input.svelte
index 800ef2532c..18d28e9d34 100644
--- a/packages/svelte/tests/migrate/samples/shadowed-forwarded-slot/input.svelte
+++ b/packages/svelte/tests/migrate/samples/shadowed-forwarded-slot/input.svelte
@@ -12,4 +12,14 @@
 			</div>
 		</MyComponent>
 	</div>
+</MyInput>
+
+<MyInput let:args>
+	<slot/>
+</MyInput>
+
+<MyInput>
+	<div let:args>
+		<slot/>
+	</div>
 </MyInput>
\ No newline at end of file
diff --git a/packages/svelte/tests/migrate/samples/shadowed-forwarded-slot/output.svelte b/packages/svelte/tests/migrate/samples/shadowed-forwarded-slot/output.svelte
index 3c763349c6..8bf12c0ced 100644
--- a/packages/svelte/tests/migrate/samples/shadowed-forwarded-slot/output.svelte
+++ b/packages/svelte/tests/migrate/samples/shadowed-forwarded-slot/output.svelte
@@ -2,11 +2,13 @@
 	/**
 	 * @typedef {Object} Props
 	 * @property {import('svelte').Snippet} [label]
+	 * @property {import('svelte').Snippet} [children]
 	 */
 
 	/** @type {Props} */
-	let { label } = $props();
+	let { label, children } = $props();
 	const label_render = $derived(label);
+	const children_render = $derived(children);
 
 </script>
 
@@ -30,4 +32,18 @@
 			</MyComponent>
 		</div>
 	{/snippet}
+</MyInput>
+
+<MyInput >
+	{#snippet children({ args })}
+		{@render children_render?.()}
+	{/snippet}
+</MyInput>
+
+<MyInput>
+	<div >
+		{#snippet children({ args })}
+				{@render children_render?.()}
+					{/snippet}
+		</div>
 </MyInput>
\ No newline at end of file

From 1060bea6e1fd1a02f2d251e200591864511e2ea2 Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Fri, 8 Nov 2024 15:30:38 +0100
Subject: [PATCH 041/159] fix: consider `valueOf` in the reactive methods of
 `SvelteDate` (#14227)

---
 .changeset/cyan-cooks-nail.md               |  5 +++++
 packages/svelte/src/reactivity/date.js      |  2 +-
 packages/svelte/src/reactivity/date.test.ts | 24 +++++++++++++++++++++
 3 files changed, 30 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/cyan-cooks-nail.md

diff --git a/.changeset/cyan-cooks-nail.md b/.changeset/cyan-cooks-nail.md
new file mode 100644
index 0000000000..656cf3a413
--- /dev/null
+++ b/.changeset/cyan-cooks-nail.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: consider `valueOf` in the reactive methods of `SvelteDate`
diff --git a/packages/svelte/src/reactivity/date.js b/packages/svelte/src/reactivity/date.js
index 9eb0cc3521..2d8de624bc 100644
--- a/packages/svelte/src/reactivity/date.js
+++ b/packages/svelte/src/reactivity/date.js
@@ -30,7 +30,7 @@ export class SvelteDate extends Date {
 		);
 
 		for (const method of methods) {
-			if (method.startsWith('get') || method.startsWith('to')) {
+			if (method.startsWith('get') || method.startsWith('to') || method === 'valueOf') {
 				// @ts-ignore
 				proto[method] = function (...args) {
 					// don't memoize if there are arguments
diff --git a/packages/svelte/src/reactivity/date.test.ts b/packages/svelte/src/reactivity/date.test.ts
index d07b6780c6..87bfde41c8 100644
--- a/packages/svelte/src/reactivity/date.test.ts
+++ b/packages/svelte/src/reactivity/date.test.ts
@@ -588,6 +588,30 @@ test('Date.toLocaleString', () => {
 	cleanup();
 });
 
+test('Date.valueOf', () => {
+	const date = new SvelteDate(initial_date);
+
+	const log: any = [];
+
+	const cleanup = effect_root(() => {
+		render_effect(() => {
+			log.push(date.valueOf());
+		});
+	});
+
+	flushSync();
+
+	assert.deepEqual(log, [initial_date.valueOf()]);
+
+	flushSync(() => {
+		date.setTime(date.getTime() + 10);
+	});
+
+	assert.deepEqual(log, [initial_date.valueOf(), new Date(initial_date.getTime() + 10).valueOf()]);
+
+	cleanup();
+});
+
 test('Date.instanceOf', () => {
 	assert.equal(new SvelteDate() instanceof Date, true);
 });

From 4bcd01b9941c7ba393738b5e038d9f4ad96b3bbd Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Fri, 8 Nov 2024 11:48:03 -0800
Subject: [PATCH 042/159] Version Packages (#14207)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/chatty-gorillas-poke.md  |  5 -----
 .changeset/cyan-cooks-nail.md       |  5 -----
 .changeset/four-jobs-care.md        |  5 -----
 .changeset/giant-waves-act.md       |  5 -----
 .changeset/late-dodos-film.md       |  5 -----
 .changeset/lazy-chefs-float.md      |  5 -----
 .changeset/nice-numbers-remember.md |  5 -----
 .changeset/seven-clocks-pull.md     |  5 -----
 packages/svelte/CHANGELOG.md        | 20 ++++++++++++++++++++
 packages/svelte/package.json        |  2 +-
 packages/svelte/src/version.js      |  2 +-
 11 files changed, 22 insertions(+), 42 deletions(-)
 delete mode 100644 .changeset/chatty-gorillas-poke.md
 delete mode 100644 .changeset/cyan-cooks-nail.md
 delete mode 100644 .changeset/four-jobs-care.md
 delete mode 100644 .changeset/giant-waves-act.md
 delete mode 100644 .changeset/late-dodos-film.md
 delete mode 100644 .changeset/lazy-chefs-float.md
 delete mode 100644 .changeset/nice-numbers-remember.md
 delete mode 100644 .changeset/seven-clocks-pull.md

diff --git a/.changeset/chatty-gorillas-poke.md b/.changeset/chatty-gorillas-poke.md
deleted file mode 100644
index 744adcf214..0000000000
--- a/.changeset/chatty-gorillas-poke.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: add migration task when there's a variable named that would conflict with a rune
diff --git a/.changeset/cyan-cooks-nail.md b/.changeset/cyan-cooks-nail.md
deleted file mode 100644
index 656cf3a413..0000000000
--- a/.changeset/cyan-cooks-nail.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: consider `valueOf` in the reactive methods of `SvelteDate`
diff --git a/.changeset/four-jobs-care.md b/.changeset/four-jobs-care.md
deleted file mode 100644
index 51e5d22313..0000000000
--- a/.changeset/four-jobs-care.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: handle sibling combinators within `:has`
diff --git a/.changeset/giant-waves-act.md b/.changeset/giant-waves-act.md
deleted file mode 100644
index 591f0f25ba..0000000000
--- a/.changeset/giant-waves-act.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: consider variables with synthetic store sub as state
diff --git a/.changeset/late-dodos-film.md b/.changeset/late-dodos-film.md
deleted file mode 100644
index c3636019da..0000000000
--- a/.changeset/late-dodos-film.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: read index as a source in legacy keyed each block
diff --git a/.changeset/lazy-chefs-float.md b/.changeset/lazy-chefs-float.md
deleted file mode 100644
index ce15e3dabc..0000000000
--- a/.changeset/lazy-chefs-float.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: account for shadowing children slot during migration
diff --git a/.changeset/nice-numbers-remember.md b/.changeset/nice-numbers-remember.md
deleted file mode 100644
index 810343aedf..0000000000
--- a/.changeset/nice-numbers-remember.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: ensure explicit nesting selector is always applied
diff --git a/.changeset/seven-clocks-pull.md b/.changeset/seven-clocks-pull.md
deleted file mode 100644
index e426560b7b..0000000000
--- a/.changeset/seven-clocks-pull.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: add `lang="ts"` attribute during migration if needed
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 4283f406d6..98fdbc6937 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,25 @@
 # svelte
 
+## 5.1.13
+
+### Patch Changes
+
+- fix: add migration task when there's a variable named that would conflict with a rune ([#14216](https://github.com/sveltejs/svelte/pull/14216))
+
+- fix: consider `valueOf` in the reactive methods of `SvelteDate` ([#14227](https://github.com/sveltejs/svelte/pull/14227))
+
+- fix: handle sibling combinators within `:has` ([#14213](https://github.com/sveltejs/svelte/pull/14213))
+
+- fix: consider variables with synthetic store sub as state ([#14195](https://github.com/sveltejs/svelte/pull/14195))
+
+- fix: read index as a source in legacy keyed each block ([#14208](https://github.com/sveltejs/svelte/pull/14208))
+
+- fix: account for shadowing children slot during migration ([#14224](https://github.com/sveltejs/svelte/pull/14224))
+
+- fix: ensure explicit nesting selector is always applied ([#14193](https://github.com/sveltejs/svelte/pull/14193))
+
+- fix: add `lang="ts"` attribute during migration if needed ([#14222](https://github.com/sveltejs/svelte/pull/14222))
+
 ## 5.1.12
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 0b0eb32ffd..9b0c03a5af 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.1.12",
+  "version": "5.1.13",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 9c883457e8..c50265e998 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.1.12';
+export const VERSION = '5.1.13';
 export const PUBLIC_VERSION = '5';

From 6534742ae13b6f064f0768df245b3d363add0e1e Mon Sep 17 00:00:00 2001
From: CJSnyman <98422173+CJSnyman@users.noreply.github.com>
Date: Sun, 10 Nov 2024 15:25:11 +0200
Subject: [PATCH 043/159] docs: fix grammar (#14244)

Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com>
---
 documentation/docs/07-misc/02-testing.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/documentation/docs/07-misc/02-testing.md b/documentation/docs/07-misc/02-testing.md
index 1c3d4ba6e1..c8774e341f 100644
--- a/documentation/docs/07-misc/02-testing.md
+++ b/documentation/docs/07-misc/02-testing.md
@@ -197,7 +197,7 @@ When writing component tests that involve two-way bindings, context or snippet p
 
 E2E (short for 'end to end') tests allow you to test your full application through the eyes of the user. This section uses [Playwright](https://playwright.dev/) as an example, but you can also use other solutions like [Cypress](https://www.cypress.io/) or [NightwatchJS](https://nightwatchjs.org/).
 
-To get start with Playwright, either let you guide by [their VS Code extension](https://playwright.dev/docs/getting-started-vscode), or install it from the command line using `npm init playwright`. It is also part of the setup CLI when you run `npx sv create`.
+To get started with Playwright, either install it via [the VS Code extension](https://playwright.dev/docs/getting-started-vscode), or install it from the command line using `npm init playwright`. It is also part of the setup CLI when you run `npx sv create`.
 
 After you've done that, you should have a `tests` folder and a Playwright config. You may need to adjust that config to tell Playwright what to do before running the tests - mainly starting your application at a certain port:
 

From 1e5a385c968afb302beb38e7d8dd2982fdd66d0c Mon Sep 17 00:00:00 2001
From: Hosam Sultan <hosam5553@gmail.com>
Date: Sun, 10 Nov 2024 05:31:50 -0800
Subject: [PATCH 044/159] docs: fix typo (#14232)

---
 documentation/docs/03-template-syntax/06-snippet.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/documentation/docs/03-template-syntax/06-snippet.md b/documentation/docs/03-template-syntax/06-snippet.md
index d4ec5a0cef..4bbc970c5d 100644
--- a/documentation/docs/03-template-syntax/06-snippet.md
+++ b/documentation/docs/03-template-syntax/06-snippet.md
@@ -169,7 +169,7 @@ Any content inside the component tags that is _not_ a snippet declaration implic
 
 ```svelte
 <!--- file: App.svelte --->
-<Button>click me<Button>
+<Button>click me</Button>
 ```
 
 ```svelte

From d207666ec3066a7fed208141c31e06fcf3275059 Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Sun, 10 Nov 2024 17:48:10 +0100
Subject: [PATCH 045/159] fix: consider img with loading attribute not static
 (#14237)

* fix: consider img with loading attribute not static

* chore: add comment for `is_static_element`

* chore: better comment

Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com>

---------

Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com>
---
 .changeset/nice-chicken-wonder.md                            | 5 +++++
 .../phases/3-transform/client/visitors/shared/fragment.js    | 5 +++++
 .../samples/img-loading-lazy-no-static/_config.js            | 5 +++++
 .../samples/img-loading-lazy-no-static/main.svelte           | 2 ++
 4 files changed, 17 insertions(+)
 create mode 100644 .changeset/nice-chicken-wonder.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/img-loading-lazy-no-static/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/img-loading-lazy-no-static/main.svelte

diff --git a/.changeset/nice-chicken-wonder.md b/.changeset/nice-chicken-wonder.md
new file mode 100644
index 0000000000..b9f6e39fb8
--- /dev/null
+++ b/.changeset/nice-chicken-wonder.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: consider img with loading attribute not static
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js
index 022b8574d9..98272817df 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js
@@ -150,6 +150,11 @@ function is_static_element(node) {
 			return false;
 		}
 
+		// We need to apply src and loading after appending the img to the DOM for lazy loading to work
+		if (node.name === 'img' && attribute.name === 'loading') {
+			return false;
+		}
+
 		if (node.name.includes('-')) {
 			return false; // we're setting all attributes on custom elements through properties
 		}
diff --git a/packages/svelte/tests/runtime-runes/samples/img-loading-lazy-no-static/_config.js b/packages/svelte/tests/runtime-runes/samples/img-loading-lazy-no-static/_config.js
new file mode 100644
index 0000000000..673ff2d754
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/img-loading-lazy-no-static/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	html: `<h1></h1><img src="..." loading="lazy" />`
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/img-loading-lazy-no-static/main.svelte b/packages/svelte/tests/runtime-runes/samples/img-loading-lazy-no-static/main.svelte
new file mode 100644
index 0000000000..15425d9051
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/img-loading-lazy-no-static/main.svelte
@@ -0,0 +1,2 @@
+<h1></h1>
+<img src="..." loading="lazy">
\ No newline at end of file

From 7bc94b998476e9dfed73ad9ef0f66b7d06252b27 Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Sun, 10 Nov 2024 20:55:39 +0100
Subject: [PATCH 046/159] fix: do not treat reassigned synthetic binds as state
 in runes mode (#14236)

* fix: do not treat reassigned synthetic binds as state in runes mode

* fix: avoid calling checks if we are in runes mode
---
 .changeset/bright-papayas-sneeze.md           |  5 +++
 .../src/compiler/phases/2-analyze/index.js    | 33 +++++++++++++------
 .../reassigned-store-not-state/_config.js     |  7 ++++
 .../reassigned-store-not-state/main.svelte    | 13 ++++++++
 4 files changed, 48 insertions(+), 10 deletions(-)
 create mode 100644 .changeset/bright-papayas-sneeze.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/reassigned-store-not-state/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/reassigned-store-not-state/main.svelte

diff --git a/.changeset/bright-papayas-sneeze.md b/.changeset/bright-papayas-sneeze.md
new file mode 100644
index 0000000000..8587aebc66
--- /dev/null
+++ b/.changeset/bright-papayas-sneeze.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: do not treat reassigned synthetic binds as state in runes mode
diff --git a/packages/svelte/src/compiler/phases/2-analyze/index.js b/packages/svelte/src/compiler/phases/2-analyze/index.js
index 36d8145145..9e4f72a66d 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/index.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/index.js
@@ -276,6 +276,8 @@ export function analyze_component(root, source, options) {
 	/** @type {Template} */
 	const template = { ast: root.fragment, scope, scopes };
 
+	let synthetic_stores_legacy_check = [];
+
 	// create synthetic bindings for store subscriptions
 	for (const [name, references] of module.scope.references) {
 		if (name[0] !== '$' || RESERVED.includes(name)) continue;
@@ -351,16 +353,21 @@ export function analyze_component(root, source, options) {
 				}
 			}
 
-			// if we are creating a synthetic binding for a let declaration we should also declare
-			// the declaration as state in case it's reassigned
-			if (
-				declaration !== null &&
-				declaration.kind === 'normal' &&
-				declaration.declaration_kind === 'let' &&
-				declaration.reassigned
-			) {
-				declaration.kind = 'state';
-			}
+			// we push to the array because at this moment in time we can't be sure if we are in legacy
+			// mode yet because we are still changing the module scope
+			synthetic_stores_legacy_check.push(() => {
+				// if we are creating a synthetic binding for a let declaration we should also declare
+				// the declaration as state in case it's reassigned and we are not in runes mode (the function will
+				// not be called if we are not in runes mode, that's why there's no !runes check here)
+				if (
+					declaration !== null &&
+					declaration.kind === 'normal' &&
+					declaration.declaration_kind === 'let' &&
+					declaration.reassigned
+				) {
+					declaration.kind = 'state';
+				}
+			});
 
 			const binding = instance.scope.declare(b.id(name), 'store_sub', 'synthetic');
 			binding.references = references;
@@ -373,6 +380,12 @@ export function analyze_component(root, source, options) {
 
 	const runes = options.runes ?? Array.from(module.scope.references.keys()).some(is_rune);
 
+	if (!runes) {
+		for (let check of synthetic_stores_legacy_check) {
+			check();
+		}
+	}
+
 	if (runes && root.module) {
 		const context = root.module.attributes.find((attribute) => attribute.name === 'context');
 		if (context) {
diff --git a/packages/svelte/tests/runtime-runes/samples/reassigned-store-not-state/_config.js b/packages/svelte/tests/runtime-runes/samples/reassigned-store-not-state/_config.js
new file mode 100644
index 0000000000..7091b34479
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/reassigned-store-not-state/_config.js
@@ -0,0 +1,7 @@
+import { test } from '../../test';
+
+export default test({
+	async test({ logs, assert }) {
+		assert.deepEqual(logs, ['world']);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/reassigned-store-not-state/main.svelte b/packages/svelte/tests/runtime-runes/samples/reassigned-store-not-state/main.svelte
new file mode 100644
index 0000000000..95da959012
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/reassigned-store-not-state/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	import { writable } from 'svelte/store';
+
+	let style = writable('world');
+	
+	$effect(() => {
+	  console.log($style);
+	});
+
+	function init(){
+		style = writable('svelte');
+	}
+</script>

From ae9f53a3bde79e8777e865acac3b99612c2cec71 Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Sun, 10 Nov 2024 20:56:00 +0100
Subject: [PATCH 047/159] fix: account for mutations in script module in
 ownership check (#14253)

---
 .changeset/good-laws-sin.md                                | 5 +++++
 packages/svelte/src/internal/client/dev/ownership.js       | 3 +++
 .../samples/mutate-state-in-context-dev/_config.js         | 7 +++++++
 .../samples/mutate-state-in-context-dev/main.svelte        | 6 ++++++
 4 files changed, 21 insertions(+)
 create mode 100644 .changeset/good-laws-sin.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/mutate-state-in-context-dev/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/mutate-state-in-context-dev/main.svelte

diff --git a/.changeset/good-laws-sin.md b/.changeset/good-laws-sin.md
new file mode 100644
index 0000000000..38d3d3bfc8
--- /dev/null
+++ b/.changeset/good-laws-sin.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: account for mutations in script module in ownership check
diff --git a/packages/svelte/src/internal/client/dev/ownership.js b/packages/svelte/src/internal/client/dev/ownership.js
index 64f424e1a9..d113d9ae90 100644
--- a/packages/svelte/src/internal/client/dev/ownership.js
+++ b/packages/svelte/src/internal/client/dev/ownership.js
@@ -59,6 +59,9 @@ export function get_component() {
 		}
 
 		for (const module of modules) {
+			if (module.end == null) {
+				return null;
+			}
 			if (module.start.line < entry.line && module.end.line > entry.line) {
 				return module.component;
 			}
diff --git a/packages/svelte/tests/runtime-runes/samples/mutate-state-in-context-dev/_config.js b/packages/svelte/tests/runtime-runes/samples/mutate-state-in-context-dev/_config.js
new file mode 100644
index 0000000000..ed0ead960b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/mutate-state-in-context-dev/_config.js
@@ -0,0 +1,7 @@
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/mutate-state-in-context-dev/main.svelte b/packages/svelte/tests/runtime-runes/samples/mutate-state-in-context-dev/main.svelte
new file mode 100644
index 0000000000..ff6f816912
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/mutate-state-in-context-dev/main.svelte
@@ -0,0 +1,6 @@
+<script module>
+	let obj = $state({});
+	obj.test = "hi!";
+</script>
+  
+<h1>Values: {JSON.stringify(obj)}</h1>
\ No newline at end of file

From 653f4accbd3393fdaed072b936a39d908cf9d20a Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Mon, 11 Nov 2024 10:28:56 +0100
Subject: [PATCH 048/159] fix: migration script messing with attributes
 (#14260)

---
 .changeset/afraid-donuts-whisper.md               |  5 +++++
 packages/svelte/src/compiler/migrate/index.js     |  2 +-
 .../slot-dont-mess-with-attributes/input.svelte   |  5 +++++
 .../slot-dont-mess-with-attributes/output.svelte  | 15 +++++++++++++++
 4 files changed, 26 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/afraid-donuts-whisper.md
 create mode 100644 packages/svelte/tests/migrate/samples/slot-dont-mess-with-attributes/input.svelte
 create mode 100644 packages/svelte/tests/migrate/samples/slot-dont-mess-with-attributes/output.svelte

diff --git a/.changeset/afraid-donuts-whisper.md b/.changeset/afraid-donuts-whisper.md
new file mode 100644
index 0000000000..df9eea40ad
--- /dev/null
+++ b/.changeset/afraid-donuts-whisper.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: migration script messing with attributes
diff --git a/packages/svelte/src/compiler/migrate/index.js b/packages/svelte/src/compiler/migrate/index.js
index 8c2429b1c9..080babdfb7 100644
--- a/packages/svelte/src/compiler/migrate/index.js
+++ b/packages/svelte/src/compiler/migrate/index.js
@@ -1309,7 +1309,7 @@ const template = {
 						parent.type === 'RegularElement' ||
 						parent.type === 'SvelteElement' ||
 						parent.type === 'SvelteFragment') &&
-					parent.attributes.some((attr) => (attr.type = 'LetDirective'))
+					parent.attributes.some((attr) => attr.type === 'LetDirective')
 			)
 		) {
 			aliased_slot_name = `${name}_render`;
diff --git a/packages/svelte/tests/migrate/samples/slot-dont-mess-with-attributes/input.svelte b/packages/svelte/tests/migrate/samples/slot-dont-mess-with-attributes/input.svelte
new file mode 100644
index 0000000000..53f38e0332
--- /dev/null
+++ b/packages/svelte/tests/migrate/samples/slot-dont-mess-with-attributes/input.svelte
@@ -0,0 +1,5 @@
+<MyComponent
+  variant="outlined"
+>
+  <slot />
+</MyComponent>
diff --git a/packages/svelte/tests/migrate/samples/slot-dont-mess-with-attributes/output.svelte b/packages/svelte/tests/migrate/samples/slot-dont-mess-with-attributes/output.svelte
new file mode 100644
index 0000000000..39a6ff7957
--- /dev/null
+++ b/packages/svelte/tests/migrate/samples/slot-dont-mess-with-attributes/output.svelte
@@ -0,0 +1,15 @@
+<script>
+  /**
+   * @typedef {Object} Props
+   * @property {import('svelte').Snippet} [children]
+   */
+
+  /** @type {Props} */
+  let { children } = $props();
+</script>
+
+<MyComponent
+  variant="outlined"
+>
+  {@render children?.()}
+</MyComponent>
\ No newline at end of file

From 832499fee889e7e88911649c64ddbb84a2a8b454 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 11 Nov 2024 10:36:28 +0100
Subject: [PATCH 049/159] Version Packages (#14251)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/afraid-donuts-whisper.md |  5 -----
 .changeset/bright-papayas-sneeze.md |  5 -----
 .changeset/good-laws-sin.md         |  5 -----
 .changeset/nice-chicken-wonder.md   |  5 -----
 packages/svelte/CHANGELOG.md        | 12 ++++++++++++
 packages/svelte/package.json        |  2 +-
 packages/svelte/src/version.js      |  2 +-
 7 files changed, 14 insertions(+), 22 deletions(-)
 delete mode 100644 .changeset/afraid-donuts-whisper.md
 delete mode 100644 .changeset/bright-papayas-sneeze.md
 delete mode 100644 .changeset/good-laws-sin.md
 delete mode 100644 .changeset/nice-chicken-wonder.md

diff --git a/.changeset/afraid-donuts-whisper.md b/.changeset/afraid-donuts-whisper.md
deleted file mode 100644
index df9eea40ad..0000000000
--- a/.changeset/afraid-donuts-whisper.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: migration script messing with attributes
diff --git a/.changeset/bright-papayas-sneeze.md b/.changeset/bright-papayas-sneeze.md
deleted file mode 100644
index 8587aebc66..0000000000
--- a/.changeset/bright-papayas-sneeze.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: do not treat reassigned synthetic binds as state in runes mode
diff --git a/.changeset/good-laws-sin.md b/.changeset/good-laws-sin.md
deleted file mode 100644
index 38d3d3bfc8..0000000000
--- a/.changeset/good-laws-sin.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: account for mutations in script module in ownership check
diff --git a/.changeset/nice-chicken-wonder.md b/.changeset/nice-chicken-wonder.md
deleted file mode 100644
index b9f6e39fb8..0000000000
--- a/.changeset/nice-chicken-wonder.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: consider img with loading attribute not static
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 98fdbc6937..9ab2e67282 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,17 @@
 # svelte
 
+## 5.1.14
+
+### Patch Changes
+
+- fix: migration script messing with attributes ([#14260](https://github.com/sveltejs/svelte/pull/14260))
+
+- fix: do not treat reassigned synthetic binds as state in runes mode ([#14236](https://github.com/sveltejs/svelte/pull/14236))
+
+- fix: account for mutations in script module in ownership check ([#14253](https://github.com/sveltejs/svelte/pull/14253))
+
+- fix: consider img with loading attribute not static ([#14237](https://github.com/sveltejs/svelte/pull/14237))
+
 ## 5.1.13
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 9b0c03a5af..04efd21643 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.1.13",
+  "version": "5.1.14",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index c50265e998..17232bc9d6 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.1.13';
+export const VERSION = '5.1.14';
 export const PUBLIC_VERSION = '5';

From 0fa43e216dc0744f5b41751f087024c45efde66f Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Mon, 11 Nov 2024 14:55:04 +0100
Subject: [PATCH 050/159] fix: consider static attributes that are inlined in
 the template (#14249)

* fix: consider static attributes that are inlined in the template

* fix: use `is_inlinable_expression`

* fix: move check for inlinable expression as last

* fix: simplify and correct

* chore: accept single node in `is_inlinable_expression`

* chore: update comment

* chore: add snapshots for non static nodes
---
 .changeset/mighty-ads-appear.md               |  5 +++
 .../phases/3-transform/client/utils.js        | 27 +++++++++++++-
 .../client/visitors/RegularElement.js         | 36 ++++---------------
 .../client/visitors/shared/fragment.js        | 21 ++++++-----
 .../_expected/client/index.svelte.js          |  5 +--
 .../_expected/client/index.svelte.js          | 24 ++++++++++++-
 .../_expected/server/index.svelte.js          |  2 +-
 .../samples/skip-static-subtree/index.svelte  | 15 ++++++++
 8 files changed, 91 insertions(+), 44 deletions(-)
 create mode 100644 .changeset/mighty-ads-appear.md

diff --git a/.changeset/mighty-ads-appear.md b/.changeset/mighty-ads-appear.md
new file mode 100644
index 0000000000..c1b3b6a746
--- /dev/null
+++ b/.changeset/mighty-ads-appear.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: consider static attributes that are inlined in the template
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/utils.js b/packages/svelte/src/compiler/phases/3-transform/client/utils.js
index 2647f0a3be..c460905977 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/utils.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/utils.js
@@ -1,5 +1,5 @@
 /** @import { ArrowFunctionExpression, Expression, FunctionDeclaration, FunctionExpression, Identifier, Pattern, PrivateIdentifier, Statement } from 'estree' */
-/** @import { Binding, SvelteNode } from '#compiler' */
+/** @import { AST, Binding, SvelteNode } from '#compiler' */
 /** @import { ClientTransformState, ComponentClientTransformState, ComponentContext } from './types.js' */
 /** @import { Analysis } from '../../types.js' */
 /** @import { Scope } from '../../scope.js' */
@@ -326,3 +326,28 @@ export function can_inline_variable(binding) {
 		binding.initial?.type === 'Literal'
 	);
 }
+
+/**
+ * @param {(AST.Text | AST.ExpressionTag) | (AST.Text | AST.ExpressionTag)[]} node_or_nodes
+ * @param {import('./types.js').ComponentClientTransformState} state
+ */
+export function is_inlinable_expression(node_or_nodes, state) {
+	let nodes = Array.isArray(node_or_nodes) ? node_or_nodes : [node_or_nodes];
+	let has_expression_tag = false;
+	for (let value of nodes) {
+		if (value.type === 'ExpressionTag') {
+			if (value.expression.type === 'Identifier') {
+				const binding = state.scope
+					.owner(value.expression.name)
+					?.declarations.get(value.expression.name);
+				if (!can_inline_variable(binding)) {
+					return false;
+				}
+			} else {
+				return false;
+			}
+			has_expression_tag = true;
+		}
+	}
+	return has_expression_tag;
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
index dafe1e74ae..4d3cebcee6 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
@@ -19,7 +19,12 @@ import {
 import * as b from '../../../../utils/builders.js';
 import { is_custom_element_node } from '../../../nodes.js';
 import { clean_nodes, determine_namespace_for_children } from '../../utils.js';
-import { build_getter, can_inline_variable, create_derived } from '../utils.js';
+import {
+	build_getter,
+	can_inline_variable,
+	create_derived,
+	is_inlinable_expression
+} from '../utils.js';
 import {
 	get_attribute_name,
 	build_attribute_value,
@@ -584,10 +589,7 @@ function build_element_attribute_update_assignment(element, node_id, attribute,
 	const inlinable_expression =
 		attribute.value === true
 			? false // not an expression
-			: is_inlinable_expression(
-					Array.isArray(attribute.value) ? attribute.value : [attribute.value],
-					context.state
-				);
+			: is_inlinable_expression(attribute.value, context.state);
 	if (attribute.metadata.expression.has_state) {
 		if (has_call) {
 			state.init.push(build_update(update));
@@ -605,30 +607,6 @@ function build_element_attribute_update_assignment(element, node_id, attribute,
 	}
 }
 
-/**
- * @param {(AST.Text | AST.ExpressionTag)[]} nodes
- * @param {import('../types.js').ComponentClientTransformState} state
- */
-function is_inlinable_expression(nodes, state) {
-	let has_expression_tag = false;
-	for (let value of nodes) {
-		if (value.type === 'ExpressionTag') {
-			if (value.expression.type === 'Identifier') {
-				const binding = state.scope
-					.owner(value.expression.name)
-					?.declarations.get(value.expression.name);
-				if (!can_inline_variable(binding)) {
-					return false;
-				}
-			} else {
-				return false;
-			}
-			has_expression_tag = true;
-		}
-	}
-	return has_expression_tag;
-}
-
 /**
  * Like `build_element_attribute_update_assignment` but without any special attribute treatment.
  * @param {Identifier}	node_id
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js
index 98272817df..3b009fb5b5 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js
@@ -3,6 +3,7 @@
 /** @import { ComponentContext } from '../../types' */
 import { is_event_attribute, is_text_attribute } from '../../../../../utils/ast.js';
 import * as b from '../../../../../utils/builders.js';
+import { is_inlinable_expression } from '../../utils.js';
 import { build_template_literal, build_update } from './utils.js';
 
 /**
@@ -97,7 +98,7 @@ export function process_children(nodes, initial, is_element, { visit, state }) {
 
 			let child_state = state;
 
-			if (is_static_element(node)) {
+			if (is_static_element(node, state)) {
 				skipped += 1;
 			} else if (node.type === 'EachBlock' && nodes.length === 1 && is_element) {
 				node.metadata.is_controlled = true;
@@ -124,10 +125,12 @@ export function process_children(nodes, initial, is_element, { visit, state }) {
 
 /**
  * @param {SvelteNode} node
+ * @param {ComponentContext["state"]} state
  */
-function is_static_element(node) {
+function is_static_element(node, state) {
 	if (node.type !== 'RegularElement') return false;
 	if (node.fragment.metadata.dynamic) return false;
+	if (node.name.includes('-')) return false; // we're setting all attributes on custom elements through properties
 
 	for (const attribute of node.attributes) {
 		if (attribute.type !== 'Attribute') {
@@ -138,10 +141,6 @@ function is_static_element(node) {
 			return false;
 		}
 
-		if (attribute.value !== true && !is_text_attribute(attribute)) {
-			return false;
-		}
-
 		if (attribute.name === 'autofocus' || attribute.name === 'muted') {
 			return false;
 		}
@@ -155,8 +154,14 @@ function is_static_element(node) {
 			return false;
 		}
 
-		if (node.name.includes('-')) {
-			return false; // we're setting all attributes on custom elements through properties
+		if (
+			attribute.value !== true &&
+			!is_text_attribute(attribute) &&
+			// If the attribute is not a text attribute but is inlinable we will directly inline it in the
+			// the template so before returning false we need to check that the attribute is not inlinable
+			!is_inlinable_expression(attribute.value, state)
+		) {
+			return false;
 		}
 	}
 
diff --git a/packages/svelte/tests/snapshot/samples/inline-module-vars/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/inline-module-vars/_expected/client/index.svelte.js
index 69c6901d50..46ed3c1913 100644
--- a/packages/svelte/tests/snapshot/samples/inline-module-vars/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/inline-module-vars/_expected/client/index.svelte.js
@@ -9,11 +9,8 @@ var root = $.template(`<picture><source srcset="${__DECLARED_ASSET_0__}" type="i
 
 export default function Inline_module_vars($$anchor) {
 	var picture = root();
-	var source = $.child(picture);
-	var source_1 = $.sibling(source, 2);
-	var source_2 = $.sibling(source_1, 2);
-	var img = $.sibling(source_2, 2);
 
+	$.next(6);
 	$.reset(picture);
 	$.append($$anchor, picture);
 }
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/client/index.svelte.js
index 2d3cc3ba5a..ae79efef42 100644
--- a/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/client/index.svelte.js
@@ -1,7 +1,7 @@
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
 
-var root = $.template(`<header><nav><a href="/">Home</a> <a href="/away">Away</a></nav></header> <main><h1> </h1> <div class="static"><p>we don't need to traverse these nodes</p></div> <p>or</p> <p>these</p> <p>ones</p> <!> <p>these</p> <p>trailing</p> <p>nodes</p> <p>can</p> <p>be</p> <p>completely</p> <p>ignored</p></main> <cant-skip><custom-elements></custom-elements></cant-skip>`, 3);
+var root = $.template(`<header><nav><a href="/">Home</a> <a href="/away">Away</a></nav></header> <main><h1> </h1> <div class="static"><p>we don't need to traverse these nodes</p></div> <p>or</p> <p>these</p> <p>ones</p> <!> <p>these</p> <p>trailing</p> <p>nodes</p> <p>can</p> <p>be</p> <p>completely</p> <p>ignored</p></main> <cant-skip><custom-elements></custom-elements></cant-skip> <div><input></div> <div><source></div> <select><option>a</option></select> <img src="..." alt="" loading="lazy">`, 3);
 
 export default function Skip_static_subtree($$anchor, $$props) {
 	var fragment = root();
@@ -22,6 +22,28 @@ export default function Skip_static_subtree($$anchor, $$props) {
 
 	$.set_custom_element_data(custom_elements, "with", "attributes");
 	$.reset(cant_skip);
+
+	var div = $.sibling(cant_skip, 2);
+	var input = $.child(div);
+
+	$.autofocus(input, true);
+	$.reset(div);
+
+	var div_1 = $.sibling(div, 2);
+	var source = $.child(div_1);
+
+	source.muted = true;
+	$.reset(div_1);
+
+	var select = $.sibling(div_1, 2);
+	var option = $.child(select);
+
+	option.value = null == (option.__value = "a") ? "" : "a";
+	$.reset(select);
+
+	var img = $.sibling(select, 2);
+
 	$.template_effect(() => $.set_text(text, $$props.title));
+	$.handle_lazy_img(img);
 	$.append($$anchor, fragment);
 }
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/server/index.svelte.js
index 2bd910508d..d09ac657f9 100644
--- a/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/server/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/server/index.svelte.js
@@ -3,5 +3,5 @@ import * as $ from "svelte/internal/server";
 export default function Skip_static_subtree($$payload, $$props) {
 	let { title, content } = $$props;
 
-	$$payload.out += `<header><nav><a href="/">Home</a> <a href="/away">Away</a></nav></header> <main><h1>${$.escape(title)}</h1> <div class="static"><p>we don't need to traverse these nodes</p></div> <p>or</p> <p>these</p> <p>ones</p> ${$.html(content)} <p>these</p> <p>trailing</p> <p>nodes</p> <p>can</p> <p>be</p> <p>completely</p> <p>ignored</p></main> <cant-skip><custom-elements with="attributes"></custom-elements></cant-skip>`;
+	$$payload.out += `<header><nav><a href="/">Home</a> <a href="/away">Away</a></nav></header> <main><h1>${$.escape(title)}</h1> <div class="static"><p>we don't need to traverse these nodes</p></div> <p>or</p> <p>these</p> <p>ones</p> ${$.html(content)} <p>these</p> <p>trailing</p> <p>nodes</p> <p>can</p> <p>be</p> <p>completely</p> <p>ignored</p></main> <cant-skip><custom-elements with="attributes"></custom-elements></cant-skip> <div><input autofocus></div> <div><source muted></div> <select><option value="a">a</option></select> <img src="..." alt="" loading="lazy">`;
 }
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/skip-static-subtree/index.svelte b/packages/svelte/tests/snapshot/samples/skip-static-subtree/index.svelte
index de399169b4..cb73eba707 100644
--- a/packages/svelte/tests/snapshot/samples/skip-static-subtree/index.svelte
+++ b/packages/svelte/tests/snapshot/samples/skip-static-subtree/index.svelte
@@ -30,3 +30,18 @@
 <cant-skip>
 	<custom-elements with="attributes"></custom-elements>
 </cant-skip>
+
+<div>
+	<!-- svelte-ignore a11y_autofocus -->
+	<input autofocus />
+</div>
+
+<div>
+	<source muted />
+</div>
+
+<select>
+	<option value="a">a</option>
+</select>
+
+<img src="..." alt="" loading="lazy" />
\ No newline at end of file

From 4a85c4157df1bd5d8903b336bfd4af204d32f1ce Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 11 Nov 2024 10:07:09 -0800
Subject: [PATCH 051/159] Version Packages (#14262)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/mighty-ads-appear.md | 5 -----
 packages/svelte/CHANGELOG.md    | 6 ++++++
 packages/svelte/package.json    | 2 +-
 packages/svelte/src/version.js  | 2 +-
 4 files changed, 8 insertions(+), 7 deletions(-)
 delete mode 100644 .changeset/mighty-ads-appear.md

diff --git a/.changeset/mighty-ads-appear.md b/.changeset/mighty-ads-appear.md
deleted file mode 100644
index c1b3b6a746..0000000000
--- a/.changeset/mighty-ads-appear.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: consider static attributes that are inlined in the template
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 9ab2e67282..e2c59c27f4 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,11 @@
 # svelte
 
+## 5.1.15
+
+### Patch Changes
+
+- fix: consider static attributes that are inlined in the template ([#14249](https://github.com/sveltejs/svelte/pull/14249))
+
 ## 5.1.14
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 04efd21643..3124fd73af 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.1.14",
+  "version": "5.1.15",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 17232bc9d6..20a804671e 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.1.14';
+export const VERSION = '5.1.15';
 export const PUBLIC_VERSION = '5';

From 36ece1c38114a7d1b4177829f76201eaeef7a6f4 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Tue, 12 Nov 2024 14:46:26 +0100
Subject: [PATCH 052/159] fix: don't wrap pseudo classes inside `:global(...)`
 with another `:global(...)` (#14267)

fixes #14088
---
 .changeset/hot-ladybugs-clap.md               |  5 ++
 packages/svelte/src/compiler/migrate/index.js | 46 ++++++++++++++-----
 .../samples/is-not-where-has/input.svelte     |  2 +
 .../samples/is-not-where-has/output.svelte    |  2 +
 4 files changed, 44 insertions(+), 11 deletions(-)
 create mode 100644 .changeset/hot-ladybugs-clap.md

diff --git a/.changeset/hot-ladybugs-clap.md b/.changeset/hot-ladybugs-clap.md
new file mode 100644
index 0000000000..20acdd0750
--- /dev/null
+++ b/.changeset/hot-ladybugs-clap.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: don't wrap pseudo classes inside `:global(...)` with another `:global(...)` during migration
diff --git a/packages/svelte/src/compiler/migrate/index.js b/packages/svelte/src/compiler/migrate/index.js
index 080babdfb7..4942dd7db2 100644
--- a/packages/svelte/src/compiler/migrate/index.js
+++ b/packages/svelte/src/compiler/migrate/index.js
@@ -40,9 +40,10 @@ class MigrationError extends Error {
  */
 function migrate_css(state) {
 	if (!state.analysis.css.ast?.start) return;
-	let code = state.str
+	const css_contents = state.str
 		.snip(state.analysis.css.ast.start, /** @type {number} */ (state.analysis.css.ast?.end))
 		.toString();
+	let code = css_contents;
 	let starting = 0;
 
 	// since we already blank css we can't work directly on `state.str` so we will create a copy that we can update
@@ -56,23 +57,28 @@ function migrate_css(state) {
 		) {
 			let start = code.indexOf('(') + 1;
 			let is_global = false;
+
 			const global_str = ':global';
 			const next_global = code.indexOf(global_str);
 			const str_between = code.substring(start, next_global);
 			if (!str_between.trim()) {
 				is_global = true;
 				start += global_str.length;
+			} else {
+				const prev_global = css_contents.lastIndexOf(global_str, starting);
+				if (prev_global > -1) {
+					const end =
+						find_closing_parenthesis(css_contents.indexOf('(', prev_global) + 1, css_contents) -
+						starting;
+					if (end > start) {
+						starting += end;
+						code = code.substring(end);
+						continue;
+					}
+				}
 			}
-			let parenthesis = 1;
-			let end = start;
-			let char = code[end];
-			// find the closing parenthesis
-			while (parenthesis !== 0 && char) {
-				if (char === '(') parenthesis++;
-				if (char === ')') parenthesis--;
-				end++;
-				char = code[end];
-			}
+
+			const end = find_closing_parenthesis(start, code);
 			if (start && end) {
 				if (!is_global && !code.startsWith(':not')) {
 					str.prependLeft(starting + start, ':global(');
@@ -89,6 +95,24 @@ function migrate_css(state) {
 	state.str.update(state.analysis.css.ast?.start, state.analysis.css.ast?.end, str.toString());
 }
 
+/**
+ * @param {number} start
+ * @param {string} code
+ */
+function find_closing_parenthesis(start, code) {
+	let parenthesis = 1;
+	let end = start;
+	let char = code[end];
+	// find the closing parenthesis
+	while (parenthesis !== 0 && char) {
+		if (char === '(') parenthesis++;
+		if (char === ')') parenthesis--;
+		end++;
+		char = code[end];
+	}
+	return end;
+}
+
 /**
  * Does a best-effort migration of Svelte code towards using runes, event attributes and render tags.
  * May throw an error if the code is too complex to migrate automatically.
diff --git a/packages/svelte/tests/migrate/samples/is-not-where-has/input.svelte b/packages/svelte/tests/migrate/samples/is-not-where-has/input.svelte
index fbfc1c119f..88c54ad2db 100644
--- a/packages/svelte/tests/migrate/samples/is-not-where-has/input.svelte
+++ b/packages/svelte/tests/migrate/samples/is-not-where-has/input.svelte
@@ -47,6 +47,8 @@ what if i'm talking about `:has()` in my blog?
 	div :where(:global(.class:is(span:has(* > *)))){}
 	div :is(:global(.class:is(span:is(:hover)), .x)){}
 
+	:global(button:has(.is-active)){}
+
 	div{
 		p:has(&){
 
diff --git a/packages/svelte/tests/migrate/samples/is-not-where-has/output.svelte b/packages/svelte/tests/migrate/samples/is-not-where-has/output.svelte
index d8bb703ac5..9f23cb1024 100644
--- a/packages/svelte/tests/migrate/samples/is-not-where-has/output.svelte
+++ b/packages/svelte/tests/migrate/samples/is-not-where-has/output.svelte
@@ -47,6 +47,8 @@ what if i'm talking about `:has()` in my blog?
 	div :where(:global(.class:is(span:has(* > *)))){}
 	div :is(:global(.class:is(span:is(:hover)), .x)){}
 
+	:global(button:has(.is-active)){}
+
 	div{
 		p:has(:global(&)){
 

From 033061842d463c1db9a0ebed3b27a2ab5b7fddb7 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Tue, 12 Nov 2024 18:13:05 +0100
Subject: [PATCH 053/159] fix: named slots with reserved keywords during
 migration (#14278)

Fixes named slots with a reserved keyword not working anymore after migration. Re-uses the @migration-task logic for invalid identifiers.

Fixes #14277
---
 .changeset/mean-worms-fetch.md                           | 5 +++++
 packages/svelte/src/compiler/migrate/index.js            | 4 ++--
 .../migrate/samples/slot-non-identifier/input.svelte     | 8 +++++++-
 .../migrate/samples/slot-non-identifier/output.svelte    | 9 ++++++++-
 4 files changed, 22 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/mean-worms-fetch.md

diff --git a/.changeset/mean-worms-fetch.md b/.changeset/mean-worms-fetch.md
new file mode 100644
index 0000000000..d573a631de
--- /dev/null
+++ b/.changeset/mean-worms-fetch.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: bail on named slots with that have reserved keywords during migration
diff --git a/packages/svelte/src/compiler/migrate/index.js b/packages/svelte/src/compiler/migrate/index.js
index 4942dd7db2..9db09158a1 100644
--- a/packages/svelte/src/compiler/migrate/index.js
+++ b/packages/svelte/src/compiler/migrate/index.js
@@ -17,7 +17,7 @@ import {
 } from '../utils/ast.js';
 import { migrate_svelte_ignore } from '../utils/extract_svelte_ignore.js';
 import { validate_component_options } from '../validate-options.js';
-import { is_svg, is_void } from '../../utils.js';
+import { is_reserved, is_svg, is_void } from '../../utils.js';
 import { regex_is_valid_identifier } from '../phases/patterns.js';
 
 const regex_style_tags = /(<style[^>]+>)([\S\s]*?)(<\/style>)/g;
@@ -1440,7 +1440,7 @@ function migrate_slot_usage(node, path, state) {
 			if (snippet_name === 'default') {
 				snippet_name = 'children';
 			}
-			if (!regex_is_valid_identifier.test(snippet_name)) {
+			if (!regex_is_valid_identifier.test(snippet_name) || is_reserved(snippet_name)) {
 				has_migration_task = true;
 				state.str.appendLeft(
 					node.start,
diff --git a/packages/svelte/tests/migrate/samples/slot-non-identifier/input.svelte b/packages/svelte/tests/migrate/samples/slot-non-identifier/input.svelte
index a62eff1b74..7cf7dd86bb 100644
--- a/packages/svelte/tests/migrate/samples/slot-non-identifier/input.svelte
+++ b/packages/svelte/tests/migrate/samples/slot-non-identifier/input.svelte
@@ -14,6 +14,12 @@
 	</div>
 </Comp>
 
+<Comp>
+	<div slot="new">
+		reserved keyword
+	</div>
+</Comp>
+
 <Comp>
 	<div slot="stuff">
 		cool
@@ -63,4 +69,4 @@
 	<svelte:fragment let:should_stay slot="cool stuff">
 		cool
 	</svelte:fragment>
-</Comp>
\ No newline at end of file
+</Comp>
diff --git a/packages/svelte/tests/migrate/samples/slot-non-identifier/output.svelte b/packages/svelte/tests/migrate/samples/slot-non-identifier/output.svelte
index 85913264b4..fb262e8c25 100644
--- a/packages/svelte/tests/migrate/samples/slot-non-identifier/output.svelte
+++ b/packages/svelte/tests/migrate/samples/slot-non-identifier/output.svelte
@@ -16,6 +16,13 @@
 	</div>
 </Comp>
 
+<Comp>
+	<!-- @migration-task: migrate this slot by hand, `new` is an invalid identifier -->
+	<div slot="new">
+		reserved keyword
+	</div>
+</Comp>
+
 <Comp>
 	{#snippet stuff()}
 		<div >
@@ -75,4 +82,4 @@
 	<svelte:fragment let:should_stay slot="cool stuff">
 		cool
 	</svelte:fragment>
-</Comp>
\ No newline at end of file
+</Comp>

From f5a7d492162781c09794f207fa9a51c1d4eab51c Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 12 Nov 2024 17:59:34 -0500
Subject: [PATCH 054/159] Version Packages (#14274)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/hot-ladybugs-clap.md | 5 -----
 .changeset/mean-worms-fetch.md  | 5 -----
 packages/svelte/CHANGELOG.md    | 8 ++++++++
 packages/svelte/package.json    | 2 +-
 packages/svelte/src/version.js  | 2 +-
 5 files changed, 10 insertions(+), 12 deletions(-)
 delete mode 100644 .changeset/hot-ladybugs-clap.md
 delete mode 100644 .changeset/mean-worms-fetch.md

diff --git a/.changeset/hot-ladybugs-clap.md b/.changeset/hot-ladybugs-clap.md
deleted file mode 100644
index 20acdd0750..0000000000
--- a/.changeset/hot-ladybugs-clap.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: don't wrap pseudo classes inside `:global(...)` with another `:global(...)` during migration
diff --git a/.changeset/mean-worms-fetch.md b/.changeset/mean-worms-fetch.md
deleted file mode 100644
index d573a631de..0000000000
--- a/.changeset/mean-worms-fetch.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: bail on named slots with that have reserved keywords during migration
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index e2c59c27f4..879fdb2058 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,13 @@
 # svelte
 
+## 5.1.16
+
+### Patch Changes
+
+- fix: don't wrap pseudo classes inside `:global(...)` with another `:global(...)` during migration ([#14267](https://github.com/sveltejs/svelte/pull/14267))
+
+- fix: bail on named slots with that have reserved keywords during migration ([#14278](https://github.com/sveltejs/svelte/pull/14278))
+
 ## 5.1.15
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 3124fd73af..760272680e 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.1.15",
+  "version": "5.1.16",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 20a804671e..c6802cecf0 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.1.15';
+export const VERSION = '5.1.16';
 export const PUBLIC_VERSION = '5';

From 25d9aa18286a0fead03f8556eddf71eccf350194 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Wed, 13 Nov 2024 00:18:51 +0000
Subject: [PATCH 055/159] chore: simplify signal capturing logic (#14281)

---
 .../svelte/src/internal/client/reactivity/props.js  |  4 ++--
 packages/svelte/src/internal/client/runtime.js      | 13 +++++--------
 2 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/packages/svelte/src/internal/client/reactivity/props.js b/packages/svelte/src/internal/client/reactivity/props.js
index ae934c01a5..dbfb8f0337 100644
--- a/packages/svelte/src/internal/client/reactivity/props.js
+++ b/packages/svelte/src/internal/client/reactivity/props.js
@@ -13,7 +13,7 @@ import { derived, derived_safe_equal } from './deriveds.js';
 import {
 	active_effect,
 	get,
-	is_signals_recorded,
+	captured_signals,
 	set_active_effect,
 	untrack,
 	update
@@ -390,7 +390,7 @@ export function prop(props, key, flags, fallback) {
 	return function (/** @type {any} */ value, /** @type {boolean} */ mutation) {
 		// legacy nonsense — need to ensure the source is invalidated when necessary
 		// also needed for when handling inspect logic so we can inspect the correct source signal
-		if (is_signals_recorded) {
+		if (captured_signals !== null) {
 			// set this so that we don't reset to the parent value if `d`
 			// is invalidated because of `invalidate_inner_signals` (rather
 			// than because the parent or child value changed)
diff --git a/packages/svelte/src/internal/client/runtime.js b/packages/svelte/src/internal/client/runtime.js
index e9f1c773e6..5b5b488824 100644
--- a/packages/svelte/src/internal/client/runtime.js
+++ b/packages/svelte/src/internal/client/runtime.js
@@ -128,8 +128,8 @@ let current_version = 0;
 // to prevent memory leaks, we skip adding the reaction.
 export let skip_reaction = false;
 // Handle collecting all signals which are read during a specific time frame
-export let is_signals_recorded = false;
-let captured_signals = new Set();
+/** @type {Set<Value> | null} */
+export let captured_signals = null;
 
 // Handling runtime component context
 /** @type {ComponentContext | null} */
@@ -732,7 +732,7 @@ export function get(signal) {
 		return value;
 	}
 
-	if (is_signals_recorded) {
+	if (captured_signals !== null) {
 		captured_signals.add(signal);
 	}
 
@@ -800,21 +800,18 @@ export function safe_get(signal) {
  * @param {() => any} fn
  */
 export function invalidate_inner_signals(fn) {
-	var previous_is_signals_recorded = is_signals_recorded;
 	var previous_captured_signals = captured_signals;
-	is_signals_recorded = true;
 	captured_signals = new Set();
 	var captured = captured_signals;
 	var signal;
 	try {
 		untrack(fn);
-	} finally {
-		is_signals_recorded = previous_is_signals_recorded;
-		if (is_signals_recorded) {
+		if (previous_captured_signals !== null) {
 			for (signal of captured_signals) {
 				previous_captured_signals.add(signal);
 			}
 		}
+	} finally {
 		captured_signals = previous_captured_signals;
 	}
 	for (signal of captured) {

From ac9b7de05866d2fde6f8fe06281ac97f0e540ec7 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 13 Nov 2024 03:24:56 -0500
Subject: [PATCH 056/159] fix: use strict equality for key block comparisons in
 runes mode (#14285)

fixes #14283
---
 .changeset/hot-frogs-melt.md                        |  5 +++++
 .../svelte/src/internal/client/dom/blocks/key.js    |  7 +++++--
 .../src/internal/client/reactivity/equality.js      |  9 +++++++++
 .../samples/key-unchanged-value/_config.js          | 13 +++++++++++++
 .../samples/key-unchanged-value/main.svelte         | 10 ++++++++++
 5 files changed, 42 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/hot-frogs-melt.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/key-unchanged-value/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/key-unchanged-value/main.svelte

diff --git a/.changeset/hot-frogs-melt.md b/.changeset/hot-frogs-melt.md
new file mode 100644
index 0000000000..95b3e0b4b4
--- /dev/null
+++ b/.changeset/hot-frogs-melt.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: use strict equality for key block comparisons in runes mode
diff --git a/packages/svelte/src/internal/client/dom/blocks/key.js b/packages/svelte/src/internal/client/dom/blocks/key.js
index 04b8ab403f..4a8b7b94fc 100644
--- a/packages/svelte/src/internal/client/dom/blocks/key.js
+++ b/packages/svelte/src/internal/client/dom/blocks/key.js
@@ -1,7 +1,8 @@
 /** @import { Effect, TemplateNode } from '#client' */
 import { UNINITIALIZED } from '../../../../constants.js';
 import { block, branch, pause_effect } from '../../reactivity/effects.js';
-import { safe_not_equal } from '../../reactivity/equality.js';
+import { not_equal, safe_not_equal } from '../../reactivity/equality.js';
+import { is_runes } from '../../runtime.js';
 import { hydrate_next, hydrate_node, hydrating } from '../hydration.js';
 
 /**
@@ -24,8 +25,10 @@ export function key_block(node, get_key, render_fn) {
 	/** @type {Effect} */
 	var effect;
 
+	var changed = is_runes() ? not_equal : safe_not_equal;
+
 	block(() => {
-		if (safe_not_equal(key, (key = get_key()))) {
+		if (changed(key, (key = get_key()))) {
 			if (effect) {
 				pause_effect(effect);
 			}
diff --git a/packages/svelte/src/internal/client/reactivity/equality.js b/packages/svelte/src/internal/client/reactivity/equality.js
index 751c8720f9..37a9994ab8 100644
--- a/packages/svelte/src/internal/client/reactivity/equality.js
+++ b/packages/svelte/src/internal/client/reactivity/equality.js
@@ -15,6 +15,15 @@ export function safe_not_equal(a, b) {
 		: a !== b || (a !== null && typeof a === 'object') || typeof a === 'function';
 }
 
+/**
+ * @param {unknown} a
+ * @param {unknown} b
+ * @returns {boolean}
+ */
+export function not_equal(a, b) {
+	return a !== b;
+}
+
 /** @type {Equals} */
 export function safe_equals(value) {
 	return !safe_not_equal(value, this.v);
diff --git a/packages/svelte/tests/runtime-runes/samples/key-unchanged-value/_config.js b/packages/svelte/tests/runtime-runes/samples/key-unchanged-value/_config.js
new file mode 100644
index 0000000000..0c56330a3e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/key-unchanged-value/_config.js
@@ -0,0 +1,13 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	test({ assert, target, logs }) {
+		assert.deepEqual(logs, ['rendering']);
+
+		const btn = target.querySelector('button');
+		flushSync(() => btn?.click());
+
+		assert.deepEqual(logs, ['rendering']);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/key-unchanged-value/main.svelte b/packages/svelte/tests/runtime-runes/samples/key-unchanged-value/main.svelte
new file mode 100644
index 0000000000..47ecd20c10
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/key-unchanged-value/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	let inner = Symbol();
+	let outer = $state({ inner });
+</script>
+
+<button onclick={() => outer = { inner }}>update</button>
+
+{#key outer.inner}
+	{console.log('rendering')}
+{/key}

From 45fa678242bec9809b9458a7e0102ceeacc369af Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Thu, 14 Nov 2024 11:24:02 +0100
Subject: [PATCH 057/159] fix: account for `:has(...)` as part of `:root`
 (#14229)

We previously marked all `:root` selectors as global-like, which excempted them from further analysis. This causes problems:
- things like `:not(...)` are never visited and therefore never marked as used -> we gotta do that directly when coming across this
- `:has(...)` was never visited, too. Just marking it as used is not enough though, because we might need to scope its contents

Therefore the logic is enhanced to account for these special cases. Fixes #14118

While fixing this I cleaned up some inconsistencies in what we mark as global. This simplified code and fixed some adjacent bugs, which conindicentally also fixes #14189
---
 .changeset/beige-files-pull.md                |   5 +
 .changeset/great-bulldogs-wonder.md           |   5 +
 .../phases/2-analyze/css/css-analyze.js       |  47 ++++----
 .../phases/2-analyze/css/css-prune.js         | 101 +++++++++---------
 .../compiler/phases/2-analyze/css/css-warn.js |   7 +-
 .../compiler/phases/2-analyze/css/utils.js    |  84 ++++++++++++++-
 .../compiler/phases/3-transform/css/index.js  |  14 +--
 packages/svelte/src/compiler/types/css.d.ts   |   4 +-
 .../svelte/tests/css/samples/has/_config.js   |  42 ++++++++
 .../svelte/tests/css/samples/has/expected.css |  19 +++-
 .../svelte/tests/css/samples/has/input.svelte |  15 +++
 .../svelte/tests/css/samples/is/_config.js    |  40 +++----
 .../svelte/tests/css/samples/is/expected.css  |  15 +++
 .../svelte/tests/css/samples/is/input.svelte  |  15 +++
 .../samples/not-selector-global/expected.css  |   9 ++
 .../samples/not-selector-global/input.svelte  |   9 ++
 .../svelte/tests/css/samples/root/_config.js  |  75 ++++++++++++-
 .../tests/css/samples/root/expected.css       |  47 +++++++-
 .../tests/css/samples/root/expected.html      |   2 +-
 .../tests/css/samples/root/input.svelte       |  46 +++++++-
 20 files changed, 484 insertions(+), 117 deletions(-)
 create mode 100644 .changeset/beige-files-pull.md
 create mode 100644 .changeset/great-bulldogs-wonder.md

diff --git a/.changeset/beige-files-pull.md b/.changeset/beige-files-pull.md
new file mode 100644
index 0000000000..2cd98a2819
--- /dev/null
+++ b/.changeset/beige-files-pull.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: account for `:has(...)` as part of `:root`
diff --git a/.changeset/great-bulldogs-wonder.md b/.changeset/great-bulldogs-wonder.md
new file mode 100644
index 0000000000..b6cafa4585
--- /dev/null
+++ b/.changeset/great-bulldogs-wonder.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: prevent nested pseudo class from being marked as unused
diff --git a/packages/svelte/src/compiler/phases/2-analyze/css/css-analyze.js b/packages/svelte/src/compiler/phases/2-analyze/css/css-analyze.js
index ec36e1ce64..38551f328f 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/css/css-analyze.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/css/css-analyze.js
@@ -4,6 +4,7 @@
 import { walk } from 'zimmerframe';
 import * as e from '../../../errors.js';
 import { is_keyframes_node } from '../../css.js';
+import { is_global, is_unscoped_pseudo_class } from './utils.js';
 
 /**
  * @typedef {Visitors<
@@ -15,27 +16,6 @@ import { is_keyframes_node } from '../../css.js';
  * >} CssVisitors
  */
 
-/**
- * True if is `:global(...)` or `:global`
- * @param {Css.RelativeSelector} relative_selector
- * @returns {relative_selector is Css.RelativeSelector & { selectors: [Css.PseudoClassSelector, ...Array<Css.PseudoClassSelector | Css.PseudoElementSelector>] }}
- */
-function is_global(relative_selector) {
-	const first = relative_selector.selectors[0];
-
-	return (
-		first.type === 'PseudoClassSelector' &&
-		first.name === 'global' &&
-		(first.args === null ||
-			// Only these two selector types keep the whole selector global, because e.g.
-			// :global(button).x means that the selector is still scoped because of the .x
-			relative_selector.selectors.every(
-				(selector) =>
-					selector.type === 'PseudoClassSelector' || selector.type === 'PseudoElementSelector'
-			))
-	);
-}
-
 /**
  * True if is `:global`
  * @param {Css.SimpleSelector} simple_selector
@@ -119,11 +99,14 @@ const css_visitors = {
 			node.metadata.rule?.metadata.parent_rule &&
 			node.children[0]?.selectors[0]?.type === 'NestingSelector'
 		) {
+			const first = node.children[0]?.selectors[1];
+			const no_nesting_scope =
+				first?.type !== 'PseudoClassSelector' || is_unscoped_pseudo_class(first);
 			const parent_is_global = node.metadata.rule.metadata.parent_rule.prelude.children.some(
 				(child) => child.children.length === 1 && child.children[0].metadata.is_global
 			);
 			// mark `&:hover` in `:global(.foo) { &:hover { color: green }}` as used
-			if (parent_is_global) {
+			if (no_nesting_scope && parent_is_global) {
 				node.metadata.used = true;
 			}
 		}
@@ -156,9 +139,23 @@ const css_visitors = {
 					].includes(first.name));
 		}
 
-		node.metadata.is_global_like ||= !!node.selectors.find(
-			(child) => child.type === 'PseudoClassSelector' && child.name === 'root'
-		);
+		node.metadata.is_global_like ||=
+			node.selectors.some(
+				(child) => child.type === 'PseudoClassSelector' && child.name === 'root'
+			) &&
+			// :root.y:has(.x) is not a global selector because while .y is unscoped, .x inside `:has(...)` should be scoped
+			!node.selectors.some((child) => child.type === 'PseudoClassSelector' && child.name === 'has');
+
+		if (node.metadata.is_global_like || node.metadata.is_global) {
+			// So that nested selectors like `:root:not(.x)` are not marked as unused
+			for (const child of node.selectors) {
+				walk(/** @type {Css.Node} */ (child), null, {
+					ComplexSelector(node) {
+						node.metadata.used = true;
+					}
+				});
+			}
+		}
 
 		context.next();
 	},
diff --git a/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js b/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js
index a9ea9fe913..bf0fd27566 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js
@@ -1,7 +1,7 @@
 /** @import { Visitors } from 'zimmerframe' */
 /** @import * as Compiler from '#compiler' */
 import { walk } from 'zimmerframe';
-import { get_possible_values } from './utils.js';
+import { get_parent_rules, get_possible_values, is_outer_global } from './utils.js';
 import { regex_ends_with_whitespace, regex_starts_with_whitespace } from '../../patterns.js';
 import { get_attribute_chunks, is_text_attribute } from '../../../utils/ast.js';
 
@@ -172,7 +172,7 @@ function get_relative_selectors(node) {
 }
 
 /**
- * Discard trailing `:global(...)` selectors without a `:has/is/where/not(...)` modifier, these are unused for scoping purposes
+ * Discard trailing `:global(...)` selectors, these are unused for scoping purposes
  * @param {Compiler.Css.ComplexSelector} node
  */
 function truncate(node) {
@@ -182,21 +182,22 @@ function truncate(node) {
 			// not after a :global selector
 			!metadata.is_global_like &&
 			!(first.type === 'PseudoClassSelector' && first.name === 'global' && first.args === null) &&
-			// not a :global(...) without a :has/is/where/not(...) modifier
-			(!metadata.is_global ||
-				selectors.some(
-					(selector) =>
-						selector.type === 'PseudoClassSelector' &&
-						selector.args !== null &&
-						(selector.name === 'has' ||
-							selector.name === 'is' ||
-							selector.name === 'where' ||
-							selector.name === 'not')
-				))
+			// not a :global(...) without a :has/is/where(...) modifier that is scoped
+			!metadata.is_global
 		);
 	});
 
-	return node.children.slice(0, i + 1);
+	return node.children.slice(0, i + 1).map((child) => {
+		// In case of `:root.y:has(...)`, `y` is unscoped, but everything in `:has(...)` should be scoped (if not global).
+		// To properly accomplish that, we gotta filter out all selector types except `:has`.
+		const root = child.selectors.find((s) => s.type === 'PseudoClassSelector' && s.name === 'root');
+		if (!root || child.metadata.is_global_like) return child;
+
+		return {
+			...child,
+			selectors: child.selectors.filter((s) => s.type === 'PseudoClassSelector' && s.name === 'has')
+		};
+	});
 }
 
 /**
@@ -334,7 +335,9 @@ function apply_combinator(combinator, relative_selector, parent_selectors, rule,
  * @param {Compiler.AST.RegularElement | Compiler.AST.SvelteElement} element
  */
 function mark(relative_selector, element) {
-	relative_selector.metadata.scoped = true;
+	if (!is_outer_global(relative_selector)) {
+		relative_selector.metadata.scoped = true;
+	}
 	element.metadata.scoped = true;
 }
 
@@ -415,6 +418,21 @@ function relative_selector_might_apply_to_node(relative_selector, rule, element,
 		/** @type {Array<Compiler.AST.RegularElement | Compiler.AST.SvelteElement>} */
 		let sibling_elements; // do them lazy because it's rarely used and expensive to calculate
 
+		// If this is a :has inside a global selector, we gotta include the element itself, too,
+		// because the global selector might be for an element that's outside the component (e.g. :root).
+		const rules = [rule, ...get_parent_rules(rule)];
+		const include_self =
+			rules.some((r) => r.prelude.children.some((c) => c.children.some((s) => is_global(s, r)))) ||
+			rules[rules.length - 1].prelude.children.some((c) =>
+				c.children.some((r) =>
+					r.selectors.some((s) => s.type === 'PseudoClassSelector' && s.name === 'root')
+				)
+			);
+		if (include_self) {
+			child_elements.push(element);
+			descendant_elements.push(element);
+		}
+
 		walk(
 			/** @type {Compiler.SvelteNode} */ (element.fragment),
 			{ is_child: true },
@@ -460,7 +478,7 @@ function relative_selector_might_apply_to_node(relative_selector, rule, element,
 
 				const descendants =
 					left_most_combinator.name === '+' || left_most_combinator.name === '~'
-						? (sibling_elements ??= get_following_sibling_elements(element))
+						? (sibling_elements ??= get_following_sibling_elements(element, include_self))
 						: left_most_combinator.name === '>'
 							? child_elements
 							: descendant_elements;
@@ -481,20 +499,6 @@ function relative_selector_might_apply_to_node(relative_selector, rule, element,
 			}
 
 			if (!matched) {
-				if (relative_selector.metadata.is_global && !relative_selector.metadata.is_global_like) {
-					// Edge case: `:global(.x):has(.y)` where `.x` is global but `.y` doesn't match.
-					// Since `used` is set to `true` for `:global(.x)` in css-analyze beforehand, and
-					// we have no way of knowing if it's safe to set it back to `false`, we'll mark
-					// the inner selector as used and scoped to prevent it from being pruned, which could
-					// result in a invalid CSS output (e.g. `.x:has(/* unused .y */)`). The result
-					// can't match a real element, so the only drawback is the missing prune.
-					// TODO clean this up some day
-					complex_selectors[0].metadata.used = true;
-					complex_selectors[0].children.forEach((selector) => {
-						selector.metadata.scoped = true;
-					});
-				}
-
 				return false;
 			}
 		}
@@ -507,9 +511,7 @@ function relative_selector_might_apply_to_node(relative_selector, rule, element,
 
 		switch (selector.type) {
 			case 'PseudoClassSelector': {
-				if (name === 'host' || name === 'root') {
-					return false;
-				}
+				if (name === 'host' || name === 'root') return false;
 
 				if (
 					name === 'global' &&
@@ -578,23 +580,6 @@ function relative_selector_might_apply_to_node(relative_selector, rule, element,
 					}
 
 					if (!matched) {
-						if (
-							relative_selector.metadata.is_global &&
-							!relative_selector.metadata.is_global_like
-						) {
-							// Edge case: `:global(.x):is(.y)` where `.x` is global but `.y` doesn't match.
-							// Since `used` is set to `true` for `:global(.x)` in css-analyze beforehand, and
-							// we have no way of knowing if it's safe to set it back to `false`, we'll mark
-							// the inner selector as used and scoped to prevent it from being pruned, which could
-							// result in a invalid CSS output (e.g. `.x:is(/* unused .y */)`). The result
-							// can't match a real element, so the only drawback is the missing prune.
-							// TODO clean this up some day
-							selector.args.children[0].metadata.used = true;
-							selector.args.children[0].children.forEach((selector) => {
-								selector.metadata.scoped = true;
-							});
-						}
-
 						return false;
 					}
 				}
@@ -662,7 +647,10 @@ function relative_selector_might_apply_to_node(relative_selector, rule, element,
 				const parent = /** @type {Compiler.Css.Rule} */ (rule.metadata.parent_rule);
 
 				for (const complex_selector of parent.prelude.children) {
-					if (apply_selector(get_relative_selectors(complex_selector), parent, element, state)) {
+					if (
+						apply_selector(get_relative_selectors(complex_selector), parent, element, state) ||
+						complex_selector.children.every((s) => is_global(s, parent))
+					) {
 						complex_selector.metadata.used = true;
 						matched = true;
 					}
@@ -681,8 +669,11 @@ function relative_selector_might_apply_to_node(relative_selector, rule, element,
 	return true;
 }
 
-/** @param {Compiler.AST.RegularElement | Compiler.AST.SvelteElement} element */
-function get_following_sibling_elements(element) {
+/**
+ * @param {Compiler.AST.RegularElement | Compiler.AST.SvelteElement} element
+ * @param {boolean} include_self
+ */
+function get_following_sibling_elements(element, include_self) {
 	/** @type {Compiler.AST.RegularElement | Compiler.AST.SvelteElement | Compiler.AST.Root | null} */
 	let parent = get_element_parent(element);
 
@@ -723,6 +714,10 @@ function get_following_sibling_elements(element) {
 		}
 	}
 
+	if (include_self) {
+		sibling_elements.push(element);
+	}
+
 	return sibling_elements;
 }
 
diff --git a/packages/svelte/src/compiler/phases/2-analyze/css/css-warn.js b/packages/svelte/src/compiler/phases/2-analyze/css/css-warn.js
index 482278b795..eab67327e2 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/css/css-warn.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/css/css-warn.js
@@ -24,7 +24,12 @@ const visitors = {
 		}
 	},
 	ComplexSelector(node, context) {
-		if (!node.metadata.used) {
+		if (
+			!node.metadata.used &&
+			// prevent double-marking of `.unused:is(.unused)`
+			(context.path.at(-2)?.type !== 'PseudoClassSelector' ||
+				/** @type {Css.ComplexSelector} */ (context.path.at(-4))?.metadata.used)
+		) {
 			const content = context.state.stylesheet.content;
 			const text = content.styles.substring(node.start - content.start, node.end - content.start);
 			w.css_unused_selector(node, text);
diff --git a/packages/svelte/src/compiler/phases/2-analyze/css/utils.js b/packages/svelte/src/compiler/phases/2-analyze/css/utils.js
index 99603fad29..0226a150c9 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/css/utils.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/css/utils.js
@@ -1,4 +1,4 @@
-/** @import { AST } from '#compiler' */
+/** @import { AST, Css } from '#compiler' */
 /** @import { Node } from 'estree' */
 const UNKNOWN = {};
 
@@ -33,3 +33,85 @@ export function get_possible_values(chunk) {
 	if (values.has(UNKNOWN)) return null;
 	return values;
 }
+
+/**
+ * Returns all parent rules; root is last
+ * @param {Css.Rule | null} rule
+ */
+export function get_parent_rules(rule) {
+	const parents = [];
+
+	let parent = rule?.metadata.parent_rule;
+	while (parent) {
+		parents.push(parent);
+		parent = parent.metadata.parent_rule;
+	}
+
+	return parents;
+}
+
+/**
+ * True if is `:global(...)` or `:global` and no pseudo class that is scoped.
+ * @param {Css.RelativeSelector} relative_selector
+ * @returns {relative_selector is Css.RelativeSelector & { selectors: [Css.PseudoClassSelector, ...Array<Css.PseudoClassSelector | Css.PseudoElementSelector>] }}
+ */
+export function is_global(relative_selector) {
+	const first = relative_selector.selectors[0];
+
+	return (
+		first.type === 'PseudoClassSelector' &&
+		first.name === 'global' &&
+		(first.args === null ||
+			// Only these two selector types keep the whole selector global, because e.g.
+			// :global(button).x means that the selector is still scoped because of the .x
+			relative_selector.selectors.every(
+				(selector) =>
+					is_unscoped_pseudo_class(selector) || selector.type === 'PseudoElementSelector'
+			))
+	);
+}
+
+/**
+ * `true` if is a pseudo class that cannot be or is not scoped
+ * @param {Css.SimpleSelector} selector
+ */
+export function is_unscoped_pseudo_class(selector) {
+	return (
+		selector.type === 'PseudoClassSelector' &&
+		// These make the selector scoped
+		((selector.name !== 'has' &&
+			selector.name !== 'is' &&
+			selector.name !== 'where' &&
+			// Not is special because we want to scope as specific as possible, but because :not
+			// inverses the result, we want to leave the unscoped, too. The exception is more than
+			// one selector in the :not (.e.g :not(.x .y)), then .x and .y should be scoped
+			(selector.name !== 'not' ||
+				selector.args === null ||
+				selector.args.children.every((c) => c.children.length === 1))) ||
+			// selectors with has/is/where/not can also be global if all their children are global
+			selector.args === null ||
+			selector.args.children.every((c) => c.children.every((r) => is_global(r))))
+	);
+}
+
+/**
+ * True if is `:global(...)` or `:global`, irrespective of whether or not there are any pseudo classes that are scoped.
+ * Difference to `is_global`: `:global(x):has(y)` is `true` for `is_outer_global` but `false` for `is_global`.
+ * @param {Css.RelativeSelector} relative_selector
+ * @returns {relative_selector is Css.RelativeSelector & { selectors: [Css.PseudoClassSelector, ...Array<Css.PseudoClassSelector | Css.PseudoElementSelector>] }}
+ */
+export function is_outer_global(relative_selector) {
+	const first = relative_selector.selectors[0];
+
+	return (
+		first.type === 'PseudoClassSelector' &&
+		first.name === 'global' &&
+		(first.args === null ||
+			// Only these two selector types can keep the whole selector global, because e.g.
+			// :global(button).x means that the selector is still scoped because of the .x
+			relative_selector.selectors.every(
+				(selector) =>
+					selector.type === 'PseudoClassSelector' || selector.type === 'PseudoElementSelector'
+			))
+	);
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/css/index.js b/packages/svelte/src/compiler/phases/3-transform/css/index.js
index 350eca35d8..d1f3d3baa6 100644
--- a/packages/svelte/src/compiler/phases/3-transform/css/index.js
+++ b/packages/svelte/src/compiler/phases/3-transform/css/index.js
@@ -292,6 +292,13 @@ const visitors = {
 					context.state.code.prependRight(global.start, '&');
 				}
 				continue;
+			} else {
+				// for any :global() or :global at the middle of compound selector
+				for (const selector of relative_selector.selectors) {
+					if (selector.type === 'PseudoClassSelector' && selector.name === 'global') {
+						remove_global_pseudo_class(selector, null, context.state);
+					}
+				}
 			}
 
 			if (relative_selector.metadata.scoped) {
@@ -306,13 +313,6 @@ const visitors = {
 					}
 				}
 
-				// for any :global() or :global at the middle of compound selector
-				for (const selector of relative_selector.selectors) {
-					if (selector.type === 'PseudoClassSelector' && selector.name === 'global') {
-						remove_global_pseudo_class(selector, null, context.state);
-					}
-				}
-
 				if (relative_selector.selectors.some((s) => s.type === 'NestingSelector')) {
 					continue;
 				}
diff --git a/packages/svelte/src/compiler/types/css.d.ts b/packages/svelte/src/compiler/types/css.d.ts
index 97ac7fc0d3..ba4079ecd0 100644
--- a/packages/svelte/src/compiler/types/css.d.ts
+++ b/packages/svelte/src/compiler/types/css.d.ts
@@ -87,8 +87,8 @@ export namespace Css {
 			/**
 			 * `true` if the whole selector is unscoped, e.g. `:global(...)` or `:global` or `:global.x`.
 			 * Selectors like `:global(...).x` are not considered global, because they still need scoping.
-			 * Selectors like `:global(...):is/where/not/has(...)` are considered global even if they aren't
-			 * strictly speaking (we should consolidate the logic around this at some point).
+			 * Selectors like `:global(...):is/where/not/has(...)` are only considered global if all their
+			 * children are global.
 			 */
 			is_global: boolean;
 			/** `:root`, `:host`, `::view-transition`, or selectors after a `:global` */
diff --git a/packages/svelte/tests/css/samples/has/_config.js b/packages/svelte/tests/css/samples/has/_config.js
index 8b8e7760f5..e5dc5f3459 100644
--- a/packages/svelte/tests/css/samples/has/_config.js
+++ b/packages/svelte/tests/css/samples/has/_config.js
@@ -44,6 +44,20 @@ export default test({
 				character: 401
 			}
 		},
+		{
+			code: 'css_unused_selector',
+			message: 'Unused CSS selector ":global(.foo):has(.unused)"',
+			start: {
+				line: 40,
+				column: 1,
+				character: 422
+			},
+			end: {
+				line: 40,
+				column: 27,
+				character: 448
+			}
+		},
 		{
 			code: 'css_unused_selector',
 			message: 'Unused CSS selector "x:has(y):has(.unused)"',
@@ -141,6 +155,34 @@ export default test({
 				column: 11,
 				character: 1336
 			}
+		},
+		{
+			code: 'css_unused_selector',
+			message: 'Unused CSS selector ":has(.unused)"',
+			start: {
+				line: 129,
+				column: 2,
+				character: 1409
+			},
+			end: {
+				line: 129,
+				column: 15,
+				character: 1422
+			}
+		},
+		{
+			code: 'css_unused_selector',
+			message: 'Unused CSS selector "&:has(.unused)"',
+			start: {
+				line: 135,
+				column: 2,
+				character: 1480
+			},
+			end: {
+				line: 135,
+				column: 16,
+				character: 1494
+			}
 		}
 	]
 });
diff --git a/packages/svelte/tests/css/samples/has/expected.css b/packages/svelte/tests/css/samples/has/expected.css
index 4cb8d76bf6..8eda676f93 100644
--- a/packages/svelte/tests/css/samples/has/expected.css
+++ b/packages/svelte/tests/css/samples/has/expected.css
@@ -27,9 +27,9 @@
 	/* (unused) x:has(.unused) {
 		color: red;
 	}*/
-	.foo:has(.unused.svelte-xyz) {
+	/* (unused) :global(.foo):has(.unused) {
 		color: red;
-	}
+	}*/
 
 	x.svelte-xyz:has(y:where(.svelte-xyz) /* (unused) .unused*/) {
 		color: green;
@@ -111,3 +111,18 @@
 	/* (unused) x:has(~ y) {
 		color: red;
 	}*/
+
+	.foo {
+		.svelte-xyz:has(x:where(.svelte-xyz)) {
+			color: green;
+		}
+		/* (unused) :has(.unused) {
+			color: red;
+		}*/
+		&:has(x.svelte-xyz) {
+			color: green;
+		}
+		/* (unused) &:has(.unused) {
+			color: red;
+		}*/
+	}
diff --git a/packages/svelte/tests/css/samples/has/input.svelte b/packages/svelte/tests/css/samples/has/input.svelte
index 8eb6296f05..3487b64e8c 100644
--- a/packages/svelte/tests/css/samples/has/input.svelte
+++ b/packages/svelte/tests/css/samples/has/input.svelte
@@ -121,4 +121,19 @@
 	x:has(~ y) {
 		color: red;
 	}
+
+	:global(.foo) {
+		:has(x) {
+			color: green;
+		}
+		:has(.unused) {
+			color: red;
+		}
+		&:has(x) {
+			color: green;
+		}
+		&:has(.unused) {
+			color: red;
+		}
+	}
 </style>
diff --git a/packages/svelte/tests/css/samples/is/_config.js b/packages/svelte/tests/css/samples/is/_config.js
index e4c24eb756..eee617e7e4 100644
--- a/packages/svelte/tests/css/samples/is/_config.js
+++ b/packages/svelte/tests/css/samples/is/_config.js
@@ -30,20 +30,6 @@ export default test({
 				character: 125
 			}
 		},
-		{
-			code: 'css_unused_selector',
-			message: 'Unused CSS selector ".unused"',
-			start: {
-				line: 14,
-				column: 7,
-				character: 117
-			},
-			end: {
-				line: 14,
-				column: 14,
-				character: 124
-			}
-		},
 		{
 			code: 'css_unused_selector',
 			message: 'Unused CSS selector ":global(.foo) :is(.unused)"',
@@ -60,16 +46,30 @@ export default test({
 		},
 		{
 			code: 'css_unused_selector',
-			message: 'Unused CSS selector ".unused"',
+			message: 'Unused CSS selector ":global(.foo):is(.unused)"',
 			start: {
-				line: 28,
-				column: 19,
-				character: 292
+				line: 34,
+				column: 1,
+				character: 363
 			},
 			end: {
-				line: 28,
+				line: 34,
 				column: 26,
-				character: 299
+				character: 388
+			}
+		},
+		{
+			code: 'css_unused_selector',
+			message: 'Unused CSS selector ":is(.unused)"',
+			start: {
+				line: 52,
+				column: 2,
+				character: 636
+			},
+			end: {
+				line: 52,
+				column: 14,
+				character: 648
 			}
 		}
 	]
diff --git a/packages/svelte/tests/css/samples/is/expected.css b/packages/svelte/tests/css/samples/is/expected.css
index be8deeff28..639f0d5392 100644
--- a/packages/svelte/tests/css/samples/is/expected.css
+++ b/packages/svelte/tests/css/samples/is/expected.css
@@ -22,6 +22,12 @@
 	/* (unused) :global(.foo) :is(.unused) {
 		color: red;
 	}*/
+	.foo:is(x.svelte-xyz) {
+		color: green;
+	}
+	/* (unused) :global(.foo):is(.unused) {
+		color: red;
+	}*/
 
 	x.svelte-xyz :is(html *) {
 		color: green;
@@ -32,3 +38,12 @@
 	y.svelte-xyz :is(x:where(.svelte-xyz) :where(.svelte-xyz)) {
 		color: green; /* matches z */
 	}
+
+	.foo {
+		:is(x.svelte-xyz) {
+			color: green;
+		}
+		/* (unused) :is(.unused) {
+			color: red;
+		}*/
+	}
diff --git a/packages/svelte/tests/css/samples/is/input.svelte b/packages/svelte/tests/css/samples/is/input.svelte
index 06aa0669b9..b5ae663087 100644
--- a/packages/svelte/tests/css/samples/is/input.svelte
+++ b/packages/svelte/tests/css/samples/is/input.svelte
@@ -28,6 +28,12 @@
 	:global(.foo) :is(.unused) {
 		color: red;
 	}
+	:global(.foo):is(x) {
+		color: green;
+	}
+	:global(.foo):is(.unused) {
+		color: red;
+	}
 
 	x :is(:global(html *)) {
 		color: green;
@@ -38,4 +44,13 @@
 	y :is(x *) {
 		color: green; /* matches z */
 	}
+
+	:global(.foo) {
+		:is(x) {
+			color: green;
+		}
+		:is(.unused) {
+			color: red;
+		}
+	}
 </style>
diff --git a/packages/svelte/tests/css/samples/not-selector-global/expected.css b/packages/svelte/tests/css/samples/not-selector-global/expected.css
index ea9ff39486..b815dcf9aa 100644
--- a/packages/svelte/tests/css/samples/not-selector-global/expected.css
+++ b/packages/svelte/tests/css/samples/not-selector-global/expected.css
@@ -27,3 +27,12 @@
 	span:not(p span) {
 		color: green;
 	}
+
+	.x {
+		.svelte-xyz:not(.foo) {
+			color: green;
+		}
+		&:not(.foo) {
+			color: green;
+		}
+	}
diff --git a/packages/svelte/tests/css/samples/not-selector-global/input.svelte b/packages/svelte/tests/css/samples/not-selector-global/input.svelte
index 1f0e6cd6db..1d2f7a9bca 100644
--- a/packages/svelte/tests/css/samples/not-selector-global/input.svelte
+++ b/packages/svelte/tests/css/samples/not-selector-global/input.svelte
@@ -34,4 +34,13 @@
 	:global(span:not(p span)) {
 		color: green;
 	}
+
+	:global(.x) {
+		:not(.foo) {
+			color: green;
+		}
+		&:not(.foo) {
+			color: green;
+		}
+	}
 </style>
\ No newline at end of file
diff --git a/packages/svelte/tests/css/samples/root/_config.js b/packages/svelte/tests/css/samples/root/_config.js
index f47bee71df..fad7fc536d 100644
--- a/packages/svelte/tests/css/samples/root/_config.js
+++ b/packages/svelte/tests/css/samples/root/_config.js
@@ -1,3 +1,76 @@
 import { test } from '../../test';
 
-export default test({});
+export default test({
+	warnings: [
+		{
+			code: 'css_unused_selector',
+			message: 'Unused CSS selector ":root .unused"',
+			start: {
+				line: 18,
+				column: 2,
+				character: 190
+			},
+			end: {
+				line: 18,
+				column: 15,
+				character: 203
+			}
+		},
+		{
+			code: 'css_unused_selector',
+			message: 'Unused CSS selector ":root:has(.unused)"',
+			start: {
+				line: 25,
+				column: 2,
+				character: 269
+			},
+			end: {
+				line: 25,
+				column: 20,
+				character: 287
+			}
+		},
+		{
+			code: 'css_unused_selector',
+			message: 'Unused CSS selector ".unused"',
+			start: {
+				line: 37,
+				column: 4,
+				character: 401
+			},
+			end: {
+				line: 37,
+				column: 11,
+				character: 408
+			}
+		},
+		{
+			code: 'css_unused_selector',
+			message: 'Unused CSS selector ":has(.unused)"',
+			start: {
+				line: 43,
+				column: 4,
+				character: 480
+			},
+			end: {
+				line: 43,
+				column: 17,
+				character: 493
+			}
+		},
+		{
+			code: 'css_unused_selector',
+			message: 'Unused CSS selector "&:has(.unused)"',
+			start: {
+				line: 49,
+				column: 4,
+				character: 566
+			},
+			end: {
+				line: 49,
+				column: 18,
+				character: 580
+			}
+		}
+	]
+});
diff --git a/packages/svelte/tests/css/samples/root/expected.css b/packages/svelte/tests/css/samples/root/expected.css
index a107696250..b4c82c258e 100644
--- a/packages/svelte/tests/css/samples/root/expected.css
+++ b/packages/svelte/tests/css/samples/root/expected.css
@@ -1,9 +1,52 @@
+
   :root {
-    color: red;
+    color: green;
   }
   .foo:root {
-    color: blue;
+    color: green;
   }
   :root.foo {
     color: green;
   }
+  :root.unknown {
+    color: green;
+  }
+
+  :root h1.svelte-xyz {
+    color: green;
+  }
+  /* (unused) :root .unused {
+    color: red;
+  }*/
+
+  :root:has(h1:where(.svelte-xyz)) {
+    color: green;
+  }
+  /* (unused) :root:has(.unused) {
+    color: red;
+  }*/
+
+  :root:not(.x) {
+    color: green;
+  }
+
+  :root {
+    h1.svelte-xyz {
+      color: green;
+    }
+    /* (unused) .unused {
+      color: red;
+    }*/
+    .svelte-xyz:has(h1:where(.svelte-xyz)) {
+      color: green;
+    }
+    /* (unused) :has(.unused) {
+      color: red;
+    }*/
+    &:has(h1.svelte-xyz) {
+      color: green;
+    }
+    /* (unused) &:has(.unused) {
+      color: red;
+    }*/
+  }
diff --git a/packages/svelte/tests/css/samples/root/expected.html b/packages/svelte/tests/css/samples/root/expected.html
index 1d90ab5df7..5c30de1c29 100644
--- a/packages/svelte/tests/css/samples/root/expected.html
+++ b/packages/svelte/tests/css/samples/root/expected.html
@@ -1 +1 @@
-<h1>Hello!</h1>
\ No newline at end of file
+<h1 class="svelte-xyz">Hello!</h1>
\ No newline at end of file
diff --git a/packages/svelte/tests/css/samples/root/input.svelte b/packages/svelte/tests/css/samples/root/input.svelte
index 979c9d4f0a..e06a1a36fa 100644
--- a/packages/svelte/tests/css/samples/root/input.svelte
+++ b/packages/svelte/tests/css/samples/root/input.svelte
@@ -1,13 +1,55 @@
 <style>
   :root {
-    color: red;
+    color: green;
   }
   .foo:root {
-    color: blue;
+    color: green;
   }
   :root.foo {
     color: green;
   }
+  :root.unknown {
+    color: green;
+  }
+
+  :root h1 {
+    color: green;
+  }
+  :root .unused {
+    color: red;
+  }
+
+  :root:has(h1) {
+    color: green;
+  }
+  :root:has(.unused) {
+    color: red;
+  }
+
+  :root:not(.x) {
+    color: green;
+  }
+
+  :root {
+    h1 {
+      color: green;
+    }
+    .unused {
+      color: red;
+    }
+    :has(h1) {
+      color: green;
+    }
+    :has(.unused) {
+      color: red;
+    }
+    &:has(h1) {
+      color: green;
+    }
+    &:has(.unused) {
+      color: red;
+    }
+  }
 </style>
 
 <h1>Hello!</h1>

From 320ebd24d8857570b0c180752765fb1580590367 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Thu, 14 Nov 2024 12:54:27 +0100
Subject: [PATCH 058/159] fix: bump `is-reference` dependency to fix
 `import.meta` bug (#14286)

closes #14234
---
 .changeset/shaggy-flowers-kneel.md            |  5 ++++
 packages/svelte/package.json                  |  2 +-
 packages/svelte/src/compiler/migrate/index.js |  3 ++
 .../src/compiler/phases/2-analyze/index.js    |  4 +++
 .../visitors/ExportNamedDeclaration.js        |  2 ++
 .../2-analyze/visitors/ExportSpecifier.js     | 15 +++++++---
 .../2-analyze/visitors/ImportDeclaration.js   |  5 ++--
 packages/svelte/src/compiler/utils/ast.js     | 11 +++++--
 .../svelte/src/compiler/utils/builders.js     |  5 ++--
 pnpm-lock.yaml                                | 29 +++++++++++--------
 10 files changed, 57 insertions(+), 24 deletions(-)
 create mode 100644 .changeset/shaggy-flowers-kneel.md

diff --git a/.changeset/shaggy-flowers-kneel.md b/.changeset/shaggy-flowers-kneel.md
new file mode 100644
index 0000000000..fb0a041fbc
--- /dev/null
+++ b/.changeset/shaggy-flowers-kneel.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: bump `is-reference` dependency to fix `import.meta` bug
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 760272680e..608c8d466d 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -144,7 +144,7 @@
     "axobject-query": "^4.1.0",
     "esm-env": "^1.0.0",
     "esrap": "^1.2.2",
-    "is-reference": "^3.0.2",
+    "is-reference": "^3.0.3",
     "locate-character": "^3.0.0",
     "magic-string": "^0.30.11",
     "zimmerframe": "^1.1.2"
diff --git a/packages/svelte/src/compiler/migrate/index.js b/packages/svelte/src/compiler/migrate/index.js
index 9db09158a1..88f9bbf0ee 100644
--- a/packages/svelte/src/compiler/migrate/index.js
+++ b/packages/svelte/src/compiler/migrate/index.js
@@ -507,6 +507,7 @@ const instance_script = {
 			for (let specifier of node.specifiers) {
 				if (
 					specifier.type === 'ImportSpecifier' &&
+					specifier.imported.type === 'Identifier' &&
 					['beforeUpdate', 'afterUpdate'].includes(specifier.imported.name)
 				) {
 					const references = state.scope.references.get(specifier.local.name);
@@ -544,6 +545,8 @@ const instance_script = {
 
 		let count_removed = 0;
 		for (const specifier of node.specifiers) {
+			if (specifier.local.type !== 'Identifier') continue;
+
 			const binding = state.scope.get(specifier.local.name);
 			if (binding?.kind === 'bindable_prop') {
 				state.str.remove(
diff --git a/packages/svelte/src/compiler/phases/2-analyze/index.js b/packages/svelte/src/compiler/phases/2-analyze/index.js
index 9e4f72a66d..a96652d60b 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/index.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/index.js
@@ -474,6 +474,10 @@ export function analyze_component(root, source, options) {
 				}
 			} else {
 				for (const specifier of node.specifiers) {
+					if (specifier.local.type !== 'Identifier' || specifier.exported.type !== 'Identifier') {
+						continue;
+					}
+
 					const binding = instance.scope.get(specifier.local.name);
 
 					if (
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/ExportNamedDeclaration.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/ExportNamedDeclaration.js
index a9e8a05c96..784d2fdd88 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/ExportNamedDeclaration.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/ExportNamedDeclaration.js
@@ -60,6 +60,8 @@ export function ExportNamedDeclaration(node, context) {
 
 		if (!context.state.ast_type /* .svelte.js module */ || context.state.ast_type === 'module') {
 			for (const specified of node.specifiers) {
+				if (specified.local.type !== 'Identifier') continue;
+
 				const binding = context.state.scope.get(specified.local.name);
 
 				if (!binding) continue;
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/ExportSpecifier.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/ExportSpecifier.js
index 27eb39acbf..d0d1ccf932 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/ExportSpecifier.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/ExportSpecifier.js
@@ -9,18 +9,25 @@ import * as e from '../../../errors.js';
  * @param {Context} context
  */
 export function ExportSpecifier(node, context) {
+	const local_name =
+		node.local.type === 'Identifier' ? node.local.name : /** @type {string} */ (node.local.value);
+	const exported_name =
+		node.exported.type === 'Identifier'
+			? node.exported.name
+			: /** @type {string} */ (node.exported.value);
+
 	if (context.state.ast_type === 'instance') {
 		if (context.state.analysis.runes) {
 			context.state.analysis.exports.push({
-				name: node.local.name,
-				alias: node.exported.name
+				name: local_name,
+				alias: exported_name
 			});
 
-			const binding = context.state.scope.get(node.local.name);
+			const binding = context.state.scope.get(local_name);
 			if (binding) binding.reassigned = binding.updated = true;
 		}
 	} else {
-		validate_export(node, context.state.scope, node.local.name);
+		validate_export(node, context.state.scope, local_name);
 	}
 }
 
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/ImportDeclaration.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/ImportDeclaration.js
index eb57fee264..d46218ac64 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/ImportDeclaration.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/ImportDeclaration.js
@@ -18,8 +18,9 @@ export function ImportDeclaration(node, context) {
 			for (const specifier of node.specifiers) {
 				if (specifier.type === 'ImportSpecifier') {
 					if (
-						specifier.imported.name === 'beforeUpdate' ||
-						specifier.imported.name === 'afterUpdate'
+						specifier.imported.type === 'Identifier' &&
+						(specifier.imported.name === 'beforeUpdate' ||
+							specifier.imported.name === 'afterUpdate')
 					) {
 						e.runes_mode_invalid_import(specifier, specifier.imported.name);
 					}
diff --git a/packages/svelte/src/compiler/utils/ast.js b/packages/svelte/src/compiler/utils/ast.js
index 9aff7546be..cc8339f16b 100644
--- a/packages/svelte/src/compiler/utils/ast.js
+++ b/packages/svelte/src/compiler/utils/ast.js
@@ -433,7 +433,11 @@ export function is_simple_expression(node) {
 	}
 
 	if (node.type === 'BinaryExpression' || node.type === 'LogicalExpression') {
-		return is_simple_expression(node.left) && is_simple_expression(node.right);
+		return (
+			node.left.type !== 'PrivateIdentifier' &&
+			is_simple_expression(node.left) &&
+			is_simple_expression(node.right)
+		);
 	}
 
 	return false;
@@ -475,7 +479,10 @@ export function is_expression_async(expression) {
 		case 'AssignmentExpression':
 		case 'BinaryExpression':
 		case 'LogicalExpression': {
-			return is_expression_async(expression.left) || is_expression_async(expression.right);
+			return (
+				(expression.left.type !== 'PrivateIdentifier' && is_expression_async(expression.left)) ||
+				is_expression_async(expression.right)
+			);
 		}
 		case 'CallExpression':
 		case 'NewExpression': {
diff --git a/packages/svelte/src/compiler/utils/builders.js b/packages/svelte/src/compiler/utils/builders.js
index fc1cdf4adb..ecb595d74d 100644
--- a/packages/svelte/src/compiler/utils/builders.js
+++ b/packages/svelte/src/compiler/utils/builders.js
@@ -350,7 +350,7 @@ export function prop(kind, key, value, computed = false) {
  * @returns {ESTree.PropertyDefinition}
  */
 export function prop_def(key, value, computed = false, is_static = false) {
-	return { type: 'PropertyDefinition', key, value, computed, static: is_static, decorators: [] };
+	return { type: 'PropertyDefinition', key, value, computed, static: is_static };
 }
 
 /**
@@ -551,8 +551,7 @@ export function method(kind, key, params, body, computed = false, is_static = fa
 		kind,
 		value: function_builder(null, params, block(body)),
 		computed,
-		static: is_static,
-		decorators: []
+		static: is_static
 	};
 }
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1f33a207fc..83e4522b2f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -67,7 +67,7 @@ importers:
         version: 1.5.0
       '@types/estree':
         specifier: ^1.0.5
-        version: 1.0.5
+        version: 1.0.6
       acorn:
         specifier: ^8.12.1
         version: 8.12.1
@@ -87,8 +87,8 @@ importers:
         specifier: ^1.2.2
         version: 1.2.2
       is-reference:
-        specifier: ^3.0.2
-        version: 3.0.2
+        specifier: ^3.0.3
+        version: 3.0.3
       locate-character:
         specifier: ^3.0.0
         version: 3.0.0
@@ -916,6 +916,9 @@ packages:
   '@types/estree@1.0.5':
     resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
 
+  '@types/estree@1.0.6':
+    resolution: {integrity: sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==}
+
   '@types/json-schema@7.0.15':
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
 
@@ -1775,8 +1778,8 @@ packages:
   is-reference@1.2.1:
     resolution: {integrity: sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==}
 
-  is-reference@3.0.2:
-    resolution: {integrity: sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==}
+  is-reference@3.0.3:
+    resolution: {integrity: sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==}
 
   is-stream@3.0.0:
     resolution: {integrity: sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==}
@@ -3468,7 +3471,7 @@ snapshots:
 
   '@rollup/pluginutils@5.1.0(rollup@4.22.4)':
     dependencies:
-      '@types/estree': 1.0.5
+      '@types/estree': 1.0.6
       estree-walker: 2.0.2
       picomatch: 2.3.1
     optionalDependencies:
@@ -3611,11 +3614,13 @@ snapshots:
 
   '@types/eslint@8.56.12':
     dependencies:
-      '@types/estree': 1.0.5
+      '@types/estree': 1.0.6
       '@types/json-schema': 7.0.15
 
   '@types/estree@1.0.5': {}
 
+  '@types/estree@1.0.6': {}
+
   '@types/json-schema@7.0.15': {}
 
   '@types/node@12.20.55': {}
@@ -4243,7 +4248,7 @@ snapshots:
   esrap@1.2.2:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.0
-      '@types/estree': 1.0.5
+      '@types/estree': 1.0.6
 
   esrecurse@4.3.0:
     dependencies:
@@ -4255,7 +4260,7 @@ snapshots:
 
   estree-walker@3.0.3:
     dependencies:
-      '@types/estree': 1.0.5
+      '@types/estree': 1.0.6
 
   esutils@2.0.3: {}
 
@@ -4556,11 +4561,11 @@ snapshots:
 
   is-reference@1.2.1:
     dependencies:
-      '@types/estree': 1.0.5
+      '@types/estree': 1.0.6
 
-  is-reference@3.0.2:
+  is-reference@3.0.3:
     dependencies:
-      '@types/estree': 1.0.5
+      '@types/estree': 1.0.6
 
   is-stream@3.0.0: {}
 

From 6a7146bee7b98d4745b8d13fb5a7d0c3c4720a34 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 14 Nov 2024 12:47:14 -0500
Subject: [PATCH 059/159] Version Packages (#14287)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/beige-files-pull.md      |  5 -----
 .changeset/great-bulldogs-wonder.md |  5 -----
 .changeset/hot-frogs-melt.md        |  5 -----
 .changeset/shaggy-flowers-kneel.md  |  5 -----
 packages/svelte/CHANGELOG.md        | 12 ++++++++++++
 packages/svelte/package.json        |  2 +-
 packages/svelte/src/version.js      |  2 +-
 7 files changed, 14 insertions(+), 22 deletions(-)
 delete mode 100644 .changeset/beige-files-pull.md
 delete mode 100644 .changeset/great-bulldogs-wonder.md
 delete mode 100644 .changeset/hot-frogs-melt.md
 delete mode 100644 .changeset/shaggy-flowers-kneel.md

diff --git a/.changeset/beige-files-pull.md b/.changeset/beige-files-pull.md
deleted file mode 100644
index 2cd98a2819..0000000000
--- a/.changeset/beige-files-pull.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: account for `:has(...)` as part of `:root`
diff --git a/.changeset/great-bulldogs-wonder.md b/.changeset/great-bulldogs-wonder.md
deleted file mode 100644
index b6cafa4585..0000000000
--- a/.changeset/great-bulldogs-wonder.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: prevent nested pseudo class from being marked as unused
diff --git a/.changeset/hot-frogs-melt.md b/.changeset/hot-frogs-melt.md
deleted file mode 100644
index 95b3e0b4b4..0000000000
--- a/.changeset/hot-frogs-melt.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: use strict equality for key block comparisons in runes mode
diff --git a/.changeset/shaggy-flowers-kneel.md b/.changeset/shaggy-flowers-kneel.md
deleted file mode 100644
index fb0a041fbc..0000000000
--- a/.changeset/shaggy-flowers-kneel.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: bump `is-reference` dependency to fix `import.meta` bug
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 879fdb2058..8040c4ecab 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,17 @@
 # svelte
 
+## 5.1.17
+
+### Patch Changes
+
+- fix: account for `:has(...)` as part of `:root` ([#14229](https://github.com/sveltejs/svelte/pull/14229))
+
+- fix: prevent nested pseudo class from being marked as unused ([#14229](https://github.com/sveltejs/svelte/pull/14229))
+
+- fix: use strict equality for key block comparisons in runes mode ([#14285](https://github.com/sveltejs/svelte/pull/14285))
+
+- fix: bump `is-reference` dependency to fix `import.meta` bug ([#14286](https://github.com/sveltejs/svelte/pull/14286))
+
 ## 5.1.16
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 608c8d466d..ffe19223c2 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.1.16",
+  "version": "5.1.17",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index c6802cecf0..7c0d0680ea 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.1.16';
+export const VERSION = '5.1.17';
 export const PUBLIC_VERSION = '5';

From 8a8e6f70e8955cb3d7aa256710a0ac35ae27f18d Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Thu, 14 Nov 2024 18:48:11 +0100
Subject: [PATCH 060/159] fix: avoid marking subtree as dynamic for inlined
 attributes (#14269)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: avoid marking subtree as dynamic for inlined attributes

* fix: i'm a silly goose 🪿

* chore: refactor `is_inlinable_expression` to accept the attribute

* feat: inline dom expression too

* fix: special case literals with `"` in it and fix standalone case

* chore: simpler check first

Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com>

* typo

* add more stuff to snapshot test

* simplify/speedup by doing the work once, during analysis

* simplify

* simplify - no reason these cases should prevent inlining

* return template

* name is incorrect

* name is incorrect

* fix escaping

* no longer necessary

* remove obsolete description

* better concatenation

* fix test

* do the work at runtime

* fix another thing

* tidy

* tidy up

* simplify

* simplify

* fix

* note to self

* another

* simplify

* more accurate name

* simplify

* simplify

* explain what is happening

* tidy up

* simplify

* better inlining

* update test

* colocate some code

* better inlining

* use attribute metadata

* Update packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js

Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com>

* Apply suggestions from code review

---------

Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com>
Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/spotty-sheep-fetch.md              |   5 +
 .../phases/2-analyze/visitors/Attribute.js    |  14 +-
 .../2-analyze/visitors/CallExpression.js      |   1 +
 .../2-analyze/visitors/ExpressionTag.js       |   5 -
 .../phases/2-analyze/visitors/Identifier.js   |  22 +++-
 .../2-analyze/visitors/MemberExpression.js    |   1 +
 .../visitors/TaggedTemplateExpression.js      |   1 +
 .../phases/3-transform/client/utils.js        |  52 +-------
 .../3-transform/client/visitors/Fragment.js   |  38 ++++--
 .../client/visitors/RegularElement.js         | 106 +++++++++------
 .../client/visitors/TitleElement.js           |   4 +-
 .../client/visitors/shared/element.js         |   4 +-
 .../client/visitors/shared/fragment.js        |  74 ++++++++---
 .../client/visitors/shared/utils.js           | 124 +++++++++---------
 packages/svelte/src/compiler/phases/nodes.js  |   3 +-
 packages/svelte/src/compiler/types/index.d.ts |   2 +
 packages/svelte/src/internal/client/index.js  |   2 +
 packages/svelte/src/internal/server/index.js  |  30 +----
 .../svelte/src/internal/shared/attributes.js  |  28 ++++
 .../main.svelte                               |   2 +-
 .../_expected/client/index.svelte.js          |  11 +-
 .../_expected/server/index.svelte.js          |   4 +-
 .../samples/inline-module-vars/index.svelte   |   7 +-
 23 files changed, 313 insertions(+), 227 deletions(-)
 create mode 100644 .changeset/spotty-sheep-fetch.md
 create mode 100644 packages/svelte/src/internal/shared/attributes.js

diff --git a/.changeset/spotty-sheep-fetch.md b/.changeset/spotty-sheep-fetch.md
new file mode 100644
index 0000000000..8a23f40e3a
--- /dev/null
+++ b/.changeset/spotty-sheep-fetch.md
@@ -0,0 +1,5 @@
+---
+'svelte': minor
+---
+
+feat: better inlining of static attributes
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/Attribute.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/Attribute.js
index 2a281a1aa3..6931f873fb 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/Attribute.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/Attribute.js
@@ -1,7 +1,7 @@
 /** @import { ArrowFunctionExpression, Expression, FunctionDeclaration, FunctionExpression } from 'estree' */
 /** @import { AST, DelegatedEvent, SvelteNode } from '#compiler' */
 /** @import { Context } from '../types' */
-import { is_capture_event, is_delegated } from '../../../../utils.js';
+import { is_boolean_attribute, is_capture_event, is_delegated } from '../../../../utils.js';
 import {
 	get_attribute_chunks,
 	get_attribute_expression,
@@ -16,14 +16,23 @@ import { mark_subtree_dynamic } from './shared/fragment.js';
 export function Attribute(node, context) {
 	context.next();
 
+	const parent = /** @type {SvelteNode} */ (context.path.at(-1));
+
 	// special case
 	if (node.name === 'value') {
-		const parent = /** @type {SvelteNode} */ (context.path.at(-1));
 		if (parent.type === 'RegularElement' && parent.name === 'option') {
 			mark_subtree_dynamic(context.path);
 		}
 	}
 
+	if (node.name.startsWith('on')) {
+		mark_subtree_dynamic(context.path);
+	}
+
+	if (parent.type === 'RegularElement' && is_boolean_attribute(node.name.toLowerCase())) {
+		node.metadata.expression.can_inline = false;
+	}
+
 	if (node.value !== true) {
 		for (const chunk of get_attribute_chunks(node.value)) {
 			if (chunk.type !== 'ExpressionTag') continue;
@@ -37,6 +46,7 @@ export function Attribute(node, context) {
 
 			node.metadata.expression.has_state ||= chunk.metadata.expression.has_state;
 			node.metadata.expression.has_call ||= chunk.metadata.expression.has_call;
+			node.metadata.expression.can_inline &&= chunk.metadata.expression.can_inline;
 		}
 
 		if (is_event_attribute(node)) {
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js
index 957b27ae9b..2ae32e80e1 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js
@@ -178,6 +178,7 @@ export function CallExpression(node, context) {
 		if (!is_pure(node.callee, context) || context.state.expression.dependencies.size > 0) {
 			context.state.expression.has_call = true;
 			context.state.expression.has_state = true;
+			context.state.expression.can_inline = false;
 		}
 	}
 }
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/ExpressionTag.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/ExpressionTag.js
index 32c8d2ca36..f59b7fc569 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/ExpressionTag.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/ExpressionTag.js
@@ -2,7 +2,6 @@
 /** @import { Context } from '../types' */
 import { is_tag_valid_with_parent } from '../../../../html-tree-validation.js';
 import * as e from '../../../errors.js';
-import { mark_subtree_dynamic } from './shared/fragment.js';
 
 /**
  * @param {AST.ExpressionTag} node
@@ -15,9 +14,5 @@ export function ExpressionTag(node, context) {
 		}
 	}
 
-	// TODO ideally we wouldn't do this here, we'd just do it on encountering
-	// an `Identifier` within the tag. But we currently need to handle `{42}` etc
-	mark_subtree_dynamic(context.path);
-
 	context.next({ ...context.state, expression: node.metadata.expression });
 }
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js
index 79dccd5a7c..635f939c75 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js
@@ -1,5 +1,4 @@
 /** @import { Expression, Identifier } from 'estree' */
-/** @import { EachBlock } from '#compiler' */
 /** @import { Context } from '../types' */
 import is_reference from 'is-reference';
 import { should_proxy } from '../../3-transform/client/utils.js';
@@ -20,8 +19,6 @@ export function Identifier(node, context) {
 		return;
 	}
 
-	mark_subtree_dynamic(context.path);
-
 	// If we are using arguments outside of a function, then throw an error
 	if (
 		node.name === 'arguments' &&
@@ -87,6 +84,12 @@ export function Identifier(node, context) {
 		}
 	}
 
+	// no binding means global, and we can't inline e.g. `<span>{location}</span>`
+	// because it could change between component renders. if there _is_ a
+	// binding and it is outside module scope, the expression cannot
+	// be inlined (TODO allow inlining in more cases - e.g. primitive consts)
+	let can_inline = !!binding && !binding.scope.parent && binding.kind === 'normal';
+
 	if (binding) {
 		if (context.state.expression) {
 			context.state.expression.dependencies.add(binding);
@@ -122,4 +125,17 @@ export function Identifier(node, context) {
 			w.reactive_declaration_module_script_dependency(node);
 		}
 	}
+
+	if (!can_inline && context.state.expression) {
+		context.state.expression.can_inline = false;
+	}
+
+	/**
+	 * if the identifier is part of an expression tag of an attribute we want to check if it's inlinable
+	 * before marking the subtree as dynamic. This is because if it's inlinable it will be inlined in the template
+	 * directly making the whole thing actually static.
+	 */
+	if (!can_inline || !context.path.find((node) => node.type === 'Attribute')) {
+		mark_subtree_dynamic(context.path);
+	}
 }
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/MemberExpression.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/MemberExpression.js
index 171a1106a8..adcc2da422 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/MemberExpression.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/MemberExpression.js
@@ -19,6 +19,7 @@ export function MemberExpression(node, context) {
 
 	if (context.state.expression && !is_pure(node, context)) {
 		context.state.expression.has_state = true;
+		context.state.expression.can_inline = false;
 	}
 
 	if (!is_safe_identifier(node, context.state.scope)) {
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/TaggedTemplateExpression.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/TaggedTemplateExpression.js
index eacb8a342a..724b9af311 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/TaggedTemplateExpression.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/TaggedTemplateExpression.js
@@ -10,6 +10,7 @@ export function TaggedTemplateExpression(node, context) {
 	if (context.state.expression && !is_pure(node.tag, context)) {
 		context.state.expression.has_call = true;
 		context.state.expression.has_state = true;
+		context.state.expression.can_inline = false;
 	}
 
 	if (node.tag.type === 'Identifier') {
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/utils.js b/packages/svelte/src/compiler/phases/3-transform/client/utils.js
index c460905977..910f173f79 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/utils.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/utils.js
@@ -1,18 +1,18 @@
 /** @import { ArrowFunctionExpression, Expression, FunctionDeclaration, FunctionExpression, Identifier, Pattern, PrivateIdentifier, Statement } from 'estree' */
-/** @import { AST, Binding, SvelteNode } from '#compiler' */
+/** @import { Binding, SvelteNode } from '#compiler' */
 /** @import { ClientTransformState, ComponentClientTransformState, ComponentContext } from './types.js' */
 /** @import { Analysis } from '../../types.js' */
 /** @import { Scope } from '../../scope.js' */
-import * as b from '../../../utils/builders.js';
-import { extract_identifiers, is_simple_expression } from '../../../utils/ast.js';
 import {
-	PROPS_IS_LAZY_INITIAL,
+	PROPS_IS_BINDABLE,
 	PROPS_IS_IMMUTABLE,
+	PROPS_IS_LAZY_INITIAL,
 	PROPS_IS_RUNES,
-	PROPS_IS_UPDATED,
-	PROPS_IS_BINDABLE
+	PROPS_IS_UPDATED
 } from '../../../../constants.js';
 import { dev } from '../../../state.js';
+import { extract_identifiers, is_simple_expression } from '../../../utils/ast.js';
+import * as b from '../../../utils/builders.js';
 import { get_value } from './visitors/shared/declarations.js';
 
 /**
@@ -311,43 +311,3 @@ export function create_derived_block_argument(node, context) {
 export function create_derived(state, arg) {
 	return b.call(state.analysis.runes ? '$.derived' : '$.derived_safe_equal', arg);
 }
-
-/**
- * Whether a variable can be referenced directly from template string.
- * @param {import('#compiler').Binding | undefined} binding
- * @returns {boolean}
- */
-export function can_inline_variable(binding) {
-	return (
-		!!binding &&
-		// in a `<script module>` block
-		!binding.scope.parent &&
-		// to prevent the need for escaping
-		binding.initial?.type === 'Literal'
-	);
-}
-
-/**
- * @param {(AST.Text | AST.ExpressionTag) | (AST.Text | AST.ExpressionTag)[]} node_or_nodes
- * @param {import('./types.js').ComponentClientTransformState} state
- */
-export function is_inlinable_expression(node_or_nodes, state) {
-	let nodes = Array.isArray(node_or_nodes) ? node_or_nodes : [node_or_nodes];
-	let has_expression_tag = false;
-	for (let value of nodes) {
-		if (value.type === 'ExpressionTag') {
-			if (value.expression.type === 'Identifier') {
-				const binding = state.scope
-					.owner(value.expression.name)
-					?.declarations.get(value.expression.name);
-				if (!can_inline_variable(binding)) {
-					return false;
-				}
-			} else {
-				return false;
-			}
-			has_expression_tag = true;
-		}
-	}
-	return has_expression_tag;
-}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/Fragment.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/Fragment.js
index 08e06cc714..111516ce0a 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/Fragment.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/Fragment.js
@@ -1,4 +1,4 @@
-/** @import { Expression, Identifier, Statement } from 'estree' */
+/** @import { Expression, Identifier, Statement, TemplateElement } from 'estree' */
 /** @import { AST, Namespace } from '#compiler' */
 /** @import { SourceLocation } from '#shared' */
 /** @import { ComponentClientTransformState, ComponentContext } from '../types' */
@@ -141,14 +141,14 @@ export function Fragment(node, context) {
 		const id = b.id(context.state.scope.generate('fragment'));
 
 		const use_space_template =
-			trimmed.some((node) => node.type === 'ExpressionTag') &&
-			trimmed.every((node) => node.type === 'Text' || node.type === 'ExpressionTag');
+			trimmed.every((node) => node.type === 'Text' || node.type === 'ExpressionTag') &&
+			trimmed.some((node) => node.type === 'ExpressionTag' && !node.metadata.expression.can_inline);
 
 		if (use_space_template) {
 			// special case — we can use `$.text` instead of creating a unique template
 			const id = b.id(context.state.scope.generate('text'));
 
-			process_children(trimmed, () => id, false, {
+			process_children(trimmed, () => id, null, {
 				...context,
 				state
 			});
@@ -158,12 +158,12 @@ export function Fragment(node, context) {
 		} else {
 			if (is_standalone) {
 				// no need to create a template, we can just use the existing block's anchor
-				process_children(trimmed, () => b.id('$$anchor'), false, { ...context, state });
+				process_children(trimmed, () => b.id('$$anchor'), null, { ...context, state });
 			} else {
 				/** @type {(is_text: boolean) => Expression} */
 				const expression = (is_text) => b.call('$.first_child', id, is_text && b.true);
 
-				process_children(trimmed, expression, false, { ...context, state });
+				process_children(trimmed, expression, null, { ...context, state });
 
 				let flags = TEMPLATE_FRAGMENT;
 
@@ -212,12 +212,34 @@ function join_template(items) {
 	let quasi = b.quasi('');
 	const template = b.template([quasi], []);
 
+	/**
+	 * @param {Expression} expression
+	 */
+	function push(expression) {
+		if (expression.type === 'TemplateLiteral') {
+			for (let i = 0; i < expression.expressions.length; i += 1) {
+				const q = expression.quasis[i];
+				const e = expression.expressions[i];
+
+				quasi.value.cooked += /** @type {string} */ (q.value.cooked);
+				push(e);
+			}
+
+			const last = /** @type {TemplateElement} */ (expression.quasis.at(-1));
+			quasi.value.cooked += /** @type {string} */ (last.value.cooked);
+		} else if (expression.type === 'Literal') {
+			/** @type {string} */ (quasi.value.cooked) += expression.value;
+		} else {
+			template.expressions.push(expression);
+			template.quasis.push((quasi = b.quasi('')));
+		}
+	}
+
 	for (const item of items) {
 		if (typeof item === 'string') {
 			quasi.value.cooked += item;
 		} else {
-			template.expressions.push(item);
-			template.quasis.push((quasi = b.quasi('')));
+			push(item);
 		}
 	}
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
index 4d3cebcee6..455327a712 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
@@ -1,46 +1,36 @@
-/** @import { Expression, ExpressionStatement, Identifier, MemberExpression, ObjectExpression, Statement } from 'estree' */
+/** @import { Expression, ExpressionStatement, Identifier, Literal, MemberExpression, ObjectExpression, Statement } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { SourceLocation } from '#shared' */
 /** @import { ComponentClientTransformState, ComponentContext } from '../types' */
 /** @import { Scope } from '../../../scope' */
+import { escape_html } from '../../../../../escaping.js';
 import {
 	is_boolean_attribute,
 	is_dom_property,
 	is_load_error_element,
 	is_void
 } from '../../../../../utils.js';
-import { escape_html } from '../../../../../escaping.js';
 import { dev, is_ignored, locator } from '../../../../state.js';
-import {
-	get_attribute_expression,
-	is_event_attribute,
-	is_text_attribute
-} from '../../../../utils/ast.js';
+import { is_event_attribute, is_text_attribute } from '../../../../utils/ast.js';
 import * as b from '../../../../utils/builders.js';
 import { is_custom_element_node } from '../../../nodes.js';
 import { clean_nodes, determine_namespace_for_children } from '../../utils.js';
+import { build_getter, create_derived } from '../utils.js';
 import {
-	build_getter,
-	can_inline_variable,
-	create_derived,
-	is_inlinable_expression
-} from '../utils.js';
-import {
-	get_attribute_name,
 	build_attribute_value,
 	build_class_directives,
+	build_set_attributes,
 	build_style_directives,
-	build_set_attributes
+	get_attribute_name
 } from './shared/element.js';
+import { visit_event_attribute } from './shared/events.js';
 import { process_children } from './shared/fragment.js';
 import {
 	build_render_statement,
-	build_template_literal,
+	build_template_chunk,
 	build_update,
-	build_update_assignment,
-	get_states_and_calls
+	build_update_assignment
 } from './shared/utils.js';
-import { visit_event_attribute } from './shared/events.js';
 
 /**
  * @param {AST.RegularElement} node
@@ -362,28 +352,32 @@ export function RegularElement(node, context) {
 
 	// special case — if an element that only contains text, we don't need
 	// to descend into it if the text is non-reactive
-	const states_and_calls =
-		trimmed.every((node) => node.type === 'Text' || node.type === 'ExpressionTag') &&
-		trimmed.some((node) => node.type === 'ExpressionTag') &&
-		get_states_and_calls(trimmed);
+	const is_text = trimmed.every((node) => node.type === 'Text' || node.type === 'ExpressionTag');
+
+	// in the rare case that we have static text that can't be inlined
+	// (e.g. `<span>{location}</span>`), set `textContent` programmatically
+	const use_text_content =
+		is_text &&
+		trimmed.every((node) => node.type === 'Text' || !node.metadata.expression.has_state) &&
+		trimmed.some((node) => node.type === 'ExpressionTag' && !node.metadata.expression.can_inline);
+
+	if (use_text_content) {
+		let { value } = build_template_chunk(trimmed, context.visit, child_state);
 
-	if (states_and_calls && states_and_calls.states === 0) {
 		child_state.init.push(
-			b.stmt(
-				b.assignment(
-					'=',
-					b.member(context.state.node, 'textContent'),
-					build_template_literal(trimmed, context.visit, child_state).value
-				)
-			)
+			b.stmt(b.assignment('=', b.member(context.state.node, 'textContent'), value))
 		);
 	} else {
 		/** @type {Expression} */
 		let arg = context.state.node;
 
 		// If `hydrate_node` is set inside the element, we need to reset it
-		// after the element has been hydrated
-		let needs_reset = trimmed.some((node) => node.type !== 'Text');
+		// after the element has been hydrated (we don't need to reset if it's been inlined)
+		let needs_reset = !trimmed.every(
+			(node) =>
+				node.type === 'Text' ||
+				(node.type === 'ExpressionTag' && node.metadata.expression.can_inline)
+		);
 
 		// The same applies if it's a `<template>` element, since we need to
 		// set the value of `hydrate_node` to `node.content`
@@ -393,7 +387,7 @@ export function RegularElement(node, context) {
 			arg = b.member(arg, 'content');
 		}
 
-		process_children(trimmed, (is_text) => b.call('$.child', arg, is_text && b.true), true, {
+		process_children(trimmed, (is_text) => b.call('$.child', arg, is_text && b.true), node, {
 			...context,
 			state: child_state
 		});
@@ -586,10 +580,6 @@ function build_element_attribute_update_assignment(element, node_id, attribute,
 		);
 	}
 
-	const inlinable_expression =
-		attribute.value === true
-			? false // not an expression
-			: is_inlinable_expression(attribute.value, context.state);
 	if (attribute.metadata.expression.has_state) {
 		if (has_call) {
 			state.init.push(build_update(update));
@@ -597,14 +587,44 @@ function build_element_attribute_update_assignment(element, node_id, attribute,
 			state.update.push(update);
 		}
 		return true;
-	} else {
-		if (inlinable_expression) {
-			context.state.template.push(` ${name}="`, value, '"');
+	}
+
+	// we need to special case textarea value because it's not an actual attribute
+	const can_inline =
+		(attribute.name !== 'value' || element.name !== 'textarea') &&
+		attribute.metadata.expression.can_inline;
+
+	if (can_inline) {
+		/** @type {Literal | undefined} */
+		let literal = undefined;
+
+		if (value.type === 'Literal') {
+			literal = value;
+		} else if (value.type === 'Identifier') {
+			const binding = context.state.scope.get(value.name);
+			if (binding && binding.initial?.type === 'Literal' && !binding.reassigned) {
+				literal = binding.initial;
+			}
+		}
+
+		if (literal && escape_html(literal.value, true) === String(literal.value)) {
+			if (is_boolean_attribute(name)) {
+				if (literal.value) {
+					context.state.template.push(` ${name}`);
+				}
+			} else {
+				context.state.template.push(` ${name}="`, value, '"');
+			}
 		} else {
-			state.init.push(update);
+			context.state.template.push(
+				b.call('$.attr', b.literal(name), value, is_boolean_attribute(name) && b.true)
+			);
 		}
-		return false;
+	} else {
+		state.init.push(update);
 	}
+
+	return false;
 }
 
 /**
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/TitleElement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/TitleElement.js
index a71deaf539..72cc57b068 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/TitleElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/TitleElement.js
@@ -1,14 +1,14 @@
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
 import * as b from '../../../../utils/builders.js';
-import { build_template_literal } from './shared/utils.js';
+import { build_template_chunk } from './shared/utils.js';
 
 /**
  * @param {AST.TitleElement} node
  * @param {ComponentContext} context
  */
 export function TitleElement(node, context) {
-	const { has_state, value } = build_template_literal(
+	const { has_state, value } = build_template_chunk(
 		/** @type {any} */ (node.fragment.nodes),
 		context.visit,
 		context.state
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/element.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/element.js
index e0fbe11b73..1b0737e31e 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/element.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/element.js
@@ -6,7 +6,7 @@ import { is_ignored } from '../../../../../state.js';
 import { get_attribute_expression, is_event_attribute } from '../../../../../utils/ast.js';
 import * as b from '../../../../../utils/builders.js';
 import { build_getter, create_derived } from '../../utils.js';
-import { build_template_literal, build_update } from './utils.js';
+import { build_template_chunk, build_update } from './utils.js';
 
 /**
  * @param {Array<AST.Attribute | AST.SpreadAttribute>} attributes
@@ -200,7 +200,7 @@ export function build_attribute_value(value, context) {
 		};
 	}
 
-	return build_template_literal(value, context.visit, context.state);
+	return build_template_chunk(value, context.visit, context.state);
 }
 
 /**
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js
index 3b009fb5b5..ac6e0f8f9f 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js
@@ -1,10 +1,11 @@
 /** @import { Expression } from 'estree' */
 /** @import { AST, SvelteNode } from '#compiler' */
+/** @import { Scope } from '../../../../scope.js' */
 /** @import { ComponentContext } from '../../types' */
-import { is_event_attribute, is_text_attribute } from '../../../../../utils/ast.js';
+import { escape_html } from '../../../../../../escaping.js';
+import { is_event_attribute } from '../../../../../utils/ast.js';
 import * as b from '../../../../../utils/builders.js';
-import { is_inlinable_expression } from '../../utils.js';
-import { build_template_literal, build_update } from './utils.js';
+import { build_template_chunk, build_update } from './utils.js';
 
 /**
  * Processes an array of template nodes, joining sibling text/expression nodes
@@ -12,10 +13,10 @@ import { build_template_literal, build_update } from './utils.js';
  * corresponding template node references these updates are applied to.
  * @param {SvelteNode[]} nodes
  * @param {(is_text: boolean) => Expression} initial
- * @param {boolean} is_element
+ * @param {AST.RegularElement | null} element
  * @param {ComponentContext} context
  */
-export function process_children(nodes, initial, is_element, { visit, state }) {
+export function process_children(nodes, initial, element, { visit, state }) {
 	const within_bound_contenteditable = state.metadata.bound_contenteditable;
 	let prev = initial;
 	let skipped = 0;
@@ -61,16 +62,17 @@ export function process_children(nodes, initial, is_element, { visit, state }) {
 	 * @param {Sequence} sequence
 	 */
 	function flush_sequence(sequence) {
-		if (sequence.every((node) => node.type === 'Text')) {
+		const { has_state, has_call, value, can_inline } = build_template_chunk(sequence, visit, state);
+
+		if (can_inline) {
 			skipped += 1;
-			state.template.push(sequence.map((node) => node.raw).join(''));
+			const raw = element?.name === 'script' || element?.name === 'style';
+			state.template.push(raw ? value : escape_inline_expression(value, state.scope));
 			return;
 		}
 
 		state.template.push(' ');
 
-		const { has_state, has_call, value } = build_template_literal(sequence, visit, state);
-
 		// if this is a standalone `{expression}`, make sure we handle the case where
 		// no text node was created because the expression was empty during SSR
 		const is_text = sequence.length === 1;
@@ -98,9 +100,9 @@ export function process_children(nodes, initial, is_element, { visit, state }) {
 
 			let child_state = state;
 
-			if (is_static_element(node, state)) {
+			if (is_static_element(node)) {
 				skipped += 1;
-			} else if (node.type === 'EachBlock' && nodes.length === 1 && is_element) {
+			} else if (node.type === 'EachBlock' && nodes.length === 1 && element) {
 				node.metadata.is_controlled = true;
 			} else {
 				const id = flush_node(false, node.type === 'RegularElement' ? node.name : 'node');
@@ -125,9 +127,8 @@ export function process_children(nodes, initial, is_element, { visit, state }) {
 
 /**
  * @param {SvelteNode} node
- * @param {ComponentContext["state"]} state
  */
-function is_static_element(node, state) {
+function is_static_element(node) {
 	if (node.type !== 'RegularElement') return false;
 	if (node.fragment.metadata.dynamic) return false;
 	if (node.name.includes('-')) return false; // we're setting all attributes on custom elements through properties
@@ -154,16 +155,49 @@ function is_static_element(node, state) {
 			return false;
 		}
 
-		if (
-			attribute.value !== true &&
-			!is_text_attribute(attribute) &&
-			// If the attribute is not a text attribute but is inlinable we will directly inline it in the
-			// the template so before returning false we need to check that the attribute is not inlinable
-			!is_inlinable_expression(attribute.value, state)
-		) {
+		if (!attribute.metadata.expression.can_inline) {
 			return false;
 		}
 	}
 
 	return true;
 }
+
+/**
+ * @param {Expression} node
+ * @param {Scope} scope
+ * @returns {Expression}
+ */
+function escape_inline_expression(node, scope) {
+	if (node.type === 'Literal') {
+		if (typeof node.value === 'string') {
+			return b.literal(escape_html(node.value));
+		}
+
+		return node;
+	}
+
+	if (node.type === 'TemplateLiteral') {
+		return b.template(
+			node.quasis.map((q) => b.quasi(escape_html(q.value.cooked))),
+			node.expressions.map((expression) => escape_inline_expression(expression, scope))
+		);
+	}
+
+	/**
+	 * If we can't determine the range of possible values statically, wrap in
+	 * `$.escape(...)`. TODO expand this to cover more cases
+	 */
+	let needs_escape = true;
+
+	if (node.type === 'Identifier') {
+		const binding = scope.get(node.name);
+
+		// TODO handle more cases
+		if (binding?.initial?.type === 'Literal' && !binding.reassigned) {
+			needs_escape = escape_html(binding.initial.value) !== String(binding.initial.value);
+		}
+	}
+
+	return needs_escape ? b.call('$.escape', node) : node;
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js
index 21b902d5c2..b74d2cc9c0 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js
@@ -1,4 +1,4 @@
-/** @import { Expression, ExpressionStatement, Identifier, MemberExpression, Statement, Super } from 'estree' */
+/** @import { Expression, ExpressionStatement, Identifier, MemberExpression, Statement, Super, TemplateLiteral, Node } from 'estree' */
 /** @import { AST, SvelteNode } from '#compiler' */
 /** @import { ComponentClientTransformState } from '../../types' */
 import { walk } from 'zimmerframe';
@@ -10,85 +10,89 @@ import { create_derived } from '../../utils.js';
 import is_reference from 'is-reference';
 import { locator } from '../../../../../state.js';
 
-/**
- * @param {Array<AST.Text | AST.ExpressionTag>} values
- */
-export function get_states_and_calls(values) {
-	let states = 0;
-	let calls = 0;
-	for (let i = 0; i < values.length; i++) {
-		const node = values[i];
-
-		if (node.type === 'ExpressionTag') {
-			if (node.metadata.expression.has_call) {
-				calls++;
-			}
-			if (node.metadata.expression.has_state) {
-				states++;
-			}
-		}
-	}
-
-	return { states, calls };
-}
-
 /**
  * @param {Array<AST.Text | AST.ExpressionTag>} values
  * @param {(node: SvelteNode, state: any) => any} visit
  * @param {ComponentClientTransformState} state
- * @returns {{ value: Expression, has_state: boolean, has_call: boolean }}
+ * @returns {{ value: Expression, has_state: boolean, has_call: boolean, can_inline: boolean }}
  */
-export function build_template_literal(values, visit, state) {
+export function build_template_chunk(values, visit, state) {
 	/** @type {Expression[]} */
 	const expressions = [];
 
 	let quasi = b.quasi('');
 	const quasis = [quasi];
 
-	const { states, calls } = get_states_and_calls(values);
+	let has_call = false;
+	let has_state = false;
+	let can_inline = true;
+	let contains_multiple_call_expression = false;
 
-	let has_call = calls > 0;
-	let has_state = states > 0;
-	let contains_multiple_call_expression = calls > 1;
+	for (const node of values) {
+		if (node.type === 'ExpressionTag') {
+			if (node.metadata.expression.has_call) {
+				if (has_call) contains_multiple_call_expression = true;
+				has_call = true;
+			}
+
+			if (node.metadata.expression.has_state) {
+				has_state = true;
+			}
+
+			if (!node.metadata.expression.can_inline) {
+				can_inline = false;
+			}
+		}
+	}
 
 	for (let i = 0; i < values.length; i++) {
 		const node = values[i];
 
 		if (node.type === 'Text') {
 			quasi.value.cooked += node.data;
-		} else if (node.type === 'ExpressionTag' && node.expression.type === 'Literal') {
-			if (node.expression.value != null) {
-				quasi.value.cooked += node.expression.value + '';
-			}
 		} else {
-			if (contains_multiple_call_expression) {
-				const id = b.id(state.scope.generate('stringified_text'));
-				state.init.push(
-					b.const(
-						id,
-						create_derived(
-							state,
-							b.thunk(
-								b.logical(
-									'??',
-									/** @type {Expression} */ (visit(node.expression, state)),
-									b.literal('')
-								)
-							)
-						)
-					)
-				);
-				expressions.push(b.call('$.get', id));
-			} else if (values.length === 1) {
-				// If we have a single expression, then pass that in directly to possibly avoid doing
-				// extra work in the template_effect (instead we do the work in set_text).
-				return { value: visit(node.expression, state), has_state, has_call };
+			const expression = /** @type {Expression} */ (visit(node.expression, state));
+
+			if (expression.type === 'Literal') {
+				if (expression.value != null) {
+					quasi.value.cooked += expression.value + '';
+				}
 			} else {
-				expressions.push(b.logical('??', visit(node.expression, state), b.literal('')));
-			}
+				let value = expression;
+
+				// if we don't know the value, we need to add `?? ''` to replace
+				// `null` and `undefined` with the empty string
+				let needs_fallback = true;
+
+				if (value.type === 'Identifier') {
+					const binding = state.scope.get(value.name);
 
-			quasi = b.quasi('', i + 1 === values.length);
-			quasis.push(quasi);
+					if (binding && binding.initial?.type === 'Literal' && !binding.reassigned) {
+						needs_fallback = binding.initial.value === null;
+					}
+				}
+
+				if (needs_fallback) {
+					value = b.logical('??', expression, b.literal(''));
+				}
+
+				if (contains_multiple_call_expression) {
+					const id = b.id(state.scope.generate('stringified_text'));
+
+					state.init.push(b.const(id, create_derived(state, b.thunk(value))));
+
+					expressions.push(b.call('$.get', id));
+				} else if (values.length === 1) {
+					// If we have a single expression, then pass that in directly to possibly avoid doing
+					// extra work in the template_effect (instead we do the work in set_text).
+					return { value: visit(node.expression, state), has_state, has_call, can_inline };
+				} else {
+					expressions.push(value);
+				}
+
+				quasi = b.quasi('', i + 1 === values.length);
+				quasis.push(quasi);
+			}
 		}
 	}
 
@@ -98,7 +102,7 @@ export function build_template_literal(values, visit, state) {
 
 	const value = b.template(quasis, expressions);
 
-	return { value, has_state, has_call };
+	return { value, has_state, has_call, can_inline };
 }
 
 /**
diff --git a/packages/svelte/src/compiler/phases/nodes.js b/packages/svelte/src/compiler/phases/nodes.js
index ead525aaa1..13a54730eb 100644
--- a/packages/svelte/src/compiler/phases/nodes.js
+++ b/packages/svelte/src/compiler/phases/nodes.js
@@ -58,6 +58,7 @@ export function create_expression_metadata() {
 	return {
 		dependencies: new Set(),
 		has_state: false,
-		has_call: false
+		has_call: false,
+		can_inline: true
 	};
 }
diff --git a/packages/svelte/src/compiler/types/index.d.ts b/packages/svelte/src/compiler/types/index.d.ts
index 8a45f2d4fd..bd4749db00 100644
--- a/packages/svelte/src/compiler/types/index.d.ts
+++ b/packages/svelte/src/compiler/types/index.d.ts
@@ -317,6 +317,8 @@ export interface ExpressionMetadata {
 	has_state: boolean;
 	/** True if the expression involves a call expression (often, it will need to be wrapped in a derived) */
 	has_call: boolean;
+	/** True if the expression can be inlined into a template */
+	can_inline: boolean;
 }
 
 export * from './template.js';
diff --git a/packages/svelte/src/internal/client/index.js b/packages/svelte/src/internal/client/index.js
index c401867a0f..bfc0a6aac9 100644
--- a/packages/svelte/src/internal/client/index.js
+++ b/packages/svelte/src/internal/client/index.js
@@ -1,4 +1,5 @@
 export { FILENAME, HMR, NAMESPACE_SVG } from '../../constants.js';
+export { escape_html as escape } from '../../escaping.js';
 export { cleanup_styles } from './dev/css.js';
 export { add_locations } from './dev/elements.js';
 export { hmr } from './dev/hmr.js';
@@ -155,6 +156,7 @@ export {
 	$window as window,
 	$document as document
 } from './dom/operations.js';
+export { attr } from '../shared/attributes.js';
 export { snapshot } from '../shared/clone.js';
 export { noop, fallback } from '../shared/utils.js';
 export {
diff --git a/packages/svelte/src/internal/server/index.js b/packages/svelte/src/internal/server/index.js
index 9a66095de4..615a49fbd4 100644
--- a/packages/svelte/src/internal/server/index.js
+++ b/packages/svelte/src/internal/server/index.js
@@ -2,6 +2,7 @@
 /** @import { Component, Payload, RenderOutput } from '#server' */
 /** @import { Store } from '#shared' */
 export { FILENAME, HMR } from '../../constants.js';
+import { attr } from '../shared/attributes.js';
 import { is_promise, noop } from '../shared/utils.js';
 import { subscribe_to_store } from '../../store/utils.js';
 import {
@@ -153,33 +154,6 @@ export function head(payload, fn) {
 	head_payload.out += BLOCK_CLOSE;
 }
 
-/**
- * `<div translate={false}>` should be rendered as `<div translate="no">` and _not_
- * `<div translate="false">`, which is equivalent to `<div translate="yes">`. There
- * may be other odd cases that need to be added to this list in future
- * @type {Record<string, Map<any, string>>}
- */
-const replacements = {
-	translate: new Map([
-		[true, 'yes'],
-		[false, 'no']
-	])
-};
-
-/**
- * @template V
- * @param {string} name
- * @param {V} value
- * @param {boolean} [is_boolean]
- * @returns {string}
- */
-export function attr(name, value, is_boolean = false) {
-	if (value == null || (!value && is_boolean) || (value === '' && name === 'class')) return '';
-	const normalized = (name in replacements && replacements[name].get(value)) || value;
-	const assignment = is_boolean ? '' : `="${escape_html(normalized, true)}"`;
-	return ` ${name}${assignment}`;
-}
-
 /**
  * @param {Payload} payload
  * @param {boolean} is_html
@@ -549,6 +523,8 @@ export function once(get_value) {
 	};
 }
 
+export { attr };
+
 export { html } from './blocks/html.js';
 
 export { push, pop } from './context.js';
diff --git a/packages/svelte/src/internal/shared/attributes.js b/packages/svelte/src/internal/shared/attributes.js
new file mode 100644
index 0000000000..867d6ba5d3
--- /dev/null
+++ b/packages/svelte/src/internal/shared/attributes.js
@@ -0,0 +1,28 @@
+import { escape_html } from '../../escaping.js';
+
+/**
+ * `<div translate={false}>` should be rendered as `<div translate="no">` and _not_
+ * `<div translate="false">`, which is equivalent to `<div translate="yes">`. There
+ * may be other odd cases that need to be added to this list in future
+ * @type {Record<string, Map<any, string>>}
+ */
+const replacements = {
+	translate: new Map([
+		[true, 'yes'],
+		[false, 'no']
+	])
+};
+
+/**
+ * @template V
+ * @param {string} name
+ * @param {V} value
+ * @param {boolean} [is_boolean]
+ * @returns {string}
+ */
+export function attr(name, value, is_boolean = false) {
+	if (value == null || (!value && is_boolean) || (value === '' && name === 'class')) return '';
+	const normalized = (name in replacements && replacements[name].get(value)) || value;
+	const assignment = is_boolean ? '' : `="${escape_html(normalized, true)}"`;
+	return ` ${name}${assignment}`;
+}
diff --git a/packages/svelte/tests/runtime-legacy/samples/attribute-boolean-case-insensitive/main.svelte b/packages/svelte/tests/runtime-legacy/samples/attribute-boolean-case-insensitive/main.svelte
index 9020894086..bcc418511f 100644
--- a/packages/svelte/tests/runtime-legacy/samples/attribute-boolean-case-insensitive/main.svelte
+++ b/packages/svelte/tests/runtime-legacy/samples/attribute-boolean-case-insensitive/main.svelte
@@ -1 +1 @@
-<input READONLY={true} REQUIRED={false}>
+<input READONLY={!0} REQUIRED={!1}>
diff --git a/packages/svelte/tests/snapshot/samples/inline-module-vars/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/inline-module-vars/_expected/client/index.svelte.js
index 46ed3c1913..75e632239e 100644
--- a/packages/svelte/tests/snapshot/samples/inline-module-vars/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/inline-module-vars/_expected/client/index.svelte.js
@@ -5,12 +5,13 @@ const __DECLARED_ASSET_0__ = "__VITE_ASSET__2AM7_y_a__ 1440w, __VITE_ASSET__2AM7
 const __DECLARED_ASSET_1__ = "__VITE_ASSET__2AM7_y_c__ 1440w, __VITE_ASSET__2AM7_y_d__ 960w";
 const __DECLARED_ASSET_2__ = "__VITE_ASSET__2AM7_y_e__ 1440w, __VITE_ASSET__2AM7_y_f__ 960w";
 const __DECLARED_ASSET_3__ = "__VITE_ASSET__2AM7_y_g__";
-var root = $.template(`<picture><source srcset="${__DECLARED_ASSET_0__}" type="image/avif"> <source srcset="${__DECLARED_ASSET_1__}" type="image/webp"> <source srcset="${__DECLARED_ASSET_2__}" type="image/png"> <img src="${__DECLARED_ASSET_3__}" alt="production test" width="1440" height="1440"></picture>`);
+const a = 1;
+const b = 2;
+var root = $.template(`<picture><source srcset="${__DECLARED_ASSET_0__}" type="image/avif"> <source srcset="${__DECLARED_ASSET_1__}" type="image/webp"> <source srcset="${__DECLARED_ASSET_2__}" type="image/png"> <img src="${__DECLARED_ASSET_3__}" alt="production test" width="1440" height="1440"></picture> <p>${a} + ${b} = ${$.escape(a + b ?? "")}</p>`, 1);
 
 export default function Inline_module_vars($$anchor) {
-	var picture = root();
+	var fragment = root();
+	var p = $.sibling($.first_child(fragment), 2);
 
-	$.next(6);
-	$.reset(picture);
-	$.append($$anchor, picture);
+	$.append($$anchor, fragment);
 }
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/inline-module-vars/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/inline-module-vars/_expected/server/index.svelte.js
index 9dad39d81e..ca98cd952b 100644
--- a/packages/svelte/tests/snapshot/samples/inline-module-vars/_expected/server/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/inline-module-vars/_expected/server/index.svelte.js
@@ -4,7 +4,9 @@ const __DECLARED_ASSET_0__ = "__VITE_ASSET__2AM7_y_a__ 1440w, __VITE_ASSET__2AM7
 const __DECLARED_ASSET_1__ = "__VITE_ASSET__2AM7_y_c__ 1440w, __VITE_ASSET__2AM7_y_d__ 960w";
 const __DECLARED_ASSET_2__ = "__VITE_ASSET__2AM7_y_e__ 1440w, __VITE_ASSET__2AM7_y_f__ 960w";
 const __DECLARED_ASSET_3__ = "__VITE_ASSET__2AM7_y_g__";
+const a = 1;
+const b = 2;
 
 export default function Inline_module_vars($$payload) {
-	$$payload.out += `<picture><source${$.attr("srcset", __DECLARED_ASSET_0__)} type="image/avif"> <source${$.attr("srcset", __DECLARED_ASSET_1__)} type="image/webp"> <source${$.attr("srcset", __DECLARED_ASSET_2__)} type="image/png"> <img${$.attr("src", __DECLARED_ASSET_3__)} alt="production test" width="1440" height="1440"></picture>`;
+	$$payload.out += `<picture><source${$.attr("srcset", __DECLARED_ASSET_0__)} type="image/avif"> <source${$.attr("srcset", __DECLARED_ASSET_1__)} type="image/webp"> <source${$.attr("srcset", __DECLARED_ASSET_2__)} type="image/png"> <img${$.attr("src", __DECLARED_ASSET_3__)} alt="production test"${$.attr("width", 1440)}${$.attr("height", 1440)}></picture> <p>${$.escape(a)} + ${$.escape(b)} = ${$.escape(a + b)}</p>`;
 }
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/inline-module-vars/index.svelte b/packages/svelte/tests/snapshot/samples/inline-module-vars/index.svelte
index b46a86dc0b..a7b737e596 100644
--- a/packages/svelte/tests/snapshot/samples/inline-module-vars/index.svelte
+++ b/packages/svelte/tests/snapshot/samples/inline-module-vars/index.svelte
@@ -5,11 +5,16 @@
 	const __DECLARED_ASSET_1__ = "__VITE_ASSET__2AM7_y_c__ 1440w, __VITE_ASSET__2AM7_y_d__ 960w";
 	const __DECLARED_ASSET_2__ = "__VITE_ASSET__2AM7_y_e__ 1440w, __VITE_ASSET__2AM7_y_f__ 960w";
 	const __DECLARED_ASSET_3__ = "__VITE_ASSET__2AM7_y_g__";
+
+	const a = 1;
+	const b = 2;
 </script>
 
 <picture>
 	<source srcset={__DECLARED_ASSET_0__} type="image/avif" />
 	<source srcset={__DECLARED_ASSET_1__} type="image/webp" />
 	<source srcset={__DECLARED_ASSET_2__} type="image/png" />
-	<img src={__DECLARED_ASSET_3__} alt="production test" width=1440 height=1440 />
+	<img src={__DECLARED_ASSET_3__} alt="production test" width={1440} height={1440} />
 </picture>
+
+<p>{a} + {b} = {a + b}</p>

From 312dd51acc44d92ab855f7eaf15d2d9150c0a6f3 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 14 Nov 2024 12:56:16 -0500
Subject: [PATCH 061/159] Version Packages (#14302)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/spotty-sheep-fetch.md | 5 -----
 packages/svelte/CHANGELOG.md     | 6 ++++++
 packages/svelte/package.json     | 2 +-
 packages/svelte/src/version.js   | 2 +-
 4 files changed, 8 insertions(+), 7 deletions(-)
 delete mode 100644 .changeset/spotty-sheep-fetch.md

diff --git a/.changeset/spotty-sheep-fetch.md b/.changeset/spotty-sheep-fetch.md
deleted file mode 100644
index 8a23f40e3a..0000000000
--- a/.changeset/spotty-sheep-fetch.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': minor
----
-
-feat: better inlining of static attributes
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 8040c4ecab..f7e17f14f9 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,11 @@
 # svelte
 
+## 5.2.0
+
+### Minor Changes
+
+- feat: better inlining of static attributes ([#14269](https://github.com/sveltejs/svelte/pull/14269))
+
 ## 5.1.17
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index ffe19223c2..b23d031a17 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.1.17",
+  "version": "5.2.0",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 7c0d0680ea..e3d34edc4e 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.1.17';
+export const VERSION = '5.2.0';
 export const PUBLIC_VERSION = '5';

From 7fd37740150da964f923f136fed36c2156b533b4 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Thu, 14 Nov 2024 20:22:35 +0000
Subject: [PATCH 062/159] fix: disallow invalid attributes for
 `<svelte:window>` and `<svelte:document>` (#14228)

---
 .changeset/fast-ligers-repeat.md                   |  5 +++++
 .../docs/98-reference/.generated/compile-errors.md |  6 ++++++
 .../svelte/messages/compile-errors/template.md     |  4 ++++
 packages/svelte/src/compiler/errors.js             | 10 ++++++++++
 .../phases/2-analyze/visitors/SvelteDocument.js    | 12 ++++++++++++
 .../phases/2-analyze/visitors/SvelteWindow.js      | 12 ++++++++++++
 .../illegal_spread_element-document/errors.json    | 14 ++++++++++++++
 .../illegal_spread_element-document/input.svelte   |  4 ++++
 .../illegal_spread_element-window/errors.json      | 14 ++++++++++++++
 .../illegal_spread_element-window/input.svelte     |  4 ++++
 10 files changed, 85 insertions(+)
 create mode 100644 .changeset/fast-ligers-repeat.md
 create mode 100644 packages/svelte/tests/validator/samples/illegal_spread_element-document/errors.json
 create mode 100644 packages/svelte/tests/validator/samples/illegal_spread_element-document/input.svelte
 create mode 100644 packages/svelte/tests/validator/samples/illegal_spread_element-window/errors.json
 create mode 100644 packages/svelte/tests/validator/samples/illegal_spread_element-window/input.svelte

diff --git a/.changeset/fast-ligers-repeat.md b/.changeset/fast-ligers-repeat.md
new file mode 100644
index 0000000000..c6b35c4373
--- /dev/null
+++ b/.changeset/fast-ligers-repeat.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: disallow invalid attributes for `<svelte:window>` and `<svelte:document>`
diff --git a/documentation/docs/98-reference/.generated/compile-errors.md b/documentation/docs/98-reference/.generated/compile-errors.md
index b32bc6b89c..16cd361e52 100644
--- a/documentation/docs/98-reference/.generated/compile-errors.md
+++ b/documentation/docs/98-reference/.generated/compile-errors.md
@@ -412,6 +412,12 @@ Expected whitespace
 `$host()` can only be used inside custom element component instances
 ```
 
+### illegal_element_attribute
+
+```
+`<%name%>` does not support non-event attributes or spread attributes
+```
+
 ### import_svelte_internal_forbidden
 
 ```
diff --git a/packages/svelte/messages/compile-errors/template.md b/packages/svelte/messages/compile-errors/template.md
index cddca87d9c..38ff87d505 100644
--- a/packages/svelte/messages/compile-errors/template.md
+++ b/packages/svelte/messages/compile-errors/template.md
@@ -172,6 +172,10 @@
 
 > Expected whitespace
 
+## illegal_element_attribute
+
+> `<%name%>` does not support non-event attributes or spread attributes
+
 ## js_parse_error
 
 > %message%
diff --git a/packages/svelte/src/compiler/errors.js b/packages/svelte/src/compiler/errors.js
index 00e2246ccf..ad2919b34b 100644
--- a/packages/svelte/src/compiler/errors.js
+++ b/packages/svelte/src/compiler/errors.js
@@ -984,6 +984,16 @@ export function expected_whitespace(node) {
 	e(node, "expected_whitespace", "Expected whitespace");
 }
 
+/**
+ * `<%name%>` does not support non-event attributes or spread attributes
+ * @param {null | number | NodeLike} node
+ * @param {string} name
+ * @returns {never}
+ */
+export function illegal_element_attribute(node, name) {
+	e(node, "illegal_element_attribute", `\`<${name}>\` does not support non-event attributes or spread attributes`);
+}
+
 /**
  * %message%
  * @param {null | number | NodeLike} node
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteDocument.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteDocument.js
index a44baef9e4..fe54ebf30d 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteDocument.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteDocument.js
@@ -1,6 +1,8 @@
 /** @import { AST } from '#compiler' */
 /** @import { Context } from '../types' */
 import { disallow_children } from './shared/special-element.js';
+import * as e from '../../../errors.js';
+import { is_event_attribute } from '../../../utils/ast.js';
 
 /**
  * @param {AST.SvelteDocument} node
@@ -8,5 +10,15 @@ import { disallow_children } from './shared/special-element.js';
  */
 export function SvelteDocument(node, context) {
 	disallow_children(node);
+
+	for (const attribute of node.attributes) {
+		if (
+			attribute.type === 'SpreadAttribute' ||
+			(attribute.type === 'Attribute' && !is_event_attribute(attribute))
+		) {
+			e.illegal_element_attribute(attribute, 'svelte:document');
+		}
+	}
+
 	context.next();
 }
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteWindow.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteWindow.js
index c5392a477d..20f5abc5d6 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteWindow.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteWindow.js
@@ -1,6 +1,8 @@
 /** @import { AST } from '#compiler' */
 /** @import { Context } from '../types' */
 import { disallow_children } from './shared/special-element.js';
+import * as e from '../../../errors.js';
+import { is_event_attribute } from '../../../utils/ast.js';
 
 /**
  * @param {AST.SvelteWindow} node
@@ -8,5 +10,15 @@ import { disallow_children } from './shared/special-element.js';
  */
 export function SvelteWindow(node, context) {
 	disallow_children(node);
+
+	for (const attribute of node.attributes) {
+		if (
+			attribute.type === 'SpreadAttribute' ||
+			(attribute.type === 'Attribute' && !is_event_attribute(attribute))
+		) {
+			e.illegal_element_attribute(attribute, 'svelte:window');
+		}
+	}
+
 	context.next();
 }
diff --git a/packages/svelte/tests/validator/samples/illegal_spread_element-document/errors.json b/packages/svelte/tests/validator/samples/illegal_spread_element-document/errors.json
new file mode 100644
index 0000000000..2e15b152e7
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/illegal_spread_element-document/errors.json
@@ -0,0 +1,14 @@
+[
+	{
+		"code": "illegal_element_attribute",
+		"message": "`<svelte:document>` does not support non-event attributes or spread attributes",
+		"start": {
+			"line": 4,
+			"column": 17
+		},
+		"end": {
+			"line": 4,
+			"column": 23
+		}
+	}
+]
diff --git a/packages/svelte/tests/validator/samples/illegal_spread_element-document/input.svelte b/packages/svelte/tests/validator/samples/illegal_spread_element-document/input.svelte
new file mode 100644
index 0000000000..8980eea012
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/illegal_spread_element-document/input.svelte
@@ -0,0 +1,4 @@
+<script>
+	let a = {};
+</script>
+<svelte:document {...a}></svelte:document>
diff --git a/packages/svelte/tests/validator/samples/illegal_spread_element-window/errors.json b/packages/svelte/tests/validator/samples/illegal_spread_element-window/errors.json
new file mode 100644
index 0000000000..c59045e852
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/illegal_spread_element-window/errors.json
@@ -0,0 +1,14 @@
+[
+	{
+		"code": "illegal_element_attribute",
+		"message": "`<svelte:window>` does not support non-event attributes or spread attributes",
+		"start": {
+			"line": 4,
+			"column": 15
+		},
+		"end": {
+			"line": 4,
+			"column": 21
+		}
+	}
+]
diff --git a/packages/svelte/tests/validator/samples/illegal_spread_element-window/input.svelte b/packages/svelte/tests/validator/samples/illegal_spread_element-window/input.svelte
new file mode 100644
index 0000000000..c0076cc6bf
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/illegal_spread_element-window/input.svelte
@@ -0,0 +1,4 @@
+<script>
+	let a = {};
+</script>
+<svelte:window {...a}></svelte:window>

From e379319626349e55b65a7f6af18eef4a81f92adf Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Thu, 14 Nov 2024 22:47:18 +0100
Subject: [PATCH 063/159] fix: ensure props passed to components via mount are
 updateable (#14210)

The detection whether or not props are writable is buggy; it doesn't take into account the case when instantiating components via `mount` or legacy-`new`

Fixes #14161

This posed an interesting question: What to do about (non-)`bind:`able properties? The answer I arrived on was: Treat it as if everything that _can_ be bound _is_ treated as bound, and everything else as readonly. In other words, if you're reassigning a prop, it will diverge from the passed in props if it's not bindable or not set in the parent, otherwise it will mutate the passed in props. I think that makes the most sense, given that you can't control this behavior from the outside.
---
 .changeset/fresh-pigs-divide.md               |  5 ++
 .../svelte/src/internal/client/constants.js   |  1 +
 .../src/internal/client/reactivity/props.js   | 20 +++++++-
 .../svelte/src/internal/client/validate.js    | 11 +----
 packages/svelte/src/legacy/legacy-client.js   |  7 ++-
 .../samples/mount-props-updates/_config.js    | 47 +++++++++++++++++++
 .../mount-props-updates/component.svelte      | 17 +++++++
 .../samples/mount-props-updates/main.svelte   | 30 ++++++++++++
 8 files changed, 124 insertions(+), 14 deletions(-)
 create mode 100644 .changeset/fresh-pigs-divide.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/mount-props-updates/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/mount-props-updates/component.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/mount-props-updates/main.svelte

diff --git a/.changeset/fresh-pigs-divide.md b/.changeset/fresh-pigs-divide.md
new file mode 100644
index 0000000000..8aa3d74ce9
--- /dev/null
+++ b/.changeset/fresh-pigs-divide.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ensure props passed to components via mount are updateable
diff --git a/packages/svelte/src/internal/client/constants.js b/packages/svelte/src/internal/client/constants.js
index 53df86126a..bcf30e78db 100644
--- a/packages/svelte/src/internal/client/constants.js
+++ b/packages/svelte/src/internal/client/constants.js
@@ -22,4 +22,5 @@ export const EFFECT_HAS_DERIVED = 1 << 19;
 
 export const STATE_SYMBOL = Symbol('$state');
 export const STATE_SYMBOL_METADATA = Symbol('$state metadata');
+export const LEGACY_PROPS = Symbol('legacy props');
 export const LOADING_ATTR_SYMBOL = Symbol('');
diff --git a/packages/svelte/src/internal/client/reactivity/props.js b/packages/svelte/src/internal/client/reactivity/props.js
index dbfb8f0337..8fb13f7e2c 100644
--- a/packages/svelte/src/internal/client/reactivity/props.js
+++ b/packages/svelte/src/internal/client/reactivity/props.js
@@ -20,7 +20,13 @@ import {
 } from '../runtime.js';
 import { safe_equals } from './equality.js';
 import * as e from '../errors.js';
-import { BRANCH_EFFECT, LEGACY_DERIVED_PROP, ROOT_EFFECT } from '../constants.js';
+import {
+	BRANCH_EFFECT,
+	LEGACY_DERIVED_PROP,
+	LEGACY_PROPS,
+	ROOT_EFFECT,
+	STATE_SYMBOL
+} from '../constants.js';
 import { proxy } from '../proxy.js';
 import { capture_store_binding } from './store.js';
 import { legacy_mode_flag } from '../../flags/index.js';
@@ -209,6 +215,9 @@ const spread_props_handler = {
 		}
 	},
 	has(target, key) {
+		// To prevent a false positive `is_entry_props` in the `prop` function
+		if (key === STATE_SYMBOL || key === LEGACY_PROPS) return false;
+
 		for (let p of target.props) {
 			if (is_function(p)) p = p();
 			if (p != null && key in p) return true;
@@ -282,7 +291,14 @@ export function prop(props, key, flags, fallback) {
 	} else {
 		prop_value = /** @type {V} */ (props[key]);
 	}
-	var setter = get_descriptor(props, key)?.set;
+
+	// Can be the case when someone does `mount(Component, props)` with `let props = $state({...})`
+	// or `createClassComponent(Component, props)`
+	var is_entry_props = STATE_SYMBOL in props || LEGACY_PROPS in props;
+
+	var setter =
+		get_descriptor(props, key)?.set ??
+		(is_entry_props && bindable && key in props ? (v) => (props[key] = v) : undefined);
 
 	var fallback_value = /** @type {V} */ (fallback);
 	var fallback_dirty = true;
diff --git a/packages/svelte/src/internal/client/validate.js b/packages/svelte/src/internal/client/validate.js
index eddcb69d9e..951feee33b 100644
--- a/packages/svelte/src/internal/client/validate.js
+++ b/packages/svelte/src/internal/client/validate.js
@@ -1,4 +1,4 @@
-import { dev_current_component_function, untrack } from './runtime.js';
+import { dev_current_component_function } from './runtime.js';
 import { get_descriptor, is_array } from '../shared/utils.js';
 import * as e from './errors.js';
 import { FILENAME } from '../../constants.js';
@@ -6,15 +6,6 @@ import { render_effect } from './reactivity/effects.js';
 import * as w from './warnings.js';
 import { capture_store_binding } from './reactivity/store.js';
 
-/** regex of all html void element names */
-const void_element_names =
-	/^(?:area|base|br|col|command|embed|hr|img|input|keygen|link|meta|param|source|track|wbr)$/;
-
-/** @param {string} tag */
-function is_void(tag) {
-	return void_element_names.test(tag) || tag.toLowerCase() === '!doctype';
-}
-
 /**
  * @param {() => any} collection
  * @param {(item: any, index: number) => string} key_fn
diff --git a/packages/svelte/src/legacy/legacy-client.js b/packages/svelte/src/legacy/legacy-client.js
index c7684570bb..9e1cd888ad 100644
--- a/packages/svelte/src/legacy/legacy-client.js
+++ b/packages/svelte/src/legacy/legacy-client.js
@@ -1,5 +1,5 @@
 /** @import { ComponentConstructorOptions, ComponentType, SvelteComponent, Component } from 'svelte' */
-import { DIRTY, MAYBE_DIRTY } from '../internal/client/constants.js';
+import { DIRTY, LEGACY_PROPS, MAYBE_DIRTY } from '../internal/client/constants.js';
 import { user_pre_effect } from '../internal/client/reactivity/effects.js';
 import { mutable_source, set } from '../internal/client/reactivity/sources.js';
 import { hydrate, mount, unmount } from '../internal/client/render.js';
@@ -89,7 +89,7 @@ class Svelte4Component {
 		};
 
 		// Replicate coarse-grained props through a proxy that has a version source for
-		// each property, which is increment on updates to the property itself. Do not
+		// each property, which is incremented on updates to the property itself. Do not
 		// use our $state proxy because that one has fine-grained reactivity.
 		const props = new Proxy(
 			{ ...(options.props || {}), $$events: {} },
@@ -98,6 +98,9 @@ class Svelte4Component {
 					return get(sources.get(prop) ?? add_source(prop, Reflect.get(target, prop)));
 				},
 				has(target, prop) {
+					// Necessary to not throw "invalid binding" validation errors on the component side
+					if (prop === LEGACY_PROPS) return true;
+
 					get(sources.get(prop) ?? add_source(prop, Reflect.get(target, prop)));
 					return Reflect.has(target, prop);
 				},
diff --git a/packages/svelte/tests/runtime-runes/samples/mount-props-updates/_config.js b/packages/svelte/tests/runtime-runes/samples/mount-props-updates/_config.js
new file mode 100644
index 0000000000..ff7af2d524
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/mount-props-updates/_config.js
@@ -0,0 +1,47 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	test({ assert, target }) {
+		assert.htmlEqual(
+			target.innerHTML,
+			// The buz fallback does not propagate back up
+			`
+			<button>reset</button> foo baz
+			<div><button>update</button> foo bar baz buz</div>
+			<div><button>update</button> foo bar baz buz</div>
+			`
+		);
+
+		const [btn1, btn2, btn3] = target.querySelectorAll('button');
+
+		btn2.click();
+		btn3.click();
+		flushSync();
+		assert.htmlEqual(
+			target.innerHTML,
+			// bar is not set in the parent because it's a readonly property
+			// baz is not set in the parent because while it's a bindable property,
+			// it wasn't set initially so it's treated as a readonly proeprty
+			`
+			<button>reset</button> foo 3
+			<div><button>update</button> 1 2 3 4</div>
+			<div><button>update</button> 1 2 3 4</div>
+			`
+		);
+
+		btn1.click();
+		flushSync();
+		assert.htmlEqual(
+			target.innerHTML,
+			// Because foo is a readonly property, component.svelte diverges locally from it,
+			// and the passed in property keeps the initial value of foo. This is why it stays
+			// at 1, because foo is not updated to a different value.
+			`
+				<button>reset</button> foo bar baz buz
+			<div><button>update</button> 1 bar baz buz</div>
+			<div><button>update</button> 1 bar baz buz</div>
+				`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/mount-props-updates/component.svelte b/packages/svelte/tests/runtime-runes/samples/mount-props-updates/component.svelte
new file mode 100644
index 0000000000..214cb7bf72
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/mount-props-updates/component.svelte
@@ -0,0 +1,17 @@
+<script>
+	let { foo, bar = 'bar', baz = $bindable(), buz = $bindable('buz') } = $props();
+</script>
+
+<button
+	onclick={() => {
+		foo = '1';
+		bar = '2';
+		baz = '3';
+		buz = '4';
+	}}>update</button
+>
+
+{foo}
+{bar}
+{baz}
+{buz}
diff --git a/packages/svelte/tests/runtime-runes/samples/mount-props-updates/main.svelte b/packages/svelte/tests/runtime-runes/samples/mount-props-updates/main.svelte
new file mode 100644
index 0000000000..0769830afb
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/mount-props-updates/main.svelte
@@ -0,0 +1,30 @@
+<script>
+	import { createClassComponent } from 'svelte/legacy';
+	import Component from './component.svelte';
+	import { mount, onMount } from 'svelte';
+
+	let div1, div2;
+	let legacy;
+	const props = $state({ foo: 'foo', baz: 'baz' });
+
+	onMount(() => {
+		legacy = createClassComponent({
+			component: Component,
+			target: div1,
+			props: { foo: 'foo', baz: 'baz' }
+		});
+		mount(Component, { target: div2, props });
+	});
+</script>
+
+<button
+	onclick={() => {
+		legacy.$set({ foo: 'foo', bar: 'bar', baz: 'baz', buz: 'buz' });
+		props.foo = 'foo';
+		props.bar = 'bar';
+		props.baz = 'baz';
+		props.buz = 'buz';
+	}}>reset</button
+> {props.foo} {props.bar} {props.baz} {props.buz}
+<div bind:this={div1}></div>
+<div bind:this={div2}></div>

From 637364104538cdac26e3807fd71e4be6dd2958f8 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Fri, 15 Nov 2024 14:32:47 +0100
Subject: [PATCH 064/159] docs: add example to "state instead of stores"
 (#14310)

closes #13879
---
 documentation/docs/06-runtime/01-stores.md | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/documentation/docs/06-runtime/01-stores.md b/documentation/docs/06-runtime/01-stores.md
index 8ea01e5314..9cff5a754f 100644
--- a/documentation/docs/06-runtime/01-stores.md
+++ b/documentation/docs/06-runtime/01-stores.md
@@ -38,6 +38,28 @@ Prior to Svelte 5, stores were the go-to solution for creating cross-component r
 - when extracting logic, it's better to take advantage of runes' universal reactivity: You can use runes outside the top level of components and even place them into JavaScript or TypeScript files (using a `.svelte.js` or `.svelte.ts` file ending)
 - when creating shared state, you can create a `$state` object containing the values you need and then manipulate said state
 
+```ts
+/// file: state.svelte.js
+export const userState = $state({
+	name: 'name',
+	/* ... */
+});
+```
+
+```svelte
+<!--- file: App.svelte --->
+<script>
+	import { userState } from './state.svelte';
+</script>
+
+<p>User name: {userState.name}</p>
+<button onclick={() => {
+	userState.name = 'new name';
+}}>
+	change name
+</button>
+```
+
 Stores are still a good solution when you have complex asynchronous data streams or it's important to have more manual control over updating values or listening to changes. If you're familiar with RxJs and want to reuse that knowledge, the `$` also comes in handy for you.
 
 ## svelte/store

From efc65d4e0c185cd597a6eeef013f6641b8e25d50 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Fri, 15 Nov 2024 14:33:10 +0100
Subject: [PATCH 065/159] fix: mark pseudo classes nested inside `:not` as used
 (#14303)

fixes the css bug part of #14299
---
 .changeset/chatty-singers-sin.md                           | 5 +++++
 .../src/compiler/phases/2-analyze/css/css-analyze.js       | 3 ++-
 .../svelte/src/compiler/phases/2-analyze/css/css-prune.js  | 7 ++++++-
 .../svelte/tests/css/samples/not-selector/expected.css     | 4 ++++
 .../svelte/tests/css/samples/not-selector/input.svelte     | 4 ++++
 5 files changed, 21 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/chatty-singers-sin.md

diff --git a/.changeset/chatty-singers-sin.md b/.changeset/chatty-singers-sin.md
new file mode 100644
index 0000000000..f69bc97454
--- /dev/null
+++ b/.changeset/chatty-singers-sin.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: mark pseudo classes nested inside `:not` as used
diff --git a/packages/svelte/src/compiler/phases/2-analyze/css/css-analyze.js b/packages/svelte/src/compiler/phases/2-analyze/css/css-analyze.js
index 38551f328f..1dd2d9ae7c 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/css/css-analyze.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/css/css-analyze.js
@@ -150,8 +150,9 @@ const css_visitors = {
 			// So that nested selectors like `:root:not(.x)` are not marked as unused
 			for (const child of node.selectors) {
 				walk(/** @type {Css.Node} */ (child), null, {
-					ComplexSelector(node) {
+					ComplexSelector(node, context) {
 						node.metadata.used = true;
+						context.next();
 					}
 				});
 			}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js b/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js
index bf0fd27566..bfb83d3e02 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js
@@ -531,7 +531,12 @@ function relative_selector_might_apply_to_node(relative_selector, rule, element,
 				// with descendants, in which case we scope them all.
 				if (name === 'not' && selector.args) {
 					for (const complex_selector of selector.args.children) {
-						complex_selector.metadata.used = true;
+						walk(complex_selector, null, {
+							ComplexSelector(node, context) {
+								node.metadata.used = true;
+								context.next();
+							}
+						});
 						const relative = truncate(complex_selector);
 
 						if (complex_selector.children.length > 1) {
diff --git a/packages/svelte/tests/css/samples/not-selector/expected.css b/packages/svelte/tests/css/samples/not-selector/expected.css
index ea0b3aacac..1b0db0ff4b 100644
--- a/packages/svelte/tests/css/samples/not-selector/expected.css
+++ b/packages/svelte/tests/css/samples/not-selector/expected.css
@@ -29,3 +29,7 @@
 	span.svelte-xyz:not(:focus) {
 		color: green;
 	}
+
+	p.svelte-xyz:not(:has(span)) {
+		color: green;
+	}
diff --git a/packages/svelte/tests/css/samples/not-selector/input.svelte b/packages/svelte/tests/css/samples/not-selector/input.svelte
index 3a786530a2..da8f4579c2 100644
--- a/packages/svelte/tests/css/samples/not-selector/input.svelte
+++ b/packages/svelte/tests/css/samples/not-selector/input.svelte
@@ -36,4 +36,8 @@
 	span:not(:focus) {
 		color: green;
 	}
+
+	p:not(:has(span)) {
+		color: green;
+	}
 </style>
\ No newline at end of file

From 1f0700f5c597174e51d6e07407b078c8314486fc Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Fri, 15 Nov 2024 23:40:08 +0100
Subject: [PATCH 066/159] fix: mark subtree dynamic for img with loading
 attribute (#14317)

* fix: mark subtree dynamic for img with loading attribute

* chore: unify conditions

* chore: change conditions
---
 .changeset/rotten-turkeys-sniff.md                    |  5 +++++
 .../compiler/phases/2-analyze/visitors/Attribute.js   | 11 ++++++++---
 .../_expected/client/index.svelte.js                  |  6 +++++-
 .../_expected/server/index.svelte.js                  |  2 +-
 .../snapshot/samples/skip-static-subtree/index.svelte |  5 ++++-
 5 files changed, 23 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/rotten-turkeys-sniff.md

diff --git a/.changeset/rotten-turkeys-sniff.md b/.changeset/rotten-turkeys-sniff.md
new file mode 100644
index 0000000000..53fb5bd663
--- /dev/null
+++ b/.changeset/rotten-turkeys-sniff.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: mark subtree dynamic for img with loading attribute
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/Attribute.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/Attribute.js
index 6931f873fb..ca0ea55d1f 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/Attribute.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/Attribute.js
@@ -18,9 +18,14 @@ export function Attribute(node, context) {
 
 	const parent = /** @type {SvelteNode} */ (context.path.at(-1));
 
-	// special case
-	if (node.name === 'value') {
-		if (parent.type === 'RegularElement' && parent.name === 'option') {
+	if (parent.type === 'RegularElement') {
+		// special case <option value="" />
+		if (node.name === 'value' && parent.name === 'option') {
+			mark_subtree_dynamic(context.path);
+		}
+
+		// special case <img loading="lazy" />
+		if (node.name === 'loading' && parent.name === 'img') {
 			mark_subtree_dynamic(context.path);
 		}
 	}
diff --git a/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/client/index.svelte.js
index ae79efef42..8dd7df82cf 100644
--- a/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/client/index.svelte.js
@@ -1,7 +1,7 @@
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
 
-var root = $.template(`<header><nav><a href="/">Home</a> <a href="/away">Away</a></nav></header> <main><h1> </h1> <div class="static"><p>we don't need to traverse these nodes</p></div> <p>or</p> <p>these</p> <p>ones</p> <!> <p>these</p> <p>trailing</p> <p>nodes</p> <p>can</p> <p>be</p> <p>completely</p> <p>ignored</p></main> <cant-skip><custom-elements></custom-elements></cant-skip> <div><input></div> <div><source></div> <select><option>a</option></select> <img src="..." alt="" loading="lazy">`, 3);
+var root = $.template(`<header><nav><a href="/">Home</a> <a href="/away">Away</a></nav></header> <main><h1> </h1> <div class="static"><p>we don't need to traverse these nodes</p></div> <p>or</p> <p>these</p> <p>ones</p> <!> <p>these</p> <p>trailing</p> <p>nodes</p> <p>can</p> <p>be</p> <p>completely</p> <p>ignored</p></main> <cant-skip><custom-elements></custom-elements></cant-skip> <div><input></div> <div><source></div> <select><option>a</option></select> <img src="..." alt="" loading="lazy"> <div><img src="..." alt="" loading="lazy"></div>`, 3);
 
 export default function Skip_static_subtree($$anchor, $$props) {
 	var fragment = root();
@@ -42,8 +42,12 @@ export default function Skip_static_subtree($$anchor, $$props) {
 	$.reset(select);
 
 	var img = $.sibling(select, 2);
+	var div_2 = $.sibling(img, 2);
+	var img_1 = $.child(div_2);
 
+	$.reset(div_2);
 	$.template_effect(() => $.set_text(text, $$props.title));
 	$.handle_lazy_img(img);
+	$.handle_lazy_img(img_1);
 	$.append($$anchor, fragment);
 }
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/server/index.svelte.js
index d09ac657f9..309f5a2b57 100644
--- a/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/server/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/server/index.svelte.js
@@ -3,5 +3,5 @@ import * as $ from "svelte/internal/server";
 export default function Skip_static_subtree($$payload, $$props) {
 	let { title, content } = $$props;
 
-	$$payload.out += `<header><nav><a href="/">Home</a> <a href="/away">Away</a></nav></header> <main><h1>${$.escape(title)}</h1> <div class="static"><p>we don't need to traverse these nodes</p></div> <p>or</p> <p>these</p> <p>ones</p> ${$.html(content)} <p>these</p> <p>trailing</p> <p>nodes</p> <p>can</p> <p>be</p> <p>completely</p> <p>ignored</p></main> <cant-skip><custom-elements with="attributes"></custom-elements></cant-skip> <div><input autofocus></div> <div><source muted></div> <select><option value="a">a</option></select> <img src="..." alt="" loading="lazy">`;
+	$$payload.out += `<header><nav><a href="/">Home</a> <a href="/away">Away</a></nav></header> <main><h1>${$.escape(title)}</h1> <div class="static"><p>we don't need to traverse these nodes</p></div> <p>or</p> <p>these</p> <p>ones</p> ${$.html(content)} <p>these</p> <p>trailing</p> <p>nodes</p> <p>can</p> <p>be</p> <p>completely</p> <p>ignored</p></main> <cant-skip><custom-elements with="attributes"></custom-elements></cant-skip> <div><input autofocus></div> <div><source muted></div> <select><option value="a">a</option></select> <img src="..." alt="" loading="lazy"> <div><img src="..." alt="" loading="lazy"></div>`;
 }
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/skip-static-subtree/index.svelte b/packages/svelte/tests/snapshot/samples/skip-static-subtree/index.svelte
index cb73eba707..4533a261a0 100644
--- a/packages/svelte/tests/snapshot/samples/skip-static-subtree/index.svelte
+++ b/packages/svelte/tests/snapshot/samples/skip-static-subtree/index.svelte
@@ -44,4 +44,7 @@
 	<option value="a">a</option>
 </select>
 
-<img src="..." alt="" loading="lazy" />
\ No newline at end of file
+<img src="..." alt="" loading="lazy" />
+<div>
+	<img src="..." alt="" loading="lazy" />
+</div>
\ No newline at end of file

From 94471ca38e9752c08dde1620916b76ff517b369b Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Fri, 15 Nov 2024 23:50:47 +0100
Subject: [PATCH 067/159] fix: avoid relying on Node specifics within compiler
 (#14314)

fixes #14294
---
 .changeset/strange-adults-visit.md               |  5 +++++
 packages/svelte/src/compiler/validate-options.js | 16 ++++++++++++----
 2 files changed, 17 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/strange-adults-visit.md

diff --git a/.changeset/strange-adults-visit.md b/.changeset/strange-adults-visit.md
new file mode 100644
index 0000000000..06cc667dac
--- /dev/null
+++ b/.changeset/strange-adults-visit.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: avoid relying on Node specifics within compiler
diff --git a/packages/svelte/src/compiler/validate-options.js b/packages/svelte/src/compiler/validate-options.js
index 9465cba77a..ab932ed5bc 100644
--- a/packages/svelte/src/compiler/validate-options.js
+++ b/packages/svelte/src/compiler/validate-options.js
@@ -1,5 +1,3 @@
-import process from 'node:process';
-
 /** @import { ModuleCompileOptions, ValidatedModuleCompileOptions, CompileOptions, ValidatedCompileOptions } from '#compiler' */
 import * as e from './errors.js';
 import * as w from './warnings.js';
@@ -13,9 +11,19 @@ import * as w from './warnings.js';
 const common = {
 	filename: string('(unknown)'),
 
-	// default to process.cwd() where it exists to replicate svelte4 behavior
+	// default to process.cwd() where it exists to replicate svelte4 behavior (and make Deno work with this as well)
 	// see https://github.com/sveltejs/svelte/blob/b62fc8c8fd2640c9b99168f01b9d958cb2f7574f/packages/svelte/src/compiler/compile/Component.js#L211
-	rootDir: string(typeof process !== 'undefined' ? process.cwd?.() : undefined),
+	/* eslint-disable */
+	rootDir: string(
+		typeof process !== 'undefined'
+			? process.cwd?.()
+			: // @ts-expect-error
+				typeof Deno !== 'undefined'
+				? // @ts-expect-error
+					Deno.cwd()
+				: undefined
+	),
+	/* eslint-enable */
 
 	dev: boolean(false),
 

From 95ab85fad742d9911bbe87561dfaf9f868f75eaf Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Sat, 16 Nov 2024 00:07:08 +0000
Subject: [PATCH 068/159] Version Packages (#14304)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/chatty-singers-sin.md   |  5 -----
 .changeset/fast-ligers-repeat.md   |  5 -----
 .changeset/fresh-pigs-divide.md    |  5 -----
 .changeset/rotten-turkeys-sniff.md |  5 -----
 .changeset/strange-adults-visit.md |  5 -----
 packages/svelte/CHANGELOG.md       | 14 ++++++++++++++
 packages/svelte/package.json       |  2 +-
 packages/svelte/src/version.js     |  2 +-
 8 files changed, 16 insertions(+), 27 deletions(-)
 delete mode 100644 .changeset/chatty-singers-sin.md
 delete mode 100644 .changeset/fast-ligers-repeat.md
 delete mode 100644 .changeset/fresh-pigs-divide.md
 delete mode 100644 .changeset/rotten-turkeys-sniff.md
 delete mode 100644 .changeset/strange-adults-visit.md

diff --git a/.changeset/chatty-singers-sin.md b/.changeset/chatty-singers-sin.md
deleted file mode 100644
index f69bc97454..0000000000
--- a/.changeset/chatty-singers-sin.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: mark pseudo classes nested inside `:not` as used
diff --git a/.changeset/fast-ligers-repeat.md b/.changeset/fast-ligers-repeat.md
deleted file mode 100644
index c6b35c4373..0000000000
--- a/.changeset/fast-ligers-repeat.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: disallow invalid attributes for `<svelte:window>` and `<svelte:document>`
diff --git a/.changeset/fresh-pigs-divide.md b/.changeset/fresh-pigs-divide.md
deleted file mode 100644
index 8aa3d74ce9..0000000000
--- a/.changeset/fresh-pigs-divide.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: ensure props passed to components via mount are updateable
diff --git a/.changeset/rotten-turkeys-sniff.md b/.changeset/rotten-turkeys-sniff.md
deleted file mode 100644
index 53fb5bd663..0000000000
--- a/.changeset/rotten-turkeys-sniff.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: mark subtree dynamic for img with loading attribute
diff --git a/.changeset/strange-adults-visit.md b/.changeset/strange-adults-visit.md
deleted file mode 100644
index 06cc667dac..0000000000
--- a/.changeset/strange-adults-visit.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: avoid relying on Node specifics within compiler
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index f7e17f14f9..5888348409 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,19 @@
 # svelte
 
+## 5.2.1
+
+### Patch Changes
+
+- fix: mark pseudo classes nested inside `:not` as used ([#14303](https://github.com/sveltejs/svelte/pull/14303))
+
+- fix: disallow invalid attributes for `<svelte:window>` and `<svelte:document>` ([#14228](https://github.com/sveltejs/svelte/pull/14228))
+
+- fix: ensure props passed to components via mount are updateable ([#14210](https://github.com/sveltejs/svelte/pull/14210))
+
+- fix: mark subtree dynamic for img with loading attribute ([#14317](https://github.com/sveltejs/svelte/pull/14317))
+
+- fix: avoid relying on Node specifics within compiler ([#14314](https://github.com/sveltejs/svelte/pull/14314))
+
 ## 5.2.0
 
 ### Minor Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index b23d031a17..9989394873 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.2.0",
+  "version": "5.2.1",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index e3d34edc4e..1f6874e75e 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.2.0';
+export const VERSION = '5.2.1';
 export const PUBLIC_VERSION = '5';

From 3a69b4c41533757ea0e3c7e293bd41818a833ead Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Sat, 16 Nov 2024 17:10:45 +0000
Subject: [PATCH 069/159] fix: ensure inline object literals are correctly
 serialised (#14325)

* fix: ensure inline object literals are correctly serialised

* Apply suggestions from code review

* address feedback

* address feedback

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/wicked-readers-knock.md            |  5 ++++
 .../phases/2-analyze/visitors/shared/utils.js | 27 ++++++++++++++++---
 .../samples/inline-expressions-2/_config.js   | 11 ++++++++
 .../samples/inline-expressions-2/main.svelte  |  6 +++++
 4 files changed, 46 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/wicked-readers-knock.md
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/inline-expressions-2/_config.js
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/inline-expressions-2/main.svelte

diff --git a/.changeset/wicked-readers-knock.md b/.changeset/wicked-readers-knock.md
new file mode 100644
index 0000000000..4ec417402f
--- /dev/null
+++ b/.changeset/wicked-readers-knock.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: treat property accesses of literals as pure
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/utils.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/utils.js
index 82356ea619..2dec4361c8 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/utils.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/utils.js
@@ -1,4 +1,4 @@
-/** @import { AssignmentExpression, Expression, Identifier, Pattern, PrivateIdentifier, Super, UpdateExpression, VariableDeclarator } from 'estree' */
+/** @import { AssignmentExpression, Expression, Literal, Pattern, PrivateIdentifier, Super, UpdateExpression, VariableDeclarator } from 'estree' */
 /** @import { AST, Binding } from '#compiler' */
 /** @import { AnalysisState, Context } from '../../types' */
 /** @import { Scope } from '../../../scope' */
@@ -176,21 +176,42 @@ export function is_safe_identifier(expression, scope) {
 }
 
 /**
- * @param {Expression | Super} node
+ * @param {Expression | Literal | Super} node
  * @param {Context} context
  * @returns {boolean}
  */
 export function is_pure(node, context) {
+	if (node.type === 'Literal') {
+		return true;
+	}
+	if (node.type === 'CallExpression') {
+		if (!is_pure(node.callee, context)) {
+			return false;
+		}
+		for (let arg of node.arguments) {
+			if (!is_pure(arg.type === 'SpreadElement' ? arg.argument : arg, context)) {
+				return false;
+			}
+		}
+		return true;
+	}
 	if (node.type !== 'Identifier' && node.type !== 'MemberExpression') {
 		return false;
 	}
 
-	const left = object(node);
+	/** @type {Expression | Super | null} */
+	let left = node;
+	while (left.type === 'MemberExpression') {
+		left = left.object;
+	}
+
 	if (!left) return false;
 
 	if (left.type === 'Identifier') {
 		const binding = context.state.scope.get(left.name);
 		if (binding === null) return true; // globals are assumed to be safe
+	} else if (is_pure(left, context)) {
+		return true;
 	}
 
 	// TODO add more cases (safe Svelte imports, etc)
diff --git a/packages/svelte/tests/runtime-legacy/samples/inline-expressions-2/_config.js b/packages/svelte/tests/runtime-legacy/samples/inline-expressions-2/_config.js
new file mode 100644
index 0000000000..1869540b2c
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/inline-expressions-2/_config.js
@@ -0,0 +1,11 @@
+import { test } from '../../test';
+
+export default test({
+	html: `
+		<p>Without text expression: 7.36</p>
+		<p>With text expression: 7.36</p>
+		<p>With text expression and function call: 7.36</p>
+		<p>With text expression and property access: 4</p>
+		<h1>Hello name!</h1>
+		<p>4</p>`
+});
diff --git a/packages/svelte/tests/runtime-legacy/samples/inline-expressions-2/main.svelte b/packages/svelte/tests/runtime-legacy/samples/inline-expressions-2/main.svelte
new file mode 100644
index 0000000000..78a325dcc4
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/inline-expressions-2/main.svelte
@@ -0,0 +1,6 @@
+<p>Without text expression: 7.36</p>
+<p>With text expression: {7.36}</p>
+<p>With text expression and function call: {(7.36).toLocaleString()}</p>
+<p>With text expression and property access: {"test".length}</p>
+<h1>Hello {('name').toUpperCase().toLowerCase()}!</h1>
+<p>{"test".length}</p>

From 396ea2ef370e7ea5b5d4571c4e5e14384bac3ca6 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Sat, 16 Nov 2024 17:13:21 +0000
Subject: [PATCH 070/159] Version Packages (#14328)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/wicked-readers-knock.md | 5 -----
 packages/svelte/CHANGELOG.md       | 6 ++++++
 packages/svelte/package.json       | 2 +-
 packages/svelte/src/version.js     | 2 +-
 4 files changed, 8 insertions(+), 7 deletions(-)
 delete mode 100644 .changeset/wicked-readers-knock.md

diff --git a/.changeset/wicked-readers-knock.md b/.changeset/wicked-readers-knock.md
deleted file mode 100644
index 4ec417402f..0000000000
--- a/.changeset/wicked-readers-knock.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: treat property accesses of literals as pure
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 5888348409..64b04e0fc2 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,11 @@
 # svelte
 
+## 5.2.2
+
+### Patch Changes
+
+- fix: treat property accesses of literals as pure ([#14325](https://github.com/sveltejs/svelte/pull/14325))
+
 ## 5.2.1
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 9989394873..8c9efb00de 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.2.1",
+  "version": "5.2.2",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 1f6874e75e..db950a129a 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.2.1';
+export const VERSION = '5.2.2';
 export const PUBLIC_VERSION = '5';

From 24ebbcbbc19701987d7560c4fe3952e8c24432ef Mon Sep 17 00:00:00 2001
From: Gwen Le Bihan <hey@ewen.works>
Date: Sun, 17 Nov 2024 23:27:34 +0100
Subject: [PATCH 071/159] docs: use e.detail instead of e.details in migration
 examples (#14340)

---
 documentation/docs/07-misc/07-v5-migration-guide.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/documentation/docs/07-misc/07-v5-migration-guide.md b/documentation/docs/07-misc/07-v5-migration-guide.md
index 4ebfb5f905..687f8e93b1 100644
--- a/documentation/docs/07-misc/07-v5-migration-guide.md
+++ b/documentation/docs/07-misc/07-v5-migration-guide.md
@@ -169,11 +169,11 @@ This function is deprecated in Svelte 5. Instead, components should accept _call
 
 <Pump
 	---on:---inflate={(power) => {
-		size += power---.details---;
+		size += power---.detail---;
 		if (size > 75) burst = true;
 	}}
 	---on:---deflate={(power) => {
-		if (size > 0) size -= power---.details---;
+		if (size > 0) size -= power---.detail---;
 	}}
 />
 
@@ -317,7 +317,7 @@ When spreading props, local event handlers must go _after_ the spread, or they r
 > - import the function
 > - call the function to get a dispatch function
 > - call said dispatch function with a string and possibly a payload
-> - retrieve said payload on the other end through a `.details` property, because the event itself was always a `CustomEvent`
+> - retrieve said payload on the other end through a `.detail` property, because the event itself was always a `CustomEvent`
 >
 > It was always possible to use component callback props, but because you had to listen to DOM events using `on:`, it made sense to use `createEventDispatcher` for component events due to syntactical consistency. Now that we have event attributes (`onclick`), it's the other way around: Callback props are now the more sensible thing to do.
 >

From 1c454c236eeb00fab04007b4c8b9ae0f475e9cf6 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Mon, 18 Nov 2024 14:24:55 +0000
Subject: [PATCH 072/159] fix: ensure dynamic call expressions correctly
 generate output (#14345)

---
 .changeset/moody-bears-change.md                             | 5 +++++
 .../src/compiler/phases/2-analyze/visitors/CallExpression.js | 2 ++
 .../samples/inline-expressions-subtree/_config.js            | 5 +++++
 .../samples/inline-expressions-subtree/main.svelte           | 4 ++++
 4 files changed, 16 insertions(+)
 create mode 100644 .changeset/moody-bears-change.md
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/inline-expressions-subtree/_config.js
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/inline-expressions-subtree/main.svelte

diff --git a/.changeset/moody-bears-change.md b/.changeset/moody-bears-change.md
new file mode 100644
index 0000000000..0bf32026d2
--- /dev/null
+++ b/.changeset/moody-bears-change.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ensure dynamic call expressions correctly generate output
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js
index 2ae32e80e1..fe3f638a69 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js
@@ -5,6 +5,7 @@ import { get_rune } from '../../scope.js';
 import * as e from '../../../errors.js';
 import { get_parent, unwrap_optional } from '../../../utils/ast.js';
 import { is_pure, is_safe_identifier } from './shared/utils.js';
+import { mark_subtree_dynamic } from './shared/fragment.js';
 
 /**
  * @param {CallExpression} node
@@ -179,6 +180,7 @@ export function CallExpression(node, context) {
 			context.state.expression.has_call = true;
 			context.state.expression.has_state = true;
 			context.state.expression.can_inline = false;
+			mark_subtree_dynamic(context.path);
 		}
 	}
 }
diff --git a/packages/svelte/tests/runtime-legacy/samples/inline-expressions-subtree/_config.js b/packages/svelte/tests/runtime-legacy/samples/inline-expressions-subtree/_config.js
new file mode 100644
index 0000000000..17c573a510
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/inline-expressions-subtree/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	html: '<span class="red">A</span>\n<div><span class="red">B</span></div>'
+});
diff --git a/packages/svelte/tests/runtime-legacy/samples/inline-expressions-subtree/main.svelte b/packages/svelte/tests/runtime-legacy/samples/inline-expressions-subtree/main.svelte
new file mode 100644
index 0000000000..555dc8af23
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/inline-expressions-subtree/main.svelte
@@ -0,0 +1,4 @@
+<span class={(() => 'red')()}>A</span>
+<div>
+  <span class={(() => 'red')()}>B</span>
+</div>

From b145035a00525770abe9116e3887c050e19340ea Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 18 Nov 2024 15:23:13 +0000
Subject: [PATCH 073/159] Version Packages (#14348)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/moody-bears-change.md | 5 -----
 packages/svelte/CHANGELOG.md     | 6 ++++++
 packages/svelte/package.json     | 2 +-
 packages/svelte/src/version.js   | 2 +-
 4 files changed, 8 insertions(+), 7 deletions(-)
 delete mode 100644 .changeset/moody-bears-change.md

diff --git a/.changeset/moody-bears-change.md b/.changeset/moody-bears-change.md
deleted file mode 100644
index 0bf32026d2..0000000000
--- a/.changeset/moody-bears-change.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: ensure dynamic call expressions correctly generate output
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 64b04e0fc2..d36307c80c 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,11 @@
 # svelte
 
+## 5.2.3
+
+### Patch Changes
+
+- fix: ensure dynamic call expressions correctly generate output ([#14345](https://github.com/sveltejs/svelte/pull/14345))
+
 ## 5.2.2
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 8c9efb00de..50319c77aa 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.2.2",
+  "version": "5.2.3",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index db950a129a..b79e9a2891 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.2.2';
+export const VERSION = '5.2.3';
 export const PUBLIC_VERSION = '5';

From 012166ec3c2a4f199d0314444519096bc21d3715 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Santiago=20C=C3=A9zar?=
 <48573316+santiagocezar@users.noreply.github.com>
Date: Tue, 19 Nov 2024 13:48:01 -0300
Subject: [PATCH 074/159] fix: convert input value to number on hydration
 (#14349)

* convert input value to number on hydration

* add test

* changeset

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/wicked-grapes-flash.md               |  5 +++++
 .../client/dom/elements/bindings/input.js       |  2 +-
 .../hydrate-modified-input-numeric/_config.js   | 17 +++++++++++++++++
 .../hydrate-modified-input-numeric/main.svelte  |  6 ++++++
 4 files changed, 29 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/wicked-grapes-flash.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/hydrate-modified-input-numeric/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/hydrate-modified-input-numeric/main.svelte

diff --git a/.changeset/wicked-grapes-flash.md b/.changeset/wicked-grapes-flash.md
new file mode 100644
index 0000000000..75ff68a728
--- /dev/null
+++ b/.changeset/wicked-grapes-flash.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: coerce value to number when hydrating range/number input with changed value
diff --git a/packages/svelte/src/internal/client/dom/elements/bindings/input.js b/packages/svelte/src/internal/client/dom/elements/bindings/input.js
index e528d1699e..aec6f815a0 100644
--- a/packages/svelte/src/internal/client/dom/elements/bindings/input.js
+++ b/packages/svelte/src/internal/client/dom/elements/bindings/input.js
@@ -45,7 +45,7 @@ export function bind_value(input, get, set = get) {
 		// If we are hydrating and the value has since changed, then use the update value
 		// from the input instead.
 		if (hydrating && input.defaultValue !== input.value) {
-			set(input.value);
+			set(is_numberlike_input(input) ? to_number(input.value) : input.value);
 			return;
 		}
 
diff --git a/packages/svelte/tests/runtime-runes/samples/hydrate-modified-input-numeric/_config.js b/packages/svelte/tests/runtime-runes/samples/hydrate-modified-input-numeric/_config.js
new file mode 100644
index 0000000000..f4b5037890
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/hydrate-modified-input-numeric/_config.js
@@ -0,0 +1,17 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	skip_mode: ['client'],
+
+	test({ assert, target, hydrate }) {
+		const input = /** @type {HTMLInputElement} */ (target.querySelector('input'));
+		input.value = '1';
+		input.dispatchEvent(new window.Event('input'));
+		// Hydration shouldn't reset the value to empty
+		hydrate();
+		flushSync();
+
+		assert.htmlEqual(target.innerHTML, '<input type="number">\n1 (number)');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/hydrate-modified-input-numeric/main.svelte b/packages/svelte/tests/runtime-runes/samples/hydrate-modified-input-numeric/main.svelte
new file mode 100644
index 0000000000..a10f3cec1e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/hydrate-modified-input-numeric/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	let value = $state(0);
+</script>
+
+<input type="number" bind:value={value}>
+{value} ({typeof value})

From 6e8267f46277592f6f6afb6f77d62d3d9d740605 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Tue, 19 Nov 2024 16:48:30 +0000
Subject: [PATCH 075/159] fix: correctly update dynamic member expressions
 (#14359)

* fix: output template effect for svg xlink attribute

* mark subtree dynamic in MemberExpression visitor

* don't treat attributes and text nodes differently

* Update .changeset/serious-spiders-bake.md

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/serious-spiders-bake.md                  |  5 +++++
 .../phases/2-analyze/visitors/Identifier.js         | 13 ++++---------
 .../phases/2-analyze/visitors/MemberExpression.js   |  3 +++
 .../samples/inline-expressions-3/_config.js         |  5 +++++
 .../samples/inline-expressions-3/main.svelte        |  9 +++++++++
 .../samples/inline-expressions-3/sprites.js         |  3 +++
 .../_expected/client/index.svelte.js                |  2 +-
 7 files changed, 30 insertions(+), 10 deletions(-)
 create mode 100644 .changeset/serious-spiders-bake.md
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/inline-expressions-3/_config.js
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/inline-expressions-3/main.svelte
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/inline-expressions-3/sprites.js

diff --git a/.changeset/serious-spiders-bake.md b/.changeset/serious-spiders-bake.md
new file mode 100644
index 0000000000..b1f9d84a3f
--- /dev/null
+++ b/.changeset/serious-spiders-bake.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: correctly update dynamic member expressions
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js
index 635f939c75..042c467df1 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js
@@ -126,16 +126,11 @@ export function Identifier(node, context) {
 		}
 	}
 
-	if (!can_inline && context.state.expression) {
-		context.state.expression.can_inline = false;
-	}
+	if (!can_inline) {
+		if (context.state.expression) {
+			context.state.expression.can_inline = false;
+		}
 
-	/**
-	 * if the identifier is part of an expression tag of an attribute we want to check if it's inlinable
-	 * before marking the subtree as dynamic. This is because if it's inlinable it will be inlined in the template
-	 * directly making the whole thing actually static.
-	 */
-	if (!can_inline || !context.path.find((node) => node.type === 'Attribute')) {
 		mark_subtree_dynamic(context.path);
 	}
 }
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/MemberExpression.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/MemberExpression.js
index adcc2da422..88adecbd35 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/MemberExpression.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/MemberExpression.js
@@ -4,6 +4,7 @@ import * as e from '../../../errors.js';
 import * as w from '../../../warnings.js';
 import { object } from '../../../utils/ast.js';
 import { is_pure, is_safe_identifier } from './shared/utils.js';
+import { mark_subtree_dynamic } from './shared/fragment.js';
 
 /**
  * @param {MemberExpression} node
@@ -20,6 +21,8 @@ export function MemberExpression(node, context) {
 	if (context.state.expression && !is_pure(node, context)) {
 		context.state.expression.has_state = true;
 		context.state.expression.can_inline = false;
+
+		mark_subtree_dynamic(context.path);
 	}
 
 	if (!is_safe_identifier(node, context.state.scope)) {
diff --git a/packages/svelte/tests/runtime-legacy/samples/inline-expressions-3/_config.js b/packages/svelte/tests/runtime-legacy/samples/inline-expressions-3/_config.js
new file mode 100644
index 0000000000..c229f97e07
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/inline-expressions-3/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	html: `<div><svg aria-hidden="true" height="14" width="13"><use xlink:href="test#done"></use></svg></div`
+});
diff --git a/packages/svelte/tests/runtime-legacy/samples/inline-expressions-3/main.svelte b/packages/svelte/tests/runtime-legacy/samples/inline-expressions-3/main.svelte
new file mode 100644
index 0000000000..48549d5479
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/inline-expressions-3/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	import { sprites } from './sprites.js'
+</script>
+
+<div>
+	<svg width="13" height="14" aria-hidden="true">
+    <use xlink:href="{sprites['a']}#done"></use>
+  </svg>
+</div>
diff --git a/packages/svelte/tests/runtime-legacy/samples/inline-expressions-3/sprites.js b/packages/svelte/tests/runtime-legacy/samples/inline-expressions-3/sprites.js
new file mode 100644
index 0000000000..055fdbd59a
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/inline-expressions-3/sprites.js
@@ -0,0 +1,3 @@
+export const sprites = {
+	a: 'test'
+};
diff --git a/packages/svelte/tests/snapshot/samples/inline-module-vars/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/inline-module-vars/_expected/client/index.svelte.js
index 75e632239e..4622624424 100644
--- a/packages/svelte/tests/snapshot/samples/inline-module-vars/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/inline-module-vars/_expected/client/index.svelte.js
@@ -11,7 +11,7 @@ var root = $.template(`<picture><source srcset="${__DECLARED_ASSET_0__}" type="i
 
 export default function Inline_module_vars($$anchor) {
 	var fragment = root();
-	var p = $.sibling($.first_child(fragment), 2);
 
+	$.next(2);
 	$.append($$anchor, fragment);
 }
\ No newline at end of file

From f6117bb3285c4aaf0d9003b2cca73d8a60150d8b Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Tue, 19 Nov 2024 18:06:32 +0000
Subject: [PATCH 076/159] chore: add ssr benchmark suite (#14361)

* chore: add ssr benchmark suite

* lint

* Update benchmarking/run.js

Co-authored-by: Rich Harris <rich.harris@vercel.com>

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 benchmarking/.gitignore                       |  1 +
 .../reactivity/index.js}                      | 25 +++++------
 .../{ => reactivity}/kairo/kairo_avoidable.js |  4 +-
 .../{ => reactivity}/kairo/kairo_broad.js     |  4 +-
 .../{ => reactivity}/kairo/kairo_deep.js      |  4 +-
 .../{ => reactivity}/kairo/kairo_diamond.js   |  4 +-
 .../{ => reactivity}/kairo/kairo_mux.js       |  4 +-
 .../{ => reactivity}/kairo/kairo_repeated.js  |  4 +-
 .../{ => reactivity}/kairo/kairo_triangle.js  |  4 +-
 .../{ => reactivity}/kairo/kairo_unstable.js  |  4 +-
 .../benchmarks/{ => reactivity}/kairo/util.js |  0
 .../benchmarks/{ => reactivity}/mol_bench.js  |  4 +-
 .../benchmarks/{ => reactivity}/sbench.js     |  4 +-
 benchmarking/benchmarks/ssr/index.js          |  3 ++
 .../benchmarks/ssr/wrapper/App.svelte         | 31 ++++++++++++++
 .../benchmarks/ssr/wrapper/wrapper_bench.js   | 36 ++++++++++++++++
 benchmarking/run.js                           | 41 +++++++++++++++----
 benchmarking/utils.js                         | 21 ++++++++++
 18 files changed, 155 insertions(+), 43 deletions(-)
 create mode 100644 benchmarking/.gitignore
 rename benchmarking/{benchmarks.js => benchmarks/reactivity/index.js} (63%)
 rename benchmarking/benchmarks/{ => reactivity}/kairo/kairo_avoidable.js (93%)
 rename benchmarking/benchmarks/{ => reactivity}/kairo/kairo_broad.js (92%)
 rename benchmarking/benchmarks/{ => reactivity}/kairo/kairo_deep.js (92%)
 rename benchmarking/benchmarks/{ => reactivity}/kairo/kairo_diamond.js (92%)
 rename benchmarking/benchmarks/{ => reactivity}/kairo/kairo_mux.js (93%)
 rename benchmarking/benchmarks/{ => reactivity}/kairo/kairo_repeated.js (92%)
 rename benchmarking/benchmarks/{ => reactivity}/kairo/kairo_triangle.js (93%)
 rename benchmarking/benchmarks/{ => reactivity}/kairo/kairo_unstable.js (92%)
 rename benchmarking/benchmarks/{ => reactivity}/kairo/util.js (100%)
 rename benchmarking/benchmarks/{ => reactivity}/mol_bench.js (95%)
 rename benchmarking/benchmarks/{ => reactivity}/sbench.js (98%)
 create mode 100644 benchmarking/benchmarks/ssr/index.js
 create mode 100644 benchmarking/benchmarks/ssr/wrapper/App.svelte
 create mode 100644 benchmarking/benchmarks/ssr/wrapper/wrapper_bench.js

diff --git a/benchmarking/.gitignore b/benchmarking/.gitignore
new file mode 100644
index 0000000000..53752db253
--- /dev/null
+++ b/benchmarking/.gitignore
@@ -0,0 +1 @@
+output
diff --git a/benchmarking/benchmarks.js b/benchmarking/benchmarks/reactivity/index.js
similarity index 63%
rename from benchmarking/benchmarks.js
rename to benchmarking/benchmarks/reactivity/index.js
index 795ac3e09e..58b3f5cb29 100644
--- a/benchmarking/benchmarks.js
+++ b/benchmarking/benchmarks/reactivity/index.js
@@ -1,15 +1,12 @@
-import {
-	kairo_avoidable_owned,
-	kairo_avoidable_unowned
-} from './benchmarks/kairo/kairo_avoidable.js';
-import { kairo_broad_owned, kairo_broad_unowned } from './benchmarks/kairo/kairo_broad.js';
-import { kairo_deep_owned, kairo_deep_unowned } from './benchmarks/kairo/kairo_deep.js';
-import { kairo_diamond_owned, kairo_diamond_unowned } from './benchmarks/kairo/kairo_diamond.js';
-import { kairo_mux_unowned, kairo_mux_owned } from './benchmarks/kairo/kairo_mux.js';
-import { kairo_repeated_unowned, kairo_repeated_owned } from './benchmarks/kairo/kairo_repeated.js';
-import { kairo_triangle_owned, kairo_triangle_unowned } from './benchmarks/kairo/kairo_triangle.js';
-import { kairo_unstable_owned, kairo_unstable_unowned } from './benchmarks/kairo/kairo_unstable.js';
-import { mol_bench_owned, mol_bench_unowned } from './benchmarks/mol_bench.js';
+import { kairo_avoidable_owned, kairo_avoidable_unowned } from './kairo/kairo_avoidable.js';
+import { kairo_broad_owned, kairo_broad_unowned } from './kairo/kairo_broad.js';
+import { kairo_deep_owned, kairo_deep_unowned } from './kairo/kairo_deep.js';
+import { kairo_diamond_owned, kairo_diamond_unowned } from './kairo/kairo_diamond.js';
+import { kairo_mux_unowned, kairo_mux_owned } from './kairo/kairo_mux.js';
+import { kairo_repeated_unowned, kairo_repeated_owned } from './kairo/kairo_repeated.js';
+import { kairo_triangle_owned, kairo_triangle_unowned } from './kairo/kairo_triangle.js';
+import { kairo_unstable_owned, kairo_unstable_unowned } from './kairo/kairo_unstable.js';
+import { mol_bench_owned, mol_bench_unowned } from './mol_bench.js';
 import {
 	sbench_create_0to1,
 	sbench_create_1000to1,
@@ -21,12 +18,12 @@ import {
 	sbench_create_2to1,
 	sbench_create_4to1,
 	sbench_create_signals
-} from './benchmarks/sbench.js';
+} from './sbench.js';
 
 // This benchmark has been adapted from the js-reactivity-benchmark (https://github.com/milomg/js-reactivity-benchmark)
 // Not all tests are the same, and many parts have been tweaked to capture different data.
 
-export const benchmarks = [
+export const reactivity_benchmarks = [
 	sbench_create_signals,
 	sbench_create_0to1,
 	sbench_create_1to1,
diff --git a/benchmarking/benchmarks/kairo/kairo_avoidable.js b/benchmarking/benchmarks/reactivity/kairo/kairo_avoidable.js
similarity index 93%
rename from benchmarking/benchmarks/kairo/kairo_avoidable.js
rename to benchmarking/benchmarks/reactivity/kairo/kairo_avoidable.js
index 76bd4c72e3..1237547ebe 100644
--- a/benchmarking/benchmarks/kairo/kairo_avoidable.js
+++ b/benchmarking/benchmarks/reactivity/kairo/kairo_avoidable.js
@@ -1,5 +1,5 @@
-import { assert, fastest_test } from '../../utils.js';
-import * as $ from '../../../packages/svelte/src/internal/client/index.js';
+import { assert, fastest_test } from '../../../utils.js';
+import * as $ from 'svelte/internal/client';
 import { busy } from './util.js';
 
 function setup() {
diff --git a/benchmarking/benchmarks/kairo/kairo_broad.js b/benchmarking/benchmarks/reactivity/kairo/kairo_broad.js
similarity index 92%
rename from benchmarking/benchmarks/kairo/kairo_broad.js
rename to benchmarking/benchmarks/reactivity/kairo/kairo_broad.js
index d7b37d153c..8148a743ea 100644
--- a/benchmarking/benchmarks/kairo/kairo_broad.js
+++ b/benchmarking/benchmarks/reactivity/kairo/kairo_broad.js
@@ -1,5 +1,5 @@
-import { assert, fastest_test } from '../../utils.js';
-import * as $ from '../../../packages/svelte/src/internal/client/index.js';
+import { assert, fastest_test } from '../../../utils.js';
+import * as $ from 'svelte/internal/client';
 
 function setup() {
 	let head = $.state(0);
diff --git a/benchmarking/benchmarks/kairo/kairo_deep.js b/benchmarking/benchmarks/reactivity/kairo/kairo_deep.js
similarity index 92%
rename from benchmarking/benchmarks/kairo/kairo_deep.js
rename to benchmarking/benchmarks/reactivity/kairo/kairo_deep.js
index cc29940738..806042cc72 100644
--- a/benchmarking/benchmarks/kairo/kairo_deep.js
+++ b/benchmarking/benchmarks/reactivity/kairo/kairo_deep.js
@@ -1,5 +1,5 @@
-import { assert, fastest_test } from '../../utils.js';
-import * as $ from '../../../packages/svelte/src/internal/client/index.js';
+import { assert, fastest_test } from '../../../utils.js';
+import * as $ from 'svelte/internal/client';
 
 let len = 50;
 const iter = 50;
diff --git a/benchmarking/benchmarks/kairo/kairo_diamond.js b/benchmarking/benchmarks/reactivity/kairo/kairo_diamond.js
similarity index 92%
rename from benchmarking/benchmarks/kairo/kairo_diamond.js
rename to benchmarking/benchmarks/reactivity/kairo/kairo_diamond.js
index 0492454966..deb9482de9 100644
--- a/benchmarking/benchmarks/kairo/kairo_diamond.js
+++ b/benchmarking/benchmarks/reactivity/kairo/kairo_diamond.js
@@ -1,5 +1,5 @@
-import { assert, fastest_test } from '../../utils.js';
-import * as $ from '../../../packages/svelte/src/internal/client/index.js';
+import { assert, fastest_test } from '../../../utils.js';
+import * as $ from 'svelte/internal/client';
 
 let width = 5;
 
diff --git a/benchmarking/benchmarks/kairo/kairo_mux.js b/benchmarking/benchmarks/reactivity/kairo/kairo_mux.js
similarity index 93%
rename from benchmarking/benchmarks/kairo/kairo_mux.js
rename to benchmarking/benchmarks/reactivity/kairo/kairo_mux.js
index 769e14c43e..8eafacc9eb 100644
--- a/benchmarking/benchmarks/kairo/kairo_mux.js
+++ b/benchmarking/benchmarks/reactivity/kairo/kairo_mux.js
@@ -1,5 +1,5 @@
-import { assert, fastest_test } from '../../utils.js';
-import * as $ from '../../../packages/svelte/src/internal/client/index.js';
+import { assert, fastest_test } from '../../../utils.js';
+import * as $ from 'svelte/internal/client';
 
 function setup() {
 	let heads = new Array(100).fill(null).map((_) => $.state(0));
diff --git a/benchmarking/benchmarks/kairo/kairo_repeated.js b/benchmarking/benchmarks/reactivity/kairo/kairo_repeated.js
similarity index 92%
rename from benchmarking/benchmarks/kairo/kairo_repeated.js
rename to benchmarking/benchmarks/reactivity/kairo/kairo_repeated.js
index 2416f89dfd..2bddf879c9 100644
--- a/benchmarking/benchmarks/kairo/kairo_repeated.js
+++ b/benchmarking/benchmarks/reactivity/kairo/kairo_repeated.js
@@ -1,5 +1,5 @@
-import { assert, fastest_test } from '../../utils.js';
-import * as $ from '../../../packages/svelte/src/internal/client/index.js';
+import { assert, fastest_test } from '../../../utils.js';
+import * as $ from 'svelte/internal/client';
 
 let size = 30;
 
diff --git a/benchmarking/benchmarks/kairo/kairo_triangle.js b/benchmarking/benchmarks/reactivity/kairo/kairo_triangle.js
similarity index 93%
rename from benchmarking/benchmarks/kairo/kairo_triangle.js
rename to benchmarking/benchmarks/reactivity/kairo/kairo_triangle.js
index ee9311c96a..9d99b7815b 100644
--- a/benchmarking/benchmarks/kairo/kairo_triangle.js
+++ b/benchmarking/benchmarks/reactivity/kairo/kairo_triangle.js
@@ -1,5 +1,5 @@
-import { assert, fastest_test } from '../../utils.js';
-import * as $ from '../../../packages/svelte/src/internal/client/index.js';
+import { assert, fastest_test } from '../../../utils.js';
+import * as $ from 'svelte/internal/client';
 
 let width = 10;
 
diff --git a/benchmarking/benchmarks/kairo/kairo_unstable.js b/benchmarking/benchmarks/reactivity/kairo/kairo_unstable.js
similarity index 92%
rename from benchmarking/benchmarks/kairo/kairo_unstable.js
rename to benchmarking/benchmarks/reactivity/kairo/kairo_unstable.js
index b05fc0745a..c30c007561 100644
--- a/benchmarking/benchmarks/kairo/kairo_unstable.js
+++ b/benchmarking/benchmarks/reactivity/kairo/kairo_unstable.js
@@ -1,5 +1,5 @@
-import { assert, fastest_test } from '../../utils.js';
-import * as $ from '../../../packages/svelte/src/internal/client/index.js';
+import { assert, fastest_test } from '../../../utils.js';
+import * as $ from 'svelte/internal/client';
 
 function setup() {
 	let head = $.state(0);
diff --git a/benchmarking/benchmarks/kairo/util.js b/benchmarking/benchmarks/reactivity/kairo/util.js
similarity index 100%
rename from benchmarking/benchmarks/kairo/util.js
rename to benchmarking/benchmarks/reactivity/kairo/util.js
diff --git a/benchmarking/benchmarks/mol_bench.js b/benchmarking/benchmarks/reactivity/mol_bench.js
similarity index 95%
rename from benchmarking/benchmarks/mol_bench.js
rename to benchmarking/benchmarks/reactivity/mol_bench.js
index a962f5e148..c9f492f619 100644
--- a/benchmarking/benchmarks/mol_bench.js
+++ b/benchmarking/benchmarks/reactivity/mol_bench.js
@@ -1,5 +1,5 @@
-import { assert, fastest_test } from '../utils.js';
-import * as $ from '../../packages/svelte/src/internal/client/index.js';
+import { assert, fastest_test } from '../../utils.js';
+import * as $ from 'svelte/internal/client';
 
 /**
  * @param {number} n
diff --git a/benchmarking/benchmarks/sbench.js b/benchmarking/benchmarks/reactivity/sbench.js
similarity index 98%
rename from benchmarking/benchmarks/sbench.js
rename to benchmarking/benchmarks/reactivity/sbench.js
index f390d84463..ddeaef2514 100644
--- a/benchmarking/benchmarks/sbench.js
+++ b/benchmarking/benchmarks/reactivity/sbench.js
@@ -1,5 +1,5 @@
-import { fastest_test } from '../utils.js';
-import * as $ from '../../packages/svelte/src/internal/client/index.js';
+import { fastest_test } from '../../utils.js';
+import * as $ from '../../../packages/svelte/src/internal/client/index.js';
 
 const COUNT = 1e5;
 
diff --git a/benchmarking/benchmarks/ssr/index.js b/benchmarking/benchmarks/ssr/index.js
new file mode 100644
index 0000000000..667137d1ed
--- /dev/null
+++ b/benchmarking/benchmarks/ssr/index.js
@@ -0,0 +1,3 @@
+import { wrapper_bench } from './wrapper/wrapper_bench.js';
+
+export const ssr_benchmarks = [wrapper_bench];
diff --git a/benchmarking/benchmarks/ssr/wrapper/App.svelte b/benchmarking/benchmarks/ssr/wrapper/App.svelte
new file mode 100644
index 0000000000..93f031f2bc
--- /dev/null
+++ b/benchmarking/benchmarks/ssr/wrapper/App.svelte
@@ -0,0 +1,31 @@
+<script>
+	const wrapperWidth = 960;
+	const wrapperHeight = 720;
+	const cellSize = 10;
+	const centerX = wrapperWidth / 2;
+	const centerY = wrapperHeight / 2;
+
+	let angle = 0;
+	let radius = 0;
+
+	let tiles = [];
+	const step = cellSize;
+
+	while (radius < Math.min(wrapperWidth, wrapperHeight) / 2) {
+		let x = centerX + Math.cos(angle) * radius;
+		let y = centerY + Math.sin(angle) * radius;
+
+		if (x >= 0 && x <= wrapperWidth - cellSize && y >= 0 && y <= wrapperHeight - cellSize) {
+			tiles.push({ x, y });
+		}
+
+		angle += 0.2;
+		radius += step * 0.015;
+	}
+</script>
+
+<div id="wrapper">
+	{#each tiles as { x, y }}
+		<div class="tile" style="left: {x.toFixed(2)}px; top: {y.toFixed(2)}px;"></div>
+	{/each}
+</div>
diff --git a/benchmarking/benchmarks/ssr/wrapper/wrapper_bench.js b/benchmarking/benchmarks/ssr/wrapper/wrapper_bench.js
new file mode 100644
index 0000000000..ba0457b80e
--- /dev/null
+++ b/benchmarking/benchmarks/ssr/wrapper/wrapper_bench.js
@@ -0,0 +1,36 @@
+import { render } from 'svelte/server';
+import { fastest_test, read_file, write } from '../../../utils.js';
+import { compile } from 'svelte/compiler';
+
+const dir = `${process.cwd()}/benchmarking/benchmarks/ssr/wrapper`;
+
+async function compile_svelte() {
+	const output = compile(read_file(`${dir}/App.svelte`), {
+		generate: 'server'
+	});
+	write(`${dir}/output/App.js`, output.js.code);
+
+	const module = await import(`${dir}/output/App.js`);
+
+	return module.default;
+}
+
+export async function wrapper_bench() {
+	const App = await compile_svelte();
+	// Do 3 loops to warm up JIT
+	for (let i = 0; i < 3; i++) {
+		render(App);
+	}
+
+	const { timing } = await fastest_test(10, () => {
+		for (let i = 0; i < 100; i++) {
+			render(App);
+		}
+	});
+
+	return {
+		benchmark: 'wrapper_bench',
+		time: timing.time.toFixed(2),
+		gc_time: timing.gc_time.toFixed(2)
+	};
+}
diff --git a/benchmarking/run.js b/benchmarking/run.js
index 35a6ac307f..bd96b9c2dc 100644
--- a/benchmarking/run.js
+++ b/benchmarking/run.js
@@ -1,30 +1,53 @@
 import * as $ from '../packages/svelte/src/internal/client/index.js';
-import { benchmarks } from './benchmarks.js';
+import { reactivity_benchmarks } from './benchmarks/reactivity/index.js';
+import { ssr_benchmarks } from './benchmarks/ssr/index.js';
 
 let total_time = 0;
 let total_gc_time = 0;
 
+const suites = [
+	{ benchmarks: reactivity_benchmarks, name: 'reactivity benchmarks' },
+	{ benchmarks: ssr_benchmarks, name: 'server-side rendering benchmarks' }
+];
+
 // eslint-disable-next-line no-console
-console.log('-- Benchmarking Started --');
+console.log('\x1b[1m', '-- Benchmarking Started --', '\x1b[0m');
 $.push({}, true);
 try {
-	for (const benchmark of benchmarks) {
-		const results = await benchmark();
+	for (const { benchmarks, name } of suites) {
+		let suite_time = 0;
+		let suite_gc_time = 0;
+		// eslint-disable-next-line no-console
+		console.log(`\nRunning ${name}...\n`);
+
+		for (const benchmark of benchmarks) {
+			const results = await benchmark();
+			// eslint-disable-next-line no-console
+			console.log(results);
+			total_time += Number(results.time);
+			total_gc_time += Number(results.gc_time);
+			suite_time += Number(results.time);
+			suite_gc_time += Number(results.gc_time);
+		}
+
+		console.log(`\nFinished ${name}.\n`);
+
 		// eslint-disable-next-line no-console
-		console.log(results);
-		total_time += Number(results.time);
-		total_gc_time += Number(results.gc_time);
+		console.log({
+			suite_time: suite_time.toFixed(2),
+			suite_gc_time: suite_gc_time.toFixed(2)
+		});
 	}
 } catch (e) {
 	// eslint-disable-next-line no-console
-	console.error('-- Benchmarking Failed --');
+	console.log('\x1b[1m', '\n-- Benchmarking Failed --\n', '\x1b[0m');
 	// eslint-disable-next-line no-console
 	console.error(e);
 	process.exit(1);
 }
 $.pop();
 // eslint-disable-next-line no-console
-console.log('-- Benchmarking Complete --');
+console.log('\x1b[1m', '\n-- Benchmarking Complete --\n', '\x1b[0m');
 // eslint-disable-next-line no-console
 console.log({
 	total_time: total_time.toFixed(2),
diff --git a/benchmarking/utils.js b/benchmarking/utils.js
index db2fa753ee..684d2ee02b 100644
--- a/benchmarking/utils.js
+++ b/benchmarking/utils.js
@@ -1,5 +1,7 @@
 import { performance, PerformanceObserver } from 'node:perf_hooks';
 import v8 from 'v8-natives';
+import * as fs from 'node:fs';
+import * as path from 'node:path';
 
 // Credit to https://github.com/milomg/js-reactivity-benchmark for the logic for timing + GC tracking.
 
@@ -96,3 +98,22 @@ export function assert(a) {
 		throw new Error('Assertion failed');
 	}
 }
+
+/**
+ * @param {string} file
+ */
+export function read_file(file) {
+	return fs.readFileSync(file, 'utf-8').replace(/\r\n/g, '\n');
+}
+
+/**
+ * @param {string} file
+ * @param {string} contents
+ */
+export function write(file, contents) {
+	try {
+		fs.mkdirSync(path.dirname(file), { recursive: true });
+	} catch {}
+
+	fs.writeFileSync(file, contents);
+}

From 741106879bc60bb8b4e5daf3884032a04c803dd2 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Tue, 19 Nov 2024 18:11:30 +0000
Subject: [PATCH 077/159] fix: ensure internal cloning can work circular values
 (#14347)

* fix: ensure internal cloning can work circular values

* better fixc

* 'original' feels slightly clearer than 'json_instance'

* use an optional parameter, so we can omit it in most cases

* Update packages/svelte/src/internal/shared/clone.js

Co-authored-by: Rich Harris <rich.harris@vercel.com>

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/cool-trains-yawn.md                |  5 ++++
 packages/svelte/src/internal/shared/clone.js  | 15 ++++++++++--
 .../samples/inspect-recursive-2/_config.js    | 23 +++++++++++++++++++
 .../samples/inspect-recursive-2/main.svelte   | 23 +++++++++++++++++++
 4 files changed, 64 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/cool-trains-yawn.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/inspect-recursive-2/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/inspect-recursive-2/main.svelte

diff --git a/.changeset/cool-trains-yawn.md b/.changeset/cool-trains-yawn.md
new file mode 100644
index 0000000000..d5198d118c
--- /dev/null
+++ b/.changeset/cool-trains-yawn.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ensure internal cloning can work circular values
diff --git a/packages/svelte/src/internal/shared/clone.js b/packages/svelte/src/internal/shared/clone.js
index bfdc9af263..cef14bc14f 100644
--- a/packages/svelte/src/internal/shared/clone.js
+++ b/packages/svelte/src/internal/shared/clone.js
@@ -49,9 +49,10 @@ export function snapshot(value, skip_warning = false) {
  * @param {Map<T, Snapshot<T>>} cloned
  * @param {string} path
  * @param {string[]} paths
+ * @param {null | T} original The original value, if `value` was produced from a `toJSON` call
  * @returns {Snapshot<T>}
  */
-function clone(value, cloned, path, paths) {
+function clone(value, cloned, path, paths, original = null) {
 	if (typeof value === 'object' && value !== null) {
 		const unwrapped = cloned.get(value);
 		if (unwrapped !== undefined) return unwrapped;
@@ -63,6 +64,10 @@ function clone(value, cloned, path, paths) {
 			const copy = /** @type {Snapshot<any>} */ ([]);
 			cloned.set(value, copy);
 
+			if (original !== null) {
+				cloned.set(original, copy);
+			}
+
 			for (let i = 0; i < value.length; i += 1) {
 				copy.push(clone(value[i], cloned, DEV ? `${path}[${i}]` : path, paths));
 			}
@@ -75,6 +80,10 @@ function clone(value, cloned, path, paths) {
 			const copy = {};
 			cloned.set(value, copy);
 
+			if (original !== null) {
+				cloned.set(original, copy);
+			}
+
 			for (var key in value) {
 				// @ts-expect-error
 				copy[key] = clone(value[key], cloned, DEV ? `${path}.${key}` : path, paths);
@@ -92,7 +101,9 @@ function clone(value, cloned, path, paths) {
 				/** @type {T & { toJSON(): any } } */ (value).toJSON(),
 				cloned,
 				DEV ? `${path}.toJSON()` : path,
-				paths
+				paths,
+				// Associate the instance with the toJSON clone
+				value
 			);
 		}
 	}
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-recursive-2/_config.js b/packages/svelte/tests/runtime-runes/samples/inspect-recursive-2/_config.js
new file mode 100644
index 0000000000..ab49697195
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/inspect-recursive-2/_config.js
@@ -0,0 +1,23 @@
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+
+	async test({ assert, logs }) {
+		var a = {
+			a: {}
+		};
+		a.a = a;
+
+		var b = {
+			a: {
+				b: {}
+			}
+		};
+		b.a.b = b;
+
+		assert.deepEqual(logs, ['init', a, 'init', b]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-recursive-2/main.svelte b/packages/svelte/tests/runtime-runes/samples/inspect-recursive-2/main.svelte
new file mode 100644
index 0000000000..f7874d2192
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/inspect-recursive-2/main.svelte
@@ -0,0 +1,23 @@
+<script>
+	class A {
+		toJSON(){
+			return {
+				a: this
+			}
+		}
+	}
+	const state = $state(new A());
+	$inspect(state);
+
+	class B {
+		toJSON(){
+			return {
+				a: {
+					b: this
+				}
+			}
+		}
+	}
+	const state2 = $state(new B());
+	$inspect(state2);
+</script>

From 747d40833b024d2b5ea5cf0de8e6198cbd3af23c Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Tue, 19 Nov 2024 19:04:40 +0000
Subject: [PATCH 078/159] fix: ensure is_pure takes into account runes (#14333)

* fix: ensure is_pure takes into account runes

* feedback
---
 .changeset/slimy-islands-cry.md               |  5 +++++
 .../phases/2-analyze/visitors/shared/utils.js | 10 ++++++++-
 .../samples/inline-expressions-2/_config.js   | 11 ----------
 .../samples/inline-expressions/_config.js     | 21 +++++++++++++++++++
 .../samples/inline-expressions}/main.svelte   |  1 +
 5 files changed, 36 insertions(+), 12 deletions(-)
 create mode 100644 .changeset/slimy-islands-cry.md
 delete mode 100644 packages/svelte/tests/runtime-legacy/samples/inline-expressions-2/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/inline-expressions/_config.js
 rename packages/svelte/tests/{runtime-legacy/samples/inline-expressions-2 => runtime-runes/samples/inline-expressions}/main.svelte (87%)

diff --git a/.changeset/slimy-islands-cry.md b/.changeset/slimy-islands-cry.md
new file mode 100644
index 0000000000..f7f34b60e1
--- /dev/null
+++ b/.changeset/slimy-islands-cry.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ensure is_pure takes into account $effect.tracking()
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/utils.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/utils.js
index 2dec4361c8..8698174c6b 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/utils.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/utils.js
@@ -4,8 +4,10 @@
 /** @import { Scope } from '../../../scope' */
 /** @import { NodeLike } from '../../../../errors.js' */
 import * as e from '../../../../errors.js';
-import { extract_identifiers, object } from '../../../../utils/ast.js';
+import { extract_identifiers } from '../../../../utils/ast.js';
 import * as w from '../../../../warnings.js';
+import * as b from '../../../../utils/builders.js';
+import { get_rune } from '../../../scope.js';
 
 /**
  * @param {AssignmentExpression | UpdateExpression} node
@@ -184,6 +186,7 @@ export function is_pure(node, context) {
 	if (node.type === 'Literal') {
 		return true;
 	}
+
 	if (node.type === 'CallExpression') {
 		if (!is_pure(node.callee, context)) {
 			return false;
@@ -195,10 +198,15 @@ export function is_pure(node, context) {
 		}
 		return true;
 	}
+
 	if (node.type !== 'Identifier' && node.type !== 'MemberExpression') {
 		return false;
 	}
 
+	if (get_rune(b.call(node), context.state.scope) === '$effect.tracking') {
+		return false;
+	}
+
 	/** @type {Expression | Super | null} */
 	let left = node;
 	while (left.type === 'MemberExpression') {
diff --git a/packages/svelte/tests/runtime-legacy/samples/inline-expressions-2/_config.js b/packages/svelte/tests/runtime-legacy/samples/inline-expressions-2/_config.js
deleted file mode 100644
index 1869540b2c..0000000000
--- a/packages/svelte/tests/runtime-legacy/samples/inline-expressions-2/_config.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import { test } from '../../test';
-
-export default test({
-	html: `
-		<p>Without text expression: 7.36</p>
-		<p>With text expression: 7.36</p>
-		<p>With text expression and function call: 7.36</p>
-		<p>With text expression and property access: 4</p>
-		<h1>Hello name!</h1>
-		<p>4</p>`
-});
diff --git a/packages/svelte/tests/runtime-runes/samples/inline-expressions/_config.js b/packages/svelte/tests/runtime-runes/samples/inline-expressions/_config.js
new file mode 100644
index 0000000000..c5d4a75379
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/inline-expressions/_config.js
@@ -0,0 +1,21 @@
+import { test } from '../../test';
+
+export default test({
+	html: `
+		<p>Without text expression: 7.36</p>
+		<p>With text expression: 7.36</p>
+		<p>With text expression and function call: 7.36</p>
+		<p>With text expression and property access: 4</p>
+		<h1>Hello name!</h1>
+		<p>4</p>
+		<h1>Tracking: true</h1>`,
+
+	ssrHtml: `
+		<p>Without text expression: 7.36</p>
+		<p>With text expression: 7.36</p>
+		<p>With text expression and function call: 7.36</p>
+		<p>With text expression and property access: 4</p>
+		<h1>Hello name!</h1>
+		<p>4</p>
+		<h1>Tracking: false</h1>`
+});
diff --git a/packages/svelte/tests/runtime-legacy/samples/inline-expressions-2/main.svelte b/packages/svelte/tests/runtime-runes/samples/inline-expressions/main.svelte
similarity index 87%
rename from packages/svelte/tests/runtime-legacy/samples/inline-expressions-2/main.svelte
rename to packages/svelte/tests/runtime-runes/samples/inline-expressions/main.svelte
index 78a325dcc4..38a97415d2 100644
--- a/packages/svelte/tests/runtime-legacy/samples/inline-expressions-2/main.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/inline-expressions/main.svelte
@@ -4,3 +4,4 @@
 <p>With text expression and property access: {"test".length}</p>
 <h1>Hello {('name').toUpperCase().toLowerCase()}!</h1>
 <p>{"test".length}</p>
+<h1>Tracking: {$effect.tracking()}</h1>

From 53cc60085e099352c04732f0653af03b63af624c Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 19 Nov 2024 14:05:50 -0500
Subject: [PATCH 079/159] Version Packages (#14362)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/cool-trains-yawn.md     |  5 -----
 .changeset/serious-spiders-bake.md |  5 -----
 .changeset/slimy-islands-cry.md    |  5 -----
 .changeset/wicked-grapes-flash.md  |  5 -----
 packages/svelte/CHANGELOG.md       | 12 ++++++++++++
 packages/svelte/package.json       |  2 +-
 packages/svelte/src/version.js     |  2 +-
 7 files changed, 14 insertions(+), 22 deletions(-)
 delete mode 100644 .changeset/cool-trains-yawn.md
 delete mode 100644 .changeset/serious-spiders-bake.md
 delete mode 100644 .changeset/slimy-islands-cry.md
 delete mode 100644 .changeset/wicked-grapes-flash.md

diff --git a/.changeset/cool-trains-yawn.md b/.changeset/cool-trains-yawn.md
deleted file mode 100644
index d5198d118c..0000000000
--- a/.changeset/cool-trains-yawn.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: ensure internal cloning can work circular values
diff --git a/.changeset/serious-spiders-bake.md b/.changeset/serious-spiders-bake.md
deleted file mode 100644
index b1f9d84a3f..0000000000
--- a/.changeset/serious-spiders-bake.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: correctly update dynamic member expressions
diff --git a/.changeset/slimy-islands-cry.md b/.changeset/slimy-islands-cry.md
deleted file mode 100644
index f7f34b60e1..0000000000
--- a/.changeset/slimy-islands-cry.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: ensure is_pure takes into account $effect.tracking()
diff --git a/.changeset/wicked-grapes-flash.md b/.changeset/wicked-grapes-flash.md
deleted file mode 100644
index 75ff68a728..0000000000
--- a/.changeset/wicked-grapes-flash.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: coerce value to number when hydrating range/number input with changed value
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index d36307c80c..f01f519150 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,17 @@
 # svelte
 
+## 5.2.4
+
+### Patch Changes
+
+- fix: ensure internal cloning can work circular values ([#14347](https://github.com/sveltejs/svelte/pull/14347))
+
+- fix: correctly update dynamic member expressions ([#14359](https://github.com/sveltejs/svelte/pull/14359))
+
+- fix: ensure is_pure takes into account $effect.tracking() ([#14333](https://github.com/sveltejs/svelte/pull/14333))
+
+- fix: coerce value to number when hydrating range/number input with changed value ([#14349](https://github.com/sveltejs/svelte/pull/14349))
+
 ## 5.2.3
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 50319c77aa..f6ba053398 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.2.3",
+  "version": "5.2.4",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index b79e9a2891..3a728f3d14 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.2.3';
+export const VERSION = '5.2.4';
 export const PUBLIC_VERSION = '5';

From ce471310c49695550f8422ade46025f9818106c2 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 19 Nov 2024 16:31:22 -0500
Subject: [PATCH 080/159] chore: remove some unused code (#14363)

---
 .../visitors/ExportNamedDeclaration.js         | 18 ------------------
 1 file changed, 18 deletions(-)

diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/ExportNamedDeclaration.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/ExportNamedDeclaration.js
index 784d2fdd88..547f6ab9c7 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/ExportNamedDeclaration.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/ExportNamedDeclaration.js
@@ -57,23 +57,5 @@ export function ExportNamedDeclaration(node, context) {
 				}
 			}
 		}
-
-		if (!context.state.ast_type /* .svelte.js module */ || context.state.ast_type === 'module') {
-			for (const specified of node.specifiers) {
-				if (specified.local.type !== 'Identifier') continue;
-
-				const binding = context.state.scope.get(specified.local.name);
-
-				if (!binding) continue;
-
-				if (binding.kind === 'derived') {
-					e.derived_invalid_export(node);
-				}
-
-				if ((binding.kind === 'state' || binding.kind === 'raw_state') && binding.reassigned) {
-					e.state_invalid_export(node);
-				}
-			}
-		}
 	}
 }

From 32a14538051a9ab382b467d4c5f772114809b7d1 Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Tue, 19 Nov 2024 22:38:36 +0100
Subject: [PATCH 081/159] fix: include method definitions in class private
 fields (#14365)

* fix: include method definitions in class private fields

* Update packages/svelte/tests/runtime-runes/samples/class-disabinguate-private-method-definition/_config.js

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/unlucky-icons-sit.md                           | 5 +++++
 .../phases/3-transform/client/visitors/ClassBody.js       | 2 +-
 .../_config.js                                            | 3 +++
 .../main.svelte                                           | 8 ++++++++
 4 files changed, 17 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/unlucky-icons-sit.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/class-disabinguate-private-method-definition/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/class-disabinguate-private-method-definition/main.svelte

diff --git a/.changeset/unlucky-icons-sit.md b/.changeset/unlucky-icons-sit.md
new file mode 100644
index 0000000000..7fc14cf435
--- /dev/null
+++ b/.changeset/unlucky-icons-sit.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: include method definitions in class private fields
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/ClassBody.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/ClassBody.js
index 2d832b9df1..11a524d33c 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/ClassBody.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/ClassBody.js
@@ -28,7 +28,7 @@ export function ClassBody(node, context) {
 
 	for (const definition of node.body) {
 		if (
-			definition.type === 'PropertyDefinition' &&
+			(definition.type === 'PropertyDefinition' || definition.type === 'MethodDefinition') &&
 			(definition.key.type === 'Identifier' ||
 				definition.key.type === 'PrivateIdentifier' ||
 				definition.key.type === 'Literal')
diff --git a/packages/svelte/tests/runtime-runes/samples/class-disabinguate-private-method-definition/_config.js b/packages/svelte/tests/runtime-runes/samples/class-disabinguate-private-method-definition/_config.js
new file mode 100644
index 0000000000..f47bee71df
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-disabinguate-private-method-definition/_config.js
@@ -0,0 +1,3 @@
+import { test } from '../../test';
+
+export default test({});
diff --git a/packages/svelte/tests/runtime-runes/samples/class-disabinguate-private-method-definition/main.svelte b/packages/svelte/tests/runtime-runes/samples/class-disabinguate-private-method-definition/main.svelte
new file mode 100644
index 0000000000..92f2540498
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-disabinguate-private-method-definition/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	class Repo {
+	  tree = $state();
+	  async #tree() {
+	  }
+	}
+	const repo = new Repo();
+</script>

From 4c98c2e4a6aaa54650cc834e109a0e2dabd5a574 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Wed, 20 Nov 2024 15:52:03 +0100
Subject: [PATCH 082/159] chore: consolidate checks for never-static attributes
 (#14372)

We're using string checks in various places, better to have it encapsulated in one function
---
 .../phases/2-analyze/visitors/RegularElement.js       |  6 ++----
 .../3-transform/client/visitors/RegularElement.js     |  4 ++--
 .../3-transform/client/visitors/shared/fragment.js    |  3 ++-
 packages/svelte/src/utils.js                          | 11 +++++++++++
 4 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js
index 60bd1dd0c5..d5964f9ae1 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js
@@ -1,6 +1,6 @@
 /** @import { AST } from '#compiler' */
 /** @import { Context } from '../types' */
-import { is_mathml, is_svg, is_void } from '../../../../utils.js';
+import { cannot_be_set_statically, is_mathml, is_svg, is_void } from '../../../../utils.js';
 import {
 	is_tag_valid_with_ancestor,
 	is_tag_valid_with_parent
@@ -77,9 +77,7 @@ export function RegularElement(node, context) {
 
 	if (
 		node.attributes.some(
-			(attribute) =>
-				attribute.type === 'Attribute' &&
-				(attribute.name === 'autofocus' || attribute.name === 'muted')
+			(attribute) => attribute.type === 'Attribute' && cannot_be_set_statically(attribute.name)
 		)
 	) {
 		mark_subtree_dynamic(context.path);
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
index 455327a712..19948464d2 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
@@ -5,6 +5,7 @@
 /** @import { Scope } from '../../../scope' */
 import { escape_html } from '../../../../../escaping.js';
 import {
+	cannot_be_set_statically,
 	is_boolean_attribute,
 	is_dom_property,
 	is_load_error_element,
@@ -262,8 +263,7 @@ export function RegularElement(node, context) {
 
 			if (
 				!is_custom_element &&
-				attribute.name !== 'autofocus' &&
-				attribute.name !== 'muted' &&
+				!cannot_be_set_statically(attribute.name) &&
 				(attribute.value === true || is_text_attribute(attribute))
 			) {
 				const name = get_attribute_name(node, attribute);
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js
index ac6e0f8f9f..102988781a 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js
@@ -3,6 +3,7 @@
 /** @import { Scope } from '../../../../scope.js' */
 /** @import { ComponentContext } from '../../types' */
 import { escape_html } from '../../../../../../escaping.js';
+import { cannot_be_set_statically } from '../../../../../../utils.js';
 import { is_event_attribute } from '../../../../../utils/ast.js';
 import * as b from '../../../../../utils/builders.js';
 import { build_template_chunk, build_update } from './utils.js';
@@ -142,7 +143,7 @@ function is_static_element(node) {
 			return false;
 		}
 
-		if (attribute.name === 'autofocus' || attribute.name === 'muted') {
+		if (cannot_be_set_statically(attribute.name)) {
 			return false;
 		}
 
diff --git a/packages/svelte/src/utils.js b/packages/svelte/src/utils.js
index 60ec364e6f..84c7ca1efb 100644
--- a/packages/svelte/src/utils.js
+++ b/packages/svelte/src/utils.js
@@ -222,6 +222,17 @@ export function is_dom_property(name) {
 	return DOM_PROPERTIES.includes(name);
 }
 
+const NON_STATIC_PROPERTIES = ['autofocus', 'muted'];
+
+/**
+ * Returns `true` if the given attribute cannot be set through the template
+ * string, i.e. needs some kind of JavaScript handling to work.
+ * @param {string} name
+ */
+export function cannot_be_set_statically(name) {
+	return NON_STATIC_PROPERTIES.includes(name);
+}
+
 /**
  * Subset of delegated events which should be passive by default.
  * These two are already passive via browser defaults on window, document and body.

From 4dfa0e31fe70174538ca47efe1b276ca13b2cd80 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Wed, 20 Nov 2024 16:14:33 +0100
Subject: [PATCH 083/159] fix: tighten up `export default` validation (#14368)

through #14363 I noticed our `export default` validation wasn't quite right:
- missed checking for derived/state exports
- the "cannot have a default export" error was only thrown if you did `export default` from the instance script, but it shouldn't matter from which component part you export it; it's never ok
---
 .changeset/new-houses-roll.md                 |  5 ++++
 .../visitors/ExportDefaultDeclaration.js      |  9 +++++--
 .../2-analyze/visitors/ExportSpecifier.js     | 25 ++-----------------
 .../phases/2-analyze/visitors/shared/utils.js | 21 +++++++++++++++-
 .../_config.js                                | 10 ++++++++
 .../main.svelte.js                            |  5 ++++
 .../export-default-state-indirect/_config.js  | 10 ++++++++
 .../main.svelte.js                            |  7 ++++++
 .../samples/default-export-module/errors.json | 14 +++++++++++
 .../default-export-module/input.svelte        |  3 +++
 10 files changed, 83 insertions(+), 26 deletions(-)
 create mode 100644 .changeset/new-houses-roll.md
 create mode 100644 packages/svelte/tests/compiler-errors/samples/export-default-derived-state-indirect/_config.js
 create mode 100644 packages/svelte/tests/compiler-errors/samples/export-default-derived-state-indirect/main.svelte.js
 create mode 100644 packages/svelte/tests/compiler-errors/samples/export-default-state-indirect/_config.js
 create mode 100644 packages/svelte/tests/compiler-errors/samples/export-default-state-indirect/main.svelte.js
 create mode 100644 packages/svelte/tests/validator/samples/default-export-module/errors.json
 create mode 100644 packages/svelte/tests/validator/samples/default-export-module/input.svelte

diff --git a/.changeset/new-houses-roll.md b/.changeset/new-houses-roll.md
new file mode 100644
index 0000000000..a2b8370e06
--- /dev/null
+++ b/.changeset/new-houses-roll.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: tighten up `export default` validation
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/ExportDefaultDeclaration.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/ExportDefaultDeclaration.js
index 0a7461f155..768f1c6305 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/ExportDefaultDeclaration.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/ExportDefaultDeclaration.js
@@ -1,13 +1,18 @@
-/** @import { ExportDefaultDeclaration, Node } from 'estree' */
+/** @import { ExportDefaultDeclaration } from 'estree' */
 /** @import { Context } from '../types' */
 import * as e from '../../../errors.js';
+import { validate_export } from './shared/utils.js';
 
 /**
  * @param {ExportDefaultDeclaration} node
  * @param {Context} context
  */
 export function ExportDefaultDeclaration(node, context) {
-	if (context.state.ast_type === 'instance') {
+	if (!context.state.ast_type /* .svelte.js module */) {
+		if (node.declaration.type === 'Identifier') {
+			validate_export(node, context.state.scope, node.declaration.name);
+		}
+	} else {
 		e.module_illegal_default_export(node);
 	}
 
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/ExportSpecifier.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/ExportSpecifier.js
index d0d1ccf932..cfb24970de 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/ExportSpecifier.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/ExportSpecifier.js
@@ -1,8 +1,6 @@
-/** @import { ExportSpecifier, Node } from 'estree' */
-/** @import { Binding } from '#compiler' */
+/** @import { ExportSpecifier } from 'estree' */
 /** @import { Context } from '../types' */
-/** @import { Scope } from '../../scope' */
-import * as e from '../../../errors.js';
+import { validate_export } from './shared/utils.js';
 
 /**
  * @param {ExportSpecifier} node
@@ -30,22 +28,3 @@ export function ExportSpecifier(node, context) {
 		validate_export(node, context.state.scope, local_name);
 	}
 }
-
-/**
- *
- * @param {Node} node
- * @param {Scope} scope
- * @param {string} name
- */
-function validate_export(node, scope, name) {
-	const binding = scope.get(name);
-	if (!binding) return;
-
-	if (binding.kind === 'derived') {
-		e.derived_invalid_export(node);
-	}
-
-	if ((binding.kind === 'state' || binding.kind === 'raw_state') && binding.reassigned) {
-		e.state_invalid_export(node);
-	}
-}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/utils.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/utils.js
index 8698174c6b..e265637c40 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/utils.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/utils.js
@@ -1,4 +1,4 @@
-/** @import { AssignmentExpression, Expression, Literal, Pattern, PrivateIdentifier, Super, UpdateExpression, VariableDeclarator } from 'estree' */
+/** @import { AssignmentExpression, Expression, Literal, Node, Pattern, PrivateIdentifier, Super, UpdateExpression, VariableDeclarator } from 'estree' */
 /** @import { AST, Binding } from '#compiler' */
 /** @import { AnalysisState, Context } from '../../types' */
 /** @import { Scope } from '../../../scope' */
@@ -263,3 +263,22 @@ export function validate_identifier_name(binding, function_depth) {
 		}
 	}
 }
+
+/**
+ * Checks that the exported name is not a derived or reassigned state variable.
+ * @param {Node} node
+ * @param {Scope} scope
+ * @param {string} name
+ */
+export function validate_export(node, scope, name) {
+	const binding = scope.get(name);
+	if (!binding) return;
+
+	if (binding.kind === 'derived') {
+		e.derived_invalid_export(node);
+	}
+
+	if ((binding.kind === 'state' || binding.kind === 'raw_state') && binding.reassigned) {
+		e.state_invalid_export(node);
+	}
+}
diff --git a/packages/svelte/tests/compiler-errors/samples/export-default-derived-state-indirect/_config.js b/packages/svelte/tests/compiler-errors/samples/export-default-derived-state-indirect/_config.js
new file mode 100644
index 0000000000..4a36211769
--- /dev/null
+++ b/packages/svelte/tests/compiler-errors/samples/export-default-derived-state-indirect/_config.js
@@ -0,0 +1,10 @@
+import { test } from '../../test';
+
+export default test({
+	error: {
+		code: 'derived_invalid_export',
+		message:
+			'Cannot export derived state from a module. To expose the current derived value, export a function returning its value',
+		position: [61, 83]
+	}
+});
diff --git a/packages/svelte/tests/compiler-errors/samples/export-default-derived-state-indirect/main.svelte.js b/packages/svelte/tests/compiler-errors/samples/export-default-derived-state-indirect/main.svelte.js
new file mode 100644
index 0000000000..64a794492b
--- /dev/null
+++ b/packages/svelte/tests/compiler-errors/samples/export-default-derived-state-indirect/main.svelte.js
@@ -0,0 +1,5 @@
+let count = $state(0);
+
+const double = $derived(count * 2);
+
+export default double;
diff --git a/packages/svelte/tests/compiler-errors/samples/export-default-state-indirect/_config.js b/packages/svelte/tests/compiler-errors/samples/export-default-state-indirect/_config.js
new file mode 100644
index 0000000000..99e4faec25
--- /dev/null
+++ b/packages/svelte/tests/compiler-errors/samples/export-default-state-indirect/_config.js
@@ -0,0 +1,10 @@
+import { test } from '../../test';
+
+export default test({
+	error: {
+		code: 'state_invalid_export',
+		message:
+			"Cannot export state from a module if it is reassigned. Either export a function returning the state value or only mutate the state value's properties",
+		position: [93, 118]
+	}
+});
diff --git a/packages/svelte/tests/compiler-errors/samples/export-default-state-indirect/main.svelte.js b/packages/svelte/tests/compiler-errors/samples/export-default-state-indirect/main.svelte.js
new file mode 100644
index 0000000000..8e52f76533
--- /dev/null
+++ b/packages/svelte/tests/compiler-errors/samples/export-default-state-indirect/main.svelte.js
@@ -0,0 +1,7 @@
+let primitive = $state('nope');
+
+export function update_primitive() {
+	primitive = 'yep';
+}
+
+export default primitive;
diff --git a/packages/svelte/tests/validator/samples/default-export-module/errors.json b/packages/svelte/tests/validator/samples/default-export-module/errors.json
new file mode 100644
index 0000000000..9fd2bb7df5
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/default-export-module/errors.json
@@ -0,0 +1,14 @@
+[
+	{
+		"code": "module_illegal_default_export",
+		"message": "A component cannot have a default export",
+		"start": {
+			"line": 2,
+			"column": 1
+		},
+		"end": {
+			"line": 2,
+			"column": 19
+		}
+	}
+]
diff --git a/packages/svelte/tests/validator/samples/default-export-module/input.svelte b/packages/svelte/tests/validator/samples/default-export-module/input.svelte
new file mode 100644
index 0000000000..2aeeabb2e1
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/default-export-module/input.svelte
@@ -0,0 +1,3 @@
+<script module>
+	export default 42;
+</script>

From 7bd1cdf4271078c977cc39497cbe545a9de4dd62 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Crozatier?=
 <48696601+fcrozatier@users.noreply.github.com>
Date: Wed, 20 Nov 2024 16:14:56 +0100
Subject: [PATCH 084/159] feat: add content-visibility: auto state change event
 (#14373)

* add contentvisibilityautostatechange event

* changeset

* Update .changeset/kind-horses-lay.md

* Update .changeset/kind-horses-lay.md

---------

Co-authored-by: Rich Harris <hello@rich-harris.dev>
---
 .changeset/kind-horses-lay.md |  5 +++++
 packages/svelte/elements.d.ts | 18 ++++++++++++++++++
 2 files changed, 23 insertions(+)
 create mode 100644 .changeset/kind-horses-lay.md

diff --git a/.changeset/kind-horses-lay.md b/.changeset/kind-horses-lay.md
new file mode 100644
index 0000000000..d08bdde6c4
--- /dev/null
+++ b/.changeset/kind-horses-lay.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+add `contentvisibilityautostatechange` event to element definitions
diff --git a/packages/svelte/elements.d.ts b/packages/svelte/elements.d.ts
index 8746b29e25..8b2d388bf8 100644
--- a/packages/svelte/elements.d.ts
+++ b/packages/svelte/elements.d.ts
@@ -60,6 +60,10 @@ export type AnimationEventHandler<T extends EventTarget> = EventHandler<Animatio
 export type TransitionEventHandler<T extends EventTarget> = EventHandler<TransitionEvent, T>;
 export type MessageEventHandler<T extends EventTarget> = EventHandler<MessageEvent, T>;
 export type ToggleEventHandler<T extends EventTarget> = EventHandler<ToggleEvent, T>;
+export type ContentVisibilityAutoStateChangeEventHandler<T extends EventTarget> = EventHandler<
+	ContentVisibilityAutoStateChangeEvent,
+	T
+>;
 
 export type FullAutoFill =
 	| AutoFill
@@ -157,6 +161,20 @@ export interface DOMAttributes<T extends EventTarget> {
 	ontoggle?: ToggleEventHandler<T> | undefined | null;
 	ontogglecapture?: ToggleEventHandler<T> | undefined | null;
 
+	// Content visibility Events
+	'on:contentvisibilityautostatechange'?:
+		| ContentVisibilityAutoStateChangeEventHandler<T>
+		| undefined
+		| null;
+	oncontentvisibilityautostatechange?:
+		| ContentVisibilityAutoStateChangeEventHandler<T>
+		| undefined
+		| null;
+	oncontentvisibilityautostatechangecapture?:
+		| ContentVisibilityAutoStateChangeEventHandler<T>
+		| undefined
+		| null;
+
 	// Keyboard Events
 	'on:keydown'?: KeyboardEventHandler<T> | undefined | null;
 	onkeydown?: KeyboardEventHandler<T> | undefined | null;

From 811c8d32ebcd38501ec5acf1eabe461693bc24d7 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Wed, 20 Nov 2024 15:19:17 +0000
Subject: [PATCH 085/159] fix: correctly handle srcObject attribute on video
 elements (#14369)

* fix: correctly handle srcObject attribute on video elements

* remove side-effect

* side-effects agin

* side-effects agin

* better fix
---
 .changeset/bright-jokes-bow.md                       |  5 +++++
 packages/svelte/src/utils.js                         |  6 ++++--
 .../samples/video-src-object/_config.js              | 12 ++++++++++++
 .../samples/video-src-object/main.svelte             | 10 ++++++++++
 4 files changed, 31 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/bright-jokes-bow.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/video-src-object/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/video-src-object/main.svelte

diff --git a/.changeset/bright-jokes-bow.md b/.changeset/bright-jokes-bow.md
new file mode 100644
index 0000000000..f70076b869
--- /dev/null
+++ b/.changeset/bright-jokes-bow.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: correctly handle srcObject attribute on video elements
diff --git a/packages/svelte/src/utils.js b/packages/svelte/src/utils.js
index 84c7ca1efb..919660fd6a 100644
--- a/packages/svelte/src/utils.js
+++ b/packages/svelte/src/utils.js
@@ -192,7 +192,8 @@ const ATTRIBUTE_ALIASES = {
 	ismap: 'isMap',
 	nomodule: 'noModule',
 	playsinline: 'playsInline',
-	readonly: 'readOnly'
+	readonly: 'readOnly',
+	srcobject: 'srcObject'
 };
 
 /**
@@ -212,7 +213,8 @@ const DOM_PROPERTIES = [
 	'readOnly',
 	'value',
 	'inert',
-	'volume'
+	'volume',
+	'srcObject'
 ];
 
 /**
diff --git a/packages/svelte/tests/runtime-runes/samples/video-src-object/_config.js b/packages/svelte/tests/runtime-runes/samples/video-src-object/_config.js
new file mode 100644
index 0000000000..a31b98cac6
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/video-src-object/_config.js
@@ -0,0 +1,12 @@
+import { test } from '../../test';
+
+export default test({
+	html: `<video></video>`,
+
+	test({ assert, target }) {
+		const video = target.querySelector('video');
+
+		// @ts-ignore
+		assert.deepEqual(video?.srcObject, {});
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/video-src-object/main.svelte b/packages/svelte/tests/runtime-runes/samples/video-src-object/main.svelte
new file mode 100644
index 0000000000..f4059b028a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/video-src-object/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	let srcObject = $state();
+
+	$effect(() => {
+		srcObject = {};
+	})
+</script>
+
+<video {srcObject}></video>
+

From f616c2205399090965d6cf11e9e9b7d5c542fafc Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Wed, 20 Nov 2024 10:30:25 -0500
Subject: [PATCH 086/159] Version Packages (#14366)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/bright-jokes-bow.md  |  5 -----
 .changeset/kind-horses-lay.md   |  5 -----
 .changeset/new-houses-roll.md   |  5 -----
 .changeset/unlucky-icons-sit.md |  5 -----
 packages/svelte/CHANGELOG.md    | 12 ++++++++++++
 packages/svelte/package.json    |  2 +-
 packages/svelte/src/version.js  |  2 +-
 7 files changed, 14 insertions(+), 22 deletions(-)
 delete mode 100644 .changeset/bright-jokes-bow.md
 delete mode 100644 .changeset/kind-horses-lay.md
 delete mode 100644 .changeset/new-houses-roll.md
 delete mode 100644 .changeset/unlucky-icons-sit.md

diff --git a/.changeset/bright-jokes-bow.md b/.changeset/bright-jokes-bow.md
deleted file mode 100644
index f70076b869..0000000000
--- a/.changeset/bright-jokes-bow.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: correctly handle srcObject attribute on video elements
diff --git a/.changeset/kind-horses-lay.md b/.changeset/kind-horses-lay.md
deleted file mode 100644
index d08bdde6c4..0000000000
--- a/.changeset/kind-horses-lay.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-add `contentvisibilityautostatechange` event to element definitions
diff --git a/.changeset/new-houses-roll.md b/.changeset/new-houses-roll.md
deleted file mode 100644
index a2b8370e06..0000000000
--- a/.changeset/new-houses-roll.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: tighten up `export default` validation
diff --git a/.changeset/unlucky-icons-sit.md b/.changeset/unlucky-icons-sit.md
deleted file mode 100644
index 7fc14cf435..0000000000
--- a/.changeset/unlucky-icons-sit.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: include method definitions in class private fields
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index f01f519150..f5b581ab0e 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,17 @@
 # svelte
 
+## 5.2.5
+
+### Patch Changes
+
+- fix: correctly handle srcObject attribute on video elements ([#14369](https://github.com/sveltejs/svelte/pull/14369))
+
+- add `contentvisibilityautostatechange` event to element definitions ([#14373](https://github.com/sveltejs/svelte/pull/14373))
+
+- fix: tighten up `export default` validation ([#14368](https://github.com/sveltejs/svelte/pull/14368))
+
+- fix: include method definitions in class private fields ([#14365](https://github.com/sveltejs/svelte/pull/14365))
+
 ## 5.2.4
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index f6ba053398..2205990fff 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.2.4",
+  "version": "5.2.5",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 3a728f3d14..5014c88702 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.2.4';
+export const VERSION = '5.2.5';
 export const PUBLIC_VERSION = '5';

From 9d12fd1a01d7020855122a8bfb5a35a3dd4e1c8f Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Wed, 20 Nov 2024 17:46:53 +0000
Subject: [PATCH 087/159] chore: remove template expression inlining (#14374)

* chore: remove template expression inlining

* missed some

* fix

* feedback

* feedback

* Update packages/svelte/src/compiler/phases/3-transform/client/utils.js

Co-authored-by: Rich Harris <rich.harris@vercel.com>

* Update packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js

Co-authored-by: Rich Harris <rich.harris@vercel.com>

* Update packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js

Co-authored-by: Rich Harris <rich.harris@vercel.com>

* Update packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js

Co-authored-by: Rich Harris <rich.harris@vercel.com>

* Update packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js

Co-authored-by: Rich Harris <rich.harris@vercel.com>

* Update packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js

Co-authored-by: Rich Harris <rich.harris@vercel.com>

* fix

* Update .changeset/calm-mice-perform.md

Co-authored-by: Rich Harris <rich.harris@vercel.com>

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/calm-mice-perform.md               |  5 +
 .../phases/2-analyze/visitors/Attribute.js    |  9 +-
 .../2-analyze/visitors/CallExpression.js      |  2 -
 .../2-analyze/visitors/ExpressionTag.js       |  5 +
 .../phases/2-analyze/visitors/Identifier.js   | 17 +---
 .../2-analyze/visitors/MemberExpression.js    |  3 -
 .../2-analyze/visitors/RegularElement.js      | 10 +-
 .../visitors/TaggedTemplateExpression.js      |  1 -
 .../phases/3-transform/client/utils.js        | 10 +-
 .../3-transform/client/visitors/Fragment.js   | 10 +-
 .../client/visitors/RegularElement.js         | 72 ++++-----------
 .../client/visitors/shared/fragment.js        | 65 +++----------
 .../client/visitors/shared/utils.js           | 92 ++++++++-----------
 packages/svelte/src/compiler/phases/nodes.js  |  3 +-
 packages/svelte/src/compiler/types/index.d.ts |  2 -
 packages/svelte/src/internal/client/index.js  |  1 -
 .../samples/slot-non-identifier/output.svelte |  2 +-
 .../_expected/client/index.svelte.js          | 17 ----
 .../_expected/server/index.svelte.js          | 12 ---
 .../samples/inline-module-vars/index.svelte   | 20 ----
 20 files changed, 97 insertions(+), 261 deletions(-)
 create mode 100644 .changeset/calm-mice-perform.md
 delete mode 100644 packages/svelte/tests/snapshot/samples/inline-module-vars/_expected/client/index.svelte.js
 delete mode 100644 packages/svelte/tests/snapshot/samples/inline-module-vars/_expected/server/index.svelte.js
 delete mode 100644 packages/svelte/tests/snapshot/samples/inline-module-vars/index.svelte

diff --git a/.changeset/calm-mice-perform.md b/.changeset/calm-mice-perform.md
new file mode 100644
index 0000000000..f43c7fcf0e
--- /dev/null
+++ b/.changeset/calm-mice-perform.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: remove template expression inlining
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/Attribute.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/Attribute.js
index ca0ea55d1f..6c050d966a 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/Attribute.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/Attribute.js
@@ -1,7 +1,7 @@
 /** @import { ArrowFunctionExpression, Expression, FunctionDeclaration, FunctionExpression } from 'estree' */
 /** @import { AST, DelegatedEvent, SvelteNode } from '#compiler' */
 /** @import { Context } from '../types' */
-import { is_boolean_attribute, is_capture_event, is_delegated } from '../../../../utils.js';
+import { cannot_be_set_statically, is_capture_event, is_delegated } from '../../../../utils.js';
 import {
 	get_attribute_chunks,
 	get_attribute_expression,
@@ -30,12 +30,12 @@ export function Attribute(node, context) {
 		}
 	}
 
-	if (node.name.startsWith('on')) {
+	if (is_event_attribute(node)) {
 		mark_subtree_dynamic(context.path);
 	}
 
-	if (parent.type === 'RegularElement' && is_boolean_attribute(node.name.toLowerCase())) {
-		node.metadata.expression.can_inline = false;
+	if (cannot_be_set_statically(node.name)) {
+		mark_subtree_dynamic(context.path);
 	}
 
 	if (node.value !== true) {
@@ -51,7 +51,6 @@ export function Attribute(node, context) {
 
 			node.metadata.expression.has_state ||= chunk.metadata.expression.has_state;
 			node.metadata.expression.has_call ||= chunk.metadata.expression.has_call;
-			node.metadata.expression.can_inline &&= chunk.metadata.expression.can_inline;
 		}
 
 		if (is_event_attribute(node)) {
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js
index fe3f638a69..c7ade4856b 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js
@@ -179,8 +179,6 @@ export function CallExpression(node, context) {
 		if (!is_pure(node.callee, context) || context.state.expression.dependencies.size > 0) {
 			context.state.expression.has_call = true;
 			context.state.expression.has_state = true;
-			context.state.expression.can_inline = false;
-			mark_subtree_dynamic(context.path);
 		}
 	}
 }
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/ExpressionTag.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/ExpressionTag.js
index f59b7fc569..32c8d2ca36 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/ExpressionTag.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/ExpressionTag.js
@@ -2,6 +2,7 @@
 /** @import { Context } from '../types' */
 import { is_tag_valid_with_parent } from '../../../../html-tree-validation.js';
 import * as e from '../../../errors.js';
+import { mark_subtree_dynamic } from './shared/fragment.js';
 
 /**
  * @param {AST.ExpressionTag} node
@@ -14,5 +15,9 @@ export function ExpressionTag(node, context) {
 		}
 	}
 
+	// TODO ideally we wouldn't do this here, we'd just do it on encountering
+	// an `Identifier` within the tag. But we currently need to handle `{42}` etc
+	mark_subtree_dynamic(context.path);
+
 	context.next({ ...context.state, expression: node.metadata.expression });
 }
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js
index 042c467df1..79dccd5a7c 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js
@@ -1,4 +1,5 @@
 /** @import { Expression, Identifier } from 'estree' */
+/** @import { EachBlock } from '#compiler' */
 /** @import { Context } from '../types' */
 import is_reference from 'is-reference';
 import { should_proxy } from '../../3-transform/client/utils.js';
@@ -19,6 +20,8 @@ export function Identifier(node, context) {
 		return;
 	}
 
+	mark_subtree_dynamic(context.path);
+
 	// If we are using arguments outside of a function, then throw an error
 	if (
 		node.name === 'arguments' &&
@@ -84,12 +87,6 @@ export function Identifier(node, context) {
 		}
 	}
 
-	// no binding means global, and we can't inline e.g. `<span>{location}</span>`
-	// because it could change between component renders. if there _is_ a
-	// binding and it is outside module scope, the expression cannot
-	// be inlined (TODO allow inlining in more cases - e.g. primitive consts)
-	let can_inline = !!binding && !binding.scope.parent && binding.kind === 'normal';
-
 	if (binding) {
 		if (context.state.expression) {
 			context.state.expression.dependencies.add(binding);
@@ -125,12 +122,4 @@ export function Identifier(node, context) {
 			w.reactive_declaration_module_script_dependency(node);
 		}
 	}
-
-	if (!can_inline) {
-		if (context.state.expression) {
-			context.state.expression.can_inline = false;
-		}
-
-		mark_subtree_dynamic(context.path);
-	}
 }
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/MemberExpression.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/MemberExpression.js
index 88adecbd35..1cc20c96da 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/MemberExpression.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/MemberExpression.js
@@ -20,9 +20,6 @@ export function MemberExpression(node, context) {
 
 	if (context.state.expression && !is_pure(node, context)) {
 		context.state.expression.has_state = true;
-		context.state.expression.can_inline = false;
-
-		mark_subtree_dynamic(context.path);
 	}
 
 	if (!is_safe_identifier(node, context.state.scope)) {
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js
index d5964f9ae1..7d1c4aaeaa 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js
@@ -1,6 +1,6 @@
 /** @import { AST } from '#compiler' */
 /** @import { Context } from '../types' */
-import { cannot_be_set_statically, is_mathml, is_svg, is_void } from '../../../../utils.js';
+import { is_mathml, is_svg, is_void } from '../../../../utils.js';
 import {
 	is_tag_valid_with_ancestor,
 	is_tag_valid_with_parent
@@ -75,14 +75,6 @@ export function RegularElement(node, context) {
 		node.attributes.push(create_attribute('value', child.start, child.end, [child]));
 	}
 
-	if (
-		node.attributes.some(
-			(attribute) => attribute.type === 'Attribute' && cannot_be_set_statically(attribute.name)
-		)
-	) {
-		mark_subtree_dynamic(context.path);
-	}
-
 	const binding = context.state.scope.get(node.name);
 	if (
 		binding !== null &&
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/TaggedTemplateExpression.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/TaggedTemplateExpression.js
index 724b9af311..eacb8a342a 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/TaggedTemplateExpression.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/TaggedTemplateExpression.js
@@ -10,7 +10,6 @@ export function TaggedTemplateExpression(node, context) {
 	if (context.state.expression && !is_pure(node.tag, context)) {
 		context.state.expression.has_call = true;
 		context.state.expression.has_state = true;
-		context.state.expression.can_inline = false;
 	}
 
 	if (node.tag.type === 'Identifier') {
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/utils.js b/packages/svelte/src/compiler/phases/3-transform/client/utils.js
index 910f173f79..0b49d18ee9 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/utils.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/utils.js
@@ -3,16 +3,16 @@
 /** @import { ClientTransformState, ComponentClientTransformState, ComponentContext } from './types.js' */
 /** @import { Analysis } from '../../types.js' */
 /** @import { Scope } from '../../scope.js' */
+import * as b from '../../../utils/builders.js';
+import { extract_identifiers, is_simple_expression } from '../../../utils/ast.js';
 import {
-	PROPS_IS_BINDABLE,
-	PROPS_IS_IMMUTABLE,
 	PROPS_IS_LAZY_INITIAL,
+	PROPS_IS_IMMUTABLE,
 	PROPS_IS_RUNES,
-	PROPS_IS_UPDATED
+	PROPS_IS_UPDATED,
+	PROPS_IS_BINDABLE
 } from '../../../../constants.js';
 import { dev } from '../../../state.js';
-import { extract_identifiers, is_simple_expression } from '../../../utils/ast.js';
-import * as b from '../../../utils/builders.js';
 import { get_value } from './visitors/shared/declarations.js';
 
 /**
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/Fragment.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/Fragment.js
index 111516ce0a..0e6ea29614 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/Fragment.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/Fragment.js
@@ -141,14 +141,14 @@ export function Fragment(node, context) {
 		const id = b.id(context.state.scope.generate('fragment'));
 
 		const use_space_template =
-			trimmed.every((node) => node.type === 'Text' || node.type === 'ExpressionTag') &&
-			trimmed.some((node) => node.type === 'ExpressionTag' && !node.metadata.expression.can_inline);
+			trimmed.some((node) => node.type === 'ExpressionTag') &&
+			trimmed.every((node) => node.type === 'Text' || node.type === 'ExpressionTag');
 
 		if (use_space_template) {
 			// special case — we can use `$.text` instead of creating a unique template
 			const id = b.id(context.state.scope.generate('text'));
 
-			process_children(trimmed, () => id, null, {
+			process_children(trimmed, () => id, false, {
 				...context,
 				state
 			});
@@ -158,12 +158,12 @@ export function Fragment(node, context) {
 		} else {
 			if (is_standalone) {
 				// no need to create a template, we can just use the existing block's anchor
-				process_children(trimmed, () => b.id('$$anchor'), null, { ...context, state });
+				process_children(trimmed, () => b.id('$$anchor'), false, { ...context, state });
 			} else {
 				/** @type {(is_text: boolean) => Expression} */
 				const expression = (is_text) => b.call('$.first_child', id, is_text && b.true);
 
-				process_children(trimmed, expression, null, { ...context, state });
+				process_children(trimmed, expression, false, { ...context, state });
 
 				let flags = TEMPLATE_FRAGMENT;
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
index 19948464d2..85df92e8bf 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
@@ -1,9 +1,8 @@
-/** @import { Expression, ExpressionStatement, Identifier, Literal, MemberExpression, ObjectExpression, Statement } from 'estree' */
+/** @import { Expression, ExpressionStatement, Identifier, MemberExpression, ObjectExpression, Statement } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { SourceLocation } from '#shared' */
 /** @import { ComponentClientTransformState, ComponentContext } from '../types' */
 /** @import { Scope } from '../../../scope' */
-import { escape_html } from '../../../../../escaping.js';
 import {
 	cannot_be_set_statically,
 	is_boolean_attribute,
@@ -11,6 +10,7 @@ import {
 	is_load_error_element,
 	is_void
 } from '../../../../../utils.js';
+import { escape_html } from '../../../../../escaping.js';
 import { dev, is_ignored, locator } from '../../../../state.js';
 import { is_event_attribute, is_text_attribute } from '../../../../utils/ast.js';
 import * as b from '../../../../utils/builders.js';
@@ -18,13 +18,12 @@ import { is_custom_element_node } from '../../../nodes.js';
 import { clean_nodes, determine_namespace_for_children } from '../../utils.js';
 import { build_getter, create_derived } from '../utils.js';
 import {
+	get_attribute_name,
 	build_attribute_value,
 	build_class_directives,
-	build_set_attributes,
 	build_style_directives,
-	get_attribute_name
+	build_set_attributes
 } from './shared/element.js';
-import { visit_event_attribute } from './shared/events.js';
 import { process_children } from './shared/fragment.js';
 import {
 	build_render_statement,
@@ -32,6 +31,7 @@ import {
 	build_update,
 	build_update_assignment
 } from './shared/utils.js';
+import { visit_event_attribute } from './shared/events.js';
 
 /**
  * @param {AST.RegularElement} node
@@ -352,32 +352,30 @@ export function RegularElement(node, context) {
 
 	// special case — if an element that only contains text, we don't need
 	// to descend into it if the text is non-reactive
-	const is_text = trimmed.every((node) => node.type === 'Text' || node.type === 'ExpressionTag');
-
 	// in the rare case that we have static text that can't be inlined
 	// (e.g. `<span>{location}</span>`), set `textContent` programmatically
 	const use_text_content =
-		is_text &&
+		trimmed.every((node) => node.type === 'Text' || node.type === 'ExpressionTag') &&
 		trimmed.every((node) => node.type === 'Text' || !node.metadata.expression.has_state) &&
-		trimmed.some((node) => node.type === 'ExpressionTag' && !node.metadata.expression.can_inline);
+		trimmed.some((node) => node.type === 'ExpressionTag');
 
 	if (use_text_content) {
-		let { value } = build_template_chunk(trimmed, context.visit, child_state);
-
 		child_state.init.push(
-			b.stmt(b.assignment('=', b.member(context.state.node, 'textContent'), value))
+			b.stmt(
+				b.assignment(
+					'=',
+					b.member(context.state.node, 'textContent'),
+					build_template_chunk(trimmed, context.visit, child_state).value
+				)
+			)
 		);
 	} else {
 		/** @type {Expression} */
 		let arg = context.state.node;
 
 		// If `hydrate_node` is set inside the element, we need to reset it
-		// after the element has been hydrated (we don't need to reset if it's been inlined)
-		let needs_reset = !trimmed.every(
-			(node) =>
-				node.type === 'Text' ||
-				(node.type === 'ExpressionTag' && node.metadata.expression.can_inline)
-		);
+		// after the element has been hydrated
+		let needs_reset = trimmed.some((node) => node.type !== 'Text');
 
 		// The same applies if it's a `<template>` element, since we need to
 		// set the value of `hydrate_node` to `node.content`
@@ -387,7 +385,7 @@ export function RegularElement(node, context) {
 			arg = b.member(arg, 'content');
 		}
 
-		process_children(trimmed, (is_text) => b.call('$.child', arg, is_text && b.true), node, {
+		process_children(trimmed, (is_text) => b.call('$.child', arg, is_text && b.true), true, {
 			...context,
 			state: child_state
 		});
@@ -587,44 +585,10 @@ function build_element_attribute_update_assignment(element, node_id, attribute,
 			state.update.push(update);
 		}
 		return true;
-	}
-
-	// we need to special case textarea value because it's not an actual attribute
-	const can_inline =
-		(attribute.name !== 'value' || element.name !== 'textarea') &&
-		attribute.metadata.expression.can_inline;
-
-	if (can_inline) {
-		/** @type {Literal | undefined} */
-		let literal = undefined;
-
-		if (value.type === 'Literal') {
-			literal = value;
-		} else if (value.type === 'Identifier') {
-			const binding = context.state.scope.get(value.name);
-			if (binding && binding.initial?.type === 'Literal' && !binding.reassigned) {
-				literal = binding.initial;
-			}
-		}
-
-		if (literal && escape_html(literal.value, true) === String(literal.value)) {
-			if (is_boolean_attribute(name)) {
-				if (literal.value) {
-					context.state.template.push(` ${name}`);
-				}
-			} else {
-				context.state.template.push(` ${name}="`, value, '"');
-			}
-		} else {
-			context.state.template.push(
-				b.call('$.attr', b.literal(name), value, is_boolean_attribute(name) && b.true)
-			);
-		}
 	} else {
 		state.init.push(update);
+		return false;
 	}
-
-	return false;
 }
 
 /**
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js
index 102988781a..af336733bc 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js
@@ -1,10 +1,8 @@
 /** @import { Expression } from 'estree' */
 /** @import { AST, SvelteNode } from '#compiler' */
-/** @import { Scope } from '../../../../scope.js' */
 /** @import { ComponentContext } from '../../types' */
-import { escape_html } from '../../../../../../escaping.js';
 import { cannot_be_set_statically } from '../../../../../../utils.js';
-import { is_event_attribute } from '../../../../../utils/ast.js';
+import { is_event_attribute, is_text_attribute } from '../../../../../utils/ast.js';
 import * as b from '../../../../../utils/builders.js';
 import { build_template_chunk, build_update } from './utils.js';
 
@@ -14,10 +12,10 @@ import { build_template_chunk, build_update } from './utils.js';
  * corresponding template node references these updates are applied to.
  * @param {SvelteNode[]} nodes
  * @param {(is_text: boolean) => Expression} initial
- * @param {AST.RegularElement | null} element
+ * @param {boolean} is_element
  * @param {ComponentContext} context
  */
-export function process_children(nodes, initial, element, { visit, state }) {
+export function process_children(nodes, initial, is_element, { visit, state }) {
 	const within_bound_contenteditable = state.metadata.bound_contenteditable;
 	let prev = initial;
 	let skipped = 0;
@@ -63,17 +61,16 @@ export function process_children(nodes, initial, element, { visit, state }) {
 	 * @param {Sequence} sequence
 	 */
 	function flush_sequence(sequence) {
-		const { has_state, has_call, value, can_inline } = build_template_chunk(sequence, visit, state);
-
-		if (can_inline) {
+		if (sequence.every((node) => node.type === 'Text')) {
 			skipped += 1;
-			const raw = element?.name === 'script' || element?.name === 'style';
-			state.template.push(raw ? value : escape_inline_expression(value, state.scope));
+			state.template.push(sequence.map((node) => node.raw).join(''));
 			return;
 		}
 
 		state.template.push(' ');
 
+		const { has_state, has_call, value } = build_template_chunk(sequence, visit, state);
+
 		// if this is a standalone `{expression}`, make sure we handle the case where
 		// no text node was created because the expression was empty during SSR
 		const is_text = sequence.length === 1;
@@ -101,9 +98,9 @@ export function process_children(nodes, initial, element, { visit, state }) {
 
 			let child_state = state;
 
-			if (is_static_element(node)) {
+			if (is_static_element(node, state)) {
 				skipped += 1;
-			} else if (node.type === 'EachBlock' && nodes.length === 1 && element) {
+			} else if (node.type === 'EachBlock' && nodes.length === 1 && is_element) {
 				node.metadata.is_controlled = true;
 			} else {
 				const id = flush_node(false, node.type === 'RegularElement' ? node.name : 'node');
@@ -128,8 +125,9 @@ export function process_children(nodes, initial, element, { visit, state }) {
 
 /**
  * @param {SvelteNode} node
+ * @param {ComponentContext["state"]} state
  */
-function is_static_element(node) {
+function is_static_element(node, state) {
 	if (node.type !== 'RegularElement') return false;
 	if (node.fragment.metadata.dynamic) return false;
 	if (node.name.includes('-')) return false; // we're setting all attributes on custom elements through properties
@@ -156,49 +154,10 @@ function is_static_element(node) {
 			return false;
 		}
 
-		if (!attribute.metadata.expression.can_inline) {
+		if (attribute.value !== true && !is_text_attribute(attribute)) {
 			return false;
 		}
 	}
 
 	return true;
 }
-
-/**
- * @param {Expression} node
- * @param {Scope} scope
- * @returns {Expression}
- */
-function escape_inline_expression(node, scope) {
-	if (node.type === 'Literal') {
-		if (typeof node.value === 'string') {
-			return b.literal(escape_html(node.value));
-		}
-
-		return node;
-	}
-
-	if (node.type === 'TemplateLiteral') {
-		return b.template(
-			node.quasis.map((q) => b.quasi(escape_html(q.value.cooked))),
-			node.expressions.map((expression) => escape_inline_expression(expression, scope))
-		);
-	}
-
-	/**
-	 * If we can't determine the range of possible values statically, wrap in
-	 * `$.escape(...)`. TODO expand this to cover more cases
-	 */
-	let needs_escape = true;
-
-	if (node.type === 'Identifier') {
-		const binding = scope.get(node.name);
-
-		// TODO handle more cases
-		if (binding?.initial?.type === 'Literal' && !binding.reassigned) {
-			needs_escape = escape_html(binding.initial.value) !== String(binding.initial.value);
-		}
-	}
-
-	return needs_escape ? b.call('$.escape', node) : node;
-}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js
index b74d2cc9c0..59beacbb0c 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js
@@ -1,4 +1,4 @@
-/** @import { Expression, ExpressionStatement, Identifier, MemberExpression, Statement, Super, TemplateLiteral, Node } from 'estree' */
+/** @import { Expression, ExpressionStatement, Identifier, MemberExpression, Statement, Super } from 'estree' */
 /** @import { AST, SvelteNode } from '#compiler' */
 /** @import { ComponentClientTransformState } from '../../types' */
 import { walk } from 'zimmerframe';
@@ -14,7 +14,7 @@ import { locator } from '../../../../../state.js';
  * @param {Array<AST.Text | AST.ExpressionTag>} values
  * @param {(node: SvelteNode, state: any) => any} visit
  * @param {ComponentClientTransformState} state
- * @returns {{ value: Expression, has_state: boolean, has_call: boolean, can_inline: boolean }}
+ * @returns {{ value: Expression, has_state: boolean, has_call: boolean }}
  */
 export function build_template_chunk(values, visit, state) {
 	/** @type {Expression[]} */
@@ -25,23 +25,15 @@ export function build_template_chunk(values, visit, state) {
 
 	let has_call = false;
 	let has_state = false;
-	let can_inline = true;
 	let contains_multiple_call_expression = false;
 
 	for (const node of values) {
 		if (node.type === 'ExpressionTag') {
-			if (node.metadata.expression.has_call) {
-				if (has_call) contains_multiple_call_expression = true;
-				has_call = true;
-			}
-
-			if (node.metadata.expression.has_state) {
-				has_state = true;
-			}
+			const metadata = node.metadata.expression;
 
-			if (!node.metadata.expression.can_inline) {
-				can_inline = false;
-			}
+			contains_multiple_call_expression ||= has_call && metadata.has_call;
+			has_call ||= metadata.has_call;
+			has_state ||= metadata.has_state;
 		}
 	}
 
@@ -50,49 +42,39 @@ export function build_template_chunk(values, visit, state) {
 
 		if (node.type === 'Text') {
 			quasi.value.cooked += node.data;
+		} else if (node.type === 'ExpressionTag' && node.expression.type === 'Literal') {
+			if (node.expression.value != null) {
+				quasi.value.cooked += node.expression.value + '';
+			}
 		} else {
-			const expression = /** @type {Expression} */ (visit(node.expression, state));
-
-			if (expression.type === 'Literal') {
-				if (expression.value != null) {
-					quasi.value.cooked += expression.value + '';
-				}
+			if (contains_multiple_call_expression) {
+				const id = b.id(state.scope.generate('stringified_text'));
+				state.init.push(
+					b.const(
+						id,
+						create_derived(
+							state,
+							b.thunk(
+								b.logical(
+									'??',
+									/** @type {Expression} */ (visit(node.expression, state)),
+									b.literal('')
+								)
+							)
+						)
+					)
+				);
+				expressions.push(b.call('$.get', id));
+			} else if (values.length === 1) {
+				// If we have a single expression, then pass that in directly to possibly avoid doing
+				// extra work in the template_effect (instead we do the work in set_text).
+				return { value: visit(node.expression, state), has_state, has_call };
 			} else {
-				let value = expression;
-
-				// if we don't know the value, we need to add `?? ''` to replace
-				// `null` and `undefined` with the empty string
-				let needs_fallback = true;
-
-				if (value.type === 'Identifier') {
-					const binding = state.scope.get(value.name);
-
-					if (binding && binding.initial?.type === 'Literal' && !binding.reassigned) {
-						needs_fallback = binding.initial.value === null;
-					}
-				}
-
-				if (needs_fallback) {
-					value = b.logical('??', expression, b.literal(''));
-				}
-
-				if (contains_multiple_call_expression) {
-					const id = b.id(state.scope.generate('stringified_text'));
-
-					state.init.push(b.const(id, create_derived(state, b.thunk(value))));
-
-					expressions.push(b.call('$.get', id));
-				} else if (values.length === 1) {
-					// If we have a single expression, then pass that in directly to possibly avoid doing
-					// extra work in the template_effect (instead we do the work in set_text).
-					return { value: visit(node.expression, state), has_state, has_call, can_inline };
-				} else {
-					expressions.push(value);
-				}
-
-				quasi = b.quasi('', i + 1 === values.length);
-				quasis.push(quasi);
+				expressions.push(b.logical('??', visit(node.expression, state), b.literal('')));
 			}
+
+			quasi = b.quasi('', i + 1 === values.length);
+			quasis.push(quasi);
 		}
 	}
 
@@ -102,7 +84,7 @@ export function build_template_chunk(values, visit, state) {
 
 	const value = b.template(quasis, expressions);
 
-	return { value, has_state, has_call, can_inline };
+	return { value, has_state, has_call };
 }
 
 /**
diff --git a/packages/svelte/src/compiler/phases/nodes.js b/packages/svelte/src/compiler/phases/nodes.js
index 13a54730eb..ead525aaa1 100644
--- a/packages/svelte/src/compiler/phases/nodes.js
+++ b/packages/svelte/src/compiler/phases/nodes.js
@@ -58,7 +58,6 @@ export function create_expression_metadata() {
 	return {
 		dependencies: new Set(),
 		has_state: false,
-		has_call: false,
-		can_inline: true
+		has_call: false
 	};
 }
diff --git a/packages/svelte/src/compiler/types/index.d.ts b/packages/svelte/src/compiler/types/index.d.ts
index bd4749db00..8a45f2d4fd 100644
--- a/packages/svelte/src/compiler/types/index.d.ts
+++ b/packages/svelte/src/compiler/types/index.d.ts
@@ -317,8 +317,6 @@ export interface ExpressionMetadata {
 	has_state: boolean;
 	/** True if the expression involves a call expression (often, it will need to be wrapped in a derived) */
 	has_call: boolean;
-	/** True if the expression can be inlined into a template */
-	can_inline: boolean;
 }
 
 export * from './template.js';
diff --git a/packages/svelte/src/internal/client/index.js b/packages/svelte/src/internal/client/index.js
index bfc0a6aac9..6fd749b42c 100644
--- a/packages/svelte/src/internal/client/index.js
+++ b/packages/svelte/src/internal/client/index.js
@@ -1,5 +1,4 @@
 export { FILENAME, HMR, NAMESPACE_SVG } from '../../constants.js';
-export { escape_html as escape } from '../../escaping.js';
 export { cleanup_styles } from './dev/css.js';
 export { add_locations } from './dev/elements.js';
 export { hmr } from './dev/hmr.js';
diff --git a/packages/svelte/tests/migrate/samples/slot-non-identifier/output.svelte b/packages/svelte/tests/migrate/samples/slot-non-identifier/output.svelte
index fb262e8c25..b9a3248012 100644
--- a/packages/svelte/tests/migrate/samples/slot-non-identifier/output.svelte
+++ b/packages/svelte/tests/migrate/samples/slot-non-identifier/output.svelte
@@ -82,4 +82,4 @@
 	<svelte:fragment let:should_stay slot="cool stuff">
 		cool
 	</svelte:fragment>
-</Comp>
+</Comp>
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/inline-module-vars/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/inline-module-vars/_expected/client/index.svelte.js
deleted file mode 100644
index 4622624424..0000000000
--- a/packages/svelte/tests/snapshot/samples/inline-module-vars/_expected/client/index.svelte.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import "svelte/internal/disclose-version";
-import * as $ from "svelte/internal/client";
-
-const __DECLARED_ASSET_0__ = "__VITE_ASSET__2AM7_y_a__ 1440w, __VITE_ASSET__2AM7_y_b__ 960w";
-const __DECLARED_ASSET_1__ = "__VITE_ASSET__2AM7_y_c__ 1440w, __VITE_ASSET__2AM7_y_d__ 960w";
-const __DECLARED_ASSET_2__ = "__VITE_ASSET__2AM7_y_e__ 1440w, __VITE_ASSET__2AM7_y_f__ 960w";
-const __DECLARED_ASSET_3__ = "__VITE_ASSET__2AM7_y_g__";
-const a = 1;
-const b = 2;
-var root = $.template(`<picture><source srcset="${__DECLARED_ASSET_0__}" type="image/avif"> <source srcset="${__DECLARED_ASSET_1__}" type="image/webp"> <source srcset="${__DECLARED_ASSET_2__}" type="image/png"> <img src="${__DECLARED_ASSET_3__}" alt="production test" width="1440" height="1440"></picture> <p>${a} + ${b} = ${$.escape(a + b ?? "")}</p>`, 1);
-
-export default function Inline_module_vars($$anchor) {
-	var fragment = root();
-
-	$.next(2);
-	$.append($$anchor, fragment);
-}
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/inline-module-vars/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/inline-module-vars/_expected/server/index.svelte.js
deleted file mode 100644
index ca98cd952b..0000000000
--- a/packages/svelte/tests/snapshot/samples/inline-module-vars/_expected/server/index.svelte.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import * as $ from "svelte/internal/server";
-
-const __DECLARED_ASSET_0__ = "__VITE_ASSET__2AM7_y_a__ 1440w, __VITE_ASSET__2AM7_y_b__ 960w";
-const __DECLARED_ASSET_1__ = "__VITE_ASSET__2AM7_y_c__ 1440w, __VITE_ASSET__2AM7_y_d__ 960w";
-const __DECLARED_ASSET_2__ = "__VITE_ASSET__2AM7_y_e__ 1440w, __VITE_ASSET__2AM7_y_f__ 960w";
-const __DECLARED_ASSET_3__ = "__VITE_ASSET__2AM7_y_g__";
-const a = 1;
-const b = 2;
-
-export default function Inline_module_vars($$payload) {
-	$$payload.out += `<picture><source${$.attr("srcset", __DECLARED_ASSET_0__)} type="image/avif"> <source${$.attr("srcset", __DECLARED_ASSET_1__)} type="image/webp"> <source${$.attr("srcset", __DECLARED_ASSET_2__)} type="image/png"> <img${$.attr("src", __DECLARED_ASSET_3__)} alt="production test"${$.attr("width", 1440)}${$.attr("height", 1440)}></picture> <p>${$.escape(a)} + ${$.escape(b)} = ${$.escape(a + b)}</p>`;
-}
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/inline-module-vars/index.svelte b/packages/svelte/tests/snapshot/samples/inline-module-vars/index.svelte
deleted file mode 100644
index a7b737e596..0000000000
--- a/packages/svelte/tests/snapshot/samples/inline-module-vars/index.svelte
+++ /dev/null
@@ -1,20 +0,0 @@
-<svelte:options runes={true} />
-
-<script module>
-	const __DECLARED_ASSET_0__ = "__VITE_ASSET__2AM7_y_a__ 1440w, __VITE_ASSET__2AM7_y_b__ 960w";
-	const __DECLARED_ASSET_1__ = "__VITE_ASSET__2AM7_y_c__ 1440w, __VITE_ASSET__2AM7_y_d__ 960w";
-	const __DECLARED_ASSET_2__ = "__VITE_ASSET__2AM7_y_e__ 1440w, __VITE_ASSET__2AM7_y_f__ 960w";
-	const __DECLARED_ASSET_3__ = "__VITE_ASSET__2AM7_y_g__";
-
-	const a = 1;
-	const b = 2;
-</script>
-
-<picture>
-	<source srcset={__DECLARED_ASSET_0__} type="image/avif" />
-	<source srcset={__DECLARED_ASSET_1__} type="image/webp" />
-	<source srcset={__DECLARED_ASSET_2__} type="image/png" />
-	<img src={__DECLARED_ASSET_3__} alt="production test" width={1440} height={1440} />
-</picture>
-
-<p>{a} + {b} = {a + b}</p>

From 85ec6fa276e1cf3202ccadf751b7c3c387debb75 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Wed, 20 Nov 2024 19:54:56 +0000
Subject: [PATCH 088/159] Version Packages (#14377)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/calm-mice-perform.md | 5 -----
 packages/svelte/CHANGELOG.md    | 6 ++++++
 packages/svelte/package.json    | 2 +-
 packages/svelte/src/version.js  | 2 +-
 4 files changed, 8 insertions(+), 7 deletions(-)
 delete mode 100644 .changeset/calm-mice-perform.md

diff --git a/.changeset/calm-mice-perform.md b/.changeset/calm-mice-perform.md
deleted file mode 100644
index f43c7fcf0e..0000000000
--- a/.changeset/calm-mice-perform.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: remove template expression inlining
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index f5b581ab0e..b69c0dd3e5 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,11 @@
 # svelte
 
+## 5.2.6
+
+### Patch Changes
+
+- fix: remove template expression inlining ([#14374](https://github.com/sveltejs/svelte/pull/14374))
+
 ## 5.2.5
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 2205990fff..9c11b4cdd9 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.2.5",
+  "version": "5.2.6",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 5014c88702..1db41e6c21 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.2.5';
+export const VERSION = '5.2.6';
 export const PUBLIC_VERSION = '5';

From 520055cf5c6635e44aa2cb04fdabc6ecb776d527 Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Wed, 20 Nov 2024 21:03:05 +0100
Subject: [PATCH 089/159] fix: always use set for private identifiers (#14378)

* fix: always use set for private identifiers

* we can simplify this further - no need to check the value was transformed, since the outcome of not returning immediately is the same but with extra steps

* add explanatory note

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/tiny-trainers-sleep.md             |  5 +++
 .../client/visitors/AssignmentExpression.js   | 41 ++++++++-----------
 .../private-identifiers-not-this/_config.js   | 17 ++++++++
 .../private-identifiers-not-this/main.svelte  | 26 ++++++++++++
 4 files changed, 66 insertions(+), 23 deletions(-)
 create mode 100644 .changeset/tiny-trainers-sleep.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/private-identifiers-not-this/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/private-identifiers-not-this/main.svelte

diff --git a/.changeset/tiny-trainers-sleep.md b/.changeset/tiny-trainers-sleep.md
new file mode 100644
index 0000000000..4cb0b05e66
--- /dev/null
+++ b/.changeset/tiny-trainers-sleep.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: always use set for private identifiers
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/AssignmentExpression.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/AssignmentExpression.js
index cf54dba1b3..ee909ede91 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/AssignmentExpression.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/AssignmentExpression.js
@@ -32,31 +32,26 @@ function build_assignment(operator, left, right, context) {
 	if (
 		context.state.analysis.runes &&
 		left.type === 'MemberExpression' &&
-		left.object.type === 'ThisExpression'
+		left.property.type === 'PrivateIdentifier'
 	) {
-		if (left.property.type === 'PrivateIdentifier') {
-			const private_state = context.state.private_state.get(left.property.name);
-
-			if (private_state !== undefined) {
-				let transformed = false;
-				let value = /** @type {Expression} */ (
-					context.visit(build_assignment_value(operator, left, right))
-				);
-
-				if (should_proxy(value, context.state.scope)) {
-					transformed = true;
-					value =
-						private_state.kind === 'raw_state'
-							? value
-							: build_proxy_reassignment(value, b.member(b.this, private_state.id));
-				}
-
-				if (!context.state.in_constructor) {
-					return b.call('$.set', left, value);
-				} else if (transformed) {
-					return b.assignment(operator, /** @type {Pattern} */ (context.visit(left)), value);
-				}
+		const private_state = context.state.private_state.get(left.property.name);
+
+		if (private_state !== undefined) {
+			let value = /** @type {Expression} */ (
+				context.visit(build_assignment_value(operator, left, right))
+			);
+
+			if (private_state.kind !== 'raw_state' && should_proxy(value, context.state.scope)) {
+				value = build_proxy_reassignment(value, b.member(b.this, private_state.id));
 			}
+
+			if (context.state.in_constructor) {
+				// inside the constructor, we can assign to `this.#foo.v` rather than using `$.set`,
+				// since nothing is tracking the signal at this point
+				return b.assignment(operator, /** @type {Pattern} */ (context.visit(left)), value);
+			}
+
+			return b.call('$.set', left, value);
 		}
 	}
 
diff --git a/packages/svelte/tests/runtime-runes/samples/private-identifiers-not-this/_config.js b/packages/svelte/tests/runtime-runes/samples/private-identifiers-not-this/_config.js
new file mode 100644
index 0000000000..0294b930c2
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/private-identifiers-not-this/_config.js
@@ -0,0 +1,17 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `<p>42</p><p>1337</p><button></button>`,
+	async test({ assert, target, instance }) {
+		const [a, b] = target.querySelectorAll('p');
+		const btn = target.querySelector('button');
+
+		flushSync(() => {
+			btn?.click();
+		});
+
+		assert.equal(a.textContent, '1337');
+		assert.equal(b.textContent, '42');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/private-identifiers-not-this/main.svelte b/packages/svelte/tests/runtime-runes/samples/private-identifiers-not-this/main.svelte
new file mode 100644
index 0000000000..384795f60d
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/private-identifiers-not-this/main.svelte
@@ -0,0 +1,26 @@
+<script>
+	class Box {
+		#value = $state(0);
+
+		get value(){
+			return this.#value;
+		}
+		
+		constructor(num){
+			this.#value = num;
+		}
+		
+		swap(other) {
+			const value = this.#value;
+			this.#value = other.value;
+			other.#value = value;
+		}
+	}
+
+	const a = new Box(42);
+	const b = new Box(1337);
+</script>
+
+<p>{a.value}</p>
+<p>{b.value}</p>
+<button onclick={()=>{a.swap(b)}}></button>
\ No newline at end of file

From 97185eb3d5e839d6da70edd3e1ebb97396c6197f Mon Sep 17 00:00:00 2001
From: Rob B <2623102+rob-balfre@users.noreply.github.com>
Date: Thu, 21 Nov 2024 09:14:21 +1100
Subject: [PATCH 090/159] docs Update 03-typescript.md (#14382)

* Update 03-typescript.md

Fix TS error: Cannot invoke an object which is possibly 'undefined'.

* Update 03-typescript.md

---------

Co-authored-by: Rich Harris <hello@rich-harris.dev>
---
 documentation/docs/07-misc/03-typescript.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/documentation/docs/07-misc/03-typescript.md b/documentation/docs/07-misc/03-typescript.md
index e02ac7b6b1..f4513a9a2d 100644
--- a/documentation/docs/07-misc/03-typescript.md
+++ b/documentation/docs/07-misc/03-typescript.md
@@ -142,7 +142,7 @@ In case you're writing a component that wraps a native element, you may want to
 </script>
 
 <button {...rest}>
-	{@render children()}
+	{@render children?.()}
 </button>
 ```
 
@@ -156,7 +156,7 @@ Not all elements have a dedicated type definition. For those without one, use `S
 </script>
 
 <div {...rest}>
-	{@render children()}
+	{@render children?.()}
 </div>
 ```
 

From 6e391fce59c5c79cd42b0b214a54143e05e01db3 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Wed, 20 Nov 2024 17:14:43 -0500
Subject: [PATCH 091/159] Version Packages (#14380)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/tiny-trainers-sleep.md | 5 -----
 packages/svelte/CHANGELOG.md      | 6 ++++++
 packages/svelte/package.json      | 2 +-
 packages/svelte/src/version.js    | 2 +-
 4 files changed, 8 insertions(+), 7 deletions(-)
 delete mode 100644 .changeset/tiny-trainers-sleep.md

diff --git a/.changeset/tiny-trainers-sleep.md b/.changeset/tiny-trainers-sleep.md
deleted file mode 100644
index 4cb0b05e66..0000000000
--- a/.changeset/tiny-trainers-sleep.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: always use set for private identifiers
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index b69c0dd3e5..47b620b402 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,11 @@
 # svelte
 
+## 5.2.7
+
+### Patch Changes
+
+- fix: always use set for private identifiers ([#14378](https://github.com/sveltejs/svelte/pull/14378))
+
 ## 5.2.6
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 9c11b4cdd9..130fe64ba0 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.2.6",
+  "version": "5.2.7",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 1db41e6c21..3cd065be8e 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.2.6';
+export const VERSION = '5.2.7';
 export const PUBLIC_VERSION = '5';

From 6a5f30b290dbce34afdd1f5d743044e904d024a6 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Thu, 21 Nov 2024 13:48:36 +0100
Subject: [PATCH 092/159] chore: add changeset checkbox to PR template (#14388)

too many people forget it
---
 .github/PULL_REQUEST_TEMPLATE.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index 6d1fead587..aa5f9732b6 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -4,6 +4,7 @@
 - [ ] Prefix your PR title with `feat:`, `fix:`, `chore:`, or `docs:`.
 - [ ] This message body should clearly illustrate what problems it solves.
 - [ ] Ideally, include a test that fails without this PR but passes with it.
+- [ ] If this PR changes code within `packages/svelte/src`, add a changeset (`npx changeset`).
 
 ### Tests and linting
 

From dd9abea2a1059cbead398c5578bfd07a3c3ddd69 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Thu, 21 Nov 2024 16:40:10 +0000
Subject: [PATCH 093/159] fix: ensure spread attribute events are attached
 synchronously (#14387)

* fix: ensure spread attribute events are attached synchronously

* fix: ensure spread attribute events are attached synchronously

* Update .changeset/rich-worms-burn.md

Co-authored-by: Rich Harris <rich.harris@vercel.com>

* simplify

---------

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/rich-worms-burn.md                 |  5 ++++
 .../client/dom/elements/attributes.js         | 27 ++-----------------
 .../samples/event-spread-timing/_config.js    |  7 +++++
 .../samples/event-spread-timing/main.svelte   |  7 +++++
 4 files changed, 21 insertions(+), 25 deletions(-)
 create mode 100644 .changeset/rich-worms-burn.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/event-spread-timing/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/event-spread-timing/main.svelte

diff --git a/.changeset/rich-worms-burn.md b/.changeset/rich-worms-burn.md
new file mode 100644
index 0000000000..8ec3af516a
--- /dev/null
+++ b/.changeset/rich-worms-burn.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: attach spread attribute events synchronously
diff --git a/packages/svelte/src/internal/client/dom/elements/attributes.js b/packages/svelte/src/internal/client/dom/elements/attributes.js
index 545cab20f8..d927af543f 100644
--- a/packages/svelte/src/internal/client/dom/elements/attributes.js
+++ b/packages/svelte/src/internal/client/dom/elements/attributes.js
@@ -5,7 +5,7 @@ import { create_event, delegate } from './events.js';
 import { add_form_reset_listener, autofocus } from './misc.js';
 import * as w from '../../warnings.js';
 import { LOADING_ATTR_SYMBOL } from '../../constants.js';
-import { queue_idle_task, queue_micro_task } from '../task.js';
+import { queue_idle_task } from '../task.js';
 import { is_capture_event, is_delegated, normalize_attribute } from '../../../../utils.js';
 import {
 	active_effect,
@@ -209,8 +209,6 @@ export function set_attributes(
 
 	// @ts-expect-error
 	var attributes = /** @type {Record<string, unknown>} **/ (element.__attributes ??= {});
-	/** @type {Array<[string, any, () => void]>} */
-	var events = [];
 
 	// since key is captured we use const
 	for (const key in next) {
@@ -277,15 +275,7 @@ export function set_attributes(
 						current[key].call(this, evt);
 					}
 
-					if (!prev) {
-						events.push([
-							key,
-							value,
-							() => (current[event_handle_key] = create_event(event_name, element, handle, opts))
-						]);
-					} else {
-						current[event_handle_key] = create_event(event_name, element, handle, opts);
-					}
+					current[event_handle_key] = create_event(event_name, element, handle, opts);
 				} else {
 					// @ts-ignore
 					element[`__${event_name}`] = value;
@@ -325,19 +315,6 @@ export function set_attributes(
 		}
 	}
 
-	// On the first run, ensure that events are added after bindings so
-	// that their listeners fire after the binding listeners
-	if (!prev) {
-		queue_micro_task(() => {
-			if (!element.isConnected) return;
-			for (const [key, value, evt] of events) {
-				if (current[key] === value) {
-					evt();
-				}
-			}
-		});
-	}
-
 	return current;
 }
 
diff --git a/packages/svelte/tests/runtime-runes/samples/event-spread-timing/_config.js b/packages/svelte/tests/runtime-runes/samples/event-spread-timing/_config.js
new file mode 100644
index 0000000000..bde384b51b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/event-spread-timing/_config.js
@@ -0,0 +1,7 @@
+import { test } from '../../test';
+
+export default test({
+	test({ assert, logs }) {
+		assert.deepEqual(logs, ['onfocus']);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/event-spread-timing/main.svelte b/packages/svelte/tests/runtime-runes/samples/event-spread-timing/main.svelte
new file mode 100644
index 0000000000..bb04abce83
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/event-spread-timing/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	const focus = (input) => {
+		input.focus();
+	};
+</script>
+
+<input {...({})} onfocus={() => console.log("onfocus")} use:focus />

From 046900876f7951a9116688f936e61df69664c2c9 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Fri, 22 Nov 2024 09:48:36 -0500
Subject: [PATCH 094/159] chore: remove references to node.parent (#14395)

* chore: remove references to node.parent

* types

* add ElementWithPath interface

* put path on analysis.elements instead of metadata

* Revert "put path on analysis.elements instead of metadata"

This reverts commit c0c7ab8bd10a812e84b267352b2afced4057e6d6.

* use node.metadata.path

* remove a node.parent usage

* another

* and another, albeit by replacing some bewildering code with some more bewildering code

* make loop idiomatic

* replace some more weirdo code

* simplify
---
 .../phases/2-analyze/css/css-prune.js         | 108 ++++++++++--------
 .../src/compiler/phases/2-analyze/index.js    |  20 ++--
 .../2-analyze/visitors/ExpressionTag.js       |   4 +-
 .../2-analyze/visitors/RegularElement.js      |   4 +-
 .../phases/2-analyze/visitors/RenderTag.js    |   1 +
 .../2-analyze/visitors/SvelteElement.js       |   4 +-
 .../phases/2-analyze/visitors/Text.js         |   4 +-
 .../phases/2-analyze/visitors/shared/a11y.js  |  19 +--
 .../svelte/src/compiler/types/template.d.ts   |   2 +
 9 files changed, 90 insertions(+), 76 deletions(-)

diff --git a/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js b/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js
index bfb83d3e02..9147e887e5 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js
@@ -260,12 +260,15 @@ function apply_combinator(combinator, relative_selector, parent_selectors, rule,
 	switch (name) {
 		case ' ':
 		case '>': {
-			let parent = /** @type {Compiler.TemplateNode | null} */ (element.parent);
-
 			let parent_matched = false;
 			let crossed_component_boundary = false;
 
-			while (parent) {
+			const path = element.metadata.path;
+			let i = path.length;
+
+			while (i--) {
+				const parent = path[i];
+
 				if (parent.type === 'Component' || parent.type === 'SvelteComponent') {
 					crossed_component_boundary = true;
 				}
@@ -289,8 +292,6 @@ function apply_combinator(combinator, relative_selector, parent_selectors, rule,
 
 					if (name === '>') return parent_matched;
 				}
-
-				parent = /** @type {Compiler.TemplateNode | null} */ (parent.parent);
 			}
 
 			return parent_matched || parent_selectors.every((selector) => is_global(selector, rule));
@@ -679,51 +680,50 @@ function relative_selector_might_apply_to_node(relative_selector, rule, element,
  * @param {boolean} include_self
  */
 function get_following_sibling_elements(element, include_self) {
-	/** @type {Compiler.AST.RegularElement | Compiler.AST.SvelteElement | Compiler.AST.Root | null} */
-	let parent = get_element_parent(element);
+	const path = element.metadata.path;
+	let i = path.length;
 
-	if (!parent) {
-		parent = element;
-		while (parent?.type !== 'Root') {
-			parent = /** @type {any} */ (parent).parent;
+	/** @type {Compiler.SvelteNode} */
+	let start = element;
+	let nodes = /** @type {Compiler.SvelteNode[]} */ (
+		/** @type {Compiler.AST.Fragment} */ (path[0]).nodes
+	);
+
+	// find the set of nodes to walk...
+	while (i--) {
+		const node = path[i];
+
+		if (node.type === 'RegularElement' || node.type === 'SvelteElement') {
+			nodes = node.fragment.nodes;
+			break;
+		}
+
+		if (node.type !== 'Fragment') {
+			start = node;
 		}
 	}
 
 	/** @type {Array<Compiler.AST.RegularElement | Compiler.AST.SvelteElement>} */
-	const sibling_elements = [];
-	let found_parent = false;
-
-	for (const el of parent.fragment.nodes) {
-		if (found_parent) {
-			walk(
-				el,
-				{},
-				{
-					RegularElement(node) {
-						sibling_elements.push(node);
-					},
-					SvelteElement(node) {
-						sibling_elements.push(node);
-					}
-				}
-			);
-		} else {
-			/** @type {any} */
-			let child = element;
-			while (child !== el && child !== parent) {
-				child = child.parent;
+	const siblings = [];
+
+	// ...then walk them, starting from the node after the one
+	// containing the element in question
+	for (const node of nodes.slice(nodes.indexOf(start) + 1)) {
+		walk(node, null, {
+			RegularElement(node) {
+				siblings.push(node);
+			},
+			SvelteElement(node) {
+				siblings.push(node);
 			}
-			if (child === el) {
-				found_parent = true;
-			}
-		}
+		});
 	}
 
 	if (include_self) {
-		sibling_elements.push(element);
+		siblings.push(element);
 	}
 
-	return sibling_elements;
+	return siblings;
 }
 
 /**
@@ -867,15 +867,18 @@ function unquote(str) {
  * @returns {Compiler.AST.RegularElement | Compiler.AST.SvelteElement | null}
  */
 function get_element_parent(node) {
-	/** @type {Compiler.SvelteNode | null} */
-	let parent = node;
-	while (
-		// @ts-expect-error TODO figure out a more elegant solution
-		(parent = parent.parent) &&
-		parent.type !== 'RegularElement' &&
-		parent.type !== 'SvelteElement'
-	);
-	return parent ?? null;
+	let path = node.metadata.path;
+	let i = path.length;
+
+	while (i--) {
+		const parent = path[i];
+
+		if (parent.type === 'RegularElement' || parent.type === 'SvelteElement') {
+			return parent;
+		}
+	}
+
+	return null;
 }
 
 /**
@@ -920,7 +923,7 @@ function find_previous_sibling(node) {
 	while (current_node?.type === 'SlotElement') {
 		const slot_children = current_node.fragment.nodes;
 		if (slot_children.length > 0) {
-			current_node = slot_children.slice(-1)[0];
+			current_node = slot_children[slot_children.length - 1];
 		} else {
 			break;
 		}
@@ -1118,8 +1121,12 @@ function mark_as_probably(result) {
 function loop_child(children, adjacent_only) {
 	/** @type {Map<Compiler.AST.RegularElement, NodeExistsValue>} */
 	const result = new Map();
-	for (let i = children.length - 1; i >= 0; i--) {
+
+	let i = children.length;
+
+	while (i--) {
 		const child = children[i];
+
 		if (child.type === 'RegularElement') {
 			result.set(child, NODE_DEFINITELY_EXISTS);
 			if (adjacent_only) {
@@ -1137,5 +1144,6 @@ function loop_child(children, adjacent_only) {
 			}
 		}
 	}
+
 	return result;
 }
diff --git a/packages/svelte/src/compiler/phases/2-analyze/index.js b/packages/svelte/src/compiler/phases/2-analyze/index.js
index a96652d60b..0a61fdbd88 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/index.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/index.js
@@ -709,8 +709,8 @@ export function analyze_component(root, source, options) {
 		analyze_css(analysis.css.ast, analysis);
 
 		// mark nodes as scoped/unused/empty etc
-		for (const element of analysis.elements) {
-			prune(analysis.css.ast, element);
+		for (const node of analysis.elements) {
+			prune(analysis.css.ast, node);
 		}
 
 		const { comment } = analysis.css.ast.content;
@@ -724,18 +724,18 @@ export function analyze_component(root, source, options) {
 			warn_unused(analysis.css.ast);
 		}
 
-		outer: for (const element of analysis.elements) {
-			if (element.type === 'RenderTag') continue;
+		outer: for (const node of analysis.elements) {
+			if (node.type === 'RenderTag') continue;
 
-			if (element.metadata.scoped) {
+			if (node.metadata.scoped) {
 				// Dynamic elements in dom mode always use spread for attributes and therefore shouldn't have a class attribute added to them
 				// TODO this happens during the analysis phase, which shouldn't know anything about client vs server
-				if (element.type === 'SvelteElement' && options.generate === 'client') continue;
+				if (node.type === 'SvelteElement' && options.generate === 'client') continue;
 
 				/** @type {AST.Attribute | undefined} */
 				let class_attribute = undefined;
 
-				for (const attribute of element.attributes) {
+				for (const attribute of node.attributes) {
 					if (attribute.type === 'SpreadAttribute') {
 						// The spread method appends the hash to the end of the class attribute on its own
 						continue outer;
@@ -768,7 +768,7 @@ export function analyze_component(root, source, options) {
 						}
 					}
 				} else {
-					element.attributes.push(
+					node.attributes.push(
 						create_attribute('class', -1, -1, [
 							{
 								type: 'Text',
@@ -780,8 +780,8 @@ export function analyze_component(root, source, options) {
 							}
 						])
 					);
-					if (is_custom_element_node(element) && element.attributes.length === 1) {
-						mark_subtree_dynamic(element.metadata.path);
+					if (is_custom_element_node(node) && node.attributes.length === 1) {
+						mark_subtree_dynamic(node.metadata.path);
 					}
 				}
 			}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/ExpressionTag.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/ExpressionTag.js
index 32c8d2ca36..7e21d5ca14 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/ExpressionTag.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/ExpressionTag.js
@@ -9,7 +9,9 @@ import { mark_subtree_dynamic } from './shared/fragment.js';
  * @param {Context} context
  */
 export function ExpressionTag(node, context) {
-	if (node.parent && context.state.parent_element) {
+	const in_attribute = context.path.at(-1)?.type === 'Attribute';
+
+	if (!in_attribute && context.state.parent_element) {
 		if (!is_tag_valid_with_parent('#text', context.state.parent_element)) {
 			e.node_invalid_placement(node, '`{expression}`', context.state.parent_element);
 		}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js
index 7d1c4aaeaa..fa6ca0f6e9 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js
@@ -19,11 +19,9 @@ import { mark_subtree_dynamic } from './shared/fragment.js';
  */
 export function RegularElement(node, context) {
 	validate_element(node, context);
-
-	check_element(node, context.state);
+	check_element(node, context);
 
 	node.metadata.path = [...context.path];
-
 	context.state.analysis.elements.push(node);
 
 	// Special case: Move the children of <textarea> into a value attribute if they are dynamic
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/RenderTag.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/RenderTag.js
index 244a4dd26c..57bd80ff1c 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/RenderTag.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/RenderTag.js
@@ -12,6 +12,7 @@ import { mark_subtree_dynamic } from './shared/fragment.js';
 export function RenderTag(node, context) {
 	validate_opening_tag(node, context.state, '@');
 
+	node.metadata.path = [...context.path];
 	context.state.analysis.elements.push(node);
 
 	const callee = unwrap_optional(node.expression).callee;
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteElement.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteElement.js
index c0b9f95fc2..c45859408c 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteElement.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteElement.js
@@ -12,9 +12,9 @@ import { mark_subtree_dynamic } from './shared/fragment.js';
  */
 export function SvelteElement(node, context) {
 	validate_element(node, context);
+	check_element(node, context);
 
-	check_element(node, context.state);
-
+	node.metadata.path = [...context.path];
 	context.state.analysis.elements.push(node);
 
 	const xmlns = /** @type {AST.Attribute & { value: [AST.Text] } | undefined} */ (
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/Text.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/Text.js
index a9ba67e95c..2eca7d43e9 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/Text.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/Text.js
@@ -9,7 +9,9 @@ import * as e from '../../../errors.js';
  * @param {Context} context
  */
 export function Text(node, context) {
-	if (node.parent && context.state.parent_element && regex_not_whitespace.test(node.data)) {
+	const in_attribute = context.path.at(-1)?.type === 'Attribute';
+
+	if (!in_attribute && context.state.parent_element && regex_not_whitespace.test(node.data)) {
 		if (!is_tag_valid_with_parent('#text', context.state.parent_element)) {
 			e.node_invalid_placement(node, 'Text node', context.state.parent_element);
 		}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/a11y.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/a11y.js
index 9fddade24d..3bd16b0dd4 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/a11y.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/a11y.js
@@ -1,4 +1,4 @@
-/** @import { AnalysisState } from '../../types.js' */
+/** @import { Context } from '../../types.js' */
 /** @import { AST, SvelteNode, TemplateNode } from '#compiler' */
 /** @import { ARIARoleDefinitionKey, ARIARoleRelationConcept, ARIAProperty, ARIAPropertyDefinition, ARIARoleDefinition } from 'aria-query' */
 import { roles as roles_map, aria, elementRoles } from 'aria-query';
@@ -582,16 +582,17 @@ function get_implicit_role(name, attribute_map) {
 const invisible_elements = ['meta', 'html', 'script', 'style'];
 
 /**
- * @param {SvelteNode | null} parent
+ * @param {SvelteNode[]} path
  * @param {string[]} elements
  */
-function is_parent(parent, elements) {
-	while (parent) {
+function is_parent(path, elements) {
+	let i = path.length;
+	while (i--) {
+		const parent = path[i];
 		if (parent.type === 'SvelteElement') return true; // unknown, play it safe, so we don't warn
 		if (parent.type === 'RegularElement') {
 			return elements.includes(parent.name);
 		}
-		parent = /** @type {TemplateNode} */ (parent).parent;
 	}
 	return false;
 }
@@ -683,9 +684,9 @@ function get_static_text_value(attribute) {
 
 /**
  * @param {AST.RegularElement | AST.SvelteElement} node
- * @param {AnalysisState} state
+ * @param {Context} context
  */
-export function check_element(node, state) {
+export function check_element(node, context) {
 	/** @type {Map<string, AST.Attribute>} */
 	const attribute_map = new Map();
 
@@ -792,7 +793,7 @@ export function check_element(node, state) {
 					}
 
 					// Footers and headers are special cases, and should not have redundant roles unless they are the children of sections or articles.
-					const is_parent_section_or_article = is_parent(node.parent, ['section', 'article']);
+					const is_parent_section_or_article = is_parent(context.path, ['section', 'article']);
 					if (!is_parent_section_or_article) {
 						const has_nested_redundant_role =
 							current_role === a11y_nested_implicit_semantics.get(node.name);
@@ -1114,7 +1115,7 @@ export function check_element(node, state) {
 	}
 
 	if (node.name === 'figcaption') {
-		if (!is_parent(node.parent, ['figure'])) {
+		if (!is_parent(context.path, ['figure'])) {
 			w.a11y_figcaption_parent(node);
 		}
 	}
diff --git a/packages/svelte/src/compiler/types/template.d.ts b/packages/svelte/src/compiler/types/template.d.ts
index fd1824d3b3..59456412bd 100644
--- a/packages/svelte/src/compiler/types/template.d.ts
+++ b/packages/svelte/src/compiler/types/template.d.ts
@@ -167,6 +167,7 @@ export namespace AST {
 		metadata: {
 			dynamic: boolean;
 			args_with_call_expression: Set<number>;
+			path: SvelteNode[];
 		};
 	}
 
@@ -344,6 +345,7 @@ export namespace AST {
 			 */
 			mathml: boolean;
 			scoped: boolean;
+			path: SvelteNode[];
 		};
 	}
 

From e721d96d32ccbea5961f491a4349f71e57b15cd1 Mon Sep 17 00:00:00 2001
From: Theodor Steiner <40017636+Theo-Steiner@users.noreply.github.com>
Date: Sat, 23 Nov 2024 00:22:05 +0900
Subject: [PATCH 095/159] fix: export temporary LegacyComponentType (#14256)
 (#14257)

closes  #14256

helps TypeScript when generating dts files to not fail
---
 .changeset/lovely-mayflies-sing.md          |  5 +++++
 packages/svelte/src/ambient.d.ts            | 14 +++-----------
 packages/svelte/src/legacy/legacy-client.js |  5 +++++
 packages/svelte/types/index.d.ts            | 21 ++++++++++-----------
 4 files changed, 23 insertions(+), 22 deletions(-)
 create mode 100644 .changeset/lovely-mayflies-sing.md

diff --git a/.changeset/lovely-mayflies-sing.md b/.changeset/lovely-mayflies-sing.md
new file mode 100644
index 0000000000..a9ced0b19e
--- /dev/null
+++ b/.changeset/lovely-mayflies-sing.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: provide temporary `LegacyComponentType`
diff --git a/packages/svelte/src/ambient.d.ts b/packages/svelte/src/ambient.d.ts
index 8a20a884ff..fe87e446d6 100644
--- a/packages/svelte/src/ambient.d.ts
+++ b/packages/svelte/src/ambient.d.ts
@@ -1,17 +1,9 @@
 declare module '*.svelte' {
 	// use prettier-ignore for a while because of https://github.com/sveltejs/language-tools/commit/026111228b5814a9109cc4d779d37fb02955fb8b
 	// prettier-ignore
-	import { SvelteComponent, Component, type ComponentConstructorOptions } from 'svelte'
-
-	// Support using the component as both a class and function during the transition period
-	// prettier-ignore
-	interface ComponentType {
-		(
-			...args: Parameters<Component<Record<string, any>>>
-		): ReturnType<Component<Record<string, any>, Record<string, any>>>
-		new (o: ComponentConstructorOptions): SvelteComponent
-	}
-	const Comp: ComponentType;
+	import { SvelteComponent } from 'svelte'
+	import { LegacyComponentType } from 'svelte/legacy';
+	const Comp: LegacyComponentType;
 	type Comp = SvelteComponent;
 	export default Comp;
 }
diff --git a/packages/svelte/src/legacy/legacy-client.js b/packages/svelte/src/legacy/legacy-client.js
index 9e1cd888ad..3715617f4c 100644
--- a/packages/svelte/src/legacy/legacy-client.js
+++ b/packages/svelte/src/legacy/legacy-client.js
@@ -63,6 +63,11 @@ export function asClassComponent(component) {
 	};
 }
 
+/**
+ * Support using the component as both a class and function during the transition period
+ * @typedef  {{new (o: ComponentConstructorOptions): SvelteComponent;(...args: Parameters<Component<Record<string, any>>>): ReturnType<Component<Record<string, any>, Record<string, any>>>;}} LegacyComponentType
+ */
+
 class Svelte4Component {
 	/** @type {any} */
 	#events;
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
index 00ba2556d9..01119e7485 100644
--- a/packages/svelte/types/index.d.ts
+++ b/packages/svelte/types/index.d.ts
@@ -1578,6 +1578,13 @@ declare module 'svelte/legacy' {
 	 * @deprecated Use this only as a temporary solution to migrate your automatically delegated events in Svelte 5.
 	 */
 	export function createBubbler(): (type: string) => (event: Event) => boolean;
+	/**
+	 * Support using the component as both a class and function during the transition period
+	 */
+	export type LegacyComponentType = {
+		new (o: ComponentConstructorOptions): SvelteComponent;
+		(...args: Parameters<Component<Record<string, any>>>): ReturnType<Component<Record<string, any>, Record<string, any>>>;
+	};
 	/**
 	 * Substitute for the `trusted` event modifier
 	 * @deprecated
@@ -2308,17 +2315,9 @@ declare module 'svelte/types/compiler/interfaces' {
 }declare module '*.svelte' {
 	// use prettier-ignore for a while because of https://github.com/sveltejs/language-tools/commit/026111228b5814a9109cc4d779d37fb02955fb8b
 	// prettier-ignore
-	import { SvelteComponent, Component, type ComponentConstructorOptions } from 'svelte'
-
-	// Support using the component as both a class and function during the transition period
-	// prettier-ignore
-	interface ComponentType {
-		(
-			...args: Parameters<Component<Record<string, any>>>
-		): ReturnType<Component<Record<string, any>, Record<string, any>>>
-		new (o: ComponentConstructorOptions): SvelteComponent
-	}
-	const Comp: ComponentType;
+	import { SvelteComponent } from 'svelte'
+	import { LegacyComponentType } from 'svelte/legacy';
+	const Comp: LegacyComponentType;
 	type Comp = SvelteComponent;
 	export default Comp;
 }

From 37e6c7f26b39b6f068ed8ccba47aa186e2ca241a Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Fri, 22 Nov 2024 14:44:43 -0500
Subject: [PATCH 096/159] fix: correctly prune key/each blocks (#14403)

* fix: correctly prune key blocks

* fix pruning of each blocks

* simplify

* make more explicit

* changeset

* helperise/robustify
---
 .changeset/fuzzy-lies-battle.md               |   5 +
 .changeset/wicked-buses-work.md               |   5 +
 .../phases/2-analyze/css/css-prune.js         | 128 ++++++++----------
 .../_config.js                                |   5 +
 .../expected.css                              |   4 +
 .../input.svelte                              |  13 ++
 .../_config.js                                |  48 ++-----
 .../expected.css                              |  21 +--
 .../expected.html                             |   2 +-
 .../input.svelte                              |  20 +--
 .../siblings-combinator-key/_config.js        |  12 ++
 .../siblings-combinator-key/expected.css      |   6 +
 .../siblings-combinator-key/input.svelte      |  15 ++
 13 files changed, 156 insertions(+), 128 deletions(-)
 create mode 100644 .changeset/fuzzy-lies-battle.md
 create mode 100644 .changeset/wicked-buses-work.md
 create mode 100644 packages/svelte/tests/css/samples/general-siblings-combinator-key/_config.js
 create mode 100644 packages/svelte/tests/css/samples/general-siblings-combinator-key/expected.css
 create mode 100644 packages/svelte/tests/css/samples/general-siblings-combinator-key/input.svelte
 create mode 100644 packages/svelte/tests/css/samples/siblings-combinator-key/_config.js
 create mode 100644 packages/svelte/tests/css/samples/siblings-combinator-key/expected.css
 create mode 100644 packages/svelte/tests/css/samples/siblings-combinator-key/input.svelte

diff --git a/.changeset/fuzzy-lies-battle.md b/.changeset/fuzzy-lies-battle.md
new file mode 100644
index 0000000000..ebca5aa862
--- /dev/null
+++ b/.changeset/fuzzy-lies-battle.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: correctly prune each blocks
diff --git a/.changeset/wicked-buses-work.md b/.changeset/wicked-buses-work.md
new file mode 100644
index 0000000000..3fb4e96b79
--- /dev/null
+++ b/.changeset/wicked-buses-work.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: correctly prune key blocks
diff --git a/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js b/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js
index 9147e887e5..899ea7e894 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js
@@ -955,7 +955,7 @@ function get_possible_element_siblings(node, adjacent_only) {
 			if (adjacent_only) {
 				break;
 			}
-		} else if (prev.type === 'EachBlock' || prev.type === 'IfBlock' || prev.type === 'AwaitBlock') {
+		} else if (is_block(prev)) {
 			const possible_last_child = get_possible_last_child(prev, adjacent_only);
 			add_to_map(possible_last_child, result);
 			if (adjacent_only && has_definite_elements(possible_last_child)) {
@@ -979,7 +979,7 @@ function get_possible_element_siblings(node, adjacent_only) {
 		while (
 			// @ts-expect-error TODO
 			(parent = parent?.parent) &&
-			(parent.type === 'EachBlock' || parent.type === 'IfBlock' || parent.type === 'AwaitBlock')
+			is_block(parent)
 		) {
 			const possible_siblings = get_possible_element_siblings(parent, adjacent_only);
 			add_to_map(possible_siblings, result);
@@ -1000,73 +1000,57 @@ function get_possible_element_siblings(node, adjacent_only) {
 }
 
 /**
- * @param {Compiler.AST.EachBlock | Compiler.AST.IfBlock | Compiler.AST.AwaitBlock} relative_selector
+ * @param {Compiler.AST.EachBlock | Compiler.AST.IfBlock | Compiler.AST.AwaitBlock | Compiler.AST.KeyBlock} node
  * @param {boolean} adjacent_only
  * @returns {Map<Compiler.AST.RegularElement, NodeExistsValue>}
  */
-function get_possible_last_child(relative_selector, adjacent_only) {
+function get_possible_last_child(node, adjacent_only) {
 	/** @typedef {Map<Compiler.AST.RegularElement, NodeExistsValue>} NodeMap */
 
+	/** @type {Array<Compiler.AST.Fragment | undefined | null>} */
+	let fragments = [];
+
+	switch (node.type) {
+		case 'EachBlock':
+			fragments.push(node.body, node.fallback);
+			break;
+
+		case 'IfBlock':
+			fragments.push(node.consequent, node.alternate);
+			break;
+
+		case 'AwaitBlock':
+			fragments.push(node.pending, node.then, node.catch);
+			break;
+
+		case 'KeyBlock':
+			fragments.push(node.fragment);
+			break;
+	}
+
 	/** @type {NodeMap} */
 	const result = new Map();
-	if (relative_selector.type === 'EachBlock') {
-		/** @type {NodeMap} */
-		const each_result = loop_child(relative_selector.body.nodes, adjacent_only);
-
-		/** @type {NodeMap} */
-		const else_result = relative_selector.fallback
-			? loop_child(relative_selector.fallback.nodes, adjacent_only)
-			: new Map();
-		const not_exhaustive = !has_definite_elements(else_result);
-		if (not_exhaustive) {
-			mark_as_probably(each_result);
-			mark_as_probably(else_result);
-		}
-		add_to_map(each_result, result);
-		add_to_map(else_result, result);
-	} else if (relative_selector.type === 'IfBlock') {
-		/** @type {NodeMap} */
-		const if_result = loop_child(relative_selector.consequent.nodes, adjacent_only);
-
-		/** @type {NodeMap} */
-		const else_result = relative_selector.alternate
-			? loop_child(relative_selector.alternate.nodes, adjacent_only)
-			: new Map();
-		const not_exhaustive = !has_definite_elements(if_result) || !has_definite_elements(else_result);
-		if (not_exhaustive) {
-			mark_as_probably(if_result);
-			mark_as_probably(else_result);
+
+	let exhaustive = true;
+
+	for (const fragment of fragments) {
+		if (fragment == null) {
+			exhaustive = false;
+			continue;
 		}
-		add_to_map(if_result, result);
-		add_to_map(else_result, result);
-	} else if (relative_selector.type === 'AwaitBlock') {
-		/** @type {NodeMap} */
-		const pending_result = relative_selector.pending
-			? loop_child(relative_selector.pending.nodes, adjacent_only)
-			: new Map();
-
-		/** @type {NodeMap} */
-		const then_result = relative_selector.then
-			? loop_child(relative_selector.then.nodes, adjacent_only)
-			: new Map();
-
-		/** @type {NodeMap} */
-		const catch_result = relative_selector.catch
-			? loop_child(relative_selector.catch.nodes, adjacent_only)
-			: new Map();
-		const not_exhaustive =
-			!has_definite_elements(pending_result) ||
-			!has_definite_elements(then_result) ||
-			!has_definite_elements(catch_result);
-		if (not_exhaustive) {
-			mark_as_probably(pending_result);
-			mark_as_probably(then_result);
-			mark_as_probably(catch_result);
+
+		const map = loop_child(fragment.nodes, adjacent_only);
+		exhaustive &&= has_definite_elements(map);
+
+		add_to_map(map, result);
+	}
+
+	if (!exhaustive) {
+		for (const key of result.keys()) {
+			result.set(key, NODE_PROBABLY_EXISTS);
 		}
-		add_to_map(pending_result, result);
-		add_to_map(then_result, result);
-		add_to_map(catch_result, result);
 	}
+
 	return result;
 }
 
@@ -1107,13 +1091,6 @@ function higher_existence(exist1, exist2) {
 	return exist1 > exist2 ? exist1 : exist2;
 }
 
-/** @param {Map<Compiler.AST.RegularElement, NodeExistsValue>} result */
-function mark_as_probably(result) {
-	for (const key of result.keys()) {
-		result.set(key, NODE_PROBABLY_EXISTS);
-	}
-}
-
 /**
  * @param {Compiler.SvelteNode[]} children
  * @param {boolean} adjacent_only
@@ -1132,11 +1109,7 @@ function loop_child(children, adjacent_only) {
 			if (adjacent_only) {
 				break;
 			}
-		} else if (
-			child.type === 'EachBlock' ||
-			child.type === 'IfBlock' ||
-			child.type === 'AwaitBlock'
-		) {
+		} else if (is_block(child)) {
 			const child_result = get_possible_last_child(child, adjacent_only);
 			add_to_map(child_result, result);
 			if (adjacent_only && has_definite_elements(child_result)) {
@@ -1147,3 +1120,16 @@ function loop_child(children, adjacent_only) {
 
 	return result;
 }
+
+/**
+ * @param {Compiler.SvelteNode} node
+ * @returns {node is Compiler.AST.IfBlock | Compiler.AST.EachBlock | Compiler.AST.AwaitBlock | Compiler.AST.KeyBlock}
+ */
+function is_block(node) {
+	return (
+		node.type === 'IfBlock' ||
+		node.type === 'EachBlock' ||
+		node.type === 'AwaitBlock' ||
+		node.type === 'KeyBlock'
+	);
+}
diff --git a/packages/svelte/tests/css/samples/general-siblings-combinator-key/_config.js b/packages/svelte/tests/css/samples/general-siblings-combinator-key/_config.js
new file mode 100644
index 0000000000..292c6c49ac
--- /dev/null
+++ b/packages/svelte/tests/css/samples/general-siblings-combinator-key/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	warnings: []
+});
diff --git a/packages/svelte/tests/css/samples/general-siblings-combinator-key/expected.css b/packages/svelte/tests/css/samples/general-siblings-combinator-key/expected.css
new file mode 100644
index 0000000000..dde595dc8a
--- /dev/null
+++ b/packages/svelte/tests/css/samples/general-siblings-combinator-key/expected.css
@@ -0,0 +1,4 @@
+
+	.a.svelte-xyz ~ .b:where(.svelte-xyz) { color: green; }
+	.a.svelte-xyz ~ .c:where(.svelte-xyz) { color: green; }
+	.b.svelte-xyz ~ .c:where(.svelte-xyz) { color: green; }
diff --git a/packages/svelte/tests/css/samples/general-siblings-combinator-key/input.svelte b/packages/svelte/tests/css/samples/general-siblings-combinator-key/input.svelte
new file mode 100644
index 0000000000..82a666d584
--- /dev/null
+++ b/packages/svelte/tests/css/samples/general-siblings-combinator-key/input.svelte
@@ -0,0 +1,13 @@
+<div class="a"></div>
+
+{#key x}
+	<div class="b"></div>
+{/key}
+
+<div class="c"></div>
+
+<style>
+	.a ~ .b { color: green; }
+	.a ~ .c { color: green; }
+	.b ~ .c { color: green; }
+</style>
diff --git a/packages/svelte/tests/css/samples/siblings-combinator-each-else-nested/_config.js b/packages/svelte/tests/css/samples/siblings-combinator-each-else-nested/_config.js
index 6ea62ad0c5..f8b4747e43 100644
--- a/packages/svelte/tests/css/samples/siblings-combinator-each-else-nested/_config.js
+++ b/packages/svelte/tests/css/samples/siblings-combinator-each-else-nested/_config.js
@@ -5,62 +5,38 @@ export default test({
 		{
 			code: 'css_unused_selector',
 			message: 'Unused CSS selector ".a + .c"',
-			start: { character: 478, column: 1, line: 23 },
-			end: { character: 485, column: 8, line: 23 }
-		},
-		{
-			code: 'css_unused_selector',
-			message: 'Unused CSS selector ".a + .g"',
-			start: { character: 505, column: 1, line: 24 },
-			end: { character: 512, column: 8, line: 24 }
+			start: { character: 586, column: 1, line: 27 },
+			end: { character: 593, column: 8, line: 27 }
 		},
 		{
 			code: 'css_unused_selector',
 			message: 'Unused CSS selector ".b + .e"',
-			start: { character: 532, column: 1, line: 25 },
-			end: { character: 539, column: 8, line: 25 }
-		},
-		{
-			code: 'css_unused_selector',
-			message: 'Unused CSS selector ".c + .g"',
-			start: { character: 559, column: 1, line: 26 },
-			end: { character: 566, column: 8, line: 26 }
-		},
-		{
-			code: 'css_unused_selector',
-			message: 'Unused CSS selector ".c + .k"',
-			start: { character: 586, column: 1, line: 27 },
-			end: { character: 593, column: 8, line: 27 }
+			start: { character: 611, column: 1, line: 28 },
+			end: { character: 618, column: 8, line: 28 }
 		},
 		{
 			code: 'css_unused_selector',
 			message: 'Unused CSS selector ".d + .d"',
-			start: { character: 613, column: 1, line: 28 },
-			end: { character: 620, column: 8, line: 28 }
+			start: { character: 636, column: 1, line: 29 },
+			end: { character: 643, column: 8, line: 29 }
 		},
 		{
 			code: 'css_unused_selector',
 			message: 'Unused CSS selector ".e + .f"',
-			start: { character: 640, column: 1, line: 29 },
-			end: { character: 647, column: 8, line: 29 }
+			start: { character: 661, column: 1, line: 30 },
+			end: { character: 668, column: 8, line: 30 }
 		},
 		{
 			code: 'css_unused_selector',
 			message: 'Unused CSS selector ".f + .f"',
-			start: { character: 667, column: 1, line: 30 },
-			end: { character: 674, column: 8, line: 30 }
-		},
-		{
-			code: 'css_unused_selector',
-			message: 'Unused CSS selector ".g + .j"',
-			start: { character: 694, column: 1, line: 31 },
-			end: { character: 701, column: 8, line: 31 }
+			start: { character: 686, column: 1, line: 31 },
+			end: { character: 693, column: 8, line: 31 }
 		},
 		{
 			code: 'css_unused_selector',
 			message: 'Unused CSS selector ".g + .h + .i + .j"',
-			start: { character: 721, column: 1, line: 32 },
-			end: { character: 738, column: 18, line: 32 }
+			start: { character: 711, column: 1, line: 32 },
+			end: { character: 728, column: 18, line: 32 }
 		}
 	]
 });
diff --git a/packages/svelte/tests/css/samples/siblings-combinator-each-else-nested/expected.css b/packages/svelte/tests/css/samples/siblings-combinator-each-else-nested/expected.css
index 55c0e95913..85c1522bac 100644
--- a/packages/svelte/tests/css/samples/siblings-combinator-each-else-nested/expected.css
+++ b/packages/svelte/tests/css/samples/siblings-combinator-each-else-nested/expected.css
@@ -1,27 +1,28 @@
+
 	.a.svelte-xyz + .e:where(.svelte-xyz) { color: green; }
 	.a.svelte-xyz + .f:where(.svelte-xyz) { color: green; }
+	.a.svelte-xyz + .g:where(.svelte-xyz) { color: green; }
 	.b.svelte-xyz + .c:where(.svelte-xyz) { color: green; }
 	.b.svelte-xyz + .d:where(.svelte-xyz) { color: green; }
 	.c.svelte-xyz + .e:where(.svelte-xyz) { color: green; }
 	.c.svelte-xyz + .f:where(.svelte-xyz) { color: green; }
+	.c.svelte-xyz + .g:where(.svelte-xyz) { color: green; }
+	.c.svelte-xyz + .k:where(.svelte-xyz) { color: green; }
 	.d.svelte-xyz + .e:where(.svelte-xyz) { color: green; }
 	.d.svelte-xyz + .f:where(.svelte-xyz) { color: green; }
 	.e.svelte-xyz + .e:where(.svelte-xyz) { color: green; }
 	.i.svelte-xyz + .j:where(.svelte-xyz) { color: green; }
 	.g.svelte-xyz + .h:where(.svelte-xyz) + .j:where(.svelte-xyz) { color: green; }
 	.g.svelte-xyz + .i:where(.svelte-xyz) + .j:where(.svelte-xyz) { color: green; }
+	.g.svelte-xyz + .j:where(.svelte-xyz) { color: green; }
 	.m.svelte-xyz + .m:where(.svelte-xyz) { color: green; }
 	.m.svelte-xyz + .l:where(.svelte-xyz) { color: green; }
 	.l.svelte-xyz + .m:where(.svelte-xyz) { color: green; }
 
 	/* no match */
-	/* (unused) .a + .c { color: green; }*/
-	/* (unused) .a + .g { color: green; }*/
-	/* (unused) .b + .e { color: green; }*/
-	/* (unused) .c + .g { color: green; }*/
-	/* (unused) .c + .k { color: green; }*/
-	/* (unused) .d + .d { color: green; }*/
-	/* (unused) .e + .f { color: green; }*/
-	/* (unused) .f + .f { color: green; }*/
-	/* (unused) .g + .j { color: green; }*/
-	/* (unused) .g + .h + .i + .j { color: green; }*/
+	/* (unused) .a + .c { color: red; }*/
+	/* (unused) .b + .e { color: red; }*/
+	/* (unused) .d + .d { color: red; }*/
+	/* (unused) .e + .f { color: red; }*/
+	/* (unused) .f + .f { color: red; }*/
+	/* (unused) .g + .h + .i + .j { color: red; }*/
diff --git a/packages/svelte/tests/css/samples/siblings-combinator-each-else-nested/expected.html b/packages/svelte/tests/css/samples/siblings-combinator-each-else-nested/expected.html
index 5f25a2d38a..03d19e06bb 100644
--- a/packages/svelte/tests/css/samples/siblings-combinator-each-else-nested/expected.html
+++ b/packages/svelte/tests/css/samples/siblings-combinator-each-else-nested/expected.html
@@ -1,3 +1,3 @@
 <div class="a svelte-xyz"></div>
 <div class="f svelte-xyz"></div>
-<div class="k"></div>
\ No newline at end of file
+<div class="k svelte-xyz"></div>
diff --git a/packages/svelte/tests/css/samples/siblings-combinator-each-else-nested/input.svelte b/packages/svelte/tests/css/samples/siblings-combinator-each-else-nested/input.svelte
index 94da7d87ac..805977d3c3 100644
--- a/packages/svelte/tests/css/samples/siblings-combinator-each-else-nested/input.svelte
+++ b/packages/svelte/tests/css/samples/siblings-combinator-each-else-nested/input.svelte
@@ -5,31 +5,31 @@
 <style>
 	.a + .e { color: green; }
 	.a + .f { color: green; }
+	.a + .g { color: green; }
 	.b + .c { color: green; }
 	.b + .d { color: green; }
 	.c + .e { color: green; }
 	.c + .f { color: green; }
+	.c + .g { color: green; }
+	.c + .k { color: green; }
 	.d + .e { color: green; }
 	.d + .f { color: green; }
 	.e + .e { color: green; }
 	.i + .j { color: green; }
 	.g + .h + .j { color: green; }
 	.g + .i + .j { color: green; }
+	.g + .j { color: green; }
 	.m + .m { color: green; }
 	.m + .l { color: green; }
 	.l + .m { color: green; }
 
 	/* no match */
-	.a + .c { color: green; }
-	.a + .g { color: green; }
-	.b + .e { color: green; }
-	.c + .g { color: green; }
-	.c + .k { color: green; }
-	.d + .d { color: green; }
-	.e + .f { color: green; }
-	.f + .f { color: green; }
-	.g + .j { color: green; }
-	.g + .h + .i + .j { color: green; }
+	.a + .c { color: red; }
+	.b + .e { color: red; }
+	.d + .d { color: red; }
+	.e + .f { color: red; }
+	.f + .f { color: red; }
+	.g + .h + .i + .j { color: red; }
 </style>
 
 <div class="a"></div>
diff --git a/packages/svelte/tests/css/samples/siblings-combinator-key/_config.js b/packages/svelte/tests/css/samples/siblings-combinator-key/_config.js
new file mode 100644
index 0000000000..01b14f0b39
--- /dev/null
+++ b/packages/svelte/tests/css/samples/siblings-combinator-key/_config.js
@@ -0,0 +1,12 @@
+import { test } from '../../test';
+
+export default test({
+	warnings: [
+		{
+			code: 'css_unused_selector',
+			message: 'Unused CSS selector ".a + .c"',
+			start: { character: 166, column: 1, line: 14 },
+			end: { character: 173, column: 8, line: 14 }
+		}
+	]
+});
diff --git a/packages/svelte/tests/css/samples/siblings-combinator-key/expected.css b/packages/svelte/tests/css/samples/siblings-combinator-key/expected.css
new file mode 100644
index 0000000000..6e89831e53
--- /dev/null
+++ b/packages/svelte/tests/css/samples/siblings-combinator-key/expected.css
@@ -0,0 +1,6 @@
+
+	.a.svelte-xyz + .b:where(.svelte-xyz) { color: green; }
+	.b.svelte-xyz + .c:where(.svelte-xyz) { color: green; }
+
+	/* no match */
+	/* (unused) .a + .c { color: red; }*/
diff --git a/packages/svelte/tests/css/samples/siblings-combinator-key/input.svelte b/packages/svelte/tests/css/samples/siblings-combinator-key/input.svelte
new file mode 100644
index 0000000000..f0f9dea2b5
--- /dev/null
+++ b/packages/svelte/tests/css/samples/siblings-combinator-key/input.svelte
@@ -0,0 +1,15 @@
+<div class="a"></div>
+
+{#key x}
+	<div class="b"></div>
+{/key}
+
+<div class="c"></div>
+
+<style>
+	.a + .b { color: green; }
+	.b + .c { color: green; }
+
+	/* no match */
+	.a + .c { color: red; }
+</style>

From 63484aff9bbaf1029e88451ccb726854d683b5a8 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Mon, 25 Nov 2024 14:46:01 +0000
Subject: [PATCH 097/159] fix: ensure last empty text node correctly hydrates
 (#14425)

* fix: ensure last empty text node correctly hydrates

* fix: ensure last empty text node correctly hydrates
---
 .changeset/short-chicken-compare.md                 |  5 +++++
 .../svelte/src/internal/client/dom/operations.js    | 13 +++++++++++--
 .../tests/hydration/samples/text-empty-2/_config.js |  3 +++
 .../hydration/samples/text-empty-2/_expected.html   |  1 +
 .../hydration/samples/text-empty-2/main.svelte      |  7 +++++++
 5 files changed, 27 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/short-chicken-compare.md
 create mode 100644 packages/svelte/tests/hydration/samples/text-empty-2/_config.js
 create mode 100644 packages/svelte/tests/hydration/samples/text-empty-2/_expected.html
 create mode 100644 packages/svelte/tests/hydration/samples/text-empty-2/main.svelte

diff --git a/.changeset/short-chicken-compare.md b/.changeset/short-chicken-compare.md
new file mode 100644
index 0000000000..d0f6c22de4
--- /dev/null
+++ b/.changeset/short-chicken-compare.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ensure last empty text node correctly hydrates
diff --git a/packages/svelte/src/internal/client/dom/operations.js b/packages/svelte/src/internal/client/dom/operations.js
index 6dfce9ebd3..627bf917ee 100644
--- a/packages/svelte/src/internal/client/dom/operations.js
+++ b/packages/svelte/src/internal/client/dom/operations.js
@@ -154,8 +154,10 @@ export function first_child(fragment, is_text) {
  */
 export function sibling(node, count = 1, is_text = false) {
 	let next_sibling = hydrating ? hydrate_node : node;
+	var last_sibling;
 
 	while (count--) {
+		last_sibling = next_sibling;
 		next_sibling = /** @type {TemplateNode} */ (get_next_sibling(next_sibling));
 	}
 
@@ -163,13 +165,20 @@ export function sibling(node, count = 1, is_text = false) {
 		return next_sibling;
 	}
 
-	var type = next_sibling.nodeType;
+	var type = next_sibling?.nodeType;
 
 	// if a sibling {expression} is empty during SSR, there might be no
 	// text node to hydrate — we must therefore create one
 	if (is_text && type !== 3) {
 		var text = create_text();
-		next_sibling?.before(text);
+		// If the next sibling is `null` and we're handling text then it's because
+		// the SSR content was empty for the text, so we need to generate a new text
+		// node and insert it after the last sibling
+		if (next_sibling === null) {
+			last_sibling?.after(text);
+		} else {
+			next_sibling.before(text);
+		}
 		set_hydrate_node(text);
 		return text;
 	}
diff --git a/packages/svelte/tests/hydration/samples/text-empty-2/_config.js b/packages/svelte/tests/hydration/samples/text-empty-2/_config.js
new file mode 100644
index 0000000000..f47bee71df
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/text-empty-2/_config.js
@@ -0,0 +1,3 @@
+import { test } from '../../test';
+
+export default test({});
diff --git a/packages/svelte/tests/hydration/samples/text-empty-2/_expected.html b/packages/svelte/tests/hydration/samples/text-empty-2/_expected.html
new file mode 100644
index 0000000000..ff12f10bfb
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/text-empty-2/_expected.html
@@ -0,0 +1 @@
+<!--[--><span><span></span></span><!--]-->
diff --git a/packages/svelte/tests/hydration/samples/text-empty-2/main.svelte b/packages/svelte/tests/hydration/samples/text-empty-2/main.svelte
new file mode 100644
index 0000000000..ae1ed05e3a
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/text-empty-2/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	let { name, remaining } = $props();
+</script>
+
+<span>
+	<span>{name}</span>{remaining >= 2 ? ',' : ''}
+</span>

From 2b5c0e791e5efbfdaf4041dc2a923c1b61529757 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 25 Nov 2024 11:30:12 -0500
Subject: [PATCH 098/159] Version Packages (#14383)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/fuzzy-lies-battle.md     |  5 -----
 .changeset/lovely-mayflies-sing.md  |  5 -----
 .changeset/rich-worms-burn.md       |  5 -----
 .changeset/short-chicken-compare.md |  5 -----
 .changeset/wicked-buses-work.md     |  5 -----
 packages/svelte/CHANGELOG.md        | 14 ++++++++++++++
 packages/svelte/package.json        |  2 +-
 packages/svelte/src/version.js      |  2 +-
 8 files changed, 16 insertions(+), 27 deletions(-)
 delete mode 100644 .changeset/fuzzy-lies-battle.md
 delete mode 100644 .changeset/lovely-mayflies-sing.md
 delete mode 100644 .changeset/rich-worms-burn.md
 delete mode 100644 .changeset/short-chicken-compare.md
 delete mode 100644 .changeset/wicked-buses-work.md

diff --git a/.changeset/fuzzy-lies-battle.md b/.changeset/fuzzy-lies-battle.md
deleted file mode 100644
index ebca5aa862..0000000000
--- a/.changeset/fuzzy-lies-battle.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: correctly prune each blocks
diff --git a/.changeset/lovely-mayflies-sing.md b/.changeset/lovely-mayflies-sing.md
deleted file mode 100644
index a9ced0b19e..0000000000
--- a/.changeset/lovely-mayflies-sing.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: provide temporary `LegacyComponentType`
diff --git a/.changeset/rich-worms-burn.md b/.changeset/rich-worms-burn.md
deleted file mode 100644
index 8ec3af516a..0000000000
--- a/.changeset/rich-worms-burn.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: attach spread attribute events synchronously
diff --git a/.changeset/short-chicken-compare.md b/.changeset/short-chicken-compare.md
deleted file mode 100644
index d0f6c22de4..0000000000
--- a/.changeset/short-chicken-compare.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: ensure last empty text node correctly hydrates
diff --git a/.changeset/wicked-buses-work.md b/.changeset/wicked-buses-work.md
deleted file mode 100644
index 3fb4e96b79..0000000000
--- a/.changeset/wicked-buses-work.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: correctly prune key blocks
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 47b620b402..35adeaf6b0 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,19 @@
 # svelte
 
+## 5.2.8
+
+### Patch Changes
+
+- fix: correctly prune each blocks ([#14403](https://github.com/sveltejs/svelte/pull/14403))
+
+- fix: provide temporary `LegacyComponentType` ([#14257](https://github.com/sveltejs/svelte/pull/14257))
+
+- fix: attach spread attribute events synchronously ([#14387](https://github.com/sveltejs/svelte/pull/14387))
+
+- fix: ensure last empty text node correctly hydrates ([#14425](https://github.com/sveltejs/svelte/pull/14425))
+
+- fix: correctly prune key blocks ([#14403](https://github.com/sveltejs/svelte/pull/14403))
+
 ## 5.2.7
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 130fe64ba0..bc03bcb990 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.2.7",
+  "version": "5.2.8",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 3cd065be8e..294ad27c1f 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.2.7';
+export const VERSION = '5.2.8';
 export const PUBLIC_VERSION = '5';

From d2ce0a79aee0c167c6133d1636bab73254a54e15 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 25 Nov 2024 13:49:31 -0500
Subject: [PATCH 099/159] remove stylesheet property from state (#14429)

---
 .../svelte/src/compiler/phases/2-analyze/css/css-prune.js    | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js b/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js
index 899ea7e894..61f3fc822f 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js
@@ -7,7 +7,6 @@ import { get_attribute_chunks, is_text_attribute } from '../../../utils/ast.js';
 
 /**
  * @typedef {{
- *   stylesheet: Compiler.Css.StyleSheet;
  *   element: Compiler.AST.RegularElement | Compiler.AST.SvelteElement;
  *   from_render_tag: boolean;
  * }} State
@@ -61,9 +60,9 @@ export function prune(stylesheet, element) {
 		const parent = get_element_parent(element);
 		if (!parent) return;
 
-		walk(stylesheet, { stylesheet, element: parent, from_render_tag: true }, visitors);
+		walk(stylesheet, { element: parent, from_render_tag: true }, visitors);
 	} else {
-		walk(stylesheet, { stylesheet, element, from_render_tag: false }, visitors);
+		walk(stylesheet, { element, from_render_tag: false }, visitors);
 	}
 }
 

From 191245930831c37ce36cb19adc7474c8310f34b3 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 25 Nov 2024 14:03:28 -0500
Subject: [PATCH 100/159] chore: initialize snippet binding correctly (#14430)

---
 packages/svelte/src/compiler/phases/2-analyze/index.js      | 5 +++--
 .../svelte/src/compiler/phases/3-transform/client/utils.js  | 3 ++-
 packages/svelte/src/compiler/phases/scope.js                | 6 +++---
 packages/svelte/src/compiler/types/index.d.ts               | 3 ++-
 4 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/packages/svelte/src/compiler/phases/2-analyze/index.js b/packages/svelte/src/compiler/phases/2-analyze/index.js
index 0a61fdbd88..0d8caa0a4b 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/index.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/index.js
@@ -287,6 +287,7 @@ export function analyze_component(root, source, options) {
 
 		const store_name = name.slice(1);
 		const declaration = instance.scope.get(store_name);
+		const init = /** @type {Node | undefined} */ (declaration?.initial);
 
 		// If we're not in legacy mode through the compiler option, assume the user
 		// is referencing a rune and not a global store.
@@ -295,9 +296,9 @@ export function analyze_component(root, source, options) {
 			!is_rune(name) ||
 			(declaration !== null &&
 				// const state = $state(0) is valid
-				(get_rune(declaration.initial, instance.scope) === null ||
+				(get_rune(init, instance.scope) === null ||
 					// rune-line names received as props are valid too (but we have to protect against $props as store)
-					(store_name !== 'props' && get_rune(declaration.initial, instance.scope) === '$props')) &&
+					(store_name !== 'props' && get_rune(init, instance.scope) === '$props')) &&
 				// allow `import { derived } from 'svelte/store'` in the same file as `const x = $derived(..)` because one is not a subscription to the other
 				!(
 					name === '$derived' &&
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/utils.js b/packages/svelte/src/compiler/phases/3-transform/client/utils.js
index 0b49d18ee9..de821bbc45 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/utils.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/utils.js
@@ -259,7 +259,8 @@ export function should_proxy(node, scope) {
 			binding.initial.type !== 'FunctionDeclaration' &&
 			binding.initial.type !== 'ClassDeclaration' &&
 			binding.initial.type !== 'ImportDeclaration' &&
-			binding.initial.type !== 'EachBlock'
+			binding.initial.type !== 'EachBlock' &&
+			binding.initial.type !== 'SnippetBlock'
 		) {
 			return should_proxy(binding.initial, null);
 		}
diff --git a/packages/svelte/src/compiler/phases/scope.js b/packages/svelte/src/compiler/phases/scope.js
index 0542a20708..454bb8c34e 100644
--- a/packages/svelte/src/compiler/phases/scope.js
+++ b/packages/svelte/src/compiler/phases/scope.js
@@ -75,7 +75,7 @@ export class Scope {
 	 * @param {Identifier} node
 	 * @param {Binding['kind']} kind
 	 * @param {DeclarationKind} declaration_kind
-	 * @param {null | Expression | FunctionDeclaration | ClassDeclaration | ImportDeclaration | AST.EachBlock} initial
+	 * @param {null | Expression | FunctionDeclaration | ClassDeclaration | ImportDeclaration | AST.EachBlock | AST.SnippetBlock} initial
 	 * @returns {Binding}
 	 */
 	declare(node, kind, declaration_kind, initial = null) {
@@ -632,7 +632,7 @@ export function create_scopes(ast, root, allow_reactive_declarations, parent) {
 			if (is_top_level) {
 				scope = /** @type {Scope} */ (parent);
 			}
-			scope.declare(node.expression, 'normal', 'function', node.expression);
+			scope.declare(node.expression, 'normal', 'function', node);
 
 			const child_scope = state.scope.child();
 			scopes.set(node, child_scope);
@@ -726,7 +726,7 @@ export function set_scope(node, { next, state }) {
 
 /**
  * Returns the name of the rune if the given expression is a `CallExpression` using a rune.
- * @param {Node | AST.EachBlock | null | undefined} node
+ * @param {Node | null | undefined} node
  * @param {Scope} scope
  */
 export function get_rune(node, scope) {
diff --git a/packages/svelte/src/compiler/types/index.d.ts b/packages/svelte/src/compiler/types/index.d.ts
index 8a45f2d4fd..f8aa3db69d 100644
--- a/packages/svelte/src/compiler/types/index.d.ts
+++ b/packages/svelte/src/compiler/types/index.d.ts
@@ -291,7 +291,8 @@ export interface Binding {
 		| FunctionDeclaration
 		| ClassDeclaration
 		| ImportDeclaration
-		| AST.EachBlock;
+		| AST.EachBlock
+		| AST.SnippetBlock;
 	is_called: boolean;
 	references: { node: Identifier; path: SvelteNode[] }[];
 	mutated: boolean;

From 4f0dde52077478349762f4c7ba53568905426420 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 25 Nov 2024 18:16:53 -0500
Subject: [PATCH 101/159] chore: simplify css pruning slightly (#14432)

---
 .../phases/2-analyze/css/css-prune.js         | 51 +++++++++----------
 1 file changed, 25 insertions(+), 26 deletions(-)

diff --git a/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js b/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js
index 61f3fc822f..6b9410e4b5 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js
@@ -944,15 +944,16 @@ function get_possible_element_siblings(node, adjacent_only) {
 	let prev = node;
 	while ((prev = find_previous_sibling(prev))) {
 		if (prev.type === 'RegularElement') {
-			if (
-				!prev.attributes.find(
-					(attr) => attr.type === 'Attribute' && attr.name.toLowerCase() === 'slot'
-				)
-			) {
+			const has_slot_attribute = prev.attributes.some(
+				(attr) => attr.type === 'Attribute' && attr.name.toLowerCase() === 'slot'
+			);
+
+			if (!has_slot_attribute) {
 				result.set(prev, NODE_DEFINITELY_EXISTS);
-			}
-			if (adjacent_only) {
-				break;
+
+				if (adjacent_only) {
+					return result;
+				}
 			}
 		} else if (is_block(prev)) {
 			const possible_last_child = get_possible_last_child(prev, adjacent_only);
@@ -971,27 +972,25 @@ function get_possible_element_siblings(node, adjacent_only) {
 		}
 	}
 
-	if (!prev || !adjacent_only) {
-		/** @type {Compiler.SvelteNode | null} */
-		let parent = node;
+	/** @type {Compiler.SvelteNode | null} */
+	let parent = node;
 
-		while (
-			// @ts-expect-error TODO
-			(parent = parent?.parent) &&
-			is_block(parent)
-		) {
-			const possible_siblings = get_possible_element_siblings(parent, adjacent_only);
-			add_to_map(possible_siblings, result);
+	while (
+		// @ts-expect-error TODO
+		(parent = parent?.parent) &&
+		is_block(parent)
+	) {
+		const possible_siblings = get_possible_element_siblings(parent, adjacent_only);
+		add_to_map(possible_siblings, result);
 
-			// @ts-expect-error
-			if (parent.type === 'EachBlock' && !parent.fallback?.nodes.includes(node)) {
-				// `{#each ...}<a /><b />{/each}` — `<b>` can be previous sibling of `<a />`
-				add_to_map(get_possible_last_child(parent, adjacent_only), result);
-			}
+		// @ts-expect-error
+		if (parent.type === 'EachBlock' && !parent.fallback?.nodes.includes(node)) {
+			// `{#each ...}<a /><b />{/each}` — `<b>` can be previous sibling of `<a />`
+			add_to_map(get_possible_last_child(parent, adjacent_only), result);
+		}
 
-			if (adjacent_only && has_definite_elements(possible_siblings)) {
-				break;
-			}
+		if (adjacent_only && has_definite_elements(possible_siblings)) {
+			break;
 		}
 	}
 

From 9e9fb2463cda29e5ed75601515651379ff328cfd Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Tue, 26 Nov 2024 16:00:54 +0100
Subject: [PATCH 102/159] fix: relax parent validation (#14442)

This reverts #13255 / #13158, and helps with the validation error part of #14120

If you would have a component like this...
```svelte
<td>hi there</td>
```
...and then render it on the server via our `render` function like this:
```js
const result = render(Main);
```
...then right now you get an error saying that `td` is not valid at this position. But that doesn't seem right, because we should give people the benefit of the doubt: It may very well be that someone renders such a component and then correctly puts it into a `tr` tag themselves on the server (another example is rendering a full html document like in #14120).

All the other validation where there's a known parent (X not valid inside Y) is untouched by this.

Doing this as cleanup prior to tackling #13331
---
 .changeset/cool-gifts-sniff.md                |  5 ++++
 packages/svelte/src/html-tree-validation.js   | 24 +++++++++----------
 packages/svelte/src/internal/server/dev.js    |  8 ++-----
 .../samples/invalid-html-ssr/_config.js       |  5 ++--
 .../samples/invalid-html-ssr/main.svelte      |  1 -
 5 files changed, 20 insertions(+), 23 deletions(-)
 create mode 100644 .changeset/cool-gifts-sniff.md

diff --git a/.changeset/cool-gifts-sniff.md b/.changeset/cool-gifts-sniff.md
new file mode 100644
index 0000000000..ab9680309f
--- /dev/null
+++ b/.changeset/cool-gifts-sniff.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: relax html parent validation
diff --git a/packages/svelte/src/html-tree-validation.js b/packages/svelte/src/html-tree-validation.js
index da5567f56a..0ebf45e166 100644
--- a/packages/svelte/src/html-tree-validation.js
+++ b/packages/svelte/src/html-tree-validation.js
@@ -167,25 +167,23 @@ export function is_tag_valid_with_ancestor(tag, ancestors) {
  * Returns false if the tag is not allowed inside the parent tag such that it will result
  * in the browser repairing the HTML, which will likely result in an error during hydration.
  * @param {string} tag
- * @param {string | null} parent_tag
+ * @param {string} parent_tag
  * @returns {boolean}
  */
 export function is_tag_valid_with_parent(tag, parent_tag) {
 	if (tag.includes('-') || parent_tag?.includes('-')) return true; // custom elements can be anything
 
-	if (parent_tag !== null) {
-		const disallowed = disallowed_children[parent_tag];
+	const disallowed = disallowed_children[parent_tag];
 
-		if (disallowed) {
-			if ('direct' in disallowed && disallowed.direct.includes(tag)) {
-				return false;
-			}
-			if ('descendant' in disallowed && disallowed.descendant.includes(tag)) {
-				return false;
-			}
-			if ('only' in disallowed && disallowed.only) {
-				return disallowed.only.includes(tag);
-			}
+	if (disallowed) {
+		if ('direct' in disallowed && disallowed.direct.includes(tag)) {
+			return false;
+		}
+		if ('descendant' in disallowed && disallowed.descendant.includes(tag)) {
+			return false;
+		}
+		if ('only' in disallowed && disallowed.only) {
+			return disallowed.only.includes(tag);
 		}
 	}
 
diff --git a/packages/svelte/src/internal/server/dev.js b/packages/svelte/src/internal/server/dev.js
index 61c7c6d5e8..145b37479b 100644
--- a/packages/svelte/src/internal/server/dev.js
+++ b/packages/svelte/src/internal/server/dev.js
@@ -34,14 +34,12 @@ function stringify(element) {
 
 /**
  * @param {Payload} payload
- * @param {Element | null} parent
+ * @param {Element} parent
  * @param {Element} child
  */
 function print_error(payload, parent, child) {
 	var message =
-		(parent === null
-			? `node_invalid_placement_ssr: ${stringify(child)} needs a valid parent element\n\n`
-			: `node_invalid_placement_ssr: ${stringify(parent)} cannot contain ${stringify(child)}\n\n`) +
+		`node_invalid_placement_ssr: ${stringify(parent)} cannot contain ${stringify(child)}\n\n` +
 		'This can cause content to shift around as the browser repairs the HTML, and will likely result in a `hydration_mismatch` warning.';
 
 	if ((seen ??= new Set()).has(message)) return;
@@ -85,8 +83,6 @@ export function push_element(payload, tag, line, column) {
 			}
 			ancestor = ancestor.parent;
 		}
-	} else if (!is_tag_valid_with_parent(tag, null)) {
-		print_error(payload, null, child);
 	}
 
 	parent = child;
diff --git a/packages/svelte/tests/runtime-runes/samples/invalid-html-ssr/_config.js b/packages/svelte/tests/runtime-runes/samples/invalid-html-ssr/_config.js
index f7327d1608..d815d10fc7 100644
--- a/packages/svelte/tests/runtime-runes/samples/invalid-html-ssr/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/invalid-html-ssr/_config.js
@@ -5,7 +5,7 @@ export default test({
 		dev: true
 	},
 
-	html: `<p></p><h1>foo</h1><p></p><form></form> hello`,
+	html: `<p></p><h1>foo</h1><p></p><form></form>`,
 
 	recover: true,
 
@@ -13,8 +13,7 @@ export default test({
 
 	errors: [
 		'node_invalid_placement_ssr: `<p>` (main.svelte:6:0) cannot contain `<h1>` (h1.svelte:1:0)\n\nThis can cause content to shift around as the browser repairs the HTML, and will likely result in a `hydration_mismatch` warning.',
-		'node_invalid_placement_ssr: `<form>` (main.svelte:9:0) cannot contain `<form>` (form.svelte:1:0)\n\nThis can cause content to shift around as the browser repairs the HTML, and will likely result in a `hydration_mismatch` warning.',
-		'node_invalid_placement_ssr: `<td>` (main.svelte:12:0) needs a valid parent element\n\nThis can cause content to shift around as the browser repairs the HTML, and will likely result in a `hydration_mismatch` warning.'
+		'node_invalid_placement_ssr: `<form>` (main.svelte:9:0) cannot contain `<form>` (form.svelte:1:0)\n\nThis can cause content to shift around as the browser repairs the HTML, and will likely result in a `hydration_mismatch` warning.'
 	],
 
 	warnings: [
diff --git a/packages/svelte/tests/runtime-runes/samples/invalid-html-ssr/main.svelte b/packages/svelte/tests/runtime-runes/samples/invalid-html-ssr/main.svelte
index 92ccc7283f..84af671155 100644
--- a/packages/svelte/tests/runtime-runes/samples/invalid-html-ssr/main.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/invalid-html-ssr/main.svelte
@@ -9,4 +9,3 @@
 <form>
 	<Form />
 </form>
-<td>hello</td>

From 3fa08d565cf11ac5673b5ecc74868965e2255be2 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Tue, 26 Nov 2024 16:32:08 +0100
Subject: [PATCH 103/159] fix: show `:then` block for `null` value (#14440)

fixes #14439

This bug was introduced in #13642 because setting the input to null means the equality check ("is the input different") fails if you set the value to null

Also fixes #14441 - this bug was present for a long time, and the reason is the same as for the other bug: The equality check always returns "yes this is the same" if the value is undefined initially. The fix is similar; we need to initialize the input to something that can never be equal to whatever value is passed
---
 .changeset/breezy-insects-live.md             |  5 +++++
 .../src/internal/client/dom/blocks/await.js   |  9 ++++----
 .../samples/await-non-promise/_config.js      | 22 +++++++++++++++++--
 .../samples/await-non-promise/main.svelte     | 17 +++++++++-----
 4 files changed, 41 insertions(+), 12 deletions(-)
 create mode 100644 .changeset/breezy-insects-live.md

diff --git a/.changeset/breezy-insects-live.md b/.changeset/breezy-insects-live.md
new file mode 100644
index 0000000000..8b86fab6be
--- /dev/null
+++ b/.changeset/breezy-insects-live.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: show `:then` block for `null/undefined` value
diff --git a/packages/svelte/src/internal/client/dom/blocks/await.js b/packages/svelte/src/internal/client/dom/blocks/await.js
index 29ef15452f..62b2e4dd0c 100644
--- a/packages/svelte/src/internal/client/dom/blocks/await.js
+++ b/packages/svelte/src/internal/client/dom/blocks/await.js
@@ -14,6 +14,7 @@ import {
 } from '../../runtime.js';
 import { hydrate_next, hydrate_node, hydrating } from '../hydration.js';
 import { queue_micro_task } from '../task.js';
+import { UNINITIALIZED } from '../../../../constants.js';
 
 const PENDING = 0;
 const THEN = 1;
@@ -40,8 +41,8 @@ export function await_block(node, get_input, pending_fn, then_fn, catch_fn) {
 	/** @type {any} */
 	var component_function = DEV ? component_context?.function : null;
 
-	/** @type {V | Promise<V> | null} */
-	var input;
+	/** @type {V | Promise<V> | typeof UNINITIALIZED} */
+	var input = UNINITIALIZED;
 
 	/** @type {Effect | null} */
 	var pending_effect;
@@ -156,8 +157,8 @@ export function await_block(node, get_input, pending_fn, then_fn, catch_fn) {
 			update(THEN, false);
 		}
 
-		// Set the input to null, in order to disable the promise callbacks
-		return () => (input = null);
+		// Set the input to something else, in order to disable the promise callbacks
+		return () => (input = UNINITIALIZED);
 	});
 
 	if (hydrating) {
diff --git a/packages/svelte/tests/runtime-runes/samples/await-non-promise/_config.js b/packages/svelte/tests/runtime-runes/samples/await-non-promise/_config.js
index 14dac30350..882742f731 100644
--- a/packages/svelte/tests/runtime-runes/samples/await-non-promise/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/await-non-promise/_config.js
@@ -1,9 +1,27 @@
 import { flushSync } from 'svelte';
-import { test } from '../../test';
+import { ok, test } from '../../test';
 
 export default test({
 	compileOptions: {
 		dev: true
 	},
-	test() {}
+	test({ assert, target }) {
+		const [btn1, btn2] = target.querySelectorAll('button');
+		const p = target.querySelector('p');
+		ok(p);
+
+		assert.htmlEqual(p.outerHTML, `<p></p>`);
+
+		btn1.click();
+		flushSync();
+		assert.htmlEqual(p.outerHTML, `<p>1</p>`);
+
+		btn2.click();
+		flushSync();
+		assert.htmlEqual(p.outerHTML, `<p></p>`);
+
+		btn1.click();
+		flushSync();
+		assert.htmlEqual(p.outerHTML, `<p>1</p>`);
+	}
 });
diff --git a/packages/svelte/tests/runtime-runes/samples/await-non-promise/main.svelte b/packages/svelte/tests/runtime-runes/samples/await-non-promise/main.svelte
index 62881ba666..efd05f2dd2 100644
--- a/packages/svelte/tests/runtime-runes/samples/await-non-promise/main.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/await-non-promise/main.svelte
@@ -1,9 +1,14 @@
 <script>
-	let count = $state(43);
+	let count = $state();
 </script>
 
-{#await count}
-	loading
-{:then count}
-	{count}
-{/await}
\ No newline at end of file
+<button onclick={() => count = 1}>number</button>
+<button onclick={() => count = null}>nullify</button>
+
+<p>
+	{#await count}
+		loading
+	{:then count}
+		{count}
+	{/await}
+</p>

From a6ad5af0bb361960160937a6317a2401384b1e1c Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 26 Nov 2024 14:05:40 -0500
Subject: [PATCH 104/159] fix: disregard TypeScript nodes when pruning CSS
 (#14446)

* make get_possible_element_siblings non-recursive

* treat slots as blocks

* simplify

* simplify

* add test

* changeset
---
 .changeset/tender-balloons-relate.md          |   5 +
 .../phases/2-analyze/css/css-prune.js         | 143 ++++++------------
 .../unused-ts-as-expression/_config.js        |  20 +++
 .../unused-ts-as-expression/expected.css      |   4 +
 .../unused-ts-as-expression/input.svelte      |  13 ++
 5 files changed, 88 insertions(+), 97 deletions(-)
 create mode 100644 .changeset/tender-balloons-relate.md
 create mode 100644 packages/svelte/tests/css/samples/unused-ts-as-expression/_config.js
 create mode 100644 packages/svelte/tests/css/samples/unused-ts-as-expression/expected.css
 create mode 100644 packages/svelte/tests/css/samples/unused-ts-as-expression/input.svelte

diff --git a/.changeset/tender-balloons-relate.md b/.changeset/tender-balloons-relate.md
new file mode 100644
index 0000000000..ea7ce094b6
--- /dev/null
+++ b/.changeset/tender-balloons-relate.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: disregard TypeScript nodes when pruning CSS
diff --git a/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js b/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js
index 6b9410e4b5..dec85c0361 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js
@@ -881,116 +881,63 @@ function get_element_parent(node) {
 }
 
 /**
- * Finds the given node's previous sibling in the DOM
- *
- * The Svelte `<slot>` is just a placeholder and is not actually real. Any children nodes
- * in `<slot>` are 'flattened' and considered as the same level as the `<slot>`'s siblings
- *
- * e.g.
- * ```html
- * <h1>Heading 1</h1>
- * <slot>
- *   <h2>Heading 2</h2>
- * </slot>
- * ```
- *
- * is considered to look like:
- * ```html
- * <h1>Heading 1</h1>
- * <h2>Heading 2</h2>
- * ```
- * @param {Compiler.SvelteNode} node
- * @returns {Compiler.SvelteNode}
- */
-function find_previous_sibling(node) {
-	/** @type {Compiler.SvelteNode} */
-	let current_node = node;
-
-	while (
-		// @ts-expect-error TODO
-		!current_node.prev &&
-		// @ts-expect-error TODO
-		current_node.parent?.type === 'SlotElement'
-	) {
-		// @ts-expect-error TODO
-		current_node = current_node.parent;
-	}
-
-	// @ts-expect-error
-	current_node = current_node.prev;
-
-	while (current_node?.type === 'SlotElement') {
-		const slot_children = current_node.fragment.nodes;
-		if (slot_children.length > 0) {
-			current_node = slot_children[slot_children.length - 1];
-		} else {
-			break;
-		}
-	}
-
-	return current_node;
-}
-
-/**
- * @param {Compiler.SvelteNode} node
+ * @param {Compiler.AST.RegularElement | Compiler.AST.SvelteElement} element
  * @param {boolean} adjacent_only
  * @returns {Map<Compiler.AST.RegularElement | Compiler.AST.SvelteElement | Compiler.AST.SlotElement | Compiler.AST.RenderTag, NodeExistsValue>}
  */
-function get_possible_element_siblings(node, adjacent_only) {
+function get_possible_element_siblings(element, adjacent_only) {
 	/** @type {Map<Compiler.AST.RegularElement | Compiler.AST.SvelteElement | Compiler.AST.SlotElement | Compiler.AST.RenderTag, NodeExistsValue>} */
 	const result = new Map();
+	const path = element.metadata.path;
 
 	/** @type {Compiler.SvelteNode} */
-	let prev = node;
-	while ((prev = find_previous_sibling(prev))) {
-		if (prev.type === 'RegularElement') {
-			const has_slot_attribute = prev.attributes.some(
-				(attr) => attr.type === 'Attribute' && attr.name.toLowerCase() === 'slot'
-			);
+	let current = element;
+
+	let i = path.length;
+
+	while (i--) {
+		const fragment = /** @type {Compiler.AST.Fragment} */ (path[i--]);
+		let j = fragment.nodes.indexOf(current);
+
+		while (j--) {
+			const node = fragment.nodes[j];
+
+			if (node.type === 'RegularElement') {
+				const has_slot_attribute = node.attributes.some(
+					(attr) => attr.type === 'Attribute' && attr.name.toLowerCase() === 'slot'
+				);
 
-			if (!has_slot_attribute) {
-				result.set(prev, NODE_DEFINITELY_EXISTS);
+				if (!has_slot_attribute) {
+					result.set(node, NODE_DEFINITELY_EXISTS);
 
-				if (adjacent_only) {
+					if (adjacent_only) {
+						return result;
+					}
+				}
+			} else if (is_block(node)) {
+				if (node.type === 'SlotElement') {
+					result.set(node, NODE_PROBABLY_EXISTS);
+				}
+
+				const possible_last_child = get_possible_last_child(node, adjacent_only);
+				add_to_map(possible_last_child, result);
+				if (adjacent_only && has_definite_elements(possible_last_child)) {
 					return result;
 				}
+			} else if (node.type === 'RenderTag' || node.type === 'SvelteElement') {
+				result.set(node, NODE_PROBABLY_EXISTS);
+				// Special case: slots, render tags and svelte:element tags could resolve to no siblings,
+				// so we want to continue until we find a definite sibling even with the adjacent-only combinator
 			}
-		} else if (is_block(prev)) {
-			const possible_last_child = get_possible_last_child(prev, adjacent_only);
-			add_to_map(possible_last_child, result);
-			if (adjacent_only && has_definite_elements(possible_last_child)) {
-				return result;
-			}
-		} else if (
-			prev.type === 'SlotElement' ||
-			prev.type === 'RenderTag' ||
-			prev.type === 'SvelteElement'
-		) {
-			result.set(prev, NODE_PROBABLY_EXISTS);
-			// Special case: slots, render tags and svelte:element tags could resolve to no siblings,
-			// so we want to continue until we find a definite sibling even with the adjacent-only combinator
 		}
-	}
 
-	/** @type {Compiler.SvelteNode | null} */
-	let parent = node;
+		current = path[i];
 
-	while (
-		// @ts-expect-error TODO
-		(parent = parent?.parent) &&
-		is_block(parent)
-	) {
-		const possible_siblings = get_possible_element_siblings(parent, adjacent_only);
-		add_to_map(possible_siblings, result);
+		if (!current || !is_block(current)) break;
 
-		// @ts-expect-error
-		if (parent.type === 'EachBlock' && !parent.fallback?.nodes.includes(node)) {
+		if (current.type === 'EachBlock' && fragment === current.body) {
 			// `{#each ...}<a /><b />{/each}` — `<b>` can be previous sibling of `<a />`
-			add_to_map(get_possible_last_child(parent, adjacent_only), result);
-		}
-
-		if (adjacent_only && has_definite_elements(possible_siblings)) {
-			break;
+			add_to_map(get_possible_last_child(current, adjacent_only), result);
 		}
 	}
 
@@ -998,7 +945,7 @@ function get_possible_element_siblings(node, adjacent_only) {
 }
 
 /**
- * @param {Compiler.AST.EachBlock | Compiler.AST.IfBlock | Compiler.AST.AwaitBlock | Compiler.AST.KeyBlock} node
+ * @param {Compiler.AST.EachBlock | Compiler.AST.IfBlock | Compiler.AST.AwaitBlock | Compiler.AST.KeyBlock | Compiler.AST.SlotElement} node
  * @param {boolean} adjacent_only
  * @returns {Map<Compiler.AST.RegularElement, NodeExistsValue>}
  */
@@ -1022,6 +969,7 @@ function get_possible_last_child(node, adjacent_only) {
 			break;
 
 		case 'KeyBlock':
+		case 'SlotElement':
 			fragments.push(node.fragment);
 			break;
 	}
@@ -1029,7 +977,7 @@ function get_possible_last_child(node, adjacent_only) {
 	/** @type {NodeMap} */
 	const result = new Map();
 
-	let exhaustive = true;
+	let exhaustive = node.type !== 'SlotElement';
 
 	for (const fragment of fragments) {
 		if (fragment == null) {
@@ -1121,13 +1069,14 @@ function loop_child(children, adjacent_only) {
 
 /**
  * @param {Compiler.SvelteNode} node
- * @returns {node is Compiler.AST.IfBlock | Compiler.AST.EachBlock | Compiler.AST.AwaitBlock | Compiler.AST.KeyBlock}
+ * @returns {node is Compiler.AST.IfBlock | Compiler.AST.EachBlock | Compiler.AST.AwaitBlock | Compiler.AST.KeyBlock | Compiler.AST.SlotElement}
  */
 function is_block(node) {
 	return (
 		node.type === 'IfBlock' ||
 		node.type === 'EachBlock' ||
 		node.type === 'AwaitBlock' ||
-		node.type === 'KeyBlock'
+		node.type === 'KeyBlock' ||
+		node.type === 'SlotElement'
 	);
 }
diff --git a/packages/svelte/tests/css/samples/unused-ts-as-expression/_config.js b/packages/svelte/tests/css/samples/unused-ts-as-expression/_config.js
new file mode 100644
index 0000000000..e2679428cc
--- /dev/null
+++ b/packages/svelte/tests/css/samples/unused-ts-as-expression/_config.js
@@ -0,0 +1,20 @@
+import { test } from '../../test';
+
+export default test({
+	warnings: [
+		{
+			code: 'css_unused_selector',
+			end: {
+				character: 127,
+				column: 28,
+				line: 10
+			},
+			message: 'Unused CSS selector "[data-active=\'true\'] > span"',
+			start: {
+				character: 100,
+				column: 1,
+				line: 10
+			}
+		}
+	]
+});
diff --git a/packages/svelte/tests/css/samples/unused-ts-as-expression/expected.css b/packages/svelte/tests/css/samples/unused-ts-as-expression/expected.css
new file mode 100644
index 0000000000..571d2acfbc
--- /dev/null
+++ b/packages/svelte/tests/css/samples/unused-ts-as-expression/expected.css
@@ -0,0 +1,4 @@
+
+	/* (unused) [data-active='true'] > span {
+		background-color: red;
+	}*/
diff --git a/packages/svelte/tests/css/samples/unused-ts-as-expression/input.svelte b/packages/svelte/tests/css/samples/unused-ts-as-expression/input.svelte
new file mode 100644
index 0000000000..24fc0096bf
--- /dev/null
+++ b/packages/svelte/tests/css/samples/unused-ts-as-expression/input.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	//
+</script>
+
+<div data-active={false as true}>
+	<span></span>
+</div>
+
+<style>
+	[data-active='true'] > span {
+		background-color: red;
+	}
+</style>

From 45417a36ce8100095f91907cdb9d47bbeafbaff7 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Tue, 26 Nov 2024 19:18:35 +0000
Subject: [PATCH 105/159] fix: addresses memory leak when creating deriveds
 inside untrack (#14443)

* fix: addresses memory leak when creating deriveds inside untrack

* fix: addresses memory leak when creating deriveds inside untrack

* changeset

* Update packages/svelte/src/internal/client/reactivity/deriveds.js

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>

* fix

* fix

* fix

* comment

* Update packages/svelte/tests/signals/test.ts

* Update packages/svelte/src/internal/client/reactivity/deriveds.js

Co-authored-by: Rich Harris <rich.harris@vercel.com>

* Update .changeset/great-crabs-rhyme.md

Co-authored-by: Rich Harris <rich.harris@vercel.com>

---------

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/great-crabs-rhyme.md               |  5 +++
 .../internal/client/reactivity/deriveds.js    | 42 +++++++++++++------
 .../src/internal/client/reactivity/types.d.ts |  5 ++-
 .../svelte/src/internal/client/runtime.js     | 19 ++++++++-
 packages/svelte/tests/signals/test.ts         | 26 ++++++++++++
 5 files changed, 82 insertions(+), 15 deletions(-)
 create mode 100644 .changeset/great-crabs-rhyme.md

diff --git a/.changeset/great-crabs-rhyme.md b/.changeset/great-crabs-rhyme.md
new file mode 100644
index 0000000000..b02f7bc9b2
--- /dev/null
+++ b/.changeset/great-crabs-rhyme.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: prevent memory leak when creating deriveds inside untrack
diff --git a/packages/svelte/src/internal/client/reactivity/deriveds.js b/packages/svelte/src/internal/client/reactivity/deriveds.js
index 98fbfb0f52..a679d307c4 100644
--- a/packages/svelte/src/internal/client/reactivity/deriveds.js
+++ b/packages/svelte/src/internal/client/reactivity/deriveds.js
@@ -42,6 +42,11 @@ export function derived(fn) {
 		active_effect.f |= EFFECT_HAS_DERIVED;
 	}
 
+	var parent_derived =
+		active_reaction !== null && (active_reaction.f & DERIVED) !== 0
+			? /** @type {Derived} */ (active_reaction)
+			: null;
+
 	/** @type {Derived<V>} */
 	const signal = {
 		children: null,
@@ -53,12 +58,11 @@ export function derived(fn) {
 		reactions: null,
 		v: /** @type {V} */ (null),
 		version: 0,
-		parent: active_effect
+		parent: parent_derived ?? active_effect
 	};
 
-	if (active_reaction !== null && (active_reaction.f & DERIVED) !== 0) {
-		var derived = /** @type {Derived} */ (active_reaction);
-		(derived.children ??= []).push(signal);
+	if (parent_derived !== null) {
+		(parent_derived.children ??= []).push(signal);
 	}
 
 	return signal;
@@ -104,6 +108,21 @@ function destroy_derived_children(derived) {
  */
 let stack = [];
 
+/**
+ * @param {Derived} derived
+ * @returns {Effect | null}
+ */
+function get_derived_parent_effect(derived) {
+	var parent = derived.parent;
+	while (parent !== null) {
+		if ((parent.f & DERIVED) === 0) {
+			return /** @type {Effect} */ (parent);
+		}
+		parent = parent.parent;
+	}
+	return null;
+}
+
 /**
  * @template T
  * @param {Derived} derived
@@ -113,7 +132,7 @@ export function execute_derived(derived) {
 	var value;
 	var prev_active_effect = active_effect;
 
-	set_active_effect(derived.parent);
+	set_active_effect(get_derived_parent_effect(derived));
 
 	if (DEV) {
 		let prev_inspect_effects = inspect_effects;
@@ -162,14 +181,13 @@ export function update_derived(derived) {
 }
 
 /**
- * @param {Derived} signal
+ * @param {Derived} derived
  * @returns {void}
  */
-export function destroy_derived(signal) {
-	destroy_derived_children(signal);
-	remove_reactions(signal, 0);
-	set_signal_status(signal, DESTROYED);
+export function destroy_derived(derived) {
+	destroy_derived_children(derived);
+	remove_reactions(derived, 0);
+	set_signal_status(derived, DESTROYED);
 
-	// TODO we need to ensure we remove the derived from any parent derives
-	signal.v = signal.children = signal.deps = signal.ctx = signal.reactions = null;
+	derived.v = derived.children = derived.deps = derived.ctx = derived.reactions = null;
 }
diff --git a/packages/svelte/src/internal/client/reactivity/types.d.ts b/packages/svelte/src/internal/client/reactivity/types.d.ts
index 2cef49eb2d..395070fedd 100644
--- a/packages/svelte/src/internal/client/reactivity/types.d.ts
+++ b/packages/svelte/src/internal/client/reactivity/types.d.ts
@@ -23,7 +23,6 @@ export interface Reaction extends Signal {
 	fn: null | Function;
 	/** Signals that this signal reads from */
 	deps: null | Value[];
-	parent: Effect | null;
 }
 
 export interface Derived<V = unknown> extends Value<V>, Reaction {
@@ -31,6 +30,8 @@ export interface Derived<V = unknown> extends Value<V>, Reaction {
 	fn: () => V;
 	/** Reactions created inside this signal */
 	children: null | Reaction[];
+	/** Parent effect or derived */
+	parent: Effect | Derived | null;
 }
 
 export interface Effect extends Reaction {
@@ -58,6 +59,8 @@ export interface Effect extends Reaction {
 	first: null | Effect;
 	/** Last child effect created inside this signal */
 	last: null | Effect;
+	/** Parent effect */
+	parent: Effect | null;
 	/** Dev only */
 	component_function?: any;
 }
diff --git a/packages/svelte/src/internal/client/runtime.js b/packages/svelte/src/internal/client/runtime.js
index 5b5b488824..8931d02009 100644
--- a/packages/svelte/src/internal/client/runtime.js
+++ b/packages/svelte/src/internal/client/runtime.js
@@ -767,9 +767,24 @@ export function get(signal) {
 	} else if (is_derived && /** @type {Derived} */ (signal).deps === null) {
 		var derived = /** @type {Derived} */ (signal);
 		var parent = derived.parent;
+		var target = derived;
 
-		if (parent !== null && !parent.deriveds?.includes(derived)) {
-			(parent.deriveds ??= []).push(derived);
+		while (parent !== null) {
+			// Attach the derived to the nearest parent effect, if there are deriveds
+			// in between then we also need to attach them too
+			if ((parent.f & DERIVED) !== 0) {
+				var parent_derived = /** @type {Derived} */ (parent);
+
+				target = parent_derived;
+				parent = parent_derived.parent;
+			} else {
+				var parent_effect = /** @type {Effect} */ (parent);
+
+				if (!parent_effect.deriveds?.includes(target)) {
+					(parent_effect.deriveds ??= []).push(target);
+				}
+				break;
+			}
 		}
 	}
 
diff --git a/packages/svelte/tests/signals/test.ts b/packages/svelte/tests/signals/test.ts
index e2d27267a3..db061bfb55 100644
--- a/packages/svelte/tests/signals/test.ts
+++ b/packages/svelte/tests/signals/test.ts
@@ -739,4 +739,30 @@ describe('signals', () => {
 			assert.deepEqual(a.reactions, null);
 		};
 	});
+
+	test('nested deriveds clean up the relationships when used with untrack', () => {
+		return () => {
+			let a = render_effect(() => {});
+
+			const destroy = effect_root(() => {
+				a = render_effect(() => {
+					$.untrack(() => {
+						const b = derived(() => {
+							const c = derived(() => {});
+							$.untrack(() => {
+								$.get(c);
+							});
+						});
+						$.get(b);
+					});
+				});
+			});
+
+			assert.deepEqual(a.deriveds?.length, 1);
+
+			destroy();
+
+			assert.deepEqual(a.deriveds, null);
+		};
+	});
 });

From 3a6bf1041b154d762420071f01666f39c3928ca7 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 26 Nov 2024 14:46:14 -0500
Subject: [PATCH 106/159] Version Packages (#14444)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/breezy-insects-live.md    |  5 -----
 .changeset/cool-gifts-sniff.md       |  5 -----
 .changeset/great-crabs-rhyme.md      |  5 -----
 .changeset/tender-balloons-relate.md |  5 -----
 packages/svelte/CHANGELOG.md         | 12 ++++++++++++
 packages/svelte/package.json         |  2 +-
 packages/svelte/src/version.js       |  2 +-
 7 files changed, 14 insertions(+), 22 deletions(-)
 delete mode 100644 .changeset/breezy-insects-live.md
 delete mode 100644 .changeset/cool-gifts-sniff.md
 delete mode 100644 .changeset/great-crabs-rhyme.md
 delete mode 100644 .changeset/tender-balloons-relate.md

diff --git a/.changeset/breezy-insects-live.md b/.changeset/breezy-insects-live.md
deleted file mode 100644
index 8b86fab6be..0000000000
--- a/.changeset/breezy-insects-live.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: show `:then` block for `null/undefined` value
diff --git a/.changeset/cool-gifts-sniff.md b/.changeset/cool-gifts-sniff.md
deleted file mode 100644
index ab9680309f..0000000000
--- a/.changeset/cool-gifts-sniff.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: relax html parent validation
diff --git a/.changeset/great-crabs-rhyme.md b/.changeset/great-crabs-rhyme.md
deleted file mode 100644
index b02f7bc9b2..0000000000
--- a/.changeset/great-crabs-rhyme.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: prevent memory leak when creating deriveds inside untrack
diff --git a/.changeset/tender-balloons-relate.md b/.changeset/tender-balloons-relate.md
deleted file mode 100644
index ea7ce094b6..0000000000
--- a/.changeset/tender-balloons-relate.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: disregard TypeScript nodes when pruning CSS
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 35adeaf6b0..13c67caa84 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,17 @@
 # svelte
 
+## 5.2.9
+
+### Patch Changes
+
+- fix: show `:then` block for `null/undefined` value ([#14440](https://github.com/sveltejs/svelte/pull/14440))
+
+- fix: relax html parent validation ([#14442](https://github.com/sveltejs/svelte/pull/14442))
+
+- fix: prevent memory leak when creating deriveds inside untrack ([#14443](https://github.com/sveltejs/svelte/pull/14443))
+
+- fix: disregard TypeScript nodes when pruning CSS ([#14446](https://github.com/sveltejs/svelte/pull/14446))
+
 ## 5.2.8
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index bc03bcb990..9d9b04a6eb 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.2.8",
+  "version": "5.2.9",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 294ad27c1f..4fabe40a59 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.2.8';
+export const VERSION = '5.2.9';
 export const PUBLIC_VERSION = '5';

From 6ff1d0aa1b96f8f9ea7b9207fb0239a3989be401 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 26 Nov 2024 14:56:54 -0500
Subject: [PATCH 107/159] chore(deps-dev): bump @sveltejs/kit from 2.5.24 to
 2.8.3 (#14427)

Bumps [@sveltejs/kit](https://github.com/sveltejs/kit/tree/HEAD/packages/kit) from 2.5.24 to 2.8.3.
- [Release notes](https://github.com/sveltejs/kit/releases)
- [Changelog](https://github.com/sveltejs/kit/blob/main/packages/kit/CHANGELOG.md)
- [Commits](https://github.com/sveltejs/kit/commits/@sveltejs/kit@2.8.3/packages/kit)

---
updated-dependencies:
- dependency-name: "@sveltejs/kit"
  dependency-type: direct:development
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 pnpm-lock.yaml                      | 48 +++++++++++++++++------------
 sites/svelte-5-preview/package.json |  2 +-
 2 files changed, 30 insertions(+), 20 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 83e4522b2f..0af617a61d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -249,19 +249,19 @@ importers:
         version: 1.2.1
       '@sveltejs/adapter-vercel':
         specifier: ^5.4.3
-        version: 5.4.3(@sveltejs/kit@2.5.24(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@packages+svelte)(vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)(vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))
+        version: 5.4.3(@sveltejs/kit@2.8.3(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@packages+svelte)(vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)(vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))
       '@sveltejs/kit':
-        specifier: ^2.5.24
-        version: 2.5.24(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@packages+svelte)(vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)(vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))
+        specifier: ^2.8.3
+        version: 2.8.3(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@packages+svelte)(vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)(vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))
       '@sveltejs/site-kit':
         specifier: 6.0.0-next.64
-        version: 6.0.0-next.64(@sveltejs/kit@2.5.24(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@packages+svelte)(vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)(vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)
+        version: 6.0.0-next.64(@sveltejs/kit@2.8.3(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@packages+svelte)(vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)(vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)
       '@sveltejs/vite-plugin-svelte':
         specifier: ^4.0.0-next.6
         version: 4.0.0-next.6(svelte@packages+svelte)(vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))
       '@vercel/speed-insights':
         specifier: ^1.0.0
-        version: 1.0.11(@sveltejs/kit@2.5.24(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@packages+svelte)(vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)(vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)
+        version: 1.0.11(@sveltejs/kit@2.8.3(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@packages+svelte)(vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)(vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)
       esrap:
         specifier: ^1.2.2
         version: 1.2.2
@@ -870,8 +870,8 @@ packages:
       typescript: '>= 5'
       typescript-eslint: '>= 7.5'
 
-  '@sveltejs/kit@2.5.24':
-    resolution: {integrity: sha512-Nr2oxsCsDfEkdS/zzQQQbsPYTbu692Qs3/iE3L7VHzCVjG2+WujF9oMUozWI7GuX98KxYSoPMlAsfmDLSg44hQ==}
+  '@sveltejs/kit@2.8.3':
+    resolution: {integrity: sha512-DVBVwugfzzn0SxKA+eAmKqcZ7aHZROCHxH7/pyrOi+HLtQ721eEsctGb9MkhEuqj6q/9S/OFYdn37vdxzFPdvw==}
     engines: {node: '>=18.13'}
     hasBin: true
     peerDependencies:
@@ -1332,8 +1332,8 @@ packages:
     resolution: {integrity: sha512-UX6sGumvvqSaXgdKGUsgZWqcUyIXZ/vZTrlRT/iobiKhGL0zL4d3osHj3uqllWJK+i+sixDS/3COVEOFbupFyw==}
     engines: {node: '>=8'}
 
-  devalue@5.0.0:
-    resolution: {integrity: sha512-gO+/OMXF7488D+u3ue+G7Y4AA3ZmUnB3eHJXmBTgNHvr4ZNzl36A0ZtG+XCRNYCkYx/bFmw4qtkoFLa+wSrwAA==}
+  devalue@5.1.1:
+    resolution: {integrity: sha512-maua5KUiapvEwiEAe+XnlZ3Rh0GD+qI1J/nb9vrJc3muPXvcF/8gXYTWF76+5DAqHyDUtOIImEuo0YKE9mshVw==}
 
   dir-glob@3.0.1:
     resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
@@ -2470,6 +2470,10 @@ packages:
     resolution: {integrity: sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==}
     engines: {node: '>= 10'}
 
+  sirv@3.0.0:
+    resolution: {integrity: sha512-BPwJGUeDaDCHihkORDchNyyTvWFhcusy1XMmhEVTQTwGeybFbp8YEmB+njbPnth1FibULBSBVwCQni25XlCUDg==}
+    engines: {node: '>=18'}
+
   slash@3.0.0:
     resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
     engines: {node: '>=8'}
@@ -3534,9 +3538,9 @@ snapshots:
       eslint-visitor-keys: 3.4.3
       espree: 9.6.1
 
-  '@sveltejs/adapter-vercel@5.4.3(@sveltejs/kit@2.5.24(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@packages+svelte)(vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)(vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))':
+  '@sveltejs/adapter-vercel@5.4.3(@sveltejs/kit@2.8.3(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@packages+svelte)(vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)(vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))':
     dependencies:
-      '@sveltejs/kit': 2.5.24(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@packages+svelte)(vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)(vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))
+      '@sveltejs/kit': 2.8.3(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@packages+svelte)(vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)(vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))
       '@vercel/nft': 0.27.3
       esbuild: 0.21.5
     transitivePeerDependencies:
@@ -3554,12 +3558,12 @@ snapshots:
       typescript: 5.5.4
       typescript-eslint: 8.2.0(eslint@9.9.1)(typescript@5.5.4)
 
-  '@sveltejs/kit@2.5.24(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@packages+svelte)(vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)(vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))':
+  '@sveltejs/kit@2.8.3(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@packages+svelte)(vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)(vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))':
     dependencies:
       '@sveltejs/vite-plugin-svelte': 4.0.0-next.6(svelte@packages+svelte)(vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))
       '@types/cookie': 0.6.0
       cookie: 0.6.0
-      devalue: 5.0.0
+      devalue: 5.1.1
       esm-env: 1.0.0
       import-meta-resolve: 4.1.0
       kleur: 4.1.5
@@ -3567,14 +3571,14 @@ snapshots:
       mrmime: 2.0.0
       sade: 1.8.1
       set-cookie-parser: 2.7.0
-      sirv: 2.0.4
+      sirv: 3.0.0
       svelte: link:packages/svelte
       tiny-glob: 0.2.9
       vite: 5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)
 
-  '@sveltejs/site-kit@6.0.0-next.64(@sveltejs/kit@2.5.24(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@packages+svelte)(vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)(vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)':
+  '@sveltejs/site-kit@6.0.0-next.64(@sveltejs/kit@2.8.3(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@packages+svelte)(vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)(vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)':
     dependencies:
-      '@sveltejs/kit': 2.5.24(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@packages+svelte)(vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)(vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))
+      '@sveltejs/kit': 2.8.3(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@packages+svelte)(vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)(vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))
       esm-env: 1.0.0
       svelte: link:packages/svelte
       svelte-persisted-store: 0.9.2(svelte@packages+svelte)
@@ -3752,9 +3756,9 @@ snapshots:
       - encoding
       - supports-color
 
-  '@vercel/speed-insights@1.0.11(@sveltejs/kit@2.5.24(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@packages+svelte)(vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)(vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)':
+  '@vercel/speed-insights@1.0.11(@sveltejs/kit@2.8.3(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@packages+svelte)(vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)(vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)':
     optionalDependencies:
-      '@sveltejs/kit': 2.5.24(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@packages+svelte)(vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)(vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))
+      '@sveltejs/kit': 2.8.3(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@packages+svelte)(vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)(vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))
       svelte: link:packages/svelte
 
   '@vitest/coverage-v8@2.0.5(vitest@2.0.5(@types/node@20.12.7)(jsdom@25.0.0)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))':
@@ -4052,7 +4056,7 @@ snapshots:
 
   detect-libc@2.0.2: {}
 
-  devalue@5.0.0: {}
+  devalue@5.1.1: {}
 
   dir-glob@3.0.1:
     dependencies:
@@ -5202,6 +5206,12 @@ snapshots:
       mrmime: 2.0.0
       totalist: 3.0.1
 
+  sirv@3.0.0:
+    dependencies:
+      '@polka/url': 1.0.0-next.25
+      mrmime: 2.0.0
+      totalist: 3.0.1
+
   slash@3.0.0: {}
 
   smob@1.4.1: {}
diff --git a/sites/svelte-5-preview/package.json b/sites/svelte-5-preview/package.json
index e47bd54bcd..db4dd6d417 100644
--- a/sites/svelte-5-preview/package.json
+++ b/sites/svelte-5-preview/package.json
@@ -15,7 +15,7 @@
     "@fontsource/fira-mono": "^5.0.8",
     "@lezer/common": "^1.2.1",
     "@sveltejs/adapter-vercel": "^5.4.3",
-    "@sveltejs/kit": "^2.5.24",
+    "@sveltejs/kit": "^2.8.3",
     "@sveltejs/site-kit": "6.0.0-next.64",
     "@sveltejs/vite-plugin-svelte": "^4.0.0-next.6",
     "@vercel/speed-insights": "^1.0.0",

From 610bc98f6690209a4a505273fd5e55fc2ba31754 Mon Sep 17 00:00:00 2001
From: Conduitry <git@chor.date>
Date: Tue, 26 Nov 2024 14:59:15 -0500
Subject: [PATCH 108/159] chore: remove obsolete site content (#13818)

---
 ...-11-26-frameworks-without-the-framework.md |  51 ----
 ...17-08-07-the-easiest-way-to-get-started.md |  65 -----
 .../2017-09-06-the-zen-of-just-writing-css.md |  76 -----
 ...per-towards-the-ideal-web-app-framework.md |  80 ------
 documentation/blog/2018-04-18-version-2.md    | 201 -------------
 .../blog/2018-12-26-svelte-css-in-js.md       |  28 --
 ...2018-12-27-virtual-dom-is-pure-overhead.md | 135 ---------
 .../2019-01-31-svelte-on-the-changelog.md     |  21 --
 .../blog/2019-04-15-setting-up-your-editor.md |  65 -----
 .../2019-04-16-svelte-for-new-developers.md   |  95 -------
 .../blog/2019-04-20-write-less-code.md        | 163 -----------
 ...19-04-22-svelte-3-rethinking-reactivity.md | 102 -------
 .../blog/2020-07-17-svelte-and-typescript.md  | 134 ---------
 ...-10-01-whats-new-in-svelte-october-2020.md |  91 ------
 ...11-01-whats-new-in-svelte-november-2020.md |  46 ---
 ...020-11-05-whats-the-deal-with-sveltekit.md |  94 -------
 ...12-01-whats-new-in-svelte-december-2020.md |  75 -----
 ...-01-01-whats-new-in-svelte-january-2021.md |  83 ------
 ...02-01-whats-new-in-svelte-february-2021.md |  85 ------
 ...21-03-01-whats-new-in-svelte-march-2021.md | 101 -------
 .../blog/2021-03-23-sveltekit-beta.md         |  65 -----
 ...21-04-01-whats-new-in-svelte-april-2021.md |  72 -----
 ...2021-05-01-whats-new-in-svelte-may-2021.md |  76 -----
 ...021-06-01-whats-new-in-svelte-june-2021.md |  63 -----
 ...021-07-01-whats-new-in-svelte-july-2021.md |  64 -----
 ...1-08-01-whats-new-in-svelte-august-2021.md |  75 -----
 ...9-01-whats-new-in-svelte-september-2021.md |  84 ------
 ...-10-01-whats-new-in-svelte-october-2021.md | 100 -------
 ...11-01-whats-new-in-svelte-november-2021.md |  88 ------
 ...12-01-whats-new-in-svelte-december-2021.md |  92 ------
 ...-01-01-whats-new-in-svelte-january-2022.md |  81 ------
 ...-01-13-accelerating-sveltes-development.md |  69 -----
 ...02-01-whats-new-in-svelte-february-2022.md | 114 --------
 ...22-03-01-whats-new-in-svelte-march-2022.md |  89 ------
 ...22-04-01-whats-new-in-svelte-april-2022.md | 108 -------
 ...2022-05-01-whats-new-in-svelte-may-2022.md |  92 ------
 ...022-06-01-whats-new-in-svelte-june-2022.md | 117 --------
 ...022-07-01-whats-new-in-svelte-july-2022.md | 101 -------
 ...2-08-01-whats-new-in-svelte-august-2022.md | 125 ---------
 ...9-01-whats-new-in-svelte-september-2022.md | 112 --------
 ...-10-01-whats-new-in-svelte-october-2022.md | 149 ----------
 ...11-01-whats-new-in-svelte-november-2022.md | 122 --------
 ...12-01-whats-new-in-svelte-december-2022.md | 105 -------
 .../2022-12-14-announcing-sveltekit-1.0.md    | 105 -------
 ...-01-01-whats-new-in-svelte-january-2023.md | 112 --------
 ...02-01-whats-new-in-svelte-february-2023.md | 105 -------
 ...023-02-21-streaming-snapshots-sveltekit.md | 207 --------------
 ...23-03-01-whats-new-in-svelte-march-2023.md | 136 ---------
 .../2023-03-09-zero-config-type-safety.md     | 171 -----------
 ...23-04-01-whats-new-in-svelte-april-2023.md | 116 --------
 ...2023-05-01-whats-new-in-svelte-may-2023.md | 117 --------
 ...023-06-01-whats-new-in-svelte-june-2023.md | 103 -------
 documentation/blog/2023-06-22-svelte-4.md     |  59 ----
 .../blog/2023-06-29-svelte-dev-overhaul.md    |  96 -------
 ...023-07-01-whats-new-in-svelte-july-2023.md | 102 -------
 ...3-08-01-whats-new-in-svelte-august-2023.md |  97 -------
 .../blog/2023-08-31-view-transitions.md       | 265 ------------------
 ...9-01-whats-new-in-svelte-september-2023.md |  98 -------
 documentation/blog/2023-09-20-runes.md        | 223 ---------------
 .../blog/2023-10-01-hacktoberfest.md          |  24 --
 ...-10-01-whats-new-in-svelte-october-2023.md |  86 ------
 ...11-01-whats-new-in-svelte-november-2023.md |  89 ------
 .../00-introduction/00-hello-world/App.svelte |   5 -
 .../00-introduction/00-hello-world/meta.json  |   3 -
 .../01-dynamic-attributes/App.svelte          |   7 -
 .../01-dynamic-attributes/meta.json           |   3 -
 .../00-introduction/02-styling/App.svelte     |   9 -
 .../00-introduction/02-styling/meta.json      |   3 -
 .../03-nested-components/App.svelte           |  14 -
 .../03-nested-components/Nested.svelte        |   1 -
 .../03-nested-components/meta.json            |   3 -
 .../00-introduction/04-html-tags/App.svelte   |   5 -
 .../00-introduction/04-html-tags/meta.json    |   3 -
 .../examples/00-introduction/meta.json        |   3 -
 .../00-reactive-assignments/App.svelte        |  12 -
 .../00-reactive-assignments/meta.json         |   3 -
 .../01-reactive-declarations/App.svelte       |  18 --
 .../01-reactive-declarations/meta.json        |   3 -
 .../02-reactive-statements/App.svelte         |  17 --
 .../02-reactive-statements/meta.json          |   3 -
 .../examples/01-reactivity/meta.json          |   3 -
 .../02-props/00-declaring-props/App.svelte    |   5 -
 .../02-props/00-declaring-props/Nested.svelte |   5 -
 .../02-props/00-declaring-props/meta.json     |   3 -
 .../02-props/01-default-values/App.svelte     |   6 -
 .../02-props/01-default-values/Nested.svelte  |   5 -
 .../02-props/01-default-values/meta.json      |   3 -
 .../02-props/02-spread-props/App.svelte       |  12 -
 .../02-props/02-spread-props/Info.svelte      |  12 -
 .../02-props/02-spread-props/meta.json        |   3 -
 documentation/examples/02-props/meta.json     |   3 -
 .../examples/03-logic/00-if-blocks/App.svelte |  15 -
 .../examples/03-logic/00-if-blocks/meta.json  |   3 -
 .../03-logic/01-else-blocks/App.svelte        |  13 -
 .../03-logic/01-else-blocks/meta.json         |   3 -
 .../03-logic/02-else-if-blocks/App.svelte     |  11 -
 .../03-logic/02-else-if-blocks/meta.json      |   3 -
 .../03-logic/03-each-blocks/App.svelte        |  19 --
 .../03-logic/03-each-blocks/meta.json         |   3 -
 .../03-logic/04-keyed-each-blocks/App.svelte  |  33 ---
 .../04-keyed-each-blocks/Thing.svelte         |  24 --
 .../03-logic/04-keyed-each-blocks/meta.json   |   3 -
 .../03-logic/05-await-blocks/App.svelte       |  28 --
 .../03-logic/05-await-blocks/meta.json        |   3 -
 documentation/examples/03-logic/meta.json     |   3 -
 .../04-events/00-dom-events/App.svelte        |  20 --
 .../04-events/00-dom-events/meta.json         |   3 -
 .../04-events/01-inline-handlers/App.svelte   |  15 -
 .../04-events/01-inline-handlers/meta.json    |   3 -
 .../04-events/02-event-modifiers/App.svelte   |   7 -
 .../04-events/02-event-modifiers/meta.json    |   3 -
 .../04-events/03-component-events/App.svelte  |   9 -
 .../03-component-events/Inner.svelte          |  13 -
 .../04-events/03-component-events/meta.json   |   3 -
 .../04-events/04-event-forwarding/App.svelte  |   9 -
 .../04-event-forwarding/Inner.svelte          |  13 -
 .../04-event-forwarding/Outer.svelte          |   5 -
 .../04-events/04-event-forwarding/meta.json   |   3 -
 .../05-dom-event-forwarding/App.svelte        |   9 -
 .../CustomButton.svelte                       |  20 --
 .../05-dom-event-forwarding/meta.json         |   3 -
 documentation/examples/04-events/meta.json    |   3 -
 .../05-bindings/00-text-inputs/App.svelte     |   6 -
 .../05-bindings/00-text-inputs/meta.json      |   3 -
 .../05-bindings/01-numeric-inputs/App.svelte  |  16 --
 .../05-bindings/01-numeric-inputs/meta.json   |   3 -
 .../05-bindings/02-checkbox-inputs/App.svelte |  16 --
 .../05-bindings/02-checkbox-inputs/meta.json  |   3 -
 .../05-bindings/03-group-inputs/App.svelte    |  49 ----
 .../05-bindings/03-group-inputs/meta.json     |   3 -
 .../05-bindings/04-textarea-inputs/App.svelte |  15 -
 .../05-bindings/04-textarea-inputs/meta.json  |   3 -
 .../05-bindings/05-file-inputs/App.svelte     |  26 --
 .../05-bindings/05-file-inputs/meta.json      |   3 -
 .../05-bindings/06-select-bindings/App.svelte |  41 ---
 .../05-bindings/06-select-bindings/meta.json  |   3 -
 .../07-multiple-select-bindings/App.svelte    |  50 ----
 .../07-multiple-select-bindings/meta.json     |   3 -
 .../08-each-block-bindings/App.svelte         |  33 ---
 .../08-each-block-bindings/meta.json          |   3 -
 .../05-bindings/09-media-elements/App.svelte  | 134 ---------
 .../05-bindings/09-media-elements/meta.json   |   3 -
 .../05-bindings/10-dimensions/App.svelte      |  24 --
 .../05-bindings/10-dimensions/meta.json       |   3 -
 .../05-bindings/11-bind-this/App.svelte       |  51 ----
 .../05-bindings/11-bind-this/meta.json        |   3 -
 .../12-component-bindings/App.svelte          |  29 --
 .../12-component-bindings/Keypad.svelte       |  40 ---
 .../12-component-bindings/meta.json           |   3 -
 documentation/examples/05-bindings/meta.json  |   3 -
 .../06-lifecycle/00-onmount/App.svelte        |  39 ---
 .../06-lifecycle/00-onmount/meta.json         |   3 -
 .../06-lifecycle/01-ondestroy/App.svelte      |  12 -
 .../06-lifecycle/01-ondestroy/meta.json       |   3 -
 .../06-lifecycle/01-ondestroy/utils.js        |   9 -
 .../06-lifecycle/02-update/App.svelte         | 113 --------
 .../examples/06-lifecycle/02-update/meta.json |   3 -
 .../examples/06-lifecycle/03-tick/App.svelte  |  31 --
 .../examples/06-lifecycle/03-tick/meta.json   |   3 -
 documentation/examples/06-lifecycle/meta.json |   3 -
 .../07-stores/00-writable-stores/App.svelte   |  18 --
 .../00-writable-stores/Decrementer.svelte     |   9 -
 .../00-writable-stores/Incrementer.svelte     |   9 -
 .../00-writable-stores/Resetter.svelte        |   9 -
 .../07-stores/00-writable-stores/meta.json    |   3 -
 .../07-stores/00-writable-stores/stores.js    |   3 -
 .../01-auto-subscriptions/App.svelte          |  12 -
 .../01-auto-subscriptions/Decrementer.svelte  |   9 -
 .../01-auto-subscriptions/Incrementer.svelte  |   9 -
 .../01-auto-subscriptions/Resetter.svelte     |   9 -
 .../07-stores/01-auto-subscriptions/meta.json |   3 -
 .../07-stores/01-auto-subscriptions/stores.js |   3 -
 .../07-stores/02-readable-stores/App.svelte   |  12 -
 .../07-stores/02-readable-stores/meta.json    |   3 -
 .../07-stores/02-readable-stores/stores.js    |  11 -
 .../07-stores/03-derived-stores/App.svelte    |  18 --
 .../07-stores/03-derived-stores/meta.json     |   3 -
 .../07-stores/03-derived-stores/stores.js     |  15 -
 .../07-stores/04-custom-stores/App.svelte     |   9 -
 .../07-stores/04-custom-stores/meta.json      |   3 -
 .../07-stores/04-custom-stores/stores.js      |  14 -
 documentation/examples/07-stores/meta.json    |   3 -
 .../examples/08-motion/00-tweened/App.svelte  |  28 --
 .../examples/08-motion/00-tweened/meta.json   |   3 -
 .../examples/08-motion/01-spring/App.svelte   |  45 ---
 .../examples/08-motion/01-spring/meta.json    |   3 -
 documentation/examples/08-motion/meta.json    |   3 -
 .../09-transitions/00-transition/App.svelte   |  13 -
 .../09-transitions/00-transition/meta.json    |   3 -
 .../App.svelte                                |  13 -
 .../meta.json                                 |   3 -
 .../09-transitions/02-in-and-out/App.svelte   |  13 -
 .../09-transitions/02-in-and-out/meta.json    |   3 -
 .../03-custom-css-transitions/App.svelte      |  49 ----
 .../03-custom-css-transitions/meta.json       |   3 -
 .../04-custom-js-transitions/App.svelte       |  31 --
 .../04-custom-js-transitions/meta.json        |   3 -
 .../05-transition-events/App.svelte           |  25 --
 .../05-transition-events/meta.json            |   3 -
 .../06-deferred-transitions/App.svelte        | 155 ----------
 .../06-deferred-transitions/images.js         | 102 -------
 .../06-deferred-transitions/meta.json         |   3 -
 .../examples/09-transitions/meta.json         |   3 -
 .../10-animations/00-animate/App.svelte       | 143 ----------
 .../10-animations/00-animate/meta.json        |   3 -
 .../examples/10-animations/meta.json          |   3 -
 .../examples/11-easing/00-easing/App.svelte   | 100 -------
 .../11-easing/00-easing/Controls.svelte       | 176 ------------
 .../examples/11-easing/00-easing/Grid.svelte  |  40 ---
 .../examples/11-easing/00-easing/eases.js     |  43 ---
 .../examples/11-easing/00-easing/meta.json    |   3 -
 documentation/examples/11-easing/meta.json    |   3 -
 .../examples/12-svg/01-clock/App.svelte       |  85 ------
 .../examples/12-svg/01-clock/meta.json        |   3 -
 .../examples/12-svg/02-bar-chart/App.svelte   | 118 --------
 .../examples/12-svg/02-bar-chart/meta.json    |   3 -
 .../examples/12-svg/03-area-chart/App.svelte  | 117 --------
 .../examples/12-svg/03-area-chart/data.js     |  45 ---
 .../examples/12-svg/03-area-chart/meta.json   |   3 -
 .../examples/12-svg/04-scatterplot/App.svelte |  24 --
 .../12-svg/04-scatterplot/Scatterplot.svelte  |  91 ------
 .../examples/12-svg/04-scatterplot/data.js    |  54 ----
 .../examples/12-svg/04-scatterplot/meta.json  |   3 -
 .../12-svg/05-svg-transitions/App.svelte      |  68 -----
 .../05-svg-transitions/custom-transitions.js  |  14 -
 .../12-svg/05-svg-transitions/meta.json       |   3 -
 .../12-svg/05-svg-transitions/shape.js        |   2 -
 documentation/examples/12-svg/meta.json       |   3 -
 .../examples/13-actions/00-actions/App.svelte |  30 --
 .../13-actions/00-actions/click_outside.js    |  15 -
 .../examples/13-actions/00-actions/meta.json  |   3 -
 .../App.svelte                                |  21 --
 .../longpress.js                              |  26 --
 .../01-adding-parameters-to-actions/meta.json |   3 -
 .../13-actions/03-actions-pannable/App.svelte |  55 ----
 .../13-actions/03-actions-pannable/meta.json  |   3 -
 .../03-actions-pannable/pannable.js           |  53 ----
 documentation/examples/13-actions/meta.json   |   3 -
 .../examples/14-classes/00-classes/App.svelte |  20 --
 .../examples/14-classes/00-classes/meta.json  |   3 -
 .../14-classes/01-class-shorthand/App.svelte  |  18 --
 .../14-classes/01-class-shorthand/meta.json   |   3 -
 documentation/examples/14-classes/meta.json   |   3 -
 .../15-composition/00-slots/App.svelte        |   8 -
 .../15-composition/00-slots/Box.svelte        |  14 -
 .../15-composition/00-slots/meta.json         |   3 -
 .../01-slot-fallbacks/App.svelte              |  10 -
 .../01-slot-fallbacks/Box.svelte              |  16 --
 .../01-slot-fallbacks/meta.json               |   3 -
 .../15-composition/02-named-slots/App.svelte  |  12 -
 .../02-named-slots/ContactCard.svelte         |  54 ----
 .../15-composition/02-named-slots/meta.json   |   3 -
 .../15-composition/03-slot-props/App.svelte   |  51 ----
 .../03-slot-props/Hoverable.svelte            |  16 --
 .../15-composition/03-slot-props/meta.json    |   3 -
 .../04-conditional-slots/App.svelte           |  13 -
 .../04-conditional-slots/Profile.svelte       |  24 --
 .../04-conditional-slots/meta.json            |   3 -
 .../15-composition/05-modal/App.svelte        |  31 --
 .../15-composition/05-modal/Modal.svelte      |  64 -----
 .../15-composition/05-modal/meta.json         |   3 -
 .../examples/15-composition/meta.json         |   3 -
 .../16-context/00-context-api/App.svelte      |  13 -
 .../16-context/00-context-api/Map.svelte      |  45 ---
 .../00-context-api/MapMarker.svelte           |  15 -
 .../16-context/00-context-api/mapbox.js       |   8 -
 .../16-context/00-context-api/meta.json       |   3 -
 documentation/examples/16-context/meta.json   |   3 -
 .../00-svelte-self/App.svelte                 |  39 ---
 .../00-svelte-self/File.svelte                |  14 -
 .../00-svelte-self/Folder.svelte              |  55 ----
 .../00-svelte-self/meta.json                  |   3 -
 .../01-svelte-component/App.svelte            |  21 --
 .../01-svelte-component/BlueThing.svelte      |   7 -
 .../01-svelte-component/GreenThing.svelte     |   7 -
 .../01-svelte-component/RedThing.svelte       |   7 -
 .../01-svelte-component/meta.json             |   3 -
 .../02-svelte-element/App.svelte              |  12 -
 .../02-svelte-element/meta.json               |   3 -
 .../03-svelte-window/App.svelte               |  42 ---
 .../03-svelte-window/meta.json                |   3 -
 .../04-svelte-window-bindings/App.svelte      |  86 ------
 .../04-svelte-window-bindings/meta.json       |   3 -
 .../05-svelte-document/App.svelte             |  10 -
 .../05-svelte-document/meta.json              |   3 -
 .../06-svelte-body/App.svelte                 |  34 ---
 .../06-svelte-body/meta.json                  |   3 -
 .../07-svelte-head/App.svelte                 |   5 -
 .../07-svelte-head/meta.json                  |   3 -
 .../examples/17-special-elements/meta.json    |   3 -
 .../01-module-exports/App.svelte              |  45 ---
 .../01-module-exports/AudioPlayer.svelte      |  57 ----
 .../01-module-exports/meta.json               |   3 -
 .../examples/18-module-context/meta.json      |   3 -
 .../examples/19-debugging/00-debug/App.svelte |  13 -
 .../examples/19-debugging/00-debug/meta.json  |   3 -
 documentation/examples/19-debugging/meta.json |   3 -
 .../20-7guis/01-7guis-counter/App.svelte      |   7 -
 .../20-7guis/01-7guis-counter/meta.json       |   3 -
 .../20-7guis/02-7guis-temperature/App.svelte  |  24 --
 .../20-7guis/02-7guis-temperature/meta.json   |   3 -
 .../03-7guis-flight-booker/App.svelte         |  58 ----
 .../20-7guis/03-7guis-flight-booker/meta.json |   3 -
 .../20-7guis/04-7guis-timer/App.svelte        |  37 ---
 .../20-7guis/04-7guis-timer/meta.json         |   3 -
 .../20-7guis/05-7guis-crud/App.svelte         |  90 ------
 .../examples/20-7guis/05-7guis-crud/meta.json |   3 -
 .../20-7guis/06-7guis-circles/App.svelte      | 129 ---------
 .../20-7guis/06-7guis-circles/meta.json       |   3 -
 documentation/examples/20-7guis/meta.json     |   3 -
 .../01-hacker-news/App.svelte                 |  53 ----
 .../01-hacker-news/Comment.svelte             |  32 ---
 .../01-hacker-news/Item.svelte                |  43 ---
 .../01-hacker-news/List.svelte                |  50 ----
 .../01-hacker-news/Summary.svelte             |  36 ---
 .../21-miscellaneous/01-hacker-news/meta.json |   3 -
 .../02-immutable-data/App.svelte              |  36 ---
 .../02-immutable-data/ImmutableTodo.svelte    |  30 --
 .../02-immutable-data/MutableTodo.svelte      |  28 --
 .../02-immutable-data/flash.js                |  13 -
 .../02-immutable-data/meta.json               |   3 -
 .../examples/21-miscellaneous/meta.json       |   3 -
 .../20181225-blog-svelte-css-in-js/App.svelte |  17 --
 .../Hero.svelte                               |  15 -
 .../20181225-blog-svelte-css-in-js/meta.json  |   3 -
 .../20181225-blog-svelte-css-in-js/styles.js  |  35 ---
 .../20190420-blog-write-less-code/App.svelte  |   9 -
 .../20190420-blog-write-less-code/meta.json   |   3 -
 documentation/examples/99-embeds/meta.json    |   1 -
 .../01-basics/app-a/App.svelte                |   1 -
 .../01-introduction/01-basics/text.md         |  29 --
 .../02-adding-data/app-a/App.svelte           |   1 -
 .../02-adding-data/app-b/App.svelte           |   5 -
 .../01-introduction/02-adding-data/text.md    |  23 --
 .../03-dynamic-attributes/app-a/App.svelte    |   5 -
 .../03-dynamic-attributes/app-b/App.svelte    |   6 -
 .../03-dynamic-attributes/text.md             |  35 ---
 .../04-styling/app-a/App.svelte               |   5 -
 .../04-styling/app-b/App.svelte               |   9 -
 .../01-introduction/04-styling/text.md        |  19 --
 .../05-nested-components/app-a/App.svelte     |   9 -
 .../05-nested-components/app-a/Nested.svelte  |   1 -
 .../05-nested-components/app-b/App.svelte     |  14 -
 .../05-nested-components/app-b/Nested.svelte  |   1 -
 .../05-nested-components/text.md              |  28 --
 .../06-making-an-app/app-a/App.svelte         |   1 -
 .../01-introduction/06-making-an-app/text.md  |  37 ---
 .../tutorial/01-introduction/meta.json        |   3 -
 .../01-reactive-assignments/app-a/App.svelte  |  18 --
 .../01-reactive-assignments/app-b/App.svelte  |  18 --
 .../01-reactive-assignments/text.md           |  21 --
 .../02-reactive-declarations/app-a/App.svelte |  12 -
 .../02-reactive-declarations/app-b/App.svelte |  15 -
 .../02-reactive-declarations/text.md          |  20 --
 .../03-reactive-statements/app-a/App.svelte   |  12 -
 .../03-reactive-statements/app-b/App.svelte   |  17 --
 .../03-reactive-statements/text.md            |  27 --
 .../app-a/App.svelte                          |  13 -
 .../app-b/App.svelte                          |  13 -
 .../04-updating-arrays-and-objects/text.md    |  54 ----
 .../tutorial/02-reactivity/meta.json          |   3 -
 .../01-declaring-props/app-a/App.svelte       |   5 -
 .../01-declaring-props/app-a/Nested.svelte    |   5 -
 .../01-declaring-props/app-b/App.svelte       |   5 -
 .../01-declaring-props/app-b/Nested.svelte    |   5 -
 .../03-props/01-declaring-props/text.md       |  15 -
 .../02-default-values/app-a/App.svelte        |   5 -
 .../02-default-values/app-a/Nested.svelte     |   5 -
 .../02-default-values/app-b/App.svelte        |   6 -
 .../02-default-values/app-b/Nested.svelte     |   5 -
 .../03-props/02-default-values/text.md        |  18 --
 .../03-props/03-spread-props/app-a/App.svelte |  12 -
 .../03-spread-props/app-a/Info.svelte         |  12 -
 .../03-props/03-spread-props/app-b/App.svelte |  12 -
 .../03-spread-props/app-b/Info.svelte         |  12 -
 .../tutorial/03-props/03-spread-props/text.md |  11 -
 documentation/tutorial/03-props/meta.json     |   3 -
 .../04-logic/01-if-blocks/app-a/App.svelte    |  11 -
 .../04-logic/01-if-blocks/app-b/App.svelte    |  15 -
 .../tutorial/04-logic/01-if-blocks/text.md    |  19 --
 .../04-logic/02-else-blocks/app-a/App.svelte  |  15 -
 .../04-logic/02-else-blocks/app-b/App.svelte  |  13 -
 .../tutorial/04-logic/02-else-blocks/text.md  |  15 -
 .../03-else-if-blocks/app-a/App.svelte        |   9 -
 .../03-else-if-blocks/app-b/App.svelte        |  11 -
 .../04-logic/03-else-if-blocks/text.md        |  15 -
 .../04-logic/04-each-blocks/app-a/App.svelte  |  19 --
 .../04-logic/04-each-blocks/app-b/App.svelte  |  19 --
 .../tutorial/04-logic/04-each-blocks/text.md  |  33 ---
 .../05-keyed-each-blocks/app-a/App.svelte     |  21 --
 .../05-keyed-each-blocks/app-a/Thing.svelte   |  40 ---
 .../05-keyed-each-blocks/app-b/App.svelte     |  21 --
 .../05-keyed-each-blocks/app-b/Thing.svelte   |  40 ---
 .../04-logic/05-keyed-each-blocks/text.md     |  21 --
 .../04-logic/06-await-blocks/app-a/App.svelte |  23 --
 .../04-logic/06-await-blocks/app-b/App.svelte |  28 --
 .../tutorial/04-logic/06-await-blocks/text.md |  25 --
 documentation/tutorial/04-logic/meta.json     |   3 -
 .../05-events/01-dom-events/app-a/App.svelte  |  19 --
 .../05-events/01-dom-events/app-b/App.svelte  |  19 --
 .../tutorial/05-events/01-dom-events/text.md  |  11 -
 .../02-inline-handlers/app-a/App.svelte       |  19 --
 .../02-inline-handlers/app-b/App.svelte       |  14 -
 .../05-events/02-inline-handlers/text.md      |  13 -
 .../03-event-modifiers/app-a/App.svelte       |   7 -
 .../03-event-modifiers/app-b/App.svelte       |   7 -
 .../05-events/03-event-modifiers/text.md      |  28 --
 .../04-component-events/app-a/App.svelte      |   9 -
 .../04-component-events/app-a/Inner.svelte    |   7 -
 .../04-component-events/app-b/App.svelte      |   9 -
 .../04-component-events/app-b/Inner.svelte    |  13 -
 .../05-events/04-component-events/text.md     |  27 --
 .../05-event-forwarding/app-a/App.svelte      |   9 -
 .../05-event-forwarding/app-a/Inner.svelte    |  13 -
 .../05-event-forwarding/app-a/Outer.svelte    |   5 -
 .../05-event-forwarding/app-b/App.svelte      |   9 -
 .../05-event-forwarding/app-b/Inner.svelte    |  13 -
 .../05-event-forwarding/app-b/Outer.svelte    |   5 -
 .../05-events/05-event-forwarding/text.md     |  34 ---
 .../06-dom-event-forwarding/app-a/App.svelte  |   9 -
 .../app-a/CustomButton.svelte                 |  20 --
 .../06-dom-event-forwarding/app-b/App.svelte  |   9 -
 .../app-b/CustomButton.svelte                 |  20 --
 .../05-events/06-dom-event-forwarding/text.md |  11 -
 documentation/tutorial/05-events/meta.json    |   3 -
 .../01-text-inputs/app-a/App.svelte           |   7 -
 .../01-text-inputs/app-b/App.svelte           |   7 -
 .../06-bindings/01-text-inputs/text.md        |  15 -
 .../02-numeric-inputs/app-a/App.svelte        |  26 --
 .../02-numeric-inputs/app-b/App.svelte        |  26 --
 .../06-bindings/02-numeric-inputs/text.md     |  12 -
 .../03-checkbox-inputs/app-a/App.svelte       |  16 --
 .../03-checkbox-inputs/app-b/App.svelte       |  16 --
 .../06-bindings/03-checkbox-inputs/text.md    |   9 -
 .../04-group-inputs/app-a/App.svelte          |  55 ----
 .../04-group-inputs/app-b/App.svelte          |  49 ----
 .../06-bindings/04-group-inputs/text.md       |  32 ---
 .../05-textarea-inputs/app-a/App.svelte       |  15 -
 .../05-textarea-inputs/app-b/App.svelte       |  15 -
 .../06-bindings/05-textarea-inputs/text.md    |  18 --
 .../06-select-bindings/app-a/App.svelte       |  41 ---
 .../06-select-bindings/app-b/App.svelte       |  41 ---
 .../06-bindings/06-select-bindings/text.md    |  13 -
 .../app-a/App.svelte                          |  49 ----
 .../app-b/App.svelte                          |  50 ----
 .../07-multiple-select-bindings/text.md       |  21 --
 .../app-a/App.svelte                          |  15 -
 .../app-b/App.svelte                          |  15 -
 .../08-contenteditable-bindings/text.md       |  15 -
 .../09-each-block-bindings/app-a/App.svelte   |  39 ---
 .../09-each-block-bindings/app-b/App.svelte   |  39 ---
 .../09-each-block-bindings/text.md            |  17 --
 .../10-media-elements/app-a/App.svelte        | 131 ---------
 .../10-media-elements/app-b/App.svelte        | 134 ---------
 .../06-bindings/10-media-elements/text.md     |  48 ----
 .../11-dimensions/app-a/App.svelte            |  27 --
 .../11-dimensions/app-b/App.svelte            |  27 --
 .../06-bindings/11-dimensions/text.md         |  17 --
 .../06-bindings/12-bind-this/app-a/App.svelte |  49 ----
 .../06-bindings/12-bind-this/app-b/App.svelte |  49 ----
 .../tutorial/06-bindings/12-bind-this/text.md |  11 -
 .../13-component-bindings/app-a/App.svelte    |  14 -
 .../13-component-bindings/app-a/Keypad.svelte |  40 ---
 .../13-component-bindings/app-b/App.svelte    |  14 -
 .../13-component-bindings/app-b/Keypad.svelte |  40 ---
 .../06-bindings/13-component-bindings/text.md |  13 -
 .../14-component-this/app-a/App.svelte        |   5 -
 .../14-component-this/app-a/InputField.svelte |   9 -
 .../14-component-this/app-b/App.svelte        |   9 -
 .../14-component-this/app-b/InputField.svelte |   9 -
 .../06-bindings/14-component-this/text.md     |  21 --
 documentation/tutorial/06-bindings/meta.json  |   3 -
 .../07-lifecycle/01-onmount/app-a/App.svelte  |  32 ---
 .../07-lifecycle/01-onmount/app-b/App.svelte  |  39 ---
 .../tutorial/07-lifecycle/01-onmount/text.md  |  28 --
 .../02-ondestroy/app-a/App.svelte             |  21 --
 .../02-ondestroy/app-a/Timer.svelte           |  20 --
 .../07-lifecycle/02-ondestroy/app-a/utils.js  |   9 -
 .../02-ondestroy/app-b/App.svelte             |  21 --
 .../02-ondestroy/app-b/Timer.svelte           |  20 --
 .../07-lifecycle/02-ondestroy/app-b/utils.js  |   9 -
 .../07-lifecycle/02-ondestroy/text.md         |  45 ---
 .../07-lifecycle/03-update/app-a/App.svelte   | 113 --------
 .../07-lifecycle/03-update/app-b/App.svelte   | 113 --------
 .../tutorial/07-lifecycle/03-update/text.md   |  24 --
 .../07-lifecycle/04-tick/app-a/App.svelte     |  29 --
 .../07-lifecycle/04-tick/app-b/App.svelte     |  31 --
 .../tutorial/07-lifecycle/04-tick/text.md     |  21 --
 documentation/tutorial/07-lifecycle/meta.json |   3 -
 .../01-writable-stores/app-a/App.svelte       |  18 --
 .../app-a/Decrementer.svelte                  |   9 -
 .../app-a/Incrementer.svelte                  |   9 -
 .../01-writable-stores/app-a/Resetter.svelte  |   9 -
 .../01-writable-stores/app-a/stores.js        |   3 -
 .../01-writable-stores/app-b/App.svelte       |  18 --
 .../app-b/Decrementer.svelte                  |   9 -
 .../app-b/Incrementer.svelte                  |   9 -
 .../01-writable-stores/app-b/Resetter.svelte  |   9 -
 .../01-writable-stores/app-b/stores.js        |   3 -
 .../08-stores/01-writable-stores/text.md      |  27 --
 .../02-auto-subscriptions/app-a/App.svelte    |  18 --
 .../app-a/Decrementer.svelte                  |   9 -
 .../app-a/Incrementer.svelte                  |   9 -
 .../app-a/Resetter.svelte                     |   9 -
 .../02-auto-subscriptions/app-a/stores.js     |   3 -
 .../02-auto-subscriptions/app-b/App.svelte    |  12 -
 .../app-b/Decrementer.svelte                  |   9 -
 .../app-b/Incrementer.svelte                  |   9 -
 .../app-b/Resetter.svelte                     |   9 -
 .../02-auto-subscriptions/app-b/stores.js     |   3 -
 .../08-stores/02-auto-subscriptions/text.md   |  56 ----
 .../03-readable-stores/app-a/App.svelte       |  12 -
 .../03-readable-stores/app-a/stores.js        |   7 -
 .../03-readable-stores/app-b/App.svelte       |  12 -
 .../03-readable-stores/app-b/stores.js        |  11 -
 .../08-stores/03-readable-stores/text.md      |  19 --
 .../04-derived-stores/app-a/App.svelte        |  18 --
 .../04-derived-stores/app-a/stores.js         |  15 -
 .../04-derived-stores/app-b/App.svelte        |  18 --
 .../04-derived-stores/app-b/stores.js         |  15 -
 .../08-stores/04-derived-stores/text.md       |  11 -
 .../05-custom-stores/app-a/App.svelte         |   9 -
 .../05-custom-stores/app-a/stores.js          |  14 -
 .../05-custom-stores/app-b/App.svelte         |   9 -
 .../05-custom-stores/app-b/stores.js          |  14 -
 .../08-stores/05-custom-stores/text.md        |  20 --
 .../06-store-bindings/app-a/App.svelte        |   6 -
 .../06-store-bindings/app-a/stores.js         |   5 -
 .../06-store-bindings/app-b/App.svelte        |   8 -
 .../06-store-bindings/app-b/stores.js         |   5 -
 .../08-stores/06-store-bindings/text.md       |  21 --
 documentation/tutorial/08-stores/meta.json    |   3 -
 .../09-motion/01-tweened/app-a/App.svelte     |  24 --
 .../09-motion/01-tweened/app-b/App.svelte     |  28 --
 .../tutorial/09-motion/01-tweened/text.md     |  40 ---
 .../09-motion/02-spring/app-a/App.svelte      |  37 ---
 .../09-motion/02-spring/app-b/App.svelte      |  44 ---
 .../tutorial/09-motion/02-spring/text.md      |  32 ---
 documentation/tutorial/09-motion/meta.json    |   3 -
 .../01-transition/app-a/App.svelte            |  12 -
 .../01-transition/app-b/App.svelte            |  13 -
 .../10-transitions/01-transition/text.md      |  20 --
 .../app-a/App.svelte                          |  13 -
 .../app-b/App.svelte                          |  13 -
 .../text.md                                   |  20 --
 .../03-in-and-out/app-a/App.svelte            |  13 -
 .../03-in-and-out/app-b/App.svelte            |  13 -
 .../10-transitions/03-in-and-out/text.md      |  17 --
 .../app-a/App.svelte                          |  38 ---
 .../app-b/App.svelte                          |  49 ----
 .../04-custom-css-transitions/text.md         |  77 -----
 .../05-custom-js-transitions/app-a/App.svelte |  18 --
 .../05-custom-js-transitions/app-b/App.svelte |  31 --
 .../05-custom-js-transitions/text.md          |  26 --
 .../06-transition-events/app-a/App.svelte     |  17 --
 .../06-transition-events/app-b/App.svelte     |  25 --
 .../06-transition-events/text.md              |  17 --
 .../07-global-transitions/app-a/App.svelte    |  31 --
 .../07-global-transitions/app-b/App.svelte    |  31 --
 .../07-global-transitions/text.md             |  17 --
 .../08-deferred-transitions/app-a/App.svelte  | 150 ----------
 .../08-deferred-transitions/app-b/App.svelte  | 150 ----------
 .../08-deferred-transitions/text.md           |  30 --
 .../09-key-blocks/app-a/App.svelte            |  20 --
 .../09-key-blocks/app-b/App.svelte            |  22 --
 .../10-transitions/09-key-blocks/text.md      |  18 --
 .../tutorial/10-transitions/meta.json         |   3 -
 .../11-animations/01-animate/app-a/App.svelte | 150 ----------
 .../11-animations/01-animate/app-b/App.svelte | 151 ----------
 .../tutorial/11-animations/01-animate/text.md |  37 ---
 .../tutorial/11-animations/meta.json          |   3 -
 .../12-actions/01-actions/app-a/App.svelte    |  28 --
 .../01-actions/app-a/click_outside.js         |   9 -
 .../12-actions/01-actions/app-b/App.svelte    |  30 --
 .../01-actions/app-b/click_outside.js         |  15 -
 .../tutorial/12-actions/01-actions/text.md    |  46 ---
 .../app-a/App.svelte                          |  19 --
 .../app-a/longpress.js                        |  24 --
 .../app-b/App.svelte                          |  21 --
 .../app-b/longpress.js                        |  27 --
 .../02-adding-parameters-to-actions/text.md   |  44 ---
 documentation/tutorial/12-actions/meta.json   |   3 -
 .../01-classes/app-a/App.svelte               |  20 --
 .../01-classes/app-b/App.svelte               |  20 --
 .../13-advanced-styling/01-classes/text.md    |  25 --
 .../02-class-shorthand/app-a/App.svelte       |  18 --
 .../02-class-shorthand/app-b/App.svelte       |  18 --
 .../02-class-shorthand/text.md                |  20 --
 .../03-inline-styles/app-a/App.svelte         |  15 -
 .../03-inline-styles/app-b/App.svelte         |  15 -
 .../03-inline-styles/text.md                  |  10 -
 .../04-style-directive/app-a/App.svelte       |  15 -
 .../04-style-directive/app-b/App.svelte       |  15 -
 .../04-style-directive/text.md                |  18 --
 .../tutorial/13-advanced-styling/meta.json    |   3 -
 .../14-composition/01-slots/app-a/App.svelte  |   7 -
 .../14-composition/01-slots/app-a/Box.svelte  |  14 -
 .../14-composition/01-slots/app-b/App.svelte  |   8 -
 .../14-composition/01-slots/app-b/Box.svelte  |  14 -
 .../tutorial/14-composition/01-slots/text.md  |  28 --
 .../02-slot-fallbacks/app-a/App.svelte        |   8 -
 .../02-slot-fallbacks/app-a/Box.svelte        |  14 -
 .../02-slot-fallbacks/app-b/App.svelte        |  10 -
 .../02-slot-fallbacks/app-b/Box.svelte        |  16 --
 .../14-composition/02-slot-fallbacks/text.md  |  24 --
 .../03-named-slots/app-a/App.svelte           |   7 -
 .../03-named-slots/app-a/ContactCard.svelte   |  54 ----
 .../03-named-slots/app-b/App.svelte           |  12 -
 .../03-named-slots/app-b/ContactCard.svelte   |  54 ----
 .../14-composition/03-named-slots/text.md     |  42 ---
 .../04-optional-slots/app-a/App.svelte        |  47 ----
 .../04-optional-slots/app-a/Comment.svelte    |  59 ----
 .../04-optional-slots/app-a/Project.svelte    |  62 ----
 .../04-optional-slots/app-b/App.svelte        |  47 ----
 .../04-optional-slots/app-b/Comment.svelte    |  59 ----
 .../04-optional-slots/app-b/Project.svelte    |  64 -----
 .../14-composition/04-optional-slots/text.md  |  28 --
 .../05-slot-props/app-a/App.svelte            |  27 --
 .../05-slot-props/app-a/Hoverable.svelte      |  15 -
 .../05-slot-props/app-b/App.svelte            |  47 ----
 .../05-slot-props/app-b/Hoverable.svelte      |  15 -
 .../14-composition/05-slot-props/text.md      |  49 ----
 .../tutorial/14-composition/meta.json         |   3 -
 .../01-context-api/app-a/App.svelte           |  13 -
 .../01-context-api/app-a/Map.svelte           |  44 ---
 .../01-context-api/app-a/MapMarker.svelte     |  13 -
 .../15-context/01-context-api/app-a/mapbox.js |   8 -
 .../01-context-api/app-b/App.svelte           |  13 -
 .../01-context-api/app-b/Map.svelte           |  46 ---
 .../01-context-api/app-b/MapMarker.svelte     |  15 -
 .../15-context/01-context-api/app-b/mapbox.js |   8 -
 .../15-context/01-context-api/text.md         |  56 ----
 documentation/tutorial/15-context/meta.json   |   3 -
 .../01-svelte-self/app-a/App.svelte           |  29 --
 .../01-svelte-self/app-a/File.svelte          |  14 -
 .../01-svelte-self/app-a/Folder.svelte        |  54 ----
 .../01-svelte-self/app-b/App.svelte           |  29 --
 .../01-svelte-self/app-b/File.svelte          |  14 -
 .../01-svelte-self/app-b/Folder.svelte        |  54 ----
 .../01-svelte-self/text.md                    |  25 --
 .../02-svelte-component/app-a/App.svelte      |  27 --
 .../app-a/BlueThing.svelte                    |   7 -
 .../app-a/GreenThing.svelte                   |   7 -
 .../02-svelte-component/app-a/RedThing.svelte |   7 -
 .../02-svelte-component/app-b/App.svelte      |  21 --
 .../app-b/BlueThing.svelte                    |   7 -
 .../app-b/GreenThing.svelte                   |   7 -
 .../02-svelte-component/app-b/RedThing.svelte |   7 -
 .../02-svelte-component/text.md               |  23 --
 .../03-svelte-element/app-a/App.svelte        |  18 --
 .../03-svelte-element/app-b/App.svelte        |  12 -
 .../03-svelte-element/text.md                 |  23 --
 .../04-svelte-window/app-a/App.svelte         |  42 ---
 .../04-svelte-window/app-b/App.svelte         |  42 ---
 .../04-svelte-window/text.md                  |  13 -
 .../app-a/App.svelte                          |  86 ------
 .../app-b/App.svelte                          |  86 ------
 .../05-svelte-window-bindings/text.md         |  21 --
 .../06-svelte-document/app-a/App.svelte       |  10 -
 .../06-svelte-document/app-b/App.svelte       |  10 -
 .../06-svelte-document/text.md                |  13 -
 .../07-svelte-body/app-a/App.svelte           |  34 ---
 .../07-svelte-body/app-b/App.svelte           |  34 ---
 .../07-svelte-body/text.md                    |  15 -
 .../08-svelte-head/app-a/App.svelte           |   5 -
 .../08-svelte-head/app-b/App.svelte           |   5 -
 .../08-svelte-head/text.md                    |  13 -
 .../09-svelte-options/app-a/App.svelte        |  30 --
 .../09-svelte-options/app-a/Todo.svelte       |  28 --
 .../09-svelte-options/app-a/flash.js          |  13 -
 .../09-svelte-options/app-b/App.svelte        |  30 --
 .../09-svelte-options/app-b/Todo.svelte       |  30 --
 .../09-svelte-options/app-b/flash.js          |  13 -
 .../09-svelte-options/text.md                 |  30 --
 .../10-svelte-fragment/app-a/App.svelte       |  10 -
 .../10-svelte-fragment/app-a/Box.svelte       |  20 --
 .../10-svelte-fragment/app-b/App.svelte       |  10 -
 .../10-svelte-fragment/app-b/Box.svelte       |  20 --
 .../10-svelte-fragment/text.md                |  35 ---
 .../tutorial/16-special-elements/meta.json    |   3 -
 .../01-sharing-code/app-a/App.svelte          |  43 ---
 .../01-sharing-code/app-a/AudioPlayer.svelte  |  38 ---
 .../01-sharing-code/app-b/App.svelte          |  43 ---
 .../01-sharing-code/app-b/AudioPlayer.svelte  |  43 ---
 .../17-module-context/01-sharing-code/text.md |  24 --
 .../02-module-exports/app-a/App.svelte        |  45 ---
 .../app-a/AudioPlayer.svelte                  |  51 ----
 .../02-module-exports/app-b/App.svelte        |  45 ---
 .../app-b/AudioPlayer.svelte                  |  57 ----
 .../02-module-exports/text.md                 |  33 ---
 .../tutorial/17-module-context/meta.json      |   3 -
 .../18-special-tags/01-debug/app-a/App.svelte |  13 -
 .../18-special-tags/01-debug/app-b/App.svelte |  13 -
 .../tutorial/18-special-tags/01-debug/text.md |  15 -
 .../02-html-tags/app-a/App.svelte             |   5 -
 .../02-html-tags/app-b/App.svelte             |   5 -
 .../18-special-tags/02-html-tags/text.md      |  15 -
 .../tutorial/18-special-tags/meta.json        |   3 -
 .../01-congratulations/app-a/App.svelte       |  51 ----
 .../19-next-steps/01-congratulations/text.md  |  11 -
 .../tutorial/19-next-steps/meta.json          |   3 -
 701 files changed, 19792 deletions(-)
 delete mode 100644 documentation/blog/2016-11-26-frameworks-without-the-framework.md
 delete mode 100644 documentation/blog/2017-08-07-the-easiest-way-to-get-started.md
 delete mode 100644 documentation/blog/2017-09-06-the-zen-of-just-writing-css.md
 delete mode 100644 documentation/blog/2017-12-31-sapper-towards-the-ideal-web-app-framework.md
 delete mode 100644 documentation/blog/2018-04-18-version-2.md
 delete mode 100644 documentation/blog/2018-12-26-svelte-css-in-js.md
 delete mode 100644 documentation/blog/2018-12-27-virtual-dom-is-pure-overhead.md
 delete mode 100644 documentation/blog/2019-01-31-svelte-on-the-changelog.md
 delete mode 100644 documentation/blog/2019-04-15-setting-up-your-editor.md
 delete mode 100644 documentation/blog/2019-04-16-svelte-for-new-developers.md
 delete mode 100644 documentation/blog/2019-04-20-write-less-code.md
 delete mode 100644 documentation/blog/2019-04-22-svelte-3-rethinking-reactivity.md
 delete mode 100644 documentation/blog/2020-07-17-svelte-and-typescript.md
 delete mode 100644 documentation/blog/2020-10-01-whats-new-in-svelte-october-2020.md
 delete mode 100644 documentation/blog/2020-11-01-whats-new-in-svelte-november-2020.md
 delete mode 100644 documentation/blog/2020-11-05-whats-the-deal-with-sveltekit.md
 delete mode 100644 documentation/blog/2020-12-01-whats-new-in-svelte-december-2020.md
 delete mode 100644 documentation/blog/2021-01-01-whats-new-in-svelte-january-2021.md
 delete mode 100644 documentation/blog/2021-02-01-whats-new-in-svelte-february-2021.md
 delete mode 100644 documentation/blog/2021-03-01-whats-new-in-svelte-march-2021.md
 delete mode 100644 documentation/blog/2021-03-23-sveltekit-beta.md
 delete mode 100644 documentation/blog/2021-04-01-whats-new-in-svelte-april-2021.md
 delete mode 100644 documentation/blog/2021-05-01-whats-new-in-svelte-may-2021.md
 delete mode 100644 documentation/blog/2021-06-01-whats-new-in-svelte-june-2021.md
 delete mode 100644 documentation/blog/2021-07-01-whats-new-in-svelte-july-2021.md
 delete mode 100644 documentation/blog/2021-08-01-whats-new-in-svelte-august-2021.md
 delete mode 100644 documentation/blog/2021-09-01-whats-new-in-svelte-september-2021.md
 delete mode 100644 documentation/blog/2021-10-01-whats-new-in-svelte-october-2021.md
 delete mode 100644 documentation/blog/2021-11-01-whats-new-in-svelte-november-2021.md
 delete mode 100644 documentation/blog/2021-12-01-whats-new-in-svelte-december-2021.md
 delete mode 100644 documentation/blog/2022-01-01-whats-new-in-svelte-january-2022.md
 delete mode 100644 documentation/blog/2022-01-13-accelerating-sveltes-development.md
 delete mode 100644 documentation/blog/2022-02-01-whats-new-in-svelte-february-2022.md
 delete mode 100644 documentation/blog/2022-03-01-whats-new-in-svelte-march-2022.md
 delete mode 100644 documentation/blog/2022-04-01-whats-new-in-svelte-april-2022.md
 delete mode 100644 documentation/blog/2022-05-01-whats-new-in-svelte-may-2022.md
 delete mode 100644 documentation/blog/2022-06-01-whats-new-in-svelte-june-2022.md
 delete mode 100644 documentation/blog/2022-07-01-whats-new-in-svelte-july-2022.md
 delete mode 100644 documentation/blog/2022-08-01-whats-new-in-svelte-august-2022.md
 delete mode 100644 documentation/blog/2022-09-01-whats-new-in-svelte-september-2022.md
 delete mode 100644 documentation/blog/2022-10-01-whats-new-in-svelte-october-2022.md
 delete mode 100644 documentation/blog/2022-11-01-whats-new-in-svelte-november-2022.md
 delete mode 100644 documentation/blog/2022-12-01-whats-new-in-svelte-december-2022.md
 delete mode 100644 documentation/blog/2022-12-14-announcing-sveltekit-1.0.md
 delete mode 100644 documentation/blog/2023-01-01-whats-new-in-svelte-january-2023.md
 delete mode 100644 documentation/blog/2023-02-01-whats-new-in-svelte-february-2023.md
 delete mode 100644 documentation/blog/2023-02-21-streaming-snapshots-sveltekit.md
 delete mode 100644 documentation/blog/2023-03-01-whats-new-in-svelte-march-2023.md
 delete mode 100644 documentation/blog/2023-03-09-zero-config-type-safety.md
 delete mode 100644 documentation/blog/2023-04-01-whats-new-in-svelte-april-2023.md
 delete mode 100644 documentation/blog/2023-05-01-whats-new-in-svelte-may-2023.md
 delete mode 100644 documentation/blog/2023-06-01-whats-new-in-svelte-june-2023.md
 delete mode 100644 documentation/blog/2023-06-22-svelte-4.md
 delete mode 100644 documentation/blog/2023-06-29-svelte-dev-overhaul.md
 delete mode 100644 documentation/blog/2023-07-01-whats-new-in-svelte-july-2023.md
 delete mode 100644 documentation/blog/2023-08-01-whats-new-in-svelte-august-2023.md
 delete mode 100644 documentation/blog/2023-08-31-view-transitions.md
 delete mode 100644 documentation/blog/2023-09-01-whats-new-in-svelte-september-2023.md
 delete mode 100644 documentation/blog/2023-09-20-runes.md
 delete mode 100644 documentation/blog/2023-10-01-hacktoberfest.md
 delete mode 100644 documentation/blog/2023-10-01-whats-new-in-svelte-october-2023.md
 delete mode 100644 documentation/blog/2023-11-01-whats-new-in-svelte-november-2023.md
 delete mode 100644 documentation/examples/00-introduction/00-hello-world/App.svelte
 delete mode 100644 documentation/examples/00-introduction/00-hello-world/meta.json
 delete mode 100644 documentation/examples/00-introduction/01-dynamic-attributes/App.svelte
 delete mode 100644 documentation/examples/00-introduction/01-dynamic-attributes/meta.json
 delete mode 100644 documentation/examples/00-introduction/02-styling/App.svelte
 delete mode 100644 documentation/examples/00-introduction/02-styling/meta.json
 delete mode 100644 documentation/examples/00-introduction/03-nested-components/App.svelte
 delete mode 100644 documentation/examples/00-introduction/03-nested-components/Nested.svelte
 delete mode 100644 documentation/examples/00-introduction/03-nested-components/meta.json
 delete mode 100644 documentation/examples/00-introduction/04-html-tags/App.svelte
 delete mode 100644 documentation/examples/00-introduction/04-html-tags/meta.json
 delete mode 100644 documentation/examples/00-introduction/meta.json
 delete mode 100644 documentation/examples/01-reactivity/00-reactive-assignments/App.svelte
 delete mode 100644 documentation/examples/01-reactivity/00-reactive-assignments/meta.json
 delete mode 100644 documentation/examples/01-reactivity/01-reactive-declarations/App.svelte
 delete mode 100644 documentation/examples/01-reactivity/01-reactive-declarations/meta.json
 delete mode 100644 documentation/examples/01-reactivity/02-reactive-statements/App.svelte
 delete mode 100644 documentation/examples/01-reactivity/02-reactive-statements/meta.json
 delete mode 100644 documentation/examples/01-reactivity/meta.json
 delete mode 100644 documentation/examples/02-props/00-declaring-props/App.svelte
 delete mode 100644 documentation/examples/02-props/00-declaring-props/Nested.svelte
 delete mode 100644 documentation/examples/02-props/00-declaring-props/meta.json
 delete mode 100644 documentation/examples/02-props/01-default-values/App.svelte
 delete mode 100644 documentation/examples/02-props/01-default-values/Nested.svelte
 delete mode 100644 documentation/examples/02-props/01-default-values/meta.json
 delete mode 100644 documentation/examples/02-props/02-spread-props/App.svelte
 delete mode 100644 documentation/examples/02-props/02-spread-props/Info.svelte
 delete mode 100644 documentation/examples/02-props/02-spread-props/meta.json
 delete mode 100644 documentation/examples/02-props/meta.json
 delete mode 100644 documentation/examples/03-logic/00-if-blocks/App.svelte
 delete mode 100644 documentation/examples/03-logic/00-if-blocks/meta.json
 delete mode 100644 documentation/examples/03-logic/01-else-blocks/App.svelte
 delete mode 100644 documentation/examples/03-logic/01-else-blocks/meta.json
 delete mode 100644 documentation/examples/03-logic/02-else-if-blocks/App.svelte
 delete mode 100644 documentation/examples/03-logic/02-else-if-blocks/meta.json
 delete mode 100644 documentation/examples/03-logic/03-each-blocks/App.svelte
 delete mode 100644 documentation/examples/03-logic/03-each-blocks/meta.json
 delete mode 100644 documentation/examples/03-logic/04-keyed-each-blocks/App.svelte
 delete mode 100644 documentation/examples/03-logic/04-keyed-each-blocks/Thing.svelte
 delete mode 100644 documentation/examples/03-logic/04-keyed-each-blocks/meta.json
 delete mode 100644 documentation/examples/03-logic/05-await-blocks/App.svelte
 delete mode 100644 documentation/examples/03-logic/05-await-blocks/meta.json
 delete mode 100644 documentation/examples/03-logic/meta.json
 delete mode 100644 documentation/examples/04-events/00-dom-events/App.svelte
 delete mode 100644 documentation/examples/04-events/00-dom-events/meta.json
 delete mode 100644 documentation/examples/04-events/01-inline-handlers/App.svelte
 delete mode 100644 documentation/examples/04-events/01-inline-handlers/meta.json
 delete mode 100644 documentation/examples/04-events/02-event-modifiers/App.svelte
 delete mode 100644 documentation/examples/04-events/02-event-modifiers/meta.json
 delete mode 100644 documentation/examples/04-events/03-component-events/App.svelte
 delete mode 100644 documentation/examples/04-events/03-component-events/Inner.svelte
 delete mode 100644 documentation/examples/04-events/03-component-events/meta.json
 delete mode 100644 documentation/examples/04-events/04-event-forwarding/App.svelte
 delete mode 100644 documentation/examples/04-events/04-event-forwarding/Inner.svelte
 delete mode 100644 documentation/examples/04-events/04-event-forwarding/Outer.svelte
 delete mode 100644 documentation/examples/04-events/04-event-forwarding/meta.json
 delete mode 100644 documentation/examples/04-events/05-dom-event-forwarding/App.svelte
 delete mode 100644 documentation/examples/04-events/05-dom-event-forwarding/CustomButton.svelte
 delete mode 100644 documentation/examples/04-events/05-dom-event-forwarding/meta.json
 delete mode 100644 documentation/examples/04-events/meta.json
 delete mode 100644 documentation/examples/05-bindings/00-text-inputs/App.svelte
 delete mode 100644 documentation/examples/05-bindings/00-text-inputs/meta.json
 delete mode 100644 documentation/examples/05-bindings/01-numeric-inputs/App.svelte
 delete mode 100644 documentation/examples/05-bindings/01-numeric-inputs/meta.json
 delete mode 100644 documentation/examples/05-bindings/02-checkbox-inputs/App.svelte
 delete mode 100644 documentation/examples/05-bindings/02-checkbox-inputs/meta.json
 delete mode 100644 documentation/examples/05-bindings/03-group-inputs/App.svelte
 delete mode 100644 documentation/examples/05-bindings/03-group-inputs/meta.json
 delete mode 100644 documentation/examples/05-bindings/04-textarea-inputs/App.svelte
 delete mode 100644 documentation/examples/05-bindings/04-textarea-inputs/meta.json
 delete mode 100644 documentation/examples/05-bindings/05-file-inputs/App.svelte
 delete mode 100644 documentation/examples/05-bindings/05-file-inputs/meta.json
 delete mode 100644 documentation/examples/05-bindings/06-select-bindings/App.svelte
 delete mode 100644 documentation/examples/05-bindings/06-select-bindings/meta.json
 delete mode 100644 documentation/examples/05-bindings/07-multiple-select-bindings/App.svelte
 delete mode 100644 documentation/examples/05-bindings/07-multiple-select-bindings/meta.json
 delete mode 100644 documentation/examples/05-bindings/08-each-block-bindings/App.svelte
 delete mode 100644 documentation/examples/05-bindings/08-each-block-bindings/meta.json
 delete mode 100644 documentation/examples/05-bindings/09-media-elements/App.svelte
 delete mode 100644 documentation/examples/05-bindings/09-media-elements/meta.json
 delete mode 100644 documentation/examples/05-bindings/10-dimensions/App.svelte
 delete mode 100644 documentation/examples/05-bindings/10-dimensions/meta.json
 delete mode 100644 documentation/examples/05-bindings/11-bind-this/App.svelte
 delete mode 100644 documentation/examples/05-bindings/11-bind-this/meta.json
 delete mode 100644 documentation/examples/05-bindings/12-component-bindings/App.svelte
 delete mode 100644 documentation/examples/05-bindings/12-component-bindings/Keypad.svelte
 delete mode 100644 documentation/examples/05-bindings/12-component-bindings/meta.json
 delete mode 100644 documentation/examples/05-bindings/meta.json
 delete mode 100644 documentation/examples/06-lifecycle/00-onmount/App.svelte
 delete mode 100644 documentation/examples/06-lifecycle/00-onmount/meta.json
 delete mode 100644 documentation/examples/06-lifecycle/01-ondestroy/App.svelte
 delete mode 100644 documentation/examples/06-lifecycle/01-ondestroy/meta.json
 delete mode 100644 documentation/examples/06-lifecycle/01-ondestroy/utils.js
 delete mode 100644 documentation/examples/06-lifecycle/02-update/App.svelte
 delete mode 100644 documentation/examples/06-lifecycle/02-update/meta.json
 delete mode 100644 documentation/examples/06-lifecycle/03-tick/App.svelte
 delete mode 100644 documentation/examples/06-lifecycle/03-tick/meta.json
 delete mode 100644 documentation/examples/06-lifecycle/meta.json
 delete mode 100644 documentation/examples/07-stores/00-writable-stores/App.svelte
 delete mode 100644 documentation/examples/07-stores/00-writable-stores/Decrementer.svelte
 delete mode 100644 documentation/examples/07-stores/00-writable-stores/Incrementer.svelte
 delete mode 100644 documentation/examples/07-stores/00-writable-stores/Resetter.svelte
 delete mode 100644 documentation/examples/07-stores/00-writable-stores/meta.json
 delete mode 100644 documentation/examples/07-stores/00-writable-stores/stores.js
 delete mode 100644 documentation/examples/07-stores/01-auto-subscriptions/App.svelte
 delete mode 100644 documentation/examples/07-stores/01-auto-subscriptions/Decrementer.svelte
 delete mode 100644 documentation/examples/07-stores/01-auto-subscriptions/Incrementer.svelte
 delete mode 100644 documentation/examples/07-stores/01-auto-subscriptions/Resetter.svelte
 delete mode 100644 documentation/examples/07-stores/01-auto-subscriptions/meta.json
 delete mode 100644 documentation/examples/07-stores/01-auto-subscriptions/stores.js
 delete mode 100644 documentation/examples/07-stores/02-readable-stores/App.svelte
 delete mode 100644 documentation/examples/07-stores/02-readable-stores/meta.json
 delete mode 100644 documentation/examples/07-stores/02-readable-stores/stores.js
 delete mode 100644 documentation/examples/07-stores/03-derived-stores/App.svelte
 delete mode 100644 documentation/examples/07-stores/03-derived-stores/meta.json
 delete mode 100644 documentation/examples/07-stores/03-derived-stores/stores.js
 delete mode 100644 documentation/examples/07-stores/04-custom-stores/App.svelte
 delete mode 100644 documentation/examples/07-stores/04-custom-stores/meta.json
 delete mode 100644 documentation/examples/07-stores/04-custom-stores/stores.js
 delete mode 100644 documentation/examples/07-stores/meta.json
 delete mode 100644 documentation/examples/08-motion/00-tweened/App.svelte
 delete mode 100644 documentation/examples/08-motion/00-tweened/meta.json
 delete mode 100644 documentation/examples/08-motion/01-spring/App.svelte
 delete mode 100644 documentation/examples/08-motion/01-spring/meta.json
 delete mode 100644 documentation/examples/08-motion/meta.json
 delete mode 100644 documentation/examples/09-transitions/00-transition/App.svelte
 delete mode 100644 documentation/examples/09-transitions/00-transition/meta.json
 delete mode 100644 documentation/examples/09-transitions/01-adding-parameters-to-transitions/App.svelte
 delete mode 100644 documentation/examples/09-transitions/01-adding-parameters-to-transitions/meta.json
 delete mode 100644 documentation/examples/09-transitions/02-in-and-out/App.svelte
 delete mode 100644 documentation/examples/09-transitions/02-in-and-out/meta.json
 delete mode 100644 documentation/examples/09-transitions/03-custom-css-transitions/App.svelte
 delete mode 100644 documentation/examples/09-transitions/03-custom-css-transitions/meta.json
 delete mode 100644 documentation/examples/09-transitions/04-custom-js-transitions/App.svelte
 delete mode 100644 documentation/examples/09-transitions/04-custom-js-transitions/meta.json
 delete mode 100644 documentation/examples/09-transitions/05-transition-events/App.svelte
 delete mode 100644 documentation/examples/09-transitions/05-transition-events/meta.json
 delete mode 100644 documentation/examples/09-transitions/06-deferred-transitions/App.svelte
 delete mode 100644 documentation/examples/09-transitions/06-deferred-transitions/images.js
 delete mode 100644 documentation/examples/09-transitions/06-deferred-transitions/meta.json
 delete mode 100644 documentation/examples/09-transitions/meta.json
 delete mode 100644 documentation/examples/10-animations/00-animate/App.svelte
 delete mode 100644 documentation/examples/10-animations/00-animate/meta.json
 delete mode 100644 documentation/examples/10-animations/meta.json
 delete mode 100644 documentation/examples/11-easing/00-easing/App.svelte
 delete mode 100644 documentation/examples/11-easing/00-easing/Controls.svelte
 delete mode 100644 documentation/examples/11-easing/00-easing/Grid.svelte
 delete mode 100644 documentation/examples/11-easing/00-easing/eases.js
 delete mode 100644 documentation/examples/11-easing/00-easing/meta.json
 delete mode 100644 documentation/examples/11-easing/meta.json
 delete mode 100644 documentation/examples/12-svg/01-clock/App.svelte
 delete mode 100644 documentation/examples/12-svg/01-clock/meta.json
 delete mode 100644 documentation/examples/12-svg/02-bar-chart/App.svelte
 delete mode 100644 documentation/examples/12-svg/02-bar-chart/meta.json
 delete mode 100644 documentation/examples/12-svg/03-area-chart/App.svelte
 delete mode 100644 documentation/examples/12-svg/03-area-chart/data.js
 delete mode 100644 documentation/examples/12-svg/03-area-chart/meta.json
 delete mode 100644 documentation/examples/12-svg/04-scatterplot/App.svelte
 delete mode 100644 documentation/examples/12-svg/04-scatterplot/Scatterplot.svelte
 delete mode 100644 documentation/examples/12-svg/04-scatterplot/data.js
 delete mode 100644 documentation/examples/12-svg/04-scatterplot/meta.json
 delete mode 100644 documentation/examples/12-svg/05-svg-transitions/App.svelte
 delete mode 100644 documentation/examples/12-svg/05-svg-transitions/custom-transitions.js
 delete mode 100644 documentation/examples/12-svg/05-svg-transitions/meta.json
 delete mode 100644 documentation/examples/12-svg/05-svg-transitions/shape.js
 delete mode 100644 documentation/examples/12-svg/meta.json
 delete mode 100644 documentation/examples/13-actions/00-actions/App.svelte
 delete mode 100644 documentation/examples/13-actions/00-actions/click_outside.js
 delete mode 100644 documentation/examples/13-actions/00-actions/meta.json
 delete mode 100644 documentation/examples/13-actions/01-adding-parameters-to-actions/App.svelte
 delete mode 100644 documentation/examples/13-actions/01-adding-parameters-to-actions/longpress.js
 delete mode 100644 documentation/examples/13-actions/01-adding-parameters-to-actions/meta.json
 delete mode 100644 documentation/examples/13-actions/03-actions-pannable/App.svelte
 delete mode 100644 documentation/examples/13-actions/03-actions-pannable/meta.json
 delete mode 100644 documentation/examples/13-actions/03-actions-pannable/pannable.js
 delete mode 100644 documentation/examples/13-actions/meta.json
 delete mode 100644 documentation/examples/14-classes/00-classes/App.svelte
 delete mode 100644 documentation/examples/14-classes/00-classes/meta.json
 delete mode 100644 documentation/examples/14-classes/01-class-shorthand/App.svelte
 delete mode 100644 documentation/examples/14-classes/01-class-shorthand/meta.json
 delete mode 100644 documentation/examples/14-classes/meta.json
 delete mode 100644 documentation/examples/15-composition/00-slots/App.svelte
 delete mode 100644 documentation/examples/15-composition/00-slots/Box.svelte
 delete mode 100644 documentation/examples/15-composition/00-slots/meta.json
 delete mode 100644 documentation/examples/15-composition/01-slot-fallbacks/App.svelte
 delete mode 100644 documentation/examples/15-composition/01-slot-fallbacks/Box.svelte
 delete mode 100644 documentation/examples/15-composition/01-slot-fallbacks/meta.json
 delete mode 100644 documentation/examples/15-composition/02-named-slots/App.svelte
 delete mode 100644 documentation/examples/15-composition/02-named-slots/ContactCard.svelte
 delete mode 100644 documentation/examples/15-composition/02-named-slots/meta.json
 delete mode 100644 documentation/examples/15-composition/03-slot-props/App.svelte
 delete mode 100644 documentation/examples/15-composition/03-slot-props/Hoverable.svelte
 delete mode 100644 documentation/examples/15-composition/03-slot-props/meta.json
 delete mode 100644 documentation/examples/15-composition/04-conditional-slots/App.svelte
 delete mode 100644 documentation/examples/15-composition/04-conditional-slots/Profile.svelte
 delete mode 100644 documentation/examples/15-composition/04-conditional-slots/meta.json
 delete mode 100644 documentation/examples/15-composition/05-modal/App.svelte
 delete mode 100644 documentation/examples/15-composition/05-modal/Modal.svelte
 delete mode 100644 documentation/examples/15-composition/05-modal/meta.json
 delete mode 100644 documentation/examples/15-composition/meta.json
 delete mode 100644 documentation/examples/16-context/00-context-api/App.svelte
 delete mode 100644 documentation/examples/16-context/00-context-api/Map.svelte
 delete mode 100644 documentation/examples/16-context/00-context-api/MapMarker.svelte
 delete mode 100644 documentation/examples/16-context/00-context-api/mapbox.js
 delete mode 100644 documentation/examples/16-context/00-context-api/meta.json
 delete mode 100644 documentation/examples/16-context/meta.json
 delete mode 100644 documentation/examples/17-special-elements/00-svelte-self/App.svelte
 delete mode 100644 documentation/examples/17-special-elements/00-svelte-self/File.svelte
 delete mode 100644 documentation/examples/17-special-elements/00-svelte-self/Folder.svelte
 delete mode 100644 documentation/examples/17-special-elements/00-svelte-self/meta.json
 delete mode 100644 documentation/examples/17-special-elements/01-svelte-component/App.svelte
 delete mode 100644 documentation/examples/17-special-elements/01-svelte-component/BlueThing.svelte
 delete mode 100644 documentation/examples/17-special-elements/01-svelte-component/GreenThing.svelte
 delete mode 100644 documentation/examples/17-special-elements/01-svelte-component/RedThing.svelte
 delete mode 100644 documentation/examples/17-special-elements/01-svelte-component/meta.json
 delete mode 100644 documentation/examples/17-special-elements/02-svelte-element/App.svelte
 delete mode 100644 documentation/examples/17-special-elements/02-svelte-element/meta.json
 delete mode 100644 documentation/examples/17-special-elements/03-svelte-window/App.svelte
 delete mode 100644 documentation/examples/17-special-elements/03-svelte-window/meta.json
 delete mode 100644 documentation/examples/17-special-elements/04-svelte-window-bindings/App.svelte
 delete mode 100644 documentation/examples/17-special-elements/04-svelte-window-bindings/meta.json
 delete mode 100644 documentation/examples/17-special-elements/05-svelte-document/App.svelte
 delete mode 100644 documentation/examples/17-special-elements/05-svelte-document/meta.json
 delete mode 100644 documentation/examples/17-special-elements/06-svelte-body/App.svelte
 delete mode 100644 documentation/examples/17-special-elements/06-svelte-body/meta.json
 delete mode 100644 documentation/examples/17-special-elements/07-svelte-head/App.svelte
 delete mode 100644 documentation/examples/17-special-elements/07-svelte-head/meta.json
 delete mode 100644 documentation/examples/17-special-elements/meta.json
 delete mode 100644 documentation/examples/18-module-context/01-module-exports/App.svelte
 delete mode 100644 documentation/examples/18-module-context/01-module-exports/AudioPlayer.svelte
 delete mode 100644 documentation/examples/18-module-context/01-module-exports/meta.json
 delete mode 100644 documentation/examples/18-module-context/meta.json
 delete mode 100644 documentation/examples/19-debugging/00-debug/App.svelte
 delete mode 100644 documentation/examples/19-debugging/00-debug/meta.json
 delete mode 100644 documentation/examples/19-debugging/meta.json
 delete mode 100644 documentation/examples/20-7guis/01-7guis-counter/App.svelte
 delete mode 100644 documentation/examples/20-7guis/01-7guis-counter/meta.json
 delete mode 100644 documentation/examples/20-7guis/02-7guis-temperature/App.svelte
 delete mode 100644 documentation/examples/20-7guis/02-7guis-temperature/meta.json
 delete mode 100644 documentation/examples/20-7guis/03-7guis-flight-booker/App.svelte
 delete mode 100644 documentation/examples/20-7guis/03-7guis-flight-booker/meta.json
 delete mode 100644 documentation/examples/20-7guis/04-7guis-timer/App.svelte
 delete mode 100644 documentation/examples/20-7guis/04-7guis-timer/meta.json
 delete mode 100644 documentation/examples/20-7guis/05-7guis-crud/App.svelte
 delete mode 100644 documentation/examples/20-7guis/05-7guis-crud/meta.json
 delete mode 100644 documentation/examples/20-7guis/06-7guis-circles/App.svelte
 delete mode 100644 documentation/examples/20-7guis/06-7guis-circles/meta.json
 delete mode 100644 documentation/examples/20-7guis/meta.json
 delete mode 100644 documentation/examples/21-miscellaneous/01-hacker-news/App.svelte
 delete mode 100644 documentation/examples/21-miscellaneous/01-hacker-news/Comment.svelte
 delete mode 100644 documentation/examples/21-miscellaneous/01-hacker-news/Item.svelte
 delete mode 100644 documentation/examples/21-miscellaneous/01-hacker-news/List.svelte
 delete mode 100644 documentation/examples/21-miscellaneous/01-hacker-news/Summary.svelte
 delete mode 100644 documentation/examples/21-miscellaneous/01-hacker-news/meta.json
 delete mode 100644 documentation/examples/21-miscellaneous/02-immutable-data/App.svelte
 delete mode 100644 documentation/examples/21-miscellaneous/02-immutable-data/ImmutableTodo.svelte
 delete mode 100644 documentation/examples/21-miscellaneous/02-immutable-data/MutableTodo.svelte
 delete mode 100644 documentation/examples/21-miscellaneous/02-immutable-data/flash.js
 delete mode 100644 documentation/examples/21-miscellaneous/02-immutable-data/meta.json
 delete mode 100644 documentation/examples/21-miscellaneous/meta.json
 delete mode 100644 documentation/examples/99-embeds/20181225-blog-svelte-css-in-js/App.svelte
 delete mode 100644 documentation/examples/99-embeds/20181225-blog-svelte-css-in-js/Hero.svelte
 delete mode 100644 documentation/examples/99-embeds/20181225-blog-svelte-css-in-js/meta.json
 delete mode 100644 documentation/examples/99-embeds/20181225-blog-svelte-css-in-js/styles.js
 delete mode 100644 documentation/examples/99-embeds/20190420-blog-write-less-code/App.svelte
 delete mode 100644 documentation/examples/99-embeds/20190420-blog-write-less-code/meta.json
 delete mode 100644 documentation/examples/99-embeds/meta.json
 delete mode 100644 documentation/tutorial/01-introduction/01-basics/app-a/App.svelte
 delete mode 100644 documentation/tutorial/01-introduction/01-basics/text.md
 delete mode 100644 documentation/tutorial/01-introduction/02-adding-data/app-a/App.svelte
 delete mode 100644 documentation/tutorial/01-introduction/02-adding-data/app-b/App.svelte
 delete mode 100644 documentation/tutorial/01-introduction/02-adding-data/text.md
 delete mode 100644 documentation/tutorial/01-introduction/03-dynamic-attributes/app-a/App.svelte
 delete mode 100644 documentation/tutorial/01-introduction/03-dynamic-attributes/app-b/App.svelte
 delete mode 100644 documentation/tutorial/01-introduction/03-dynamic-attributes/text.md
 delete mode 100644 documentation/tutorial/01-introduction/04-styling/app-a/App.svelte
 delete mode 100644 documentation/tutorial/01-introduction/04-styling/app-b/App.svelte
 delete mode 100644 documentation/tutorial/01-introduction/04-styling/text.md
 delete mode 100644 documentation/tutorial/01-introduction/05-nested-components/app-a/App.svelte
 delete mode 100644 documentation/tutorial/01-introduction/05-nested-components/app-a/Nested.svelte
 delete mode 100644 documentation/tutorial/01-introduction/05-nested-components/app-b/App.svelte
 delete mode 100644 documentation/tutorial/01-introduction/05-nested-components/app-b/Nested.svelte
 delete mode 100644 documentation/tutorial/01-introduction/05-nested-components/text.md
 delete mode 100644 documentation/tutorial/01-introduction/06-making-an-app/app-a/App.svelte
 delete mode 100644 documentation/tutorial/01-introduction/06-making-an-app/text.md
 delete mode 100644 documentation/tutorial/01-introduction/meta.json
 delete mode 100644 documentation/tutorial/02-reactivity/01-reactive-assignments/app-a/App.svelte
 delete mode 100644 documentation/tutorial/02-reactivity/01-reactive-assignments/app-b/App.svelte
 delete mode 100644 documentation/tutorial/02-reactivity/01-reactive-assignments/text.md
 delete mode 100644 documentation/tutorial/02-reactivity/02-reactive-declarations/app-a/App.svelte
 delete mode 100644 documentation/tutorial/02-reactivity/02-reactive-declarations/app-b/App.svelte
 delete mode 100644 documentation/tutorial/02-reactivity/02-reactive-declarations/text.md
 delete mode 100644 documentation/tutorial/02-reactivity/03-reactive-statements/app-a/App.svelte
 delete mode 100644 documentation/tutorial/02-reactivity/03-reactive-statements/app-b/App.svelte
 delete mode 100644 documentation/tutorial/02-reactivity/03-reactive-statements/text.md
 delete mode 100644 documentation/tutorial/02-reactivity/04-updating-arrays-and-objects/app-a/App.svelte
 delete mode 100644 documentation/tutorial/02-reactivity/04-updating-arrays-and-objects/app-b/App.svelte
 delete mode 100644 documentation/tutorial/02-reactivity/04-updating-arrays-and-objects/text.md
 delete mode 100644 documentation/tutorial/02-reactivity/meta.json
 delete mode 100644 documentation/tutorial/03-props/01-declaring-props/app-a/App.svelte
 delete mode 100644 documentation/tutorial/03-props/01-declaring-props/app-a/Nested.svelte
 delete mode 100644 documentation/tutorial/03-props/01-declaring-props/app-b/App.svelte
 delete mode 100644 documentation/tutorial/03-props/01-declaring-props/app-b/Nested.svelte
 delete mode 100644 documentation/tutorial/03-props/01-declaring-props/text.md
 delete mode 100644 documentation/tutorial/03-props/02-default-values/app-a/App.svelte
 delete mode 100644 documentation/tutorial/03-props/02-default-values/app-a/Nested.svelte
 delete mode 100644 documentation/tutorial/03-props/02-default-values/app-b/App.svelte
 delete mode 100644 documentation/tutorial/03-props/02-default-values/app-b/Nested.svelte
 delete mode 100644 documentation/tutorial/03-props/02-default-values/text.md
 delete mode 100644 documentation/tutorial/03-props/03-spread-props/app-a/App.svelte
 delete mode 100644 documentation/tutorial/03-props/03-spread-props/app-a/Info.svelte
 delete mode 100644 documentation/tutorial/03-props/03-spread-props/app-b/App.svelte
 delete mode 100644 documentation/tutorial/03-props/03-spread-props/app-b/Info.svelte
 delete mode 100644 documentation/tutorial/03-props/03-spread-props/text.md
 delete mode 100644 documentation/tutorial/03-props/meta.json
 delete mode 100644 documentation/tutorial/04-logic/01-if-blocks/app-a/App.svelte
 delete mode 100644 documentation/tutorial/04-logic/01-if-blocks/app-b/App.svelte
 delete mode 100644 documentation/tutorial/04-logic/01-if-blocks/text.md
 delete mode 100644 documentation/tutorial/04-logic/02-else-blocks/app-a/App.svelte
 delete mode 100644 documentation/tutorial/04-logic/02-else-blocks/app-b/App.svelte
 delete mode 100644 documentation/tutorial/04-logic/02-else-blocks/text.md
 delete mode 100644 documentation/tutorial/04-logic/03-else-if-blocks/app-a/App.svelte
 delete mode 100644 documentation/tutorial/04-logic/03-else-if-blocks/app-b/App.svelte
 delete mode 100644 documentation/tutorial/04-logic/03-else-if-blocks/text.md
 delete mode 100644 documentation/tutorial/04-logic/04-each-blocks/app-a/App.svelte
 delete mode 100644 documentation/tutorial/04-logic/04-each-blocks/app-b/App.svelte
 delete mode 100644 documentation/tutorial/04-logic/04-each-blocks/text.md
 delete mode 100644 documentation/tutorial/04-logic/05-keyed-each-blocks/app-a/App.svelte
 delete mode 100644 documentation/tutorial/04-logic/05-keyed-each-blocks/app-a/Thing.svelte
 delete mode 100644 documentation/tutorial/04-logic/05-keyed-each-blocks/app-b/App.svelte
 delete mode 100644 documentation/tutorial/04-logic/05-keyed-each-blocks/app-b/Thing.svelte
 delete mode 100644 documentation/tutorial/04-logic/05-keyed-each-blocks/text.md
 delete mode 100644 documentation/tutorial/04-logic/06-await-blocks/app-a/App.svelte
 delete mode 100644 documentation/tutorial/04-logic/06-await-blocks/app-b/App.svelte
 delete mode 100644 documentation/tutorial/04-logic/06-await-blocks/text.md
 delete mode 100644 documentation/tutorial/04-logic/meta.json
 delete mode 100644 documentation/tutorial/05-events/01-dom-events/app-a/App.svelte
 delete mode 100644 documentation/tutorial/05-events/01-dom-events/app-b/App.svelte
 delete mode 100644 documentation/tutorial/05-events/01-dom-events/text.md
 delete mode 100644 documentation/tutorial/05-events/02-inline-handlers/app-a/App.svelte
 delete mode 100644 documentation/tutorial/05-events/02-inline-handlers/app-b/App.svelte
 delete mode 100644 documentation/tutorial/05-events/02-inline-handlers/text.md
 delete mode 100644 documentation/tutorial/05-events/03-event-modifiers/app-a/App.svelte
 delete mode 100644 documentation/tutorial/05-events/03-event-modifiers/app-b/App.svelte
 delete mode 100644 documentation/tutorial/05-events/03-event-modifiers/text.md
 delete mode 100644 documentation/tutorial/05-events/04-component-events/app-a/App.svelte
 delete mode 100644 documentation/tutorial/05-events/04-component-events/app-a/Inner.svelte
 delete mode 100644 documentation/tutorial/05-events/04-component-events/app-b/App.svelte
 delete mode 100644 documentation/tutorial/05-events/04-component-events/app-b/Inner.svelte
 delete mode 100644 documentation/tutorial/05-events/04-component-events/text.md
 delete mode 100644 documentation/tutorial/05-events/05-event-forwarding/app-a/App.svelte
 delete mode 100644 documentation/tutorial/05-events/05-event-forwarding/app-a/Inner.svelte
 delete mode 100644 documentation/tutorial/05-events/05-event-forwarding/app-a/Outer.svelte
 delete mode 100644 documentation/tutorial/05-events/05-event-forwarding/app-b/App.svelte
 delete mode 100644 documentation/tutorial/05-events/05-event-forwarding/app-b/Inner.svelte
 delete mode 100644 documentation/tutorial/05-events/05-event-forwarding/app-b/Outer.svelte
 delete mode 100644 documentation/tutorial/05-events/05-event-forwarding/text.md
 delete mode 100644 documentation/tutorial/05-events/06-dom-event-forwarding/app-a/App.svelte
 delete mode 100644 documentation/tutorial/05-events/06-dom-event-forwarding/app-a/CustomButton.svelte
 delete mode 100644 documentation/tutorial/05-events/06-dom-event-forwarding/app-b/App.svelte
 delete mode 100644 documentation/tutorial/05-events/06-dom-event-forwarding/app-b/CustomButton.svelte
 delete mode 100644 documentation/tutorial/05-events/06-dom-event-forwarding/text.md
 delete mode 100644 documentation/tutorial/05-events/meta.json
 delete mode 100644 documentation/tutorial/06-bindings/01-text-inputs/app-a/App.svelte
 delete mode 100644 documentation/tutorial/06-bindings/01-text-inputs/app-b/App.svelte
 delete mode 100644 documentation/tutorial/06-bindings/01-text-inputs/text.md
 delete mode 100644 documentation/tutorial/06-bindings/02-numeric-inputs/app-a/App.svelte
 delete mode 100644 documentation/tutorial/06-bindings/02-numeric-inputs/app-b/App.svelte
 delete mode 100644 documentation/tutorial/06-bindings/02-numeric-inputs/text.md
 delete mode 100644 documentation/tutorial/06-bindings/03-checkbox-inputs/app-a/App.svelte
 delete mode 100644 documentation/tutorial/06-bindings/03-checkbox-inputs/app-b/App.svelte
 delete mode 100644 documentation/tutorial/06-bindings/03-checkbox-inputs/text.md
 delete mode 100644 documentation/tutorial/06-bindings/04-group-inputs/app-a/App.svelte
 delete mode 100644 documentation/tutorial/06-bindings/04-group-inputs/app-b/App.svelte
 delete mode 100644 documentation/tutorial/06-bindings/04-group-inputs/text.md
 delete mode 100644 documentation/tutorial/06-bindings/05-textarea-inputs/app-a/App.svelte
 delete mode 100644 documentation/tutorial/06-bindings/05-textarea-inputs/app-b/App.svelte
 delete mode 100644 documentation/tutorial/06-bindings/05-textarea-inputs/text.md
 delete mode 100644 documentation/tutorial/06-bindings/06-select-bindings/app-a/App.svelte
 delete mode 100644 documentation/tutorial/06-bindings/06-select-bindings/app-b/App.svelte
 delete mode 100644 documentation/tutorial/06-bindings/06-select-bindings/text.md
 delete mode 100644 documentation/tutorial/06-bindings/07-multiple-select-bindings/app-a/App.svelte
 delete mode 100644 documentation/tutorial/06-bindings/07-multiple-select-bindings/app-b/App.svelte
 delete mode 100644 documentation/tutorial/06-bindings/07-multiple-select-bindings/text.md
 delete mode 100644 documentation/tutorial/06-bindings/08-contenteditable-bindings/app-a/App.svelte
 delete mode 100644 documentation/tutorial/06-bindings/08-contenteditable-bindings/app-b/App.svelte
 delete mode 100644 documentation/tutorial/06-bindings/08-contenteditable-bindings/text.md
 delete mode 100644 documentation/tutorial/06-bindings/09-each-block-bindings/app-a/App.svelte
 delete mode 100644 documentation/tutorial/06-bindings/09-each-block-bindings/app-b/App.svelte
 delete mode 100644 documentation/tutorial/06-bindings/09-each-block-bindings/text.md
 delete mode 100644 documentation/tutorial/06-bindings/10-media-elements/app-a/App.svelte
 delete mode 100644 documentation/tutorial/06-bindings/10-media-elements/app-b/App.svelte
 delete mode 100644 documentation/tutorial/06-bindings/10-media-elements/text.md
 delete mode 100644 documentation/tutorial/06-bindings/11-dimensions/app-a/App.svelte
 delete mode 100644 documentation/tutorial/06-bindings/11-dimensions/app-b/App.svelte
 delete mode 100644 documentation/tutorial/06-bindings/11-dimensions/text.md
 delete mode 100644 documentation/tutorial/06-bindings/12-bind-this/app-a/App.svelte
 delete mode 100644 documentation/tutorial/06-bindings/12-bind-this/app-b/App.svelte
 delete mode 100644 documentation/tutorial/06-bindings/12-bind-this/text.md
 delete mode 100644 documentation/tutorial/06-bindings/13-component-bindings/app-a/App.svelte
 delete mode 100644 documentation/tutorial/06-bindings/13-component-bindings/app-a/Keypad.svelte
 delete mode 100644 documentation/tutorial/06-bindings/13-component-bindings/app-b/App.svelte
 delete mode 100644 documentation/tutorial/06-bindings/13-component-bindings/app-b/Keypad.svelte
 delete mode 100644 documentation/tutorial/06-bindings/13-component-bindings/text.md
 delete mode 100644 documentation/tutorial/06-bindings/14-component-this/app-a/App.svelte
 delete mode 100644 documentation/tutorial/06-bindings/14-component-this/app-a/InputField.svelte
 delete mode 100644 documentation/tutorial/06-bindings/14-component-this/app-b/App.svelte
 delete mode 100644 documentation/tutorial/06-bindings/14-component-this/app-b/InputField.svelte
 delete mode 100644 documentation/tutorial/06-bindings/14-component-this/text.md
 delete mode 100644 documentation/tutorial/06-bindings/meta.json
 delete mode 100644 documentation/tutorial/07-lifecycle/01-onmount/app-a/App.svelte
 delete mode 100644 documentation/tutorial/07-lifecycle/01-onmount/app-b/App.svelte
 delete mode 100644 documentation/tutorial/07-lifecycle/01-onmount/text.md
 delete mode 100644 documentation/tutorial/07-lifecycle/02-ondestroy/app-a/App.svelte
 delete mode 100644 documentation/tutorial/07-lifecycle/02-ondestroy/app-a/Timer.svelte
 delete mode 100644 documentation/tutorial/07-lifecycle/02-ondestroy/app-a/utils.js
 delete mode 100644 documentation/tutorial/07-lifecycle/02-ondestroy/app-b/App.svelte
 delete mode 100644 documentation/tutorial/07-lifecycle/02-ondestroy/app-b/Timer.svelte
 delete mode 100644 documentation/tutorial/07-lifecycle/02-ondestroy/app-b/utils.js
 delete mode 100644 documentation/tutorial/07-lifecycle/02-ondestroy/text.md
 delete mode 100644 documentation/tutorial/07-lifecycle/03-update/app-a/App.svelte
 delete mode 100644 documentation/tutorial/07-lifecycle/03-update/app-b/App.svelte
 delete mode 100644 documentation/tutorial/07-lifecycle/03-update/text.md
 delete mode 100644 documentation/tutorial/07-lifecycle/04-tick/app-a/App.svelte
 delete mode 100644 documentation/tutorial/07-lifecycle/04-tick/app-b/App.svelte
 delete mode 100644 documentation/tutorial/07-lifecycle/04-tick/text.md
 delete mode 100644 documentation/tutorial/07-lifecycle/meta.json
 delete mode 100644 documentation/tutorial/08-stores/01-writable-stores/app-a/App.svelte
 delete mode 100644 documentation/tutorial/08-stores/01-writable-stores/app-a/Decrementer.svelte
 delete mode 100644 documentation/tutorial/08-stores/01-writable-stores/app-a/Incrementer.svelte
 delete mode 100644 documentation/tutorial/08-stores/01-writable-stores/app-a/Resetter.svelte
 delete mode 100644 documentation/tutorial/08-stores/01-writable-stores/app-a/stores.js
 delete mode 100644 documentation/tutorial/08-stores/01-writable-stores/app-b/App.svelte
 delete mode 100644 documentation/tutorial/08-stores/01-writable-stores/app-b/Decrementer.svelte
 delete mode 100644 documentation/tutorial/08-stores/01-writable-stores/app-b/Incrementer.svelte
 delete mode 100644 documentation/tutorial/08-stores/01-writable-stores/app-b/Resetter.svelte
 delete mode 100644 documentation/tutorial/08-stores/01-writable-stores/app-b/stores.js
 delete mode 100644 documentation/tutorial/08-stores/01-writable-stores/text.md
 delete mode 100644 documentation/tutorial/08-stores/02-auto-subscriptions/app-a/App.svelte
 delete mode 100644 documentation/tutorial/08-stores/02-auto-subscriptions/app-a/Decrementer.svelte
 delete mode 100644 documentation/tutorial/08-stores/02-auto-subscriptions/app-a/Incrementer.svelte
 delete mode 100644 documentation/tutorial/08-stores/02-auto-subscriptions/app-a/Resetter.svelte
 delete mode 100644 documentation/tutorial/08-stores/02-auto-subscriptions/app-a/stores.js
 delete mode 100644 documentation/tutorial/08-stores/02-auto-subscriptions/app-b/App.svelte
 delete mode 100644 documentation/tutorial/08-stores/02-auto-subscriptions/app-b/Decrementer.svelte
 delete mode 100644 documentation/tutorial/08-stores/02-auto-subscriptions/app-b/Incrementer.svelte
 delete mode 100644 documentation/tutorial/08-stores/02-auto-subscriptions/app-b/Resetter.svelte
 delete mode 100644 documentation/tutorial/08-stores/02-auto-subscriptions/app-b/stores.js
 delete mode 100644 documentation/tutorial/08-stores/02-auto-subscriptions/text.md
 delete mode 100644 documentation/tutorial/08-stores/03-readable-stores/app-a/App.svelte
 delete mode 100644 documentation/tutorial/08-stores/03-readable-stores/app-a/stores.js
 delete mode 100644 documentation/tutorial/08-stores/03-readable-stores/app-b/App.svelte
 delete mode 100644 documentation/tutorial/08-stores/03-readable-stores/app-b/stores.js
 delete mode 100644 documentation/tutorial/08-stores/03-readable-stores/text.md
 delete mode 100644 documentation/tutorial/08-stores/04-derived-stores/app-a/App.svelte
 delete mode 100644 documentation/tutorial/08-stores/04-derived-stores/app-a/stores.js
 delete mode 100644 documentation/tutorial/08-stores/04-derived-stores/app-b/App.svelte
 delete mode 100644 documentation/tutorial/08-stores/04-derived-stores/app-b/stores.js
 delete mode 100644 documentation/tutorial/08-stores/04-derived-stores/text.md
 delete mode 100644 documentation/tutorial/08-stores/05-custom-stores/app-a/App.svelte
 delete mode 100644 documentation/tutorial/08-stores/05-custom-stores/app-a/stores.js
 delete mode 100644 documentation/tutorial/08-stores/05-custom-stores/app-b/App.svelte
 delete mode 100644 documentation/tutorial/08-stores/05-custom-stores/app-b/stores.js
 delete mode 100644 documentation/tutorial/08-stores/05-custom-stores/text.md
 delete mode 100644 documentation/tutorial/08-stores/06-store-bindings/app-a/App.svelte
 delete mode 100644 documentation/tutorial/08-stores/06-store-bindings/app-a/stores.js
 delete mode 100644 documentation/tutorial/08-stores/06-store-bindings/app-b/App.svelte
 delete mode 100644 documentation/tutorial/08-stores/06-store-bindings/app-b/stores.js
 delete mode 100644 documentation/tutorial/08-stores/06-store-bindings/text.md
 delete mode 100644 documentation/tutorial/08-stores/meta.json
 delete mode 100644 documentation/tutorial/09-motion/01-tweened/app-a/App.svelte
 delete mode 100644 documentation/tutorial/09-motion/01-tweened/app-b/App.svelte
 delete mode 100644 documentation/tutorial/09-motion/01-tweened/text.md
 delete mode 100644 documentation/tutorial/09-motion/02-spring/app-a/App.svelte
 delete mode 100644 documentation/tutorial/09-motion/02-spring/app-b/App.svelte
 delete mode 100644 documentation/tutorial/09-motion/02-spring/text.md
 delete mode 100644 documentation/tutorial/09-motion/meta.json
 delete mode 100644 documentation/tutorial/10-transitions/01-transition/app-a/App.svelte
 delete mode 100644 documentation/tutorial/10-transitions/01-transition/app-b/App.svelte
 delete mode 100644 documentation/tutorial/10-transitions/01-transition/text.md
 delete mode 100644 documentation/tutorial/10-transitions/02-adding-parameters-to-transitions/app-a/App.svelte
 delete mode 100644 documentation/tutorial/10-transitions/02-adding-parameters-to-transitions/app-b/App.svelte
 delete mode 100644 documentation/tutorial/10-transitions/02-adding-parameters-to-transitions/text.md
 delete mode 100644 documentation/tutorial/10-transitions/03-in-and-out/app-a/App.svelte
 delete mode 100644 documentation/tutorial/10-transitions/03-in-and-out/app-b/App.svelte
 delete mode 100644 documentation/tutorial/10-transitions/03-in-and-out/text.md
 delete mode 100644 documentation/tutorial/10-transitions/04-custom-css-transitions/app-a/App.svelte
 delete mode 100644 documentation/tutorial/10-transitions/04-custom-css-transitions/app-b/App.svelte
 delete mode 100644 documentation/tutorial/10-transitions/04-custom-css-transitions/text.md
 delete mode 100644 documentation/tutorial/10-transitions/05-custom-js-transitions/app-a/App.svelte
 delete mode 100644 documentation/tutorial/10-transitions/05-custom-js-transitions/app-b/App.svelte
 delete mode 100644 documentation/tutorial/10-transitions/05-custom-js-transitions/text.md
 delete mode 100644 documentation/tutorial/10-transitions/06-transition-events/app-a/App.svelte
 delete mode 100644 documentation/tutorial/10-transitions/06-transition-events/app-b/App.svelte
 delete mode 100644 documentation/tutorial/10-transitions/06-transition-events/text.md
 delete mode 100644 documentation/tutorial/10-transitions/07-global-transitions/app-a/App.svelte
 delete mode 100644 documentation/tutorial/10-transitions/07-global-transitions/app-b/App.svelte
 delete mode 100644 documentation/tutorial/10-transitions/07-global-transitions/text.md
 delete mode 100644 documentation/tutorial/10-transitions/08-deferred-transitions/app-a/App.svelte
 delete mode 100644 documentation/tutorial/10-transitions/08-deferred-transitions/app-b/App.svelte
 delete mode 100644 documentation/tutorial/10-transitions/08-deferred-transitions/text.md
 delete mode 100644 documentation/tutorial/10-transitions/09-key-blocks/app-a/App.svelte
 delete mode 100644 documentation/tutorial/10-transitions/09-key-blocks/app-b/App.svelte
 delete mode 100644 documentation/tutorial/10-transitions/09-key-blocks/text.md
 delete mode 100644 documentation/tutorial/10-transitions/meta.json
 delete mode 100644 documentation/tutorial/11-animations/01-animate/app-a/App.svelte
 delete mode 100644 documentation/tutorial/11-animations/01-animate/app-b/App.svelte
 delete mode 100644 documentation/tutorial/11-animations/01-animate/text.md
 delete mode 100644 documentation/tutorial/11-animations/meta.json
 delete mode 100644 documentation/tutorial/12-actions/01-actions/app-a/App.svelte
 delete mode 100644 documentation/tutorial/12-actions/01-actions/app-a/click_outside.js
 delete mode 100644 documentation/tutorial/12-actions/01-actions/app-b/App.svelte
 delete mode 100644 documentation/tutorial/12-actions/01-actions/app-b/click_outside.js
 delete mode 100644 documentation/tutorial/12-actions/01-actions/text.md
 delete mode 100644 documentation/tutorial/12-actions/02-adding-parameters-to-actions/app-a/App.svelte
 delete mode 100644 documentation/tutorial/12-actions/02-adding-parameters-to-actions/app-a/longpress.js
 delete mode 100644 documentation/tutorial/12-actions/02-adding-parameters-to-actions/app-b/App.svelte
 delete mode 100644 documentation/tutorial/12-actions/02-adding-parameters-to-actions/app-b/longpress.js
 delete mode 100644 documentation/tutorial/12-actions/02-adding-parameters-to-actions/text.md
 delete mode 100644 documentation/tutorial/12-actions/meta.json
 delete mode 100644 documentation/tutorial/13-advanced-styling/01-classes/app-a/App.svelte
 delete mode 100644 documentation/tutorial/13-advanced-styling/01-classes/app-b/App.svelte
 delete mode 100644 documentation/tutorial/13-advanced-styling/01-classes/text.md
 delete mode 100644 documentation/tutorial/13-advanced-styling/02-class-shorthand/app-a/App.svelte
 delete mode 100644 documentation/tutorial/13-advanced-styling/02-class-shorthand/app-b/App.svelte
 delete mode 100644 documentation/tutorial/13-advanced-styling/02-class-shorthand/text.md
 delete mode 100644 documentation/tutorial/13-advanced-styling/03-inline-styles/app-a/App.svelte
 delete mode 100644 documentation/tutorial/13-advanced-styling/03-inline-styles/app-b/App.svelte
 delete mode 100644 documentation/tutorial/13-advanced-styling/03-inline-styles/text.md
 delete mode 100644 documentation/tutorial/13-advanced-styling/04-style-directive/app-a/App.svelte
 delete mode 100644 documentation/tutorial/13-advanced-styling/04-style-directive/app-b/App.svelte
 delete mode 100644 documentation/tutorial/13-advanced-styling/04-style-directive/text.md
 delete mode 100644 documentation/tutorial/13-advanced-styling/meta.json
 delete mode 100644 documentation/tutorial/14-composition/01-slots/app-a/App.svelte
 delete mode 100644 documentation/tutorial/14-composition/01-slots/app-a/Box.svelte
 delete mode 100644 documentation/tutorial/14-composition/01-slots/app-b/App.svelte
 delete mode 100644 documentation/tutorial/14-composition/01-slots/app-b/Box.svelte
 delete mode 100644 documentation/tutorial/14-composition/01-slots/text.md
 delete mode 100644 documentation/tutorial/14-composition/02-slot-fallbacks/app-a/App.svelte
 delete mode 100644 documentation/tutorial/14-composition/02-slot-fallbacks/app-a/Box.svelte
 delete mode 100644 documentation/tutorial/14-composition/02-slot-fallbacks/app-b/App.svelte
 delete mode 100644 documentation/tutorial/14-composition/02-slot-fallbacks/app-b/Box.svelte
 delete mode 100644 documentation/tutorial/14-composition/02-slot-fallbacks/text.md
 delete mode 100644 documentation/tutorial/14-composition/03-named-slots/app-a/App.svelte
 delete mode 100644 documentation/tutorial/14-composition/03-named-slots/app-a/ContactCard.svelte
 delete mode 100644 documentation/tutorial/14-composition/03-named-slots/app-b/App.svelte
 delete mode 100644 documentation/tutorial/14-composition/03-named-slots/app-b/ContactCard.svelte
 delete mode 100644 documentation/tutorial/14-composition/03-named-slots/text.md
 delete mode 100755 documentation/tutorial/14-composition/04-optional-slots/app-a/App.svelte
 delete mode 100755 documentation/tutorial/14-composition/04-optional-slots/app-a/Comment.svelte
 delete mode 100755 documentation/tutorial/14-composition/04-optional-slots/app-a/Project.svelte
 delete mode 100755 documentation/tutorial/14-composition/04-optional-slots/app-b/App.svelte
 delete mode 100755 documentation/tutorial/14-composition/04-optional-slots/app-b/Comment.svelte
 delete mode 100755 documentation/tutorial/14-composition/04-optional-slots/app-b/Project.svelte
 delete mode 100644 documentation/tutorial/14-composition/04-optional-slots/text.md
 delete mode 100644 documentation/tutorial/14-composition/05-slot-props/app-a/App.svelte
 delete mode 100644 documentation/tutorial/14-composition/05-slot-props/app-a/Hoverable.svelte
 delete mode 100644 documentation/tutorial/14-composition/05-slot-props/app-b/App.svelte
 delete mode 100644 documentation/tutorial/14-composition/05-slot-props/app-b/Hoverable.svelte
 delete mode 100644 documentation/tutorial/14-composition/05-slot-props/text.md
 delete mode 100644 documentation/tutorial/14-composition/meta.json
 delete mode 100644 documentation/tutorial/15-context/01-context-api/app-a/App.svelte
 delete mode 100644 documentation/tutorial/15-context/01-context-api/app-a/Map.svelte
 delete mode 100644 documentation/tutorial/15-context/01-context-api/app-a/MapMarker.svelte
 delete mode 100644 documentation/tutorial/15-context/01-context-api/app-a/mapbox.js
 delete mode 100644 documentation/tutorial/15-context/01-context-api/app-b/App.svelte
 delete mode 100644 documentation/tutorial/15-context/01-context-api/app-b/Map.svelte
 delete mode 100644 documentation/tutorial/15-context/01-context-api/app-b/MapMarker.svelte
 delete mode 100644 documentation/tutorial/15-context/01-context-api/app-b/mapbox.js
 delete mode 100644 documentation/tutorial/15-context/01-context-api/text.md
 delete mode 100644 documentation/tutorial/15-context/meta.json
 delete mode 100644 documentation/tutorial/16-special-elements/01-svelte-self/app-a/App.svelte
 delete mode 100644 documentation/tutorial/16-special-elements/01-svelte-self/app-a/File.svelte
 delete mode 100644 documentation/tutorial/16-special-elements/01-svelte-self/app-a/Folder.svelte
 delete mode 100644 documentation/tutorial/16-special-elements/01-svelte-self/app-b/App.svelte
 delete mode 100644 documentation/tutorial/16-special-elements/01-svelte-self/app-b/File.svelte
 delete mode 100644 documentation/tutorial/16-special-elements/01-svelte-self/app-b/Folder.svelte
 delete mode 100644 documentation/tutorial/16-special-elements/01-svelte-self/text.md
 delete mode 100644 documentation/tutorial/16-special-elements/02-svelte-component/app-a/App.svelte
 delete mode 100644 documentation/tutorial/16-special-elements/02-svelte-component/app-a/BlueThing.svelte
 delete mode 100644 documentation/tutorial/16-special-elements/02-svelte-component/app-a/GreenThing.svelte
 delete mode 100644 documentation/tutorial/16-special-elements/02-svelte-component/app-a/RedThing.svelte
 delete mode 100644 documentation/tutorial/16-special-elements/02-svelte-component/app-b/App.svelte
 delete mode 100644 documentation/tutorial/16-special-elements/02-svelte-component/app-b/BlueThing.svelte
 delete mode 100644 documentation/tutorial/16-special-elements/02-svelte-component/app-b/GreenThing.svelte
 delete mode 100644 documentation/tutorial/16-special-elements/02-svelte-component/app-b/RedThing.svelte
 delete mode 100644 documentation/tutorial/16-special-elements/02-svelte-component/text.md
 delete mode 100644 documentation/tutorial/16-special-elements/03-svelte-element/app-a/App.svelte
 delete mode 100644 documentation/tutorial/16-special-elements/03-svelte-element/app-b/App.svelte
 delete mode 100644 documentation/tutorial/16-special-elements/03-svelte-element/text.md
 delete mode 100644 documentation/tutorial/16-special-elements/04-svelte-window/app-a/App.svelte
 delete mode 100644 documentation/tutorial/16-special-elements/04-svelte-window/app-b/App.svelte
 delete mode 100644 documentation/tutorial/16-special-elements/04-svelte-window/text.md
 delete mode 100644 documentation/tutorial/16-special-elements/05-svelte-window-bindings/app-a/App.svelte
 delete mode 100644 documentation/tutorial/16-special-elements/05-svelte-window-bindings/app-b/App.svelte
 delete mode 100644 documentation/tutorial/16-special-elements/05-svelte-window-bindings/text.md
 delete mode 100644 documentation/tutorial/16-special-elements/06-svelte-document/app-a/App.svelte
 delete mode 100644 documentation/tutorial/16-special-elements/06-svelte-document/app-b/App.svelte
 delete mode 100644 documentation/tutorial/16-special-elements/06-svelte-document/text.md
 delete mode 100644 documentation/tutorial/16-special-elements/07-svelte-body/app-a/App.svelte
 delete mode 100644 documentation/tutorial/16-special-elements/07-svelte-body/app-b/App.svelte
 delete mode 100644 documentation/tutorial/16-special-elements/07-svelte-body/text.md
 delete mode 100644 documentation/tutorial/16-special-elements/08-svelte-head/app-a/App.svelte
 delete mode 100644 documentation/tutorial/16-special-elements/08-svelte-head/app-b/App.svelte
 delete mode 100644 documentation/tutorial/16-special-elements/08-svelte-head/text.md
 delete mode 100644 documentation/tutorial/16-special-elements/09-svelte-options/app-a/App.svelte
 delete mode 100644 documentation/tutorial/16-special-elements/09-svelte-options/app-a/Todo.svelte
 delete mode 100644 documentation/tutorial/16-special-elements/09-svelte-options/app-a/flash.js
 delete mode 100644 documentation/tutorial/16-special-elements/09-svelte-options/app-b/App.svelte
 delete mode 100644 documentation/tutorial/16-special-elements/09-svelte-options/app-b/Todo.svelte
 delete mode 100644 documentation/tutorial/16-special-elements/09-svelte-options/app-b/flash.js
 delete mode 100644 documentation/tutorial/16-special-elements/09-svelte-options/text.md
 delete mode 100644 documentation/tutorial/16-special-elements/10-svelte-fragment/app-a/App.svelte
 delete mode 100644 documentation/tutorial/16-special-elements/10-svelte-fragment/app-a/Box.svelte
 delete mode 100644 documentation/tutorial/16-special-elements/10-svelte-fragment/app-b/App.svelte
 delete mode 100644 documentation/tutorial/16-special-elements/10-svelte-fragment/app-b/Box.svelte
 delete mode 100644 documentation/tutorial/16-special-elements/10-svelte-fragment/text.md
 delete mode 100644 documentation/tutorial/16-special-elements/meta.json
 delete mode 100644 documentation/tutorial/17-module-context/01-sharing-code/app-a/App.svelte
 delete mode 100644 documentation/tutorial/17-module-context/01-sharing-code/app-a/AudioPlayer.svelte
 delete mode 100644 documentation/tutorial/17-module-context/01-sharing-code/app-b/App.svelte
 delete mode 100644 documentation/tutorial/17-module-context/01-sharing-code/app-b/AudioPlayer.svelte
 delete mode 100644 documentation/tutorial/17-module-context/01-sharing-code/text.md
 delete mode 100644 documentation/tutorial/17-module-context/02-module-exports/app-a/App.svelte
 delete mode 100644 documentation/tutorial/17-module-context/02-module-exports/app-a/AudioPlayer.svelte
 delete mode 100644 documentation/tutorial/17-module-context/02-module-exports/app-b/App.svelte
 delete mode 100644 documentation/tutorial/17-module-context/02-module-exports/app-b/AudioPlayer.svelte
 delete mode 100644 documentation/tutorial/17-module-context/02-module-exports/text.md
 delete mode 100644 documentation/tutorial/17-module-context/meta.json
 delete mode 100644 documentation/tutorial/18-special-tags/01-debug/app-a/App.svelte
 delete mode 100644 documentation/tutorial/18-special-tags/01-debug/app-b/App.svelte
 delete mode 100644 documentation/tutorial/18-special-tags/01-debug/text.md
 delete mode 100644 documentation/tutorial/18-special-tags/02-html-tags/app-a/App.svelte
 delete mode 100644 documentation/tutorial/18-special-tags/02-html-tags/app-b/App.svelte
 delete mode 100644 documentation/tutorial/18-special-tags/02-html-tags/text.md
 delete mode 100644 documentation/tutorial/18-special-tags/meta.json
 delete mode 100644 documentation/tutorial/19-next-steps/01-congratulations/app-a/App.svelte
 delete mode 100644 documentation/tutorial/19-next-steps/01-congratulations/text.md
 delete mode 100644 documentation/tutorial/19-next-steps/meta.json

diff --git a/documentation/blog/2016-11-26-frameworks-without-the-framework.md b/documentation/blog/2016-11-26-frameworks-without-the-framework.md
deleted file mode 100644
index de7a227082..0000000000
--- a/documentation/blog/2016-11-26-frameworks-without-the-framework.md
+++ /dev/null
@@ -1,51 +0,0 @@
----
-title: "Frameworks without the framework: why didn't we think of this sooner?"
-description: You can't write serious applications in vanilla JavaScript without hitting a complexity wall. But a compiler can do it for you.
-author: Rich Harris
-authorURL: https://twitter.com/Rich_Harris
----
-
-> Wait, this new framework has a _runtime_? Ugh. Thanks, I'll pass.
-> **– front end developers in 2018**
-
-We're shipping too much code to our users. Like a lot of front end developers, I've been in denial about that fact, thinking that it was fine to serve 100kb of JavaScript on page load – just use [one less .jpg!](https://twitter.com/miketaylr/status/227056824275333120) – and that what _really_ mattered was performance once your app was already interactive.
-
-But I was wrong. 100kb of .js isn't equivalent to 100kb of .jpg. It's not just the network time that'll kill your app's startup performance, but the time spent parsing and evaluating your script, during which time the browser becomes completely unresponsive. On mobile, those milliseconds rack up very quickly.
-
-If you're not convinced that this is a problem, follow [Alex Russell](https://twitter.com/slightlylate) on Twitter. Alex [hasn't been making many friends in the framework community lately](https://twitter.com/slightlylate/status/728355959022587905), but he's not wrong. But the proposed alternative to using frameworks like Angular, React and Ember – [Polymer](https://www.polymer-project.org/1.0/) – hasn't yet gained traction in the front end world, and it's certainly not for a lack of marketing.
-
-Perhaps we need to rethink the whole thing.
-
-## What problem do frameworks _really_ solve?
-
-The common view is that frameworks make it easier to manage the complexity of your code: the framework abstracts away all the fussy implementation details with techniques like virtual DOM diffing. But that's not really true. At best, frameworks _move the complexity around_, away from code that you had to write and into code you didn't.
-
-Instead, the reason that ideas like React are so wildly and deservedly successful is that they make it easier to manage the complexity of your _concepts_. Frameworks are primarily a tool for structuring your thoughts, not your code.
-
-Given that, what if the framework _didn't actually run in the browser_? What if, instead, it converted your application into pure vanilla JavaScript, just like Babel converts ES2016+ to ES5? You'd pay no upfront cost of shipping a hefty runtime, and your app would get seriously fast, because there'd be no layers of abstraction between your app and the browser.
-
-## Introducing Svelte
-
-Svelte is a new framework that does exactly that. You write your components using HTML, CSS and JavaScript (plus a few extra bits you can [learn in under 5 minutes](https://v2.svelte.dev/guide)), and during your build process Svelte compiles them into tiny standalone JavaScript modules. By statically analysing the component template, we can make sure that the browser does as little work as possible.
-
-The [Svelte implementation of TodoMVC](https://svelte-todomvc.surge.sh/) weighs 3.6kb zipped. For comparison, React plus ReactDOM _without any app code_ weighs about 45kb zipped. It takes about 10x as long for the browser just to evaluate React as it does for Svelte to be up and running with an interactive TodoMVC.
-
-And once your app _is_ up and running, according to [js-framework-benchmark](https://github.com/krausest/js-framework-benchmark) **Svelte is fast as heck**. It's faster than React. It's faster than Vue. It's faster than Angular, or Ember, or Ractive, or Preact, or Riot, or Mithril. It's competitive with Inferno, which is probably the fastest UI framework in the world, for now, because [Dominic Gannaway](https://twitter.com/trueadm) is a wizard. (Svelte is slower at removing elements. We're [working on it](https://github.com/sveltejs/svelte/issues/26).)
-
-It's basically as fast as vanilla JS, which makes sense because it _is_ vanilla JS – just vanilla JS that you didn't have to write.
-
-## But that's not the important thing
-
-Well, it _is_ important – performance matters a great deal. What's really exciting about this approach, though, is that we can finally solve some of the thorniest problems in web development.
-
-Consider interoperability. Want to `npm install cool-calendar-widget` and use it in your app? Previously, you could only do that if you were already using (a correct version of) the framework that the widget was designed for – if `cool-calendar-widget` was built in React and you're using Angular then, well, hard cheese. But if the widget author used Svelte, apps that use it can be built using whatever technology you like. (On the TODO list: a way to convert Svelte components into web components.)
-
-Or [code splitting](https://twitter.com/samccone/status/797528710085652480). It's a great idea (only load the code the user needs for the initial view, then get the rest later), but there's a problem – even if you only initially serve one React component instead of 100, _you still have to serve React itself_. With Svelte, code splitting can be much more effective, because the framework is embedded in the component, and the component is tiny.
-
-Finally, something I've wrestled with a great deal as an open source maintainer: your users always want _their_ features prioritised, and underestimate the cost of those features to people who don't need them. A framework author must always balance the long-term health of the project with the desire to meet their users' needs. That's incredibly difficult, because it's hard to anticipate – much less articulate – the consequences of incremental bloat, and it takes serious soft skills to tell people (who may have been enthusiastically evangelising your tool up to that point) that their feature isn't important enough. But with an approach like Svelte's, many features can be added with absolutely no cost to people who don't use them, because the code that implements those features just doesn't get generated by the compiler if it's unnecessary.
-
-## We're just getting started
-
-Svelte is very new. There's a lot of work still left to do – creating build tool integrations, adding a server-side renderer, hot reloading, transitions, more documentation and examples, starter kits, and so on.
-
-But you can already build rich components with it, which is why we've gone straight to a stable 1.0.0 release. [Read the guide](https://v2.svelte.dev/guide), [try it out in the REPL](/repl), and head over to [GitHub](https://github.com/sveltejs/svelte) to help kickstart the next era of front end development.
diff --git a/documentation/blog/2017-08-07-the-easiest-way-to-get-started.md b/documentation/blog/2017-08-07-the-easiest-way-to-get-started.md
deleted file mode 100644
index 2bbb2d4639..0000000000
--- a/documentation/blog/2017-08-07-the-easiest-way-to-get-started.md
+++ /dev/null
@@ -1,65 +0,0 @@
----
-title: The easiest way to get started with Svelte
-description: This'll only take a minute.
-author: Rich Harris
-authorURL: https://twitter.com/Rich_Harris
----
-
-Svelte is a [new kind of framework](/blog/frameworks-without-the-framework). Rather than putting a `<script src='svelte.js'>` tag on the page, or bringing it into your app with `import` or `require`, Svelte is a compiler that works behind the scenes to turn your component files into beautifully optimised JavaScript.
-
-Because of that, getting started with it can be a little bit confusing at first. How, you might reasonably ask, do you make a Svelte app?
-
-## 1. Use the REPL
-
-The [Svelte REPL](/repl) (Read-Eval-Print Loop) is the easiest way to begin. This is an interactive environment that allows you to modify code and instantly see the result.
-
-You can choose from a list of [examples](/examples/), click the [REPL](/repl) link, and then tweak them until they do what you want.
-
-<aside><p>You'll need to have <a href="https://nodejs.org/">Node.js</a> installed, and know how to use the terminal</p></aside>
-
-At some point, your app will outgrow the REPL. Click the **download** button to save a `svelte-app.zip` file to your computer and uncompress it.
-
-Open a terminal window and set the project up...
-
-```bash
-cd /path/to/svelte-app
-npm install
-```
-
-...then start up a development server:
-
-```bash
-npm run dev
-```
-
-This will serve your app on [localhost:8080](http://localhost:8080) and rebuild it with [Rollup](https://rollupjs.org) every time you make a change to the files in `svelte-app/src`.
-
-## 2. Use degit
-
-When you download from the REPL, you're getting a customised version of the [sveltejs/template](https://github.com/sveltejs/template) repo. You can skip messing around with zip files by using [degit](https://github.com/Rich-Harris/degit), a project scaffolding tool.
-
-In the terminal, you can instantly create a new project like so:
-
-```bash
-npx degit sveltejs/template my-svelte-project
-cd my-svelte-project
-# to use TypeScript run:
-# node scripts/setupTypeScript.js
-
-npm install
-npm run dev
-```
-
-This will create a new project in the `my-svelte-project` directory, install its dependencies, and start a server on http://localhost:8080.
-
-You can find more information about using TypeScript [here](/blog/svelte-and-typescript).
-
-Once you've tinkered a bit and understood how everything fits together, you can fork [sveltejs/template](https://github.com/sveltejs/template) and start doing this instead:
-
-```bash
-npx degit your-name/template my-new-project
-```
-
-And that's it! Do `npm run build` to create a production-ready version of your app, and check the project template's [README](https://github.com/sveltejs/template/blob/master/README.md) for instructions on how to easily deploy your app to the web with [Vercel](https://vercel.com) or [Surge](http://surge.sh/).
-
-You're not restricted to using Rollup — there are also integrations for [webpack](https://github.com/sveltejs/svelte-loader), [Browserify](https://github.com/tehshrike/sveltify) and others, or you can use the [Svelte CLI](https://github.com/sveltejs/svelte-cli) (Update from 2019: with Svelte 3 the CLI was deprecated and we now use [sirv-cli](https://www.npmjs.com/package/sirv-cli) in our template. Feel free to use whatever tool you like!) or the [API](https://github.com/sveltejs/svelte/tree/v2#api) directly. If you make a project template using one of these tools, please share it with the [Svelte Discord chatroom](https://svelte.dev/chat), or via [@sveltejs](https://twitter.com/sveltejs) on Twitter!
diff --git a/documentation/blog/2017-09-06-the-zen-of-just-writing-css.md b/documentation/blog/2017-09-06-the-zen-of-just-writing-css.md
deleted file mode 100644
index f06a4aaac0..0000000000
--- a/documentation/blog/2017-09-06-the-zen-of-just-writing-css.md
+++ /dev/null
@@ -1,76 +0,0 @@
----
-title: The zen of Just Writing CSS
-description: I would say this is the future, but we're already doing it.
-author: Rich Harris
-authorURL: https://twitter.com/Rich_Harris
----
-
-It's fashionable to dislike CSS. There are lots of reasons why that's the case, but it boils down to this: CSS is _unpredictable_. If you've never had the experience of tweaking a style rule and accidentally breaking some layout that you thought was completely unrelated — usually when you're trying to ship — then you're either new at this or you're a much better programmer than the rest of us.
-
-So the JavaScript community rolled up its sleeves and got to work. Over the last couple of years, there's been a Cambrian explosion of libraries aimed at making CSS behave, collectively referred to as _CSS-in-JS_.
-
-What you might not realise is that **the biggest problems with CSS can be solved without CSS-in-JS**. Without those problems, writing CSS isn't just tolerable — it's enjoyable. And you don't have to find solutions to the additional problems that CSS-in-JS introduces.
-
-This article isn't in any way intended as criticism of the hard work the CSS-in-JS community has done. It's one of the most active corners of the JS ecosystem, and new ideas are springing up every week. Instead, my purpose is to illustrate why an alternative approach — based on Single File Components with real CSS — is so damn delightful.
-
-## The biggest problem with CSS
-
-Everything in CSS is global. Because of that, styles intended for one bit of markup often end up affecting another. Because of _that_, developers often resort to wild namespacing conventions (not 'rules', since they're very difficult to enforce) that mostly just increase your risk of RSI.
-
-It gets worse when you're working on a team. No-one dares touch styles authored by someone else, because it's often unclear what they're doing, what markup they apply to, and what disasters will unfold if you remove them.
-
-The consequence of all this is the **append-only stylesheet**. There's no way of knowing which code can safely be removed, so it's common to undo some existing style with another, more specific style — even on relatively small projects.
-
-## Single File Components change all that
-
-The idea behind SFCs is simple: you write your components in an HTML file that (optionally) contains a `<style>` and `<script>` attribute describing the component's styles and behaviour. Svelte, Ractive, Vue and Polymer all follow this basic pattern.
-
-<aside>
-	<p><a href="/blog/frameworks-without-the-framework">Read the introductory blog post</a> if you're new to Svelte. Or <a href="https://twitter.com/padolsey/status/899717303234908160">read</a> <a href="https://twitter.com/sveltejs/status/901818357644701696">the</a> <a href="https://twitter.com/sveltejs/status/901818106309476352">testimonials</a>.</p>
-</aside>
-
-(For the rest of this article we'll be using Svelte, obviously. But if the idea of using a template language makes you shudder — your fears are misplaced, but that's a topic for another day — then just use Vue which lets you use JSX in your SFCs.)
-
-Several wonderful things happen as a result:
-
-- Your styles are _scoped to the component_. No more leakage, no more unpredictable cascade. And no more sesquipedalian classnames designed to prevent conflicts.
-- You don't need to go spelunking through your folder structure to find the rules that are breaking your stuff.
-- The compiler (in Svelte's case) can **identify and remove unused styles**. No more append-only stylesheets!
-
-Let's see what that looks like in practice.
-
-<figure>
-	<video controls poster='https://svelte-technology-assets.surge.sh/just-write-css.jpg'>
-		<source type='video/mp4' src='https://svelte-technology-assets.surge.sh/just-write-css.mp4'>
-	</video>
-
-<!-- prettier-ignore -->
-<figcaption>
-	Is this what they mean by 'use the platform'?
-</figcaption>
-
-</figure>
-
-Every code editor already knows about CSS, so there's a good chance that you'll get autocomplete, linting, syntax highlighting and so on — all without additional JS-fatigue-inducing tools.
-
-And because it's real CSS, rather than some camelCased quotes-everywhere impostor, we can take advantage of the 'tweak in devtools, paste back into our source code' workflow, which I personally couldn't live without. Notice that we get CSS sourcemaps out of the box, so you can instantly pinpoint the lines in question. It's hard to overstate the importance of this: when you're in WYSIWYG mode, you're not thinking in terms of your component tree, so having a robust way to figure out _where these damn styles came from_ is essential. Doubly so if someone else originally wrote the component. (I promise you, this is the single biggest productivity boost to your CSS workflow. If you're writing styles without sourcemaps, you are almost certainly wasting a lot of time. I know I was.)
-
-Svelte transforms your selectors (using an attribute that's also applied to affected elements, though the exact mechanism is unimportant and subject to change) to achieve the scoping. It warns on and removes any unused rules, then it minifies the result and lets you write it out to a `.css` file. There's also an experimental new option to compile to web components, using shadow DOM to encapsulate the styles, if that's your jam.
-
-This is all possible because your CSS is parsed (with [css-tree](https://github.com/csstree/csstree)) and statically analysed in the context of your markup. Static analysis opens the doors to all kinds of exciting future possibilities — smarter optimisations, a11y hints — that are much harder if your styles are computed dynamically at runtime. We're just getting started.
-
-## But we can add tools to do [x]!
-
-If your reaction to the video was 'fine, but if we use TypeScript and write plugins for each editor then we can get all the autocomplete and syntax highlighting stuff' — in other words, if you believe that in order to achieve parity with CSS it makes sense to build, document, promote and maintain a fleet of ancillary projects — then, well, you and I may never see eye to eye!
-
-## We don't have all the answers — yet
-
-Having said all that, CSS-in-JS does point to answers to some lingering questions:
-
-- How can we install styles from npm?
-- How can we reuse constants that are defined in a single place?
-- How can we compose declarations?
-
-Personally, I haven't found these issues to outweigh the benefits of the approach outlined above. You may well have a different set of priorities, and they may be reason enough for you to abandon CSS.
-
-But at the end of the day, you have to know CSS anyway. Love it or loathe it, you must at least _learn_ it. As custodians of the web, we have a choice: create abstractions that steepen the web dev learning curve yet further, or work together to fix the bad parts of CSS. I know which I choose.
diff --git a/documentation/blog/2017-12-31-sapper-towards-the-ideal-web-app-framework.md b/documentation/blog/2017-12-31-sapper-towards-the-ideal-web-app-framework.md
deleted file mode 100644
index 86514fc279..0000000000
--- a/documentation/blog/2017-12-31-sapper-towards-the-ideal-web-app-framework.md
+++ /dev/null
@@ -1,80 +0,0 @@
----
-title: 'Sapper: Towards the ideal web app framework'
-description: Taking the next-plus-one step
-author: Rich Harris
-authorURL: https://twitter.com/Rich_Harris
----
-
-> Quickstart for the impatient: [the Sapper docs](https://sapper.svelte.dev), and the [starter template](https://github.com/sveltejs/sapper-template)
-
-If you had to list the characteristics of the perfect Node.js web application framework, you'd probably come up with something like this:
-
-1. It should do server-side rendering, for fast initial loads and no caveats around SEO
-2. As a corollary, your app's codebase should be universal — write once for server _and_ client
-3. The client-side app should _hydrate_ the server-rendered HTML, attaching event listeners (and so on) to existing elements rather than re-rendering them
-4. Navigating to subsequent pages should be instantaneous
-5. Offline, and other Progressive Web App characteristics, must be supported out of the box
-6. Only the JavaScript and CSS required for the first page should load initially. That means the framework should do automatic code-splitting at the route level, and support dynamic `import(...)` for more granular manual control
-7. No compromise on performance
-8. First-rate developer experience, with hot module reloading and all the trimmings
-9. The resulting codebase should be easy to grok and maintain
-10. It should be possible to understand and customise every aspect of the system — no webpack configs locked up in the framework, and as little hidden 'plumbing' as possible
-11. Learning the entire framework in under an hour should be easy, and not just for experienced developers
-
-[Next.js](https://github.com/zeit/next.js) is close to this ideal. If you haven't encountered it yet, I strongly recommend going through the tutorials at [learnnextjs.com](https://learnnextjs.com). Next introduced a brilliant idea: all the pages of your app are files in a `your-project/pages` directory, and each of those files is just a React component.
-
-Everything else flows from that breakthrough design decision. Finding the code responsible for a given page is easy, because you can just look at the filesystem rather than playing 'guess the component name'. Project structure bikeshedding is a thing of the past. And the combination of SSR (server-side rendering) and code-splitting — something the React Router team [gave up on](https://reacttraining.com/react-router/web/guides/code-splitting), declaring 'Godspeed those who attempt the server-rendered, code-split apps' — is trivial.
-
-But it's not perfect. As churlish as it might be to list the flaws in something _so, so good_, there are some:
-
-- Next uses something called 'route masking' to create nice URLs (e.g. `/blog/hello-world` instead of `/post?slug=hello-world`). This undermines the guarantee about directory structure corresponding to app structure, and forces you to maintain configuration that translates between the two forms
-- All your routes are assumed to be universal 'pages'. But it's very common to need routes that only render on the server, such as a 301 redirect or an API endpoint that serves the data for your pages, and Next doesn't have a great solution for this. You can add logic to your `server.js` file to handle these cases, but it feels at odds with the declarative approach taken for pages
-- To use the client-side router, links can't be standard `<a>` tags. Instead, you have to use framework-specific `<Link>` components, which is impossible in the markdown content for a blog post such as this one, for example
-
-The real problem, though, is that all that goodness comes for a price. The simplest possible Next app — a single 'hello world' page that renders some static text — involves 66kb of gzipped JavaScript. Unzipped, it's 204kb, which is a non-trivial amount of code for a mobile device to parse at a time when performance is a critical factor determining whether or not your users will stick around. And that's the _baseline_.
-
-We can do better!
-
-## The compiler-as-framework paradigm shift
-
-[Svelte introduced a radical idea](/blog/frameworks-without-the-framework): what if your UI framework wasn't a framework at all, but a compiler that turned your components into standalone JavaScript modules? Instead of using a library like React or Vue, which knows nothing about your app and must therefore be a one-size-fits-all solution, we can ship highly-optimised vanilla JavaScript. Just the code your app needs, and without the memory and performance overhead of solutions based on a virtual DOM.
-
-The JavaScript world is [moving towards this model](https://tomdale.net/2017/09/compilers-are-the-new-frameworks/). [Stencil](https://stenciljs.com), a Svelte-inspired framework from the Ionic team, compiles to web components. [Glimmer](https://glimmerjs.com) _doesn't_ compile to standalone JavaScript (the pros and cons of which deserve a separate blog post), but the team is doing some fascinating research around compiling templates to bytecode. (React is [getting in on the action](https://twitter.com/trueadm/status/944908776896978946), though their current research focuses on optimising your JSX app code, which is arguably more similar to the ahead-of-time optimisations that Angular, Ractive and Vue have been doing for a few years.)
-
-What happens if we use the new model as a starting point?
-
-## Introducing Sapper
-
-<aside><p>The <a href="https://sapper.svelte.dev/docs#Why_the_name">name comes from</a> the term for combat engineers, and is also short for Svelte app maker</p></aside>
-
-[Sapper](https://sapper.svelte.dev) is the answer to that question. **Sapper is a Next.js-style framework that aims to meet the eleven criteria at the top of this article while dramatically reducing the amount of code that gets sent to the browser.** It's implemented as Express-compatible middleware, meaning it's easy to understand and customise.
-
-The same 'hello world' app that took 204kb with React and Next weighs just 7kb with Sapper. That number is likely to fall further in the future as we explore the space of optimisation possibilities, such as not shipping any JavaScript _at all_ for pages that aren't interactive, beyond the tiny Sapper runtime that handles client-side routing.
-
-What about a more 'real world' example? Conveniently, the [RealWorld](https://github.com/gothinkster/realworld) project, which challenges frameworks to develop an implementation of a Medium clone, gives us a way to find out. The [Sapper implementation](https://github.com/sveltejs/realworld) takes 39.6kb (11.8kb zipped) to render an interactive homepage.
-
-<aside><p>Code-splitting isn't free — if the reference implementation used code-splitting, it would be larger still</p></aside>
-
-The entire app costs 132.7kb (39.9kb zipped), which is significantly smaller than the reference React/Redux implementation at 327kb (85.7kb), but even if it was as large it would _feel_ faster because of code-splitting. And that's a crucial point. We're told we need to code-split our apps, but if your app uses a traditional framework like React or Vue then there's a hard lower bound on the size of your initial code-split chunk — the framework itself, which is likely to be a significant portion of your total app size. With the Svelte approach, that's no longer the case.
-
-But size is only part of the story. Svelte apps are also extremely performant and memory-efficient, and the framework includes powerful features that you would sacrifice if you chose a 'minimal' or 'simple' UI library.
-
-## Trade-offs
-
-The biggest drawback for many developers evaluating Sapper would be 'but I like React, and I already know how to use it', which is fair.
-
-If you're in that camp, I'd invite you to at least try alternative frameworks. You might be pleasantly surprised! The [Sapper RealWorld](https://github.com/sveltejs/realworld) implementation totals 1,201 lines of source code, compared to 2,377 for the reference implementation, because you're able to express concepts very concisely using Svelte's template syntax (which [takes all of five minutes to master](https://v2.svelte.dev/guide#template-syntax)). You get [scoped CSS](/blog/the-zen-of-just-writing-css), with unused style removal and minification built-in, and you can use preprocessors like LESS if you want. You no longer need to use Babel. SSR is ridiculously fast, because it's just string concatenation. And we recently introduced [svelte/store](https://v2.svelte.dev/guide#state-management), a tiny global store that synchronises state across your component hierarchy with zero boilerplate. The worst that can happen is that you'll end up feeling vindicated!
-
-But there are trade-offs nonetheless. Some people have a pathological aversion to any form of 'template language', and maybe that applies to you. JSX proponents will clobber you with the 'it's just JavaScript' mantra, and therein lies React's greatest strength, which is that it is infinitely flexible. That flexibility comes with its own set of trade-offs, but we're not here to discuss those.
-
-And then there's _ecosystem_. The universe around React in particular — the devtools, editor integrations, ancillary libraries, tutorials, StackOverflow answers, hell, even job opportunities — is unrivalled. While it's true that citing 'ecosystem' as the main reason to choose a tool is a sign that you're stuck on a local maximum, apt to be marooned by the rising waters of progress, it's still a major point in favour of incumbents.
-
-## Roadmap
-
-We're not at version 1.0.0 yet, and a few things may change before we get there. Once we do (soon!), there are a lot of exciting possibilities.
-
-I believe the next frontier of web performance is 'whole-app optimisation'. Currently, Svelte's compiler operates at the component level, but a compiler that understood the boundaries _between_ those components could generate even more efficient code. The React team's [Prepack research](https://twitter.com/trueadm/status/944908776896978946) is predicated on a similar idea, and the Glimmer team is doing some interesting work in this space. Svelte and Sapper are well positioned to take advantage of these ideas.
-
-Speaking of Glimmer, the idea of compiling components to bytecode is one that we'll probably steal in 2018. A framework like Sapper could conceivably determine which compilation mode to use based on the characteristics of your app. It could even serve JavaScript for the initial route for the fastest possible startup time, then lazily serve a bytecode interpreter for subsequent routes, resulting in the optimal combination of startup size and total app size.
-
-Mostly, though, we want the direction of Sapper to be determined by its users. If you're the kind of developer who enjoys life on the bleeding edge and would like to help shape the future of how we build web apps, please join us on [GitHub](https://github.com/sveltejs/svelte) and [Discord](https://svelte.dev/chat).
diff --git a/documentation/blog/2018-04-18-version-2.md b/documentation/blog/2018-04-18-version-2.md
deleted file mode 100644
index 58f420fcd6..0000000000
--- a/documentation/blog/2018-04-18-version-2.md
+++ /dev/null
@@ -1,201 +0,0 @@
----
-title: Svelte v2 is out!
-description: Here's what you need to know
-author: Rich Harris
-authorURL: https://twitter.com/Rich_Harris
----
-
-<aside>Our motto is 'move slowly and break things'. No, wait, that came out wrong...</aside>
-
-Almost a year after we first started talking about version 2 on the Svelte issue tracker, it's finally time to make some breaking changes. This blog post will explain what changed, why it changed, and what you need to do to bring your apps up to date.
-
-## tl;dr
-
-Each of these items is described in more depth below. If you get stuck, ask for help in our friendly [Discord chatroom](https://svelte.dev/chat).
-
-- Install Svelte v2 from npm
-- Upgrade your templates with [svelte-upgrade](https://github.com/sveltejs/svelte-upgrade)
-- Remove calls to `component.observe`, or add the `observe` method from [svelte-extras](https://github.com/sveltejs/svelte-extras)
-- Rewrite calls to `component.get('foo')` as `component.get().foo`
-- Return `destroy` from your custom event handlers, rather than `teardown`
-- Make sure you're not passing numeric string props to components
-
-## New template syntax
-
-The most visible change: we've made some improvements to the template syntax.
-
-A common piece of feedback we heard was 'ewww, Mustache' or 'ewww, Handlebars'. A lot of people who used string-based templating systems in a previous era of web development _really_ dislike them. Because Svelte adopted the `{{curlies}}` from those languages, a lot of people assumed that we somehow shared the limitations of those tools, such as weird scoping rules or an inability to use arbitrary JavaScript expressions.
-
-<aside>If you need to show an actual `{` character, it's as easy as `&amp;#123;`</aside>
-
-Beyond that, JSX proved that double curlies are unnecessary. So we've made our templates more... svelte, by adopting single curlies. The result feels much lighter to look at and is more pleasant to type:
-
-```svelte
-<h1>Hello {name}!</h1>
-```
-
-There are a few other updates. But you don't need to make them manually — just run [svelte-upgrade](https://github.com/sveltejs/svelte-upgrade) on your codebase:
-
-```bash
-npx svelte-upgrade v2 src
-```
-
-This assumes any `.html` files in `src` are Svelte components. You can specify whichever directory you like, or target a different directory — for example, you'd do `npx svelte-upgrade v2 routes` to update a [Sapper](https://sapper.svelte.technology) app.
-
-To see the full set of changes, consult the [svelte-upgrade README](https://github.com/sveltejs/svelte-upgrade#svelte-v2-syntax-changes).
-
-## Computed properties
-
-Another thing that people often found confusing about Svelte is the way computed properties work. To recap, if you had a component with this...
-
-```ts
-// @noErrors
-export default {
-	computed: {
-		d: (a, b, c) => (a = b + c)
-	}
-};
-```
-
-...then Svelte would first look at the function arguments to see which values `d` depended on, and then it would write code that updated `d` whenever those values changed, by injecting them into the function. That's cool, because it allows you to derive complex values from your component's inputs without worrying about when they need to recomputed, but it's also... _weird_. JavaScript doesn't work that way!
-
-In v2, we use [destructuring](http://www.jstips.co/en/javascript/use-destructuring-in-function-parameters/) instead:
-
-```ts
-// @noErrors
-export default {
-	computed: {
-		d: ({ a, b, c }) => (a = b + c)
-	}
-};
-```
-
-The Svelte compiler can still see which values `d` depends on, but it's no longer injecting values — it just passes the component state object into each computed property.
-
-Again, you don't need to make this change manually — just run svelte-upgrade on your components, as shown above.
-
-## Sorry, IE11. It's not you, it's... well actually, yeah. It's you
-
-Svelte v1 was careful to only emit ES5 code, so that you wouldn't be forced to faff around with transpilers in order to use it. But it's 2018 now, and almost all browsers support modern JavaScript. By ditching the ES5 constraint, we can generate leaner code.
-
-If you need to support IE11 and friends, you will need to use a transpiler like [Babel](https://babeljs.io/repl) or [Bublé](https://buble.surge.sh/).
-
-## New lifecycle hooks
-
-In addition to `oncreate` and `ondestroy`, Svelte v2 adds two more [lifecycle hooks](https://v2.svelte.dev/guide#lifecycle-hooks) for responding to state changes:
-
-```js
-// @noErrors
-export default {
-	onstate({ changed, current, previous }) {
-		// this fires before oncreate, and
-		// whenever state changes
-	},
-
-	onupdate({ changed, current, previous }) {
-		// this fires after oncreate, and
-		// whenever the DOM has been updated
-		// following a state change
-	}
-};
-```
-
-You can also listen to those events programmatically:
-
-```js
-// @noErrors
-component.on('state', ({ changed, current, previous }) => {
-	// ...
-});
-```
-
-## component.observe
-
-With the new lifecycle hooks, we no longer need the `component.observe(...)` method:
-
-```js
-// @noErrors
-// before
-export default {
-	oncreate() {
-		this.observe('foo', foo => {
-			console.log(`foo is now ${foo}`);
-		});
-	}
-};
-
-// after
-export default {
-	onstate({ changed, current }) {
-		if (changed.foo) {
-			console.log(`foo is now ${current.foo}`);
-		}
-	}
-};
-```
-
-This shrinks the amount of code Svelte needs to generate, and gives you more flexibility. For example, it's now very easy to take action when any one of _several_ properties have changed, such as redrawing a canvas without debouncing several observers.
-
-However, if you prefer to use `component.observe(...)`, then you can install it from [svelte-extras](https://github.com/sveltejs/svelte-extras):
-
-```js
-// @noErrors
-import { observe } from 'svelte-extras';
-
-export default {
-	methods: {
-		observe
-	}
-};
-```
-
-## component.get
-
-This method no longer takes an optional `key` argument — instead, it always returns the entire state object:
-
-```js
-// @noErrors
-// before
-const foo = this.get('foo');
-const bar = this.get('bar');
-
-// after
-const { foo, bar } = this.get();
-```
-
-This change might seem annoying initially, but it's the right move: among other things, it's likely to play better with type systems as we explore that space more fully in future.
-
-## event_handler.destroy
-
-If your app has [custom event handlers](https://v2.svelte.dev/guide#custom-event-handlers), they must return an object with a `destroy` method, _not_ a `teardown` method (this aligns event handlers with the component API).
-
-## No more type coercion
-
-Previously, numeric values passed to components were treated as numbers:
-
-```svelte
-<Counter start="1" />
-```
-
-That causes unexpected behaviour, and has been changed: if you need to pass a literal number, do so as an expression:
-
-```svelte
-<Counter start={1} />
-```
-
-## Compiler changes
-
-In most cases you'll never need to deal with the compiler directly, so this shouldn't require any action on your part. It's worth noting anyway: the compiler API has changed. Instead of an object with a mish-mash of properties, the compiler now returns `js`, `css`, `ast` and `stats`:
-
-```js
-// @noErrors
-const { js, css, ast, stats } = svelte.compile(source, options);
-```
-
-`js` and `css` are both `{ code, map }` objects, where `code` is a string and `map` is a sourcemap. The `ast` is an abstract syntax tree of your component, and the `stats` object contains metadata about the component, and information about the compilation.
-
-Before, there was a `svelte.validate` method which checked your component was valid. That's been removed — if you want to check a component without actually compiling it, just pass the `generate: false` option.
-
-## My app is broken! Help!
-
-Hopefully this covers everything, and the update should be easier for you than it was for us. But if you find bugs, or discover things that aren't mentioned here, swing by [Discord chatroom](https://svelte.dev/chat) or raise an issue on the [tracker](https://github.com/sveltejs/svelte/issues).
diff --git a/documentation/blog/2018-12-26-svelte-css-in-js.md b/documentation/blog/2018-12-26-svelte-css-in-js.md
deleted file mode 100644
index 0eb2d0a19e..0000000000
--- a/documentation/blog/2018-12-26-svelte-css-in-js.md
+++ /dev/null
@@ -1,28 +0,0 @@
----
-title: Using CSS-in-JS with Svelte
-description: You don't need to, but you can
-author: Rich Harris
-authorURL: https://twitter.com/Rich_Harris
----
-
-CSS is a core part of any web app. By extension, a UI framework that doesn't have a built-in way to add styles to your components is unfinished.
-
-That's why Svelte allows you to add CSS in a component's `<style>` tag. Co-locating your CSS with your markup means we can [solve the biggest problems developers face when writing CSS](/blog/the-zen-of-just-writing-css) without introducing new ones, all while providing a rather nice development experience.
-
-But Svelte's style handling does have some limitations. It's too difficult to share styles between components, or apply app-level optimisations. These are areas we plan to address in future versions, but in the meantime if you need those things you can use any framework-agnostic CSS-in-JS library.
-
-## For example
-
-Here, we're using [Emotion](https://emotion.sh) to generate scoped class names that can be used across multiple components:
-
-<div class="max">
-	<iframe
-		title="Aphrodite example"
-		src="/repl/embed?example=blog-svelte-css-in-js"
-		scrolling="no"
-	></iframe>
-</div>
-
-It's important to note that most CSS-in-JS libraries have a runtime library, and many don't support statically extracting styles out into a separate <code>.css</code> file at build time (which is essential for the best performance). You should therefore only use CSS-in-JS if it's necessary for your application!
-
-Note that you can mix-and-match — you can still use Svelte's built-in CSS handling alongside a CSS-in-JS library.
diff --git a/documentation/blog/2018-12-27-virtual-dom-is-pure-overhead.md b/documentation/blog/2018-12-27-virtual-dom-is-pure-overhead.md
deleted file mode 100644
index 066e758e81..0000000000
--- a/documentation/blog/2018-12-27-virtual-dom-is-pure-overhead.md
+++ /dev/null
@@ -1,135 +0,0 @@
----
-title: Virtual DOM is pure overhead
-description: Let's retire the 'virtual DOM is fast' myth once and for all
-author: Rich Harris
-authorURL: https://twitter.com/Rich_Harris
----
-
-If you've used JavaScript frameworks in the last few years, you've probably heard the phrase 'the virtual DOM is fast', often said to mean that it's faster than the _real_ DOM. It's a surprisingly resilient meme — for example people have asked how Svelte can be fast when it doesn't use a virtual DOM.
-
-It's time to take a closer look.
-
-## What is the virtual DOM?
-
-In many frameworks, you build an app by creating `render()` functions, like this simple [React](https://reactjs.org/) component:
-
-```ts
-// @noErrors
-function HelloMessage(props) {
-	return <div className="greeting">Hello {props.name}</div>;
-}
-```
-
-You can do the same thing without JSX...
-
-```js
-// @noErrors
-function HelloMessage(props) {
-	return React.createElement('div', { className: 'greeting' }, 'Hello ', props.name);
-}
-```
-
-...but the result is the same — an object representing how the page should now look. That object is the virtual DOM. Every time your app's state updates (for example when the `name` prop changes), you create a new one. The framework's job is to _reconcile_ the new one against the old one, to figure out what changes are necessary and apply them to the real DOM.
-
-## How did the meme start?
-
-Misunderstood claims about virtual DOM performance date back to the launch of React. In [Rethinking Best Practices](https://www.youtube.com/watch?v=x7cQ3mrcKaY), a seminal 2013 talk by former React core team member Pete Hunt, we learned the following:
-
-> This is actually extremely fast, primarily because most DOM operations tend to be slow. There's been a lot of performance work on the DOM, but most DOM operations tend to drop frames.
-
-<figure>
-	<img alt="Pete Hunt at JSConfEU 2013" src="/media/rethinking-best-practices.jpg">
-	<figcaption>Screenshot from <a href="https://www.youtube.com/watch?v=x7cQ3mrcKaY">Rethinking Best Practices</a> at JSConfEU 2013</figcaption>
-</figure>
-
-But hang on a minute! The virtual DOM operations are _in addition to_ the eventual operations on the real DOM. The only way it could be faster is if we were comparing it to a less efficient framework (there were plenty to go around back in 2013!), or arguing against a straw man — that the alternative is to do something no-one actually does:
-
-```js
-// @noErrors
-onEveryStateChange(() => {
-	document.body.innerHTML = renderMyApp();
-});
-```
-
-Pete clarifies soon after...
-
-> React is not magic. Just like you can drop into assembler with C and beat the C compiler, you can drop into raw DOM operations and DOM API calls and beat React if you wanted to. However, using C or Java or JavaScript is an order of magnitude performance improvement because you don't have to worry...about the specifics of the platform. With React you can build applications without even thinking about performance and the default state is fast.
-
-...but that's not the part that stuck.
-
-## So... is the virtual DOM _slow_?
-
-Not exactly. It's more like 'the virtual DOM is usually fast enough', but with certain caveats.
-
-The original promise of React was that you could re-render your entire app on every single state change without worrying about performance. In practice, I don't think that's turned out to be accurate. If it was, there'd be no need for optimisations like `shouldComponentUpdate` (which is a way of telling React when it can safely skip a component).
-
-Even with `shouldComponentUpdate`, updating your entire app's virtual DOM in one go is a lot of work. A while back, the React team introduced something called React Fiber which allows the update to be broken into smaller chunks. This means (among other things) that updates don't block the main thread for long periods of time, though it doesn't reduce the total amount of work or the time an update takes.
-
-## Where does the overhead come from?
-
-Most obviously, [diffing isn't free](https://twitter.com/pcwalton/status/1015694528857047040). You can't apply changes to the real DOM without first comparing the new virtual DOM with the previous snapshot. To take the earlier `HelloMessage` example, suppose the `name` prop changed from 'world' to 'everybody'.
-
-1. Both snapshots contain a single element. In both cases it's a `<div>`, which means we can keep the same DOM node
-2. We enumerate all the attributes on the old `<div>` and the new one to see if any need to be changed, added or removed. In both cases we have a single attribute — a `className` with a value of `"greeting"`
-3. Descending into the element, we see that the text has changed, so we'll need to update the real DOM
-
-Of these three steps, only the third has value in this case, since — as is the case in the vast majority of updates — the basic structure of the app is unchanged. It would be much more efficient if we could skip straight to step 3:
-
-```js
-// @noErrors
-if (changed.name) {
-	text.data = name;
-}
-```
-
-(This is almost exactly the update code that Svelte generates. Unlike traditional UI frameworks, Svelte is a compiler that knows at _build time_ how things could change in your app, rather than waiting to do the work at _run time_.)
-
-## It's not just the diffing though
-
-The diffing algorithms used by React and other virtual DOM frameworks are fast. Arguably, the greater overhead is in the components themselves. You wouldn't write code like this...
-
-```js
-// @noErrors
-function StrawManComponent(props) {
-	const value = expensivelyCalculateValue(props.foo);
-
-	return <p>the value is {value}</p>;
-}
-```
-
-...because you'd be carelessly recalculating `value` on every update, regardless of whether `props.foo` had changed. But it's extremely common to do unnecessary computation and allocation in ways that seem much more benign:
-
-```js
-// @noErrors
-function MoreRealisticComponent(props) {
-	const [selected, setSelected] = useState(null);
-
-	return (
-		<div>
-			<p>Selected {selected ? selected.name : 'nothing'}</p>
-
-			<ul>
-				{props.items.map((item) => (
-					<li>
-						<button onClick={() => setSelected(item)}>{item.name}</button>
-					</li>
-				))}
-			</ul>
-		</div>
-	);
-}
-```
-
-Here, we're generating a new array of virtual `<li>` elements — each with their own inline event handler — on every state change, regardless of whether `props.items` has changed. Unless you're unhealthily obsessed with performance, you're not going to optimise that. There's no point. It's plenty fast enough. But you know what would be even faster? _Not doing that._
-
-<aside><p><a href="https://reactjs.org/docs/hooks-intro.html">React Hooks</a> doubles down on defaulting to doing unnecessary work, with <a href="https://twitter.com/thekitze/status/1078582382201131008">predictable results</a>.</p></aside>
-
-The danger of defaulting to doing unnecessary work, even if that work is trivial, is that your app will eventually succumb to 'death by a thousand cuts' with no clear bottleneck to aim at once it's time to optimise.
-
-Svelte is explicitly designed to prevent you from ending up in that situation.
-
-## Why do frameworks use the virtual DOM then?
-
-It's important to understand that virtual DOM _isn't a feature_. It's a means to an end, the end being declarative, state-driven UI development. Virtual DOM is valuable because it allows you to build apps without thinking about state transitions, with performance that is _generally good enough_. That means less buggy code, and more time spent on creative tasks instead of tedious ones.
-
-But it turns out that we can achieve a similar programming model without using virtual DOM — and that's where Svelte comes in.
diff --git a/documentation/blog/2019-01-31-svelte-on-the-changelog.md b/documentation/blog/2019-01-31-svelte-on-the-changelog.md
deleted file mode 100644
index ca5805ac6d..0000000000
--- a/documentation/blog/2019-01-31-svelte-on-the-changelog.md
+++ /dev/null
@@ -1,21 +0,0 @@
----
-title: Svelte on The Changelog
-description: Listen to the interview here
-author: Rich Harris
-authorURL: https://twitter.com/Rich_Harris
----
-
-Earlier this month, I had the privilege of appearing on [The Changelog](https://changelog.com/podcast), a podcast about software development. We had a fun (for me) and wide-ranging conversation:
-
-- life as a coder inside a newsroom
-- the big compilers-as-frameworks trend
-- scalability
-- the [Great Divide](https://css-tricks.com/the-great-divide/)
-
-...and, most importantly, Svelte 3.
-
-Unless you hang out in our [Discord server](https://svelte.dev/chat) or follow [@sveltejs](https://twitter.com/sveltejs) on Twitter, you might not know that Svelte 3 is just around the corner, and it's going to be a huge release. We've rethought the developer experience from the ground up, and while it _will_ be a nuisance if you need to upgrade a Svelte 2 app (more on that soon) we think you're going to love it.
-
-On the podcast [Adam](https://twitter.com/adamstac), [Jerod](https://twitter.com/jerodsanto) and I talk about some of the changes and why we're making them. You can listen here or on the [podcast page](https://changelog.com/podcast/332).
-
-<audio data-theme="night" style="width: 100%" data-src="https://changelog.com/podcast/332/embed" src="https://cdn.changelog.com/uploads/podcast/332/the-changelog-332.mp3" preload="none" class="changelog-episode" controls></audio><p><a href="https://changelog.com/podcast/332">The Changelog 332: A UI framework without the framework</a> – Listen on <a href="https://changelog.com/">Changelog.com</a></p><script async src="//cdn.changelog.com/embed.js"></script>
diff --git a/documentation/blog/2019-04-15-setting-up-your-editor.md b/documentation/blog/2019-04-15-setting-up-your-editor.md
deleted file mode 100644
index eaf3fac624..0000000000
--- a/documentation/blog/2019-04-15-setting-up-your-editor.md
+++ /dev/null
@@ -1,65 +0,0 @@
----
-title: Setting up your editor
-description: Instructions for configuring linting and syntax highlighting
-author: Rich Harris
-authorURL: https://twitter.com/Rich_Harris
-draft: true
----
-
-_**Coming soon**_
-
-This post will walk you through setting up your editor so that it recognises Svelte files:
-
-- eslint-plugin-svelte3
-- svelte-vscode
-- associating .svelte files with HTML in VS Code, Sublime, etc.
-
-## Atom
-
-To treat `*.svelte` files as HTML, open _**Edit → Config...**_ and add the following lines to your `core` section:
-
-```cson
-"*":
-  core:
-    …
-    customFileTypes:
-	    "text.html.basic": [
-        "svelte"
-      ]
-```
-
-## Vim/Neovim
-
-You can use the [coc-svelte extension](https://github.com/coc-extensions/coc-svelte) which utilises the official language-server.
-
-As an alternative you can treat all `*.svelte` files as HTML. Add the following line to your `init.vim`:
-
-```
-au! BufNewFile,BufRead *.svelte set ft=html
-```
-
-To temporarily turn on HTML syntax highlighting for the current buffer, use:
-
-```
-:set ft=html
-```
-
-To set the filetype for a single file, use a [modeline](https://vim.fandom.com/wiki/Modeline_magic):
-
-```
-<!-- vim: set ft=html :-->
-```
-
-## Visual Studio Code
-
-We recommend using the official [Svelte for VS Code extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
-
-## JetBrains WebStorm
-
-The [Svelte Framework Integration](https://plugins.jetbrains.com/plugin/12375-svelte/) can be used to add support for Svelte to WebStorm, or other Jetbrains IDEs. Consult the [WebStorm plugin installation guide](https://www.jetbrains.com/help/webstorm/managing-plugins.html) on the JetBrains website for more details.
-
-## Sublime Text 3
-
-Open any `.svelte` file.
-
-Go to _**View → Syntax → Open all with current extension as... → HTML**_.
diff --git a/documentation/blog/2019-04-16-svelte-for-new-developers.md b/documentation/blog/2019-04-16-svelte-for-new-developers.md
deleted file mode 100644
index e11e180a6c..0000000000
--- a/documentation/blog/2019-04-16-svelte-for-new-developers.md
+++ /dev/null
@@ -1,95 +0,0 @@
----
-title: Svelte for new developers
-description: Never used Node.js or the command line? No problem
-author: Rich Harris
-authorURL: https://twitter.com/Rich_Harris
----
-
-This short guide is designed to help you — someone who has looked at the [tutorial](/tutorial) and wants to start creating Svelte apps, but doesn't have a ton of experience using JavaScript build tooling — get up and running.
-
-If there are things that don't make sense, or that we're glossing over, feel free to [raise an issue](https://github.com/sveltejs/svelte/issues) or [suggest edits to this page](https://github.com/sveltejs/svelte/blob/master/site/content/blog/2019-04-16-svelte-for-new-developers.md) that will help us help more people.
-
-If you get stuck at any point following this guide, the best place to ask for help is in the [chatroom](https://svelte.dev/chat).
-
-## First things first
-
-You'll be using the _command line_, also known as the terminal. On Windows, you can access it by running **Command Prompt** from the Start menu; on a Mac, hit `Cmd` and `Space` together to bring up **Spotlight**, then start typing `Terminal.app`. On most Linux systems, `Ctrl-Alt-T` brings up the command line.
-
-The command line is a way to interact with your computer (or another computer! but that's a topic for another time) with more power and control than the GUI (graphical user interface) that most people use day-to-day.
-
-Once on the command line, you can navigate the filesystem using `ls` (`dir` on Windows) to list the contents of your current directory, and `cd` to change the current directory. For example, if you had a `Development` directory of your projects inside your home directory, you would type
-
-```bash
-cd Development
-```
-
-to go to it. From there, you could create a new project directory with the `mkdir` command:
-
-```bash
-mkdir svelte-projects
-cd svelte-projects
-```
-
-A full introduction to the command line is out of the scope of this guide, but here are a few more useful commands:
-
-- `cd ..` — navigates to the parent of the current directory
-- `cat my-file.txt` — on Mac/Linux (`type my-file.txt` on Windows), lists the contents of `my-file.txt`
-- `open .` (or `start .` on Windows) — opens the current directory in Finder or File Explorer
-
-## Installing Node.js
-
-[Node](https://nodejs.org/en/) is a way to run JavaScript on the command line. It's used by many tools, including Svelte. If you don't yet have it installed, the easiest way is to download the latest version straight from the [website](https://nodejs.org/en/).
-
-Once installed, you'll have access to three new commands:
-
-- `node my-file.js` — runs the JavaScript in `my-file.js`
-- `npm [subcommand]` — [npm](https://www.npmjs.com/) is a way to install 'packages' that your application depends on, such as the [svelte](https://www.npmjs.com/package/svelte) package
-- `npx [subcommand]` — a convenient way to run programs available on npm without permanently installing them
-
-## Installing a text editor
-
-To write code, you need a good editor. The most popular choice is [Visual Studio Code](https://code.visualstudio.com/) or VS Code, and justifiably so — it's well-designed and fully-featured, and has a wealth of extensions ([including one for Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode), which provides syntax highlighting and diagnostic messages when you're writing components).
-
-## Creating a project
-
-We're going to use the [Svelte + Vite](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-svelte) template. You don't have to use a project template, but it means you have to do a lot less setup work.
-
-On the command line, navigate to where you want to create a new project, then type the following lines (you can paste the whole lot, but you'll develop better muscle memory if you get into the habit of writing each line out one at a time then running it):
-
-```bash
-npm create vite@latest my-svelte-project -- --template svelte
-cd my-svelte-project
-npm install
-```
-
-> You can replace `--template svelte` with `--template svelte-ts`, if you prefer TypeScript.
-
-This creates a new directory, `my-svelte-project`, adds files from the [create-vite/template-svelte](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-svelte) template, and installs a number of packages from npm. Open the directory in your text editor and take a look around. The app's 'source code' lives in the `src` directory, while the files your app can load are in `public`.
-
-In the `package.json` file, there is a section called `"scripts"`. These scripts define shortcuts for working with your application — `dev`, `build` and `preview`. To launch your app in development mode, type the following:
-
-```bash
-npm run dev
-```
-
-Running the `dev` script starts a program called [Vite](https://vitejs.dev/). Vite's job is to take your application's source files, pass them to other programs (including Svelte, in our case) and convert them into the code that will actually run when you open the application in a browser.
-
-Speaking of which, open a browser and navigate to http://localhost:5173. This is your application running on a local _web server_ (hence 'localhost') on port 5173.
-
-Try changing `src/App.svelte` and saving it. The application will update with your changes.
-
-## Building your app
-
-In the last step, we were running the app in 'development mode'. In dev mode, Svelte adds extra code that helps with debugging, and Vite skips the final step where your app's JavaScript is compressed.
-
-When you share your app with the world, you want to build it in 'production mode', so that it's as small and efficient as possible for end users. To do that, use the `build` command:
-
-```bash
-npm run build
-```
-
-Your `dist` directory now contains an optimised version of your app. You can run it like so:
-
-```bash
-npm run preview
-```
diff --git a/documentation/blog/2019-04-20-write-less-code.md b/documentation/blog/2019-04-20-write-less-code.md
deleted file mode 100644
index 8ccc2c0439..0000000000
--- a/documentation/blog/2019-04-20-write-less-code.md
+++ /dev/null
@@ -1,163 +0,0 @@
----
-title: Write less code
-description: The most important metric you're not paying attention to
-author: Rich Harris
-authorURL: https://twitter.com/Rich_Harris
----
-
-All code is buggy. It stands to reason, therefore, that the more code you have to write the buggier your apps will be.
-
-Writing more code also takes more time, leaving less time for other things like optimisation, nice-to-have features, or being outdoors instead of hunched over a laptop.
-
-In fact it's widely acknowledged that [project development time](https://blog.codinghorror.com/diseconomies-of-scale-and-lines-of-code/) and [bug count](https://www.mayerdan.com/ruby/2012/11/11/bugs-per-line-of-code-ratio) grow _quadratically_, not linearly, with the size of a codebase. That tracks with our intuitions: a ten-line pull request will get a level of scrutiny rarely applied to a 100-line one. And once a given module becomes too big to fit on a single screen, the cognitive effort required to understand it increases significantly. We compensate by refactoring and adding comments — activities that almost always result in _more_ code. It's a vicious cycle.
-
-Yet while we obsess — rightly! — over performance numbers, bundle size and anything else we can measure, we rarely pay attention to the amount of code we're writing.
-
-## Readability is important
-
-I'm certainly not claiming that we should use clever tricks to scrunch our code into the most compact form possible at the expense of readability. Nor am I claiming that reducing _lines_ of code is necessarily a worthwhile goal, since it encourages turning readable code like this...
-
-```js
-for (let i = 0; i <= 100; i += 1) {
-	if (i % 2 === 0) {
-		console.log(`${i} is even`);
-	}
-}
-```
-
-...into something much harder to parse:
-
-```js
-for (let i = 0; i <= 100; i += 1) if (i % 2 === 0) console.log(`${i} is even`);
-```
-
-Instead, I'm claiming that we should favour languages and patterns that allow us to naturally write less code.
-
-## Yes, I'm talking about Svelte
-
-Reducing the amount of code you have to write is an explicit goal of Svelte. To illustrate, let's look at a very simple component implemented in React, Vue and Svelte. First, the Svelte version:
-
-<div class="max">
-	<iframe
-		title="Simple component example"
-		src="/repl/embed?example=blog-write-less-code"
-		scrolling="no"
-	></iframe>
-</div>
-
-How would we build this in React? It would probably look something like this:
-
-```js
-// @noErrors
-import React, { useState } from 'react';
-
-export default () => {
-	const [a, setA] = useState(1);
-	const [b, setB] = useState(2);
-
-	function handleChangeA(event) {
-		setA(+event.target.value);
-	}
-
-	function handleChangeB(event) {
-		setB(+event.target.value);
-	}
-
-	return (
-		<div>
-			<input type="number" value={a} onChange={handleChangeA} />
-			<input type="number" value={b} onChange={handleChangeB} />
-
-			<p>
-				{a} + {b} = {a + b}
-			</p>
-		</div>
-	);
-};
-```
-
-Here's an equivalent component in Vue:
-
-```svelte
-<template>
-	<div>
-		<input type="number" v-model.number="a">
-		<input type="number" v-model.number="b">
-
-		<p>{{a}} + {{b}} = {{a + b}}</p>
-	</div>
-</template>
-
-<script>
-	export default {
-		data: function() {
-			return {
-				a: 1,
-				b: 2
-			};
-		}
-	};
-</script>
-```
-
-<aside>
-	<p>I'm counting by copying the source code to the clipboard and running `pbpaste | wc -c` in my terminal</p>
-</aside>
-
-In other words, it takes 442 characters in React, and 263 characters in Vue, to achieve something that takes 145 characters in Svelte. The React version is literally three times larger!
-
-It's unusual for the difference to be _quite_ so obvious — in my experience, a React component is typically around 40% larger than its Svelte equivalent. Let's look at the features of Svelte's design that enable you to express ideas more concisely:
-
-### Top-level elements
-
-In Svelte, a component can have as many top-level elements as you like. In React and Vue, a component must have a single top-level element — in React's case, trying to return two top-level elements from a component function would result in syntactically invalid code. (You can use a fragment — `<>` — instead of a `<div>`, but it's the same basic idea, and still results in an extra level of indentation).
-
-In Vue, your markup must be wrapped in a `<template>` element, which I'd argue is redundant.
-
-### Bindings
-
-In React, we have to respond to input events ourselves:
-
-```js
-// @noErrors
-function handleChangeA(event) {
-	setA(+event.target.value);
-}
-```
-
-This isn't just boring plumbing that takes up extra space on the screen, it's also extra surface area for bugs. Conceptually, the value of the input is bound to the value of `a` and vice versa, but that relationship isn't cleanly expressed — instead we have two tightly-coupled but physically separate chunks of code (the event handler and the `value={a}` prop). Not only that, but we have to remember to coerce the string value with the `+` operator, otherwise `2 + 2` will equal `22` instead of `4`.
-
-Like Svelte, Vue does have a way of expressing the binding — the `v-model` attribute, though again we have to be careful to use `v-model.number` even though it's a numeric input.
-
-### State
-
-In Svelte, you update local component state with an assignment operator:
-
-```js
-let count = 0;
-
-function increment() {
-	count += 1;
-}
-```
-
-In React, we use the `useState` hook:
-
-```js
-// @noErrors
-const [count, setCount] = useState(0);
-
-function increment() {
-	setCount(count + 1);
-}
-```
-
-This is much _noisier_ — it expresses the exact same concept but with over 60% more characters. As you're reading the code, you have to do that much more work to understand the author's intent.
-
-In Vue, meanwhile, we have a default export with a `data` function that returns an object literal with properties corresponding to our local state. Things like helper functions and child components can't simply be imported and used in the template, but must instead be 'registered' by attaching them to the correct part of the default export.
-
-## Death to boilerplate
-
-These are just some of the ways that Svelte helps you build user interfaces with a minimum of fuss. There are plenty of others — for example, [reactive declarations](/tutorial/reactive-declarations) essentially do the work of React's `useMemo`, `useCallback` and `useEffect` without the boilerplate (or indeed the garbage collection overhead of creating inline functions and arrays on each state change).
-
-How? By choosing a different set of constraints. Because [Svelte is a compiler](/blog/frameworks-without-the-framework), we're not bound to the peculiarities of JavaScript: we can _design_ a component authoring experience, rather than having to fit it around the semantics of the language. Paradoxically, this results in _more_ idiomatic code — for example using variables naturally rather than via proxies or hooks — while delivering significantly more performant apps.
diff --git a/documentation/blog/2019-04-22-svelte-3-rethinking-reactivity.md b/documentation/blog/2019-04-22-svelte-3-rethinking-reactivity.md
deleted file mode 100644
index a4dd7b2b3b..0000000000
--- a/documentation/blog/2019-04-22-svelte-3-rethinking-reactivity.md
+++ /dev/null
@@ -1,102 +0,0 @@
----
-title: 'Svelte 3: Rethinking reactivity'
-description: It's finally here
-author: Rich Harris
-authorURL: https://twitter.com/Rich_Harris
----
-
-After several months of being just days away, we are over the moon to announce the stable release of Svelte 3. This is a huge release representing hundreds of hours of work by many people in the Svelte community, including invaluable feedback from beta testers who have helped shape the design every step of the way.
-
-We think you're going to love it.
-
-## What is Svelte?
-
-Svelte is a component framework — like React or Vue — but with an important difference. Traditional frameworks allow you to write _declarative_ state-driven code, but there's a penalty: the browser must do extra work to convert those declarative structures into DOM operations, using techniques like [virtual DOM diffing](/blog/virtual-dom-is-pure-overhead) that eat into your frame budget and tax the garbage collector.
-
-Instead, Svelte runs at _build time_, converting your components into highly efficient _imperative_ code that surgically updates the DOM. As a result, you're able to write ambitious applications with excellent performance characteristics.
-
-The first version of Svelte was all about [testing a hypothesis](/blog/frameworks-without-the-framework) — that a purpose-built compiler could generate rock-solid code that delivered a great user experience. The second was a small upgrade that tidied things up a bit.
-
-Version 3 is a significant overhaul. Our focus for the last five or six months has been on delivering an outstanding _developer_ experience. It's now possible to write components with [significantly less boilerplate](/blog/write-less-code) than you'll find elsewhere. Try the brand new [tutorial](/tutorial) and see what we mean — if you're familiar with other frameworks we think you'll be pleasantly surprised.
-
-To make that possible we first needed to rethink the concept at the heart of modern UI frameworks: reactivity.
-
-<div class="max">
-<figure style="max-width: 960px; margin: 0 auto">
-<div style="height: 0; padding: 0 0 57.1% 0; position: relative; margin: 0 auto;">
-	<iframe style="position: absolute; width: 100%; height: 100%; left: 0; top: 0; margin: 0;" src="https://www.youtube-nocookie.com/embed/AdNJ3fydeao" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-</div>
-
-<figcaption>'Rethinking Reactivity' from <a href="https://www.israel.yglfconf.com/">You Gotta Love Frontend Code Camp</a></figcaption>
-</figure>
-</div>
-
-## Moving reactivity into the language
-
-In old Svelte, you would tell the computer that some state had changed by calling the `this.set` method:
-
-```js
-// @noErrors
-const { count } = this.get();
-this.set({
-	count: count + 1
-});
-```
-
-That would cause the component to _react_. Speaking of which, `this.set` is almost identical to the `this.setState` method used in classical (pre-hooks) React:
-
-```js
-// @noErrors
-const { count } = this.state;
-this.setState({
-	count: count + 1
-});
-```
-
-There are some important technical differences (as I explain in the video above, React is not reactive) but conceptually it's the same thing.
-
-<aside>
-	<p>In fact, Svelte 3 is basically <a href="https://twitter.com/threepointone/status/1057179801109311488">Sunil's fault</a>.</p>
-</aside>
-
-That all changed with the advent of [hooks](https://reactjs.org/docs/hooks-intro.html), which handle state in a very different fashion. Many frameworks started experimenting with their own implementations of hooks, but we quickly concluded it wasn't a direction we wanted to go in. Hooks have some intriguing properties, but they also involve some unnatural code and create unnecessary work for the garbage collector. For a framework that's used in [embedded devices](https://mobile.twitter.com/sveltejs/status/1088500539640418304) as well as animation-heavy interactives, that's no good.
-
-So we took a step back and asked ourselves what kind of API would work for us... and realised that the best API is no API at all. We can just _use the language_. Updating some `count` value — and all the things that depend on it — should be as simple as this:
-
-```ts
-let count: number = 10;
-// ---cut---
-count += 1;
-```
-
-Since we're a compiler, we can do that by instrumenting assignments behind the scenes:
-
-```ts
-let count: number = 10;
-const $$invalidate = <T>(name: string, value: T) => {
-	return void 0;
-};
-// ---cut---
-count += 1;
-$$invalidate('count', count);
-```
-
-Importantly, we can do all this without the overhead and complexity of using proxies or accessors. It's just a variable.
-
-## New look
-
-Your components aren't the only thing that's getting a facelift. Svelte itself has a completely new look and feel, thanks to the amazing design work of [Achim Vedam](https://vedam.de/) who created our new logo and website, which has moved from [svelte.technology](https://svelte.technology) to [svelte.dev](https://svelte.dev).
-
-We've also changed our tagline, from 'The magical disappearing UI framework' to 'Cybernetically enhanced web apps'. Svelte has many aspects — outstanding performance, small bundles, accessibility, built-in style encapsulation, declarative transitions, ease of use, the fact that it's a compiler, etc — that focusing on any one of them feels like an injustice to the others. 'Cybernetically enhanced' is designed to instead evoke Svelte's overarching philosophy that our tools should work as intelligent extensions of ourselves — hopefully with a retro, William Gibson-esque twist.
-
-## Upgrading from version 2
-
-If you're an existing Svelte 2 user, I'm afraid there is going to be some manual upgrading involved. In the coming days we'll release a migration guide and an updated version of [svelte-upgrade](https://github.com/sveltejs/svelte-upgrade) which will do the best it can to automate the process, but this _is_ a significant change and not everything can be handled automatically.
-
-We don't take this lightly: hopefully once you've experienced Svelte 3 you'll understand why we felt it was necessary to break with the past.
-
-## Still to come
-
-As grueling as this release has been, we're nowhere near finished. We have a ton of ideas for generating smarter, more compact code, and a long feature wish-list. [Sapper](https://sapper.svelte.dev), our Next.js-style app framework, is still in the middle of being updated to use Svelte 3. The [Svelte Native](https://svelte-native.technology/) community project, which allows you to write Android and iOS apps in Svelte, is making solid progress but deserves more complete support from core. We don't yet have the bounty of editor extensions, syntax highlighters, component kits, devtools and so on that other frameworks have, and we should fix that. We _really_ want to add first-class TypeScript support.
-
-But in the meantime we think Svelte 3 is the best way to build web apps yet. Take an hour to go through the [tutorial](/tutorial) and we hope to convince you of the same. Either way, we'd love to see you in our [Discord chatroom](https://svelte.dev/chat) and on [GitHub](https://github.com/sveltejs/svelte) — everyone is welcome, especially you.
diff --git a/documentation/blog/2020-07-17-svelte-and-typescript.md b/documentation/blog/2020-07-17-svelte-and-typescript.md
deleted file mode 100644
index 691ecdafde..0000000000
--- a/documentation/blog/2020-07-17-svelte-and-typescript.md
+++ /dev/null
@@ -1,134 +0,0 @@
----
-title: Svelte <3 TypeScript
-description: Typernetically enhanced web apps
-author: Orta Therox
-authorURL: https://twitter.com/orta
----
-
-It's been by far the most requested feature for a while, and it's finally here: Svelte officially supports TypeScript.
-
-We think it'll give you a much nicer development experience — one that also scales beautifully to larger Svelte code bases — regardless of whether you use TypeScript or JavaScript.
-
-<figure>
-	<img alt="Screenshot of TypeScript in Svelte" src="/media/svelte-ts.png">
-	<figcaption>Image of TypeScript + Svelte in VS Code (theme is <a href="https://marketplace.visualstudio.com/items?itemName=karyfoundation.theme-karyfoundation-themes">Kary Pro</a>.)</figcaption>
-</figure>
-
-## Try it now
-
-You can start a new Svelte TypeScript project using Svelte's official scaffolding CLI by running `npx sv create` and following the prompts. This sets up a new SvelteKit project for you.
-
-Alternatively you can run `npm create vite@latest myapp -- --template svelte-ts` to scaffold a Vite project using Svelte and TypeScript.
-
-If you're a VS Code user, make sure you're using the (new) [official extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode), which replaces the popular extension by James Birtles.
-Later in this blog post, we'll detail the individual steps involved in using TypeScript in an existing Svelte project.
-
-## What does it mean to support TypeScript in Svelte?
-
-TypeScript support in Svelte has been possible for a long time, but you had to mix a lot of disparate tools together and each project ran independently. Today, nearly all of these tools live under the Svelte organization and are maintained by a set of people who take responsibility over the whole pipeline and have common goals.
-
-A week before COVID was declared a pandemic, [I pitched a consolidation](https://github.com/sveltejs/svelte/issues/4518) of the best Svelte tools and ideas from similar dev-ecosystems and provided a set of steps to get first class TypeScript support. Since then, many people have pitched in and written the code to get us there.
-
-When we say that Svelte now supports TypeScript, we mean a few different things:
-
-- You can use TypeScript inside your `<script>` blocks — just add the `lang="ts"` attribute
-- Components with TypeScript can be type-checked with the `svelte-check` command
-- You get autocompletion hints and type-checking as you're writing components, even in expressions inside markup
-- TypeScript files understand the Svelte component API — no more red squiggles when you import a `.svelte` file into a `.ts` module
-
-### How does it work?
-
-To understand the two main parts of TypeScript support, we'll compare it to the technique TypeScript uses to provide dev tools. There is a compiler `tsc` which you run on the command-line to convert `*.ts` to `*.js`, then there is a `TSServer` which is a node API that responds to requests from text editors. The `TSServer` is what provides all the JavaScript and TypeScript realtime introspection for editors while coding, and it has most of the compiler's code inside it.
-
-For Svelte, we have the Svelte compiler, and now we have the [`svelte-language-server`](https://github.com/sveltejs/language-tools/tree/master/packages/language-server#svelte-language-server) which responds to text editor calls via the [Language Server Protocol standard](https://microsoft.github.io//language-server-protocol/overviews/lsp/overview/). First class TypeScript support means that _both_ of these two systems do a good job of handling TypeScript code.
-
-The Svelte compiler support for TypeScript is handled by [Christian Kaisermann](https://github.com/kaisermann)'s [`svelte-preprocess`](https://github.com/sveltejs/svelte-preprocess#svelte-preprocess) which is now an official Svelte project.
-
-For the editor level, we took inspiration from [Pine's](https://github.com/octref) work in the [Vue](https://vuejs.org) ecosystem via [Vetur](https://github.com/vuejs/vetur). Vetur provides an [LSP](https://github.com/vuejs/vetur/blob/master/server), a VS Code extension and a [CLI](https://github.com/vuejs/vetur/blob/master/vti). Svelte now also has an [LSP](https://github.com/sveltejs/language-tools/blob/master/packages/language-server), a [VS Code extension](https://github.com/sveltejs/language-tools/blob/master/packages/svelte-vscode) and a [CLI](https://github.com/sveltejs/language-tools/blob/master/packages/svelte-check).
-
-### `*.svelte` Introspection
-
-For the official Svelte VS Code extension, we built off the foundations which [James Birtles](https://github.com/UnwrittenFun) has created in [`UnwrittenFun/svelte-vscode`](https://github.com/UnwrittenFun/svelte-vscode) and [`UnwrittenFun/svelte-language-server`](https://github.com/UnwrittenFun/svelte-language-server/).
-
-[Simon Holthausen](https://github.com/dummdidumm) and [Lyu, Wei-Da](https://github.com/jasonlyu123) have done great work improving the JavaScript and TypeScript introspection, including integrating [@halfnelson](https://github.com/halfnelson)'s [svelte2tsx](https://github.com/sveltejs/language-tools/tree/master/packages/svelte2tsx#svelte2tsx) which powers understanding the props on components in your codebase.
-
-## Adding TypeScript to an existing project
-
-Before getting started, add the dependencies:
-
-```bash
-npm install --save-dev @tsconfig/svelte typescript svelte-preprocess svelte-check
-```
-
-### 1. Compiling TypeScript
-
-You first need to set up [`svelte-preprocess`](https://github.com/sveltejs/svelte-preprocess#svelte-preprocess), which passes the contents of your `<script lang="ts">` blocks through the TypeScript compiler.
-
-In a Rollup project, that would look like this — note that we also need to install `@rollup/plugin-typescript` so that Rollup can handle `.ts` files:
-
-```diff
-+ import autoPreprocess from 'svelte-preprocess';
-+ import typescript from '@rollup/plugin-typescript';
-
-export default {
-  ...,
-  plugins: [
-    svelte({
-+       preprocess: autoPreprocess()
-    }),
-+   typescript({ sourceMap: !production })
-  ]
-}
-```
-
-[Full instructions for other environments here](https://github.com/sveltejs/svelte-preprocess#usage).
-
-To configure TypeScript, you will need to create a `tsconfig.json` in the root of your project:
-
-```json
-{
-	"extends": "@tsconfig/svelte/tsconfig.json",
-
-	"include": ["src/**/*", "src/node_modules"],
-	"exclude": ["node_modules/*", "__sapper__/*", "public/*"]
-}
-```
-
-Your `include`/`exclude` may differ per project — these are defaults that should work across most Svelte projects.
-
-### 2. Editor Support
-
-Any editor [using an LSP](https://langserver.org/#implementations-client) can be supported. The [VS Code](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) extension has been our primary focus, but there is work in progress [on Atom](https://github.com/sveltejs/language-tools/pull/160), and Vim via [coc-svelte](https://github.com/coc-extensions/coc-svelte) has been updated with the latest LSP.
-
-These editor extensions will improve your coding experience even if you only use JavaScript. The editor won't offer errors, but it will offer inference and refactoring tools. You can [add `// @ts-check`](https://www.staging-typescript.org/docs/handbook/intro-to-js-ts.html) to the top of a `<script>` tag using JavaScript to get better error messages with no infra changes.
-
-To switch a `<script>` to use TypeScript, use `<script lang="ts">` and that should be it. Hopefully you won't be seeing an ocean of red squiggles.
-
-### 3. CI Checks
-
-Having red squiggles is great, well, kinda. On the long run though, you want to be able to verify that there are no errors in your code. To verify your project is error free, you can use the CLI tool [`svelte-check`](https://www.npmjs.com/package/svelte-check). It acts like an editor asking for errors against all of your `.svelte` files.
-
-You can add the dependency to your project and then add it to CI.
-
-```bash
-❯ npx svelte-check
-
-Loading svelte-check in workspace: /Users/ortatherox/dev/svelte/example-app
-Getting Svelte diagnostics...
-====================================
-
-/Users/ortatherox/dev/svelte/example-app/src/App.svelte:3:2
-Error: Type '123' is not assignable to type 'string'. (ts)
-
-====================================
-svelte-check found 1 error
-error Command failed with exit code 1.
-```
-
-## What about TypeScript in Sapper projects?
-
-TypeScript support was added to Sapper in 0.28, so if you're using an older version be sure to [upgrade](https://sapper.svelte.dev/migrating#0_27_to_0_28).
-
-## How can I contribute?
-
-We're so glad you asked. The work is happening in the [sveltejs/language-tools](https://github.com/sveltejs/language-tools) repo and in the [#language-tools](https://discord.gg/enV6v8K) channel in the Svelte Discord. If you'd like to report issues, submit fixes, or help out with extensions for new editors and so on, that's where you can find us. See you there!
diff --git a/documentation/blog/2020-10-01-whats-new-in-svelte-october-2020.md b/documentation/blog/2020-10-01-whats-new-in-svelte-october-2020.md
deleted file mode 100644
index 72a032de1b..0000000000
--- a/documentation/blog/2020-10-01-whats-new-in-svelte-october-2020.md
+++ /dev/null
@@ -1,91 +0,0 @@
----
-title: "What's new in Svelte: October 2020"
-description: New object methods, in-depth learning resources and tons of integration examples!
-author: Dani Sandoval
-authorURL: https://dreamindani.com
----
-
-Welcome to the first edition of our "What's new in Svelte" series! We'll try to make this a monthly blog post in which you'll find out about new features, bug fixes, and a showcase of Svelte projects from around the community.
-
-## New features
-
-1. `use:obj.method` allows functions defined within objects to be used within actions ([Example](https://svelte.dev/repl/c305722adb4a4545b27b198ea8ff9bde?version=3.27.0), **3.26.0**, warning removed in **3.27.0**)
-2. `_` is now supported as a "numerical separator", similar to a `.` or `,` ([Example](https://svelte.dev/repl/844c39e91d1248649fe54af839fab570?version=3.26.0), **3.26.0**)
-3. `import.meta` now works in template expressions ([Example](https://svelte.dev/repl/9630de41957a4c80a4fce264360a6bc7?version=3.26.0), **3.26.0**)
-4. CSS Selectors with `~` and `+` combinators are now supported ([Example](https://svelte.dev/repl/91ad9257d2d1430185a504a18cc60172?version=3.29.0), **3.27.0**, with a compiler fix in **3.29.0**)
-5. The `{#key}` block is now available to key arbitrary content on an expression. Whenever the expression changes, the contents inside the `{#key}` block will be destroyed and recreated. For an in-depth explanation and to find out how it's implemented, check out the [new blog post](https://lihautan.com/contributing-to-svelte-implement-key-block/) of Svelte Team member Tan Li Hau. ([More info](https://github.com/sveltejs/svelte/issues/1469), **3.29.0**)
-6. Slots can now be forwarded through child components! This used to only be possible by adding extra wrapper `<div>`s ([More info](https://github.com/sveltejs/svelte/issues/2079), **3.29.0**)
-7. When using TypeScript, you can now type the `createEventDispatcher` method:
-
-```svelte
-<script lang="ts">
-	import { createEventDispatcher } from 'svelte';
-
-	const dispatch = createEventDispatcher<{
-		/**
-		 * you can also add docs
-		 */
-		checked: boolean; // Will translate to `CustomEvent<boolean>`
-		hello: string;
-	}>();
-
-	// ...
-</script>
-```
-
-This will make sure that you can invoke dispatch only with the specified event names and its types. The Svelte for VS Code extension was also updated to deal with this new feature. It will provide strong typings for these events as well as autocompletion and hover information.
-
-**New from Sapper!**
-Sapper 0.28.9 just came out. The highlights from it include much better support for CSP nonces, asset preload support for exported pages, and error details are now available in the `$page` store on error pages.
-
-In addition, Sapper's CSS handling has been rewritten over the course of recent releases in order to fix existing CSS handling bugs, refactor the CSS handling to occur entirely within a Rollup plugin, and remove the need internally to register CSS in the routing system. Congrats and thank you to the folks working on Sapper for all their solid work!
-
-## Impactful bug fixes
-
-- CSS compilation will no longer remove rules for the `open` attribute on `<details>` elements ([Example](https://svelte.dev/repl/ab4c0c177d1f4fab92f46eb8539cea9a?version=3.26.0), **3.26.0**)
-- `prettier-plugin-svelte` will do a better job now at dealing with whitespaces, especially around inline elements. It will also preserve formatting inside `<pre>` tags and will no longer format languages which are not supported by Prettier, like SASS, Pug or Stylus.
-
-## Coming up
-
-- [Svelte Summit](https://sveltesummit.com/), Svelte's second global online conference, is taking place on October 18! Sign up for free to get reminders and talk updates!
-
-For all the features and bugfixes see the CHANGELOG for [Svelte](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md) and [Sapper](https://github.com/sveltejs/sapper/blob/master/CHANGELOG.md).
-
----
-
-## Svelte Showcase
-
-- [This CustomMenu example](https://svelte.dev/repl/3a33725c3adb4f57b46b597f9dade0c1?version=3.25.0) demos how to replace the OS right-click menu
-- [GitHub Tetris](https://svelte.dev/repl/cc1eaa7c66964fedb5e70e3ecbbaa0e1?version=3.25.1) lets you play a Tetris-like game in a git commit history
-- [Who are my representatives?](https://whoaremyrepresentatives.us/) is a website built with Svelte to help US residents get more info on their congressional representatives
-- [Pick Palette](https://github.com/bluwy/pick-palette) is a color palette manager made with Svelte!
-
-### In-depth learning:
-
-- [Svelte 3 Up and Running](https://www.amazon.com/dp/B08D6T6BKS/ref=cm_sw_r_tw_dp_x_OQMtFb3GPQCB2) is a new book about building production-ready static web apps with Svelte 3
-- [Sapper Tutorial (Crash Course)](https://www.youtube.com/playlist?list=PL4cUxeGkcC9gdr4Qhx83gBBcID-KMe-PQ) walks through the ins-and-outs of Sapper, the Svelte-powered application framework
-- [Svelte Society Day France](https://france.sveltesociety.dev/) happened September 27th featuring a wide variety of topics all in French! You can find the full recording [here](https://www.youtube.com/watch?v=aS1TQ155JK4).
-
-### Plug-and-play components:
-
-- [svelte-zoom](https://github.com/vaheqelyan/svelte-zoom) brings "nearly native" pan-and-zoom to images on desktop and mobile
-- [svelte-materialify](https://github.com/TheComputerM/svelte-materialify) is a Material component library for Svelte with over 50 components
-- [svelte-undoable](https://github.com/macfja/svelte-undoable) makes it easy to introduce undo and redo functionality using `bind:`
-- [This Tilt component](https://svelte.dev/repl/7b23ad9d2693424482cd411b0378b55b?version=3.24.1) implements a common UX pattern where the hovered element tilts to follow the mouse
-
-### Lots of examples of how use JS tech came out this month:
-
-- [Sapper with PostCSS and Tailwind](https://codechips.me/sapper-with-postcss-and-tailwind/)
-- [PrismJS (Code block syntax highlighting)](https://github.com/phptuts/Svelte-PrismJS)
-- [Filepond (Drag-and-drop file upload)](https://github.com/pqina/svelte-filepond)
-- [Ionic (UI Components)](https://github.com/Tommertom/svelte-ionic-app)
-- [Pell (WYSIWYG Editor)](https://github.com/Demonicious/svelte-pell/)
-- [Leaflet (Mapping)](https://github.com/anoram/leaflet-svelte)
-
-**Reminder**: There's a [Svelte integrations repo](https://github.com/sveltejs/integrations) that demonstrates ways to incorporate Svelte into your stack (and vice versa). If you've got questions on how to use a particular piece of tech with Svelte, you may find your answer there... and if you've gotten something to work with Svelte, consider contributing!
-
-For more amazing Svelte projects, check out the [Svelte Society](https://sveltesociety.dev/), [Reddit](https://www.reddit.com/r/sveltejs/) and [Discord](https://discord.com/invite/yy75DKs)… and be sure to post your own!
-
-## See you next month!
-
-By the way, Svelte now has an [OpenCollective](https://opencollective.com/svelte)! All contributions and all expenses are published in our transparent public ledger. Learn who is donating, how much, where that money is going, submit expenses, get reimbursed and more!
diff --git a/documentation/blog/2020-11-01-whats-new-in-svelte-november-2020.md b/documentation/blog/2020-11-01-whats-new-in-svelte-november-2020.md
deleted file mode 100644
index d29859a473..0000000000
--- a/documentation/blog/2020-11-01-whats-new-in-svelte-november-2020.md
+++ /dev/null
@@ -1,46 +0,0 @@
----
-title: "What's new in Svelte: November 2020"
-description: Slot forwarding fixes, SvelteKit for faster local development, and more from Svelte Summit
-author: Dani Sandoval
-authorURL: https://dreamindani.com
----
-
-Welcome back to the "What's new in Svelte" series! This month, we're covering new features & bug fixes, last month's Svelte Summit and some stand-out sites and libraries...
-
-## New features & impactful bug fixes
-
-1. Destructuring Promises now works as expected by using the `{#await}` syntax
-   (**3.29.3**, [Example](https://svelte.dev/repl/3fd4e2cecfa14d629961478f1dac2445?version=3.29.3))
-2. Slot forwarding (released in 3.29.0) should no longer hang during compilation (**3.29.3**, [Example](https://svelte.dev/repl/29959e70103f4868a6525c0734934936?version=3.29.3))
-3. Better typings for the `get` function in `svelte/store` and on lifecycle hooks (**3.29.1**)
-
-**What's going on in Sapper?**
-
-Sapper got some new types in its `preload` function, which will make typing easier if you are using TypeScript. See the [Sapper docs](https://sapper.svelte.dev/docs#Typing_the_function) on how to use them. There also were fixes to `preload` links in exported sites. Route layouts got a few fixes too - including ensuring CSS is applied to nested route layouts. You can also better organize your files now that extensions with multiple dots are supported. (**0.28.10**)
-
-For all the features and bugfixes see the CHANGELOGs for [Svelte](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md) and [Sapper](https://github.com/sveltejs/sapper/blob/master/CHANGELOG.md).
-
-## [Svelte Summit](https://sveltesummit.com/) was Svelte-tacular!
-
-- Rich Harris demoed the possible future of Svelte development in a talk titled "Futuristic Web Development". The not-yet-public project is called SvelteKit (name may change) and will bring a first-class developer experience and more flexibility for build outputs. If you want to get the full sneak-peek, [check out the video](https://www.youtube.com/watch?v=qSfdtmcZ4d0).
-- 17 speakers made the best of the conference's virtual format... From floating heads to seamless demos, Svelte developers from every skill level will find something of interest in this year's [YouTube playlist](https://www.youtube.com/playlist?list=PL8bMgX1kyZThM1sbYCoWdTcpiYysJsSeu)
-
----
-
-## Community Showcase
-
-- [Svelte Lab](https://sveltelab.app/) showcases a variety of components, visualizations and interactions that can be achieved in Svelte. You can click into any component to see its source or edit it, using the site's built-in REPL
-- [svelte-electron-boilerplate](https://github.com/hjalmar/svelte-electron-boilerplate) is a fast way to get up and running with a Svelte app built in the desktop javascript framework, Electron
-- [React Hooks in Svelte](https://github.com/joshnuss/react-hooks-in-svelte) showcases examples of common React Hooks ported to Svelte.
-- [gurlic](https://gurlic.com/) is a social network and internet experiment that is super snappy thanks to Svelte
-- [Interference 2020](https://interference2020.org/) visualizes reported foreign interference in the 2020 U.S. elections. You can learn more about how it was built in [YYY's talk at Svelte Summit]()
-- [jitsi-svelte](https://github.com/relm-us/jitsi-svelte) lets you easily create your own custom Jitsi client by providing out-of-the-box components built with Svelte
-- [Ellx](https://ellx.io/) is part spreadsheet, part notebook and part IDE. It's super smooth thanks to Svelte 😎
-- [This New Zealand news site](https://www.nzherald.co.nz/nz/election-2020-latest-results-party-vote-electorate-vote-and-full-data/5CFVO4ENKNQDE3SICRRNPU5GZM/) breaks down the results of the 2020 Parliamentary elections using Svelte
-- [Budibase](https://github.com/Budibase/budibase) is a no-code app builder, powered by Svelte
-- [Svelt-yjs](https://github.com/relm-us/svelt-yjs) combines the collaborative, local-first technology of Yjs with the power of Svelte to enable multiple users across the internet to stay in sync.
-- [tabler-icons-svelte](https://github.com/benflap/tabler-icons-svelte) is a Svelte wrapper for over 850 free MIT-licensed high-quality SVG icons for you to use in your web projects.
-
-## See you next month!
-
-Got an idea for something to add to the Showcase? Want to get involved more with Svelte? We're always looking for maintainers, contributors and fanatics... Check out the [Svelte Society](https://sveltesociety.dev/), [Reddit](https://www.reddit.com/r/sveltejs/) and [Discord](https://discord.com/invite/yy75DKs) to get involved!
diff --git a/documentation/blog/2020-11-05-whats-the-deal-with-sveltekit.md b/documentation/blog/2020-11-05-whats-the-deal-with-sveltekit.md
deleted file mode 100644
index a89181fc6a..0000000000
--- a/documentation/blog/2020-11-05-whats-the-deal-with-sveltekit.md
+++ /dev/null
@@ -1,94 +0,0 @@
----
-title: What's the deal with SvelteKit?
-description: We're rethinking how to build Svelte apps. Here's what you need to know
-author: Rich Harris
-authorURL: https://twitter.com/rich_harris
----
-
-<aside><p>If you <em>didn't</em> attend Svelte Summit, you can catch up on the <a href="https://www.youtube.com/c/SvelteSociety/videos">Svelte Society YouTube page</a></p></aside>
-
-If you attended [Svelte Summit](https://sveltesummit.com/) last month you may have seen my talk, Futuristic Web Development, in which I finally tackled one of the most frequently asked questions about Svelte: when will Sapper reach version 1.0?
-
-The answer: never.
-
-This was slightly tongue-in-cheek — as the talk explains, it's really more of a rewrite of Sapper coupled with a rebrand — but it raised a lot of new questions from the community, and it's time we offered a bit more clarity on what you can expect from Sapper's successor, SvelteKit.
-
-<div class="max">
-<figure style="max-width: 960px; margin: 0 auto">
-<div style="height: 0; padding: 0 0 57.1% 0; position: relative; margin: 0 auto;">
-	<iframe style="position: absolute; width: 100%; height: 100%; left: 0; top: 0; margin: 0;" src="https://www.youtube-nocookie.com/embed/qSfdtmcZ4d0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-</div>
-
-<figcaption>'Futuristic Web Development' from <a href="https://sveltesummit.com/">Svelte Summit</a></figcaption>
-</figure>
-</div>
-
-## What's Sapper?
-
-[Sapper](https://sapper.svelte.dev) is an _app framework_ (or 'metaframework') built on top of Svelte (which is a _component_ framework). Its job is to make it easy to build Svelte apps with all the modern best practices like server-side rendering (SSR) and code-splitting, and to provide a project structure that makes development productive and fun. It uses _filesystem-based routing_ (as popularised by [Next](https://nextjs.org/) and adopted by many other frameworks, albeit with some enhancements) — your project's file structure mirrors the structure of the app itself.
-
-While the Svelte homepage and documentation encourages you to [degit](https://github.com/Rich-Harris/degit) the [sveltejs/template](https://github.com/sveltejs/template) repo to start building an app, Sapper has long been our recommended way to build apps; this very blog post is (at the time of writing!) rendered with Sapper.
-
-## Why are we migrating to something new?
-
-Firstly, the distinction between [sveltejs/template](https://github.com/sveltejs/template) and [sveltejs/sapper-template](https://github.com/sveltejs/sapper-template) is confusing, particularly to newcomers to Svelte. Having a single recommended way to start building apps with Svelte will bring enormous benefits: we simplify onboarding, reduce the maintenance and support burden, and can potentially begin to explore the new possibilities that are unlocked by having a predictable project structure. (This last part is deliberately vague because it will take time to fully understand what those possibilities are.)
-
-Aside from all that, we've been tempted by the thought of rewriting Sapper for a while. This is partly because the codebase has become a little unkempt over the years ([Sapper started in 2017](/blog/sapper-towards-the-ideal-web-app-framework)), but mostly because the web has changed a lot recently, and it's time to rethink some of our foundational assumptions.
-
-## How is this new thing different?
-
-The first of those foundational assumptions is that you need to use a module bundler like [webpack](https://webpack.js.org/) or [Rollup](https://rollupjs.org/) to build apps. These tools trace the dependency graph of your application, analysing and transforming code along the way (turning Svelte components to JS modules, for example), in order to create bundles of code that can run anywhere. As the original creator of Rollup, I can attest that it is a surprisingly complex problem with fiendish edge cases.
-
-You certainly needed a bundler several years ago, because browsers didn't natively support the `import` keyword, but it's much less true today. Right now, we're seeing the rise of the _unbundled development_ workflow, which is radically simpler: instead of eagerly bundling your app, a dev server can serve modules (converted to JavaScript, if necessary) _on-demand_, meaning startup is essentially instantaneous however large your app becomes.
-
-[Snowpack](https://www.snowpack.dev/) is at the vanguard of this movement, and it's what powers SvelteKit. It's astonishingly fast, and has a beautiful development experience (hot module reloading, error overlays and so on), and we've been working closely with the Snowpack team on features like SSR. The hot module reloading is particularly revelatory if you're used to using Sapper with Rollup (which has never had first-class HMR support owing to its architecture, which prioritises the most efficient output).
-
-That's not to say we're abandoning bundlers altogether. It's still essential to optimise your app for production, and SvelteKit uses Rollup to make your apps as fast and lean as they possibly can be (which includes things like extracting styles into static `.css` files).
-
-The other foundational assumption is that a server-rendered app needs, well, a server. Sapper effectively has two modes — `sapper build`, which creates a standalone app that has to run on a Node server, and `sapper export` which bakes your app out as a collection of static files suitable for hosting on services like GitHub Pages.
-
-Static files can go pretty much anywhere, but running a Node server (and monitoring/scaling it etc) is less straightforward. Nowadays we're witnessing a shift towards _serverless platforms_, in which you as the app author don't need to think about the server your code is running on, with all the attendant complexity. You can get Sapper apps running on serverless platforms, thanks to things like [vercel-sapper](https://github.com/thgh/vercel-sapper), but it's certainly not what you'd call idiomatic.
-
-<aside><p>It'll still be possible to create both Node apps and fully pre-rendered (aka exported) sites</a></p></aside>
-
-SvelteKit fully embraces the serverless paradigm, and will launch with support for all the major serverless providers, with an 'adapter' API for targeting any platforms that we don't officially cater to. In addition, we'll be able to do partial pre-rendering, which means that static pages can be generated at build time but dynamic ones get rendered on-demand.
-
-## When can I start using it?
-
-If you're feeling brave, you can start right now:
-
-```bash
-npm init svelte@next
-```
-
-This will scaffold a new project and install the `@sveltejs/kit` CLI, which provides the tools for developing and building an app.
-
-We don't recommend it though! There are no docs, and we won't be able to offer any form of support. It's also likely to break often.
-
-The work is being done in a private monorepo while we're still in exploration mode. Our plan is to get a public beta ready and announce it here once we've closed a few issues — the repo itself will remain private at that time, but we'll create a place to collect feedback from the YOLO crowd. After that, we'll work towards a 1.0 release which will involve opening the repo up.
-
-I'm not going to make any firm promises about timings, because I don't like to break promises. But I _think_ we're talking about weeks rather than months.
-
-## What if I don't want to use SvelteKit?
-
-You won't have to — it will always be possible to use Svelte as a standalone package or via a bundler integration like [rollup-plugin-svelte](https://github.com/sveltejs/rollup-plugin-svelte). We think it's essential that you can bend Svelte to fit your workflow, however esoteric, and use third-party app frameworks like [Elder.js](https://github.com/Elderjs/elderjs), [Routify](https://routify.dev/), [Plenti](https://plenti.co/), [Crown](https://crownframework.com/), [JungleJS](https://www.junglejs.org/) and others.
-
-## TypeScript?
-
-Don't worry, we won't launch without full TypeScript support.
-
-## How can I migrate my existing Sapper apps?
-
-For the most part, it should be relatively straightforward to migrate a Sapper codebase.
-
-There are some unavoidable changes (being able to run on serverless platforms means we need to replace custom `server.js` files and `(req, res) => {...}` functions with more portable equivalents), and we're taking the opportunity to fix a few design flaws, but on the whole a SvelteKit app will feel very familiar to Sapper users.
-
-Detailed migration guides will accompany the 1.0 launch.
-
-## How can I contribute?
-
-Keep your eyes peeled for announcements about when we'll launch the public beta and open up the repo. (Also, blog post TODO but I would be remiss if I didn't mention that we now have an [OpenCollective](https://opencollective.com/svelte) where you can contribute financially to the project if it's been valuable to you. Many, many thanks to those of you who already have.)
-
-## Where can I learn more?
-
-Follow [@sveltejs](https://twitter.com/sveltejs) and [@SvelteSociety](https://twitter.com/SvelteSociety) on Twitter, and visit [svelte.dev/chat](https://svelte.dev/chat). You should also subscribe to [Svelte Radio](https://www.svelteradio.com/), where Kevin and his co-hosts will grill me about this project on an upcoming episode (and between now and next week when we record it, [reply to this Twitter thread](https://twitter.com/Rich_Harris/status/1323376048571121665) with your additional questions).
diff --git a/documentation/blog/2020-12-01-whats-new-in-svelte-december-2020.md b/documentation/blog/2020-12-01-whats-new-in-svelte-december-2020.md
deleted file mode 100644
index 4e0f56e449..0000000000
--- a/documentation/blog/2020-12-01-whats-new-in-svelte-december-2020.md
+++ /dev/null
@@ -1,75 +0,0 @@
----
-title: "What's new in Svelte: December 2020"
-description: Better tooling, export maps and improvements to slots and context
-author: Dani Sandoval
-authorURL: https://dreamindani.com
----
-
-It's the last "What's new in Svelte" of the year and there's lots to celebrate! This month's coverage includes updates from `rollup-plugin-svelte`, `Sapper` and `SvelteKit` and a bunch of showcases from the Svelte community!
-
-## New features & impactful bug fixes
-
-1. `$$props`, `$$restProps`, and `$$slots` are all now supported in custom web components (**3.29.5**, [Example](https://svelte.dev/repl/ad8e6f39cd20403dacd1be84d71e498d?version=3.29.5)) and `slot` components now support spread props: `<slot {...foo} />` (**3.30.0**)
-2. A new `hasContext` lifecycle function makes it easy to check whether a `key` has been set in the context of a parent component (**3.30.0** & **3.30.1**, [Docs](https://svelte.dev/docs#run-time-svelte-hascontext))
-3. There is now a new `SvelteComponentTyped` class which makes it easier to add strongly typed components that extend base Svelte components. Component library and framework authors rejoice! An example: `export class YourComponent extends SvelteComponentTyped<{aProp: boolean}, {click: MouseEvent}, {default: {aSlot: string}}> {}` (**3.31.0**, [RFC](https://github.com/sveltejs/rfcs/pull/37))
-4. Transitions within `{:else}` blocks should now complete successfully (**3.29.5**, [Example](https://svelte.dev/repl/49cef205e5da459594ef2eafcbd41593?version=3.29.5))
-5. Svelte now includes an export map, which explicitly states which files can be imported from its npm package (**3.29.5** with some fixes in **3.29.6**, **3.29.7** and **3.30.0**)
-6. `rollup-plugin-svelte` had a new [7.0.0 release](https://github.com/sveltejs/rollup-plugin-svelte/blob/master/CHANGELOG.md). The biggest change is that the `css` option was removed. Users who were using that option should add another plugin like `rollup-plugin-css-only` as demonstrated [in the template](https://github.com/sveltejs/template/blob/5b1135c286f7a649daa99825a077586655051649/rollup.config.js#L48)
-
-## What's going on in Sapper?
-
-Lots of new TypeScript definition improvements to make editing Sapper apps even easier! CSS for dynamic imports also should now work in `client.js` files. (Unreleased)
-
-## What's the deal with SvelteKit?
-
-We're glad you asked! If you didn't catch Rich's blog post from early last month, [you can find it here](https://svelte.dev/blog/whats-the-deal-with-sveltekit)!
-
-For all the features and bugfixes see the CHANGELOGs for [Svelte](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md) and [Sapper](https://github.com/sveltejs/sapper/blob/master/CHANGELOG.md).
-
----
-
-## Community Showcase
-
-**Apps & Sites**
-
-- [narration.studio](https://narration.studio/) (Chrome Only) is an automatic in-browser audio recording & editing platform for voice over narration.
-- [Vippet](https://vippet.netlify.app/) is a video recording and editing tool for the browser.
-- [Pattern Monster](https://pattern.monster/) is a simple online pattern generator to create repeatable SVG patterns.
-- [Plant-based diets](https://planetbaseddiets.panda.org/) is a website from the World Wildlife Foundation (WWF) built with Svelte.
-- [johnells.se](https://www.johnells.se/) is a Swedish fashion e-commerce site, built with [Crown](https://crownframework.com/) - a Svelte-powered framework.
-- [sentence-length](https://sentence-length.netlify.app/) is a learning and analysis tool to show how some authors play with different lengths, while others stick with one.
-- [svelte-presenter](https://github.com/stephane-vanraes/svelte-presenter) lets you quickly make good looking presentations using Svelte and mdsvex.
-
-**Demos**
-
-- [u/loopcake got SSR working in Java Spring Boot](https://www.reddit.com/r/sveltejs/comments/jkh5up/svelte_ssr_but_its_java_spring_boot_and_its_native/) for all the Java shops out there looking to render Svelte server-side.
-- [svelte-liquid-swipe](https://github.com/tncrazvan/svelte-liquid-swipe) shows off a fancy interaction pattern using svg paths.
-- [Crossfade Link Animation](https://svelte.dev/repl/7f68e148caf04b2787bb6f296208f870?version=3.29.7) demonstrates how to animate between navigation links using a crossfade (made by Blu, from the Discord community)
-- [Clip-Path Transitions](https://svelte.dev/repl/b5ad281ae8024b629b545c70c9e8764d?version=3.29.7) showcases how to use clip paths and custom transitions to create magical in-and-out transitions (made by Faber, from the Discord community)
-
-**Learning Resources**
-
-- [lihautan](https://www.youtube.com/channel/UCbmC3HP3FaAFdcZkui8YoMQ/featured) has been making easy-to-follow videos to share his in-depth knowledge of Svelte.
-- [Lessons From Building a Static Site Generator](https://nicholasreese.com/lessons-from-building-a-static-site-generator/) shares the backstory and thinking behind Elder.js - and the design decision made along the way.
-- [Svelte Tutorial and Projects Course ](https://www.udemy.com/course/svelte-tutorial-and-projects-course/) is a udemy course by John Smilga where students learn Svelte.js by building interesting projects.
-- [Building Pastebin on IPFS - with FastAPI, Svelte, and IPFS](https://amalshaji.wtf/building-pastebin-on-ipfs-with-fastapi-svelte-and-ipfs) explains how to make a distributed pastebin-like application.
-
-**Components, Libraries & Tools**
-
-- [svelte-crossword](https://russellgoldenberg.github.io/svelte-crossword/) is a customizable crossword puzzle component for Svelte.
-- [svelte-cloudinary](https://github.com/cupcakearmy/svelte-cloudinary) makes it easy to integrate Cloudinary with Svelte (including TypeScript and SSR support)
-- [Svelte Nova](https://extensions.panic.com/extensions/sb.lao/sb.lao.svelte-nova/) extends the new Nova editor to support Svelte
-- [saos](https://github.com/shiryel/saos) is a small svelte component to animate your elements on scroll.
-- [Svelte-nStore](https://github.com/lacikawiz/svelte-nStore) is a general purpose store replacement that fulfills the Svelte store contract and adds getter and calculation features.
-- [svelte-slimscroll](https://github.com/MelihAltintas/svelte-slimscroll) is a Svelte Action that transforms any div into a scrollable area with a nice scrollbar.
-- [svelte-typewriter](https://github.com/henriquehbr/svelte-typewriter) is a simple and reusable typewriter effect for your Svelte applications
-- [svelte-store-router](https://github.com/zyxd/svelte-store-router) is a store-based router for Svelte that suggests that routing is just another global state and History API changes are just an optional side-effects of this state.
-- [Routify](https://routify.dev/blog/routify-2-released) just released version 2 of its Svelte router.
-- [svelte-error-boundary](https://www.npmjs.com/package/@crownframework/svelte-error-boundary) provides a simple error boundary component for Svelte that can be can be used with both DOM and SSR targets.
-- [svelte2dts](https://www.npmjs.com/package/svelte2dts) generates d.ts files from svelte files, creating truly shareable and well typed components.
-
-## See you next month!
-
-Got an idea for something to add to the Showcase? Want to get involved more with Svelte? We're always looking for maintainers, contributors and fanatics... Check out the [Svelte Society](https://sveltesociety.dev/), [Reddit](https://www.reddit.com/r/sveltejs/) and [Discord](https://discord.com/invite/yy75DKs) to get involved!
-
-That's all for the year, folks! See you in January 😎
diff --git a/documentation/blog/2021-01-01-whats-new-in-svelte-january-2021.md b/documentation/blog/2021-01-01-whats-new-in-svelte-january-2021.md
deleted file mode 100644
index 4a5ea4eddc..0000000000
--- a/documentation/blog/2021-01-01-whats-new-in-svelte-january-2021.md
+++ /dev/null
@@ -1,83 +0,0 @@
----
-title: "What's new in Svelte: January 2021"
-description: A Svelte-packed showcase to kick-off the new year!
-author: Dani Sandoval
-authorURL: https://dreamindani.com
----
-
-Happy new year from Svelte! In the last month we made progress on Sapper's upcoming release, fine-tuned our `SvelteComponent` typings, and have seen some amazing apps, sites, and libraries coming out in the showcase.
-
-## What's changed in Svelte?
-
-A new minor release replaces the `SvelteComponent` class with a `SvelteComponentTyped` class. This renaming should help with backwards compatibility. We've updated [last month's blog post](https://svelte.dev/blog/whats-new-in-svelte-december-2020) to avoid any confusion with the name change.
-
-If you're using `SvelteComponent` or the new `SvelteComponentTyped` in your project or library, let us know what you're using it for and we'll add it to the showcase!
-
-## What's going on in Sapper?
-
-More quality of life features are landing in the upcoming release every day. `0.29.0` will include new TypeScript definitions, fixes to scroll tracking and prefetching behavior, and improvements to the runtime router to support encoded query parameters.
-
-If you're upgrading from 0.28.x, check out [the migration guide](https://sapper.svelte.dev/migrating/#0_28_to_0_29) for steps on updating to Sapper 0.29.
-
-## Is SvelteKit ready yet?
-
-To avoid too much churn during development, SvelteKit is still being worked on in a private repo. There will be an announcement on the Discord, blog and Twitter when it's ready for a larger group of users and contributors.
-
-In the meantime, you can explore the current build by running `npm init svelte@next` from your command line.
-
-As cautioned in _[What's the deal with SvelteKit?](https://svelte.dev/blog/whats-the-deal-with-sveltekit)_, there are no docs or support available yet... So use at your own risk / for your own enjoyment!
-
----
-
-## Community Showcase
-
-**Apps & Sites**
-
-- [manitu.me](https://manitu.me/) is a background sound / pomodoro timer for focus and relaxation
-- [Answer Socrates](https://answersocrates.com/) helps you find trending questions on the internet so that you can write the most relevant blog post, tweet, or billboard
-- [multris](https://multris.s1h.org/) is a multiplayer Tetris game. You can read about its development [here](https://blog.s1h.org/svelte-multiplayer-game/)
-- [weather-ab](https://github.com/ganochenkodg/weather-ab) compares the archive of weather in different cities of the world. Indispensable for people thinking about migration
-- [Game Nibs](https://gamenibs.com/) is a platform for gamers to find and share concise bite-sized bits of gaming advice, tips, tricks, screenshots, builds, and much more
-- [Ora](https://github.com/cupcakearmy/ora) is an open source website tracking and limiting tool for Chrome and Firefox
-- [vscode-dms](https://github.com/techsyndicate/vscode-dms) is a group direct messaging chat app for VS Code
-- [Zero.2](https://zero.oleksandrdemian.tech/) is a math-based challenge game where you try to get to zero as quickly as possible
-- [Octave Compass](https://octavecompass.com/2741) is a chord table and scale explorer for many popular musical scales
-- [Infinite Walking Bass Generator 2](https://github.com/elialbert/infinitewalkingbass2) is an online music player that generates a unique walking bass line
-- [ListenAddict](https://www.listenaddict.com/) is a site that notifies you whenever a person has a new talk/interview on podcast
-
-**Demos, Libraries & Components**
-
-- [svelte-tiny-virtual-list](https://github.com/Skayo/svelte-tiny-virtual-list) speeds up long lists by only rendering visible items
-- [svelte-query](https://github.com/TanStack/svelte-query) is a collection of helpful hooks for managing, caching and syncing asynchronous and remote data
-- [svelte-previous](https://github.com/bryanmylee/svelte-previous) is a svelte store to remember previous values - helpful for transitions or a quick undo stack
-- [Let's Build a Confetti Cannon](https://varun.ca/confetti/) explains how to build a particle system and integrate a Canvas based animation into a larger application
-- [svelte-micro](https://github.com/ayndqy/svelte-micro) is a one-component router
-- [svelte-standalone-router](https://github.com/hjalmar/svelte-standalone-router) is a standalone router with an API based on [standalone-router](https://github.com/hjalmar/standalone-router)
-- [svelte-datepicker](https://github.com/beyonk-adventures/svelte-datepicker) is a datepicker component with variations for time selection, date ranges and responsive themes
-- [svelte-slimscroll](https://github.com/MelihAltintas/svelte-slimscroll) is a action for Svelte.js, which can transforms any div into a scrollable area with a nice scrollbar.
-- [Svelte Zoomable](https://svelte.dev/repl/58dfe87756ee4db897c281b52fdef7b7?version=3.31.0) is a custom transition with a nice zoom effect
-
-**Have a component you'd like to share?** Check out the [Components](https://sveltesociety.dev/components) page on the Svelte Society site. You can contribute by making [a PR to this file](https://github.com/svelte-society/sveltesociety.dev/blob/master/src/pages/components/components.json).
-
-**Learning Resources**
-
-- [Using Svelte to create a scroll video effect](https://blog.koenvangilst.nl/tutorial-svelte-scroll-video/) showcases how the `bind` command can be used to create a cool scroll video effect with very little code
-- [How to make a flappybird game in svelte and typescript](https://www.youtube.com/watch?v=nhrYBoVI8pQ) is a video tutorial including docs and code for reference
-- [Accessible Svelte Transition](https://www.youtube.com/watch?v=QK_QuRL7nSo&feature=youtu.be) walks through `prefers-reduced-motion` to make svelte transitions more accessible
-- [Svelte's module scripts explained](https://codechips.me/svelte-module-scripts-explained/) is a great introduction to the module context, a common Sapper pattern
-- [Awesome Svelte](https://github.com/TheComputerM/awesome-svelte#readme) is a curated list of Svelte resources
-- [.NET Core and Svelte](https://dev.to/cainux/net-core-and-svelte-f8o) explains how to get Svelte up and running with .NET Core
-- [A la découverte de Svelte JS](https://www.youtube.com/watch?v=SLpx1Y8e1ek&list=PLff5I1miao9ZEUhpqkrOx7k8RGAZt-nm9) is a svelte tutorial series in French!
-- [Svelte for React Developers](https://soshace.com/svelte-for-react-developers/) explains Svelte's core concepts to folks who are used to React
-- [Building a Svelte Static Website with Smooth Page Transitions](https://www.youtube.com/watch?v=dvPfmcGtmrI&feature=emb_title) shows how to build a static website with Svelte and add smooth page transitions using Three.js and GSAP.
-- [Using Apollo Client in Sapper](https://bjornlu.com/blog/using-apollo-client-in-sapper/) explains the "simplest" solutions to integrate the Apollo query client into Sapper
-- [Reactive web apps with Crystal + Svelte](https://www.youtube.com/watch?v=i1xjLd6z7BU) explores how to build full-stack, server-rendered Svelte apps with a [Crystal](https://crystal-lang.org) backend
-
-**Related Projects**
-
-- [Snowpack's v3 release candidate](https://www.snowpack.dev/posts/2020-12-03-snowpack-3-release-candidate) is out now in preparation for a January 6 release date. Check out the [Getting Started with Svelte](https://www.snowpack.dev/tutorials/svelte) for more info on how to use Snowpack.
-- [Uppy](https://uppy.io/blog/2020/12/1.24/), the open source file uploader, announced Svelte support in its new version 1.24
-
-## See you next month!
-
-Want to add your work to the Showcase? Want to contribute to Svelte? Check out the [Svelte Society](https://sveltesociety.dev/), [Reddit](https://www.reddit.com/r/sveltejs/) and [Discord](https://discord.com/invite/yy75DKs) to get involved!
diff --git a/documentation/blog/2021-02-01-whats-new-in-svelte-february-2021.md b/documentation/blog/2021-02-01-whats-new-in-svelte-february-2021.md
deleted file mode 100644
index e85b274d96..0000000000
--- a/documentation/blog/2021-02-01-whats-new-in-svelte-february-2021.md
+++ /dev/null
@@ -1,85 +0,0 @@
----
-title: "What's new in Svelte: February 2021"
-description: Integrations and improvements at lightning speed...
-author: Dani Sandoval
-authorURL: https://dreamindani.com
----
-
-With the shortest month of the year coming up, Svelte maintainers and community members alike have been busy this last month – from big changes in `svelte-loader`, `prettier-plugin-svelte`, `rollup-plugin-svelte`, and `language-tools` to steady progress in Sapper and `svelte-preprocess`. Meanwhile, lots of folks have been busy integrating Svelte with other popular frameworks.
-
-## New compiler features
-
-- Aria roles from the [WAI-ARIA Graphics Module](https://www.w3.org/TR/graphics-aria-1.0/#role_definitions) are now recognized as valid aria roles in Svelte components (**3.31.1**)
-- Compiler warnings for the common React attributes, `className` and `htmlFor`, now make it easier to port React components to Svelte (**3.31.1**)
-
-Have a suggestion for a compiler feature or want to help implement new features/bug fixes? Check out the ["triage: good first issue" tag for Svelte](https://github.com/sveltejs/svelte/issues?q=is%3Aopen+is%3Aissue+label%3A%22triage%3A+good+first+issue%22)
-
-## New bits in language-tools
-
-- User disabled auto import suggestions no longer show in VS Code (**103.0.0**)
-- Renaming a variable is now safer with smart additions of a prefix/suffix to renamed variables (**104.0.0**)
-- Semantic (token) highlighting for TypeScript users lets theme makers apply semantic styling in their themes, if they support it (**104.0.0**)
-- "Extract Component" has been added to the context menu - allowing you to extract components out of files without having to open the command window to type "Svelte: Extract Component" (**104.0.0**)
-- The VS Code extension now listens to JavaScript/TypeScript file changes - you no longer need to save the files for the changes to be noticed (**104.1.0**)
-
-For the complete list of changes, check out the language-tools [Releases page](https://github.com/sveltejs/language-tools/releases).
-
-A great way to try the language tools is to download the [Svelte Extension for VS Code](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode). This extension provides syntax highlighting and rich intellisense for Svelte components in VS Code, using the svelte language server. Check your editor's extension sources to see if there's a Svelte plugin for your IDE or build your own (see [coc-svelte](https://github.com/coc-extensions/coc-svelte) for example)!
-
-## Big improvements across the Svelte ecosystem
-
-- [svelte-loader](https://github.com/sveltejs/svelte-loader) released a major version, 3.0.0 - featuring Webpack 5 and Node 14 support, better hot reloading, and new `compilerOptions` to match `rollup-plugin-svelte`. Breaking changes include dropping Svelte 2 and Node 8 support. [More info in the changelog](https://github.com/sveltejs/svelte-loader/blob/master/CHANGELOG.md)
-- [rollup-plugin-svelte](https://github.com/sveltejs/rollup-plugin-svelte) is now at version 7.x - with support for relative filenames, better handling of sourcemaps, and consistent `compilerOptions`. Be sure to [checkout the changelog](https://github.com/sveltejs/rollup-plugin-svelte/blob/master/CHANGELOG.md) for breaking changes when upgrading
-- [svelte-preprocess](https://github.com/sveltejs/svelte-preprocess) iterated through some 4.6.x releases this month to improve postcss and scss handling and fix sourcemap transformation for typescript users. [More info in the changelog](https://github.com/sveltejs/svelte-preprocess/blob/main/CHANGELOG.md)
-- [Sapper](https://github.com/sveltejs/sapper) got some improvements in scroll tracking and handling encoding query parameters. Dynamic imports also now work as expected in browsers that don't support ES modules. These changes from 0.29.0 and a step-by-step migration guide can be found [in the changelog](https://github.com/sveltejs/sapper/blob/master/CHANGELOG.md)
-- [prettier-plugin-svelte](https://github.com/sveltejs/prettier-plugin-svelte) version 2 was released. It received an overhaul and comes with a rewrite of the HTML formatting. The output is now much more in line with how standard Prettier formats HTML. Better defaults for `svelteBracketNewLine` and `options-scripts-markup-styles` should now match how the majority of users like to order the code blocks. Additionally, Prettier's `htmlWhitespaceSensitivity` setting is now supported. [More info in the changelog](https://github.com/sveltejs/prettier-plugin-svelte/blob/master/CHANGELOG.md)
-
-New changes to the Svelte Society website include [a new cheat sheet](https://sveltesociety.dev/cheatsheet) for easy access to useful code patterns and some smaller visual fixes across the site. **Want to help make the Svelte Society website ready for prime time**? [Checkout the GitHub repo](https://github.com/svelte-society/sveltesociety.dev) to get started!
-
----
-
-## Community Showcase
-
-**Apps & Sites**
-
-- [The official German vaccination dashboard](https://impfdashboard.de/) tracks the current COVID vaccine rollout and features some well-done dataviz.
-- [La neuva era de la educatión conectada](https://elfuturoesapasionante.vodafone.es/especiales/educacion-conectada/) is a Vodaphone site that highlights the ways that technology and COVID-19 has changed the education landscape
-- [sho.rest](https://github.com/Melonai/shorest) is a self-hostable url shortener
-- [night.fm](https://night.fm/) is a cyberpunk-themed radio station
-
-**Demos, Libraries & Components**
-
-- [Svelte Reactive Debugger](https://addons.mozilla.org/en-US/firefox/addon/svelte-reactive-debugger/) is a way to monitor Svelte reactive statements in Firefox devtools
-- [svelte-actions](https://github.com/sw-yx/svelte-actions) is a set of prototype Svelte actions for inclusion into official actions in future. [See RFC](https://github.com/sveltejs/rfcs/pull/24) and [Discuss High Level Policy](https://github.com/sw-yx/svelte-actions/issues/7).
-- [This css grid gallery](https://svelte.dev/repl/3a1b7fae13b242fe9cd4a4f7aa092fa4?version=3.31.2) made by @joja (in the Svelte Discord) features grid transitions based on a user's mouse position
-- [Patchcab](https://github.com/spectrome/patchcab) is a modular Eurorack style synthesizer made with Web Audio.
-- [svelte-knob](https://github.com/MelihAltintas/svelte-knob) is a knob control to help with speedometer-style visualization
-- [descent-ripple](https://github.com/micha-lmxt/descent-ripple) is a highly customizable javascript ripple animation for buttons
-- [makeItSnow](https://github.com/florianlouvet/make-it-snow/blob/main/makeItSnowAction.js) is a Svelte action made by @MrPoule (in the Svelte Discord) that can be used to add ❄️snow❄️ to any component ([Demo](https://svelte.dev/repl/de5223beb45540a5a11c9bd7b318304f?version=3.31.2))
-- [svelte-video-player](https://github.com/meigo/svelte-video-player) is a customizable `VideoPlayer` component
-- [svelte-readonly](https://github.com/Crisfole/svelte-readonly) is a very small store that exposes only a readable interface.
-
-**New Integrations & Starters**
-
-- [svelte-derver-starter](https://github.com/AlexxNB/svelte-derver-starter) is a starter for baking fullstack application with the client based on Svelte and server side powered by Derver.
-- [eleventy-plugin-embed-svelte](https://github.com/shalomscott/eleventy-plugin-embed-svelte) makes it easy to embed Svelte components into an 11ty site.
-- [svelte-tailwind-extension-boilerplate](https://github.com/kyrelldixon/svelte-tailwind-extension-boilerplate) is a good foundation for a Chrome extension using either JavaScript or TypeScript, Svelte for the frontend, Tailwind CSS for styling, Jest for testing, and Rollup as the build system.
-- [snowpack-ui](https://github.com/rajasegar/snowpack-ui) lets you run & manage Snowpack projects from the browser instead of the terminal
-- [Svelte for Appwrite](https://dev.to/torstendittmann/svelte-for-appwrite-4fkg) explains how to integrate with Appwrite, a self-hosted Firebase alternative [GitHub Repo](https://github.com/appwrite/sdk-for-svelte)
-- [here-maps-svelte](https://github.com/peopledrivemecrazy/here-maps-svelte) makes it easy to include HERE maps in a Svelte app
-- [p5-svelte](https://github.com/tonyketcham/p5-svelte) is an absolutely dead simple way of tossing the creative coding/sketching tool, p5, into a project
-- [svelte-windicss-preprocess](https://github.com/voorjaar/svelte-windicss-preprocess) is a Svelte preprocessor to compile tailwindcss at build time based on windicss compiler
-- [MitzaCoder/svelte-boilerplate](https://github.com/MitzaCoder/svelte-boilerplate) features configurations for TypeScript, TailwindCSS, IE11 compatibility (with Babel) and lazy loaded modules.
-
-**Want to share your Svelte Component with the world?** Head over to the [Components](https://sveltesociety.dev/components) page on the Svelte Society site. You can contribute by making [a PR to this file](https://github.com/svelte-society/sveltesociety.dev/blob/master/src/pages/components/components.json).
-
-**Learning Resources**
-
-- [lihautan's Svelte Actions Playlist](https://www.youtube.com/watch?v=ciaMT_MswzE&list=PLoKaNN3BjQX3Gl14MBygFf8buPIw9pAeK) teaches how actions work and how they can help solve common problems when developing Svelte applications
-- [One-click Portfolio/Personal blog generator from dev.to API ](https://dev.to/shriji/one-click-portfolio-personal-blog-generator-from-dev-to-api-3apb) walks through creating a Sapper site that also fetches your articles from DEV.to using the API
-- [How to Code a VS Code Extension](https://www.youtube.com/watch?v=a5DX5pQ9p5M) features Svelte as a way to render a custom UI within VS Code
-- [This YouTube series on Plenti](https://www.youtube.com/watch?v=wyNC7R_VVyQ&list=PLbWvcwWtuDm12y3Hye6oKDwI2gAS0ccHW) walks through the new static site generator in detail
-
-## See you next month!
-
-Want to add your work to the Showcase? Want to contribute to Svelte? Check out the [Svelte Society](https://sveltesociety.dev/), [Reddit](https://www.reddit.com/r/sveltejs/) and [Discord](https://discord.com/invite/yy75DKs) to get involved!
diff --git a/documentation/blog/2021-03-01-whats-new-in-svelte-march-2021.md b/documentation/blog/2021-03-01-whats-new-in-svelte-march-2021.md
deleted file mode 100644
index dea4d292cd..0000000000
--- a/documentation/blog/2021-03-01-whats-new-in-svelte-march-2021.md
+++ /dev/null
@@ -1,101 +0,0 @@
----
-title: "What's new in Svelte: March 2021"
-description: Call for Svelte Summit Speakers! Improved SSR, non-HTML5 compilation targets, and ESLint TypeScript support
-author: Dani Sandoval
-authorURL: https://dreamindani.com
----
-
-Lots to cover this month with releases from across the Svelte ecosystem. Most importantly, Svelte Summit Spring 2021 has an [Open Call for Speakers](https://sessionize.com/svelte-summit-spring-2021). **The deadline is March 14** so if you have an idea for a talk, submit it now!
-
-Let's dive into the news 🐬
-
-## What's new in `sveltejs/svelte`
-
-- SSR store handling has been reworked to subscribe and unsubscribe as in DOM mode. SSR stores should work much more consistently now (**3.31.2**, see [custom stores](https://svelte.dev/examples/custom-stores) and [Server-side component API ](https://svelte.dev/docs#run-time-server-side-component-api))
-- Multiple instances of the same action are now allowed on an element (**3.32.0**, [example](https://svelte.dev/repl/01a14375951749dab9579cb6860eccde?version=3.32.0))
-- The new `foreign` namespace should make it easier for alternative compile targets (like Svelte Native and SvelteGUI) by disabling certain HTML5-specific behaviour and checks (**3.32.0**, [more info](https://github.com/sveltejs/svelte/pull/5652))
-- Support for inline comment sourcemaps in code from preprocessors (**3.32.0**)
-- Destructured defaults are now allowed to refer to other variables (**3.33.0**, [example](https://svelte.dev/repl/0ee7227e1b45465b9b47d7a5ae2d1252?version=3.33.0))
-- Custom elements will now call `onMount` functions when connecting and clean up when disconnecting (**3.33.0**, checkout [this PR](https://github.com/sveltejs/svelte/pull/4522) for an interesting conversation on how folks are using Svelte with Web Components)
-- A `cssHash` option has been added to the compiler options to control the classname used for CSS scoping (**3.34.0**, [docs](https://svelte.dev/docs#compile-time-svelte-compile))
-- Continued improvement to TypeScript definitions
-
-For a complete list of changes, including bug fixes and links to PRs, check out [the CHANGELOG](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md)
-
-## New from `sveltejs/language-tools`
-
-- For language server clients that don't support `didChangeWatchedFiles`, a fallback file watcher will be used instead
-- New highlighting rules for store accessors and element directives (like `bind:` and `class:`)
-- HTML tags can now be renamed together
-- Mustache tags parsing is now more robust and will provide better intellisense in more situations
-
-Haven't tried the language-tools yet? Check out [Svelte Extension for VS Code](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) or find a plugin for your favorite IDE!
-
-## Other changes from `sveltejs/*`
-
-- [eslint-plugin-svelte3](https://github.com/sveltejs/eslint-plugin-svelte3) now supports TypeScript as of 3.1.0
-- [prettier-plugin-svelte](https://github.com/sveltejs/prettier-plugin-svelte/) released a number of minor versions to address whitespace and comment trimming issues.
-- [svelte-preprocess](https://github.com/sveltejs/svelte-preprocess/) bug fixes this month include fixes to postcss transformations and support for both v2 and v3 of `postcss-load-config`
-- [sapper](https://github.com/sveltejs/sapper/)'s 0.29.1 release fixes some bad imports in type definitions, updates typings to be compatible with express/polka, and restores hashing of all CSS file names.
-
----
-
-## Community Showcase
-
-**Apps & Sites**
-
-- [Tracking the Coronavirus](https://www.nytimes.com/interactive/2021/us/new-york-city-new-york-covid-cases.html) from NYTimes is an example of SvelteKit in production
-- [Budibase](https://github.com/Budibase/budibase) is an open-source low-code platform, helping developers and IT professionals build, automate, and ship internal tools 50x faster on their own infrastructure.
-- [Track the Parcel](https://tracktheparcel.com/) is a one-stop tool for tracking parcel status with all major package shippers.
-- [Memo](https://sendmemo.app/features/) is a replacement for email that uses Svelte for modern messaging
-- [Userscripts Safari](https://github.com/quoid/userscripts) is an open-source userscript editor for Safari... a native Svelte app for Mac OS!
-- [SVGX](https://svgx.app/) is "the desktop SVG asset manager designers and developers wished they had."
-- [Armoria](https://azgaar.github.io/Armoria/) is a procedural heraldry generator and editor
-- [FictionBoard](https://www.fictionboard.com) is a virtual table top (VTT) platform that just released fillable and responsive character sheets
-- [Castles & Crusades Treasure Generator](https://treasure.playaheadgames.com/) is a treasure generator for the table top RPG: Castles and Crusades.
-- [NESBit Studio](https://jensa.org/NESBitStudio-web/graphics/spritesheets) is a toolkit to help the development of homebrew NES games
-- [ElectroBlocks](https://electroblocks.org/) is an online Arduino IDE with a built-in simulator (Chrome Only)
-- [Goblin.life](https://store.steampowered.com/app/552180/GoblinLife/) is a 3D world builder whose UI is built with Svelte
-- [farmbox](https://farmbox.ae/) is a UAE-based grocery delivery services
-- [heroeswearmasks.fun](https://heroeswearmasks.fun/) is a client-side machine learning tool that determines whether or not you're wearing a mask.
-- [weatherify](https://brdtheo-weatherify.netlify.app/) is a very pretty (and [open source](https://github.com/brdtheo/weatherify)) weather app
-- [DSN Live](https://dsn-live.netlify.app/#/) lets you monitor connections between NASA/JPL and interplanetary spacecraft missions in real time.
-
-**Demos, Libraries, Tools & Components**
-
-- [spc](https://github.com/khang-nd/spc) is a special characters picker component for the web
-- [svelte-injector](https://www.npmjs.com/package/svelte-injector) lets you inject Svelte components in React, Angular, Vue, jQuery, Vanilla JS.
-- [Felte](https://felte.dev/) is a form library for Svelte with simple validation reporting.
-- [svelte-use-form](https://github.com/noahsalvi/svelte-use-form#readme) is form library that "is easy to use and has 0 boilerplate."
-- [Formula](https://formula.svelte.codes/) provides "Zero Configuration Reactive Forms for Svelte."
-- [Houdini](https://github.com/AlecAivazis/houdini) is "the disappearing GraphQL client built for Sapper and Sveltekit."
-- [svelte-split-pane](https://www.reddit.com/r/sveltejs/comments/leoe33/sveltesplitpane/) is a draggable split pane component
-- [svelte-virtualized-auto-sizer](https://github.com/micha-lmxt/svelte-virtualized-auto-sizer) is a high-order component that automatically adjusts the width and height of a single child.
-- [svelte-window](https://github.com/micha-lmxt/svelte-window) are components for efficiently rendering large, scrollable lists and tabular data.
-- [Svelte Persistent store](https://github.com/MacFJA/svelte-persistent-store) is a Svelte store that keep its value through pages and reloads
-- [Svelte Dark](https://marketplace.visualstudio.com/items?itemName=NickScialli.svelte-dark) is a VS Code theme inspired by the svelte.dev REPL
-- [Import Cost](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost) has been updated to support Svelte libraries and help developers keep their bundle size under control.
-- [Tree-sitter-svelte](https://github.com/Himujjal/tree-sitter-svelte) provides tree-sitter grammar for svelte
-- [Svelte Ripple](https://svelte.dev/repl/b73224a0fd4248178e3eab41943d41a9?version=3.31.2) is a Material Design ripple effect that doesn't depend on `@material/ripple` (made by @karakara in the Svelte Discord)
-- [Analog SVG Clock](https://svelte.dev/repl/270e83f43e7a48918d8f2d497760904f?version=3.32.1) is a great example of easing functions (made by @tonmcg in the Svelte Discord)
-- [Console Log Styler](https://svelte.dev/repl/11f609d0d90746f08da6d3d90bba84fc?version=3.32.0) lets you generate a styled console log using pseudo HTML and CSS (made by @EmNudge in the Svelte Discord)
-- [svelte-heroicons](https://github.com/martinse/svelte-heroicons) is a handy wrapper for the Heroicons icon library
-- [supabase-ui-svelte](https://github.com/joshnuss/supabase-ui-svelte) are UI components for Supabase authentication
-
-**Have your own Svelte Component to share?** Check out the [Components](https://sveltesociety.dev/components) page on the Svelte Society site. You can contribute by making [a PR to this file](https://github.com/svelte-society/sveltesociety.dev/blob/master/src/pages/components/components.json).
-
-**Learning Resources & Starters**
-
-- [The **unofficial** SvelteKit docs](https://sk-incognito.vercel.app/learn/what-is-sveltekit) were built using SvelteKit and are [open for contributions](https://github.com/GrygrFlzr/kit-docs)
-- [📦 Svelte Store](https://www.youtube.com/playlist?list=PLoKaNN3BjQX3fG-XOSwsPHtnV8FUY6lgK) course by lihautan covers the basics of Svelte Stores and best practices.
-- [Svelte Events](https://www.youtube.com/watch?v=cbxxbBofjAw&feature=youtu.be) by WebJeda explains how directives like `on:` can be used to listen to DOM events.
-- [How to Set Up Protected Routes in Your Svelte Application](https://www.webtips.dev/how-to-set-up-protected-routes-in-your-svelte-application) describes how to authenticate your users to access your routes
-- [Using Fauna's streaming feature to build a chat with Svelte](https://dev.to/fauna/using-fauna-s-streaming-feature-to-build-a-chat-with-svelte-1gkd) demonstrates how to setup and configure Fauna to build a real-time chat interface with Svelte
-- [Using TakeShape with Sapper](https://www.takeshape.io/articles/using-takeshape-with-sapper/) demonstrates how to connect the TakeShape CMS with Sapper
-- [YastPack](https://github.com/rodabt/yastpack) is Yet Another Snowpack-Svelte-TailwindCss-Routify Template Pack
-- [S2T2](https://ralphbliu.medium.com/s2t2-snowpack-svelte-tailwindcss-typescript-8928caa5af6c) is a Snowpack + Svelte + TailwindCSS + TypeScript template
-- [tonyketcham/sapper-tailwind2-template](https://github.com/tonyketcham/sapper-tailwind2-template) is a Sapper Template w/ Tailwind 2.0, TypeScript, ESLint, and Prettier
-
-## See you next month!
-
-Got something to add? Join us on [Svelte Society](https://sveltesociety.dev/), [Reddit](https://www.reddit.com/r/sveltejs/) and [Discord](https://discord.com/invite/yy75DKs)!
diff --git a/documentation/blog/2021-03-23-sveltekit-beta.md b/documentation/blog/2021-03-23-sveltekit-beta.md
deleted file mode 100644
index e778fbd020..0000000000
--- a/documentation/blog/2021-03-23-sveltekit-beta.md
+++ /dev/null
@@ -1,65 +0,0 @@
----
-title: SvelteKit is in public beta
-description: And we'd love to have your feedback
-author: Rich Harris
-authorURL: https://twitter.com/rich_harris
----
-
-<aside><p>Previously: <a href="/blog/whats-the-deal-with-sveltekit">What's the deal with SvelteKit?</a></p></aside>
-
-It's time. After five months and hundreds of commits, you're finally invited to try out the SvelteKit beta. It's not finished — there are a few known bugs and several missing features — but we're really happy with how it's shaping up and can't wait for you to try it.
-
-Starting a new project is easy:
-
-```bash
-# create the project
-mkdir my-app
-cd my-app
-npm init svelte@next
-
-# install dependencies
-npm install
-
-# start dev server and open a browser tab
-npm run dev -- --open
-```
-
-You'll find documentation at [kit.svelte.dev/docs](https://kit.svelte.dev/docs). If you have a [Sapper](https://sapper.svelte.dev) app that you'd like to migrate to SvelteKit, you'll find instructions at [kit.svelte.dev/docs/migrating](https://kit.svelte.dev/docs/migrating).
-
-The source code is available at [github.com/sveltejs/kit](https://github.com/sveltejs/kit). Issues and pull requests are disabled while we finish getting our house in order, but we'll be making it fully open in the near future.
-
-## Wait, what is SvelteKit?
-
-Think of it as [Next](https://nextjs.org/) for Svelte. It's a framework for building apps with Svelte, complete with server-side rendering, routing, code-splitting for JS and CSS, adapters for different serverless platforms and so on.
-
-If you're familiar with [Sapper](https://sapper.svelte.dev), SvelteKit is Sapper's successor.
-
-## From Snowpack to Vite
-
-One thing that might seem surprising after the [announcement video](/blog/whats-the-deal-with-sveltekit), in which I waxed lyrical about [Snowpack](https://www.snowpack.dev/), is that SvelteKit uses [Vite](https://vitejs.dev) under the hood. When we tried Snowpack back when we started thinking about what form SvelteKit should take, it was love at first sight.
-
-Snowpack created an entirely new category of dev tooling. Rather than _bundling_ your app in development, as we've been doing with webpack and Rollup for the last several years, Snowpack is an _unbundled dev server_ that uses the browser's native `import` and does 1:1 transformations of things like Svelte components on the fly. As a result you get quick startup, simple caching and instant hot module reloading. Once you experience this way of working, it will ruin you for anything else.
-
-Vite falls into the same category as Snowpack. While Vite 1 wasn't suitable for SvelteKit — it was Vue-centric (Vite and Vue are both created by [Evan You](https://twitter.com/youyuxi)) and made server-side rendering difficult — Vite 2 is framework-agnostic and designed with SSR at the core. It also has powerful features, like CSS code-splitting, that we previously had to implement ourselves. When we evaluated the two technologies side-by-side we were forced to conclude that Vite is a closer match for SvelteKit's requirements and would give us the best chance to deliver the framework of our imaginations.
-
-We owe a deep debt of gratitude to the Snowpack team, both for the close collaboration earlier in development and for lighting the path that web development will take over the next few years. It's a wonderful tool, and you should absolutely try it out.
-
-## Dogfooding as extreme sport
-
-SvelteKit is very much in beta, but that doesn't mean it hasn't been used in production.
-
-My day job is at the New York Times, where I've spent much of the last twelve months working on our [coronavirus tracker](https://www.nytimes.com/interactive/2020/us/coronavirus-us-cases.html). It uses a customised version of the workflow that powers the majority of graphics at the Times, which isn't designed for large multi-page projects. When we decided late last year to create pages for each of the ~3,000 counties in the US, we quickly realised we would need to completely rearchitect the project.
-
-Even though it was far from ready, SvelteKit was the only framework that matched our esoteric requirements. (Anyone who has worked in a newsroom and done battle with their CMS will know what I'm talking about.) Today it powers our [county risk pages](https://www.nytimes.com/interactive/2021/us/tom-green-texas-covid-cases.html) and we're in the process of migrating existing pages to the SvelteKit app.
-
-<aside><p>I am eternally grateful for my coworkers' forbearance.</p></aside>
-
-Using unfinished software to build an app that will be seen by millions of people is a risk, and in general I don't recommend it. But it has enabled us to develop the app much faster, and has made the framework itself much stronger than it otherwise would be.
-
-## The road to 1.0
-
-You can see the list of outstanding issues with the 1.0 milestone on our [issue tracker](https://github.com/sveltejs/kit/issues?q=is%3Aopen+is%3Aissue+milestone%3A1.0). Alongside that work, we plan to upgrade the documentation and add more [adapters](https://kit.svelte.dev/docs/adapters).
-
-Most importantly though, we need your feedback to help us make the best possible app framework. Try it out, and let us know which pieces are missing.
-
-Many thanks to everyone who has tried SvelteKit out despite the 'here be dragons' warnings and lack of documentation; your back-channel feedback has been invaluable. In particular, I want to acknowledge the work of [GrygrFlzr](https://github.com/GrygrFlzr), who maintained unofficial docs and a fork that added Windows support when we lacked it; and [dominikg](https://github.com/dominikg) whose work on [Svite](https://github.com/svitejs/svite) laid essential groundwork for SvelteKit's Vite integration. Both have now been welcomed onto the team.
diff --git a/documentation/blog/2021-04-01-whats-new-in-svelte-april-2021.md b/documentation/blog/2021-04-01-whats-new-in-svelte-april-2021.md
deleted file mode 100644
index 4c9a122385..0000000000
--- a/documentation/blog/2021-04-01-whats-new-in-svelte-april-2021.md
+++ /dev/null
@@ -1,72 +0,0 @@
----
-title: "What's new in Svelte: April 2021"
-description: SvelteKit beta and new way to use slots
-author: Dani Sandoval
-authorURL: https://dreamindani.com
----
-
-Two projects that have been months (even years) in the making have made their way out into the world. SvelteKit is now in public beta and slotted components are now available in Svelte!
-
-## What's up with SvelteKit?
-
-[SvelteKit](https://kit.svelte.dev/) - Svelte's versatile framework for building SSR, serverless applications, or SPAs - is now officially in public beta. Expect bugs! Lots more detail in the [latest blog post](https://svelte.dev/blog/sveltekit-beta). Want to know when 1.0 is close? Check out the milestone on [github](https://github.com/sveltejs/kit/milestone/2).
-
-Want to learn more about how to get started, what's different compared to Sapper, new features and migration paths? Check out this week's [episode of Svelte Radio](https://www.svelteradio.com/episodes/svelte-kit-public-beta) for a deep dive with Antony, Kev and Swyx.
-
-## New in Svelte & Language Tools
-
-- Slotted components, including `<svelte:fragment slot="...">` lets component consumers target specific slots with rich content (**Svelte 3.35.0, Language Tools [104.5.0](https://github.com/sveltejs/language-tools/releases/tag/extensions-104.5.0)**, check out the [docs](https://svelte.dev/docs#template-syntax-svelte-fragment) and the [tutorial](https://svelte.dev/tutorial/svelte-fragment))
-- Linked editing now works for HTML in Svelte files (**Language Tools, [104.6.0](https://github.com/sveltejs/language-tools/releases/tag/extensions-104.6.0)**)
-- Type definitions `svelte.d.ts` are now resolved in order, allowing library authors to ship type definitions with their svelte components (**Language Tools, [104.7.0](https://github.com/sveltejs/language-tools/releases/tag/extensions-104.7.0)**)
-- [vite-plugin-svelte](https://github.com/sveltejs/vite-plugin-svelte) is available for general use of Svelte in Vite. `npm init @vitejs/app` includes Svelte options using this plugin.
-
----
-
-## Community Showcase
-
-**Apps & Sites**
-
-- [Nagato](https://nagato.app/) is a task management tool that connects popular time tracking and to-do tools all in one place.
-- [type-kana](https://type-kana.cass.moe/setup) is a quiz app to help you learn ひらがな (hiragana) and カタカナ (katakana), the Japanese syllabaries.
-- [Pittsburgh Steps](https://pittsburgh-steps.samlearner.com/) is an interactive map of the more than 800 sets of public outdoor stairways in Pittsburgh, PA.
-- [Music Mode Wheels](https://tobx.github.io/music-mode-wheels/) is a website that displays music modes as interactive wheels.
-- [Critical Notes](https://www.critical-notes.com/) helps game masters and players keep track of their roleplaying games campaigns and adventures.
-- [Svelte Game of Life](https://github.com/alanrsoares/svelte-game-of-life) is an educational implementation of Conway's Game of Life in TypeScript + Svelte
-- [foxql](https://github.com/foxql) is a peer to peer full text search engine that runs on your browser.
-
-**Demos, Libraries, Tools & Components**
-
-- [svelte-nodegui](https://github.com/nodegui/svelte-nodegui) is a way to build performant, native and cross-platform desktop applications with Node.js and Svelte
-- [Svelte Story Format](https://www.npmjs.com/package/@storybook/addon-svelte-csf) allows you to write your "stories" in Storybook using the Svelte syntax. More info in the [Storybook blog](https://storybook.js.org/blog/storybook-for-svelte/)
-- [SelectMadu](https://github.com/pavish/select-madu) is a replacement for the select menu, with support for searching, multiple selections, async data loading and more.
-- [Svelte Checklist](https://www.npmjs.com/package/svelte-checklist) is a customizable CheckList built with Svelte.
-- [Suspense for Svelte](https://www.npmjs.com/package/@jamcart/suspense) is a Svelte component that implements the core idea of React's `<Suspense>`.
-- [MiniRx](https://spierala.github.io/mini-rx-store/) is a RxJS Redux Store that works with Svelte and TypeScript
-- [svelte-formly](https://github.com/arabdevelop/svelte-formly) generates dynamic forms for Svelte and Sapper
-- [7ty](https://www.npmjs.com/package/@jamcart/7ty) is a static site generator that uses Svelte, supports partial hydration of components, and uses file based routing resembling Sapper and 11ty.
-
-**Want to contribute your own component?** Submit a [Component](https://sveltesociety.dev/components) to the Svelte Society site by making [a PR to this file](https://github.com/svelte-society/sveltesociety.dev/blob/master/src/pages/components/components.json).
-
-**Starters**
-
-- [sveltekit-electron](https://github.com/FractalHQ/sveltekit-electron) is a starter kit for Electron using SvelteKit
-- [sveltekit-tailwindcss-external-api](https://github.com/acidlake/sveltekit-tailwindcss-external-api) is everything you need to build a Svelte project with TailwindCSS and an external API, powered by create-svelte.
-- [Sapper Netlify](https://www.npmjs.com/package/sapper-netlify) is a Sapper project that can run on a Netlify function.
-
-**Looking for a particular starter?** Check out [svelte-adders](https://github.com/svelte-add/svelte-adders) and a number of other template examples at the community site [sveltesociety.dev](https://sveltesociety.dev/templates/)
-
-**Learning Resources**
-
-- [How to Build a Website with Svelte and SvelteKit](https://prismic.io/blog/svelte-sveltekit-tutorial) is a step-by-step tutorial walking through the new SvelteKit setup.
-- [A Svelte store for prefers-reduced-motion](https://geoffrich.net/posts/svelte-prefers-reduced-motion-store/) demonstrates how to make a custom Svelte store whose value will indicate whether the user has requested reduced motion and improve accessibility.
-- [TypeScript support in Svelte](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript) is an MDN guide to using TypeScript in Svelte.
-- [How to merge cells with svelte-window](https://gradientdescent.de/merging-cells/) is a walkthrough of svelte-window, a port of the popular react-window tool for merging table cells. For more on this migration, see [from react-window 1:1 to svelte-window](https://gradientdescent.de/porting-react-window/).
-- [Easy-to-Embed Svelte Components](https://codeandlife.com/2021/03/06/easy-to-embed-svelte-components/) explains how to use Rollup and a script tag to embed Svelte components anywhere.
-- [Convert Svelte project from Rollup to Snowpack](https://www.youtube.com/watch?v=-sHcqj4YLeQ) walks through a common migration pattern on video.
-- [How to internationalize routing in Svelte & Sapper](https://www.leaf.cloud/blog/how-to-internationalize-routing-in-svelte-sapper?utm_medium=story&utm_source=reddit.com&utm_campaign=awareness&utm_content=sapper_routing) explains how leaf.cloud translated their site to Dutch.
-- [Svelte Store: Reactive context using Svelte Store](https://www.youtube.com/watch?v=-rTnWlbdjoY) is a video answer to the question, "How do we make [a] context value reactive?"
-- [Creating Social Sharing Images with Cloudinary and Svelte](https://www.youtube.com/watch?v=-Si5o-R7KHY) is a video from Cloudinary that demonstrates how to dynamically develop Open Graph images and Twitter Cards for a JAMstack website.
-
-## See you next month!
-
-Got something to add? Join us on [Svelte Society](https://sveltesociety.dev/), [Reddit](https://www.reddit.com/r/sveltejs/) and [Discord](https://discord.com/invite/yy75DKs)!
diff --git a/documentation/blog/2021-05-01-whats-new-in-svelte-may-2021.md b/documentation/blog/2021-05-01-whats-new-in-svelte-may-2021.md
deleted file mode 100644
index 1e176b7421..0000000000
--- a/documentation/blog/2021-05-01-whats-new-in-svelte-may-2021.md
+++ /dev/null
@@ -1,76 +0,0 @@
----
-title: "What's new in Svelte: May 2021"
-description: Working toward SvelteKit 1.0 and a showcase full of SvelteKit sites!
-author: Dani Sandoval
-authorURL: https://dreamindani.com
----
-
-Last week, Svelte Summit blew us away with a mountain of content! [Check out the full recording](https://www.youtube.com/watch?v=fnr9XWvjJHw) or an audio-only (p)review [on Svelte Radio](https://www.svelteradio.com/episodes/svelte-summit-party-episode). Now let's get into this month's news...
-
-## New features in the Svelte Compiler
-
-- `:global()` is now supported as part of compound CSS selectors (**3.38.0**, [Example](https://svelte.dev/repl/54148fd2af484f2c84977c94e523c7c5?version=3.38.0))
-- CSS custom properties can now be passed to components for use cases such as theming (**3.38.0**, [Docs coming soon](https://github.com/sveltejs/svelte/issues/6268))
-
-## New in SvelteKit
-
-- [kit.svelte.dev](https://kit.svelte.dev/) has a fresh new look and the [SvelteKit Demo Site](https://netlify.demo.svelte.dev/) got a fresh set of paint. Check it out by running `npm init svelte@next`
-- You can now use `@sveltejs/adapter-static` to create a single-page app or SPA by specifying a fallback page ([PR](https://github.com/sveltejs/kit/pull/1181), [Docs](https://github.com/sveltejs/kit/tree/master/packages/adapter-static))
-- Disable Server-side Rendering (SSR) app-wide or on a page-by-page basis ([PR](https://github.com/sveltejs/kit/pull/713))
-- Error messages thrown during pre-rendering are now much more informative and readable ([PR](https://github.com/sveltejs/kit/pull/1062), [Docs](https://kit.svelte.dev/docs/layouts#error-pages))
-- Layouts can now be reset to prevent pages from inheriting the root layout. This is useful if you have a specific layout for a page or i18n variation ([PR](https://github.com/sveltejs/kit/pull/1061), [Docs](https://kit.svelte.dev/docs/layouts#resets))
-- `fetch` in SvelteKit code will now use the environment-provided implementation, whenever possible. If `fetch` is unavailable, it will be polyfilled by adapters ([PR](https://github.com/sveltejs/kit/pull/1066), [Docs](https://kit.svelte.dev/docs/loading#input-fetch))
-
-## New in Svelte & Language Tools
-
-- `svelte-preprocess` now supports the "extends" field of the tsconfig.json (4.7.2)
-- HTML `style` attributes now have hover & auto-complete. Foreign namespaces and ESM configs are now supported in the Svelte language server & extensions
-- The Svelte language tools can now infer slot/event types from their props if a generic relationship between them was defined
-
----
-
-## Community Showcase
-
-**Apps & Sites**
-
-- [gitpod.io](https://github.com/gitpod-io/website) recently rewrote its site with SvelteKit
-- [highlight eel](https://highlighteel.com/) is a web-based editor to mark your favorite parts of any YouTube video to clip and share with anyone
-- [The Far Star Mission](https://thefarstar.apotheus.net/) is an interactive audiobook companion to the album, The Far Star by Apotheus
-- [JavaScript quiz](https://github.com/nclskfm/javascript-quiz) is a small quiz application that saves your answers locally
-- [ExtensionPay](https://extensionpay.com/) lets developers accept secure payments in browser extensions with no backend server code.
-- [mk48.io](https://mk48.io/) is a naval warship game made with SvelteKit
-- [Frog Safety](https://frog-safety.vercel.app/) is a guide for African Dwarf Frogs and the API freshwater master kit
-- [Stardew Valley Character Preview](https://github.com/overscore-media/stardew-valley-character-preview) loads your character's attributes from your Stardew Valley savefile and lets you play around with different outfits, colours, and accessories.
-
-**Demos, Libraries, Tools & Components**
-
-- [svelte-parallax](https://github.com/kindoflew/svelte-parallax) is a spring-based parallax component for Svelte
-- [@svelte-plugins/viewable](https://github.com/svelte-plugins/viewable) is a simple rule-based approach to tracking element viewability.
-- [Sveltekit-JUI](https://github.com/Wolfr/sveltekit-jui) is a kit of UI components to be used in conjunction with Svelte and Svelte Kit.
-- [EZGesture](https://github.com/mhmd-22/ezgesture#integrating-with-other-frameworks) makes it easy to add gestures functionality with simple native DOM events
-
-**Want to contribute your own component?** Submit a [Component](https://sveltesociety.dev/components) to the Svelte Society site by making [a PR to this file](https://github.com/svelte-society/sveltesociety.dev/blob/master/src/pages/components/components.json).
-
-**Starters**
-
-- [How to use Vercel Analytics with SvelteKit](https://ivoberger.com/posts/using-vercel-analytics-with-svelte-kit) teaches how to track Web Vitals across your users' devices
-- [Asp.NETCore + Svelte + Vite](https://github.com/Kiho/aspcore-spa-cli/tree/master/samples/SviteSample) connects the three frameworks with SpaCliMiddleware (VS2019)
-- [Add CoffeeScript to Svelte](https://github.com/Leftium/coffeescript-adder) is an experimental command to run to add CoffeeScript to your SvelteKit project or Vite-powered Svelte app
-- [Adds Supabase to Svelte](https://github.com/joshnuss/svelte-supabase) is an experimental command to run to add Supabase to your SvelteKit project
-- [svelte-babylon](https://github.com/SectorXUSA/svelte-babylon) lets you use BabylonJS like A-Frame through reactive Svelte Components
-
-**Looking for a starter or integration?** Check out [svelte-adders](https://github.com/svelte-add/svelte-adders) and a number of other template examples at the community site [sveltesociety.dev](https://sveltesociety.dev/templates)
-
-**Learning Resources**
-
-- [Amazing macOS Dock animation in Svelte](https://dev.to/puruvj/amazing-macos-dock-animation-in-svelte-5hfb) demonstrates how nice Svelte and popmotion look together
-- [Solving the Tower of Hanoi with recursive Svelte templates](https://geoffrich.net/posts/svelte-tower-of-hanoi/) incorporates the `<svelte:self>` element into a common computer science problem
-- [DIY SvelteKit CDK adapter](https://dev.to/juranki/diy-sveltekit-cdk-adapter-3enp) puts together SvelteKit and AWS CDK
-- Fireship's [Svelte in 100 Seconds](https://www.youtube.com/watch?v=rv3Yq-B8qp4) is a quick and easy introduction to Svelte's core concepts
-- [Tech Downtime](https://www.youtube.com/watch?v=tsePBA2JC7o&list=PLualcIC6WNK1LHIYx2Tg9AQfTQDv4zNPu) has been diving into SvelteKit in this playlist - from getting up and running to debugging.
-- lihautan's latest video updates in the [Svelte 101](https://www.youtube.com/watch?v=rwYgOU0WmVk&list=PLoKaNN3BjQX3mxDEVG3oGJx2ByXnue_gR&index=59) and [Svelte Store](https://www.youtube.com/watch?v=p4GmT0trCPE&list=PLoKaNN3BjQX3fG-XOSwsPHtnV8FUY6lgK&index=19) playlists cover slots, stores and context - and when to use which
-- [DavidParkerW](https://www.youtube.com/c/DavidParkerW/playlists) has been exploring Svelte, Sapper and SvelteKit in some real-world scenarios, like [displaying a blog post list from an API](https://www.youtube.com/watch?v=kAPVFgFnxaM&list=PLPqKsyEGhUna6cvm6d4vZNI6gbt_0S4Xx&index=15)
-
-## See you next month!
-
-Got something to add? Join us on [Svelte Society](https://sveltesociety.dev/), [Reddit](https://www.reddit.com/r/sveltejs/) and [Discord](https://discord.com/invite/yy75DKs)!
diff --git a/documentation/blog/2021-06-01-whats-new-in-svelte-june-2021.md b/documentation/blog/2021-06-01-whats-new-in-svelte-june-2021.md
deleted file mode 100644
index cf05ef09fe..0000000000
--- a/documentation/blog/2021-06-01-whats-new-in-svelte-june-2021.md
+++ /dev/null
@@ -1,63 +0,0 @@
----
-title: "What's new in Svelte: June 2021"
-description: Progress towards SvelteKit 1.0 and tighter TypeScript/Svelte integrations in language tools
-author: Dani Sandoval
-authorURL: https://dreamindani.com
----
-
-This month, we saw lots of contributions to SvelteKit and its docs. The language tools also got some new features, most notably deeper integration with Svelte files within JavaScript or TypeScript files. Let's jump into the updates...
-
-## New in SvelteKit
-
-- `svelte.config.js` config files are now loaded in ESM format (`.js` instead of `.cjs`).
-- AMP pages will now use the rendered CSS, rather than emitted CSS
-- `svelte-check` has been added to the TypeScript template ([sveltejs/kit#1556](https://github.com/sveltejs/kit/pull/1556))
-- Support for https keypair [sveltejs/kit#1456](https://github.com/sveltejs/kit/pull/1456)
-- Now bundling Vite with SvelteKit and using an upgraded version. Remove Vite from your `package.json` if it's there
-- Etags for binary responses [sveltejs/kit#1382](https://github.com/sveltejs/kit/pull/1382)
-- Renamed `$layout` to `__layout` and `$error` to `__error`
-- Removed `getContext` in favor of `request.locals`
-- Renamed `.svelte` output directory to `.svelte-kit`. Update your `.gitignore` accordingly
-- `trailingSlash: 'never' | 'always' | 'ignore'` is now available in the config. This should make it easier to build sites that work with static hosting providers that expect a trailing slash for `index.html` pages, and provides an escape hatch for anyone that needs more complex behaviour.
-
-## Notable bug fixes in SvelteKit
-
-- `adapter-netlify` got a fix [sveltejs/kit#1467](https://github.com/sveltejs/kit/pull/1467) and new documentation in the readme https://github.com/sveltejs/kit/tree/master/packages/adapter-netlify
-- The router will no longer intercept navigation for URLs that the app does not own. This fixes a crash for apps that have `<a>` elements on the page with the same origin but don't share a base path with the app.
-- Hash only changes are now handled by the router fixing the browser's "back" navigation between hash changes in some circumstances.
-
-## New in Svelte & Language Tools
-
-- Svelte 3.38.1 and 3.38.2 fixed an issue with hydration that was causing duplicate elements. If you're seeing this in your project, be sure to update the latest version!
-- A new TypeScript plugin provides deeper integration with Svelte files within JavaScript or TypeScript files. This includes diagnostics, references and renaming of variables. It comes packaged with the VS Code extension but is turned off by default for now. You can enable it through [this setting](https://github.com/sveltejs/language-tools/tree/master/packages/svelte-vscode#svelteenable-ts-plugin). We encourage you to test it out and [provide feedback](https://github.com/sveltejs/language-tools/issues/580)
-- In the latest version of `svelte-check` you can now provide the path to your `tsconfig.json` or `jsconfig.json`. Example: `svelte-check --tsconfig "./tsconfig.json"`. This ensures the diagnostics are only run on files that are referenced in that config. It also runs diagnostics on JavaScript and/or TypeScript files which removes the need to run another check (like `tsc --noEmit`) for non-Svelte files (`svelte-check` version [**1.6.0**](https://github.com/sveltejs/language-tools/releases/tag/svelte-check-1.6.0))
-- The VS Code extension and `svelte-check` got a new major release. Previously, properties that had no initializer (`export let foo;`) were only required if the user was using both TypeScript and activated `strict` mode. This is changed now: People using TypeScript, and those using `checkJs` also in JavaScript files, will now always have these properties marked as required (`svelte-check` version [**2.0.0**](https://github.com/sveltejs/language-tools/releases/tag/svelte-check-2.0.0), extension version [**105.0.0**](https://github.com/sveltejs/language-tools/releases/tag/extensions-105.0.0))
-
----
-
-## Community Showcase
-
-**Apps & Sites**
-
-- [vidu](https://github.com/pa-nic/vidu) is a minimal web analytics collector and dashboard
-- [River Runner](https://river-runner.samlearner.com/) is a virtual way to follow rivers downstream - built with Mapbox and Svelte.
-- [JSDoc Type Generator](https://rafistrauss.github.io/jsdoc-generator/) generates JSDoc types for valid JSON.
-- [pagereview.io](https://pagereview.io/) is a website feedback tool that lets you leave comments directly on the site being reviewed.
-- [gamesroom.io](https://gamesroom.io/) is an online board game platform with video chat built-in.
-- [Greedy Goblin](https://greedygoblin-fe11c.web.app/) is a recipe app for old-school Runescape players.
-- [hashbrown.geopjr.dev](https://hashbrown.geopjr.dev/) is a GNOME-shell inspired webpage to learn about, explore the source code and download the Hashbrown GTK app ([link to source](https://github.com/GeopJr/Hashbrown/tree/website)).
-
-**Libraries, Tools & Components**
-
-- [svelte-image-crop](https://novacbn.github.io/svelte-image-crop/) is a simple click'n'drag image cropping library using Web APIs.
-- [svelte-datepicker](https://github.com/andrew-secret/svelte-datepicker) is a lightweight and inclusive date picker build with Svelte.
-- [svelte-regex-router](https://www.npmjs.com/package/svelte-regex-router) is a simple, lightweight library for you to easily handle routes in your Svelte application.
-- [Svelte Micro](https://www.npmjs.com/package/svelte-micro) is a light & reactive one-component router for Svelte.
-- [svelte-entity-store](https://www.npmjs.com/package/svelte-entity-store) is to provide a simple, generic solution for storing collections of entity objects.
-- [svelte-animation-store](https://github.com/joshnuss/svelte-animation-store) is a store that is based on Svelte's tweened store, that lets you pause, continue, reset, replay, reverse or adjust speed of a tween.
-
-**Want to contribute a component?** Submit a [Component](https://sveltesociety.dev/components) to the Svelte Society site by making [a PR to this file](https://github.com/svelte-society/sveltesociety.dev/blob/master/src/pages/components/components.json).
-
-## See you next month!
-
-Did we miss something? Join us on [Svelte Society](https://sveltesociety.dev/), [Reddit](https://www.reddit.com/r/sveltejs/) and [Discord](https://discord.com/invite/yy75DKs)!
diff --git a/documentation/blog/2021-07-01-whats-new-in-svelte-july-2021.md b/documentation/blog/2021-07-01-whats-new-in-svelte-july-2021.md
deleted file mode 100644
index 023028f0f8..0000000000
--- a/documentation/blog/2021-07-01-whats-new-in-svelte-july-2021.md
+++ /dev/null
@@ -1,64 +0,0 @@
----
-title: "What's new in Svelte: July 2021"
-description: Keeping cool with fixes, TypeScript tooling and tonnes of new features
-author: Dani Sandoval
-authorURL: https://dreamindani.com
----
-
-As the northern hemisphere heats up, Svelte has stayed cool with lots of performance and bug fixes, better TypeScript support, and lots of new components & tools from around the ecosystem. Let's take a peek 👀
-
-## New in SvelteKit
-
-- `adapter-node` now precompresses assets using gzip & brotli ([#1693](https://github.com/sveltejs/kit/pull/1693))
-- Support for TypeScript transpilation has been added to the `svelte-kit package` tooling ([#1633](https://github.com/sveltejs/kit/pull/1633))
-- Improved caching defaults in `adapter-node` ([#1416](https://github.com/sveltejs/kit/pull/1416))
-- Allow configuring Rollup output options ([#1572](https://github.com/sveltejs/kit/pull/1572))
-- Fixed usage of SSL with HMR ([#1517](https://github.com/sveltejs/kit/pull/1517))
-
-## Features & bug fixes from around svelte/\*
-
-- [Svelte 3.38.3](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md#3383) (released June 22) includes a bunch of performance and bug fixes - including hydration optimizations, `this` preservation in bubbled events, and more!
-- The latest language tools releases added support for prop renaming from outside of a component, PostCSS syntax grammar, and a `.d.ts` output target in `svelte2tsx` which can be used to create type definitions from Svelte files.
-- Also in language tools, some long-awaited experimental features for enhanced TypeScript support were added - including explicitly typing all possible component events or slots, and using generics. Have a look at [the RFC](https://github.com/sveltejs/rfcs/pull/38) for more details and leave feedback in [this issue](https://github.com/sveltejs/language-tools/issues/442) if you are using it.
-- `svelte-scroller` got some quality-of-life fixes in 2.0.7 - fixing an initial width bug and updating its `index` more conservatively
-
-## Coming soon to Svelte
-
-- Constants in markup ([RFC](https://github.com/sveltejs/rfcs/blob/master/text/0000-markup-constants.md)): Adds a new `{@const ...}` tag that defines a local constant ([PR](https://github.com/sveltejs/svelte/pull/6413))
-
----
-
-## Community Showcase
-
-**Apps & Sites**
-
-- [SvelteThemes](https://sveltethemes.dev/) is a curated list of Svelte themes and templates built using svelte, sveltekit, elderjs, routify etc.
-- [Beatbump](https://github.com/snuffyDev/Beatbump) is an alternative frontend for YouTube Music created using Svelte/SvelteKit.
-- [Sveltuir](https://github.com/webspaceadam/sveltuir) is an app help you memorize the guitar fretboard
-
-**Educational Content**
-
-- [Svelte Radio: A Jolly Good Svelte Summer](https://share.transistor.fm/s/60880542) is a conversation about what's new in Svelte and a celebration of Svelte Radio's 1-year anniversary
-- [Class properties in Svelte](https://navillus.dev/blog/svelte-class-props) is a refresher on the power of `class` for developers switching over to Svelte from React
-- [Sveltekit Tutorial for Beginners](https://www.youtube.com/playlist?list=PLm_Qt4aKpfKjf77S8UD79Ockhwp_699Ms) is a video playlist for learning SvelteKit by WebJeda
-- [How To Cache Dynamic Pages On Demand With A Service Worker In SvelteKit](https://jochemvogel.medium.com/how-to-cache-dynamic-pages-on-demand-with-a-service-worker-in-sveltekit-4b4a7652583d) walks through the power of service workers when used within SvelteKit for on-demand caching
-- [Vue vs Svelte: Comparing Framework Internals](https://www.vuemastery.com/blog/vue-vs-svelte-comparing-framework-internals/) dives deep into the differences between Vue and Svelte from the inside out
-- [Setting up a development environment for SvelteKit with Docker and Docker Compose](https://jenyus.web.app/blog/2021-05-30-setting-up-a-development-environment-for-sveltekit-with-docker-and-compose) walks through how to use Docker to create reusable development environments, no matter what kind of device you run your code on
-- Scalable Scripts released three videos this month documenting how to deploy dockerized Svelte Apps to [AWS](https://youtu.be/VOs2Od5jYOc), [Azure](https://youtu.be/gdg4ne_uDm8) and [Google Cloud](https://youtu.be/_-uBb61Tikw)
-- [Render Katex with Svelte from zero to hero](https://www.youtube.com/watch?v=euowJs9CblA) demonstrates how to implement Katex in a Svelte project
-- [Using Custom Elements in Svelte](https://css-tricks.com/using-custom-elements-in-svelte/) shows some of the quirks to look out for when using custom elements in a Svelte site
-
-**Libraries, Tools & Components**
-
-- [svelte-pipeline](https://github.com/novacbn/svelte-pipeline) provides custom JavaScript contexts and the Svelte Compiler as Svelte Stores, for REPLs, Editors, etc.
-- [Sveltotron](https://github.com/Salemmous/sveltotron) is an Electron-based app made to inspect your Svelte app
-- [svelte-qr-reader-writer](https://github.com/pleasemarkdarkly/svelte-qr-reader-writer) is a Svelte component that helps read and write data from QR codes
-- [svelte-stack-router](https://www.npmjs.com/package/svelte-stack-router) Aims to make Svelte apps feel more native by routing with Stacks
-- [svelte-typed-context](https://www.npmjs.com/package/svelte-typed-context) provides an interface which, when provided to `getContext` or `setContext`, allows for stricter types
-- [svelte-modals](https://svelte-modals.mattjennings.io/) is a simple, flexible, zero-dependency modal manager for Svelte
-
-**Want to contribute a component? Interested in helping make Svelte's presence on the web better?** Submit a Component to the Svelte Society site by making [a PR to this file](https://github.com/svelte-society/sveltesociety-2021/blob/main/src/routes/components/components.json) or check out [the list of open issues](https://github.com/svelte-society/sveltesociety-2021/issues) if you'd like to contribute to the Svelte Society rewrite in SvelteKit.
-
-## See you next month!
-
-Want more updates? Join us on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.com/invite/yy75DKs)!
diff --git a/documentation/blog/2021-08-01-whats-new-in-svelte-august-2021.md b/documentation/blog/2021-08-01-whats-new-in-svelte-august-2021.md
deleted file mode 100644
index 97bd24605f..0000000000
--- a/documentation/blog/2021-08-01-whats-new-in-svelte-august-2021.md
+++ /dev/null
@@ -1,75 +0,0 @@
----
-title: "What's new in Svelte: August 2021"
-description: Shadow DOM, export and await - oh my!
-author: Dani Sandoval
-authorURL: https://dreamindani.com
----
-
-From The Changelog ([JS Party Ep. 182](https://changelog.com/jsparty/182)) to Svelte Radio (Episodes [29](https://share.transistor.fm/s/adc23e84) and [30](https://share.transistor.fm/s/6316622d)), it seems that folks couldn't help but talk about Svelte, this month! Also, shadow DOM support and new export and await functionality are new in Svelte.
-
-## New in Svelte
-
-July was the most active month for the Svelte core repo since late 2019 as we really worked to reduce the number of outstanding PRs and saw the release of Svelte 3.39.0, 3.40.0, and 3.41.0. Tons of bug fixes were added as well as the following new features:
-
-- The `|trusted` event modifier allows you to check if an event is trusted before it's called ([#6137](https://github.com/sveltejs/svelte/issues/6137))
-- The new `svelte/ssr` package to support work on improving SvelteKit SSR ([#6416](https://github.com/sveltejs/svelte/pull/6416))
-- A new `errorMode` compiler option to support improved preprocessing of TypeScript files ([#6194](https://github.com/sveltejs/svelte/pull/6194))
-- You can now specify a `ShadowRoot` as the `target` when creating a component - making it possible to render Svelte components inside the shadow DOM ([#5869](https://github.com/sveltejs/svelte/issues/5869))
-- The `export { ... } from` ([#2214](https://github.com/sveltejs/svelte/issues/2214)), `export let { ... } =` ([#5612](https://github.com/sveltejs/svelte/issues/5612)) and `{#await ... then/catch}` ([#6270](https://github.com/sveltejs/svelte/issues/6270)) syntaxes are all now supported in Svelte components
-
-For a full list of features and bug fixes, check out the [Svelte changelog](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md).
-
-## SvelteKit Updates
-
-- `prerender.force` is now `prerender.onError` which lets you fine-tune which errors fail the build and which do not ([#2007](https://github.com/sveltejs/kit/pull/2007))
-- esbuild's configuration is now exposed for use with SvelteKit adapters ([#1914](https://github.com/sveltejs/kit/pull/1914))
-- Error messages are friendlier now for common config errors ([#1910](https://github.com/sveltejs/kit/pull/1910)) and compiler errors ([#1827](https://github.com/sveltejs/kit/pull/1827))
-- Cookies will only be passed through if the target host is the same as the SvelteKit application or a more specific subdomain of it ([#1847](https://github.com/sveltejs/kit/pull/1847))
-- index.js exports will now be changed to directory exports when packaging - making for nicer imports ([#1905](https://github.com/sveltejs/kit/pull/1905))
-- Vite.js's `mode` is now exposed from `$app/env` ([#1789](https://github.com/sveltejs/kit/pull/1789))
-- Better types across the board ([#1778](https://github.com/sveltejs/kit/pull/1778), [#1791](https://github.com/sveltejs/kit/pull/1791), [#1646](https://github.com/sveltejs/kit/pull/1646))
-
-To see all updates to SvelteKit, check out the [SvelteKit changelog](https://github.com/sveltejs/kit/blob/master/packages/kit/CHANGELOG.md).
-
-## Features & bug fixes from around svelte/\*
-
-- Language Tools now better support the "Workplace Trust" functionality (used in VS Code)
-- In svelte2tsx, ambient type declarations are now renamed to avoid conflicting declarations in the future. Users are now expected to provide the ambient type definitions themselves - fixing JS output
-- Sapper released v0.29.2 which fixes regex routes, status codes when requesting a directory, and exports when a user has not provided a `base` tag ([changelog](https://github.com/sveltejs/sapper/blob/master/CHANGELOG.md))
-
----
-
-## Community Showcase
-
-**Apps & Sites**
-
-- [Parsnip](https://www.parsnip.ai/) is a mobile-first, progressive-web-app that helps you to learn to cook at home. Check out the [conversation on Reddit](https://www.reddit.com/r/sveltejs/comments/oearb9/learning_to_cook_at_home_with_parsnip_built/) for all the geeky details.
-- [Central Bank Digital Currency (CBDC) tracker](https://www.atlanticcouncil.org/cbdctracker/) is a site that keeps track of how countries around the world are adopting digital currencies.
-- [Svelte Commerce](https://github.com/itswadesh/svelte-commerce) is an advanced frontend platform for eCommerce based on Sveltekit.
-- [neovimcraft](https://neovimcraft.com/) is a SvelteKit site dedicated to neovim plugins
-
-**Looking for a Svelte project to work on? Interested in helping make Svelte's presence on the web better?** Check out [the list of open issues](https://github.com/svelte-society/sveltesociety-2021/issues) if you'd like to contribute to the Svelte Society rewrite in SvelteKit.
-
-**Educational Content**
-
-- [How I Built a Cross-Platform Desktop Application with Svelte, Redis, and Rust](https://css-tricks.com/how-i-built-a-cross-platform-desktop-application-with-svelte-redis-and-rust/) is a blog post by Luke Edwards, Svelte maintainer and Developer Advocate from Cloudflare.
-- [How to Create a Blog with SvelteKit and Strapi](https://strapi.io/blog/how-to-create-a-blog-with-svelte-kit-strapi) is a step-by-step tutorial by Aarnav Pai from Strapi
-- [Sveltekit Markdown Blog](https://www.youtube.com/watch?v=sKKgT0SEioI&list=PLm_Qt4aKpfKgonq1zwaCS6kOD-nbOKx7V) is a YouTube tutorial series by WebJeda.
-- [Using Custom Elements in Svelte](https://css-tricks.com/using-custom-elements-in-svelte/) is a deep dive into custom elements by Geoff Rich.
-- [learn / graphql / svelte](https://hasura.io/learn/graphql/svelte-apollo/introduction/) is a free 2-hour GraphQL course from Hasura.
-- [How to add Magic Link to a SvelteKit application](https://magic.link/posts/magic-svelte) is a guide to the popular password-less login pattern.
-
-**Libraries, Tools & Components**
-
-- [Svelte-Capacitor](https://github.com/drannex42/svelte-capacitor/) just released v2.0.0 - making it even easier to build hybrid mobile apps for iOS and Android using Svelte and Capacitor with near native performance.
-- [svelte-remixicon](https://github.com/ABarnob/svelte-remixicon) is an icon library for Svelte based on Remix Icon, consisting of more than 2000 icons.
-- [SveltePress](https://github.com/GeopJr/SveltePress) is a documentation tool built on top of SvelteKit.
-- [Svelte Starter Kit](https://github.com/one-aalam/svelte-starter-kit/tree/auth-supabase) is a boilerplate to quickly get up and running with Svelte, with Auth and User Profiles powered by Supabase.
-- [Kahi UI](https://github.com/novacbn/kahi-ui) is a Svelte-first UI kit with Dark Mode built-in.
-- [typesafe-i18n](https://github.com/ivanhofer/typesafe-i18n) is an opinionated, fully type-safe, lightweight localization library for TypeScript and JavaScript projects with no external dependencies.
-
-Check out the community site [sveltesociety.dev](https://sveltesociety.dev/templates/) for more templates, adders and adapters from across the Svelte ecosystem.
-
-## See you next month!
-
-Want more updates? Join us on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.com/invite/yy75DKs)!
diff --git a/documentation/blog/2021-09-01-whats-new-in-svelte-september-2021.md b/documentation/blog/2021-09-01-whats-new-in-svelte-september-2021.md
deleted file mode 100644
index 1cbffd5baf..0000000000
--- a/documentation/blog/2021-09-01-whats-new-in-svelte-september-2021.md
+++ /dev/null
@@ -1,84 +0,0 @@
----
-title: "What's new in Svelte: September 2021"
-description: StackOverflow's most loved web framework
-author: Dani Sandoval
-authorURL: https://dreamindani.com
----
-
-This month, Svelte was [voted StackOverflow's most loved web framework](https://insights.stackoverflow.com/survey/2021#section-most-loved-dreaded-and-wanted-web-frameworks), Tan Li Hau [talked to Svelte Radio](https://share.transistor.fm/s/84c7521b) about his [Svelte-filled YouTube channel](https://www.youtube.com/channel/UCbmC3HP3FaAFdcZkui8YoMQ), and SvelteKit made even more progress towards its 1.0 release!
-
-## New in Svelte
-
-- `use:actions` can now be used on `<svelte:body>` (**3.42.0**)
-- `HTMLElement`, `SVGElement` (**3.42.2**) and `BigInt` (**3.42.3**) are now known globals
-- There is less code in Svelte's output thanks to the following improvements in **3.42.2**:
-  - Whitespace is now collapsed in class and style attributes
-  - Hydrated components have been updated to only rely upon helpers for creating the types of elements present in the component
-- Scaling is now accounted for in `flip` animations (**3.42.2**)
-- All `<option>`s in a `<select>` are now deselected when the bound value doesn't match any of them (**3.42.2**)
-
-For a full list of features and bug fixes, check out the [Svelte changelog](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md).
-
-## SvelteKit Updates
-
-Svelte maintainers are [looking for help getting SvelteKit to 1.0](https://github.com/sveltejs/kit/issues/2100). We've knocked out over 100 issues that were on the 1.0 milestone. There's only a couple dozen left and we'd love a hand making that list a bit shorter!
-
-If you'd like to help, please consider working on any of the [1.0 milestone issues](https://github.com/sveltejs/kit/issues?q=is%3Aopen+is%3Aissue+milestone%3A1.0).
-
-The focus this past month was on continuing to iron out any kinks, with well over 100 PRs merged. A few new features went in as well...
-
-- SvelteKit will now detect if a prerendered app is trying to access a query parameter and return an error instead of failing silently ([#2104](https://github.com/sveltejs/kit/pull/2104))
-- `adapter-node` now lets you [add the Kit middleware to your own server](https://kit.svelte.dev/faq#integrations) for use with other middleware. You can also [add middleware in dev mode](https://kit.svelte.dev/faq#how-do-i-use-x-with-sveltekit-how-do-i-use-middleware) with more improvements to come in this area
-- The new [`sequence` helper lets you chain together multiple `handle` calls](https://kit.svelte.dev/docs/modules#sveltejs-kit-hooks)
-- A new [`handleError` hook](https://kit.svelte.dev/docs/hooks#handleerror) gives you the option to send data to an error tracking service, or to customise the formatting before printing the error to the console.
-- `adapter-node` can now listen on socket path ([#2048](https://github.com/sveltejs/kit/pull/2048))
-
-To see all updates to SvelteKit, check out the [SvelteKit changelog](https://github.com/sveltejs/kit/blob/master/packages/kit/CHANGELOG.md).
-
----
-
-## Community Showcase
-
-**Apps & Sites**
-
-- [macos-web](https://github.com/PuruVJ/macos-web) by @puruvjdev has been rebuilt with Svelte from the ground up. Check out all the details in this [Twitter thread](https://twitter.com/puruvjdev/status/1426267327687847939)
-- [Brave Search](https://search.brave.com/) is using Svelte
-- [exatorrent](https://github.com/varbhat/exatorrent) is a self-hostable, easy-to-use, lightweight and feature-rich torrent client written in Go and Svelte
-- [json2TsTypes](https://github.com/jatinhemnani01/json2TsTypes) is a simple tool which will convert your JSON to TypeScript Types/Interfaces
-- [Histogram.dev](https://histogram.dev/) generates histograms for each feature in a CSV
-- [cybernetic.dev](https://cybernetic.dev/) is a collection of data-centric UI experiments made while learning Svelte
-- [LunaNotes](https://chrome.google.com/webstore/detail/lunanotes-youtube-video-n/oehoffnnkgcdacmbkhmlbjedinpampak?hl=en) is a Chrome extension to help with taking YouTube video notes
-- [theia.games](https://theia.games/#dev)'s built-in 3D environment editor lets you create a VR world with a menu built in Svelte
-- [Ferrum](https://github.com/probablykasper/ferrum) is a music library and player available for Mac, Windows or Linux
-- [Fluid Earth](https://github.com/byrd-polar/fluid-earth) is an interactive WebGL application for visualizing Earth's atmosphere and oceans
-
-**Looking for a Svelte project to work on? Interested in helping make Svelte's presence on the web better?** Check out [the list of open issues](https://github.com/svelte-society/sveltesociety-2021/issues) if you'd like to contribute to the Svelte Society rewrite in SvelteKit.
-
-**Educational Content**
-
-- [Tauri with Standard Svelte or SvelteKit](https://medium.com/@cazanator/tauri-with-standard-svelte-or-sveltekit-ad7f103c37e7) walks through how to setup Svelte with Tauri, a new light-weight framework for developing cross-platform hybrid desktop applications
-- [Svelte - Web App Development Reimagined [An Intro to Svelte]](https://www.youtube.com/watch?v=4CGzFwHoD0A&list=PLEx5khR4g7PKSASVAXXiAhkyx02_OeruP) is a great intro talk from the goto; conference
-- [LevelUpTuts - Even More 5 Things I Like More In Svelte Than React](https://www.youtube.com/watch?v=ISmnG2sIOeM) highlights Svelte's approach to refs (don't need them), meta tags and more
-- [State Management in Svelte Applications](https://auth0.com/blog/state-management-in-svelte-applications/) is a tutorial on how to use the Svelte state management store to manage state in Svelte applications
-- [Migrating from Sapper to SvelteKit](https://shipbit.de/blog/migrating-from-sapper-to-svelte-kit/) is a review and retrospective of ShipBit's migration from Sapper
-
-**Libraries, Tools & Components**
-
-- [svelte-stripe-js](https://github.com/joshnuss/svelte-stripe-js) is everything you need to add Stripe to your Svelte project. 100% SvelteKit compatible
-- [svelte-steps](https://github.com/shaozi/svelte-steps) is a customizable step component written in Svelte
-- [simple-optics-module](https://gitlab.com/Samzelot/simple-optics-module) is an online open source optics tool for experimenting and teaching geometrical optics
-- [inlang](https://github.com/samuelstroschein/inlang) is an internationalization (i18n) tool for SvelteKit apps
-- [Sveno](https://github.com/pocinnovation/sveno) is a component transpiler that transforms React components to Svelte components
-- [svelte-useactions](https://github.com/paolotiu/svelte-useactions) is a fully typed library for passing actions to components
-- [Svelte-Element-Query](https://github.com/leveluptuts/Svelte-Element-Query) is a 322b library/action for element queries
-- [svelte-meta-tags](https://github.com/oekazuma/svelte-meta-tags) is a plug-in that makes managing SEO easier in Svelte projects
-- [svelte-domtree](https://github.com/alex-knyaz/svelte-domtree) lets you visualize the DOM - similar to DOM tree in Chrome DevTools
-- [Diffx](https://github.com/jbjorge/diffx/tree/master/svelte), a cross-framework state management library, just added Svelte support
-- [svelte-ionic-starter](https://github.com/Zettexe/svelte-ionic-starter) a project template for Svelte + Ionic + CapacitorJS apps with live reload and iOS/Android build targets
-- [demo-sveltekit-sanity](https://github.com/stephane-vanraes/demo-sveltekit-sanity/) is a starter kit for SvelteKit and Sanity, an open source React CMS
-
-Check out the community site [sveltesociety.dev](https://sveltesociety.dev/templates/) for more templates, adders and adapters from across the Svelte ecosystem.
-
-## See you next month!
-
-Want more updates? Join us on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.com/invite/yy75DKs)!
diff --git a/documentation/blog/2021-10-01-whats-new-in-svelte-october-2021.md b/documentation/blog/2021-10-01-whats-new-in-svelte-october-2021.md
deleted file mode 100644
index d20cce0cab..0000000000
--- a/documentation/blog/2021-10-01-whats-new-in-svelte-october-2021.md
+++ /dev/null
@@ -1,100 +0,0 @@
----
-title: "What's new in Svelte: October 2021"
-description: A whole year of "What's new in Svelte"
-author: Dani Sandoval
-authorURL: https://dreamindani.com
----
-
-Hey y'all 👋 It's been 1 year since "What's new in Svelte" started being cross-posted to the Svelte blog. I wanted to take this moment at the top to thank all of you for reading and for all the contributors every month. From the maintainers to everyone who posts their work in the Discord and Reddit, it's amazing to witness all the effort that goes into making the Svelte community great.
-
-Keep up the good work, everyone! Now, let's dive into this month's news...
-
-## New around Svelte
-
-- New additions to Svelte's export map now expose no-op versions of lifecycle functions for SSR (Svelte **3.43.0**)
-- Custom components with a `src` attribute no longer break `svelte-native` builds (Svelte **3.42.4**)
-- Svelte plugin users without [the TypeScript plugin](https://www.npmjs.com/package/typescript-svelte-plugin) enabled will now be prompted to enable it. It enhances TypeScript and JavaScript files with additional intellisense to interact with Svelte files. [Please leave feedback](https://github.com/sveltejs/language-tools/issues/580) if you are using it (Svelte extensions **105.4.0**)
-- Event modifiers have been added to intellisense as autocomplete and hover info (Svelte extensions **105.4.0**)
-- TypeScript users no longer have to strictly separate type imports and value imports when using Svelte version 3.39 or higher and `svelte-preprocess` version 4.9.5 or higher. This means you can now write `import { MyInterface, myValue } from './somewhere'` instead of `import type { MyInterface } from './somewhere'; import { myValue } from './somewhere'`. Huge thanks to community member [@SomaticIT](https://github.com/SomaticIT) who mainly implemented this!
-
-For a full list of features and bug fixes, check out the [Svelte changelog](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md).
-
-## SvelteKit Updates
-
-Nearly 100 PRs committed again this past month, but there's still lots to do and Svelte maintainers are [looking for help getting SvelteKit to 1.0](https://github.com/sveltejs/kit/issues/2100). Antony said it well in a [recent comment](https://github.com/sveltejs/kit/issues/2100#issuecomment-895446285) on the issue:
-
-> If you think you are too n00b to contribute (you're not), then add tests, or write tests for the feature you want to add, before you add it! Start small, and learn the codebase that way.
-
-If you'd like to help, please consider working on any of the [1.0 milestone issues labeled with "help wanted"](https://github.com/sveltejs/kit/issues?q=is%3Aopen+is%3Aissue+milestone%3A1.0+label%3A%22help+wanted%22).
-
-Notable SvelteKit improvements this month include...
-
-- Service workers are now allowed to access files using the `$lib` alias ([#2326](https://github.com/sveltejs/kit/pull/2326))
-- Svelte libraries should now work out-of-the-box without any Vite configuration ([#2343](https://github.com/sveltejs/kit/pull/2343))
-- Improvements to package exports field ([#2345](https://github.com/sveltejs/kit/pull/2345) and [#2327](https://github.com/sveltejs/kit/pull/2327))
-- [breaking] The `prerender.pages` config option has been renamed to `prerender.entries` ([#2380](https://github.com/sveltejs/kit/pull/2380))
-- A new generic argument has been added to allow typing Body from hooks ([#2413](https://github.com/sveltejs/kit/pull/2413))
-- The `svelte` field will be added to package.json when running the package command ([#2431](https://github.com/sveltejs/kit/pull/2431))
-- [breaking] The `context` parameter of the load function was renamed to `stuff` ([#2439](https://github.com/sveltejs/kit/pull/2439))
-- Added an `entryPoint` option for building a custom server with `adapter-node` ([#2414](https://github.com/sveltejs/kit/pull/2414))
-- `vite-plugin-svelte` improved support for [useVitePreprocess](https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/config.md#usevitepreprocess), which uses Vite to automatically preprocess TypeScript, PostCSS, Scss, etc in Svelte components ([#173](https://github.com/sveltejs/vite-plugin-svelte/pull/173))
-
-To see all updates to SvelteKit, check out the [SvelteKit changelog](https://github.com/sveltejs/kit/blob/master/packages/kit/CHANGELOG.md).
-
----
-
-## Community Showcase
-
-**Apps & Sites**
-
-- [radiofrance](https://www.radiofrance.fr/) just migrated their website to SvelteKit
-- [FLAYKS](https://flayks.com/) is the portfolio site for Félix Péault made with SvelteKit, Sanity, and Anime.js
-- [hirehive](https://www.hirehive.com/) is a candidate and job tracking site
-- [Microsocial](https://microsocial.xyz/) is an experimental Peer-to-Peer Social Platform
-- [Dylan Ipsum](https://www.dylanlyrics.app/) is a random text generator to replace lorem ipsum with Bob Dylan lyrics
-- [Chip8 Svelte](https://github.com/mikeyhogarth/chip8-svelte) is a CHIP-8 emulator frontend, built on top of CHIP8 TypeScript
-
-**Looking for a Svelte project to work on? Interested in helping make Svelte's presence on the web better?** Check out [the list of open issues](https://github.com/svelte-society/sveltesociety-2021/issues) if you'd like to contribute to the Svelte Society rewrite in SvelteKit.
-
-**Podcasts Featuring Svelte**
-
-- [Syntax Podcast: From React to SvelteKit](https://podcasts.apple.com/us/podcast/from-react-to-sveltekit/id1253186678?i=1000536276106) Scott talks with Wes about moving Level Up Tutorials from React to SvelteKit — why he did it, how, benefits, things to watch out for, and more!
-- [Web Rush Podcast: Svelte Tools and Svelte Society](https://www.webrush.io/episodes/episode-150-svelte-tools-and-svelte-society) Kevin Åberg Kultalahti talks about what Svelte Society is, what he's excited about with Svelte, how important documentation is to any product, and much _much_ more
-- [Svelte: The Compiled Future of Front End](https://www.arahansen.com/the-compiled-future-of-front-end/) details the history of component-based frontends and how a compiler changes everything
-- [Svelte Radio: Contributing to Svelte with Martin 'Grygrflzr' Krisnanto Putra](https://share.transistor.fm/s/10aa305c) Grygrflzr shares his journey to becoming a maintainer and his views on React, Vite and a host of other things
-- [Svelte Radio: Routify 3 with Jake and Willow](https://share.transistor.fm/s/10aa305c) the Svelte Radio crew sits down with the maintainers of Routify and discusses the just-released Routify 3
-- [JS Party: 1Password](https://twitter.com/geoffrich_/status/1441816829853253640?s=20) mentioned on the latest episode of The Changelog's JS Party that they use Svelte to power their in-page suggestions
-
-**Educational Content**
-
-- [How I built a blog with Svelte and SvelteKit](https://fantinel.dev/blog-development-sveltekit/) is an introduction to Svelte, SvelteKit and Progressive Enhancement with code examples
-- [I built a decentralized chat dapp](https://www.youtube.com/watch?v=J5x3OMXjgMc) is a tutorial on how to use popular web3 technologies like GUN to build a decentralized web app (dapp)
-- [Writing a Svelte Store with TypeScript](https://javascript.plainenglish.io/writing-a-svelte-store-with-typescript-22fa1c901a4) is a deep dive into writing Svelte stores with TypeScript
-- [How Svelte scopes component styles](https://geoffrich.net/posts/svelte-scoped-styles/) explains scoping using classes and more complex CSS specifiers
-- [SvelteKit Hooks](https://www.youtube.com/watch?v=RarufLoEL08) shows how to use hooks.js in Sveltekit.. When you're done, check out [Part 2](https://www.youtube.com/watch?v=RmIBG3G0-VY)
-- [An early look at SvelteKit](https://www.infoworld.com/article/3630395/an-early-look-at-sveltekit.html) is a post from Infoworld walking through the features and onboarding of SvelteKit
-
-**Libraries, Tools & Components**
-
-- [sveltekit-netlify-cms](https://github.com/buhrmi/sveltekit-netlify-cms) is a SvelteKit skeleton app configured for use with Netlify CMS
-- [SvelteFireTS](https://github.com/jacobbowdoin/sveltefirets) is a SvelteKit + TypeScript + Firebase library inspired by Fireship.io
-- [stores-x](https://github.com/Anyass3/stores-x) lets you use Svelte stores just like vueX
-- [sveltekit-snippets](https://github.com/stordahl/sveltekit-snippets) is a VS Code extension that provides snippets for common patterns in SvelteKit & Vanilla Svelte
-- [svelte-xactor](https://github.com/wobsoriano/svelte-xactor) is a middleware that allows you to easily convert your xactor machines into a global store that implements the store contract
-- [vite-plugin-pages-svelte](https://github.com/aldy505/vite-plugin-pages-svelte) is a vite plugin for automatic filesystem-based routing
-- [sveltio](https://www.npmjs.com/package/sveltio) is a Svelte wrapper for valtio - a proxy-state library
-- [svelte-transition-classes](https://github.com/rmarscher/svelte-transition-classes) is a custom Svelte transition for adding and swapping CSS classes
-- [Svelte-Boring-Avatars](https://github.com/paolotiu/svelte-boring-avatars) is Svelte port of the popular [Boring Avatars](https://github.com/boringdesigners/boring-avatars) React project
-- [Svelte DataTables](https://github.com/homescriptone/svelte-datatables) brings DataTable, a popular JavaScript library allowing you to easily display your data in a user-friendly table, into your Svelte project.
-- [focus-svelte](https://github.com/chanced/focus-svelte) is a focus trap for Svelte with zero dependencies
-- [filedrop-svelte](https://github.com/chanced/filedrop-svelte) is a file dropzone action & component for Svelte
-
-Check out the community site [sveltesociety.dev](https://sveltesociety.dev/templates/) for more templates, adders and adapters from across the Svelte ecosystem.
-
-## Before you go, answer the call for speakers!
-
-Svelte Summit Fall 2021 (happening 20 November 2021) is looking for speakers. Submit your talk proposal before 30 October... all are welcome to present and attend.
-
-### More info on the [sessionize site](https://sessionize.com/svelte-summit-fall-2021/)
-
-Can't wait for the summit? Join us on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.com/invite/yy75DKs)!
diff --git a/documentation/blog/2021-11-01-whats-new-in-svelte-november-2021.md b/documentation/blog/2021-11-01-whats-new-in-svelte-november-2021.md
deleted file mode 100644
index 2ac151af85..0000000000
--- a/documentation/blog/2021-11-01-whats-new-in-svelte-november-2021.md
+++ /dev/null
@@ -1,88 +0,0 @@
----
-title: "What's new in Svelte: November 2021"
-description: Over 5000 stars to light up the showcase
-author: Dani Sandoval
-authorURL: https://dreamindani.com
----
-
-With SvelteKit crossing the [80% complete mark](https://github.com/sveltejs/kit/milestone/2), over [5000 stars](https://github.com/sveltejs/kit) on GitHub, and now having more usage than Sapper, there's never been a better time to try it out! Many in the community have, making for quite a large showcase this month...
-
-Also, don't miss out on [Svelte Summit](https://sveltesummit.com/) on November 20th - featuring speakers from around the world. Keep an eye out for a watch party in your area 👀
-
-Now onto what's new!
-
-## New in Svelte and SvelteKit
-
-- [svelte.dev](https://svelte.dev/) now runs on SvelteKit alongside [sveltesociety.dev](https://sveltesociety.dev). svelte.dev is a relatively complicated site with live code editing, authentication, and a markdown-based blog - making it a great way for us to really test out SvelteKit
-- A new compiler option, `enableSourcemap`, provides more control over the compiler output for JS and CSS sourcemaps (**3.44.0**). With this new feature, SvelteKit and the Vite Svelte plugin can now properly handle environment variables in `.svelte` templates (See [sveltejs/kit#720](https://github.com/sveltejs/kit/issues/720) and [sveltejs/vite-plugin-svelte#201](https://github.com/sveltejs/vite-plugin-svelte/pull/201))
-- The Svelte Language Tools now support reading the configuration of the VS Code CSS settings ([#1219](https://github.com/sveltejs/language-tools/issues/1219))
-- `vite-plugin-svelte` added a new `experimental.prebundleSvelteLibraries` option that makes it much faster to load Svelte libraries with many components like icon libraries and UI frameworks. The option can be set in the root of `svelte.config.js`. Please test it out and give us feedback!
-- SvelteKit will only route endpoints on the client, unless marked as `rel="external"` - reducing the size of the client JS and making it easier to refactor the router in the future ([2656](https://github.com/sveltejs/kit/pull/2656))
-- SvelteKit no longer supports Node 12 ([2604](https://github.com/sveltejs/kit/pull/2604))
-- SvelteKit was upgraded from Vite 2.6.0 to Vite 2.6.12 fixing an issue where Vite would corrupt the Svelte runtime (https://github.com/vitejs/vite/issues/4306). It also included two fixes from the SvelteKit team to avoid or make diagnosing Vite issues in SvelteKit templates easier (https://github.com/vitejs/vite/pull/5192 and https://github.com/vitejs/vite/pull/5193). Vite 2.7 is currently available in beta with additional fixes for SSR
-
-To see all updates to Svelte and SvelteKit, check out the [Svelte](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md) and [SvelteKit changelog](https://github.com/sveltejs/kit/blob/master/packages/kit/CHANGELOG.md), respectively.
-
----
-
-## Community Showcase
-
-**Apps & Sites**
-
-- [Tangent](http://tangentnotes.com/) is a clean and powerful notes app for Mac & Windows
-- [The Pudding](https://pudding.cool/) is a digital publication that explains ideas debated in culture with visual essays - rebuilt in SvelteKit
-- [Power Switcher](https://powerswitcher.axpo.com/) is an interactive overview of the development of the power supply in Switzerland, as energy sources migrate to cleaner sources
-- [Sublive](https://sub.live/) is a new way of making music by connecting musicians all over the world with a low-latency and high-quality audio network
-- [Vibify](https://www.vibify.me/) helps you find hidden playlists within your music using your Spotify listening history
-- [Browse Marvel Unlimited by Year](https://marvel.geoffrich.net/) is a SvelteKit site to see what issues are available on Marvel Unlimited for a given year
-- [Files](https://files.community/), a modern file explorer for Windows, has a new site rebuilt with SvelteKit
-- [lil-hash](https://github.com/jackbow/lil-hash) is a simple URL shortener that produces easily rememberable and speakable shortened URLs
-- [PWA Haven](https://github.com/ThaUnknown/pwa-haven) is a collection of small, fast, simple PWAs to replace native OS apps
-- [DottoBit](https://dottobit.com/) is a multi-color 16-bit drawing program with URL sharing built-in
-- [Former Fast Document for Print](https://github.com/zummon/former) is an invoice generator with beautiful designs, abilities for international languages and auto calculation
-- [Helvetikon](https://github.com/noahsalvi/helvetikon) is a community maintained dictionary for the Swiss German language
-- [Palitra App](https://palitra.app/) is a search-based color palette generator
-
-**Podcasts Featuring Svelte**
-
-- [Svelte Radio](https://www.svelteradio.com/episodes/svelte-summit-is-coming-up-and-svelte-is-growing) dives into the tech behind the recently released Svelte Summit website and a bunch of other fun stuff!
-- [PodRocket](https://podrocket.logrocket.com/rich-harris), LogRocket's podcast, talks Svelte with Rich Harris
-- [PodRocket also dove deep](https://podrocket.logrocket.com/elderjs) into Elder.js with Nick Reese
-- [Web Rush](https://webrush.io/episodes/episode-153-single-page-application-vs-multi-page-application-with-rich-harris) and Rich Harris talk about the differences between a SPA and MPA, what role the server rendering plays, what client side hydration is, and the state of modern tooling for developing an SPA or MPA
-- [devtools.fm](https://devtools.fm/episode/15) talks with Rich Harris about developing engaging data visualizations and building the tools of tomorrow
-
-**Educational Content**
-
-- [Have Single-Page Apps Ruined the Web?](https://www.youtube.com/watch?v=860d8usGC0o) Rich Harris answers the controversial question at this year's Jamstack Conf
-- [Svelte vs SvelteKit - What's The Difference?](https://www.youtube.com/watch?v=IKhtnhQKjxQ) LevelUpTuts provides a quick guide to explaining the relationship between the two projects. You can check out the rest of Scott Tolinski's guides to Svelte in his new series, ["Weekly Svelte"](https://www.youtube.com/playlist?list=PLLnpHn493BHF-Onm1MQgKC1psvW-rJuYi)
-- [WebJeda's SvelteKit Hooks](https://www.youtube.com/watch?v=RarufLoEL08&list=PLm_Qt4aKpfKgzcTiMT2cgWGBDBIPK06DQ) series continues this month with Part 3 - Cookie Session Authentication
-- [Writing Context Aware Styles in a Svelte App](https://www.ryanfiller.com/blog/tips/svelte-contex-aware-styles) is a guide to writing self-contained components that are able to dynamically adapt to their parents
-- [A Beginner’s Guide to SvelteKit](https://www.sitepoint.com/a-beginners-guide-to-sveltekit/) takes a beginner-friendly look at both Svelte and SvelteKit and build out a simple web app showing profile pages of imaginary users
-- [Svelte vs React: Ending the Debate](https://massivepixel.io/blog/svelte-vs-react/) is a historical take on the age-old argument
-- [Svelte Snacks | Custom Events for Modal Actions](https://jeremydayslice.hashnode.dev/svelte-snacks-or-custom-events-for-modal-actions) walks through a solid implementation of Svelte's handy custom event system
-- [What Svelte's accessibility warnings won't tell you](https://geoffrich.net/posts/svelte-a11y-limits/) explains how Svelte's a11y warnings work and why you shouldn't count on them to make your app accessible
-
-**Libraries, Tools & Components**
-
-- [svelte-adapter-azure-swa](https://github.com/geoffrich/svelte-adapter-azure-swa) is an adapter for Svelte apps that creates an Azure Static Web App, using an Azure function for dynamic server rendering
-- [Inlang](https://docs.inlang.dev/getting-started/svelte-kit) is a localization and internationalization toolkit that now supports SvelteKit
-- [svelte-translate-tools](https://github.com/noelmugnier/svelte-translate-tools) extract/generate/compile translation files for your Svelte App at build time
-- [@egjs/svelte-infinitegrid](https://github.com/naver/egjs-infinitegrid/tree/master/packages/svelte-infinitegrid) lets you implement various grids composed of different card elements whose sizes vary
-- [svelte-reactive-css-preprocess](https://github.com/srmullen/svelte-reactive-css-preprocess) makes it easier to update css variable values whenever your component state changes
-- [Sveltegen](https://github.com/snuffyDev/sveltegen) is a CLI for simple and easy creation of actions, components, and routes
-- [svelte-advanced-multistep-form](https://www.npmjs.com/package/svelte-advanced-multistep-form) helps to wrap form elements passing down styles to the component to be rendered, also it presents each form step in a ordered and stylish way
-- [gQuery](https://github.com/leveluptuts/gQuery) is a GraphQL Fetcher & Cache for SvelteKit
-- [date-picker-svelte](https://github.com/probablykasper/date-picker-svelte) is a date and time picker for Svelte
-- [TwelveUI](https://twelveui.readme.io/reference/what-is-twelveui) is a Svelte component library with accessibility built-in
-- [svelte-outclick](https://github.com/babakfp/svelte-outclick/) is a Svelte component that allows you to listen for clicks outside of an element, by providing you an outclick event
-- [svelte-zero-api](https://github.com/ymzuiku/svelte-zero-api) lets you use SvelteKit APIs like client functions - with support for TypeScript
-- [svelte-recaptcha-v2](https://github.com/basaran/svelte-recaptcha-v2) is a Google reCAPTCHA v2 implementation for Svelte SPA, SSR and sveltekit static sites.
-- [Svelte Body](https://github.com/ghostdevv/svelte-body) lets you apply styles to the body in routes - designed to work with SvelteKit and Routify.
-- [svelte-debug-console](https://github.com/basaran/svelte-debug-console) is a debug.js implementation for Svelte SPA, SSR and sveltekit static sites that lets you see your debug statements in the browser.
-- [SVEO](https://github.com/didier/sveo) is a dependency-free approach to declare metadata on SvelteKit pages
-- [@svelte-drama/suspense](https://www.npmjs.com/package/@svelte-drama/suspense) is a Svelte component that implements the core idea of React's `<Suspense>`. Also check out [SWR for Svelte](https://www.npmjs.com/package/@svelte-drama/swr) to make refetching even easier.
-- [sveltekit-adapter-browser-extension](https://github.com/antony/sveltekit-adapter-browser-extension) is an adapter for SvelteKit which turns your app into a cross-platform browser extension
-
-Check out the community site [sveltesociety.dev](https://sveltesociety.dev/templates/) for more tools, templates, adders and adapters from across the Svelte ecosystem.
-
-Looking for more Svelte goodness? Join us on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.com/invite/yy75DKs)!
diff --git a/documentation/blog/2021-12-01-whats-new-in-svelte-december-2021.md b/documentation/blog/2021-12-01-whats-new-in-svelte-december-2021.md
deleted file mode 100644
index 1f70a7c7e7..0000000000
--- a/documentation/blog/2021-12-01-whats-new-in-svelte-december-2021.md
+++ /dev/null
@@ -1,92 +0,0 @@
----
-title: "What's new in Svelte: December 2021"
-description: 'Svelte Summit Fall 2021 Recap, Rich Harris joins Vercel, and Kevin goes full-time on Svelte Society'
-author: Dani Sandoval
-authorURL: https://dreamindani.com
----
-
-With SvelteKit getting more and more stable each day, there's not much to cover in terms of code changes other than bug fixes... So, in this month's newsletter, we'll be covering Svelte Summit Fall 2021!
-
-If you want to dive deep into the last month's worth of bug fixes, check out the [Svelte](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md) and [SvelteKit](https://github.com/sveltejs/kit/blob/master/packages/kit/CHANGELOG.md) changelogs, respectively.
-
-## What happened at Svelte Summit?
-
-If you missed Svelte Summit, you can watch the entire live stream on [YouTube](https://www.youtube.com/watch?v=1Df-9EKvZr0) and catch a recap in the [#svelte-summit channel on Discord](https://discord.gg/YmHcdnhu).
-
-Here are the highlights:
-
-- [Rich Harris](https://twitter.com/rich_harris) took us through a tour of Svelte's history and announced [his move to Vercel](https://vercel.com/blog/vercel-welcomes-rich-harris-creator-of-svelte) - where he will be helping maintain Svelte full-time! ([20:00](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=1200s))
-- [Steph Dietz](https://twitter.com/steph_dietz_) explained how Svelte's simple abstractions makes it easy for beginners and experts alike to learn and use JavaScript - without the boilerplate ([29:00](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=1740s))
-- [Kevin Bridges](https://twitter.com/kevinast) dove deep into Svelte's reactivity logic by visualizing it through `ReflectiveCounter` and showing how to "fine tune" it, as needed. A full "syllabus" for the presentation is available on [Kevin's site](https://wiibridges.com/presentations/ResponsiveSvelte/). ([42:55](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=2575s))
-- [Mateo Morris](https://twitter.com/_mateomorris) launched [Primo](https://primo.af/), an all-in-one SvelteKit CMS to help build and manage static sites ([1:12:34](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=4354s))
-- [Guillermo Rauch](https://vercel.com/about/rauchg) explained Vercel's commitment to Svelte, what it means to have Rich on the team, and what's coming next from the company... ([1:21:54](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=4914s))
-- [Geoff Rich](https://twitter.com/geoffrich_) introduced various ways to modify motion and transitions within Svelte to be more accessible to all users of the web. Slides and a full transcription of the talk are available on [Geoff's site](https://geoffrich.net/posts/svelte-summit-2021/). ([1:32:30](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=5550s))
-- [Dean Fogarty](https://df.id.au/) demoed a number of different use-cases for custom stores - transforming data to and from storage mechanisms within Svelte. Transcript and code is available on [Dean's GitHub](https://github.com/angrytongan/svelte-summit-2021). ([1:43:06](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=6186s))
-- [Kellen Mace](https://twitter.com/kellenmace) shared how we can let content creators keep using WordPress, while leveraging Svelte on the frontend to provide a phenomenal user experience ([1:49:30](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=6570ss))
-- [Ben Holmes](https://twitter.com/bholmesdev) explained the "islands" architecture and how 11ty + [Slinkity](https://slinkity.dev/) can bring these islands to any HTML template ([2:17:15](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=8235s))
-- [Scott Tolinski](https://twitter.com/stolinski) shared the lessons learned from rewriting the React-based LevelUpTutorials in Svelte and "found developer bliss" ([3:16:35](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=11795s))
-- [Svelte Sirens](https://sveltesirens.dev) was announced as the new Svelte community for women, non-binary and allies. Their first event was on November 29th - all future events can be found on [the Svelte Sirens website](https://sveltesirens.dev/events) ([3:50:45](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=13845s))
-- [Rich Harris](https://twitter.com/rich_harris) discussed creating libraries with SvelteKit, better ways to link packages when developing, and how SvelteKit helps with modern JavaScript library development ([3:56:00](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=14160s))
-- [Ken Kunz](https://twitter.com/kennethkunz) explained how finite state machines (and the svelte-fsm library) can make managing Svelte component states more... manageable. Examples from the talk are available on [Ken's GitHub](https://github.com/kenkunz/svelte-fsm/wiki/Examples). ([4:07:18](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=14838s))
-- [Austin Crim](https://twitter.com/crim_codes) connected learning to code on the web to learning how to play an instrument. By giving learners early wins and introducing the fundamentals through real-world apps, learning Svelte (and the fundamentals underneath) doesn't have to be a chore ([4:21:50](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=15710s))
-- [Jesse Skinner](https://twitter.com/JesseSkinner) brought our legacy apps into the future by explaining how to use (and reuse) Svelte components within React (and even jQuery!) projects ([4:32:30](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=16350s))
-- [Jim Fisk](https://twitter.com/jimafisk) and [Stephanie Luz](https://stephanie-luz.medium.com/) introduced [Plenti](https://plenti.co/) and its theming tools to make building new Svelte sites much faster ([4:59:00](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=17940s))
-- [Evyatar Alush](https://twitter.com/evyataral) helped us all make (and maintain) better forms using a powerful validation library called [Vest](https://github.com/ealush/vest) ([5:08:55](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=18535s))
-- Dominik G. presented a fresh take on icon libraries - one that reduces the bundle size of applications and opens up the entire iconify library for use in any Svelte app ([5:30:04](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=19804s))
-
-Thanks to [Kevin](https://twitter.com/kevmodrome) and all the Svelte Society volunteers for pulling together such an amazing event! Excitingly, [Kevin announced](https://twitter.com/kevmodrome/status/1463151477174714373) after the event that he will now be working full-time on Svelte Society! You can check out all the talks, broken up into individual videos for convenience, in [this Svelte Society YouTube Playlist](https://www.youtube.com/playlist?list=PL8bMgX1kyZTg2bI9IOMgfBc8lrU3v2itt).
-
-If you have feedback on the Svelte Summit, Kev is [looking for feedback on the Svelte subreddit](https://www.reddit.com/r/sveltejs/comments/qzgo3k/svelte_summit_feedback/) 👀
-
----
-
-## Community Showcase
-
-**Apps & Sites**
-
-- [pixeldrain](https://github.com/Fornaxian/pixeldrain_web) is a free-to-use file sharing platform
-- [LifeHash](http://lifehash.info/) generates beautiful visual hashes from Blockchain Commons
-- [simple-cloud-music](https://github.com/dufu1991/simple-cloud-music) is a lightweight third-party NetEase cloud music player for modern browsers (likely only works on Chrome)
-- [palette.rocks](https://palette.rocks/) is a color palette generator with contrast-checking built-in
-- [Kadium](https://github.com/probablykasper/kadium) is an app for staying on top of YouTube channel uploads
-- [Multi-Monitor Calculator](https://multimonitorcalculator.com/) is a tool for planning your multi-monitor setup
-- [Your Home](https://yourhome.fb.com/) is an interactive overview of Facebook's privacy settings
-- [Svelte Crush](https://svelte-crush.netlify.app/) is a Candy Crush style match-3 game
-- [100.000 Corona deaths in Germany](https://twitter.com/h_i_g_s_c_h/status/1463767113563353089?s=20) is a visualization made for Spiegel Gesundheit
-
-**Looking for a Svelte project to work on? Interested in helping make Svelte's presence on the web better?** Check out [the list of open issues](https://github.com/svelte-society/sveltesociety-2021/issues) if you'd like to contribute to the Svelte Society rewrite in SvelteKit.
-
-**Videos, Blogs and Podcasts**
-
-- [How To Make and Publish a Svelte Library](https://www.youtube.com/watch?v=_TymiadmPrc)
-- [SvelteKit is now fully supported in WebContainers](https://blog.stackblitz.com/posts/sveltekit-supported-in-webcontainers/)
-- [Introducing Svelte, and Comparing Svelte with React and Vue](https://joshcollinsworth.com/blog/introducing-svelte-comparing-with-react-vue)
-- [Testing a Svelte app with Jest](https://www.roboleary.net/2021/11/18/svelte-app-testing-jest.html)
-- [How to create a toast notification library package with SvelteKit](https://www.sarcevic.dev/blog/toasting-in-svelte)
-- [Svelte training: Here you can learn Svelte](https://sustainablewww.org/principles/svelte-training-here-you-can-learn-svelte)
-- [Introduction to Svelte Actions](https://blog.logrocket.com/svelte-actions-introduction/)
-- [Enjoy making DAPPs using SvelteWeb3](https://chiuzon.medium.com/enjoy-making-dapps-using-svelteweb3-b78dfea1d902)
-- [Svelte creator: Web development should be more fun](https://www.infoworld.com/article/3639521/svelte-creator-web-development-should-be-more-fun.html)
-- [Svelte Radio: Rich Harris is now working full-time on Svelte 🤯](https://share.transistor.fm/s/d9b04961)
-- [Web Rush: Svelte and Elder.js with Nick Reese](https://webrush.io/episodes/episode-158-svelte-and-elderjs-with-nick-reese)
-- [Building SvelteKit applications with Serverless Redis](https://blog.upstash.com/svelte-with-serverless-redis)
-
-**Libraries, Tools & Components**
-
-- [svelte-cubed](https://github.com/Rich-Harris/svelte-cubed) is a Three.js component library for Svelte - created by Rich Harris for his presentation at Svelte Summit Fall 2021
-- [svelte-fsm](https://github.com/kenkunz/svelte-fsm) is a tiny, simple, expressive, pragmatic Finite State Machine (FSM) library, optimized for Svelte
-- [bromb](https://github.com/samuelstroschein/bromb) is a feedback widget for websites/web apps that is small and easy to integration/self-host
-- [Spaper](https://github.com/Oli8/spaper) is a set of PaperCSS components for Svelte
-- [svelte-intl-precompile](https://github.com/cibernox/svelte-intl-precompile) is an i18n library for Svelte that analyzes and compiles your translations at build time
-- [svelte-preprocess-svg](https://github.com/svitejs/svelte-preprocess-svg) automatically optimizes inline svg in Svelte components for better performance and reduced file size
-- [svelte-subcomponent-preprocessor](https://github.com/srmullen/svelte-subcomponent-preprocessor) allows you to write more than one component within a svelte file
-- [svelte-pdfjs](https://github.com/gtm-nayan/svelte-pdfjs) is a crude implementation of a Svelte PDF viewer component
-- [svelte-inview](https://github.com/maciekgrzybek/svelte-inview) is a Svelte action that monitors an element enters or leaves the viewport/parent element
-- [sveltekit-adapter-wordpress-shortcode](https://github.com/tomatrow/sveltekit-adapter-wordpress-shortcode) is an adapter for SvelteKit which turns your app into a wordpress shortcode
-- [svelte-websocket-store](https://github.com/arlac77/svelte-websocket-store) is a Svelte store with a websocket backend
-- [Svelte Auto Form](https://github.com/leveluptuts/auto-form) is a fast and fun form library focused on ease of use, rather than flexibility.
-- [set-focus](https://www.npmjs.com/package/@svackages/set-focus) is an Svelte action that will set focus on `<a>` or `<button>` elements as soon as they mount - useful for some experiences and testing
-
-Got an idea for SvelteKit? Check out the new [GitHub Discussions](https://github.com/sveltejs/kit/discussions) in the Svelte repo. You can also join us on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.com/invite/yy75DKs).
-
-See you next ~~month~~ year!
diff --git a/documentation/blog/2022-01-01-whats-new-in-svelte-january-2022.md b/documentation/blog/2022-01-01-whats-new-in-svelte-january-2022.md
deleted file mode 100644
index 1e021fa54b..0000000000
--- a/documentation/blog/2022-01-01-whats-new-in-svelte-january-2022.md
+++ /dev/null
@@ -1,81 +0,0 @@
----
-title: "What's new in Svelte: January 2022"
-description: 'Faster builds with SvelteKit and a much anticipated REPL feature'
-author: Dani Sandoval
-authorURL: https://dreamindani.com
----
-
-Happy new year, Svelte Community! Lots to share this month across Svelte, SvelteKit, Language Tools and the Showcase. Thanks to everyone who made 2021 a great year to use Svelte. Looking forward to the next one 🚀
-
-## What's new in SvelteKit
-
-- `@sveltejs/adapter-static` for SvelteKit now has a `precompress` option to make brotli compression of assets and pages easier to do out of the box ([#3079](https://github.com/sveltejs/kit/pull/3079))
-- Concurrency mode in SvelteKit will now prerender pages in parallel ([#3120](https://github.com/sveltejs/kit/pull/3120)). It is enabled by default in `1.0.0-next.205` and later
-- CSS is now automatically included before JS for improved page performance ([d13efe](https://github.com/sveltejs/kit/commit/d138efe21692f5925f1e89afc0a33f42d6a1a711))
-- A new config option adds the ability to disable service worker registration to do your own custom registration ([#2988](https://github.com/sveltejs/kit/pull/2988))
-- SSR route-splitting is here - breaking monolithic builds into smaller pieces for improved startup and routing performance ([#2931](https://github.com/sveltejs/kit/pull/2931))
-- `request.origin/path/query` is now `request.url` - simplifying the config and page `load` functions ([#3126](https://github.com/sveltejs/kit/pull/3126))
-- After the [update to Vite 2.7](https://github.com/sveltejs/kit/pull/3018), SvelteKit users are [reporting significant performance improvements](https://www.reddit.com/r/sveltejs/comments/rljhfc/sveltekit_massive_compiler_improvement_by/) and loading third-parties libraries in SSR has also been greatly improved
-- SvelteKit server will now automatically restart when the config files is changed ([vite-plugin-svelte#237](https://github.com/sveltejs/vite-plugin-svelte/pull/237))
-
-## Other new bits from `svelte/*`
-
-- [Svelte 3.44.3](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md#3443) is out with a few bug fixes in the binding and loop code
-- Svelte Language Tools has introduced support for the then/catch shorthands from Svelte 3.41 and TypeScript's "go to" functionality ([105.8.0 and later](https://github.com/sveltejs/language-tools/releases/tag/extensions-105.8.0))
-- The Svelte REPL got a nice upgrade as well - letting you delete saved REPLs. Try it out by logging in at [svelte.dev/apps](https://svelte.dev/apps)
-
----
-
-## Community Showcase
-
-**Apps & Sites**
-
-- [Discover Twitter Spaces](https://github.com/navneetsharmaui/discover-twitter-spaces) is a tool that helps you find the Twitter Spaces
-- [Modern Fluid Typography Editor](https://github.com/codeAdrian/modern-fluid-typography-editor) helps create beautiful fluid typography using CSS clamp
-- [Unnwhiteboard](https://github.com/AviKKi/unnwhiteboard) is a job board for companies (or teams) that don't do "whiteboard" interviews
-- [Secret Santa](https://gitlab.com/arturoguzman/secret-santa-sveltekit) is a gift giving coordination app developed with easiness in mind
-- [LogSnag](https://logsnag.com/) notifies you of your projects' events and provides you with a timeline to keep track of anything important that happens
-- [Version 0.2 of Tangent](http://tangentnotes.com/Download), a Svelte-based note writing app, is now in beta
-- [Intl Explorer](https://github.com/jesperorb/intl-explorer) is a tool for viewing output for all possible formatters for Intl
-
-A lot of work this month has gone into migrating the Svelte main website and Svelte REPL to live in the https://github.com/sveltejs/sites repository - including a brand new homepage for [svelte.dev](https://svelte.dev/). Thanks to all the contributors who made this possible!
-
-If you're looking for a fun SvelteKit project to work on, [you can contribute to the Svelte Society site rewrite](https://github.com/svelte-society/sveltesociety-2021/issues) 💅
-
-**Learning and Listening**
-
-_To Read_
-
-- [Mutating Query Params in SvelteKit Without Page Reloads or Navigations](https://dev.to/mohamadharith/mutating-query-params-in-sveltekit-without-page-reloads-or-navigations-2i2b) by Mohamad Harith
-- [Svelte for Reactaholics : A guide for React developers](https://www.100ms.live/blog/svelte-guide-for-react-developers) by Puru Vijay
-- [Svelte's lifecycle methods can be used anywhere](https://geoffrich.net/posts/svelte-lifecycle-examples/) and [The many meanings of $ in Svelte](https://geoffrich.net/posts/svelte-$-meanings/) by Geoff Rich
-- [Vercel and Svelte: A Perfect Match for Web Developers](https://thenewstack.io/vercel-and-svelte-a-perfect-match-for-web-developers/) by Darryl K. Taft
-- [User-defined TailwindCSS Color Scheme with Svelte Stores](https://blog.dayslice.io/user-defined-tailwindcss-color-scheme-with-svelte-stores-ad80ca2cf038) by jeremy zaborowski
-- [Ionic 6 + Svelte 🚀](https://medium.com/@raymondboswel/ionic-6-svelte-ae904caa82df) by Raymond Boswel
-- [What happened in #Svelte language tools this year](https://twitter.com/dummdidumm_/status/1474158105395179525?t=ytj2K2Q52iD5-lNyLnQaAQ&s=19) by Simon H
-
-_To Watch_
-
-- [The Future of Svelte (Interview with Rich Harris)](https://www.youtube.com/watch?v=uQntFkK8Z54) by Lee Robinson, Director of Developer Relations at Vercel
-- [Svelte is becoming the go-to framework](https://www.youtube.com/watch?v=fo6BKY2xR2w&t=1834s) for Obsidian plugin developers
-- [Sveltekit WordPress Headless Blog](https://www.youtube.com/watch?v=c0UDVgjPxFw) by WebJeda
-- [Getting started with SvelteKit](https://www.youtube.com/watch?v=i2suPKMPUFA) by Lihau Tan
-- [Deploy a full-stack SvelteKit app on Cloudflare Pages](https://www.youtube.com/watch?v=Wc1_U6Dy5Tw) by 1nf
-
-_To Listen To_
-
-- [Syntax podcast: How To Do Things In Svelte](https://podcasts.apple.com/ca/podcast/how-to-do-things-in-svelte/id1253186678?i=1000544796072)
-- [JS Party #205: So much Sveltey goodness (w/ Rich Harris)](https://changelog.com/jsparty/205)
-
-**Libraries, Tools & Components**
-
-- [svelte-headlessui](https://github.com/rgossiaux/svelte-headlessui) is an unofficial, complete Svelte port of the Headless UI component library
-- [svelte-forms v2](https://chainlist.github.io/svelte-forms/) has been released - the author is [looking for feedback](https://www.reddit.com/r/sveltejs/comments/r6354j/svelteforms_v2_has_been_released/)
-- [Percival](https://github.com/ekzhang/percival) is a declarative data query and visualization language
-- [Svelte FlatList](https://github.com/snuffyDev/svelte-flatlist) is a mobile-friendly, simple, and customizable draggable menu
-- [svelte-keyed](https://github.com/bryanmylee/svelte-keyed) is a writable derived store for objects and arrays
-- [Svemix](https://github.com/svemix/svemix) is Remix for Svelte - providing server scripts inside your Svelte components/routes, which will be transformed into endpoints
-
-Want to add something to the showcase? Need help bringing your next idea to life in Svelte? Join us on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.com/invite/yy75DKs).
-
-See ya next month!
diff --git a/documentation/blog/2022-01-13-accelerating-sveltes-development.md b/documentation/blog/2022-01-13-accelerating-sveltes-development.md
deleted file mode 100644
index db94a5ca2f..0000000000
--- a/documentation/blog/2022-01-13-accelerating-sveltes-development.md
+++ /dev/null
@@ -1,69 +0,0 @@
----
-title: "Accelerating Svelte's Development"
-description: 'Scaling the team, building partnerships, and growing the community'
-author: Ben McCann
-authorURL: https://www.benmccann.com/
----
-
-[Svelte](/) is a frontend framework for building fast reactive web apps with less code. If you’re new here, [check out the tutorial](/tutorial) or [examples](/examples) to get a feel for it.
-
-Svelte was [launched 5 years ago](https://news.ycombinator.com/item?id=13069841) and has [come a long way in the time since](https://www.youtube.com/watch?v=YeY5M29-WcY). In 2021, as usage more than doubled, it was voted the [most loved](https://insights.stackoverflow.com/survey/2021#section-most-loved-dreaded-and-wanted-web-frameworks) framework with the [most satisfied](https://2020.stateofjs.com/en-US/technologies/front-end-frameworks/) developers in a pair of surveys. Alongside high-profile companies like The New York Times, Apple, Spotify, Square, Rakuten, Bloomberg, Reuters, Ikea, Brave, and countless others, Svelte is used to power everything from hobby projects to embedded systems interfaces.
-
-To help developers build fully-featured applications with Svelte without worrying about the hard parts, we’ve been developing the [SvelteKit](https://kit.svelte.dev/) application framework. We’re moving quickly towards a [stable 1.0 release](https://github.com/sveltejs/kit/issues?q=is%3Aopen+is%3Aissue+milestone%3A1.0) with the help of early adopters who have already downloaded SvelteKit almost one million times.
-
-## Scaling the team
-
-Rich Harris, Svelte’s creator, has [joined Vercel to work on Svelte full-time](https://vercel.com/blog/vercel-welcomes-rich-harris-creator-of-svelte). We’re incredibly excited to have Rich’s level of involvement in Svelte increase even more and have him steward Svelte into the future.
-
-Svelte has been made possible by the work of a large, dedicated community. Svelte has added numerous core maintainers over the course of the pandemic, including three this past week. In alphabetical order:
-
-- [benmccann](https://github.com/benmccann) - primary maintainer of SvelteKit for much of 2021
-- [bluwy](https://github.com/bluwy) - major contributor across SvelteKit, vite-plugin-svelte, and Vite
-- [dominikg](https://github.com/dominikg) - creator of vite-plugin-svelte
-- [dummdidumm](https://github.com/dummdidumm) - maintainer of language-tools, which includes the VS Code extension and `svelte-check`
-- [ehrencrona](https://github.com/ehrencrona) - contributor to SvelteKit and uses Svelte at work
-- [geoffrich](https://github.com/geoffrich) - has driven efforts to improve the accessibility of the Svelte site and documentation
-- [GrygrFlzr](https://github.com/GrygrFlzr) - holds a unique status as a maintainer of both SvelteKit and Vite
-- [Halfnelson](https://github.com/Halfnelson) - creator of svelte-native
-- [ignatiusmb](https://github.com/ignatiusmb) - regular SvelteKit contributor especially to TypeScript support
-- [jasonlyu123](https://github.com/jasonlyu123) - maintainer of language-tools, which includes the VS Code extension and `svelte-check`
-- [kaisermann](https://github.com/kaisermann) - creator of svelte-preprocess
-- [RedHatter](https://github.com/RedHatter) - creator of Svelte Devtools
-- [rixo](https://github.com/rixo) - creator of svelte-hmr
-
-Svelte began accepting donations via [OpenCollective](https://opencollective.com/svelte) last year and has now had over $60,000 donated to-date with [Cohere](https://cohere.ai/) giving $10,000 just today. We hope that these funds will allow existing maintainers to spend more time on Svelte or that the funds could otherwise support Svelte on a part-time or contract basis, which we will continue to investigate.
-
-## Partnerships
-
-Multiple major cloud vendors are stepping up to make deploying SvelteKit applications anywhere a seamless experience. As a result of Rich’s new job, SvelteKit will soon run on [Vercel Edge Functions](https://vercel.com/features/edge-functions). Netlify has made [big contributions](https://github.com/sveltejs/kit/pull/2113) to the SvelteKit Netlify adapter and also [updated](https://github.com/dependents/node-precinct/pull/88) their zip-it-and-ship-it tool to better support SvelteKit. The recent [Cloudflare Pages launch](https://blog.cloudflare.com/cloudflare-pages-goes-full-stack/) featured SvelteKit as a day one partner via a [new adapter](https://github.com/sveltejs/kit/tree/master/packages/adapter-cloudflare) written by Svelte maintainers [pngwn](https://twitter.com/evilpingwin) and [lukeed](https://twitter.com/lukeed05), the latter of whom joined Cloudflare in 2021. [Begin](https://begin.com) created a [SvelteKit adapter](https://github.com/architect/sveltekit-adapter) for [Architect](https://arc.codes) apps. And community members have [contributed adapters](https://sveltesociety.dev/components#adapters) for environments such as Firebase and Deno, showcasing SvelteKit’s ability to run wherever JavaScript does.
-
-We’ve also been working closely with the [Vite](https://vitejs.dev) team to iron out SSR issues uncovered by SvelteKit users. Vite is the build tool that makes the SvelteKit developer experience possible, and thanks to hard work from a contributor base that includes representatives of multiple frameworks, recent releases have solved almost all the issues we’ve been tracking as SvelteKit 1.0 release blockers.
-
-## A growing community
-
-[SvelteSociety](https://sveltesociety.dev/) just hosted the [4th Svelte Summit](https://sveltesummit.com/) — [read a summary here](https://svelte.dev/blog/whats-new-in-svelte-december-2021#what-happened-at-svelte-summit) — and Kevin Åberg Kultalahti is [going full-time to lead SvelteSociety](https://twitter.com/kevmodrome/status/1463151477174714373). In addition to hosting Svelte Summit, Kevin and SvelteSociety host and manage the [Svelte Radio podcast](https://www.svelteradio.com/), the [SvelteSociety YouTube channel](https://www.youtube.com/SvelteSociety), and the [Svelte subreddit](https://www.reddit.com/r/sveltejs). SvelteSociety has become the home of all things related to the Svelte community, with the sveltejs/community and sveltejs/integrations repos being retired in favor of [sveltesociety.dev](https://sveltesociety.dev/), which has been redesigned and rebuilt in SvelteKit. In October [Brittney Postma](https://github.com/brittneypostma), [Willow aka GHOST](https://ghostdev.xyz), [Steph Dietz](https://github.com/StephDietz), and [Gen Ashley](https://twitter.com/coderinheels) founded [Svelte Sirens](https://sveltesirens.dev/), a group for women & non-binary community members and their allies.
-
-Hundreds of developers join the Svelte Discord every week to chat about Svelte. You may have noticed that, as of recently, some members of the server have purple names. These are people with the ambassadors role, which was created to recognise some of the community’s most valued members and help manage the demands of a rapidly growing community. Svelte ambassadors are people who are well known for their helpfulness and contributions and for upholding Svelte’s reputation as a friendly, welcoming community, and we’re deeply grateful for their involvement. The initial ambassadors in alphabetical order are:
-
-- [babichjacob](https://github.com/babichjacob)
-- [brady fractal](https://github.com/FractalHQ)
-- [brittney postma](https://github.com/brittneypostma)
-- [d3sandoval](https://github.com/d3sandoval)
-- [geoffrich](https://github.com/geoffrich)
-- [kev](https://github.com/kevmodrome)
-- [puru](https://github.com/PuruVJ)
-- [rainlife](https://github.com/stephane-vanraes)
-- [rmunn](https://github.com/rmunn)
-- [stolinski](https://github.com/stolinski)
-- [swyx](https://github.com/sw-yx)
-- [theo](https://github.com/theo-steiner)
-
-We’re also testing out [GitHub discussions on SvelteKit](https://github.com/sveltejs/kit/discussions) and may bring this to other repos in the Svelte organization if feedback is positive.
-
-## Things to watch
-
-SvelteKit is continuing to progress towards 1.0 and, in just the past week, we have added major features like [improved client-only rendering](https://github.com/sveltejs/kit/pull/2804), [routing hooks](https://github.com/sveltejs/kit/pull/3293), and [the ability to pass data from child components to layouts](https://github.com/sveltejs/kit/pull/3252) (e.g. to support easier management of `<meta>` tags). We're currently working on a number of other high priority items such as discussing API designs for features like streaming and file uploads and contributing to the upcoming Vite 2.8 release.
-
-While a lot of effort has been going into SvelteKit recently, we continue to progress the entire ecosystem. [Svelte 3.46.0](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md#3460) was one of our biggest releases in awhile with two major new features added: [constants in markup](https://github.com/sveltejs/rfcs/blob/master/text/0007-markup-constants.md) and [style directives](https://github.com/sveltejs/rfcs/blob/master/text/0008-style-directives.md).
-
-Svelte and SvelteKit’s trajectories have been accelerated by the numerous investments above and there will be many more updates to come — subscribe to the [blog](/blog) via [RSS](https://svelte.dev/blog/rss.xml) or check monthly to be the first to get them.
diff --git a/documentation/blog/2022-02-01-whats-new-in-svelte-february-2022.md b/documentation/blog/2022-02-01-whats-new-in-svelte-february-2022.md
deleted file mode 100644
index ab11a2fac1..0000000000
--- a/documentation/blog/2022-02-01-whats-new-in-svelte-february-2022.md
+++ /dev/null
@@ -1,114 +0,0 @@
----
-title: "What's new in Svelte: February 2022"
-description: 'Rapid-fire releases across Svelte, SvelteKit and the community'
-author: Dani Sandoval
-authorURL: https://dreamindani.com
----
-
-Happy February, everyone! Over the last month or so, we've seen Svelte and SvelteKit [develop at rapid speed](accelerating-sveltes-development), new community rules across the [Reddit](https://www.reddit.com/r/sveltejs/comments/s9n8ou/new_rules/), [GitHub](https://github.com/sveltejs/community/blob/main/CODE_OF_CONDUCT.md) and [Discord](https://discord.com/channels/457912077277855764/831611707667382303/935264550436102315), and quite a few amazing apps, tutorials and libraries.
-
-Let's take a look...
-
-## Highlights from the Svelte changelog
-
-- **3.45.0** brought a [new a11y warning `a11y-no-redundant-roles`](https://svelte.dev/docs#accessibility-warnings-a11y-no-redundant-roles), destructuring and caching fixes
-- **3.46.0** added the much requested [`{@const}` tag](https://svelte.dev/docs#template-syntax-const) and [`style:` directive](https://svelte.dev/docs#template-syntax-element-directives-style-property)
-- Check out **3.46.1 - 3.46.3** for fixes to the `{@const}` tag and `style:` directive, along with a number of fixes to animations
-- [AST output is now available in the Svelte REPL](https://svelte.dev/repl/hello-world)
-
-## What's new in SvelteKit
-
-- `inlineStyleThreshold` allows you to specify where inline stylesheets are inserted into the page ([Docs](https://kit.svelte.dev/docs/configuration#inlinestylethreshold), [#2620](https://github.com/sveltejs/kit/pull/2620))
-- `beforeNavigate`/`afterNavigate` lifecycle functions lets you add functionality before or after a page navigation ([Docs](https://kit.svelte.dev/docs/modules#$app-navigation), [#3293](https://github.com/sveltejs/kit/pull/3293))
-- Platform context can now be passed from adapters ([Docs](https://kit.svelte.dev/docs/adapters#supported-environments-platform-specific-context), [#3429](https://github.com/sveltejs/kit/pull/3429))
-- Hooks now have an `ssr` parameter in `resolve` to make it easier to skip SSR, when needed ([Docs](https://kit.svelte.dev/docs/hooks#handle), [#2804](https://github.com/sveltejs/kit/pull/2804))
-- `$page.stuff` provides a mechanism for pages to pass data 'upward' to layouts ([Docs](https://kit.svelte.dev/docs/loading#input-stuff), [#3252](https://github.com/sveltejs/kit/pull/3252))
-- Fallthrough routes let you specify where to route when an route can't be loaded ([Docs](https://kit.svelte.dev/docs/routing#advanced-routing-fallthrough-routes), [#3217](https://github.com/sveltejs/kit/pull/3217))
-
-**New configs**
-
-- Content Security Policy (CSP) is now supported for increased security when using inline javascript or stylesheets ([Docs](https://kit.svelte.dev/docs/configuration#csp), [#3499](https://github.com/sveltejs/kit/pull/3499))
-- `kit.routes` config allows you to customise public/private modules during build ([Docs](https://kit.svelte.dev/docs/configuration#routes), [#3576](https://github.com/sveltejs/kit/pull/3576))
-- `prerender.createIndexFiles` config lets you prerender index.html files as their subfolder's name ([Docs](https://kit.svelte.dev/docs/configuration#prerender), [#2632](https://github.com/sveltejs/kit/pull/2632))
-- HTTP methods can now be overridden using `kit.methodOverride` ([Docs](https://kit.svelte.dev/docs/routing#endpoints-http-method-overrides), [#2989](https://github.com/sveltejs/kit/pull/2989))
-
-**Config changes**
-
-- `config.kit.hydrate` and `config.kit.router` are now nested under `config.kit.browser` ([Docs](https://kit.svelte.dev/docs/configuration#browser), [3578](https://github.com/sveltejs/kit/pull/3578))
-
-**Breaking change**
-
-- use `Request` and `Response` objects in endpoints and hooks ([#3384](https://github.com/sveltejs/kit/pull/3384))
-
----
-
-## Community Showcase
-
-**Apps & Sites**
-
-- [timb(re)](https://paullj.github.io/timb) is a live music programming environment
-- [Music for Programming](https://musicforprogramming.net/latest/) is a series of mixes intended for listening while `${task}` to focus the brain and inspire the mind
-- [Team Tale](https://teamtale.app/) allows two authors to write the same story in a tag-team sort of fashion
-- [Puzzlez](https://www.puzzlez.io/) is an online place to play Sudoku and Wordle
-- [Closed Caption Creator](https://www.closedcaptioncreator.com/) makes it easy to add subtitles to your video on Windows, Mac and Google Chrome
-- [SC3Lab](https://sc3-lab.netlify.app/) is a code generator for experimenting with svelte-cubed and three.js
-- [Donkeytype](https://github.com/0ql/Donkeytype) is a minimalistic and lightweight typingtest inspired by Monkeytype.
-- [Above](https://above.silas.pro/) is a visual routine timer built for the ADHD/autistic mind
-- [base.report](https://base.report/) is a modern research platform for serious investors
-- [String](https://string.kampsy.xyz/) turns your Phone into a secure portable audio recorder, making it easy to capture and share personal notes, family moments, classroom lectures, and more
-- [The Raytracer Challenge REPL](https://github.com/jakobwesthoff/the_raytracer_challenge_repl) provides a live editor interface to configure a raytraced scene and render it live in any modern browser
-- [awesome-svelte-kit](https://github.com/janosh/awesome-svelte-kit) is a list of awesome examples of SvelteKit in the wild
-- [Map Projection Explorer](https://www.geo-projections.com/) lets you explore different map projections and explains their differences
-- [Rubiks](https://github.com/MeharGaur/rubiks) is a Rubik's Cube simulator
-- [Pianisto](https://pianisto.net/) is a working piano made with SVG, ToneJS and a lot of patience
-
-Want to work on a SvelteKit site with others, [try contributing to the Svelte Society site](https://github.com/svelte-society/sveltesociety-2021/issues)!
-
-**Learning and Listening**
-
-_To Read_
-
-- [Accelerating Svelte's Development](https://svelte.dev/blog/accelerating-sveltes-development) by Ben McCann
-- [Storybook for Vite](https://storybook.js.org/blog/storybook-for-vite/)
-- [Let's learn SvelteKit by building a static Markdown blog from scratch](https://joshcollinsworth.com/blog/build-static-sveltekit-markdown-blog) by Josh Collinsworth
-- [Building an iOS app with Svelte, Capacitor and Firebase](https://harryherskowitz.com/2022/01/05/tapedrop-app.html) by Harry Herskowitz
-- [Mutating Query Params in SvelteKit Without Page Reloads or Navigations](https://dev.to/mohamadharith/mutating-query-params-in-sveltekit-without-page-reloads-or-navigations-2i2b) and [Workaround for Bubbling Custom Events in Svelte](https://dev.to/mohamadharith/workaround-for-bubbling-custom-events-in-svelte-3khk) by Mohamad Harith
-- [How to build a full stack serverless application with Svelte and GraphQL](https://dev.to/shadid12/how-to-build-a-full-stack-serverless-application-with-svelte-graphql-and-fauna-5427) by Shadid Haque
-- [How to Deploy SvelteKit Apps to GitHub Pages](https://sveltesaas.com/articles/sveltekit-github-pages-guide/)
-- [Creating a dApp with SvelteKit](https://anthonyriley.org/2021/12/31/creating-a-dapp-with-sveltekit/) by Anthony Riley
-- [Comparing Svelte Reactivity Options](https://opendirective.net/2022/01/06/comparing-svelte-reactivity-options/) by Steve Lee
-
-_To Watch_
-
-- [Integrating Storybook with SvelteKit](https://www.youtube.com/watch?v=Kc1ULlfyUcw) and [Integrating FaunaDB with Svelte](https://www.youtube.com/watch?v=zaoLZc76uZM) by the Svelte Sirens
-- [SvelteKit Crash Course Tutorial](https://www.youtube.com/watch?v=9OlLxkaeVvw&list=PL4cUxeGkcC9hpM9ARM59Ve3jqcb54dqiP) by The Net Ninja
-- [Svelte for Beginners](https://www.youtube.com/watch?v=BrkrOjknC_E&list=PLA9WiRZ-IS_ylnMYxIFCsZN6xVVSvLuHk) by Joy of Code
-- [SvelteKit For Beginners | Movie App Tutorial](https://www.youtube.com/watch?v=ydR_M0fw9Xc) by Dev Ed
-- [SvelteKit $app/stores](https://www.youtube.com/watch?v=gBPhr1xbgaQ) by lihautan
-- [Sveltekit - Get All Routes/Pages](https://www.youtube.com/watch?v=Y_NE2R3HuOU) by WebJeda
-
-_To Listen To_
-
-- [New Year, New Svelte!?](https://share.transistor.fm/s/36212cdc) from Svelte Radio
-- [So much Sveltey goodness (featuring Rich Harris)](https://changelog.com/jsparty/205) from JS Party
-- [The Other Side of Tech: A Documentarian Perspective (with Stefan Kingham)](https://codingcat.dev/podcast/2-4-the-other-side-of-tech-a-documentarian-perspective) from Purrfect.dev
-
-**Libraries, Tools & Components**
-
-- [threlte](https://github.com/grischaerbe/threlte) is a three.js component library for Svelte
-- [svelte-formify](https://github.com/nodify-at/svelte-formify) is a library to manage and validate forms that uses decorators to define validations
-- [gQuery](https://github.com/leveluptuts/gQuery) is a GraphQL Fetcher & Cache for Svelte Kit
-- [Unlock-protocol](https://github.com/novum-insights/sveltekit-unlock-firebase) is an integration to help login with MetaMask, Firebase, and paywall customers
-- [AgnosticUI](https://github.com/AgnosticUI/agnosticui) is a set of UI primitives that start their lives in clean HTML and CSS
-- [Vitebook](https://github.com/vitebook/vitebook) is a fast and lightweight alternative to Storybook that's powered by Vite
-- [SwyxKit](https://swyxkit.netlify.app/) is an opinionated blog starter for SvelteKit + Tailwind + Netlify. Refreshed for 2022!
-- [svelte-themes](https://github.com/beynar/svelte-themes) is an abstraction for themes in your SvelteKit app
-- [svelte-transition](https://www.npmjs.com/package/svelte-transition) is a Svelte component to make using CSS class based transitions easier - ideally suited for use with TailwindCSS
-- [Svelte Inview](https://www.npmjs.com/package/svelte-inview) is a Svelte action that monitors an element enters or leaves the viewport/parent element
-- [svelte-inline-compile](https://github.com/DockYard/svelte-inline-compile) is a babel transform that allows for a much more pleasant experience when testing svelte components using Jest and `@testing-library/svelte`
-- [@feltcoop/svelte-mutable-store](https://github.com/feltcoop/svelte-mutable-store) is a Svelte store for mutable values with an `immutable` compiler option
-- [headless-svelte-ui](https://www.npmjs.com/package/@bojalelabs/headless-svelte-ui) is a group of headless components that can be used in building Svelte Apps.
-
-Did we miss something? Need help bringing your next idea to life in Svelte? Join us on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.com/invite/yy75DKs).
-
-See ya next month!
diff --git a/documentation/blog/2022-03-01-whats-new-in-svelte-march-2022.md b/documentation/blog/2022-03-01-whats-new-in-svelte-march-2022.md
deleted file mode 100644
index 477ef1f279..0000000000
--- a/documentation/blog/2022-03-01-whats-new-in-svelte-march-2022.md
+++ /dev/null
@@ -1,89 +0,0 @@
----
-title: "What's new in Svelte: March 2022"
-description: 'Svelte Summit Spring is coming... and page endpoints are here!'
-author: Dani Sandoval
-authorURL: https://dreamindani.com
----
-
-Just announced: [Svelte Summit Spring](https://www.sveltesummit.com/) will be taking place on April 30, 2022. The 5th Virtual Svelte Conference is [looking for speakers](https://www.sveltesummit.com/#speakers) and [sponsors](https://www.sveltesummit.com/sponsors)... so it's time to dust off those proposals!
-
-Also, some long-requested features were added to SvelteKit this month... including page endpoints! This change in how the `load` function works makes it easier to fetch data required for basic pages, redirect from POST responses and handle 404s and other errors.
-
-More on that and other new features and fixes below!
-
-## What's new in SvelteKit
-
-- The docs are now searchable and multipage with type definitions and hoverable code examples - Check them out at [kit.svelte.dev/docs](https://kit.svelte.dev/docs/)
-- Page endpoints significantly decrease the boilerplate needed when loading a page ([Issue](https://github.com/sveltejs/kit/issues/3532), [PR](https://github.com/sveltejs/kit/pull/3679), [Docs](https://kit.svelte.dev/docs/routing#endpoints-page-endpoints))
-- Application versioning and update detection support lets you determine what to do when a route fails to load after an app update ([Issue](https://github.com/sveltejs/kit/issues/87), [PR](https://github.com/sveltejs/kit/pull/3412), [Docs](https://kit.svelte.dev/docs/configuration#version))
-- A new option in `npm init svelte@next` will now set up Playwright automatically for testing ([PR](https://github.com/sveltejs/kit/pull/4056))
-
-**Breaking Changes**
-
-- The `target` option is no longer available. Instead, the `init` script hydrates its `parentNode` ([#3674](https://github.com/sveltejs/kit/pull/3674))
-- App-level types now live in the `App` namespace which allows you to type global types like `Stuff` or `Session` ([#3670](https://github.com/sveltejs/kit/pull/3670))
-- `JSONString` is now `JSONValue` ([#3683](https://github.com/sveltejs/kit/pull/3683))
-- `createIndexFiles` has been removed — it is now controlled by the `trailingSlash` option ([#3801](https://github.com/sveltejs/kit/pull/3801))
-- SvelteKit will no longer exclude root-relative external links from prerendering, which will cause 404s if these URLs are intended to be served by a separate app. Use a custom [`prerender.onError`](https://kit.svelte.dev/docs/configuration#prerender) handler if you need to ignore them ([#3826](https://github.com/sveltejs/kit/pull/3826))
-
-## New in Language Tools
-
-- Accessing properties in markups has been improved in the Svelte language tools ([105.12.0](https://github.com/sveltejs/language-tools/releases/tag/extensions-105.12.0)) - working around some known issues with autocomplete ([#538](https://github.com/sveltejs/language-tools/issues/538) / [#1302](https://github.com/sveltejs/language-tools/issues/1302))
-
----
-
-## Community Showcase
-
-**Apps & Sites**
-
-- [SvelteStorm](https://github.com/open-source-labs/SvelteStorm) is specifically tailored to provide all of the essential tools a Svelte developer needs to build a Svelte application
-- [Supachat](https://github.com/Lleweraf/supachat) is a real-time chat app using Svelte and Supabase
-- [Radicle](https://radicle.xyz/) is a peer-to-peer stack for building software together
-- [The Making Known](https://the-making-known.com/) is a narrated encounter with posters designed by the Nazi German government to communicate with the occupied nations of Belgium, France, and Luxembourg during the Second World War
-- [Svelte Kanban](https://github.com/V-Py/svelte-kanban) is a simple Svelte Kanban made in pure CSS
-- [fngrng](https://github.com/nvlgzr/fngrng) is a typing trainer focussed on accuracy over speed
-- [Generative grids](https://svelte.dev/repl/873988ce33db43f097c0ca69df57b3ac?version=3.46.4) is a neat little generative SVG grid in a Svelte REPL, with randomly generated color palettes and shapes
-- [LifeHash](https://github.com/BlockchainCommons/lifehash.info) is a method of hash visualization that creates beautiful, deterministic icons
-- [TypedWebhook.tools](https://typedwebhook.tools/) is a webhook testing tool for checking payloads, with automatic type generation
-- [Speedskating](https://github.com/spiegelgraphics/speedskating) is an animation widget to show olympic speedskating runs. Built with Svelte, D3 and regl
-- [Web tail](https://github.com/mishankov/web-tail) is a web application to view lines from file on local system or on remote server
-
-Want to work on a SvelteKit site with others? [Contribute to the Svelte Society site](https://github.com/svelte-society/sveltesociety.dev/issues)!
-
-**Learning Resources**
-
-_To Read_
-
-- [Svelte Components as Web Components](https://medium.com/@yesmeno/svelte-components-as-web-components-b400d1253504) by Matias Meno
-- [Simple Svelte Routing with Reactive URLs](https://bjornlu.com/blog/simple-svelte-routing-with-reactive-urls) by Bjorn Lu
-- [Leveling Up my Sveltekit / Sanity.io Blog Content with Featured Videos and Syntax Highlighting](https://ryanboddy.net/level-up-blog) by Ryan Boddy
-- [How This Blog Makes the Most of GitHub](https://paullj.github.io/posts/how-this-blog-makes-the-most-of-github/) by paullj
-- [FullStack JWT Auth: Introducing SvelteKit](https://dev.to/sirneij/fullstack-jwt-introducing-sveltekit-3jcn) by John Idogun
-- [Svelte-Cubed: Adding Motion to 3D Scenes](https://dev.to/alexwarnes/svelte-cubed-adding-motion-to-3d-scenes-51lo) by Alex Warnes
-- [Creating a RSS feed with Sanity and Svelte Kit](https://ghostdev.xyz/posts/creating-a-rss-feed-with-sanity-and-svelte-kit) by GHOST
-- [How to use Svelte's style directive](https://geoffrich.net/posts/style-directives/) by Geoff Rich
-- [SvelteKit and the "Client pattern"](https://retro.cloud/sveltekit-and-the-client-pattern/) by Julian Laubstein
-
-_To Watch_
-
-- [~~Shadow~~ Page Endpoints In Svelte Kit - Weekly Svelte](https://www.youtube.com/watch?v=PoYPZT7ruqI) by LevelUpTuts
-- [Testing For Beginners (Playlist)](https://www.youtube.com/watch?v=y53wwdBr5AI&list=PLA9WiRZ-IS_z7KpqhPELfEMbhAGRwZrzn) by Joy of Code
-- [KitQL - The native SvelteKit library for GraphQL](https://www.youtube.com/watch?v=6pH4fnFN70w) by Jean-Yves COUËT
-
-**Libraries, Tools & Components**
-
-- [gosvelte](https://github.com/sachinbhutani/gosvelte) is a proof of concept to serve Svelte-generated pages on GoLang HTTP server with server data being sent as props to svelte components
-- [svelte-ethers-store](https://www.npmjs.com/package/svelte-ethers-store) uses the ethers.js library as a collection of readable Svelte stores for Svelte, Sapper or SvelteKit
-- [Fluid Grid](https://fluid-grid.com/) is a CSS grid system for future web
-- [stirstack](https://github.com/seeReadCode/stirstack) is an opinionated framework that combines Svelte.js, TailwindCSS, InertiaJS and Ruby on Rails
-- [OATHqr](https://codeberg.org/vhs/oathqr) helps users create security credentials for use with 2FA/MFA and other OATH-enabled apps. Use it to generate scannable QR codes for one-time password authenticator apps such as Aegis or YubiKey
-- [svelte-GridTiles](https://github.com/honeybeeSunshine/svelte-GridTiles) is a drag and drop resizable tiles library built on a responsive grid
-- [Miscellaneous Svelte Components](https://github.com/alex-knyaz/Miscellaneous-svelte-components/) is a collection of miscellaneous svelte components alex-knyaz often use in my projects
-- [walk-and-graph-svelte-components](https://github.com/j2l/walk-and-graph-svelte-components) is a CLI node script to walk svelte and js files, to draw a beautiful JPG of your dependencies aka "imports"
-- [Felte](https://www.npmjs.com/package/felte) is a simple to use form library for Svelte
-- [svelte-use-tooltip](https://github.com/untemps/svelte-use-tooltip) is a Svelte action to display a tooltip
-- [persistent-svelte-store](https://github.com/omer-g/persistent-svelte-store) is a generic persistent writable store, built from scratch in TypeScript according to the Svelte store contract
-
-What'd we miss? Join us on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.com/invite/yy75DKs) to continue the conversation.
-
-See y'all next month!
diff --git a/documentation/blog/2022-04-01-whats-new-in-svelte-april-2022.md b/documentation/blog/2022-04-01-whats-new-in-svelte-april-2022.md
deleted file mode 100644
index de7374f7cd..0000000000
--- a/documentation/blog/2022-04-01-whats-new-in-svelte-april-2022.md
+++ /dev/null
@@ -1,108 +0,0 @@
----
-title: "What's new in Svelte: April 2022"
-description: 'Goodbye fallthrough routes, hello param validators!'
-author: Dani Sandoval
-authorURL: https://dreamindani.com
----
-
-This month, we felt a shift in the way SvelteKit handles page properties. The last holdout of the use-cases that required fallthrough routes, validating parameter properties, has been replaced by a more specific solution.
-
-More on that, and what else is new in Svelte, as we dive in...
-
-## What's new in SvelteKit
-
-- Param matchers allow you to check if a url parameter matches before rendering a page - replacing the need for fallthrough routes for this purpose ([Docs](https://kit.svelte.dev/docs/routing#advanced-routing-matching), [#4334](https://github.com/sveltejs/kit/pull/4334))
-- Explicit redirects can now be handled directly from endpoints ([#4260](https://github.com/sveltejs/kit/pull/4260))
-- `svelte-kit sync` ([#4182](https://github.com/sveltejs/kit/pull/4182)), TypeScript 4.6 ([#4190](https://github.com/sveltejs/kit/pull/4190)) and Vite 2.9 were released - adding non-blocking dependency optimization and experimental CSS source maps in dev mode as well as a number of bug fixes contributed by the SvelteKit team ([#4468](https://github.com/sveltejs/kit/pull/4468))
-
-**New Config Options**
-
-- `outDir` fixes path issues in monorepos and other situations where the desired output directory is outside the project directory ([Docs](https://kit.svelte.dev/docs/configuration#outdir), [#4176](https://github.com/sveltejs/kit/pull/4176))
-- `endpointExtensions` prevents files other than .js and .ts files from being treated as endpoints, unless you specify endpointExtensions ([Docs](https://kit.svelte.dev/docs/configuration#endpointextensions), [#4197](https://github.com/sveltejs/kit/pull/4197))
-- `prerender.default` lets you prerender every page without having to write `export const prerender = true` in every page file ([Docs](https://kit.svelte.dev/docs/configuration#prerender), [#4192](https://github.com/sveltejs/kit/pull/4192))
-
-**Breaking Changes**
-
-- Fallthrough routes have been removed. For migration tips, check out the PR ([#4330](https://github.com/sveltejs/kit/pull/4330))
-- `tabindex="-1"` is only added to `<body>` during navigation ([#4140](https://github.com/sveltejs/kit/pull/4140) and [#4184](https://github.com/sveltejs/kit/pull/4184))
-- Adapters are now required to supply a `getClientAddress` function ([#4289](https://github.com/sveltejs/kit/pull/4289))
-- `InputProps` and `OutputProps` can now be typed separately in generated `Load` ([#4305](https://github.com/sveltejs/kit/pull/4305))
-- The `\$` character is no longer allowed in dynamic parameters ([#4334](https://github.com/sveltejs/kit/pull/4334))
-- `svelte-kit package` has been marked as experimental so changes to it after Kit 1.0 will not be considered breaking ([#4164](https://github.com/sveltejs/kit/pull/4164))
-
-## New across the Svelte ecosystem
-
-- Svelte: Lots of new types for TypeScript and Svelte plugin users - including `style:` directives and Svelte Actions (**3.46.4** and **3.46.5**)
-- Language Tools: Svelte project files are now importable/findable through references without having them imported in a TS file ([105.13.0](https://github.com/sveltejs/language-tools/releases/tag/extensions-105.13.0))
-- Language Tools: Region folding is now supported in html with `<!--#region-->`/`<!--#endregion-->` ([105.13.0](https://github.com/sveltejs/language-tools/releases/tag/extensions-105.13.0))
-
----
-
-## Community Showcase
-
-**Apps & Sites built with Svelte**
-
-- [Launcher](https://launcher.team/) is an open-source app launcher powered by SvelteKit, Prisma, and Tailwind
-- [Paaster](https://paaster.io/) is a secure by default end to end encrypted pastebin built with Svelte, Vite, TypeScript, Python, Starlette, rclone & Docker.
-- [Simple AF Video Converter](https://github.com/berlyozzy/Simple-AF-Video-Converter) is an Electron wrapper around ffmpeg.wasm to make converting videos between formats easier
-- [Streamchaser](https://github.com/streamchaser/streamchaser) seeks to simplify movie, series and documentary search through a centralized entertainment technology platform
-- [Svelte Color Picker](https://github.com/V-Py/svelte-material-color-picker) is a simple color picker made with Svelte
-- [ConcertMash](https://github.com/mcmxcdev/ConcertMash) is a small website that interacts with the Spotify API and generates new playlists based on the upcoming concerts you're attending
-- [Modulus](https://modulus.vision/) is a Design+Code Think Tank conceived with the main mission to evolve design and technology
-- [Multiply](https://www.multiply.us/) is an integrated PR and Social agency moving at the speed of culture
-- [yia!](https://www.yia.co.nz/) is a Young Innovator Award competition in New Zealand
-- [Write to Russia](https://www.writetorussia.org/index) is a community email writing platform to communicate with public `.ru` email addresses
-- [Markdown Playground](https://github.com/Petros-K/markdown-playground) is an online playground dedicated for your markdown experiments.
-- [RatherMisty](https://rathermisty.com/) is a no frills weather app with weather data from Open-Meteo
-- [Minecraft Profile Pic (MCPFP)](https://github.com/MauritsWilke/mcpfp) is a site to generate Minecraft profile pictures with ease
-- [WebGL Fluid Simulation](https://github.com/jpaquim/svelte-webgl-fluid-simulation) is a configurable fluid simulation built with Svelte and WebGL
-- [This @NobelPeaceOslo exhibition](https://twitter.com/perbyhring/status/1504754949791621120) was built using printed graphics, projected motion graphics, particle animations and generative sound design
-
-Itching to contribute to a modern SvelteKit website? [Help build the Svelte Society site](https://github.com/svelte-society/sveltesociety.dev/issues)!
-
-**Learning Resources**
-
-_To Attend_
-
-- [Svelte Summit: Spring](https://www.sveltesummit.com/) will take place on April 30, 2022! Join us for the 5th virtual Svelte conference on [YouTube](https://www.sveltesummit.com/) and Discord 🍾
-
-_To Read_
-
-- [Svelte(Kit) TypeScript Showcase + general TypeScript tips](https://github.com/ivanhofer/sveltekit-typescript-showcase) by Hofer Ivan
-- [Local constants in Svelte with the @const tag](https://geoffrich.net/posts/local-constants/) by Geoff Rich
-- [Design Patterns for Building Reusable Svelte Components](https://render.com/blog/svelte-design-patterns) by Eric Liu
-- [Svelte is better than React](https://labs.hamy.xyz/posts/svelte-is-better-than-react/) by Hamilton Greene
-- [Making Visualizations Literally with Svelte and D3](https://www.connorrothschild.com/post/svelte-and-d3) by Connor Rothschild
-- [Coordinating Multiple Elements with Svelte Deferred Transitions](https://imfeld.dev/writing/svelte_deferred_transitions) by Daniel Imfeld
-- [Animate on scroll with Svelte Inview - Little Bits](https://dev.to/maciekgrzybek/animate-on-scroll-with-svelte-inview-266f) by Maciek Grzybek
-- [Lazy-Loading Firebase with SvelteKit](https://www.captaincodeman.com/lazy-loading-firebase-with-sveltekit) and [HeadlessUI Components with Svelte](https://www.captaincodeman.com/headlessui-components-with-svelte) by Captain Codeman
-- [SvelteKit Accessibility Testing: Automated CI A11y Tests](https://rodneylab.com/sveltekit-accessibility-testing/) by Rodney Lab
-- [Getting Started with KitQL and GraphCMS](https://scottspence.com/posts/getting-started-with-kitql-and-graphcms) by Scott Spence
-- [React ⇆ Svelte Cheatsheet](https://dev.to/joshnuss/react-to-svelte-cheatsheet-1a2a) lists the similarities and differences between the two libraries - by Joshua Nussbaum
-
-_To Watch_
-
-- [Svelte Extravaganza | Async](https://www.youtube.com/watch?v=mT4CLVHgtSg) by pngwn
-- [6 Svelte Packages You Should Know](https://www.youtube.com/watch?v=y5SrUKcX_Co) and [Basic React To Svelte Conversion](https://www.youtube.com/watch?v=DiSuwLlhOxs) by LevelUpTuts
-- [Page/Shadow Endpoint in SvelteKit](https://www.youtube.com/watch?v=j-9D5UDyVOM) by WebJeda
-- [Custom Svelte Store: Higher Order Store](https://www.youtube.com/watch?v=p1aPfVyZ1IY) by lihautan
-- [SvelteKit For Beginners (Playlist)](https://www.youtube.com/watch?v=bLBHecY4-ak&list=PLA9WiRZ-IS_zXZZyW4qfj0akvOAtk6MFS) by Joy of Code - follow along with the [blog guide](https://joyofcode.xyz/sveltekit-for-beginners)
-- [Fullstack SvelteKit Auth 🔐 with Firebase & Magic Links! 🪄](https://www.youtube.com/watch?v=MAHE4iQgh5Q) by Johnny Magrippis
-- [Firebase Authentication in SvelteKit! Full Stack App](https://www.youtube.com/watch?v=N6Y3hqhZvNI) by Ryan Boddy
-
-**Libraries, Tools & Components**
-
-- [SvelTable](https://sveltable.io/) is a feature rich, data table component built with Svelte
-- [svelte-cyberComp](https://github.com/Cybersteam00/svelte-cyberComp) is a powerful, lightweight component library written in Svelte and TypeScript
-- [Flowbite Svelte](https://github.com/shinokada/flowbite-svelte) is an unofficial Flowbite component library for Svelte
-- [Svelte-Tide-Project](https://github.com/jbertovic/svelte-tide-project) is a starter template for Svelte frontend apps with Rust Tide backend server
-- [Fetch Inject](https://github.com/vhscom/fetch-inject#sveltekit) implements a performance optimization technique for managing asynchronous JavaScript dependencies - now with Svelte support
-- [svelte-utterances](https://github.com/shinokada/svelte-utterances) is a lightweight comments widget built on GitHub issues
-- [Liquivelte](https://github.com/malipetek/liquivelte-vscode) allows you to create your Shopify theme with Svelte-like components
-- [@storyblok/svelte](https://github.com/storyblok/storyblok-svelte) is the Svelte SDK you need to interact with Storyblok API and enable the Real-time Visual Editing Experience
-- [@svelte-on-solana/wallet-adapter](https://github.com/svelte-on-solana/wallet-adapter) is a modular TypeScript wallet adapter and UI components for Solana/Anchor applications using SvelteJS as framework
-- [svelte-lookat](https://www.npmjs.com/package/svelte-lookat) creates a div which makes all its children follow the mouse cursor or the user's face when using a mobile phone
-
-Join us on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.com/invite/yy75DKs) to continue the conversation.
-
-See y'all next month!
diff --git a/documentation/blog/2022-05-01-whats-new-in-svelte-may-2022.md b/documentation/blog/2022-05-01-whats-new-in-svelte-may-2022.md
deleted file mode 100644
index 8961260f77..0000000000
--- a/documentation/blog/2022-05-01-whats-new-in-svelte-may-2022.md
+++ /dev/null
@@ -1,92 +0,0 @@
----
-title: "What's new in Svelte: May 2022"
-description: 'Dynamically switch between HTML element types with `<svelte:element>`'
-author: Dani Sandoval
-authorURL: https://dreamindani.com
----
-
-With yesterday's Svelte Summit behind us, we've got a lot of news to share! Check out all of the recordings on the [Svelte Society YouTube Channel](https://www.youtube.com/sveltesociety) and the rest of this month's updates below...
-
-## What's new in Svelte
-
-- The `<svelte:element>` element lets you render an element of a dynamically specified type. This is useful, for example, when rendering rich text content from a CMS. Check out the [docs](https://svelte.dev/docs#template-syntax-svelte-element) or the [tutorial](https://svelte.dev/tutorial/svelte-element) for more info (**3.47.0**)!
-
-## Language Tools updates
-
-- `svelte:element` and `sveltekit:reload` are now supported
-- Invalid Svelte import paths will now be automatically detected - see PR for getting back the old behavior ([#1448](https://github.com/sveltejs/language-tools/pull/1448))
-- `source.sortImports` lets you sort imports without deleting unused imports ([#1338](https://github.com/sveltejs/language-tools/issues/1338))
-- Hovering over HTML attributes will now show HTML hover info instead of the TS hover info - resulting in much more useful information ([#1447](https://github.com/sveltejs/language-tools/pull/1447))
-- In VS Code, you can now wrap existing blocks of code in control flow tags using the `Insert Snippet` command ([#1373](https://github.com/sveltejs/language-tools/pull/1373))
-
-## What's new in SvelteKit
-
-- Files and directories can now be named `__tests__` and `__test__` in the routes directory ([#4438](https://github.com/sveltejs/kit/pull/4438))
-- Netlify Edge Functions ([#4657](https://github.com/sveltejs/kit/pull/4657)) and the Vercel build output API ([#4663](https://github.com/sveltejs/kit/pull/4663)) are now supported
-- Custom `load` dependencies, array of strings representing URLs the page depends on, are now available when loading routes ([Docs](https://kit.svelte.dev/docs/loading#output-dependencies), [#4536](https://github.com/sveltejs/kit/pull/4536))
-
-**Breaking Changes**
-
-- Validators are now called "matchers" ([Docs](https://kit.svelte.dev/docs/routing#advanced-routing-matching), [#4358](https://github.com/sveltejs/kit/pull/4358))
-- `__layout.reset` has been replaced by named layouts - which have much configurability for shared layout elements ([Docs](https://kit.svelte.dev/docs/layouts#named-layouts), [#4388](https://github.com/sveltejs/kit/pull/4388))
-- Prerendering is now skipped for `rel="external"` links ([#4545](https://github.com/sveltejs/kit/pull/4545))
-- `maxage` is now `cache` in `LoadOutput` ([#4690](https://github.com/sveltejs/kit/pull/4690))
-
----
-
-## Community Showcase
-
-**Apps & Sites built with Svelte**
-
-- [polySpectra AR](https://ar.polyspectra.com/) lets you prototype faster 3D Printing with seamless AR file handoffs ([video demo](https://www.youtube.com/watch?v=VhYCeVGcG3E))
-- [Pixel Art Together](https://github.com/liveblocks/pixel-art-together) is a free multiplayer pixel art editor powered by Liveblocks
-- [Tooling Manager](https://tooling-manager.netlify.app/) lets you compare your JavaScript tech stack against industry standard boilerplates
-- [Easy Portfolio](https://easy-portfolio.com/) generates a portfolio based on your GitHub profile
-- [FLOAT](https://github.com/muttoni/float) is an attendance tracking program for events
-- [The Coin Perspective](https://thecoinperspective.com/) is a cryptocurrency price tracker and portfolio management tool
-- [Locutionis](https://github.com/pbouillon/locutionis) is a small, online reference of figures of speech (en français)
-- [ASM Editor](https://asm-editor.specy.app/) is an all in one web editor for M68K and MIPS
-- [Otium](https://github.com/alombi/otium) is a free and open source book manager and bookshelf organiser, that helps you managing your books and the ones you would like to read
-- [Sinwaver](https://github.com/Hugo-Dz/Sinwaver) is an SVG sine wave generator
-
-Want to contribute to a modern SvelteKit website? [Help build the Svelte Society site](https://github.com/svelte-society/sveltesociety.dev/issues)!
-
-**Learning Resources**
-
-_To Read_
-
-- [4 tips for cleaner Svelte components](https://geoffrich.net/posts/clean-component-tips/) by Geoff Rich
-- [Building a Clubhouse clone with Svelte and 100ms](https://www.100ms.live/blog/clubhouse-clone-with-svelte) By Seun Taiwo
-- [SvelteKit uvu Testing: Fast Component Unit Tests](https://rodneylab.com/sveltekit-uvu-testing/) by Rodney Lab
-- [SvelteKit JWT authentication tutorial](https://dev.to/pilcrowonpaper/sveltekit-jwt-authentication-tutorial-2m34) by pilcrowOnPaper
-- [Converting a Rollup-based Svelte SPA to SvelteKit](https://github.com/sveltejs/kit/discussions/4595) by Simon H
-- [Add Commitint, Commitizen, Standard Version, and Husky to SvelteKit Project](https://davipon.hashnode.dev/add-commitint-commitizen-standard-version-and-husky-to-sveltekit-project) by David Peng
-
-_To Watch or Hear_
-
-- [Rich Harris - The Road to SvelteKit 1.0 (Svelte Society NYC)](https://www.youtube.com/watch?v=s6a1pbTVcUs) by Svelte Society
-- [Svelte Fundamentals - Intro to Svelte](https://codingcat.dev/course/intro-to-svelte) by Coding Cat
-- [Svelte Components Using Custom Markdown Renderers - Weekly Svelte](https://www.youtube.com/watch?v=ZiEROAqobwM) by LevelUpTuts
-- [Implementing {@const} in if block](https://www.youtube.com/watch?v=f5iReGqjmG0) by lihautan
-- [Svelte and Contributing to Open-Source with Geoff Rich](https://podcast.20minjs.com/1952066/10417700-episode-6-svelte-and-contributing-to-open-source-with-geoff-rich) by 20minJS
-
-**Libraries, Tools & Components**
-
-- [KitDocs](https://github.com/svelteness/kit-docs) is a documentation integration for SvelteKit - like VitePress for Svelte.
-- [Svelte Copy](https://github.com/ghostdevv/svelte-copy) is a click/tap-to-copy library that makes it easy to copy to the clipboard
-- [Svend3r](https://github.com/oslabs-beta/svend3r) provides beautiful visualizations that harness the power of D3 to bring your data to life while abstracting away its imperative-style code
-- [Svelte Hamburgers](https://github.com/ghostdevv/svelte-hamburgers) is the easy to use Hamburger menu component for Svelte
-- [Svelte Droplet](https://github.com/probablykasper/svelte-droplet) is a file dropzone for Svelte
-- [Svelte MP3](https://www.npmjs.com/package/svelte-mp3) is a light blazingly fast yet simple minimalistic audio player for Svelte
-- [SvelteUI](https://github.com/Brisklemonade/svelteui) is a component library for building fully functional & accessible web applications faster than ever
-- [svelte-spotlight](https://github.com/beynar/svelte-spotlight) is a headless spotlight component to help you build your site's global search box in minutes
-- [svelte-pdf-simple](https://github.com/gspasov/svelte-pdf-simple) is a simple svelte library for displaying PDFs and giving you all the control
-- [persistent-svelte-store](https://github.com/omer-g/persistent-svelte-store) is a generic persistent writable store, built from scratch in TypeScript according to the Svelte store contract
-- [svelte-exmarkdown](https://github.com/ssssota/svelte-exmarkdown) is Svelte component to render markdown dynamically
-- [Bookit](https://github.com/leveluptuts/bookit) is a storybook-like component rendering environment - finely tuned to work directly within your SvelteKit projects
-
-Join us on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.com/invite/yy75DKs) to continue the conversation.
-
-If you'd prefer to join us in person, Svelte Summit is finally transitioning properly into the real world. Come join us for two days of awesome Svelte content! [Get your tickets now!](https://ti.to/svelte/svelte-summit-fall-edition)
-
-See y'all next month!
diff --git a/documentation/blog/2022-06-01-whats-new-in-svelte-june-2022.md b/documentation/blog/2022-06-01-whats-new-in-svelte-june-2022.md
deleted file mode 100644
index 0a551eed13..0000000000
--- a/documentation/blog/2022-06-01-whats-new-in-svelte-june-2022.md
+++ /dev/null
@@ -1,117 +0,0 @@
----
-title: "What's new in Svelte: June 2022"
-description: 'Cancellable dispatched events, deeper {@const} declarations and more!'
-author: Dani Sandoval
-authorURL: https://dreamindani.com
----
-
-With last month's [Svelte Summit](https://www.youtube.com/watch?v=qqj2cBockqE) behind us, we're ready to apply everything we learned in this new month of June! Also new this month are some quality-of-life changes to `createEventDispatcher`, `@const` declarations and tons of progress toward SvelteKit 1.0.
-
-Let's dive in!
-
-## What's new in Svelte
-
-- Custom events can now be cancelled in the `createEventDispatcher` function (**3.48.0**, [Docs](https://svelte.dev/docs#run-time-svelte-createeventdispatcher), [PR](https://github.com/sveltejs/svelte/pull/7064))
-- The `{@const}` tag can now be used in `{#if}` blocks to conditionally define variables (**3.48.0**, [Docs](https://svelte.dev/docs#template-syntax-const), [PR](https://github.com/sveltejs/svelte/pull/7451))
-- Lots of bug fixes across `<svelte:element>`, animations and various DOM elements. Check out the [CHANGELOG](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md#3480) for a deeper dive!
-
-## What's new in SvelteKit
-
-- Vite 2.9.9 was released as one of the last Vite 2 releases. The Svelte team has been hard at work contributing to the Vite 3 release to make the integration between SvelteKit and Vite smoother than ever ([Vite 3.0 Milestone](https://github.com/vitejs/vite/milestone/5))
-- `config.kit.alias` lets you more easily declare a custom alias to replace values in `import` statements ([Docs](https://kit.svelte.dev/docs/configuration#alias), [PR](https://github.com/sveltejs/kit/pull/4964))
-- Pages marked for prerendering will now fail during SSR at runtime ([PR](https://github.com/sveltejs/kit/pull/4812))
-
-**Breaking Changes**
-
-- Node 14 is no longer supported ([PR](https://github.com/sveltejs/kit/pull/4922))
-- Requests to `/favicon.ico` will no longer be suppressed and will instead be handled as a valid route ([PR](https://github.com/sveltejs/kit/pull/5046))
-- AMP support has been moved to a separate `@sveltejs/amp` package ([Docs](https://kit.svelte.dev/docs/seo#manual-setup-amp), [PR](https://github.com/sveltejs/kit/pull/4710))
-- Generated types are now written to `_types` directories - update your imports accordingly ([PR](https://github.com/sveltejs/kit/pull/4705))
-- `%svelte.head%` and `%svelte.body%` are now `%sveltekit.head%` and `%sveltekit.body%` in `app.html` ([Docs](https://kit.svelte.dev/docs/migrating#project-files-src-template-html), [PR](https://github.com/sveltejs/kit/pull/5016/))
-- `LoadInput` is now `LoadEvent`
-- Dropped support for Wrangler 1 in favor of Wrangler 2 ([PR](https://github.com/sveltejs/kit/pull/4887))
-
----
-
-## Community Showcase
-
-**Apps & Sites built with Svelte**
-
-- [Plantarium](https://github.com/jim-fx/plantarium) is a tool for the procedural generation of 3D plants.
-- [SPATULA](https://github.com/AlexWarnes/lamina-spatula) is a tool for building shading materials that are exportable as code material in any project that uses lamina and threejs
-- [Waaard](https://waaard.com/) lets you create and send protected links with a variety of SSO providers
-- [Magidoc](https://github.com/magidoc-org/magidoc) is a fast and highly customizable GraphQL documentation generator
-- [myMarkmap](https://github.com/eyssette/myMarkmap) is a custom editor for Markmap, built with SvelteKit
-- [PassShare](https://passshare.mynt.pw/) is a way for you to share your passwords to your friends, securely and effortlessly
-- [DashingOS](https://beta.dashingos.com/) is a tool (like Notion + CodeSandbox) to make it quick and easy to prototype and document your work all in one place
-- [worker-kit-email](https://github.com/miunau/worker-kit-email) helps you develop transactional emails quickly using regular SvelteKit routes
-- [kaios-weather-svelte](https://github.com/cyan-2048/kaios-weather-svelte) is a very familiar looking weather app for KaiOS
-- [svelte-gantt](https://github.com/ANovokmet/svelte-gantt) is a lightweight and fast interactive gantt chart/resource booking component
-- [Miru](https://github.com/ThaUnknown/miru) is a BitTorrent streaming software for cats
-
-Looking for a great SvelteKit website to contribute to? [Help build the Svelte Society site](https://github.com/svelte-society/sveltesociety.dev/issues)!
-
-**Learning Resources**
-
-_To Read_
-
-- [Component party](https://component-party.dev/) is a site that compares common patterns in different frameworks
-- [Quick tip: style prop defaults](https://geoffrich.net/posts/style-prop-defaults/) by Geoff Rich
-- [Working with reduced motion in Svelte](https://ghostdev.xyz/posts/working-with-reduced-motion-in-svelte) by GHOST
-- [Building a Musical Instrument with the Web Audio API](https://www.taniarascia.com/musical-instrument-web-audio-api/) by Tania Rascia
-- [Svelte-Cubed: Creating an Accessible and Consistent Experience Across Devices](https://dev.to/alexwarnes/svelte-cubed-creating-an-accessible-and-consistent-experience-across-devices-42ae) and [Svelte-Cubed: Loading Your glTF Models](https://dev.to/alexwarnes/svelte-cubed-loading-your-gltf-models-14lf) by Alex Warnes
-
-_To Watch_
-
-From Svelte Society:
-
-- [The Svelte Summit Spring 2022 stream recording](https://www.youtube.com/watch?v=qqj2cBockqE) has been updated with chapter markers to make it easy to watch again and again
-- [The full recording of Svelte London, April 2022](https://www.youtube.com/watch?v=zIxzJzTnoxA) is up! Check out the amazing talks from across the Svelte London community
-- [Persian Svelte Society](https://www.youtube.com/channel/UCfWH9lCsXN3j8oXq8dru82Q) is making Persian-language videos about Svelte
-- Svelte Sirens has been talking monthly to creators and contributors across the Svelte Community:
-  - [SvelteKit + Sanity.io: a match made in heaven](https://www.youtube.com/watch?v=j0_1hfiEVWA&list=PL8bMgX1kyZThkJ_Rk6AAFI4eY24g5XKwK&index=5) on May 13
-  - [Slicing up your Svelte Sites with Prismic](https://www.youtube.com/watch?v=FUbHwwMALkk) on May 20
-  - [Rendering your Svelte apps on Render](https://www.youtube.com/watch?v=SnV_hMLVyqs) on May 24
-  - [The story behind the (unofficial) Svelte newsletter](https://www.youtube.com/watch?v=aK0xXm3hPxk&list=PL8bMgX1kyZThkJ_Rk6AAFI4eY24g5XKwK&index=7) on May 27
-
-Across the Web:
-
-- [Building vite-plugin-svelte-inspector](https://www.youtube.com/watch?v=udYB24IMtsY), [What is Singleton?](https://www.youtube.com/watch?v=xhi0m1QZue0) and [What is Navigation?](https://www.youtube.com/watch?v=Ym-OnGUps2c) by lihautan
-- [Auto Import Components In Svelte Kit - Weekly Svelte](https://www.youtube.com/watch?v=JXvKBtTPr64) by LevelUpTuts
-- [🧪 Test SvelteKit with TDD & VITEST 🧪](https://www.youtube.com/watch?v=5bQD3dCoyHA) by Johnny Magrippis
-- [Google Analytics With SvelteKit](https://www.youtube.com/watch?v=l-x6H0fnqqQ), [Using WebSockets With SvelteKit](https://www.youtube.com/watch?v=mAcKzdW5fR8), [SvelteKit Authentication Using Cookies](https://www.youtube.com/watch?v=T935Ya4W5X0) and [Svelte Headless UI Component Library](https://www.reddit.com/r/sveltejs/comments/ueu849/svelte_headless_ui_component_library/) by Joy of Code
-- [Named Layouts In Nested Routes in SvelteKit](https://www.youtube.com/watch?v=hKg_V3jouLk) by The Svelte Junction
-- [SvelteKit Shiki Syntax Highlighting: Markdown Codeblocks](https://rodneylab.com/sveltekit-shiki-syntax-highlighting/) and [Svelte Capsize Styling: Typography Tooling](https://rodneylab.com/svelte-capsize-styling/) by Rodney Lab
-
-_To Hear_
-
-- Svelte Radio has been putting out weekly episodes:
-  - [The Adventures of Running a Svelte Meetup](https://www.svelteradio.com/episodes/the-adventures-of-running-a-svelte-meetup)
-  - [The other Rich! Geoff! (feat. Geoff Rich)](https://www.svelteradio.com/episodes/the-other-rich-geoff)
-  - [Inspecting Svelte Code with Dominik G.](https://www.svelteradio.com/episodes/inspecting-svelte-code-with-dominik-g)
-  - [Stores Galore](https://www.svelteradio.com/episodes/stores-galore)
-- [Svelte and the Future of Frontend Development (feat. Rich Harris)](https://thenewstack.io/svelte-and-the-future-of-front-end-development/) from The New Stack
-
-**Libraries, Tools & Components**
-
-- [vite-plugin-svelte-console-remover](https://github.com/jhubbardsf/vite-plugin-svelte-console-remover) is a Vite plugin that removes all console statements (log, group, dir, error, etc) from Svelte, JS, and TS files during build so they don't leak into production
-- [Svelte Headless Tables](https://github.com/bryanmylee/svelte-headless-table) is an unopinionated and extensible data tables for Svelte
-- [y-presence](https://github.com/nimeshnayaju/y-presence) is a lightweight set of libraries to easily add presence (live cursors/avatars) to any web application (now with Svelte support!)
-- [Svelcro](https://github.com/oslabs-beta/Svelcro) is a component performance tracker for Svelte applications
-- [Svelte-Splitpanes](https://github.com/orefalo/svelte-splitpanes) lets you create dynamic and predictable view panels to layout an application
-- [svelte-miniplayer](https://github.com/ThaUnknown/svelte-miniplayer) is a lightweight, fast, resizable and draggable miniplayer for media
-- [svelte-keybinds](https://github.com/ThaUnknown/svelte-keybinds) is a minimalistic keybinding interface, with rebinding and saving
-- [svelte-speech-recognition](https://github.com/jhubbardsf/svelte-speech-recognition) converts speech from the microphone to text and makes it available to your Svelte components
-
-**Special Feature: Svelte Stores**
-There were lots of Svelte stores released this month from a number of authors...
-
-- [svelte-mutable-store](https://github.com/feltcoop/svelte-mutable-store) is a Svelte store for mutable values with the `immutable` compiler option
-- [svelte-damped-store](https://github.com/aredridel/svelte-damped-store) is a derived writable store that can suspend updates while [svelte-lens-store](https://github.com/aredridel/svelte-lens-store) is a functional lens over Svelte stores
-- [svelte-persistent-store](https://github.com/furudean/svelte-persistent-store) is a writable svelte store that saves and loads data from `Window.localStorage` or `Window.sessionStorage`.
-
-Did we miss anything? Join us on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.com/invite/yy75DKs) to add your voice.
-
-Don't forget that you can also join us in-person at the Svelte Summit in Stockholm! Come join us for two days of awesome Svelte content! [Get your tickets now](https://ti.to/svelte/svelte-summit-fall-edition).
-
-See y'all next month!
diff --git a/documentation/blog/2022-07-01-whats-new-in-svelte-july-2022.md b/documentation/blog/2022-07-01-whats-new-in-svelte-july-2022.md
deleted file mode 100644
index 13d61fa402..0000000000
--- a/documentation/blog/2022-07-01-whats-new-in-svelte-july-2022.md
+++ /dev/null
@@ -1,101 +0,0 @@
----
-title: "What's new in Svelte: July 2022"
-description: 'Faster SSR, language tools improvements and a new paid contributor!'
-author: Dani Sandoval
-authorURL: https://dreamindani.com
----
-
-From faster SSR to support for Vitest and Storybook in SvelteKit, there's a lot to cover in this month's newsletter...
-
-So let's dive in!
-
-## OpenCollective funding drives Svelte forward
-
-Svelte supporters have donated approximately $80,000 to [the project on OpenCollective](https://opencollective.com/svelte). We're happy to share that the funds are being drawn on to move Svelte forward in a meaningful way. **[@gtm-nayan](https://github.com/gtm-nayan)** has begun triaging and fixing SvelteKit issues this past month as a paid contributor to the project to help us get SvelteKit to a 1.0 level of stability! @gtm-nayan has been an active member of the Svelte community for quite some time and is well known for writing the bot that helps keep our Discord server running. We're happy that this funding has allowed Svelte to get much more of his time.
-
-We will also be utilizing OpenCollective funds to allow Svelte core maintainers to attend [Svelte Summit](https://www.sveltesummit.com/) in person this fall. Thanks to everyone who has donated so far!
-
-## What's new in Svelte & Language Tools
-
-- [learn.svelte.dev](https://learn.svelte.dev/) is a new way to learn Svelte and SvelteKit from the ground up that is currently in development
-- Faster SSR is coming in the next Svelte release. A PR two years in the making, resulting in up to 3x faster rendering in some benchmarking tests! ([PR](https://github.com/sveltejs/svelte/pull/5701))
-- "Find File References" ([0.14.28](https://github.com/sveltejs/language-tools/releases/tag/language-server-0.14.28)) and "Find Component References" ([0.14.29](https://github.com/sveltejs/language-tools/releases/tag/language-server-0.14.29)) in the latest versions of the Svelte extension shows where Svelte files and components have been imported and used ([Demo](https://twitter.com/dummdidumm_/status/1532459709604716544/photo/1))
-- The Svelte extension now supports CSS path completion ([0.14.29](https://github.com/sveltejs/language-tools/releases/tag/language-server-0.14.29))
-
-## What's new in SvelteKit
-
-- Introduced `@sveltejs/kit/experimental/vite` which allows SvelteKit to interoperate with other tools in the Vite ecosystem like Vitest and Storybook ([#5094](https://github.com/sveltejs/kit/pull/5094)). Please [leave feedback](https://github.com/sveltejs/kit/issues/5184) as to whether the feature works and is helpful as we consider taking it out of experimental and making `vite.config.js` required for all users
-- Streaming in endpoints is now supported ([#3419](https://github.com/sveltejs/kit/issues/3419)). This was enabled by switching to the Undici `fetch` implementation ([#5117](https://github.com/sveltejs/kit/pull/5117))
-- Static assets can now be symlinked in development environments ([#5089](https://github.com/sveltejs/kit/pull/5089))
-- `server` and `prod` environment variables are now available as a corollary to `browser` and `dev` ([#5251](https://github.com/sveltejs/kit/pull/5251))
-
----
-
-## Community Showcase
-
-**Apps & Sites built with Svelte**
-
-- [Virtual Maker](https://www.virtualmaker.net/) lets you make interactive 3D and VR scenes in your browser
-- [Apple Beta Music](https://www.reddit.com/r/sveltejs/comments/v7ic2s/apple_beta_music_uses_svelte/) appears to have been written in some combination of Svelte and web components
-- [Itatiaia](https://www.itatiaia.com.br/), the largest radio station in the country of Brazil just relaunched its news portal in SvelteKit
-- [Pronauns](https://www.pronauns.com) helps you learn pronunciation online with IPA to speak better and sound more native
-- [Immich](https://www.immich.app/) is an open source, high performance self-hosted backup solution for videos and photos on your mobile phone
-- [Pendek](https://github.com/leovoon/link-shortener) is a link shortener built with SvelteKit, Prisma and PlanetScale
-- [Grunfy](https://grunfy.com/tools) is a set of guitar tools - recently migrated to SvelteKit
-- [Radiant: The Future of Radio](https://play.google.com/store/apps/details?id=co.broadcastapp.Radiant) is a personal radio station app built with Svelte and Capacitor
-- [Imperfect Reminders](https://imperfectreminders.mildlyupset.com/) is a todo list for things that are only sort of time sensitive
-- [Periodic Table](https://github.com/janosh/periodic-table) is a dynamic Periodic Table component written in Svelte
-- [Svelvet](https://github.com/open-source-labs/Svelvet) is a lightweight Svelte component library for building interactive node-based diagrams
-- [publint](https://github.com/bluwy/publint) lints for packaging errors to ensure compatibility across environments
-- [Playlistr](https://github.com/alextana/spotify-playlist-creator) helps manage and create Spotify playlists
-- [Geoff Rich's page transitions demo](https://twitter.com/geoffrich_/status/1534980702785003520) shows how SvelteKit's `beforeNavigate`/`afterNavigate` hooks can make smooth document transitions in the latest Chrome Canary
-- [Menger Sponge](https://twitter.com/a_warnes/status/1536215896078811137) is a fractal built with Threlte
-
-Want to contribute to a site using the latest SvelteKit features? [Help build the Svelte Society site](https://github.com/svelte-society/sveltesociety.dev/issues)!
-
-**Learning Resources**
-
-_Starring the Svelte team_
-
-- [Svelte Origins: A JavaScript Documentary](https://www.youtube.com/watch?v=kMlkCYL9qo0) by OfferZen Origins
-- [Full Stack Documentation (announcing learn.svelte.dev)](https://portal.gitnation.org/contents/full-stack-documentation) by Rich Harris @ JSNation 2022
-- [All About the Sirens](https://www.svelteradio.com/episodes/all-about-the-sirens) by Svelte Radio
-
-_To Watch_
-
-- [SvelteKit Page Endpoints](https://www.youtube.com/watch?v=yQRf2wmTu5w), [Named Layouts](https://www.youtube.com/watch?v=UHX9TJ0BxZY) and [Passing data from page component to layout component with $page.stuff](https://www.youtube.com/watch?v=CXaCstU5pcw) by lihautan
-- [🍞 & 🧈: Magically load data with SvelteKit Endpoints](https://www.youtube.com/watch?v=f6prqYlbTE4) by Johnny Magrippis
-- [Svelte for React developers](https://www.youtube.com/watch?v=7tsrwrx5HtQ) by frontendtier
-- [Learn Svelte JS || JavaScript Compiler for Building Front end Applications](https://www.youtube.com/watch?v=1rKRarJJFrY&list=PLIGDNOJWiL1-7zCgdR7MKuho-tPC6Ra6C&index=1) by Code with tsksharma
-- [SvelteKit Authentication](https://www.youtube.com/watch?v=T935Ya4W5X0&list=PLA9WiRZ-IS_zKrDzhOhV5RGKKTHNIyTDO&index=1) by Joy of Code
-- [Svelte + websockets: Build a real-time Auction app](https://www.youtube.com/watch?v=CqgsWFrwQIU) by Evgeny Maksimov
-
-_To Read_
-
-- [Up-To-Date Analytics on a Static Website](https://paullj.github.io/posts/up-to-date-analytics-on-a-static-website) and [Fast, Lightweight Fuzzy Search using Fuse.js](https://paullj.github.io/posts/fast-lightweight-fuzzy-search-using-fuse.js) by paullj
-- [Use SvelteKit as a handler in the ExpressJs project](https://chientrm.medium.com/use-sveltekit-as-a-handler-in-the-expressjs-project-15524b01128f) by Tran Chien
-- [Creating a desktop application with Tauri and SvelteKit](https://github.com/Stijn-B/tauri-sveltekit-example) by Stijn-B
-- [List of awesome Svelte stores](https://github.com/samuba/awesome-svelte-stores) by samuba
-- [SvelteKit Content Security Policy: CSP for XSS Protection](https://rodneylab.com/sveltekit-content-security-policy/) by Rodney Lab
-- [SvelteKit Hooks. Everything You Need To Know](https://kudadam.com/blog/understanding-sveltekit-hooks) by Lucretius K. Biah
-- [3 tips for upgrading the performance of your Svelte stores](https://www.mathiaspicker.com/posts/3-tips-for-upgrading-the-performance-of-your-svelte-stores) by Mathias Picker
-
-**Libraries, Tools & Components**
-
-- [Svend3r](https://github.com/oslabs-beta/svend3r) is a plug and play D3 charting library for Svelte
-- [Svelte Hover Draw SVG](https://github.com/davipon/svelte-hover-draw-svg) is a lightweight Svelte component to draw SVG on hover
-- [Svelte French Toast](https://svelte-french-toast.com/) provides buttery smooth toast notifications that are lightweight, customizable, and beautiful by default
-- [SVooltip](https://svooltip.vercel.app/) is a basic Svelte tooltip directive, powered by Floating UI
-- [Svelte Brick Gallery](https://github.com/anotherempty/svelte-brick-gallery) is a masonry-like image gallery component for Svelte
-- [use-vest](https://github.com/enyo/use-vest) is a Svelte action for Vest - a library that makes it easy to validate forms and show errors when necessary
-- [Svelidate](https://github.com/svelidate/svelidate) is a simple and lightweight form validation library for Svelte with no dependencies
-- [Svve11](https://github.com/oslabs-beta/Svve11) is an "accessibility-first" component library for Svelte
-- [Slidy](https://github.com/Valexr/Slidy) is a simple, configurable & reusable carousel sliding action script with templates & some useful plugins
-- [Svelte Component Snippets](https://marketplace.visualstudio.com/items?itemName=brysonbw.svelte-component-snippets) is a VS Code extension with access to common Svelte snippets
-- [Svelte Confetti](https://github.com/Mitcheljager/svelte-confetti) adds a little bit of flair to your app with some confetti 🎊
-
-What did we miss? Let us know on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.com/invite/yy75DKs) to add your voice.
-
-Don't forget that you can also join us in-person at the Svelte Summit in Stockholm! Come join us for two days of awesome Svelte content! [Get your tickets now](https://www.sveltesummit.com/).
-
-See y'all next month!
diff --git a/documentation/blog/2022-08-01-whats-new-in-svelte-august-2022.md b/documentation/blog/2022-08-01-whats-new-in-svelte-august-2022.md
deleted file mode 100644
index c10ed6df16..0000000000
--- a/documentation/blog/2022-08-01-whats-new-in-svelte-august-2022.md
+++ /dev/null
@@ -1,125 +0,0 @@
----
-title: "What's new in Svelte: August 2022"
-description: "Changes to SvelteKit's `load` before 1.0 plus support for Vite 3 and `vite.config.js`!"
-author: Dani Sandoval
-authorURL: https://dreamindani.com
----
-
-There's a lot to cover this month... big changes are coming to SvelteKit's design before 1.0 can be completed. If you haven't already, check out Rich's Discussion, [Fixing `load`, and tightening up SvelteKit's design before 1.0 #5748](https://github.com/sveltejs/kit/discussions/5748).
-
-Also, [@dummdidumm](https://github.com/dummdidumm) (Simon H) [has joined Vercel to work on Svelte full-time](https://twitter.com/dummdidumm_/status/1549041206348222464) and [@tcc-sejohnson](https://github.com/tcc-sejohnson) has joined the group of SvelteKit maintainers! We're super excited to have additional maintainers now dedicated to working on Svelte and SvelteKit and have already been noticing their impact. July was the third largest month for SvelteKit changes since its inception!
-
-Now onto the rest of the updates...
-
-## What's new in SvelteKit
-
-- Dynamically imported styles are now included during SSR ([#5138](https://github.com/sveltejs/kit/pull/5138))
-- Improvements to routes and prop updates to prevent unnecessary rerendering ([#5654](https://github.com/sveltejs/kit/pull/5654), [#5671](https://github.com/sveltejs/kit/pull/5671))
-- Lots of improvements to error handling ([#4665](https://github.com/sveltejs/kit/pull/4665), [#5622](https://github.com/sveltejs/kit/pull/5622), [#5619](https://github.com/sveltejs/kit/pull/5619), [#5616](https://github.com/sveltejs/kit/pull/5616))
-- Custom Vite modes are now respected in SSR builds ([#5602](https://github.com/sveltejs/kit/pull/5602))
-- Custom Vite config locations are now supported ([#5705](https://github.com/sveltejs/kit/pull/5705))
-- Private environment variables (aka "secrets") are now much more secure. Now if you accidentally import them to client-side code, you'll see an error ([#5663](https://github.com/sveltejs/kit/pull/5663), [Docs](https://kit.svelte.dev/docs/configuration#env))
-- Vercel's v3 build output API is now being used in `adapter-vercel` ([#5514](https://github.com/sveltejs/kit/pull/5514))
-- `vite-plugin-svelte` has reached 1.0 and now supports Vite 3. You'll notice new default ports for `dev` (port 5173) and `preview` (port 4173) ([#5005](https://github.com/sveltejs/kit/pull/5005), [vite-plugin-svelte CHANGELOG](https://github.com/sveltejs/vite-plugin-svelte/blob/main/packages/vite-plugin-svelte/CHANGELOG.md))
-
-**Breaking changes:**
-
-- `mode`, `prod` and `server` are no longer available in `$app/env` ([#5602](https://github.com/sveltejs/kit/pull/5602))
-- `svelte-kit` CLI commands are now run using the `vite` command and `vite.config.js` is required. This will allow first-class support with other projects in the Vite ecosystem like Vitest and Storybook ([#5332](https://github.com/sveltejs/kit/pull/5332), [Docs](https://kit.svelte.dev/docs/project-structure#project-files-vite-config-js))
-- `endpointExtensions` is now `moduleExtensions` and can be used to filter param matchers ([#5085](https://github.com/sveltejs/kit/pull/5085), [Docs](https://kit.svelte.dev/docs/configuration#moduleextensions))
-- Node 16.9 is now the minimum version for SvelteKit ([#5395](https://github.com/sveltejs/kit/pull/5395))
-- %-encoded filenames are now allowed. If you had a `%` in your route, you must now encode it with `%25` ([#5056](https://github.com/sveltejs/kit/pull/5056))
-- Endpoint method names are now uppercased to match HTTP specifications ([#5513](https://github.com/sveltejs/kit/pull/5513), [Docs](https://kit.svelte.dev/docs/routing#endpoints))
-- `writeStatic` has been removed to align with Vite's config ([#5618](https://github.com/sveltejs/kit/pull/5618))
-- `transformPage` is now `transformPageChunk` ([#5657](https://github.com/sveltejs/kit/pull/5657), [Docs](https://kit.svelte.dev/docs/hooks#handle))
-- The `prepare` script is no longer needed in `package.json` ([#5760](https://github.com/sveltejs/kit/pull/5760))
-- `adapter-node` no longer does any compression while we wait for a [bug fix in the `compression` library](https://github.com/expressjs/compression/pull/183) ([#5560](https://github.com/sveltejs/kit/pull/5506))
-
-For a full list of changes, check out kit's [CHANGELOG](https://github.com/sveltejs/kit/blob/master/packages/kit/CHANGELOG.md).
-
-## What's new in Svelte & Language Tools
-
-- The `@layer` [CSS at-rule](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) is now supported in Svelte components (**3.49.0**, [PR](https://github.com/sveltejs/svelte/issues/7504))
-- The `inert` [HTML attribute](https://html.spec.whatwg.org/multipage/interaction.html#the-inert-attribute) is now supported in Svelte's language tools and plugins (**105.20.0**, [PR](https://github.com/sveltejs/language-tools/pull/1565))
-- The Svelte plugin will now use `SvelteComponentTyped` typings, if available (**105.19.0**, [PR](https://github.com/sveltejs/language-tools/pull/1548))
-
----
-
-## Community Showcase
-
-**Apps & Sites built with Svelte**
-
-- [PocketBase](https://github.com/pocketbase/pocketbase) is an open source Go backend with a single file and an admin dashboard built with Svelte
-- [Hondo](https://www.playhondo.com/how-to-play) is a word guessing game with multiple rounds
-- [Hexapipes](https://github.com/gereleth/hexapipes) is a site for playing hexagonal pipes puzzle
-- [Mail Must Move](https://www.mordon.app/) is an email made for those who want to get more done
-- [Jot Down](https://github.com/brysonbw/vscode-jot-down) is a Visual Studio Code extension for quick and simple note taking
-- [Kadium](https://kadium.kasper.space/) is an app for staying on top of YouTube channels' uploads
-- [Samen zjin we #1metS10](https://1mets10.avrotros.nl/) is a campaign website to support S10, the dutch Eurovision finalist, by sending a drawing or a wish
-- [On Writing Code](https://onwritingcode.com/) is an interactive website to learn programming design patterns
-- [Svelte-In-Motion](https://github.com/novacbn/svelte-in-motion) lets you create Svelte-animated videos in your browser
-- [Svelte Terminal](https://github.com/Nico-Mayer/svelte-terminal) is a terminal-like website
-- [Bulletlist](https://bulletlist.com/) is a simple tool with a single purpose: making lists
-- [Remind Me Again](https://github.com/probablykasper/remind-me-again) is an app for toggleable reminders on Mac, Linux and Windows
-- [Heyweek](https://heyweek.com/) is a timetracking app built for freelancers craving that extra pizzazz
-
-**Learning Resources**
-
-_Starring the Svelte team_
-
-- [The Svelte Documentary is out!](https://www.svelteradio.com/episodes/the-svelte-documentary-is-out) on Svelte Radio
-- [Beginner SvelteKit](https://vercel.com/docs/beginner-sveltekit) by Vercel
-- [Challenge: Explore Svelte by Building a Bubble Popping Game](https://prismic.io/blog/try-svelte-build-game) by Brittney Postma
-- [Let's write a Client-side Routing Library with Svelte](https://www.youtube.com/watch?v=3foVDSknGEY) by lihautan
-- [Svelte Sirens July Talk - Testing in Svelte with Jess Sachs](https://sveltesirens.dev/event/testing-in-svelte)
-
-_To Watch_
-
-- [10 Awesome Svelte UI Component Libraries](https://www.youtube.com/watch?v=RkD88ARvucM) by LevelUpTuts
-- [Learn How SvelteKit Works](https://www.youtube.com/watch?v=VizuTy3uSNE) and [SvelteKit Endpoints](https://www.youtube.com/watch?v=XnVxDLTgCgo) by Joy of Code
-- [SvelteKit using TS, and Storybook setup](https://www.youtube.com/watch?v=L4F5dSu0FcQ) by Jarrod Kane
-- [Building Apps with Svelte!](https://www.youtube.com/watch?v=prsXVk1fdW4) by Simon Grimm
-- [SvelteKit authentication, the better way - Tutorial](https://www.youtube.com/watch?v=Y98KipzwVdM) by Pilcrow
-
-_To Read_
-
-- [Some assorted Svelte demos](https://geoffrich.net/posts/assorted-svelte-demos/) by Geoff Rich
-- [Three ways to bootstrap a Svelte project](https://maier.tech/posts/three-ways-to-bootstrap-a-svelte-project) by Thilo Maier
-- [Design & build an app with Svelte](https://bootcamp.uxdesign.cc/design-build-an-app-with-svelte-ecd7ed0729da) by Hugo
-- [Define routes via JS in SvelteKit](https://dev.to/maxcore/define-routes-via-js-in-sveltekit-27e9) by Max Core
-- [Integrating Telegram api with SvelteKit](https://dev.to/theether0/integrating-telegram-api-with-sveltekit-5gb) by Shivam Meena
-- [SvelteKit SSG: how to Prerender your SvelteKit Site](https://rodneylab.com/sveltekit-ssg/) by Rodney Lab
-- [ADEO Design System: Building a Web Component library with Svelte and Rollup](https://medium.com/adeo-tech/adeo-design-system-building-a-web-component-library-with-svelte-and-rollup-72d65de50163) by Mohamed Mokhtari
-- [The Svelte Handbook](https://thevalleyofcode.com/svelte/) by The Valley of Code
-- [Test Svelte Component Using Vitest & Playwright](https://davipon.hashnode.dev/test-svelte-component-using-vitest-playwright) by David Peng
-- [Transitional Apps with Phoenix and Svelte](https://nathancahill.com/phoenix-svelte) by Nathan Cahill
-
-_Tech Demos_
-
-- [Bringing the best GraphQL experience to Svelte](https://www.the-guild.dev/blog/houdini-and-kitql) by The Guild
-- [Style your Svelte website faster with Stylify CSS](https://stylifycss.com/blog/style-your-svelte-website-faster-with-stylify-css/) by Stylify
-- [Revamped Auth Helpers for Supabase (with SvelteKit support)](https://supabase.com/blog/2022/07/13/supabase-auth-helpers-with-sveltekit-support) by Supabase
-
-**Libraries, Tools & Components**
-
-- [Lucia](https://github.com/pilcrowOnPaper/lucia-sveltekit) is a simple, JWT based authentication library for SvelteKit that connects your SvelteKit app with your database
-- [Skeleton](https://github.com/Brain-Bones/skeleton) is a UI component library for use with Svelte + Tailwind
-- [pass-composer](https://pass-composer.vercel.app/) helps you compose your postprocessing passes for threlte scenes
-- [@crikey/stores-\*](https://whenderson.github.io/stores-mono/) is a collection of libraries to extend Svelte stores for common use-cases
-- [Svelte Chrome Storage](https://github.com/shaun-wild/svelte-chrome-storage) is a lightweight abstraction between Svelte stores and Chrome extension storage
-- [Svelte Schema Form](https://github.com/restspace/svelte-schema-form) is a form generator for JSON schema
-- [svelte-gesture](https://github.com/wobsoriano/svelte-gesture) is a library that lets you bind richer mouse and touch events to any component or view
-- [Snap Layout](https://github.com/ThaUnknown/snap-layout) and [universal-title-bar](https://github.com/ThaUnknown/universal-title-bar) bring Windows 11 snap layout and title features to webapps and PWAs. Both can be imported as a `.svelte` module or as a web component
-- [svelte-adapter-bun](https://github.com/gornostay25/svelte-adapter-bun) is an adapter for SvelteKit apps that generates a standalone Bun server
-- [json2dir](https://www.npmjs.com/package/json2dir) converts JSON objects into directory trees
-- [Svelte Command Palette](https://github.com/rohitpotato/svelte-command-palette) is a drop-in command palette component
-- [svelte-use-drop-outside](https://github.com/untemps/svelte-use-drop-outside) is a Svelte action to drop an element outside an area
-- [PowerTable](https://github.com/muonw/powertable) is a JavaScript component that turns JSON data into an interactive HTML table
-- [svelte-slides](https://github.com/rajasegar/svelte-slides) is a slide show template for Svelte using Reveal.js
-- [Svelte Theme Light](https://marketplace.visualstudio.com/items?itemName=webmaek.svelte-theme-light) is a Visual Studio Code theme based on the Svelte REPL
-
-Did we miss anything? Let us know on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.com/invite/yy75DKs)!
-
-Still looking for something to do in September? Come join us at the Svelte Summit in Stockholm! [Get your tickets now](https://www.sveltesummit.com/).
-
-See ya next month!
diff --git a/documentation/blog/2022-09-01-whats-new-in-svelte-september-2022.md b/documentation/blog/2022-09-01-whats-new-in-svelte-september-2022.md
deleted file mode 100644
index 2127b5c79c..0000000000
--- a/documentation/blog/2022-09-01-whats-new-in-svelte-september-2022.md
+++ /dev/null
@@ -1,112 +0,0 @@
----
-title: "What's new in Svelte: September 2022"
-description: "Migrating to SvelteKit's new filesystem-based router"
-author: Dani Sandoval
-authorURL: https://dreamindani.com
----
-
-Still looking for something to do this month? It's your last chance to get tickets to Svelte Summit, Stockholm! [Join us on Sept 8-9th](https://www.sveltesummit.com/) 🎉
-
-With the redesign of SvelteKit's filesystem-based router merging early last month, there's lots to cover this month - from the [migration script](https://github.com/sveltejs/kit/discussions/5774) to a number of new blog posts, videos and tutorials.
-
-But the new routing isn't the only new feature in SvelteKit...
-
-## What's new in SvelteKit
-
-- `Link` is now supported as an HTTP header and works out of the box with Cloudflare's [Automatic Early Hints](https://github.com/sveltejs/kit/issues/5455) (**1.0.0-next.405**, [PR](https://github.com/sveltejs/kit/pull/5735))
-- `$env/static/*` are now virtual to prevent writing sensitive values to disk (**1.0.0-next.413**, [PR](https://github.com/sveltejs/kit/pull/5825))
-- `$app/stores` can now be used from anywhere on the browser (**1.0.0-next.428**, [PR](https://github.com/sveltejs/kit/pull/6100))
-- `config.kit.env.dir` is a new config that sets the directory to search for `.env` files (**1.0.0-next.430**, [PR](https://github.com/sveltejs/kit/pull/6175))
-
-**Breaking changes:**
-
-- The filesystem-based router and `load` API improves the way routes are managed. **Before installing version `@sveltejs/kit@1.0.0-next.406` or later, [follow this migration guide](https://github.com/sveltejs/kit/discussions/5774)** ([PR](https://github.com/sveltejs/kit/pull/5778), [Issue](https://github.com/sveltejs/kit/discussions/5748))
-- `event.session` has been removed from `load` along with the `session` store and `getSession`. Use `event.locals` instead (**1.0.0-next.415**, [PR](https://github.com/sveltejs/kit/pull/5946))
-- Named layouts have been removed in favor of `(groups)` (**1.0.0-next.432**, [Docs](https://kit.svelte.dev/docs/advanced-routing#advanced-layouts), [PR & Migration Instructions](https://github.com/sveltejs/kit/pull/6174))
-- `event.clientAddress` is now `event.getClientAddress()` (**1.0.0-next.438**, [PR](https://github.com/sveltejs/kit/pull/6237))
-- `$app/env` has been renamed to `$app/environment`, to disambiguate with `$env/...` (**1.0.0-next.445**, [PR](https://github.com/sveltejs/kit/pull/6334))
-
-For a full list of changes, check out kit's [CHANGELOG](https://github.com/sveltejs/kit/blob/master/packages/kit/CHANGELOG.md).
-
-**Updates to language tools**
-
-- TypeScript doesn't resolve imports to SvelteKit's $types very well, the latest version of Svelte's language tools makes it better (**105.21.0**, [#1592](https://github.com/sveltejs/language-tools/pull/1592))
-
----
-
-## Community Showcase
-
-**Apps & Sites built with Svelte**
-
-- [canno](https://twitter.com/a_warnes/status/1556724034959818754?s=20&t=RyKWALPByqMT5A_PkLtUew) is a simple interactive 3d physics game with adjustable gravity, cannon power, and debug visualizer - made with threlte
-- [straw.page](https://straw.page/) is an extremely simple website builder that lets you create unique websites straight from your phone
-- [Patra](https://patra.webjeda.com/) lets you share short notes just with a link. No database. No storage
-- [promptoMANIA](https://promptomania.com/) is an AI art community with an online prompt builder
-- [Album by Mood](https://www.albumbymood.com/) lets you listen to music based on your mood
-- [Daily Sumeiro](https://digivaux.com/sumeiro/daily/) is a daily game to test your math and logic skills
-- [Lofi and Games](https://www.lofiandgames.com/) - play relaxing, casual games right from your browser
-- [Pitch Pipe](https://github.com/joelgibson/pitch-pipe) is a digital pitch pipe with a frequency analyser and just-intonation intervals
-- [classes.wtf](https://github.com/ekzhang/classes.wtf) is a custom, distributed search engine written in Go and Svelte to make searching for Harvard courses much quicker than the standard course catalog
-- [Scrumpack](https://scrumpack.io/) is a set of tools to help agile/scrum teams with their ceremonies like Planning Poker and Retrospectives
-
-**Learning Resources**
-
-_Starring the Svelte team_
-
-- [Supper Club × Rich Harris, Author of Svelte — Syntax Podcast 499](https://syntax.fm/show/499/supper-club-rich-harris-author-of-svelte)
-- [Let's talk routing with Rich Harris on Svelte Radio](https://www.svelteradio.com/episodes/lets-talk-routing-with-rich-harris)
-- [2.17 - Building the Future of Svelte at Vercel with Rich Harris](https://www.youtube.com/watch?v=F1sSUDVoij4)
-- [1.15 - What's Up With SvelteKit with Shawn Wang (swyx)](https://www.youtube.com/watch?v=xLhuUShkYkM)
-- [Adding Notion Tailwindcss and DaisyUI to Svelte App](https://www.youtube.com/watch?v=l4sbqrY0XGk)
-- [Svelte 101 Session](https://www.youtube.com/watch?v=IIeBERpyxx4)
-- [Astro and Svelte](https://www.youtube.com/watch?v=iYKKg-50Gm4)
-- [Storyblok in Svelte](https://www.youtube.com/watch?v=xXHFRzqUxoE)
-- [Svelte London August Recording](https://www.youtube.com/watch?v=ua6gE2zPulw)
-
-_Learning the new SvelteKit routing_
-
-- [Migrating Breaking Changes in SvelteKit](https://www.netlify.com/blog/migrating-breaking-changes-in-sveltekit/) by Brittney Postma (Netlify)
-- [Major Svelte Kit API Change - Fixing `load`, and tightening up SvelteKit's design before 1.0](https://www.youtube.com/watch?v=OUGn7VifUCg) - Video by LevelUpTuts
-- [SvelteKit Is Never Going To Be The Same](https://www.youtube.com/watch?v=eVFcGA-15LA) - Video by Joy of Code
-- [Let's learn SvelteKit by building a static Markdown blog from scratch](https://joshcollinsworth.com/blog/build-static-sveltekit-markdown-blog) by Josh Collinsworth (updated Aug 26th to keep up with the new changes)
-
-_To Watch_
-
-- [Svelte Guide For React Developers](https://www.youtube.com/watch?v=uWDBEUkTRGk) and [Svelte State Management Guide](https://www.youtube.com/watch?v=4dDjQiOVrOo) by Joy of Code
-- [What Is Bookit? The Svelte Kit Storybook Killer](https://www.youtube.com/watch?v=aOBGhvggsq0) and [What Is @type{import In Svelte Kit - JSDoc Syntax](https://www.youtube.com/watch?v=y0DvJTVO65M) by LevelUpTuts
-- [TWF Yet another JS Framework... or not? Svelte!](https://www.youtube.com/watch?app=desktop&v=nT8QtDBIKZA) by TWF meetup
-
-_To Read_
-
-- [Creating a Figma Plugin with Svelte](https://www.lekoarts.de/javascript/creating-a-figma-plugin-with-svelte) by Lennart
-- [Svelte Video Blog: Vlog with Mux from your own SvelteKit Site](https://plus.rodneylab.com/tutorials/svelte-video-blog) and [Svelte Shy Header: Peekaboo Sticky Header with CSS](https://rodneylab.com/svelte-shy-header/) by Rodney Lab
-
-**Libraries, Tools & Components**
-
-- [@svelte-plugins/tooltips](https://github.com/svelte-plugins/tooltips) is a simple tooltip action and component designed for Svelte
-- [Lucia](https://github.com/pilcrowOnPaper/lucia-sveltekit) is a simple authentication library for SvelteKit that connects your SvelteKit app to your database
-- [remix-router-svelte](https://github.com/brophdawg11/remix-routers/tree/main/packages/svelte) is a Svelte implementation of the `react-router-dom` API (driven by `@remix-run/router`)
-- [MKRT](https://github.com/j4w8n/mkrt) is a CLI to help you create SvelteKit routes, fast
-- [Histoire](https://histoire.dev/guide/) is a tool to generate stories applications - scenarios where you showcase components for specific use cases
-- [sveltekit-flash-message](https://www.npmjs.com/package/sveltekit-flash-message) is a Sveltekit library that passes temporary data to the next request, usually from endpoints
-- [svelte-particles](https://github.com/matteobruni/tsparticles#svelte) is a lightweight TypeScript library for creating particles
-- [svelte-claps](https://github.com/bufgix/svelte-claps) adds clap button (like Medium) to any page for your SvelteKit apps
-- [Neon Flicker](https://svelte.dev/repl/fd5e3b2be7da42fe8afddf89661af7d7?version=3.49.0) is a Svelte component to make your text flicker in a cyberpunk style
-- [ComboBox](https://svelte.dev/repl/144f22d18c6943abb1fdd00f13e23fde?version=3.49.0) is a search input to help users select from a large list of items
-- [@svelte-put](https://github.com/vnphanquang/svelte-put) is useful svelte stuff to put in your projects
-- [vite-plugin-svelte-bridge](https://github.com/joshnuss/vite-plugin-svelte-bridge) lets you write Svelte components and use them from React & Vue
-
-_UI Kits and Starters_
-
-- [Svelte-spectre](https://github.com/basf/svelte-spectre) is a UI-kit based on spectre.css and powered by Svelte
-- [Skeleton](https://skeleton.brainandbonesllc.com/) allows you to build fast and reactive web UI using the power of Svelte + Tailwind
-- [iconsax-svelte](https://www.npmjs.com/package/iconsax-svelte) brings the popular icon kit to Svelte
-- [laravel-vite-svelte-spa-template](https://github.com/NukeJS/laravel-vite-svelte-spa-template) is a Laravel 9, Vite, Svelte SPA, Tailwind CSS (w/ Forms Plugin & Aspect Ratio Plugin), Axios, & TypeScript starter template
-- [neutralino-svelte-boilerplate-js](https://github.com/Raffaele/neutralino-svelte-boilerplate-js) is a cross platform desktop template for Neutralino and Svelte
-- [figma-plugin-svelte-vite](https://github.com/candidosales/figma-plugin-svelte-vite) is a boilerplate for creating Figma plugins using Svelte, Vite and Typescript
-- [Urara](https://github.com/importantimport/urara) is a sweet & powerful SvelteKit blog starter
-- [SvelteKit Commerce](https://vercel.com/templates/svelte/sveltekit-commerce) is an all-in-one starter kit for high-performance e-commerce sites built with SvelteKit by Vercel
-
-Did we miss anything? Let us know on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.com/invite/yy75DKs)!
-
-See ya next month!
diff --git a/documentation/blog/2022-10-01-whats-new-in-svelte-october-2022.md b/documentation/blog/2022-10-01-whats-new-in-svelte-october-2022.md
deleted file mode 100644
index 46e8a857df..0000000000
--- a/documentation/blog/2022-10-01-whats-new-in-svelte-october-2022.md
+++ /dev/null
@@ -1,149 +0,0 @@
----
-title: "What's new in Svelte: October 2022"
-description: 'Svelte Summit, `use:enhance`, and a SvelteKit Release Candidate!'
-author: Dani Sandoval
-authorURL: https://dreamindani.com
----
-
-There's a bunch of updates this month... from new features in Svelte and SvelteKit to a whole 2-day _summit_! Plus, the Svelte extension gets some helpful new tools, new accessibility (a11y) warnings, and Tan Li Hau teaches us how to build our own Svelte and a Svelte spreadsheet 😎
-
-## What happened at Svelte Summit?
-
-A lot! Below you can find all the talks, by timestamp, from each livestream. Bite-size videos of the event will be coming soon to the Svelte Society channel, so be sure to [Subscribe](https://www.youtube.com/c/SvelteSociety), if you haven't already!
-
-_Day One_
-
-- [12:31](https://www.youtube.com/watch?v=pJcbZr5VlV4&t=751s) - How to get Svelte adopted at work
-- [33:21](https://www.youtube.com/watch?v=pJcbZr5VlV4&t=2001s) - Animating Data Visualization in Svelte
-- [2:20:36](https://www.youtube.com/watch?v=pJcbZr5VlV4&t=8436s) - Red flags & code smells
-- [2:53:42](https://www.youtube.com/watch?v=pJcbZr5VlV4&t=10422s) - Enhance your DX
-- [4:42:41](https://www.youtube.com/watch?v=pJcbZr5VlV4&t=16961s) - Svelte in UBS’ knowledge graph
-- [5:06:42](https://www.youtube.com/watch?v=pJcbZr5VlV4&t=18402s) - How to migrate react libraries to svelte
-- [5:45:27](https://www.youtube.com/watch?v=pJcbZr5VlV4&t=20727s) - DX magic in the world of Svelte
-- [7:25:39](https://www.youtube.com/watch?v=pJcbZr5VlV4&t=26739s) - Data visualizations powered by Svelte
-- [7:59:38](https://www.youtube.com/watch?v=pJcbZr5VlV4&t=28778s) - Partial Hydration in Svelte for Increased Performance
-- [8:20:49](https://www.youtube.com/watch?v=pJcbZr5VlV4&t=30049s) - Building the future, faster
-
-_Day Two_
-
-- [24:09](https://www.youtube.com/watch?v=A8jkJTWacow&t=1449s) - Scrollytell me why: Ain't nothing but a piece of cake
-- [2:02:40](https://www.youtube.com/watch?v=A8jkJTWacow&t=7360s) - I told you my dog wouldn’t run
-- [2:29:43](https://www.youtube.com/watch?v=A8jkJTWacow&t=8983s) - 10Xing Svelte
-- [3:04:56](https://www.youtube.com/watch?v=A8jkJTWacow&t=11096s) - Svemix? Re-svmix? Re-svelte?: Bringing Svelte to Remix Router
-- [5:09:39](https://www.youtube.com/watch?v=A8jkJTWacow&t=18579s) - Having fun with stores: an interactive demo of Svelte’s built in state management library
-- [5:37:06](https://www.youtube.com/watch?v=A8jkJTWacow&t=20226s) - When Keeping it Svelte Goes Wrong. An Analysis of Some of the Worst Svelte I Have Ever Coded
-- [7:22:05](https://www.youtube.com/watch?v=A8jkJTWacow&t=26525s) - Getting started with Hooks
-- [7:38:14](https://www.youtube.com/watch?v=A8jkJTWacow&t=27494s) - Special Announcement\*
-
-\*In the final talk of the summit, Rich Harris announces the first Release Candidate of SvelteKit! With no planned breaking changes left, the team is hard at work squashing bugs and adding the remaining features for 1.0...
-
-## More SvelteKit Updates
-
-- `use:enhance` is the easiest way to progressively enhance a form ([Docs](https://kit.svelte.dev/docs/form-actions#progressive-enhancement-use-enhance), [#6633](https://github.com/sveltejs/kit/pull/6633), [#6828](https://github.com/sveltejs/kit/pull/6828), [#7012](https://github.com/sveltejs/kit/pull/7012))
-- The demo app has been updated to add the Sverdle game, which Rich demoed at Svelte Summit and demonstrates `use:enhance` ([#6979](https://github.com/sveltejs/kit/pull/6979))
-- Cloudflare Pages `_routes.json` specification is now supported by `adapter-cloudflare` ([#6530](https://github.com/sveltejs/kit/pull/6530))
-- Improved build performance by running asset and page compression in parallel ([#6710](https://github.com/sveltejs/kit/pull/6710))
-
-**Breaking changes:**
-
-- Node 16.14 is now the minimum version to run SvelteKit ([#6388](https://github.com/sveltejs/kit/pull/6388))
-- `App.PrivateEnv` and `App.PublicEnv` have been removed in favour of generated types ([#6413](https://github.com/sveltejs/kit/pull/6413))
-- `%sveltekit.message%` has been replaced with `%sveltekit.error.message%` ([6659](https://github.com/sveltejs/kit/pull/6659))
-- `App.PageError` is now `App.Error` - check for it in your hooks ([Docs](https://kit.svelte.dev/docs/hooks#shared-hooks-handleerror), [#6963](https://github.com/sveltejs/kit/pull/6963))
-- `externalFetch` is now `handleFetch` and will run for all fetch calls in `load` that run on the server ([#6565](https://github.com/sveltejs/kit/pull/6565))
-
-For a full list of changes, check out SvelteKit's [CHANGELOG](https://github.com/sveltejs/kit/blob/master/packages/kit/CHANGELOG.md).
-
-## Svelte Updates
-
-- New a11y warnings for `incorrect-aria-attribute-type`, `no-abstract-role`, `interactive-element-to-noninteractive-role` and `role-has-required-aria-props`.`no-noninteractive-tabindex` and `click-events-have-key-events` coming soon! (**3.50.0**)
-- New types for `ComponentEvents` and `SveltePreprocessor` (**3.50.0**)
-- Improved parsing speed when encountering large blocks of whitespace (**3.50.0**)
-- All global JavaScript objects and functions are now recognized as known globals (**3.50.1**)
-
-For all the changes to the Svelte compiler, including upcoming changes, check out the [CHANGELOG](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md).
-
-## New in Language Tools
-
-- Better code formatting for editor suggestion (**106.0.0**, [#1598](https://github.com/sveltejs/language-tools/pull/1598))
-- Easily create SvelteKit route files from the context menu or command palette (**106.1.0**, [#1620](https://github.com/sveltejs/language-tools/pull/1620))
-
----
-
-## Ask Questions in the Svelte Discord
-
-In case you missed the announcement, the Svelte Discord has an exciting new update... a forum! The new [questions channel](https://discord.com/channels/457912077277855764/1023340103071965194) utilizes Discord's new forums feature to help the community better ask, find and answer questions!
-
-It can be used for anything you may be trying to accomplish using Svelte including using SvelteKit, community libraries, tools, etc. So ask away!
-
----
-
-## Community Showcase
-
-**Apps & Sites built with Svelte**
-
-- [Timeflow](https://www.timeflow.site/) is a smart calendar & task manager that dynamically schedules your tasks between your events
-- [GeoQuest](https://github.com/woutdp/geoquest) is an open source geography game
-- [Houses Of](https://housesof.world/) is a project showcasing charismatic houses around the world
-- [Greenfield Brewery](https://greenfield-brewery.vercel.app/) is a tool for quickly installing a lot of homebrew casks
-- [Gram Jam](https://gramjam.app/) is a word puzzle game inspired by match three games and Scrabble
-- [Beatbump](https://github.com/snuffyDev/Beatbump) is a privacy-respecting alternative frontend for YouTube Music
-- [RoomOS Device Widgets](https://github.com/wxsd-sales/roomos-device-widgets) is an app for demoing RoomOS device capabilities in Kiosk/PWA mode
-- [World Seed](https://store.steampowered.com/app/1870320/World_Seed/) is a full blown online multiplayer game
-- [Lirify](https://lirify-tan.vercel.app/) is a song lyrics writing web app tool made in Latvia
-- [Splet Tech Konferencija](https://www.splet.rs/) is a tech conference in Serbia with a _very_ fancy website
-- [Unbounded](https://unbounded.polkadot.network/) is an open-source variable font - funded by blockchain (and an awesome-looking website)
-- [Porter's Paints](https://shop.porterspaints.com/) is an eCommerce site for (you guessed it) paints built with Svelte
-- [CRAN/E](https://www.cran-e.com/) is a search engine for modern R-packages
-
-**Learning Resources**
-
-_Starring the Svelte team_
-
-- [Upgrading SvelteKit](https://www.youtube.com/watch?v=vzeZskhjoeQ) by Svelte Sirens (with Brittney, Kev, and GHOST!)
-- [Build your own Svelte](https://www.youtube.com/watch?v=mwvyKGw2CzU) by lihautan
-- [Native Page Transitions in SvelteKit: Part 1](https://geoffrich.net/posts/page-transitions-1/) by Geoff Rich
-- [Build a cross platform app with Tauri](https://ghostdev.xyz/posts/build-a-cross-platform-app-with-tauri/) by GHOST
-
-_To Watch_
-
-- [How To Use Future CSS In Svelte](https://www.youtube.com/watch?v=eqwtoaP-0pk) and [Master Animation With Svelte](https://www.youtube.com/watch?v=3RlBfUQCiAQ) by Joy of Code
-- [Svelte Kit Form Actions 101 - New Svelte Kit API](https://www.youtube.com/watch?v=i5zdnv83mxY) and [Svelte Kit Form Actions - Real World Examples - Q&A](https://www.youtube.com/watch?v=PK2Mpt1q6K8) by LevelUpTuts
-
-_To Read_
-
-- [What's new in `svelte-kit, 1.0.0-next.445`: (group) layout](https://dev.to/parables/whats-new-in-svelte-kit-100-next445-group-layout-1ld5) by Parables
-- [Handling breaking changes in SvelteKit pre-1.0](https://maier.tech/posts/handling-breaking-changes-in-sveltekit-pre-1-0) by Thilo Maier
-- [Svelte Custom Stores Demystified](https://raqueebuddinaziz.com/blog/svelte-custom-stores-demystified/) by Raqueebuddin Aziz
-- Sveltekit Changes: [Advanced Layouts](https://dev.to/theether0/sveltekit-changes-advanced-layouts-3id4), [Form Actions and Progressive Enhancement](https://dev.to/theether0/sveltekit-changes-form-actions-and-progressive-enhancement-31h9) and [Cookies and Authentication](https://dev.to/theether0/sveltekit-changes-session-and-cookies-enb) by Shivam Meena
-- [How to add an Emoji Picker to Sveltekit](https://xvrc.net/) by Xavier Coiffard
-- [Get Started with SvelteKit Headless WordPress](https://plus.rodneylab.com/tutorials/get-started-sveltekit-headless-wordpress) by Rodney Lab
-- [Speed up SvelteKit Pages With a Redis Cache](https://www.captaincodeman.com/speed-up-sveltekit-pages-with-a-redis-cache) and [How to await Firebase Auth with SvelteKit](https://www.captaincodeman.com/how-to-await-firebase-auth-with-sveltekit) by Captain Codeman
-- [Deploying SvelteKit with NodeJS to a Server Using GitLab and PM2](https://abyteofcoding.com/blog/deploying-sveltekit-with-nodejs-pm2-to-server/) by A Byte of Coding
-- [Quality of Life Tips when using SvelteKit in VS Code](https://www.reddit.com/r/sveltejs/comments/xltgyp/quality_of_life_tips_when_using_sveltekit_in_vs/) by doa-doa
-
-**Libraries, Tools & Components**
-
-- [Svelte Fit](https://github.com/leveluptuts/svelte-fit) is an extremely simple, no dependency fit text library
-- [svelte-switch-case](https://github.com/l-portet/svelte-switch-case) is a switch case syntax for your Svelte components
-- [svelte-canvas-confetti](https://github.com/andreasmcdermott/svelte-canvas-confetti) uses a single canvas to render full-screen confetti
-- [@slidy/svelte](https://github.com/Valexr/Slidy/tree/master/packages/svelte) is a simple, configurable & reusable carousel component built with Svelte - based on `@slidy/core`
-- [svelte-currency-input](https://github.com/canutin/svelte-currency-input) is a form input that converts numbers to localized currency formats as you type
-- [Adria](https://github.com/pilcrowOnPaper/adria) is a super simple form validation library, with autocomplete and value/type checking
-- [Canopy](https://github.com/oslabs-beta/canopy) is a Svelte debugging app for the Chrome devtools panel
-- [MenuFramework](https://github.com/MyHwu9508/altv-os-menu-framework) is a menu framework written for [alt:V](https://altv.mp/#/)
-- [whyframe](https://whyframe.dev/) gives iframes superpowers, making it easy to render anything in isolation
-- [@svelte-put/modal](https://github.com/vnphanquang/svelte-put/tree/main/packages/misc/modal) is a solution to async, declarative, type-safe modals in Svelte
-- [Kitty](https://github.com/grottopress/kitty) is a collection of libraries and handlers for developing secure frontend apps
-- [svelte-turnstile](https://github.com/ghostdevv/svelte-turnstile) is a component for Cloudflare Turnstile, the privacy focused CAPTCHA replacement
-
-_UI Kits and Starters_
-
-- [QWER](https://github.com/kwchang0831/svelte-QWER) is a blog starter built with SvelteKit
-- [SvelteKit Zero API](https://github.com/Refzlund/sveltekit-zero-api) provides type-safety between the frontend and backend - creating a structure for easy APIs
-- [sveltekit-monorepo](https://github.com/sw-yx/sveltekit-monorepo) is monorepo starter with 2022 tech
-- [svelte-component-test-recipes](https://github.com/davipon/svelte-component-test-recipes) uses `vitest`, `@testing-library/svelte`, and `svelte-htm` to test Svelte components that seemed to be hard to test
-
-Whew! That's a lot of updates. Let us know if we missed anything on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.com/invite/yy75DKs)!
-
-See ya next month 👋
diff --git a/documentation/blog/2022-11-01-whats-new-in-svelte-november-2022.md b/documentation/blog/2022-11-01-whats-new-in-svelte-november-2022.md
deleted file mode 100644
index eccbff9cb9..0000000000
--- a/documentation/blog/2022-11-01-whats-new-in-svelte-november-2022.md
+++ /dev/null
@@ -1,122 +0,0 @@
----
-title: "What's new in Svelte: November 2022"
-description: 'Better forms, routes and inline styles across SvelteKit and Svelte'
-author: Dani Sandoval
-authorURL: https://dreamindani.com
----
-
-It's been a busy October for the Svelte community. `use:enhance` and Advanced Routes got some great improvements in SvelteKit while the Svelte compiler released a minor version to improve the day-to-day dev experience.
-
-There's also a _huge_ showcase to cover... so let's jump in!
-
-## What's new in SvelteKit
-
-- The new `update` method for `use:enhance` lets you easily get back the default form behavior while augmenting it with your own logic ([docs](https://kit.svelte.dev/docs/form-actions#progressive-enhancement-use-enhance), [#7083](https://github.com/sveltejs/kit/pull/7083) and [#7326](https://github.com/sveltejs/kit/pull/7326))
-- `[[optional]]` parameters are now available for routing ([docs](https://kit.svelte.dev/docs/advanced-routing#optional-parameters), [#7051](https://github.com/sveltejs/kit/pull/7051))
-- `goto` now has `invalidateAll` to (re-)run all `load` functions belonging to the new active page ([docs](https://kit.svelte.dev/docs/modules#$app-navigation-goto), [#7407](https://github.com/sveltejs/kit/pull/7407))
-- `config.kit.paths.base` is now used in adapters looking for static assets - fixing 404 issues across `adapter-netlify`, `adapter-vercel`, `adapter-cloudflare`, and `adapter-cloudflare-workers` ([#4448](https://github.com/sveltejs/kit/pull/4448))
-
-**Breaking changes:**
-
-- Errors will now be thrown when routes conflict ([#7051](https://github.com/sveltejs/kit/pull/7051))
-- The global `fetch` override has been removed when prerendering ([#7318](https://github.com/sveltejs/kit/pull/7318))
-- Route IDs have been prefixed with `/` ([#7338](https://github.com/sveltejs/kit/pull/7338))
-
-## Svelte changes
-
-- New accessibility warnings, `a11y-click-events-have-key-events` and `a11y-no-noninteractive-tabindex`, will now warn when your components lack required key events or tabindex. While `a11y-role-has-required-aria-props` will no longer warn when elements match their semantic role (**3.51.0**)
-- `--style-props` are now supported on `<svelte:component>` and `<svg>` (**3.51.0**, Component Example: [Before](https://svelte.dev/repl/48984f20503f4959b70f24f4130d164b?version=3.47.0) and [After](https://svelte.dev/repl/48984f20503f4959b70f24f4130d164b?version=3.51.0), SVG Example: [Before](https://svelte.dev/repl/b7a3f94255914044b35462234ccaea43?version=3.50.0) and [After](https://svelte.dev/repl/b7a3f94255914044b35462234ccaea43?version=3.51.0))
-- "nullish" values for component event handlers are now supported (**3.51.0**, [Example](https://svelte.dev/repl/9228022922af4c76af68ce42349ccbf9?version=3.51.0))
-- Scoped styles can now be applied to `<svelte:element>` (**3.51.0**, [Example](https://svelte.dev/repl/23d982fc6f4f4f06a6aa227860fa2d84?version=3.51.0))
-- You can now use `important` in inline style tags: `style:foo|important` (**3.52.0**, [#7365](https://github.com/sveltejs/svelte/issues/7365))
-- A warning will now be thrown when using `<a target="_blank">` without `rel="noreferrer"` (**3.52.0**, [#6188](https://github.com/sveltejs/svelte/issues/6188))
-
-Tom Smykowski also released a great summary of [all the changes in 3.52.0](https://tomaszs2.medium.com/svelte-3-52-0-improves-dev-experience-45f8c460bb96)! For all the changes to the Svelte compiler, including upcoming changes, check out the [CHANGELOG](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md).
-
----
-
-## Community Showcase
-
-**Apps & Sites built with Svelte**
-
-- [AttendZen](https://www.attendzen.io/) is an event management and marketing platform for in-person, virtual or hybrid events
-- [Gram Jam](https://gramjam.app/) is a challenging daily word game using SvelteKit
-- [Collabwriting](https://collabwriting.com/) is an actionable knowledge base for your team
-- [Dazzle](https://dazzlega.me/) is a Puzzle Game made with Svelte & DallE
-- [Figma Autoname plugin](https://github.com/Hugo-Dz/figma_autoname_client_app) automatically names your Figma layers in one click
-- [DECK](https://github.com/sfx101/deck) is powerful and high performant local web development studio for MacOS, Ubuntu and Windows
-- [Asm editor](https://github.com/Specy/asm-editor) is a webapp to write and run m68k assembly code
-- [Nucleus](https://github.com/mellobacon/Nucleus) is a text editor featuring a clean and easy to use user interface inspired by Visual Studio Code, Atom, Fleet, and others
-- [Observer](https://github.com/diamonc/observer) is a frontend for Arth Panel, an open-source & self-hosted minecraft server panel
-- [.PLAN](https://plan.lodzero.com/) is a cloud-based notetaking app with markdown and section support
-- [Stablecog](https://github.com/yekta/stablecog) is a simple, free & open source AI image generator
-- [FreeSpeech AAC](https://github.com/merkie/freespeech) is a free and open-source assistive communication app written in TypeScript
-- [sqrdoff](https://sqrdoff.cubieverse.co/) is a dots and boxes to enjoy playing with friends
-- [itty](https://launch.itty-sh.pages.dev/) is a fresh take on the traditional link-shortener
-- [splits](https://splits.best/) lets you track your splits, calculate your race pace, become a better athlete
-- [Weaver](https://jrende.xyz/weaver/) is an application for creating [weave drafts](https://www.gistyarn.com/blogs/how-to-weave/how-to-read-a-weaving-draft)
-
-**Learning Resources**
-
-_To Watch_
-
-- [Starting With Svelte - Brittney Postma](https://www.youtube.com/watch?v=pdKJzrPA0DY) by fitcevents
-- [Learn Svelte from scratch with Geoff Rich: A Svelte tutorial](https://www.youtube.com/watch?v=QoR0AZ-Rov8) by Kelvin Omereshone
-- [How To Connect to MongoDB in Svelte Kit](https://www.youtube.com/watch?v=gwktlvFHLMA) by LevelUpTuts
-- [SvelteKit Authentication Using Cookies](https://www.youtube.com/watch?v=E3VG-dLCRUk), [Make A Typing Game With Svelte](https://www.youtube.com/watch?v=kMz_Ba_OF2w) and [SvelteKit Tailwind CSS Setup With Automatic Class Sorting](https://www.youtube.com/watch?v=J_G_xP0chog) by Joy of Code
-- [Authentication with SvelteKit & PocketBase](https://www.youtube.com/watch?v=doDKaKDvB30) and [Form Actions in SvelteKit (+page)](https://www.youtube.com/watch?v=52nXUwQWeKI) by Huntabyte
-- [Sybil - Episode 1 - Rust knowledge management with SurrealDB](https://www.youtube.com/watch?v=eC7IePI5rIk) by Raphael Darley
-
-_To Read_
-
-- [4 things I miss from Svelte after working in React](https://geoffrich.net/posts/4-things-i-miss-svelte/) and [Create dynamic social card images with Svelte components](https://geoffrich.net/posts/svelte-social-image/) by Geoff Rich
-- [First-class Vite support in Storybook 7.0](https://storybook.js.org/blog/first-class-vite-support-in-storybook/) (Svelte and SvelteKit included) by Ian VanSchooten
-- [Better Svelte support is coming to WebStorm](https://blog.jetbrains.com/webstorm/2022/09/webstorm-2022-3-eap1/#information_regarding_svelte_support) from JetBrains
-- [Dark Mode](https://pyronaur.com/dark-mode/) Toggle by pyronaur
-- [HeadlessUI Components with Svelte](https://www.captaincodeman.com/headlessui-components-with-svelte) by Captain Codeman
-- [Using Sequelize with SvelteKit](https://cherrific.io/0xedB00816FB204b4CD9bCb45FF2EF693E99723484/story/23) by MetaZebre
-- [Implementing Maintenance mode on a SvelteKit site](https://blog.encodeart.dev/implementing-maintenance-mode-on-a-sveltekit-site) by Andreas Söderlund
-- [ActionStore: Real-time Svelte stores for Rails](https://dev.to/buhrmi/actionstore-real-time-svelte-stores-for-rails-4jhg) by Stefan Buhrmester
-- [Svelte CSS Image Slider: with Bouncy Overscroll](https://rodneylab.com/svelte-css-image-slider/) and [SvelteKit Local Edge Functions: Edge on Localhost](https://rodneylab.com/sveltekit-local-edge-functions/) by Rodney Lab
-- [Creating a Svelte Tabs component with Slot props](https://blog.openreplay.com/creating-a-svelte-tabs-component-with-slot-props/) by Shinichi Okada
-- [Sky Cart: An Open Source, cloud-agnostic shopping cart using Stripe Checkout](https://dev.to/stripe/sky-cart-an-open-source-cloud-agnostic-shopping-cart-using-stripe-checkout-o5k) by Mike Bifulco for Stripe
-
-**Libraries, Tools & Components**
-
-- [Threlte](https://threlte.xyz/) is a component library for Svelte to build and render three.js scenes declaratively and state-driven in Svelte apps. It's being featured again to highlight the new "Playground" button in its examples
-- [Svelte Turnstile](https://github.com/ghostdevv/svelte-turnstile) is a library to integrate Cloudflare's Turnstile (a new CAPTCHA alternative) into a Svelte app
-- [ActionStore](https://github.com/buhrmi/actionstore) allows you to push data directly into Svelte stores via ActionCable
-- [SvelteKit + `<is-land>`](https://sveltekit-is-land.vercel.app/) is an experiment with partial hydration in SvelteKit using `@11ty/is-land`
-- [Svelte Color Select](https://github.com/CaptainCodeman/svelte-color-select) is an Okhsv Color Selection component for Svelte using OKLab perceptual colorspace
-- [svelte-awesome-color-picker](https://github.com/Ennoriel/svelte-awesome-color-picker) is a highly customizable color picker component library
-- [rx-svelte-forms](https://www.npmjs.com/package/rx-svelte-forms) creates reactive Svelte forms inspired by Angular reactive forms
-- [svelte-wc-bind](https://www.npmjs.com/package/svelte-wc-bind) enables two way data binding in Svelte web components
-- [svelte-preprocess-style-child-component](https://github.com/valterkraemer/svelte-preprocess-style-child-component) allows you to style elements inside a child component using similar syntax as CSS Shadow Parts
-- [unplugin-svelte-components](https://www.npmjs.com/package/unplugin-svelte-components) allows for on-demand components auto importing for Svelte
-- [sveltekit-search-params](https://github.com/paoloricciuti/sveltekit-search-params) aims to be the fastest way to read AND WRITE from query search params in SvelteKit
-- [svelte-crop-window](https://github.com/sabine/svelte-crop-window) is a crop window component for images and videos that supports touch gestures (pinch zoom, rotate, pan), as well as mousewheel zoom, mouse-dragging the image, and rotating on right mouse button
-- [Open Graph Image Generation](https://github.com/etherCorps/sveltekit-og) lets you generate open graph images dynamically from HTML/CSS without a browser in SvelteKit
-- [Svelte Tap Hold](https://github.com/binsarjr/svelte-taphold) is a minimalistic tap and hold component for Svelte/SvelteKit
-- [svelte-copy](https://github.com/ghostdevv/svelte-copy)'s new version lets you customize the events that cause text to be copied to the clipboard
-
-_UI Kits, Integrations and Starters_
-
-- [SvelteKit Statiko](https://github.com/ivodolenc/sveltekit-statiko) is a multi-featured assistant for SvelteKit static projects
-- [Svelte-TailwindCSS UI (STWUI)](https://github.com/N00nDay/stwui) is a Tailwind-based UI that is currently in pre-release beta
-- [KitBase](https://github.com/kevmodrome/kitbase) is a starter template for SvelteKit and PocketBase
-- [UnoCSS Vite Plugin (svelte-scoped)](https://github.com/unocss/unocss/tree/main/examples/sveltekit-scoped) is a scoped-CSS utility for Vite/SvelteKit
-- [SvelteKit Auth App](https://github.com/fabiorodriguesroque/sveltekit_auth_app) is an example of how we can create an authentication system with SvelteKit using JsonWebToken and Prisma
-- [SvelteKit Supabase Dashboard](https://github.com/xulioc/sveltekit-supabase-dashboard) is a simple dashboard inspired by Supabase UI made with SvelteKit as frontend and Supabase as backend
-- [Supakit](https://github.com/j4w8n/supakit) is a Supabase auth helper for SvelteKit
-- [@bun-community/sveltekit-adapter-bun](https://www.npmjs.com/package/@bun-community/sveltekit-adapter-bun) is an adapter for SvelteKit apps that generates a standalone Bun server
-- [hooks-as-store](https://github.com/micha-lmxt/hooks-as-store) lets you use React custom hooks in Svelte Apps
-
-_Fun ones_
-
-- [svelte-typewriter-store](https://github.com/paoloricciuti/svelte-typewriter-store) is the simplest way to get a rotating typewriter effect in Svelte
-- [Aksel](https://www.npmjs.com/package/aksel) is the seagull you needed on your site
-- [Svelte-Dodge](https://github.com/WbaN314/svelte-dodge) makes components dodge the pointer
-
-That's it for this month! Let us know if we missed anything on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.gg/svelte)
-
-See ya next month 👋
diff --git a/documentation/blog/2022-12-01-whats-new-in-svelte-december-2022.md b/documentation/blog/2022-12-01-whats-new-in-svelte-december-2022.md
deleted file mode 100644
index ccfcebf993..0000000000
--- a/documentation/blog/2022-12-01-whats-new-in-svelte-december-2022.md
+++ /dev/null
@@ -1,105 +0,0 @@
----
-title: "What's new in Svelte: December 2022"
-description: 'Rounding the corner to SvelteKit 1.0'
-author: Dani Sandoval
-authorURL: https://dreamindani.com
----
-
-SvelteKit 1.0 is just around the corner! With [99% of the milestone issues completed](https://github.com/sveltejs/kit/milestone/2), there's a lot of new changes from the last month to cover...
-
-Let's get to it!
-
-## What's new in SvelteKit
-
-- Use the `willUnload` property to find out if the navigation will result the app being unloaded (full page reload/closing/leaving to another page). ([#6813](https://github.com/sveltejs/kit/pull/6813))
-- `__data.json` requests now allows for caching while ensuring we cache matching responses for all invalidation scenarios ([#7532](https://github.com/sveltejs/kit/pull/7532))
-- Linking to `<a name="hash">` tags is now supported ([#7596](https://github.com/sveltejs/kit/pull/7596))
-- Throwing redirects in the `handle` hook is now supported ([#7612](https://github.com/sveltejs/kit/pull/7612))
-- A fallback component will now be added automatically for layouts without one ([#7619](https://github.com/sveltejs/kit/pull/7619))
-- The new `preload` function within the `resolve` hook determines what files should be added to the <head> tag to preload it ([Docs](https://kit.svelte.dev/docs/hooks#server-hooks-handle), [#4963](https://github.com/sveltejs/kit/pull/4963), [#7704](https://github.com/sveltejs/kit/pull/7704))
-- `version` is now available via `$app/environment` ([#7689](https://github.com/sveltejs/kit/pull/7689), [#7694](https://github.com/sveltejs/kit/pull/7694))
-- `handleError` can now return a promise ([#7780](https://github.com/sveltejs/kit/pull/7780))
-
-**Breaking changes:**
-
-- `routeId` is now `route.id` ([#7450](https://github.com/sveltejs/kit/pull/7450))
-- 'load' has been renamed to 'enter' and 'unload' to 'leave' in the `beforeNavigate` and `afterNavigate` methods. `beforeNavigate` is now called once with type 'unload' on external navigation and will no longer run during redirects ([#7502](https://github.com/sveltejs/kit/pull/7502), [#7529](https://github.com/sveltejs/kit/pull/7529), [#7588](https://github.com/sveltejs/kit/pull/7588))
-- The `redirect` helper will now only allow status codes between 300-308 for redirects and only `error` status codes between 400-599 are allowed ([#7767](https://github.com/sveltejs/kit/pull/7767)) ([#7615](https://github.com/sveltejs/kit/pull/7615), [#7767](https://github.com/sveltejs/kit/pull/7767))
-- Special characters will now be encoded with hex/unicode escape sequences in route directory names ([#7644](https://github.com/sveltejs/kit/pull/7644))
-- devalue is now used to (de)serialize action data - this is only a breaking change for everyone who fetches the actions directly and doesn't go through `use:enhance` ([#7494](https://github.com/sveltejs/kit/pull/7494))
-- `trailingSlash` is now a page option, rather than configuration ([#7719](https://github.com/sveltejs/kit/pull/7719))
-- The client-side router now ignores links outside `%sveltekit.body%` ([#7766](https://github.com/sveltejs/kit/pull/7766))
-- `prerendering` is now named `building`, and `config.kit.prerender.enabled` has been removed ([#7762](https://github.com/sveltejs/kit/pull/7762))
-- `getStaticDirectory()` has been removed from the builder API ([#7809](https://github.com/sveltejs/kit/pull/7809))
-- The `format` option has been removed from `generateManifest(...)` ([#7820](https://github.com/sveltejs/kit/pull/7820))
-- `data-sveltekit-prefetch` has been replaced with `-preload-code` and `-preload-data`, `prefetch` is now `preloadData` and `prefetchRoutes` is now `preloadCode` ([#7776](https://github.com/sveltejs/kit/pull/7776), [#7776](https://github.com/sveltejs/kit/pull/7776))
-- `SubmitFunction` has been moved from `$app/forms` into `@sveltejs/kit` ([#7003](https://github.com/sveltejs/kit/pull/7003))
-
-## New in Svelte
-
-- The css compiler options of `css: false` and `css: true` have been replaced with `'external' | 'injected' | 'none'` settings to speed up compilation for `ssr` builds and improve clarity (**3.53.0**)
-
-For all the changes to the Svelte compiler, including unreleased changes, check out the [CHANGELOG](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md).
-
----
-
-## Community Showcase
-
-**Apps & Sites built with Svelte**
-
-- [Appwrite's new console](https://github.com/appwrite/console) makes its secure backend server for web, mobile & Flutter developers available in the browser
-- [RepoMagic](https://www.repomagic.com/) is a search and analytics tool for GitHub
-- [Podman Desktop](https://github.com/containers/podman-desktop) is a graphical tool for developing on containers and Kubernetes
-- [Ballerine](https://github.com/ballerine-io/ballerine) is a Know Your Customer (KYC) UX for any vertical or geography using modular building blocks, components, and 3rd party integrations
-- [Budget Pen](https://github.com/Nico-Mayer/budget_pen) is a Codepen-like browser code editor with Tailwind included
-- [doTogether](https://github.com/SarcevicAntonio/doTogether) helps you keep track of stuff you have get done via a List of recurring Tasks
-- [Webscraped College Results](https://www.redditcollegeresults.com/) is a collection of visualizations for data from r/collegeresults
-- [Let's premortem](https://letspremortem.com/) helps avoid lengthy, frustrating post-mortems after a project fails
-- [BLKMARKET.COM](https://beta.blkmarket.com/) is an illustration library for commercial and personal use
-- [Sigil](https://sigilspace.com/) is a canvas for anything with spaces organized by the most-voted content
-- [corpus-activity-streams](https://github.com/ryanatkn/corpus-activity-streams) is an unofficial ActivityStreams 2.0 vocabulary data set and alternative docs
-- [nodeMyAdmin](https://github.com/Andrea055/nodeMyAdmin) is an alternative to phpMyAdmin written with SvelteKit
-- [Image to Pattern Conversion](https://www.thread-bare.com/convert) is a cross-stitch pattern conversion tool with [a list of pre-made patterns](https://www.thread-bare.com/store) to start with
-- [Verbums](https://verbums.vdoc.dev/) is an English vocabulary trainer to improve language comprehension
-- [SVGPS](https://svgps.app/) removes the burden of working with a cluster of SVG files by converting your icons into a single JSON file
-- [This 3D retro-themed asteroid shooter](https://photon-alexwarnes.vercel.app/showcase/asteroids) was made with threlte
-
-**Learning Resources**
-
-_To Hear_
-
-- [Catching up after Svelte Summit](https://www.svelteradio.com/episodes/catching-up) and [3D, WebGL and AI](https://www.svelteradio.com/episodes/3d-webgl-and-ai) by Svelte Radio
-
-_To Watch_
-
-- [Domenik Reitzner - The easy way, an introduction to Sveltekit](https://www.youtube.com/watch?v=t-LKRrNedps) from Svelte Society Vienna
-- [Sirens: Form Actions](https://www.youtube.com/watch?v=2OISk5-EHek) - Kev joins the Sirens again to chat about Form actions in SvelteKit and create a new form for speaker submissions on SvelteSirens.dev
-- [Introduction To 3D With Svelte (Threlte)](https://www.youtube.com/watch?v=89LYeHOncVk), [How To Use Global Styles In SvelteKit](https://www.youtube.com/watch?v=jHSwChkx3TQ) and [Progressive Form Enhancement With SvelteKit](https://www.youtube.com/watch?v=6pv70d7i-3Q) by Joy of Code
-
-_To Read_
-
-- [Building tic-tac-toe with Svelte](https://geoffrich.net/posts/tic-tac-toe/) by Geoff Rich
-- [Speed up SvelteKit Pages With a Redis Cache](https://www.captaincodeman.com/speed-up-sveltekit-pages-with-a-redis-cache) by Captain Codeman
-- [Understanding environment variables in SvelteKit](https://www.okupter.com/blog/environment-variables-in-sveltekit), [Form validation with SvelteKit and Zod](https://www.okupter.com/blog/sveltekit-form-validation-with-zod) and [Build a SvelteKit application with Docker](https://www.okupter.com/blog/build-a-sveltekit-application-with-docker) by Justin Ahinon
-- [Why I failed to create the "Solid.js's store" for Svelte, and announcing svelte-store-tree v0.3.1](https://dev.to/igrep/why-i-failed-to-create-the-solidjss-store-for-svelte-and-announcing-svelte-store-tree-v031-1am2) by YAMAMOTO Yuji
-- [Create an offline-first and installable PWA with SvelteKit and workbox-precaching](https://www.sarcevic.dev/offline-first-installable-pwa-sveltekit-workbox-precaching) by Antonio Sarcevic
-
-**Libraries, Tools & Components**
-
-- [Skeleton](https://www.skeleton.dev/) is a UI toolkit to build fast and reactive web interfaces using Svelte + Tailwind CSS
-- [svelte-svg-spinners](https://github.com/luluvia/svelte-svg-spinners) is a collection of SVG Spinners components
-- [Svelte Floating UI](https://github.com/fedorovvvv/svelte-floating-ui) enables floating UIs with actions - no wrapper components or component bindings required
-- [at-html](https://github.com/micha-lmxt/at-html) lets you use `{@html }` tags with slots in Svelte apps
-- [html-svelte-parser](https://github.com/PatrickG/html-svelte-parser) is a HTML to Svelte parser that works on both the server (Node.js) and the client (browser)
-- [svelte-switcher](https://github.com/rohitpotato/svelte-switcher) is a fully customisable, touch-friendly, accessible and tiny toggle component
-- [sveltkit-hook-html-minifier](https://www.npmjs.com/package/@svackages/sveltkit-hook-html-minifier) is a hook that wrapps `html-minifier`
-- [sveltekit-hook-redirect](https://www.npmjs.com/package/@svackages/sveltekit-hook-redirect) is a hook that makes redirects easy
-- [sveltekit-video-meet](https://github.com/harshmangalam/sveltekit-video-meet) is a video calling web app built with SvelteKit and SocketIO
-- [svelte-colourpicker](https://www.npmjs.com/package/svelte-colourpicker) is a lightweight opinionated colour picker component for Svelte
-- [Svelte-HeadlessUI](https://captaincodeman.github.io/svelte-headlessui/) is an unofficial implementation of Tailwind HeadlessUI for Svelte
-- [svelte-lazyimage-cache](https://github.com/binsarjr/svelte-lazyimage-cache) is a Lazy Image component with IntersectionObserver and cache action
-- [threlte v5.0](https://www.reddit.com/r/sveltejs/comments/ywit18/threlte_v50_is_here_a_completely_new_developer/) is a completely new developer experience that is faster, more powerful, and incredibly flexible
-
-That's it for this month! Let us know if we missed anything on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.gg/svelte)
-
-See ya next near 🎆
diff --git a/documentation/blog/2022-12-14-announcing-sveltekit-1.0.md b/documentation/blog/2022-12-14-announcing-sveltekit-1.0.md
deleted file mode 100644
index a2c569d016..0000000000
--- a/documentation/blog/2022-12-14-announcing-sveltekit-1.0.md
+++ /dev/null
@@ -1,105 +0,0 @@
----
-title: Announcing SvelteKit 1.0
-description: Web development, streamlined
-author: The Svelte team
-authorURL: https://svelte.dev/
----
-
-After two years in development, [SvelteKit](https://kit.svelte.dev) has finally reached 1.0. As of today, it’s the recommended way to build Svelte apps of all shapes and sizes.
-
-We’re so excited to share this release with you. It’s the culmination of thousands of hours of work, both from the Svelte core team and the wider community, and we think it’s the most enjoyable way to build production-grade websites, whether you’re a solo developer working on a small project or part of a large team.
-
-To get started, run `npm sv create`, and visit the [docs](https://kit.svelte.dev/docs) and (experimental!) [interactive tutorial](https://learn.svelte.dev).
-
-<div class="max">
-<figure style="max-width: 960px; margin: 0 auto">
-<div style="height: 0; padding: 0 0 57.1% 0; position: relative; margin: 0 auto;">
-	<iframe style="position: absolute; width: 100%; height: 100%; left: 0; top: 0; margin: 0;" src="https://www.youtube-nocookie.com/embed/N4BRVkQVoMc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-</div>
-
-<figcaption>Svelte Radio Live: the Christmas special</figcaption>
-</figure>
-</div>
-
-## What is SvelteKit?
-
-SvelteKit is a framework for building web applications on top of [Svelte](https://svelte.dev), a UI component framework [that](https://insights.stackoverflow.com/survey/2021#section-most-loved-dreaded-and-wanted-web-frameworks) [developers](https://2021.stateofjs.com/en-US/libraries/front-end-frameworks/) [love](https://twitter.com/Rich_Harris/status/1589675637195042817) for its performance and ease of use.
-
-If you’ve used component frameworks like Svelte, you’ll know that they make it much easier to build user interfaces than working with the DOM directly. But they leave a lot of questions unanswered:
-
-- How do I structure my source code?
-- How do I add server-side rendering?
-- How do I add routing that works on the server and in the browser?
-- How do I make client-side routing accessible?
-- How do I fetch data?
-- How do I mutate data?
-- How do I handle errors?
-- How do I optimise my production build?
-- How do I handle environment variables sensibly and securely?
-- How do I add CSP headers and CSRF protection?
-- How do I add a service worker that knows what to cache?
-- How do I prepare my application for deployment?
-
-An application framework is designed to answer these questions. SvelteKit does so with a design informed by the real world needs of an army of beta testers (many of whom have been running SvelteKit in production for some time — we salute your courage and thank you for the invaluable feedback) and the best ideas from other application frameworks including [Next.js](https://nextjs.org/) and [Remix](https://remix.run/).
-
-## How is it different?
-
-Web developers today are spoiled for choice. Aside from the aforementioned frameworks, there are options like [Astro](https://astro.build/), battle-tested server frameworks like [Rails](https://rubyonrails.org/) and [Laravel](https://laravel.com/), and a million static site generators. These are all wonderful tools, and you should feel good about choosing them.
-
-SvelteKit does things a little differently, however:
-
-**Unlike traditional ‘multi-page app’ or MPA frameworks,** it defaults to client-side navigation after the initial server-rendered page load. This enables faster page transitions, state that persists between pages (such as a sidebar’s scroll position), and less data usage. It also avoids re-running third party scripts like analytics on every single page load.
-
-**Unlike traditional server frameworks,** it allows you to use one language, instead of effectively having two tightly-coupled apps (one to generate HTML, one to handle client-side interaction). Because SvelteKit runs wherever JavaScript runs, you can deploy your app as a traditional Node server, or using serverless functions — including at the edge.
-
-**Unlike static site generators,** you can build apps with personalised or dynamic data — without the performance-killing, layout-shifting effects of fetching it from the browser after the page loads.
-
-With SvelteKit, you have flexibility. Many frameworks assume there’s one correct way to build an app, but reality is more nuanced. It’s not true, for example, that prerendering static pages is just a poor man’s `cache-control` — it also lets you do build-time validation or render data from the filesystem that your edge functions can’t access, and acts as a hedge against flaky databases. It’s not true that everything needs server-side rendering — it’s the right default if you want robust, performant apps with good SEO, but there are countless exceptions.
-
-In a SvelteKit app, you can make these choices with as much granularity as you need — for example the page you’re looking at is prerendered, but the [REPL](/repl) is rendered with dynamic data. Switching between the two is a single line of code. We call apps built with this approach ‘[transitional apps](https://www.youtube.com/watch?v=860d8usGC0o)’.
-
-## What can I use with SvelteKit?
-
-Because SvelteKit uses [Vite](https://vitejs.dev/), the lightning-fast build tool, it has out-of-the-box support for hot module reloading, TypeScript, and many other things that developers rely on. You can install plugins from the vast Vite and Rollup ecosystems to add support for other tools.
-
-When creating a SvelteKit project you’ll be asked if you want to add [TypeScript](https://www.typescriptlang.org/), [ESLint](https://eslint.org/), [Prettier](https://prettier.io/), [Playwright](https://playwright.dev/) (for end-to-end browser tests) and [Vitest](https://vitest.dev/) (for unit tests). Integration guides already exist for many popular projects — [Tailwind](https://tailwindcss.com/docs/guides/sveltekit) and [Supabase](https://supabase.com/docs/guides/getting-started/tutorials/with-sveltekit), for example. You can use [Storybook](https://github.com/storybookjs/storybook/blob/next/code/frameworks/sveltekit/README.md) and [Histoire](https://histoire.dev/guide/svelte3/getting-started.html) for your component stories. The community-maintained [svelte-add](https://github.com/svelte-add/svelte-add) lets you add a growing list of other integrations with a single command.
-
-And of course you have access to everything [npm](https://npmjs.com/) has to offer. (Note that some packages require Node.js, and so can only be used when deployed to Node-based platforms.)
-
-## Where can I deploy my apps?
-
-Anywhere! The SvelteKit CLI needs Node.js installed locally, but the framework itself has no dependencies on any platform. This means you can deploy it wherever JavaScript runs.
-
-This is made possible by [adapters](https://kit.svelte.dev/docs/adapters). The default adapter, [adapter-auto](https://github.com/sveltejs/kit/tree/master/packages/adapter-auto), provides zero-config support for Vercel, Netlify, Cloudflare Pages and Azure Static Web Apps, with more platforms coming in the future. Community-provided adapters add support for Deno, Bun, Firebase, App Engine, AWS Lambda and many others.
-
-You can also deploy your app as a Node.js server using [adapter-node](https://github.com/sveltejs/kit/tree/master/packages/adapter-node).
-
-If your entire app is suitable for prerendering, or is a single-page app (SPA), you can use [adapter-static](https://github.com/sveltejs/kit/tree/master/packages/adapter-static) — which turns SvelteKit into a static site generator — with any web server including [GitHub Pages](https://pages.github.com/).
-
-## Acknowledgements
-
-This release was made possible by the hard work of a great many people. First and foremost, we’d like to thank the Svelte community, whose insightful feedback and myriad contributions large and small have shaped this project into something we’re truly proud to share with the wider community of web developers.
-
-We’re also indebted to [Svelte Society](https://sveltesociety.dev/) and the community ambassadors, who, through initiatives like [Svelte Summit](https://www.sveltesummit.com/) and [Svelte Sirens](https://sveltesirens.dev/), have created a lively and welcoming space for Svelte developers, both online and IRL.
-
-There are too many content creators to name without leaving people left out, but to everyone who has released courses and produced educational content around SvelteKit: thank you.
-
-Back in early 2021, when we adopted Vite, we were the first major application framework to do so. At the time it was a risky bet, but we’re thrilled with how that bet paid off. Vite has grown to be an unstoppable force in the JavaScript world, and the Vite team have been brilliant and gracious partners.
-
-We’ve had terrific support from teams at [Vercel](https://vercel.com), [Netlify](https://netlify.app/) and [Cloudflare](https://www.cloudflare.com/) to make zero-config deployments for those platforms possible.
-
-Our friends at [StackBlitz](https://stackblitz.com/) worked feverishly to make [learn.svelte.dev](https://learn.svelte.dev), our first-of-its-kind [WebContainer](https://blog.stackblitz.com/posts/introducing-webcontainers/)-powered interactive tutorial, a reality.
-
-Finally, none of this could have happened without the project’s financial supporters. This includes hundreds of backers on [Open Collective](https://opencollective.com/svelte), and Vercel, which employs two core developers ([Rich](https://twitter.com/Rich_Harris/) and [Simon](https://twitter.com/dummdidumm_/)) to work on Svelte full time and supports the project in many other ways, such as [Steph’s](https://twitter.com/steph_dietz_) [Beginner SvelteKit](https://vercel.com/docs/beginner-sveltekit) course.
-
-## Migrating
-
-If you have an app built with pre-release versions of SvelteKit, we recommend upgrading to the final pre-release version — `@sveltejs/kit@1.0.0-next.588` — before upgrading to 1.0, as the stable release removes errors and warnings that were used for migrating between pre-release versions. We also recommend consulting [this migration guide](https://github.com/sveltejs/kit/discussions/5774), especially if you’re currently on an older version than 1.0.0-next-406.
-
-## What’s next?
-
-SvelteKit 1.0 is the beginning, not the end. It’s ready for production use today, but we’re just getting started. Our roadmap includes built-in i18n support, incremental static regeneration, granular control over deployment region and runtime, image optimisation, and many other improvements. Next year we’ll also start work on Svelte 4 — more on that later.
-
-But don’t let us have the final word. Svelte is a community project, and many of our best ideas aren’t really ours at all — they’re yours. Subscribe to Svelte Society on [Twitter](https://twitter.com/SvelteSociety) and [YouTube](https://youtube.com/sveltesociety) to stay up to date, and join us in our [Discord server](https://svelte.dev/chat) and on [GitHub](https://github.com/sveltejs) to contribute back.
-
-We can’t wait to see what you build.
diff --git a/documentation/blog/2023-01-01-whats-new-in-svelte-january-2023.md b/documentation/blog/2023-01-01-whats-new-in-svelte-january-2023.md
deleted file mode 100644
index f42c15636c..0000000000
--- a/documentation/blog/2023-01-01-whats-new-in-svelte-january-2023.md
+++ /dev/null
@@ -1,112 +0,0 @@
----
-title: "What's new in Svelte: January 2023"
-description: 'SvelteKit 1.0, learn.svelte.dev, and type definitions for Svelte elements.'
-author: Dani Sandoval
-authorURL: https://dreamindani.com
----
-
-It's been just two weeks since the release of [SvelteKit 1.0](https://svelte.dev/blog/announcing-sveltekit-1.0)! If you haven't yet, check out the [livestream](https://www.youtube.com/watch?v=N4BRVkQVoMc), [new website](https://kit.svelte.dev/) and [learn.svelte.dev](https://learn.svelte.dev/) to learn all the features of SvelteKit step-by-step.
-
-Let's dive into the details...
-
-## What's new in SvelteKit
-
-- `@sveltejs/kit` 1.0 is out! All future releases will follow semver and changes will be listed as major/minor/patch in the [CHANGELOG](https://github.com/sveltejs/kit/blob/master/packages/kit/CHANGELOG.md#100).
-- Improved support for Storybook and Histoire ([#7990](https://github.com/sveltejs/kit/pull/7990)). Work is ongoing to fully support those tools ([storybook#20239](https://github.com/storybookjs/storybook/pull/20239)).
-- `vitePreprocess` is now the default preprocessor. Please see [the docs](https://kit.svelte.dev/docs/integrations#preprocessors) for differences between `vitePreprocess` and `svelte-preprocess` ([#8036](https://github.com/sveltejs/kit/pull/8036)).
-
-**Breaking changes:**
-
-- Unknown exports (except when starting with an underscore) are no longer allowed from `+(layout|page)(.server)?.js` and `+server.js` files ([#7878](https://github.com/sveltejs/kit/pull/7878))
-- `__data.json` is now stripped from URL ([#7979](https://github.com/sveltejs/kit/pull/7979))
-- `sveltekit()` will now return a promise for an array of Vite plugins ([#7994](https://github.com/sveltejs/kit/pull/7994))
-- A new `embedded` option, turned off by default, helps with link clicks when embedding SvelteKit ([docs](https://kit.svelte.dev/docs/configuration), [#7969](https://github.com/sveltejs/kit/pull/7969))
-- Automatic fallback generation has been replaced with `builder.generateFallback(fallback)` ([#8013](https://github.com/sveltejs/kit/pull/8013))
-- `invalid()` is now `fail()` and `ValidationError` is now `ActionFailure` ([#8012](https://github.com/sveltejs/kit/pull/8012))
-- SvelteKit will now throw an error on invalid load response ([#8003](https://github.com/sveltejs/kit/pull/8003))
-- SvelteKit is now using Vite 4 and requires a Svelte `peerDependency` of `^3.54.0` ([#7543](https://github.com/sveltejs/kit/pull/7543))
-- Shells are now prerendered when `ssr` is false and `prerender` is not false - ensure prerender is false when ssr is also false ([#8131](https://github.com/sveltejs/kit/pull/8131))
-- Warnings and errors about removed/changed APIs have been removed ([#8019](https://github.com/sveltejs/kit/pull/8019))
-
-## What's new in Svelte
-
-- The `options.direction` argument can now be passed to custom transition functions (**3.54.0**, [#3918](https://github.com/sveltejs/svelte/issues/3918))
-- Variables can now be updated from a `@const` declared function (**3.54.0**, [#7843](https://github.com/sveltejs/svelte/issues/7843))
-- `svelte/elements` has been added for Svelte/HTML type definitions (**3.55.0**, [#7649](https://github.com/sveltejs/svelte/pull/7649))
-
-## What's new in Language Tools
-
-The Svelte extension and language tools now have a few new minimum version requirements:
-
-- Node version is now 16
-- TypeScript version is now 4.9
-- Svelte version is now 3.55
-
-The following features have also been released:
-
-- missing handler quick fix ([#1731](https://github.com/sveltejs/language-tools/pull/1731))
-- add Svelte anchor missing attribute code action ([#1730](https://github.com/sveltejs/language-tools/pull/1730))
-- better commit characters handling ([#1742](https://github.com/sveltejs/language-tools/pull/1742))
-- add `--preserveWatchOutput` option ([#1715](https://github.com/sveltejs/language-tools/pull/1715))
-- enhance Quickfixes to include Svelte Stores ([#1789](https://github.com/sveltejs/language-tools/pull/1789))
-- only show SvelteKit files context menu in SvelteKit projects ([#1771](https://github.com/sveltejs/language-tools/pull/1771))
-- use the `satisfies` operator if possible ([#1770](https://github.com/sveltejs/language-tools/pull/1770))
-
-For all the changes to the Svelte compiler, including unreleased changes, check out the [CHANGELOG](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md).
-
----
-
-## Community Showcase
-
-**Apps & Sites built with Svelte**
-
-- [Svelte Recipes 🧑‍🍳](https://svelte.recipes/) provides code snippets for common data visualization problems
-- [Everything Svelte](https://www.everythingsvelte.com/) is a new course teaching everything you need to know to build a modern web application
-- [CSS Timeline](https://css-timeline.vercel.app/) is a Timeline of the history and evolution of CSS
-- [GitBar](https://github.com/mikaelkristiansson/gitbar) is a system tray app for showing your pull requested reviews
-- [Texture Lab](https://www.texturelab.xyz/) generates instant textures for games from any text
-- [Totems](https://totems-soclage.com/) is a studio creating custom-made stands and supports
-- [PeopletoNotion](https://www.peopletonotion.com/) is a Chrome Extension that adds LinkedIn profiles to Notion in one click
-- [DeckDev](https://deckdev.com/) is a deck builder for Magic: The Gathering
-- [Default Shortcuts](https://www.defaultshortcuts.com/) is a tool for searching keyboard shortcuts across browsers.
-
-**Learning Resources**
-
-_From Svelte Society_
-
-- [Svelte Society - London December 2022](https://www.youtube.com/watch?v=2ijSarsHfN0) featuring two talks by Antony and Rich, respectively. Rich's talk, "Mistakes were made" is a SvelteKit 1.0 retrospective.
-- [SvelteKit with Netlify Edge Functions](https://twitter.com/BrittneyPostma/status/1603402599742537729?s=20&t=Lw08QNMpdEP1JZzMQGXLDA) by Brittney Postma
-- [Sirens Stream: Skeleton - A fully featured UI Toolkit](https://www.youtube.com/watch?v=2OnJYCXJPK4) with Chris Simmons and Brittney Postma
-- [Sirens: SvelteKit for Enterprise](https://www.youtube.com/watch?v=_0ijqV0DmNQ) - Lacey Pevey joins the Sirens to talk through using SvelteKit at the Enterprise level
-- [Sirens: Form Actions](https://www.youtube.com/watch?v=2OISk5-EHek) - Kev joins the Sirens again to chat about Form actions in SvelteKit and create a new form for speaker submissions on SvelteSirens.dev
-
-_To Watch_
-
-- [SvelteKit is my mistress](https://www.youtube.com/watch?v=uEJ-Rnm2yOE) by Fireship
-- [Sveltekit 1.0 in under 3 minutes](https://www.youtube.com/watch?v=3KGKDgwIrkE) by Gui Bibeau
-- [What Svelte UI Library Should You Use?](https://www.youtube.com/watch?v=O0mNU0maItY) and [The Best Icon Library For Svelte (Iconify)](https://www.youtube.com/watch?v=iGVhzsTZSa8) by Joy of Code
-
-_To Read_
-
-- [Rendering emails with Svelte](https://escape.tech/blog/sveltemails/) by Gautier Ben Aïm
-- [Now That React is Dead, What’s the Next Big Thing?](https://javascript.plainenglish.io/now-that-react-js-is-dead-whats-the-next-big-thing-7fa72a36a69b) by Somnath Singh
-- [What is SvelteKit? And Why Should You Care?](https://blog.tiia.rocks/what-is-sveltekit-and-why-should-you-care) by Tila
-- [Sveltekit API endpoints](https://www.jefmeijvis.com/post/006-sveltekit-api-endpoints) by Jef Meijvis
-- [Chart.js 4.0](https://github.com/chartjs/Chart.js/discussions/10977) has been released, with updated Svelte support
-- [Creating A Custom Svelte Media Query Store](https://pqina.nl/blog/svelte-media-query-store/) by Rik Schennink
-
-**Libraries, Tools & Components**
-
-- [Konsta UI](https://konstaui.com/) is a library of pixel perfect mobile UI components built with Tailwind CSS for React, Vue & Svelte
-- [probablykasper/modal-svelte](https://github.com/probablykasper/modal-svelte) is a modal component for Svelte
-- [deepcrayon/scrolltron](https://spacecruft.org/deepcrayon/scrolltron) is a news ticker overlay for OBS Studio
-- [JetBrains WebStorm 2022.3](https://www.jetbrains.com/webstorm/whatsnew/#:~:text=Update%20about%20Svelte%20support) now has built-in support for Svelte
-- [NextAuth.js](https://vercel.com/blog/announcing-sveltekit-auth) is now available for SvelteKit
-- [SvelteKit CAS authentication](https://www.npmjs.com/package/@macfja/sveltekit-cas) is a set of functions to ease usage of a CAS/SSO in SvelteKit
-- [@macfja/sveltekit-session](https://www.npmjs.com/package/@macfja/sveltekit-session) is an easy way to do session management for SvelteKit
-- [@svelte-plugins/tooltips](https://svelte-plugins.github.io/tooltips/) is a basic tooltip component written in Svelte
-- [tRPC-SvelteKit](https://github.com/icflorescu/trpc-sveltekit) provides end-to-end typesafe APIs for your SvelteKit applications
-- [SvelteKit Tailwind Blog Starter](https://github.com/akiarostami/sveltekit-tailwind-blog-starter) is an easily configurable and customizable blog starter for SvelteKit + Tailwind CSS
-- [Free Svelte Accelerators](https://sveltekitstarter.com/) is a list of Svelte and Sveltekit open source code to jump start your project
-
-Happy new year 🎆 Let us know if we missed anything on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.gg/svelte)
diff --git a/documentation/blog/2023-02-01-whats-new-in-svelte-february-2023.md b/documentation/blog/2023-02-01-whats-new-in-svelte-february-2023.md
deleted file mode 100644
index 98be8918ca..0000000000
--- a/documentation/blog/2023-02-01-whats-new-in-svelte-february-2023.md
+++ /dev/null
@@ -1,105 +0,0 @@
----
-title: "What's new in Svelte: February 2023"
-description: 'Minor versions and major satisfaction'
-author: Dani Sandoval
-authorURL: https://dreamindani.com
----
-
-Since last month, we've seen a couple of minor versions across Svelte and SvelteKit, a bunch of educational content to support the 1.0 release, as well as the [State of JS survey](https://stateofjs.com) results...
-
-Svelte, once again, increased in satisfaction and interest, so thanks to everyone who voted!
-
-Let's dive into the updates...
-
-## What's new in SvelteKit
-
-Work in the Svelte ecosystem this month has been focused on SvelteKit bug fixes and addressing feedback from the 1.0 launch. One of the more awaited [bug fixes to SvelteKit's base path support](https://github.com/sveltejs/kit/issues/2958) landed, which means that you can now create SvelteKit projects on remote development environments. There have been several [new releases](https://github.com/sveltejs/kit/blob/master/packages/kit/CHANGELOG.md) with these fixes as well as a handful of new features such as:
-
-- The submitter's value will now be included automatically when progressively enhancing <form method="get"> (**1.0.3**, [#8273](https://github.com/sveltejs/kit/pull/8273))
-- Added an error in dev mode if global fetch is used with relative URL (**1.0.8**, [#8370](https://github.com/sveltejs/kit/pull/8370))
-- A warning will now indicated that hydration may break if comments are removed from HTML (**1.0.11**, [#8423](https://github.com/sveltejs/kit/pull/8423))
-- A warning will occur when of page options are used in `.svelte` files or a missing `<slot />` in layout is detected (**1.1.0**, [#8475](https://github.com/sveltejs/kit/pull/8475))
-- The new `text(...)` helper makes it easy to generate text responses (**1.2.0**, [#8371](https://github.com/sveltejs/kit/pull/8371))
-- The public env can now be accessed within app.html (**1.2.0**, [Docs](https://kit.svelte.dev/docs/project-structure#project-files-src), [#8449](https://github.com/sveltejs/kit/pull/8449))
-- An error will now be thrown if cookie exceeds size limit (**1.2.1**, [#8591](https://github.com/sveltejs/kit/pull/8591))
-- The generated `tsconfig` can now be modified (**1.3.0**, [#8606](https://github.com/sveltejs/kit/pull/8606))
-
-## What's new in Svelte and Language Tools
-
-- Added support for `html.customData` from the VS Code HTML language service (**extensions-107.0.0**, [#1824](https://github.com/sveltejs/language-tools/pull/1824))
-- Autocompletion for stores that need to be imported ([#1823](https://github.com/sveltejs/language-tools/pull/1823)) and object/class member snippets ([#1817](https://github.com/sveltejs/language-tools/pull/1817)) has been added to the Svelte extension (**extensions-107.0.0**)
-- Improve detection of promises that are also functions (**Svelte 3.55.1**, [#8162](https://github.com/sveltejs/svelte/pull/8162))
-- Add missing types and properties for the global `part` attribute and `on:submit`, respectively (**Svelte 3.55.1**, [#8181](https://github.com/sveltejs/svelte/issues/8181))
-- Lots of performance and bug fixes (**Svelte 3.55.1\*** and **extensions-107.0.x**)
-
-\*for all the changes to the Svelte compiler, including unreleased changes, check out the [CHANGELOG](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md).
-
----
-
-## Community Showcase
-
-**Apps & Sites built with Svelte**
-
-- [Titowest.com](https://titowest.com/) is a series of photographic films by the writer & photographer, Tito West
-- [Verve](https://github.com/ParthJadhav/verve) is a lightweight and blazingly fast launcher for accessing and opening applications, files and documents
-- [Round The World](https://rtw.voyage/) is an interactive guide to the travels of Andrew Carnegie
-- [Linear Regression](https://mlu-explain.github.io/linear-regression/) is an interactive blog post visual introduction to (almost) everything you should know about linear regression
-- [Flotes](https://flotes.app/) is a free note taking app enhanced with flashcard features
-- [nomie](https://github.com/open-nomie/nomie6-oss) is a Daily Journal for short attention spans
-- [nocode.gallery](https://nocode.gallery/) is a collection of stunning websites made with no code
-- [Whom to Follow](https://whomtofollow.com/) helps you find accounts you'll love by searching the network of accounts you already follow
-- [poker-simulator](https://github.com/hucancode/poker-simulator) is a poker simulation and evaluation tool
-- [Pixelicious](https://www.pixelicious.xyz/) converts your images into pixel art
-- [Apple Music](https://music.apple.com/us/browse) is now built with Svelte ([proof](https://twitter.com/BrittneyPostma/status/1615381017300271104))
-
-**Learning Resources**
-
-_Featuring Svelte Contributors and Ambassadors_
-
-- [SvelteKit | Rich Harris | ViteConf 2022](https://www.youtube.com/watch?v=-OMPfr56kXI)
-- [Talking Gradio and AI with pngwn 🐧](https://www.svelteradio.com/episodes/gradio-with-pngwn) from Svelte Radio
-- [Progressively enhancing the Marvel By Year filter](https://geoffrich.net/posts/marvel-filter-state/) and [Advent of SvelteKit 2022: my favorite demos](https://geoffrich.net/posts/advent-of-sveltekit-2022/) by Geoff Rich
-- [EP 13: Contributing more to open source + a Svelte Newsletter showcase rewind ⏪](https://bookmarkbeat.substack.com/p/contributing-more-to-open-source) by Dani Sandoval
-
-_To Watch or Hear_
-
-- [I built a $5 chat app with Pocketbase & Svelte. Will it scale?](https://www.youtube.com/watch?v=gUYBFDPZ5qk) by Fireship
-- [The Comprehensive Introduction To SvelteKit](https://www.youtube.com/watch?v=obmiLi3bhkQ), [What Svelte UI Library Should You Use?](https://www.youtube.com/watch?v=O0mNU0maItY) and [Learn Everything About SvelteKit Routing (Pages, Layout, Nested Routes)](https://www.youtube.com/watch?v=7hXHbGj6iE0) by Joy of Code
-- [Progressive Enhancement in SvelteKit (use:enhance)](https://www.youtube.com/watch?v=jXtzWMhdI2U), [Are Your Routes Actually Protected?](https://www.youtube.com/watch?v=UbhhJWV3bmI) and [10X Your SvelteKit Developer Experience in VS Code](https://www.youtube.com/watch?v=13v50nLh67Q) by Huntabyte
-- [The easiest realtime app I’ve ever built](https://www.youtube.com/watch?v=UbOaAtHWidc) by Beyond Fireship
-- [Angular developers can learn Svelte so fast...](https://www.youtube.com/watch?v=lKdw_z9qmPU) by Joshua Morony
-- [SvelteKit + PocketBase Integration: User Login and Registration](https://www.youtube.com/watch?v=AxPB3e-3yEM) by Jian Yuan Lee
-- [Marvels Of Using Svelte and SvelteKit - JSJ 566](https://topenddevs.com/podcasts/javascript-jabber/episodes/marvels-of-using-svelte-and-sveltekit-jsj-566) with Tracey Lee and Adam L Barrett
-
-_To Read_
-
-- [A practical first look at the Svelte framework](https://mainmatter.com/blog/2023/01/24/sveltekit-super-rentals/) by Daniel Beer
-- [State Modeling in Svelte with XState](https://github.com/annaghi/xstate-svelte-workshop) is the port of the Frontend Masters React + XState workshop written in Svelte and built with SvelteKit!
-- [🚀 Code your SvelteKit website faster with Stylify CSS](https://stylifycss.com/blog/code-your-sveltekit-website-faster-with-stylify-css/) by Stylify CSS
-- [🎮 Five Svelte Games To Learn How To Code](https://tomaszs2.medium.com/five-svelte-games-to-learn-how-to-code-f36ae6e58923) by Tom Smykowski
-- [How to make declarative (code-based) router instead of file-based router in SvelteKit](https://dev.to/devpunk/how-to-make-declarativecode-based-router-instead-of-file-based-router-in-sveltekit-2-3dd4) by Dev Punk
-- [How to import tailwindcss custom config in JS/TS parts of a SvelteKit app](https://gist.github.com/0gust1/aa8c8b831428cdd7a5535e92cbf02f04) by 0gust1
-- [SvelteKit Internals: Load function](https://www.okupter.com/blog/sveltekit-internals-load-function) and [Svelte and CSS](https://www.okupter.com/blog/svelte-and-css) by Justin Ahinon
-- [Internationalization Formatting with Intl + SSR + SvelteKit](https://www.captaincodeman.com/internationalization-formatting-with-intl-ssr-sveltekit) by Captain Codeman
-- [Typesafe i18n with SvelteKit](https://blog.encodeart.dev/typesafe-i18n-with-sveltekit) by Andreas Söderlund
-- [Authorization in your SvelteKit app](https://cerbos.dev/blog/authorization-in-your-sveltekit-app) by Adam Barrett
-- [Validate your form using Sveltekit, Tailwindcss, Felte and Yup](https://medium.com/@Heesel/validate-your-form-using-sveltekit-tailwindcss-felte-and-yup-ddc11cd04717) by Hessel
-- [SvelteKit Form Actions bound to TypeScript class + Validation (yup) w/dynamic array](http://enehana.nohea.com/general/sveltekit-form-actions-bound-to-typescript-class-validation-yup-w-dynamic-array/) by Hekili Tech
-- [Smooth Page Transitions with SvelteKit](https://philkruft.dev/blog/smooth-page-transitions-with-sveltekit/) by Phil Kruft
-- [Redis Integration in SvelteKit: A Game-Changer for Session Management](https://dev.to/theether0/redis-integration-in-sveltekit-a-game-changer-for-session-management-84i) by Shivam Meena
-- [SvelteKit and GitHub Pages](https://andrewlester.net/blog/posts/sveltekit-and-github-pages) by Andrew Lester
-- [Tailwind + Sveltekit in 2023](https://medium.com/@gentmitch/tailwind-sveltkit-in-2023-44c19d91c8fd) by Mitch Gent
-- [Svelte Stores Tutorial: Share Data Between Multiple Components](https://learnjavascripts.com/development/web-development/frameworks/svelte/svelte-stores-tutorial-share-data-between-multiple-components/) by Vincent Widerberg
-
-**Libraries, Tools & Components**
-
-- [Sveltepress](https://sveltepress.site/) is a simple, easy to use, content centered site build tool with the full power of SvelteKit
-- [Svelte Form Helper](https://www.npmjs.com/package/svelte-form-helper) is a lightweight helper for form validation with Svelte
-- [Dapper UI](https://github.com/Bastian/dapper-ui) is a sleek and modern UI component library for Svelte, offering full TypeScript support and extensive documentation
-- [TeilUI](https://sidharth-anand.github.io/teil-ui/) is a better way to build design systems with Svelte
-- [Neodrag](https://www.neodrag.dev/) is an SSR-friendly, multi-framework draggable library
-- [Svelvet](https://www.svelvet.io/), a UI library for Svelte, is now 5.0 (read more [here](https://medium.com/@efergus1/svelvet-5-0-a-community-driven-update-cfcc93e7b7a7))
-- [Svelte Inview](https://github.com/maciekgrzybek/svelte-inview) is a Svelte action that monitors an element enters or leaves the viewport/parent element
-- [html2svelte](https://github.com/drbh/html2svelte) makes it easy to convert HTML to Svelte components in a snap
-
-Thanks for reading! Feel free to let us know if we missed anything on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.gg/svelte)
diff --git a/documentation/blog/2023-02-21-streaming-snapshots-sveltekit.md b/documentation/blog/2023-02-21-streaming-snapshots-sveltekit.md
deleted file mode 100644
index a030e8fc41..0000000000
--- a/documentation/blog/2023-02-21-streaming-snapshots-sveltekit.md
+++ /dev/null
@@ -1,207 +0,0 @@
----
-title: Streaming, snapshots, and other new features since SvelteKit 1.0
-description: Exciting improvements in the latest version of SvelteKit
-author: Geoff Rich
-authorURL: https://geoffrich.net
----
-
-The Svelte team has been hard at work since the release of SvelteKit 1.0. Let’s talk about some of the major new features that have shipped since launch: [streaming non-essential data](https://kit.svelte.dev/docs/load#streaming-with-promises), [snapshots](https://kit.svelte.dev/docs/snapshots), and [route-level config](https://kit.svelte.dev/docs/page-options#config).
-
-## Stream non-essential data in load functions
-
-SvelteKit uses [load functions](https://kit.svelte.dev/docs/load) to retrieve data for a given route. When navigating between pages, it first fetches the data, and then renders the page with the result. This could be a problem if some of the data for the page takes longer to load than others, especially if the data isn’t essential – the user won’t see any part of the new page until all the data is ready.
-
-There were ways to work around this. In particular, you could fetch the slow data in the component itself, so it first renders with the data from `load` and then starts fetching the slow data. But this was not ideal: the data is even more delayed since you don’t start fetching until the client renders, and you’re also having to break SvelteKit’s `load` convention.
-
-Now, in SvelteKit 1.8, we have a new solution: you can return a nested promise from a server load function, and SvelteKit will start rendering the page before it resolves. Once it completes, the result will be [streamed](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API) to the page.
-
-For example, consider the following `load` function:
-
-```ts
-// @errors: 2304
-export const load: PageServerLoad = () => {
-	return {
-		post: fetchPost(),
-		streamed: {
-			comments: fetchComments()
-		}
-	};
-};
-```
-
-SvelteKit will automatically await the `fetchPost` call before it starts rendering the page, since it’s at the top level. However, it won’t wait for the nested `fetchComments` call to complete – the page will render and `data.streamed.comments` will be a promise that will resolve as the request completes. We can show a loading state in the corresponding `+page.svelte` using Svelte’s [await block](https://svelte.dev/docs#template-syntax-await):
-
-```svelte
-<script lang="ts">
-	import type { PageData } from './$types';
-	export let data: PageData;
-</script>
-
-<article>
-	{data.post}
-</article>
-
-{#await data.streamed.comments}
-	Loading...
-{:then value}
-	<ol>
-		{#each value as comment}
-			<li>{comment}</li>
-		{/each}
-	</ol>
-{/await}
-```
-
-There is nothing unique about the property `streamed` here – all that is needed to trigger the behavior is a promise outside the top level of the returned object.
-
-SvelteKit will only be able to stream responses if your app’s hosting platform supports it. In general, any platform built around AWS Lambda (e.g. serverless functions) will not support streaming, but any traditional Node.js server or edge-based runtime will. Check your provider’s documentation for confirmation.
-
-If your platform does not support streaming, the data will still be available, but the response will be buffered and the page won’t start rendering until all data has been fetched.
-
-## How does it work?
-
-In order for data from a server `load` function to get to the browser, we have to _serialize_ it. SvelteKit uses a library called [devalue](https://github.com/Rich-Harris/devalue), which is like `JSON.stringify` but better — it can handle values that JSON can't (like dates and regular expressions), it can serialize objects that contain themselves (or that exist multiple times in the data) without breaking identity, and it protects you against [XSS vulnerabilities](https://github.com/rich-harris/devalue#xss-mitigation).
-
-When we server-render a page, we tell devalue to serialize promises as function calls that create a _deferred_. This is a simplified version of the code SvelteKit adds to the page:
-
-```js
-// @errors: 2339 7006
-const deferreds = new Map();
-
-window.defer = (id) => {
-	return new Promise((fulfil, reject) => {
-		deferreds.set(id, { fulfil, reject });
-	});
-};
-
-window.resolve = (id, data, error) => {
-	const deferred = deferreds.get(id);
-	deferreds.delete(id);
-
-	if (error) {
-		deferred.reject(error);
-	} else {
-		deferred.fulfil(data);
-	}
-};
-
-// devalue converts your data into a JavaScript expression
-const data = {
-	post: {
-		title: 'My cool blog post',
-		content: '...'
-	},
-	streamed: {
-		comments: window.defer(1)
-	}
-};
-```
-
-This code, along with the rest of the server-rendered HTML, is sent to the browser immediately, but the connection is kept open. Later, when the promise resolves, SvelteKit pushes an additional chunk of HTML to the browser:
-
-```html
-<script>
-	window.resolve(1, {
-		data: [{ comment: 'First!' }]
-	});
-</script>
-```
-
-For client-side navigation, we use a slightly different mechanism. Data from the server is serialized as [newline delimited JSON](https://dataprotocols.org/ndjson/), and SvelteKit reconstructs the values — using a similar deferred mechanism — with `devalue.parse`:
-
-```json
-// this is generated immediately — note the ["Promise",1]...
-[{"post":1,"streamed":4},{"title":2,"content":3},"My cool blog post","...",{"comments":5},["Promise",6],1]
-
-// ...then this chunk is sent to the browser once the promise resolves
-[{"id":1,"data":2},1,[3],{"comment":4},"First!"]
-```
-
-Because promises are natively supported in this way, you can put them anywhere in the data returned from `load` (except at the top level, since we automatically await those for you), and they can resolve with any type of data that devalue supports — including more promises!
-
-One caveat: this feature needs JavaScript. Because of this, we recommend that you only stream in non-essential data so that the core of the experience is available to all users.
-
-For more on this feature, see [the documentation](https://kit.svelte.dev/docs/load#streaming-with-promises). You can see a demo at [sveltekit-on-the-edge.vercel.app](https://sveltekit-on-the-edge.vercel.app/edge) (the location data is artificially delayed and streamed in) or [deploy your own on Vercel](https://vercel.com/templates/svelte/sveltekit-edge-functions), where streaming is supported in both Edge Functions and Serverless Functions.
-
-We're grateful for the inspiration from prior implementations of this idea including Qwik, Remix, Solid, Marko, React and many others.
-
-## Snapshots
-
-Previously in a SvelteKit app, if you navigated away after starting to fill out a form, going back wouldn’t restore your form state – the form would be recreated with its default values. Depending on the context, this can be frustrating for users. Since SvelteKit 1.5, we have a built-in way to address this: snapshots.
-
-Now, you can export a `snapshot` object from a `+page.svelte` or `+layout.svelte`. This object has two methods: `capture` and `restore`. The `capture` function defines what state you want to store when the user leaves the page. SvelteKit will then associate that state with the current history entry. If the user navigates back to the page, the `restore` function will be called with the state you previously had set.
-
-For example, here is how you would capture and restore the value of a textarea:
-
-```svelte
-<script lang="ts">
-	import type { Snapshot } from './$types';
-
-	let comment = '';
-
-	export const snapshot: Snapshot = {
-		capture: () => comment,
-		restore: (value) => (comment = value)
-	};
-</script>
-
-<form method="POST">
-	<label for="comment">Comment</label>
-	<textarea id="comment" bind:value={comment} />
-	<button>Post comment</button>
-</form>
-```
-
-While things like form input values and scroll positions are common examples, you can store any JSON-serializable data you like in a snapshot. The snapshot data is stored in [sessionStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage), so it will persist even when the page is reloaded, or if the user navigates to a different site entirely. Because it’s in `sessionStorage`, you won’t be able to access it during server-side rendering.
-
-For more, see [the documentation](https://kit.svelte.dev/docs/snapshots).
-
-## Route-level deployment configuration
-
-SvelteKit uses platform-specific [adapters](https://kit.svelte.dev/docs/adapters) to transform your app code for deployment to production. Until now, you had to configure your deployment on an app-wide level. For instance, you could either deploy your app as an edge function or a serverless function, but not both. This made it impossible to take advantage of the edge for parts of your app – if any route needed Node APIs, then you couldn’t deploy any of it to the edge. The same is true for other aspects of deployment configuration, such as regions and allocated memory: you had to choose one value that applied to every route in your entire app.
-
-Now, you can export a `config` object in your `+server.js`, `+page(.server).js` and `+layout(.server).js` files to control how those routes are deployed. Doing so in a `+layout.js` will apply the configuration to all child pages. The type of `config` is unique to each adapter, since it depends on the environment you’re deploying to.
-
-```ts
-// @errors: 2307
-import type { Config } from 'some-adapter';
-
-export const config: Config = {
-	runtime: 'edge'
-};
-```
-
-Configs are merged at the top level, so you can override values set in a layout for pages further down the tree. For more details, see [the documentation](https://kit.svelte.dev/docs/page-options#config).
-
-If you deploy to Vercel, you can take advantage of this feature by installing the latest versions of SvelteKit and your adapter. This will require a major upgrade to your adapter version, since adapters supporting route-level config require SvelteKit 1.5 or later.
-
-```bash
-npm i @sveltejs/kit@latest
-npm i @sveltejs/adapter-auto@latest # or @sveltejs/adapter-vercel@latest
-```
-
-For now, only the [Vercel adapter](https://kit.svelte.dev/docs/adapter-vercel#deployment-configuration) implements route-specific config, but the building blocks are there to implement this for other platforms. If you’re an adapter author, see the changes in [the PR](https://github.com/sveltejs/kit/pull/8740) to see what is required.
-
-## Incremental static regeneration on Vercel
-
-Route-level config also unlocked another much-requested feature – you can now use [incremental static regeneration](https://kit.svelte.dev/docs/adapter-vercel#incremental-static-regeneration) (ISR) with SvelteKit apps deployed to Vercel. ISR provides the performance and cost advantages of prerendered content with the flexibility of dynamically rendered content.
-
-To add ISR to a route, include the `isr` property in your `config` object:
-
-```ts
-export const config = {
-	isr: {
-		// see Vercel adapter docs for the required options
-	}
-};
-```
-
-## And much more...
-
-- The [OPTIONS method](https://kit.svelte.dev/docs/routing#server) is now supported in `+server.js` files
-- Better error messages when you [export something that belongs in a different file](https://github.com/sveltejs/kit/pull/9055) or [forget to put a slot](https://github.com/sveltejs/kit/pull/8475) in your +layout.svelte.
-- You can now [access public environment variables in app.html](https://kit.svelte.dev/docs/project-structure#project-files-src)
-- A new [text helper](https://kit.svelte.dev/docs/modules#sveltejs-kit-text) for creating responses
-- And a ton of bug fixes – see [the changelog](https://github.com/sveltejs/kit/blob/master/packages/kit/CHANGELOG.md) for the full release notes.
-
-Thank you to everyone who has contributed and uses SvelteKit in their projects. We’ve said it before, but Svelte is a community project, and it wouldn’t be possible without your feedback and contributions.
diff --git a/documentation/blog/2023-03-01-whats-new-in-svelte-march-2023.md b/documentation/blog/2023-03-01-whats-new-in-svelte-march-2023.md
deleted file mode 100644
index 657feacb7d..0000000000
--- a/documentation/blog/2023-03-01-whats-new-in-svelte-march-2023.md
+++ /dev/null
@@ -1,136 +0,0 @@
----
-title: "What's new in Svelte: March 2023"
-description: 'SvelteHack, post-1.0 SvelteKit improvements and a huge showcase'
-author: Dani Sandoval
-authorURL: https://dreamindani.com
----
-
-March is _coming in hot_ with a number of essential features having been added to SvelteKit following its 1.0 launch. Check out [last week's blog post](https://svelte.dev/blog/streaming-snapshots-sveltekit) for more details.
-
-Svelte Society also launched [SvelteHack](https://hack.sveltesociety.dev/) last month with over $12,000 in prizes - calling all Svelte developers, new and old, to make something awesome before the April 17th deadline!
-
-And, if you haven't heard already, there's going to be another Svelte Summit! Head over to [SvelteSummit.com](https://www.sveltesummit.com/) and sign up for the newsletter to get updates about the next event 📬
-
-Now let's jump into this month's changes...
-
-## What's new in SvelteKit
-
-- `$app/paths` can now be used without an app - making things like component testing with Vitest, using Storybook, etc. easier (**1.4.0**, [#8838](https://github.com/sveltejs/kit/pull/8838))
-- Adapters can now be configured at the route level (**1.5.0**, [Docs](https://kit.svelte.dev/docs/page-options#config), [#8740](https://github.com/sveltejs/kit/pull/8740))
-- The new snapshot mechanism preserves ephemeral DOM state even after navigation and page reloads (**1.5.0**,[Docs](https://kit.svelte.dev/docs/snapshots), [#8710](https://github.com/sveltejs/kit/pull/8710))
-- `OPTIONS` are now available within the server method (**1.6.0**, [Docs](https://kit.svelte.dev/docs/routing#server), [#8731](https://github.com/sveltejs/kit/pull/8731))
-- Richer error messages have been added for invalid exports (**1.7.0**, [#9055](https://github.com/sveltejs/kit/pull/9055))
-- Streaming promises are now available for server load functions (**1.8.0**, [Docs](https://kit.svelte.dev/docs/load#streaming-with-promises), [#8901](https://github.com/sveltejs/kit/pull/8901))
-- A new configuration option, `preloadStrategy`, helps tune preloading to avoid import 'waterfalls' on certain browsers (**1.8.4**, [Docs](https://kit.svelte.dev/docs/configuration#output), [#9179](https://github.com/sveltejs/kit/pull/9179))
-- The new `paths.relative` option can control interpretation of `paths.assets` and `paths.base` (**1.9.0**, [Docs](https://kit.svelte.dev/docs/configuration#paths), [#9220](https://github.com/sveltejs/kit/pull/9220))
-
-## What's new in Svelte and Language Tools
-
-- The REPL on `svelte.dev` now supports the `exports` field in `package.json` ([#445](https://github.com/sveltejs/sites/pull/445))
-- The new Call Hierarchy feature lets you see where a function or a class is called and follow the call stack up (**extensions-107.1.0**, [#1889](https://github.com/sveltejs/language-tools/pull/1889))
-- `declarationMap` support has been added to the Svelte extension. Now "go to definition" on `.svelte` files will navigate to the source code when a library has declaration maps (**extensions-107.1.0**, [#1878](https://github.com/sveltejs/language-tools/pull/1878))
-- [TypeScript Inlay Hints](https://code.visualstudio.com/docs/typescript/typescript-editing#_inlay-hints) support is now available via the Svelte Extension. Enable them with `javascript.inlayHints.*` or `typescript.inlayHints.*` (**extensions-107.1.0**, [#1855](https://github.com/sveltejs/language-tools/pull/1855))
-
-\*for all the changes to the Svelte compiler, including unreleased changes, check out the [CHANGELOG](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md).
-
----
-
-## Community Showcase
-
-**Apps & Sites built with Svelte**
-
-- [win32.run](https://github.com/ducbao414/win32.run) is a version of Windows XP in the browser - with a File System, programs, XP-style File Picker and Saver dialogs, 3rd-party programs, and more
-- [Svelte Radial Menu](https://github.com/tglide/svelte-radial-menu) is a radial menu experiment - based on [Rauno's radial menu](https://rauno.me/craft/radial-menu)
-- [apod color search](https://github.com/brycedorn/apod-color-search) lets you search for astronomy picture of the day (APO) photos by color
-- [SvHighlight](https://www.reddit.com/r/sveltejs/comments/10pvqfm/svhighlight_a_code_highlighter_for_sveltekit_and/) is a code highlighter for SvelteKit and TailwindCSS with blur and focus blocks
-- [Limey](https://limey.io/) lets you create beautiful one-page websites in minutes
-- [a/links](https://a-links.io/) is an extension for short, composable bookmarks
-- [Sprint Cards](https://sprint.cards) is a design challenge generator
-- [Plought](https://github.com/rossrobino/plought) is a tool to reduce noise in decision making
-- [ArcOS-Frontend](https://github.com/IzK-ArcOS/ArcOS-Frontend) is a rewrite of the Arc operating system's frontend in Svelte
-- [Poxi](https://poxi.page) is powering the user-made web with a drag-and-drop, drawable website editor that's easy to collaborate in
-- [demo-threlte-scroller-rocinante](https://twitter.com/a_warnes/status/1629235313808744449) is a "scrolly telling" proof-of-concept that combines svelte-sequence with Threlte
-- [Phonics + Stuff](https://www.phonicsandstuff.com/) is a set of resources for learning & teaching phonics
-
-**Learning Resources**
-
-_Featuring Svelte Contributors and Ambassadors_
-
-- [Streaming, snapshots, and other new features since SvelteKit 1.0](https://svelte.dev/blog/streaming-snapshots-sveltekit) by Geoff Rich (on the Svelte Blog)
-- [View Transition Experiments with Svelte](https://geoffrich.net/posts/view-transition-experiments/) and [Native Page Transitions in SvelteKit (updated for 2023)](https://geoffrich.net/posts/page-transitions-1/) by Geoff Rich
-- [Ron Au's story and how to be whimsical!](https://www.svelteradio.com/episodes/ron-aus-story-and-how-to-be-whimsical) by Svelte Radio
-- [SvelteKit 1.0 with Rich Harris](https://podrocket.logrocket.com/sveltekit) by PodRocket
-- [Svelte Society Africa](https://twitter.com/SvelteAfrica/status/1620526757593116672?s=20) has formally launched!
-- [SvelteKit overview with Simon and Dominik](https://www.youtube.com/watch?v=CiOigf4FbNg) by Frontend RheinMain
-
-_To Watch or Hear_
-
-- [Delightful Web Development with SvelteKit](https://workshops.thisdot.co/learn/developing-with-sveltekit) is a workshop from This Dot Labs - taking place on April 13th.
-- [Have More Control Over Layouts With Group Layouts In SvelteKit](https://www.youtube.com/watch?v=9UpaKEVuErs) and [Learn SvelteKit Hooks Through 6 Examples](https://www.youtube.com/watch?v=Kzrz7GZ9pIg) by Joy of Code
-- [Svelte Kit Creating Popup Modals with Tailwind CSS](https://www.youtube.com/watch?v=qI4-q7SA7uM) and [SvelteKit: Creating Dynamic Tables with Tailwind CSS](https://www.youtube.com/watch?v=QqoYrdzoSSk) by Abdul Rehman 2050
-
-_To Read_
-
-- [Svelte Language Server Example](https://github.com/volarjs/svelte-language-tools) by VolarJS
-- [How I Made My App 2.4x Faster Switching to Svelte](https://blog.flotes.app/posts/flotes-2x-faster) by Erik Verduin
-- [Smooth Page Transitions with SvelteKit](https://www.philkruft.dev/blog/smooth-page-transitions-with-sveltekit/) and [How to Build a Static SvelteKit Site](https://www.philkruft.dev/blog/how-to-build-a-static-sveltekit-site/) by Phil Kruft
-- [Blazing fast PWAs with SEO power using SvelteKit and Ionic](https://ionic.io/blog/pwas-using-sveltekit-and-ionic) by Tommertom
-- [Svelte Stores Tutorial: Share Data Between Multiple Components](https://learnjavascripts.com/development/web-development/frameworks/svelte/svelte-stores-tutorial-share-data-between-multiple-components/) by Vincent Widerberg
-- [A Business Case for SvelteKit](https://elliscs.hashnode.dev/a-business-case-for-sveltekit) by Chris Ellis
-- [How to set up a new Svelte project with SvelteKit](https://www.inow.dev/how-to-set-up-a-new-svelte-project-with-sveltekit/) by Igor Nowosad
-- [How to type Events, Slots, and Props in Svelte](https://raqueebuddinaziz.com/blog/svelte-type-events-slots-and-props/) by Raqueebuddin Aziz
-- [Use TypeScript with SvelteKit and Supabase](https://blog.robino.dev/posts/supabase-sveltekit) by Ross Robino
-- [Invoking Svelte components from your Ember apps](https://dev.to/rajasegar/invoking-svelte-components-from-your-ember-apps-58h5) by Rajasegar Chandran
-- [Add a sitemap to your server side rendered SvelteKit website](https://www.okupter.com/blog/sitemap-server-side-rendered-sveltekit-website) and [State in URL: the SvelteKit approach](https://www.okupter.com/blog/state-in-url-the-sveltekit-approach) by Justin Ahinon
-- [Display crypto data real-time in a chart using Sveltekit, Chart.js & coincap.io](https://medium.com/@Heesel/display-crypto-data-real-time-in-a-chart-using-sveltekit-chart-js-coincap-io-70b90d3aac90) by Hessel
-
-**Libraries, Tools & Components**
-
-_UI Kits and Components_
-
-- [Pink](https://pink.appwrite.io/) is a framework agnostic design system from Appwrite
-- [quick-pick](https://github.com/arabisaldrin/quick-pick) is a simple search tool where you control the search catalog
-- [Grail UI](https://github.com/grail-ui/grail-ui) offers a set of component primitives, actions and utilities that help you build accessible and high quality Svelte applications faster, while providing a great developer experience
-- [svelte-image-comparison](https://www.npmjs.com/package/svelte-image-comparison) is a Svelte component to compare image or canvas elements
-- [simple-font-select](https://www.npmjs.com/package/simple-font-select) is a simple font select component that exposes all local fonts as CSS font families
-- [svelte-datatables-net](https://www.npmjs.com/package/svelte-datatables-net) is a Svelte component that turns data into an interactive HTML table
-- [svelte-flextable](https://github.com/Parazeya/svelte-flextable) is a toolkit for creating server-side processing datatable components with Svelte
-- [svelte-algolia-instantsearch](https://github.com/aymeric-giraudet/svelte-algolia-instantsearch) is a community-developed wrapper around [instantsearch.js](https://github.com/algolia/instantsearch) for Svelte
-- [svelte-deep-zoom](https://www.npmjs.com/package/svelte-deep-zoom) is a Svelte component to render interactive Deep Zoom images (tiled image pyramids)
-- [SVoast](https://github.com/gibbu/svoast) is a simple toast component for Svelte
-- [svelte-otp](https://github.com/K4UNG/svelte-otp) is a simple lightweight OTP input component for svelte
-- [trace-svelte](https://trace-svelte.vercel.app/) is a line by line highlighter for Svelte
-- [Svelte Auth UI](https://github.com/multiplehats/svelte-auth-ui) is a set of authentication components for Svelte
-- [KitDocs](https://github.com/svelteness/kit-docs) is a documentation integration for SvelteKit - a VitePress alternative for Svelte
-- [svelte-signature-pad](https://www.npmjs.com/package/svelte-signature-pad) is a Svelte action to capture smoothed signatures as SVG paths using the excellent [perfect-freehand](https://github.com/steveruizok/perfect-freehand) library
-
-_Helpers, Stores and Actions_
-
-- [SvelteKit-Document](https://github.com/barvian/sveltekit-document) is a tiny utility for SvelteKit that lets you change the `<html>`, `<head>`, and `<body>` tags from any page or layout - with full SSR support
-- [SvelteKit Form Data](https://github.com/stolinski/sk-form-data) is an automatic SvelteKit form data parser middleware
-- [sveltekit-superforms](https://github.com/ciscoheat/sveltekit-superforms) supercharges your SvelteKit forms with a bunch of quality of life features. Purports to be a "powerhouse of a library"
-- [Houdini](https://github.com/HoudiniGraphQL/houdini) - the "disappearing" GraphQL client for the SvelteKit - is now 1.0
-- [sveltekit-modal-langchain](https://github.com/semicognitive/sveltekit-modal-langchain) is an example SvelteKit project using [sveltekit-modal](https://github.com/semicognitive/sveltekit-modal), showing how easy it is to write Python endpoints in SvelteKit
-- [mdsvex-excerpt](https://www.npmjs.com/package/mdsvex-excerpt) allows you to show only a portion of document in certain layouts
-- [Svelte Action Balancer](https://www.npmjs.com/package/svelte-action-balancer) is a simple Svelte action that makes titles more readable
-- [svelte-object](https://github.com/Refzlund/svelte-object) helps create and maintain objects using components. Values are stores and can therefore be intuitively subscribed to and updated
-- [svelte-relative-time](https://www.npmjs.com/package/svelte-relative-time) is a tiny Svelte action and component to render relative times
-- [svelte-disable-preload](https://www.npmjs.com/package/svelte-disable-preload) is a simple action to apply no-op event listeners to an element that prevent the document-level SvelteKit event handlers being invoked
-- [SvelteKit Static Sitemap](https://github.com/tlaundal/sveltekit-static-sitemap) generates a sitemap.xml for your page during build
-- [svelte-intersection-observer-action](https://www.npmjs.com/package/svelte-intersection-observer-action) is a Svelte action for element position notifications using IntersectionObserver
-- [svelte-sequence](https://github.com/AlexWarnes/svelte-sequence) provides custom stores to compose tweened motion sequences over multiple steps
-- [@svelte-put/inline-svg](https://github.com/vnphanquang/svelte-put/tree/main/packages/actions/inline-svg) is a Svelte action for inlining dynamic SVGs (fetched from network)
-
-_Other cool tools_
-
-- [sveltekit-modal](https://github.com/semicognitive/sveltekit-modal) lets you write Python endpoints in SvelteKit using Modal
-- [svelte-kit-bot-block](https://www.npmjs.com/package/svelte-kit-bot-block) is a server hook to handle spam requests with SvelteKit
-- [Svelte Email](https://github.com/carstenlebek/svelte-email) lets you write and design email templates with Svelte and render them to HTML or plain text
-- [Inertia.js](https://github.com/inertiajs/inertia) lets you quickly build modern single-page React, Vue and Svelte apps using classic server-side routing and controllers
-- [svelte-adapter-bun](https://github.com/gornostay25/svelte-adapter-bun) is an adapter for SvelteKit apps that generates a standalone Bun server
-- [React in Svelte](https://github.com/frontline-hq/react-in-svelte) is a library that enables you to use React components in Svelte
-- [SvelteKit Redis Session Manager](https://github.com/etherCorps/SK-Redis-SessionManager) is a Redis integration in SvelteKit for Session Management
-
-Thanks for reading! Don't forget to try your hand at the [Svelte Hackathon](https://hack.sveltesociety.dev/)!
-
-Feel free to let us know if we missed anything on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.gg/svelte)
diff --git a/documentation/blog/2023-03-09-zero-config-type-safety.md b/documentation/blog/2023-03-09-zero-config-type-safety.md
deleted file mode 100644
index 0ebf9e0a28..0000000000
--- a/documentation/blog/2023-03-09-zero-config-type-safety.md
+++ /dev/null
@@ -1,171 +0,0 @@
----
-title: Zero-effort type safety
-description: More convenience and correctness, less boilerplate
-author: Simon Holthausen
-authorURL: https://twitter.com/dummdidumm_
----
-
-By sprinkling type annotations into your SvelteKit apps, you can get full type safety across the network — the `data` in your page has a type that's inferred from the return values of the `load` functions that generated that data, without you having to explicitly declare anything. It's one of those things that you come to wonder how you ever lived without.
-
-But what if we didn't even need the annotations? Since `load` and `data` are part of the framework, can't the framework type them for us? This is, after all, what computers are for — doing the boring bits so we can focus on the creative stuff.
-
-As of today, yes: it can.
-
-<video src="https://sveltejs.github.io/assets/video/zero-config-types.mp4" controls muted playsinline></video>
-
-If you're using VS Code, just upgrade the Svelte extension to the latest version, and you'll never have to annotate your `load` functions or `data` props again. Extensions for other editors can also use this feature, as long as they support the Language Server Protocol and TypeScript plugins. It even works with the latest version of our CLI diagnostics tool `svelte-check`!
-
-Before we dive in, let's recap how type safety works in SvelteKit.
-
-## Generated types
-
-In SvelteKit, you get the data for a page in a `load` function. You _could_ type the event by using `ServerLoadEvent` from `@sveltejs/kit`:
-
-```ts
-const database = {
-	getPost(slug: string | undefined): Promise<string> {
-		return Promise.resolve('hello world');
-	}
-};
-// ---cut---
-// src/routes/blog/[slug]/+page.server.ts
-import type { ServerLoadEvent } from '@sveltejs/kit';
-
-export async function load(event: ServerLoadEvent) {
-	return {
-		post: await database.getPost(event.params.post)
-	};
-}
-```
-
-This works, but we can do better. Notice that we accidentally wrote `event.params.post`, even though the parameter is called `slug` (because of the `[slug]` in the filename) rather than `post`. You could type `params` yourself by adding a generic argument to `ServerLoadEvent`, but that's brittle.
-
-This is where our automatic type generation comes in. Every route directory has a hidden `$types.d.ts` file with route-specific types:
-
-```diff
-// src/routes/blog/[slug]/+page.server.ts
--import type { ServerLoadEvent } from '@sveltejs/kit';
-+import type { PageServerLoadEvent } from './$types';
-
-export async function load(event: PageServerLoadEvent) {
-    return {
--        post: await database.getPost(event.params.post)
-+        post: await database.getPost(event.params.slug)
-    };
-}
-```
-
-This reveals our typo, as it now errors on the `params.post` property access. Besides narrowing the parameter types, it also narrows the types for `await event.parent()` and the `data` passed from a server `load` function to a universal `load` function. Notice that we’re now using `PageServerLoadEvent`, to distinguish it from `LayoutServerLoadEvent`.
-
-After we have loaded our data, we want to display it in our `+page.svelte`. The same type generation mechanism ensures that the type of `data` is correct:
-
-```svelte
-<!-- src/routes/blog/[slug]/+page.svelte -->
-<script lang="ts">
-	import type { PageData } from './$types';
-
-	export let data: PageData;
-</script>
-
-<h1>{data.post.title}</h1>
-
-<div>{@html data.post.content}</div>
-```
-
-## Virtual files
-
-When running the dev server or the build, types are auto-generated. Thanks to the file-system based routing, SvelteKit is able to infer things like the correct parameters or parent data by traversing the route tree. The result is outputted into one `$types.d.ts` file for each route, which looks roughly like this:
-
-```ts
-// @errors: 2344 2694 2307
-// $types.d.ts
-import type * as Kit from '@sveltejs/kit';
-
-// types inferred from the routing tree
-type RouteParams = { slug: string };
-type RouteId = '/blog/[slug]';
-type PageParentData = {};
-
-// PageServerLoad type extends the generic Load type and fills its generics with the info we have
-export type PageServerLoad = Kit.ServerLoad<RouteParams, PageParentData, RouteId>;
-
-// The input parameter type of the load function
-export type PageServerLoadEvent = Parameters<PageServerLoad>[0];
-
-// The return type of the load function
-export type PageData = Kit.ReturnType<
-	typeof import('../src/routes/blog/[slug]/+page.server.js').load
->;
-```
-
-We don't actually write `$types.d.ts` into your `src` directory — that would be messy, and no-one likes messy code. Instead, we use a TypeScript feature called [`rootDirs`](https://www.typescriptlang.org/tsconfig#rootDirs), which lets us map ‘virtual’ directories to real ones. By setting `rootDirs` to the project root (the default) and additionally to `.svelte-kit/types` (the output folder of all the generated types) and then mirroring the route structure inside it we get the desired behavior:
-
-```
-// on disk:
-.svelte-kit/
-├ types/
-│ ├ src/
-│ │ ├ routes/
-│ │ │ ├ blog/
-│ │ │ │ ├ [slug]/
-│ │ │ │ │ └ $types.d.ts
-src/
-├ routes/
-│ ├ blog/
-│ │ ├ [slug]/
-│ │ │ ├ +page.server.ts
-│ │ │ └ +page.svelte
-
-
-// what TypeScript sees:
-src/
-├ routes/
-│ ├ blog/
-│ │ ├ [slug]/
-│ │ │ ├ $types.d.ts
-│ │ │ ├ +page.server.ts
-│ │ │ └ +page.svelte
-```
-
-## Type safety without types
-
-Thanks to the automatic type generation we get advanced type safety. Wouldn't it be great though if we could just omit writing the types at all? As of today you can do exactly that:
-
-```diff
-// src/routes/blog/[slug]/+page.server.ts
--import type { PageServerLoadEvent } from './$types';
-
--export async function load(event: PageServerLoadEvent) {
-+export async function load(event) {
-    return {
-        post: await database.getPost(event.params.post)
-    };
-}
-```
-
-```diff
-<!-- src/routes/blog/[slug]/+page.svelte -->
-<script lang="ts">
--    import type { PageData } from './$types';
--    export let data: PageData;
-+    export let data;
-</script>
-```
-
-While this is super convenient, this isn't just about that. It's also about _correctness_: When copying and pasting code it's easy to accidentally get `PageServerLoadEvent` mixed up with `LayoutServerLoadEvent` or `PageLoadEvent`, for example — similar types with subtle differences. Svelte's major insight was that by writing code in a declarative way we can get the machine to do the bulk of the work for us, correctly and efficiently. This is no different — by leveraging strong framework conventions like `+page` files, we can make it easier to do the right thing than to do the wrong thing.
-
-This works for all exports from SvelteKit files (`+page`, `+layout`, `+server`, `hooks`, `params` and so on) and for `data`, `form` and `snapshot` properties in `+page/layout.svelte` files.
-
-To use this feature with VS Code install the latest version of the Svelte for VS Code extension. For other IDEs, use the latest versions of the Svelte language server and the Svelte TypeScript plugin. Beyond the editor, our command line tool `svelte-check` also knows how to add these annotations since version 3.1.1.
-
-## How does it work?
-
-Getting this to work required changes to both the language server (which powers the IntelliSense in Svelte files) and the TypeScript plugin (which makes TypeScript understand Svelte files from within `.ts/js` files). In both we auto-insert the correct types at the correct positions and tell TypeScript to use our virtual augmented file instead of the original untyped file. That in combination with mapping the generated and original positions back and forth gives the desired result. Since `svelte-check` reuses parts of the language server under the hood, it gets that feature for free without further adjustments.
-
-We'd like to thank the Next.js team for [inspiring](https://twitter.com/shuding_/status/1625263297573400578) this feature.
-
-## What's next
-
-For the future we want to look into making even more areas of SvelteKit type-safe — links for example, be it in your HTML or through programmatically calling `goto`.
-
-TypeScript is eating the JavaScript world — and we're here for it! We care deeply about first class type safety in SvelteKit, and we provide you the tools to make the experience as smooth as possible — one that also scales beautifully to larger Svelte code bases — regardless of whether you use TypeScript or typed JavaScript through JSDoc.
diff --git a/documentation/blog/2023-04-01-whats-new-in-svelte-april-2023.md b/documentation/blog/2023-04-01-whats-new-in-svelte-april-2023.md
deleted file mode 100644
index 7849621d87..0000000000
--- a/documentation/blog/2023-04-01-whats-new-in-svelte-april-2023.md
+++ /dev/null
@@ -1,116 +0,0 @@
----
-title: "What's new in Svelte: April 2023"
-description: 'Loads of new Svelte compiler features, plus Svelte Summit and SvelteHack'
-author: Dani Sandoval
-authorURL: https://dreamindani.com
----
-
-Happy April, everyone! This month, we're covering all the new features in the Svelte compiler, some quality-of-life improvements in SvelteKit and a huge showcase (like always).
-
-In core team news, Dominic Gannaway has joined Vercel to work on Svelte full-time! Dominic is a world-class expert on wringing performance out of javascript engines, on the DOM, on reactivity, on accessibility, and more! You might know him as the creator of the [Inferno](https://www.infernojs.org/) UI framework or [Lexical](https://lexical.dev/), Meta's WYSIWYG editor. It'll be great to see his talents at work across the Svelte ecosystem 🌱
-
-Don't forget! Svelte Summit Spring, Svelte's 6th virtual conference, will be happening on May 6th. Also, there's just two weeks left until the end of [SvelteHack](https://hack.sveltesociety.dev/)... It's a great opportunity to share your creations with the community and maybe even earn a prize!
-
-Now let's jump into this month's changes...
-
-## What's new in Svelte
-
-- A bunch of new features are now available as of **3.56.0**!
-  - Add `|stopImmediatePropagation` event modifier for `on:eventname` ([#5085](https://github.com/sveltejs/svelte/issues/5085), [Docs](https://svelte.dev/docs#template-syntax-element-directives-on-eventname))
-  - Add `axis` parameter to `slide` transition ([#6182](https://github.com/sveltejs/svelte/issues/6182), [Docs](https://svelte.dev/docs#run-time-svelte-transition-slide))
-  - Add `readonly` utility to convert `writable` store to readonly ([#6518](https://github.com/sveltejs/svelte/pull/6518), [Docs](https://svelte.dev/docs#run-time-svelte-store-writable))
-  - Add `readyState` binding for media elements ([#6666](https://github.com/sveltejs/svelte/issues/6666), [Docs](https://svelte.dev/docs#template-syntax-element-directives-bind-property-media-element-bindings))
-  - Add `naturalWidth` and `naturalHeight` bindings to images ([#7771](https://github.com/sveltejs/svelte/issues/7771), [Docs](https://svelte.dev/docs#template-syntax-element-directives-bind-property-image-element-bindings))
-- Support `<!-- svelte-ignore ... -->` on components ([#8082](https://github.com/sveltejs/svelte/issues/8082))
-- Inputs in a `bind:group` will clear when their value is set to `undefined` (**3.56.0**, [#8214](https://github.com/sveltejs/svelte/issues/8214))
-- `<input>` values will now persist when swapping elements with spread attributes in an `{#each}` block (**3.56.0**, [#7578](https://github.com/sveltejs/svelte/issues/7578))
-- Better warnings across the board - from `noreferrer` to `aria` rules (**3.56.0**)
-- Add <svelte:document> (**3.57.0**, [#3310](https://github.com/sveltejs/svelte/issues/3310))
-- The `style:` directive will now take precedence over a `style=` attribute (**3.57.0**, [#7475](https://github.com/sveltejs/svelte/issues/7475))
-- CSS units are now supported in the `fly` and `blur` transitions (**3.57.0**, [#7623](https://github.com/sveltejs/svelte/pull/7623), [Docs](https://svelte.dev/docs#run-time-svelte-transition))
-
-For all the changes to the Svelte compiler, including unreleased changes, check out the [CHANGELOG](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md).
-
-## What's new in SvelteKit
-
-- You can now get all cookies for a request with `cookies.getAll` (**1.10.0**, [#9287](https://github.com/sveltejs/kit/pull/9287), [Docs](https://kit.svelte.dev/docs/types#public-types-cookies))
-- Easily manage the submission status of (multiple) forms with the new exposed `submitter` parameter in `use:enhance` (**1.12.0**, [#9425](https://github.com/sveltejs/kit/pull/9425), [Docs](https://kit.svelte.dev/docs/types#public-types-submitfunction))
-- The default error page now has dark mode styles (**1.13.0**, [#9460](https://github.com/sveltejs/kit/pull/9460))
-- You can now omit types on all methods and variables with special meaning to SvelteKit and still benefit from full type safety! Read more about it in the [announcement blog post](https://svelte.dev/blog/zero-config-type-safety)
-
----
-
-## Community Showcase
-
-**Apps & Sites built with Svelte**
-
-- [Peerbeer](https://peer.beer/) lets you share files peer-to-peer (p2p) without any third parties or data limits
-- [unplaneted](https://unplaneted.com/) is an interface for exploring very large space images
-- [PokeBook](https://github.com/pokegh0st/pokebook) is a digital notebook for writing poetry that provides a beautiful distraction-free environment and autosave
-- [papi](https://papi.run/) lets you create prompts for AI models and share them with others with a unique link
-- [Mathesar](https://github.com/centerofci/mathesar) is a straightforward open source tool that provides a spreadsheet-like interface to a PostgreSQL database
-- [SQLite Playground](https://neil.macmunn.com/sqlite#) lets you learn how SQLite runs and stores data in the browser
-- [svgl](https://github.com/pheralb/svgl) is a beautiful library with SVG logos
-- [Swehl](https://swehl.com/) is an eCommerce store, community and tutorial site for breastfeeding mothers
-- [Codeverter](https://github.com/TGlide/codeverter) is a GPT-powered code converter, allowing you to convert between different languages and frameworks
-- [Game On Or Not](https://gameonornot.com/) is a free web app that helps you organize sports with your friends
-- [Sveltia CMS](https://github.com/sveltia/sveltia-cms) is a Git-based lightweight headless CMS
-
-**Learning Resources**
-
-_Featuring Svelte Contributors and Ambassadors_
-
-- [Streaming, snapshots, and other new features since SvelteKit 1.0](https://svelte.dev/blog/streaming-snapshots-sveltekit) by Geoff Rich on the svelte.dev Blog
-- [Dev Vlog: Rich Harris shows us what's new in Svelte and Kit, March 2023](https://www.youtube.com/watch?v=vgXgex5E-8g) from Svelte Society
-  - If you missed this one live, check out [the next one](https://www.youtube.com/watch?v=MJHO6FSioPI) - scheduled for April 5th
-- [Svelte Society - London February 2023](https://www.youtube.com/watch?v=RkQ_f7XxdMI)
-- Svelte Radio episodes from this month:
-  - [We all live in a Svelte Submarine](https://www.svelteradio.com/episodes/we-all-live-in-a-svelte-submarine)
-  - [Building furniture using Svelte with Bert Bengtson](https://www.svelteradio.com/episodes/building-furniture-using-svelte-with-bert-bengtson)
-  - [Svelte Hackathon Announcement](https://www.svelteradio.com/episodes/svelte-hackathon-announcement)
-  - [LevelUpTuts 6 months later with Scott Tolinski](https://www.svelteradio.com/episodes/leveluptuts-6-months-later-with-scott-tolinski)
-  - [I got a cold and had fever dreams about React 😱](https://www.svelteradio.com/episodes/i-got-a-cold-and-had-fever-dreams-about-react)
-- This Week In Svelte videos:
-  - [2023 March 10 - New prompts! Underline your links!](https://www.youtube.com/watch?v=WiCjQVoE-3k)
-  - [2023 March 17 - More a11y warnings! How to: Dynamic Form Actions!](https://www.youtube.com/watch?v=sRhZQ-2VxVU)
-  - [2023 March 23 - SvelteKit 1.13.0, Vitest and Playwright overview](https://www.youtube.com/watch?v=vpbhsbg2otg)
-
-_To Watch or Hear_
-
-- [Full Stack SvelteKit App Deployment Using Vercel And Supabase For $0](https://www.youtube.com/watch?v=uAF4Yd-gddo) by Joy of Code
-- [Why Is Svelte.js so Popular?](https://www.youtube.com/watch?v=73Y8Yyg54zc) by Prismic
-- [Interactive Tables in SvelteKit with TanStack Table](https://www.youtube.com/watch?v=-Zuo3UWjjI8) by hartenfellerdev
-- [SvelteKit + GraphQL with Houdini](https://www.youtube.com/watch?v=ADnaRwQZfqw&list=PLm0ILX0LGQk_220vvpsbyXH2VesRlCm-E) by Aftab Alam
-
-_To Read_
-
-- [Thoughts on Svelte](https://tyhopp.com/notes/thoughts-on-svelte) by Ty Hopp
-- [Storybook](https://storybook.js.org/blog/storybook-for-sveltekit/) on why (and how) it supports SvelteKit
-- [Svelte Authentication Tutorial with Authorizer](https://thethinks.vercel.app/blog/svelte-authorizer) by The Thinks
-- [Use Zod to Validate Forms on the Server with SvelteKit](https://blog.robino.dev/posts/svelte-zod-error) by Ross Robino
-- [Do I need a sitemap for my SvelteKit app, and how do I create it?](https://maier.tech/posts/do-i-need-a-sitemap-for-my-sveltekit-app-and-how-do-i-create-it) and [Complement zero-effort type safety in SvelteKit with Zod for even more type safety](https://maier.tech/posts/complement-zero-effort-type-safety-in-sveltekit-with-zod-for-even-more-type-safety) and [Configuring Turborepo for a SvelteKit monorepo](https://maier.tech/posts/configuring-turborepo-for-a-sveltekit-monorepo) by Thilo Maier
-- [Adding page transitions in SvelteKit](https://joshcollinsworth.com/blog/sveltekit-page-transitions) by Josh Collinsworth
-- [E2E testing with SvelteKit and Playwright](https://www.okupter.com/blog/e2e-testing-with-sveltekit-and-playwright) and [Why you should use TypeScript in your next SvelteKit projects](https://www.okupter.com/blog/sveltekit-with-typescript) by Justin Ahinon
-- [Understanding the structure of a SvelteKit project](https://www.inow.dev/understanding-the-structure-of-a-svelte-kit-project/) by Igor Nowosad
-- [Secure Authentication in Svelte using Hooks](https://dev.to/brewhousedigital/secure-authentication-in-svelte-using-hooks-k5j) by Brewhouse Digital
-
-**Libraries, Tools & Components**
-
-- [@vavite/node-loader](https://github.com/cyco130/vavite/tree/main/packages/node-loader) is a Node ESM loader that uses Vite to transpile modules to enable sourcemap and breakpoints support in SvelteKit (or any Vite) project
-- [Inlang](https://github.com/inlang/inlang) is building i18n for SvelteKit and is [looking for feedback](https://www.reddit.com/r/sveltejs/comments/11ydtui/sveltekit_and_i18n_lets_finally_solve_this_never/)
-- [Skeleton](https://www.skeleton.dev/) - the UI toolkit for Svelte and Tailwind - is now 1.0 🎉
-- [SvelteKit-integrated-WebSocket](https://github.com/suhaildawood/SvelteKit-integrated-WebSocket) provides first-class support for WebSockets within SvelteKit by attaching a WebSocket server to the global state
-- [Svelte Legos](https://github.com/ankurrsinghal/svelte-legos) is a collection of essential Svelte Composition Utilities
-- [svelte-stored-writable](https://github.com/efstajas/svelte-stored-writable) is a drop-in extension of Svelte's writable that additionally stores and restores its contents using localStorage.
-- [svelte-virtual](https://github.com/ghostebony/svelte-virtual) provides Svelte components for efficiently rendering large lists.
-- ChatGPT Clones and Starters
-  - [chatwithme.chat](https://github.com/kierangilliam/chatwithme.chat) is an open source ChatGPT UI
-  - [SlickGPT](https://github.com/ShipBit/slickgpt) is a light-weight "use-your-own-API-key" web client for the OpenAI API written in Svelte
-  - [AI Chat Bestie](https://github.com/KTruong008/aichatbestie) is an unofficial ChatGPT app
-  - [chatgpt-svelte](https://github.com/ichbtrv/chatgpt-svelte) is a simple UI for the ChatGPT Open AI API
-
-Thanks for reading! And don't forget to try your hand at the [Svelte Hackathon](https://hack.sveltesociety.dev/) 🧑‍💻
-
-As always, feel free to let us know if we missed anything on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.gg/svelte).
-
-See ya next time!
diff --git a/documentation/blog/2023-05-01-whats-new-in-svelte-may-2023.md b/documentation/blog/2023-05-01-whats-new-in-svelte-may-2023.md
deleted file mode 100644
index 77970c3ae6..0000000000
--- a/documentation/blog/2023-05-01-whats-new-in-svelte-may-2023.md
+++ /dev/null
@@ -1,117 +0,0 @@
----
-title: "What's new in Svelte: May 2023"
-description: 'New Ambassadors, a new ESLint plugin and a whole bunch of SvelteHack submissions'
-author: Dani Sandoval
-authorURL: https://dreamindani.com
----
-
-Before we dive into the updates, there's a few announcements worth mentioning at the top:
-
-## New Svelte Ambassadors
-
-Regular features of this newsletter and all-around great content creators for Svelte [JoyOfCode](https://www.youtube.com/@JoyofCodeDev) and [HuntaByte](https://www.youtube.com/@Huntabyte) have been appointed as Svelte Ambassadors. Ambassadors are people who are well known for their helpfulness and contributions and for upholding Svelte’s reputation as a friendly, welcoming community, and we’re deeply grateful for their involvement!
-
-## SvelteHack winners will be announced May 6th
-
-In a just a few days, we'll find out who won [SvelteHack](https://hack.sveltesociety.dev/) - the Svelte Hackathon that took place between February 17th and April 17th. Tune in to [Svelte Summit](https://www.sveltesummit.com/) on May 6th to see if your favorite project was chosen 👀
-
-Lots of submissions to the hackathon are featured in this month's showcase... but first, let's see what's new!
-
-## What's new in Svelte
-
-- `style` blocks now support CSS `@container` queries (**3.58.0**)
-- `bind:innerText` is now available for `contenteditable` elements (**3.58.0**)
-- A new accessability warning, `a11y-interactive-supports-focus` will now warn when interactive elements are not focusable (**3.58.0**)
-
-For all the changes to the Svelte compiler, including unreleased changes, check out the [CHANGELOG](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md).
-
-## What's new in SvelteKit
-
-- When hot module reloading (HMR) is enabled, the page will reload after an error is fixed (**1.14.0**, [#9497](https://github.com/sveltejs/kit/pull/9497))
-- Two apps loaded into the same html page can now be loaded simultaneously in "embedded" mode (**1.15.7**, [#9610](https://github.com/sveltejs/kit/pull/9610))
-- Vite's compilation will now log warnings for packages that use the `svelte` field to resolve Svelte files differently than standard Vite resolve (**vite-plugin-svelte@2.1.0**, **kit@1.15.8**)
-
-## What's new in Language Tools
-
-- Support for `<svelte:document>` ([#1958](https://github.com/sveltejs/language-tools/pull/1958)) and intellisense report for new bindings ([#1957](https://github.com/sveltejs/language-tools/pull/1957)) (**107.3.0**)
-- The new fix-all menu option for the "Quick fix..." makes it easy to "Add all missing imports" and other detected errors (**107.3.0**, [#1939](https://github.com/sveltejs/language-tools/pull/1939))
-- We have a new and better official [ESLint plugin](https://github.com/sveltejs/eslint-plugin-svelte)! Previous support for Svelte in ESLint did not handle the template AST well, resulting in false positive/negatives and a high barrier to custom ESLint rules. This new official version is based on [ota-meshi](https://github.com/ota-meshi)'s [svelte-eslint-parser](https://github.com/sveltejs/svelte-eslint-parser) and is ready for prime time. Try it out and [share your feedback](https://github.com/sveltejs/eslint-plugin-svelte/issues)!
-
----
-
-## Community Showcase
-
-**Apps & Sites built with Svelte**
-
-- [Sound of War](https://soundofwar.art/) is a storytelling data visualization project to help understand the scale of destruction in Ukraine
-- [Syntax FM's swag shop](https://swag.syntax.fm/) is now built with SvelteKit, PlanetScale and Prisma
-- [Appreciation Jar](https://appreciation.place/) is your own private space where you can send encouraging and appreciative messages to your partner
-- [Japanese Jouzu](https://jp-jouzu.netlify.app/) is a Japanese sound and symbol learning app
-- [MarkMyImages](https://www.markmyimages.com/) is a tool to bulk watermark, image resize, rename, effects, and more - all on-device for speed and privacy
-- [Immich](https://github.com/immich-app/immich) is a self-hosted photo and video backup solution directly from your mobile phone
-- [Earbetter](https://github.com/ryanatkn/earbetter) is an ear training game and tools for playing and programming music and audio
-- [Tune Twisters](https://tune-twisters.vercel.app/) is a guessing game for songs... in reverse
-- [ResponseHunt](https://www.responsehunt.com/) is a mystery game based on browser requests - use your programming skills to get to the “golden” response
-- [Wolfensvelte 3D](https://github.com/snuffyDev/Wolfensvelte-3D/) is a Svelte "port" of Wolfenstein 3D
-- [Code Solving](https://code-svelte.vercel.app/) teaches how to solve problems with code
-- [Make Bookmarklets](https://make-bookmarklets.com/) is a quick way to create JavaScript bookmarklets with linting, intellisense and auto-minification
-- [GeniePM](https://genie.pm) is an AI tool to help Product Managers write user stories and requirements
-- [Bitesized News](https://bitesized.news/) is an AI that delivers news digests and responds to questions via chat
-- [Open Tunings](https://www.open-tunings.com/) is a place to explore alternative guitar tunings without having to retune your guitar
-- [BlinkSMS](https://blinksms.se/#) is a text alert tool for Stockholm Student Housing to help with booking laundry times
-- [Dev Links](https://github.com/killswitchh/dev-links) helps dev showcase multiple links in a single place - similar to Linktree and Kofi
-- [Audiogest](https://audiogest.app/) is a tool to convert speech to text & summarize any audio
-- [MineSweep](https://alecames.com/minesweep) is a rendition of Minesweeper built with Svelte and JavaScript
-- [Biolytics](https://biolytics.app/) lets you import your lab tests to see all your lab tests in one place
-- [Zero share](https://github.com/ntsd/zero-share) is a secure P2P file sharing using WebRTC
-- [Svelte lab](https://www.sveltelab.dev/) is a sandbox for creating and sharing SvelteKit projects
-
-**Learning Resources**
-
-_Featuring Svelte Contributors and Ambassadors_
-
-- [Dev Vlog: April 2023 - TypeScript vs JSDoc, Transitions API, Dominic Gannaway joins Svelte team](https://www.youtube.com/watch?v=MJHO6FSioPI)
-- [Rich Harris on frameworks, the web, and the edge.](https://www.youtube.com/watch?v=uXCipjbcQfM) from Vercel's Svelte Meetup in NYC
-- [Svelte & SvelteKit](https://frontendmasters.com/workshops/svelte-sveltekit/) taught by Rich Harris on Frontend Masters
-- This Week in Svelte:
-  - [2023 March 31 - SvelteKit, Svelte; static sites and headless CMS demos](https://www.youtube.com/watch?v=-YjLubiieYs)
-  - [2023 April 22 - SvelteKit 1.15.7, skip links, error handling, static assets](https://www.youtube.com/watch?v=SCMosMo85_8)
-  - [2023 April 14 - SvelteKit 1.15.5, accessible buttons, advanced toggle state 🧪🔥](https://www.youtube.com/watch?v=H2kOO5mvUQs)
-  - [2023 April 21 - SvelteKit 1.15.7, skip links, error handling, static assets](https://www.youtube.com/watch?v=SCMosMo85_8)
-- Svelte Radio
-  - [Using Svelte in React with Puru Vijay](https://www.svelteradio.com/episodes/using-svelte-in-react-with-puru-vijay)
-  - [Eric Brehault and Nuclia](https://www.svelteradio.com/episodes/eric-brehault-and-nuclia)
-  - [Svelte at AppWrite with Alex Patterson](https://www.svelteradio.com/episodes/svelte-at-appwrite-with-alex-patterson)
-  - [Svelte in Research at Dartmouth with Wasita and Eshin](https://www.svelteradio.com/episodes/svelte-in-research-at-dartmouth-with-wasita-and-eshin)
-
-_To Watch_
-
-- [The Complete SvelteKit Course For Building Modern Web Apps](https://www.youtube.com/watch?v=MoGkX4RvZ38) and [Simple SvelteKit Page Transitions](https://www.youtube.com/watch?v=gkw1wFIXM_8) by Joy of Code
-- [Svelte For React Developers | Your Next JavaScript Framework?](https://www.youtube.com/watch?v=smqE0y0z0CA) by Cretezy
-- [Svelte & SvelteKit: The Complete Guide](https://www.udemy.com/course/svelte-and-sveltekit/?ranMID=39197&ranEAID=msYS1Nvjv4c&ranSiteID=msYS1Nvjv4c-oN6aTXp3jgDgUps8JCGxcg&LSNPUBID=msYS1Nvjv4c&utm_source=aff-campaign&utm_medium=udemyads) by Ali Alaa on Udemy
-- [ChatGPT-4 with SvelteKit 🤖 Generative AI on the EDGE 🌍](https://www.youtube.com/watch?v=Uw5GZg96kD8) by Johnny Magrippis
-
-_To Read_
-
-- [Headless WordPress with GraphQL and SvelteKit](https://www.okupter.com/blog/headless-wordpress-graphql-sveltekit) and [How to fix the duplicate meta tags issue in SvelteKit](https://www.okupter.com/blog/sveltekit-fix-duplicate-metatags-issue) by Justin Ahinon
-- [How to setup tRPC in a SvelteKit project](https://raqueebuddinaziz.com/blog/how-to-setup-trpc-in-a-sveltekit-project/) by Raqueebuddin Aziz
-- [Better Data Visualizations with Svelte](https://www.newline.co/courses/better-data-visualizations-with-svelte/welcome) by newline
-- [Offline App with SvelteKit + SQLite Part 1: Setup WebAssembly SQLite](https://www.youtube.com/watch?v=Uvnzwp72Ze8) by hartenfellerdev
-
-**Libraries, Tools & Components**
-
-- [Sveltris](https://github.com/mokshit06/sveltris) lets you intermix UI primitives like components, and state primitives like hooks between frameworks, without even noticing
-- [SwiftMarket](https://github.com/SwiftMarket/swiftmarket-sveltekit) is an E-Commerce solution built with SvelteKit, Pocketbase as a database and Stripe for payments
-- [Svelegante](https://www.npmjs.com/package/svelegante) is a Classy writable store for Svelte
-- [Table Generator](https://www.table-generator.de/) lets you create, design and customize your own tables tables online using a graphical editor
-- [Svelte Animated Headline](https://www.npmjs.com/package/svelte-animated-headline) is an animated headline component that can grab attention in an informative way
-- [SvelteKit Music App Example](https://github.com/tguelcan/music) demonstrates how to connect and process data as well as some practical examples of how to develop frontend components with TailwindCSS
-- [Socio](https://www.npmjs.com/package/socio) is a WebSocket Real-Time Communication (RTC) API framework to connect your front-end logic to a back-end database reactively
-- [Flowbite Svelte](https://flowbite-svelte.com/) is an official Flowbite component library for Svelte
-- [Wundergraph](https://wundergraph.com/blog/introducing_svelte_query_client), a backend for frontend framework, just released their Svelte Query client
-- [Lucia](https://lucia-auth.com/blog/lucia-1) just reached 1.0 for their simple and flexible auth library for SvelteKit
-- [svelte-stepper](https://github.com/efstajas/svelte-stepper) is a simple library for building animated stepper flows with Svelte
-
-As always, feel free to let us know if we missed anything on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.gg/svelte).
-
-See ya next time!
diff --git a/documentation/blog/2023-06-01-whats-new-in-svelte-june-2023.md b/documentation/blog/2023-06-01-whats-new-in-svelte-june-2023.md
deleted file mode 100644
index add2d8a413..0000000000
--- a/documentation/blog/2023-06-01-whats-new-in-svelte-june-2023.md
+++ /dev/null
@@ -1,103 +0,0 @@
----
-title: "What's new in Svelte: June 2023"
-description: 'SvelteHack winners, lots of new bindings, Svelte 4.0.0-next.0, and a bunch of new features in SvelteKit'
-author: Dani Sandoval
-authorURL: https://dreamindani.com
----
-
-Welcome to June everyone and [congrats to our SvelteHack winners](https://hack.sveltesociety.dev/winners), across all the categories! If you missed it, these winners were announced at Svelte Summit on May 6th 🎉
-
-The entire playlist of the summit, including all the talks broken up in to separate videos, can be found [on the Svelte Society YouTube channel](https://www.youtube.com/playlist?list=PL8bMgX1kyZTiODueVnrK5GR42u3hgN13X). So check it out, if you haven't already.
-
-Lots to cover in this month's newsletter, including a lot of improvements to both Svelte and Kit...
-
-## What's new in Svelte
-
-[Svelte 4.0.0-next.0](https://github.com/sveltejs/svelte/releases), the first pre-release version of Svelte 4.0 is out! An explanation of the changes, improvements and goals of this release can be found in [the Releases page on GitHub](https://github.com/sveltejs/svelte/releases/tag/svelte%404.0.0-next.0). Check it out to get an early sneak peek of the future of Svelte. It also includes a migration guide, for those interested in the minimal amount of breaking changes and deprecations.
-
-Svelte 3.59.0 is also out, with a ton of new features:
-
-- Restructuring arrays with the spread operator (`...`) is now handled correctly (**3.59.0**, [#8552](https://github.com/sveltejs/svelte/issues/8552), [#8554](https://github.com/sveltejs/svelte/issues/8554))
-- The new `a11y-autocomplete-valid` warning will now warn if the autocomplete attribute isn't used according to the HTML specification (**3.59.0**, [Examples](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/d32a27fb64f4127d31e4e76bd08e319cfaf0ba53/docs/rules/autocomplete-valid.md), [#8520](https://github.com/sveltejs/svelte/pull/8520))
-- `fullscreenElement` and `visibilityState` bindings are now available for the `<svelte:document>` element (**3.59.0**, [#8507](https://github.com/sveltejs/svelte/pull/8507))
-- The `devicePixelRatio` binding is now available for the `<svelte:window>` element (**3.59.0**, [#8285](https://github.com/sveltejs/svelte/issues/8285))
-- The `ResizeObserver` bindings `contentRect`/`contentBoxSize`/`borderBoxSize`/`devicePixelContentBoxSize` are now usable with `bind:`(**3.59.0**, [#8022](https://github.com/sveltejs/svelte/pull/8022))
-
-For all the changes to the Svelte compiler, including unreleased changes, check out the [CHANGELOG](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md).
-
-## What's new in SvelteKit
-
-- Route-level entry generators allow exporting an entries function from `+page`, `+page.server`, and `+server` files to supply possible values for params for prerendering (**1.16.0**, [Docs](https://kit.svelte.dev/docs/page-options#entries), [#9571](https://github.com/sveltejs/kit/pull/9571))
-- URLs in `<meta>` tags are now crawled to make programmatic social-images much easier (**1.17.0**, [Docs](https://kit.svelte.dev/docs/seo#manual-setup-title-and-meta), [#9900](https://github.com/sveltejs/kit/pull/9900))
-- `data` and `form` have been renamed to `formData` and `formElement` respectively in the `enhance` function. Using them through the old names will log a deprecation warning and they'll be removed in a future version. (**1.17.0**, [Docs](https://kit.svelte.dev/docs/form-actions#progressive-enhancement-use-enhance), [#9902](https://github.com/sveltejs/kit/pull/9902))
-- Link options can now be set to `true` and `false` (**1.19.0**, [Docs](https://kit.svelte.dev/docs/link-options#disabling-options), [#10039](https://github.com/sveltejs/kit/pull/10039))
-- The new `resolvePath` export can be used to build relative paths from route IDs and parameters (**1.19.0**, [Docs](https://kit.svelte.dev/docs/modules#sveltejs-kit-resolvepath), [#9949](https://github.com/sveltejs/kit/pull/9949))
-
----
-
-## Community Showcase
-
-**Apps & Sites built with Svelte**
-
-- [a-maze](https://github.com/nedredmond/a-maze) is a simple maze generator (using DFS) with any dimensions between 5 cells and 75 cells
-- [Windows 11 in Svelte](https://github.com/yashash-pugalia/win11-svelte) attempts to replicate the Windows 11 desktop experience on web
-- [JsonCrunch](https://github.com/aghorui/jsoncrunch) is a JSON viewing, transformation and querying tool meant for quickly manipulating small to medium size pieces of JSON data
-- [Typepost](https://dezain.io/typepost/) is a simple text post generator for social media
-- [tall.ly](https://tall.ly/) is a website for sharing bookmarks ([example](https://tall.ly/zx/icons))
-- [bbchallenge](https://github.com/bbchallenge/bbchallenge) is a collaborative environment to prove or disprove the Busy Beaver conjecture
-- [Reddit Map](https://github.com/iDPI-Umass/reddit-map) is a project of computer, data, and social scientists to explore and visualize Reddit
-- [WeWatch](https://github.com/orosmatthew/wewatch) allows watching videos together in sync
-- [Wonderplan](https://wonderplan.ai/) is an AI-Powered Trip Planner tailored to your preferences and covering all aspects of your trip
-- [CodingView.io](https://codingview.io/) is an online coding interview tool
-- [MeatGPT](https://meat-gpt.sonnet.io/) is an art-site that promptly ignores your prompt
-- [Vim Ninja](https://www.vimninja.com/) is an interactive Vim course in the browser
-- [prcl](https://prcl.dev/) is a Pastebin-alternative focused on speed and simplicity
-- [md](https://github.com/rossrobino/md) is a web based markdown editor
-
-**Learning Resources**
-
-_Featuring Svelte Contributors and Ambassadors_
-
-- This Week in Svelte:
-  - [2023 April 28](https://www.youtube.com/watch?v=LlONGghw_MA) - SK 1.15.9, colour contrast, SK reusable types, path aliases
-  - [2023 May 5](https://www.youtube.com/watch?v=jo9osUzHnHY) - SvelteKit 1.16.0, reactive statement lifecycle, custom stores
-  - [2023 May 12](https://www.youtube.com/watch?v=MBSYHW50xb8) - Svelte 4.0 preview, SvelteKit 1.16.3, Svelte 3.59.1
-  - [2023 May 19](https://www.youtube.com/watch?v=CnvU6K12iK4) - SvelteKit 1.18.0, accessible HTML tables, CSS nesting
-  - [2023 May 26](https://www.youtube.com/watch?v=oqroEq1DoKI) - SvelteKit 1.19.0, choosing a UI library, breakpoint debugging
-- Svelte Radio
-  - [Svelte Summit Hypisode](https://www.svelteradio.com/episodes/svelte-summit-hypisode) (May 4, 2023)
-  - [A primer on AI for developers with Swyx from Latent Space](https://www.svelteradio.com/episodes/a-primer-on-ai-for-developers-with-swyx-from-latent-space) (May 11, 2023 | [Video Version](https://www.youtube.com/watch?v=PzImLLdU5Wk))
-
-_To Watch_
-
-- [Build a Blazing Fast SvelteKit Markdown Blog](https://www.youtube.com/watch?v=RhScu3uqGd0), [Page Versus Standalone Endpoints In SvelteKit](https://www.youtube.com/watch?v=8OmsVZuuQMc) and [Learn How Data Flows In Your SvelteKit App](https://www.youtube.com/watch?v=ampDDmT3TU0) by Joy of Code
-- [Build a ChatGPT Plugin with SvelteKit](https://www.youtube.com/watch?v=P4wZ9JIxwjs) by SuperMilkDaddy
-- [Svelte makes Drag And Drop API easy!](https://www.youtube.com/watch?v=lTDKhj83tec) and [Simple native-like App in SvelteKit!](https://www.youtube.com/watch?v=Enl4OPQ2OAM) by Antonio Sarcevic
-- [Let's Learn Svelte.js in 60 Minutes (fun speed run).](https://www.youtube.com/watch?v=0FCbd1XVYWo) by developedbyed
-
-_To Read_
-
-- [Bridging Vue 2 and Svelte](https://workadventu.re/blog/post/bridging-vue2-and-svelte) by Alexis Faizeau
-- [Write Once, Run Anywhere](https://blog.robino.dev/posts/drizzle-svelte) by Ross Robino
-- [Reflections on Migrating my SaaS To SvelteKit](http://sveltekitsaas.com/articles/migrate-saas-to-sveltekit/) by SvelteKitSaaS
-- [Authentication system using rust (actix-web) and SvelteKit](https://dev.to/sirneij/full-stack-authentication-system-using-rust-actix-web-and-sveltekit-1cc6) by John Owolabi Idogun
-- [SvelteKit Forms: Grammar Check App](https://rodneylab.com/sveltekit-forms/), [SvelteKit Ably: Sqvuably Real‑Time Game](https://rodneylab.com/sveltekit-ably/) and [Svelte Login Form Example: Best Practices](https://rodneylab.com/svelte-login-form-example/) by Rodney Lab
-- [The Correct Way to Use Stores in SvelteKit](https://dev.to/jdgamble555/the-correct-way-to-use-stores-in-sveltekit-3h6i) and [Rich Harris is NOT Getting Rid of TS Support in Svelte](https://dev.to/jdgamble555/rich-harris-is-not-getting-rid-of-ts-support-in-svelte-pp6) by Jonathan Gamble
-- [How to add a basic SEO component to SvelteKit](https://maier.tech/posts/how-to-add-a-basic-seo-component-to-sveltekit) by Thilo Maier
-- [SvelteKit Contact Form Example with Airtable](https://scottspence.com/posts/sveltekit-contact-form-example-with-airtable) by Scott Spence
-- [Performant Reactivity with Svelte-Kit](https://itnext.io/performant-reactivity-with-svelte-kit-47d11769c5f) by Erxk
-- [Svelte stores: the curious parts](https://blog.thoughtspile.tech/2023/04/22/svelte-stores/) by Valdimir Klepov
-
-**Libraries, Tools & Components**
-
-- [svelte-svg-transform](https://github.com/bartektelec/svelte-svg-transform) is a tiny library that makes it easier for you to add SVGs and transform them in your Svelte project
-- [sirens](https://github.com/spiegelgraphics/sirens) is a visualization of active air raid sirens in Ukraine by DER SPIEGEL
-- [Sveltronics](https://github.com/vasucp1207/sveltronics) is a collection of Svelte utility functions for your project
-- [Prompta](https://github.com/iansinnott/prompta) is yet another interface for chatting with ChatGPT (or GPT-4)
-- [Colibri](https://github.com/thetinkerinc/colibri) is a lightweight, customizable component library for Svelte apps
-- [Svelte Smart Doc](https://www.sveltron.com/) is a natural language interface to search the Svelte Svelte documentation
-- [Tailwind Elements](https://tailwind-elements.com/docs/standard/integrations/svelte-integration/) now has a Svelte Integration
-
-Thanks for reading! As always, feel free to let us know if we missed anything on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.gg/svelte).
-
-Until next time 👋
diff --git a/documentation/blog/2023-06-22-svelte-4.md b/documentation/blog/2023-06-22-svelte-4.md
deleted file mode 100644
index 89b1e76510..0000000000
--- a/documentation/blog/2023-06-22-svelte-4.md
+++ /dev/null
@@ -1,59 +0,0 @@
----
-title: 'Announcing Svelte 4'
-description: 'Updated performance, developer experience, and site'
-author: The Svelte team
-authorURL: https://svelte.dev/
----
-
-After months in the making, we're excited to announce the stable release of Svelte 4.
-
-Time flies - Svelte 3 was released more than four years ago! In JavaScript-framework-time, that's eons. Svelte’s freshness has persisted throughout, but Node.js and browser APIs have evolved during that time and today we’re updating Svelte to take advantage of some of these improvements. Svelte 4 is mainly a maintenance release, bumping minimum version requirements and tightening up the design in specific areas. It sets the stage for the next generation of Svelte to be released as Svelte 5 - we think you’ll love it.
-
-If you haven't tried Svelte yet, take it for a spin in our [interactive tutorial](https://learn.svelte.dev/), on [StackBlitz](https://sveltekit.new/), or locally with `npx sv create`. Svelte lets you easily put together web UIs leveraging the power of HTML, CSS, JS, and the Svelte compiler. Watch [Svelte Radio Live](https://www.youtube.com/watch?v=72TIVhRtyWE) to learn more about this release.
-
-## What's new
-
-### Performance
-
-This release results in smaller and faster hydration code. To see the impact, SvelteKit users can see their compiled output shrink in size by examining the `.svelte-kit/output/client/_app/immutable/nodes` folder. For example, on [kit.svelte.dev](https://kit.svelte.dev) the JS generated across the whole site was reduced in size by 12.7% (126.3 kB to 110.2 kB).
-
-Svelte 4 reduces the Svelte package size by nearly 75% (10.6 MB down to 2.8 MB), which means less waiting on `npm install`. This improvement will be especially noticeable for users who are loading our interactive learning experience on [learn.svelte.dev](https://learn.svelte.dev) for the first time, users of the Svelte REPL, and users with limited connectivity. The majority of the remaining package size is eslint support, which necessitates distributing a CJS build, and once [the eslint rewrite](https://github.com/eslint/eslint/discussions/16557) is completed the Svelte package size can drop by over another 50%.
-
-The number of dependencies in Svelte has been greatly reduced from 61 down to 16. This means faster downloads for our users as well as less susceptibility to supply chain attacks. We also slightly reduced the number of dependencies in the latest versions of SvelteKit as well.
-
-### Developer experience
-
-Svelte 4 makes the Svelte authoring experience more intuitive and consistent: `|local` is now the default for transitions to avoid animations blocking page transitions, preprocessors are now easier to write, and multiple fixes make CSP easier to set up and use.
-
-For users of web components, the largest change is an overhaul of the way you use Svelte to author custom elements. By changing the way they are generated, a whole class of bugs and inconsistencies was eliminated.
-
-Finally, we’ve also made several [improvements to the IDE authoring experience](https://github.com/sveltejs/svelte/pull/8702):
-cmd+click in svelte modules now takes you to the implementation rather than a `.d.ts` file
-imports from `svelte/internal` are now hidden and will not clutter autocomplete suggestions
-auto-imports now work more reliably
-
-### Updated site, docs, and tutorial
-
-The official [svelte.dev](https://svelte.dev) site has gotten an overhaul. It’s now split into multiple pages with improved mobile nav, overhauled typescript docs, dark mode, and an enhanced REPL. The SvelteKit site is also being updated to match. And we’ve updated all the tutorial links to point to our new [learn.svelte.dev](https://learn.svelte.dev) experience. The old tutorial remains available for users of Safari 16.3 and earlier.
-
-Stay tuned for a more in-depth blog post about all the site changes in the coming days!
-
-## Migrating
-
-Most apps and libraries that are compatible with Svelte 3 should be compatible with Svelte 4. Library authors will need to update the version range to include Svelte 4 if `svelte` is specified in the `peerDependencies`. For application authors, the most common change required will be updating tooling to meet the new minimum version requirements such as Node.js 16. Many other migration steps can be handled with `npx sv migrate svelte-4`.
-
-Read the [migration guide](/docs/v4-migration-guide) for full details.
-
-## Svelte 5: the next generation of Svelte
-
-Svelte 5 will be a rewrite of the Svelte compiler and runtime. Svelte 4 was mainly about setting the ground for these future improvements by adopting modern tooling and dropping support for some legacy versions of various technologies such as older bundlers. These changes will help us in a number of ways such as being able to more easily compare the Svelte 5 and Svelte 4 codebases and being able to run the existing tests against the new implementation. Svelte 5 will bring major new features and performance improvements to Svelte. The changes are still baking and not quite ready to share yet, but stay tuned!
-
-## Changelog
-
-See the full list of changes in the [changelog](https://github.com/sveltejs/svelte/blob/master/packages/svelte/CHANGELOG.md).
-
-## Acknowledgements
-
-First and foremost, thank you to all of the many Svelte maintainers and contributors who made this release possible. Developers contributing multiple PRs to this release were [@dummdidumm](https://github.com/dummdidumm), [@gtm-nayan](https://github.com/gtm-nayan), [@benmccann](https://github.com/benmccann), [@tanhauhau](https://github.com/tanhauhau), [@Karlinator](https://github.com/Karlinator), and [@ngtr6788](https://github.com/ngtr6788). Also, thank you to the many community members who donated to [the Svelte OpenCollective](https://opencollective.com/svelte) - these donations sponsored the site overhaul completed by [PuruVJ](https://github.com/puruvj) as well as a number of recent fixes from [@gtm-nayan](https://github.com/gtm-nayan).
-
-Finally, thank you to the various library maintainers from across the ecosystem who helped prepare for this release. Thank you to [@jessebeach](https://github.com/jessebeach) for the help in getting out new versions of `aria-query` and `axobject-query`, [@jreinhold](https://github.com/jreinhold) for ensuring compatibility with Storybook, and [@yanick](https://github.com/yanick) for updating `svelte-testing-library`. And to ensure things stay working, the [`svelte-ecosystem-ci`](https://github.com/sveltejs/svelte-ecosystem-ci) setup by [@dominikg](https://github.com/dominikg) — which was modeled off his similar work for Vite — has been helping to test against major projects in the ecosystem on an ongoing basis.
diff --git a/documentation/blog/2023-06-29-svelte-dev-overhaul.md b/documentation/blog/2023-06-29-svelte-dev-overhaul.md
deleted file mode 100644
index a3ffd739bf..0000000000
--- a/documentation/blog/2023-06-29-svelte-dev-overhaul.md
+++ /dev/null
@@ -1,96 +0,0 @@
----
-title: 'svelte.dev: A complete overhaul'
-description: 'The new site comes with accessibility fixes, new features and bottom navbar'
-author: Puru Vijay
-authorURL: https://puruvj.dev
----
-
-When the initial version of Svelte v3 was released four years ago, it included the single-page documentation that folks have been familiar with. That documentation structure had stayed the same as Svelte's API surface increased steadily and more details were added. As a result, the single page got larger and larger to the point where it was becoming difficult to find things. The community had been asking for a revamp, and now it's here!
-
-Meet the new [svelte.dev](https://svelte.dev) — a complete overhaul of the old website.
-
-## Multi-page docs
-
-The table of contents had grown to be quite large and you had to scroll across half a dozen screens to see the whole thing. We heard you! The docs are all split up into multiple pages now and all pages list their sections in the righthand sidebar.
-
-All modules exposed by Svelte are also listed in the sidebar under the `Runtime` section:
-
-- [svelte](/docs/svelte)
-- [svelte/store](/docs/svelte-store)
-- [svelte/motion](/docs/svelte-motion)
-- [svelte/transition](/docs/svelte-transition)
-- [svelte/animate](/docs/svelte-animate)
-- [svelte/easing](/docs/svelte-easing)
-- [svelte/action](/docs/svelte-action)
-
-> [svelte/compiler](/docs/svelte-compiler) is under **Compiler and API** section
-
-We've also taken extra care to ensure that all the links from the old website will be redirected to the correct new page.
-
-## Search
-
-The lack of search functionality could make finding stuff a nuisance as <kbd>Ctrl+F</kbd> only returns results in order of occurrence and not order of importance. While <kbd>Ctrl+F</kbd> did have its benefits such as not requiring JS, now that the site has multiple pages, it's not an option anymore.
-
-And for that, the new website comes with a search bar, which searches through the docs and the API surface. Hit <kbd>Ctrl+K</kbd> (or <kbd>CMD+K</kbd> for Mac users) and start searching — it even works without JavaScript!
-
-## Lights, TypeScript, Action!
-
-The new website comes with a JavaScript / TypeScript toggle, so you can view the docs in your preferred flavour. Every module's exported types are listed at the bottom of the page for easy reference. The types are automatically generated from Svelte's source code, so they're always up to date.
-
-All the JavaScript and TypeScript code snippets have type hints available. Just hover over the variable to see its type. This allows the docs to be type checked at build time, which ensures they're never out of date.
-
-We also (finally!) added documentation for [Actions](/docs/svelte-action). Svelte Actions are a way to interact with the DOM, and are a great way to add interactivity to your app. The docs for Actions are also available in TypeScript.
-
-```svelte
-<script lang="ts">
-	import type { Action } from 'svelte/action';
-
-	const foo: Action = (node) => {
-		// the node has been mounted in the DOM
-
-		return {
-			destroy() {
-				// the node has been removed from the DOM
-			}
-		};
-	};
-</script>
-
-<div use:foo />
-```
-
-## Dark mode
-
-After many years of users asking for dark mode on the website so they can read the docs for their night-time coding sessions, we finally added it! The website now has a dark mode toggle, which is also synced with your OS's dark mode settings. It can be toggled from the top navbar (bottom navbar on mobile).
-
-## Updated REPL
-
-The REPL has been rewritten from scratch to be fully typesafe and comes with features like dark mode. It was reimplemented to upgrade to CodeMirror 6 which comes with many accessibility improvements, multi-select mode, performance improvements, tree-shaking, and many more features.
-
-## Redesigned homepage
-
-Is it a website redesign if the homepage doesn't get the same amount of love? 🙃
-
-The homepage has also been updated to align with [kit.svelte.dev](https://kit.svelte.dev) and features the beautiful Svelte Machine by [@vedam](https://github.com/vedam).
-
-## Bottom navigation!
-
-We sent out a [tweet](https://twitter.com/Rich_Harris/status/1664712880791404546) about experimenting with bottom navigation bar on mobile rather than the conventional top navbar. The response was overwhelmingly positive, so we went ahead and added it! This makes it easier to navigate the website on mobile with just one hand. We also made sure that you'll get to where you want with as few interactions as possible. If you're in the docs section of the site, you'll likely want to browse other documentation pages, which is why the navbar will show these by default when opening it with the option to go one level up to the general site navigation.
-
-If you're on mobile, you can already see it at the bottom. If you're on desktop, you can see it by resizing your browser window to a smaller size.
-
-## Unification of Svelte websites
-
-Now [svelte.dev](https://svelte.dev), [kit.svelte.dev](https://kit.svelte.dev), and [learn.svelte.dev](https://learn.svelte.dev) all use the same design system and are more consistent with each other. This makes it easier to navigate between the websites and also makes it easier to maintain them. We have a package shared across the sites called `@sveltejs/site-kit`, which went through rigorous changes over last 4 months as we have been moving all common code into this package.
-
-For example, we implemented the dark mode toggle in `@sveltejs/site-kit`. We then simply updated the package on [learn.svelte.dev](https://learn.svelte.dev) and [kit.svelte.dev](https://kit.svelte.dev) and those sites got the dark mode toggle automatically (this is also the reason why those sites got the dark mode toggle before the [svelte.dev](https://svelte.dev) relaunch).
-
-## What's next
-
-We have many more things planned to do post-launch. Some of them are:
-
-- Redesigned blog page
-- Improved search
-- Playground: a unified REPL and Examples page
-- Unify the infrastructure of the Svelte REPL and [learn.svelte.dev](https://learn.svelte.dev) by creating a webcontainer-based REPL with rollup as a fallback
-- Address any feedback
diff --git a/documentation/blog/2023-07-01-whats-new-in-svelte-july-2023.md b/documentation/blog/2023-07-01-whats-new-in-svelte-july-2023.md
deleted file mode 100644
index a9134ed5d9..0000000000
--- a/documentation/blog/2023-07-01-whats-new-in-svelte-july-2023.md
+++ /dev/null
@@ -1,102 +0,0 @@
----
-title: "What's new in Svelte: July 2023"
-description: 'Svelte 4.0, new website and a tour around the community'
-author: Dani Sandoval
-authorURL: https://dreamindani.com
----
-
-Svelte 4 is out and folks have been building! There's a bunch of new showcases, libraries and tutorials to share. So let's get right into it...
-
-## What's new in Svelte
-
-The big news this month was the release of Svelte 4.0! You can read all about it in the [Announcing Svelte 4 post](https://svelte.dev/blog/svelte-4). From performance fixes and developer experience improvements to [a brand new site, docs and tutorial](https://svelte.dev/blog/svelte-dev-overhaul)... this new release sets the stage for Svelte 5 with minimal breaking changes.
-
-If you're already on Node.js 16, it's possible you won't see any breaking changes in your project. But be sure to read the [migration guide](https://svelte.dev/docs/v4-migration-guide) for all the details.
-
-For a full list of all the changes to the Svelte compiler, including unreleased changes, check out the [CHANGELOG](https://github.com/sveltejs/svelte/blob/master/packages/svelte/CHANGELOG.md).
-
-## What's new in SvelteKit
-
-This month there were lots of awesome [bug fixes](https://github.com/sveltejs/kit/blob/master/packages/kit/CHANGELOG.md), so be sure to upgrade to the latest version! There are also a few new features to mention:
-
-- The new `event.isSubRequest` boolean indicates whether this is a same-origin fetch request to one of the app's own APIs during a server request (**1.21.0**, [Docs](https://kit.svelte.dev/docs/types#public-types-requestevent), [#10170](https://github.com/sveltejs/kit/pull/10170))
-- A new config option, `config.kit.env.privatePrefix` will set a private prefix on environment variables. This defaults to `''` (**1.21.0**, [Docs](https://kit.svelte.dev/docs/configuration), [#9996](https://github.com/sveltejs/kit/pull/9996))
-- `VERSION` is now exported and accessible via `@sveltejs/kit`. This can be used for feature detection or anything else that requires knowledge of the current version of SvelteKit (**1.21.0**, [Docs](https://kit.svelte.dev/docs/modules#sveltejs-kit-version), [#9969](https://github.com/sveltejs/kit/pull/9969))
-
-For adapter-specific changes, check out the CHANGELOGs in each of [the `adapter` directories](https://github.com/sveltejs/kit/tree/master/packages).
-
----
-
-## Community Showcase
-
-**Apps & Sites built with Svelte**
-
-- [Heerdle](https://github.com/DreaminDani/heerdle) is a remake of Spotify's now-defunct Heardle - the daily music guessing game
-- [Meoweler](https://meoweler.com/) is a travel site filled with cats and helpful facts about popular destinations
-- [A tech lead from IKEA](https://www.reddit.com/r/sveltejs/comments/13w4zg3/comment/jmaxial/?utm_source=share&utm_medium=web2x&context=3) gave a few more details on the way they build pages (and page template) using Svelte
-- [The Quest to Replace Passwords](https://notes.ekzhang.com/papers/passwords) features an interactive comparison visualization for all the popular password management tools
-- [audiogest](https://audiogest.app/en) lets you turn speech to text & summarize any audio in one click
-- [heroify](https://www.heroify.lol/) generates 3D graphics for your website with AI
-- [Diesel Legacy: The Brazen Age](https://store.steampowered.com/app/1959140/Diesel_Legacy_The_Brazen_Age/) is a fighting game whose leaderboard and profile pages were all built in Svelte
-- [markmyimages](https://www.markmyimages.com/) is a watermarking tool with bulk image resize, rename, effects, and more
-- [md.robino.dev](https://github.com/rossrobino/md) is a web based markdown editor
-- [YABin](https://github.com/Yureien/YABin) is Yet Another Pastebin with some very specific features
-
-**Learning Resources**
-
-- [Announcing Svelte 4 post](https://svelte.dev/blog/svelte-4)
-- [svelte.dev: A complete overhaul](https://svelte.dev/blog/svelte-dev-overhaul)
-
-_Featuring Svelte Contributors and Ambassadors_
-
-- [Dev Vlog: June 2023](https://www.youtube.com/watch?v=AOXq89h8saI) - Svelte 4.0 with Rich Harris
-- [PodRocket: Svelte 4](https://podrocket.logrocket.com/svelte-4) with Geoff
-- [This Dot Media: Svelte 4 Launch Party](https://www.youtube.com/watch?v=-9gy_leMmcQ) with Simon, Ben, Geoff, and Puru
-- [Exposing Svelte: Between Two Nerds](https://www.youtube.com/watch?v=kAfotLrebhY) is a comedic conversation between Rich Harris and Dax Raad
-- [Community Tutorial: Self-hosting SvelteKit with a VPS, Docker, CapRover and GitHub Actions](https://www.youtube.com/watch?v=KbIFRVvdgA8) with Stanislav Khromov
-- [SvelteKit and Storybook](https://www.youtube.com/watch?v=1wH7rR7hZlg) with Jeppe Reinhold
-- This Week in Svelte:
-  - [2023 June 2](https://www.youtube.com/watch?v=B2AOYWs6eko) - SvelteKit 1.20.1, Svelte 4 pre-release, Headless UI libraries
-  - [2023 June 9](https://www.youtube.com/watch?v=OG70PKD0hEU) - Updates, Self-hosting SvelteKit, Passing styles to children
-  - [2023 June 16](https://www.youtube.com/watch?v=GNEbC5K34Po) - Svelte 4 next.1, how to create a hamburger menu, group layouts
-  - [2023 June 23](https://www.youtube.com/watch?v=o-qnnbMbmE4) - Svelte 4, Popovers and hover, Real Time requests with SvelteKit
-- Svelte Radio
-  - [SvelteLab - a Svelte REPL for SvelteKit](https://www.svelteradio.com/episodes/sveltelab-a-svelte-repl-for-sveltekit-with-antonio-and-paolo) with Antonio and Paolo
-  - [Svelte Radio Live - Svelte 4 Summer Special](https://www.youtube.com/watch?v=72TIVhRtyWE) with Simon and Puru
-- [Svelte Society - London June 2023](https://www.youtube.com/watch?v=EkH0aMgeIKw)
-- [Using The Svelte Context API With Stores](https://www.youtube.com/watch?v=dp-7NvLDrK4), [Impossible FLIP Layout Animations With Svelte And GSAP](https://www.youtube.com/watch?v=ecP8RwpkiQw) and [Create Beautiful Presentations With Svelte](https://www.youtube.com/watch?v=67lqa5kTQkA) by Joy of Code
-
-_To Watch_
-
-- [Server-side filtered, paginated and sorted Table in SvelteKit](https://www.youtube.com/watch?v=VgCU0cVWgJE) by hartenfellerdev
-- [Best Icon Library for Svelte and SvelteKit in 2023](https://www.youtube.com/watch?v=qJP6hC4YIhk) by SvelteRust
-
-_To Read_
-
-- [From Zero to Production with SvelteKit](https://www.okupter.com/events/from-zero-to-production-with-sveltekit) by Justin Ahinon
-- [Thoughts on Svelte(Kit), one year and 3 billion requests later](https://claudioholanda.ch/en/blog/svelte-kit-after-3-billion-requests/) by Claudio Holanda
-- [How I published a gratitude journaling app for iOS and Android using SvelteKit and Capacitor](https://khromov.se/how-i-published-a-gratitude-journaling-app-for-ios-and-android-using-sveltekit-and-capacitor/) by Stanislav Khromov
-- [Learning by doing - Vue devs build a Svelte Single Page App](https://www.blackspike.com/blog/learning-svelte-by-building-a-single-page-application/) by Black Spike
-- [Generate Breadcrumb and Navigation in SvelteKit](https://blog.aakashgoplani.in/generate-breadcrumb-and-navigation-in-sveltekit), [SvelteKit Authentication using SvelteKitAuth and OAuth providers: A Comprehensive Guide](https://blog.aakashgoplani.in/sveltekit-authentication-using-sveltekitauth-and-oauth-providers-a-comprehensive-guide) and [SvelteKitAuth with Salesforce OAuth provider](https://blog.aakashgoplani.in/sveltekitauth-with-salesforce-oauth-provider) by Aakash Goplani
-- [Instantly find and remove Svelte component orphans](https://node-jz.medium.com/instantly-find-and-remove-svelte-component-orphans-9b2838ea2d99) by Jeremy Zaborowski
-- [Migration Guide from Routify to SvelteKit Router](https://blog.aakashgoplani.in/migration-guide-from-routify-to-sveltekit-router) by Aakash Goplani
-- [Creating 3D data visualization using Threlte and D3](https://www.datavizcubed.com/) by DataViz Cubed
-- [Svelte Real‑time Multiplayer Game: User Presence](https://rodneylab.com/svelte-realtime-multiplayer-game/) and [SvelteKit PostCSS Tutorial: use Future CSS Today](https://rodneylab.com/sveltekit-postcss-tutorial/) by Rodney Lab
-- [SvelteKit’s World of Routing: Unleash power of your app using Dynamic Routes and Parameters](https://www.inow.dev/sveltekits-world-of-routing-unleash-power-of-your-app-using-dynamic-routes-and-parameters/) by Igor Nowosad
-
-**Libraries, Tools & Components**
-
-- [The Vercel AI SDK](https://vercel.com/blog/introducing-the-vercel-ai-sdk) is an interoperable, streaming-enabled, edge-ready software development kit for AI apps built with React and Svelte
-- [Superforms 1.0](https://superforms.rocks/) has been released. Check out the [migration guide](https://superforms.rocks/migration) and [new feature list](https://superforms.rocks/whats-new-v1) for more details
-- [Panda CSS](https://panda-css.com/docs/getting-started/svelte) is CSS-in-JS with build time generated styles, RSC compatibility and multi-variant support
-- [svelte-section-list](https://github.com/TIKramer/svelte-section-list) is a headless Svelte npm package that provides drag-and-drop functionality for managing items and sections
-- [WebStorm](https://twitter.com/tomblachut/status/1669759906579185681?t=6WzLPUi65wsLtbVvYky7UQ&s=19) is starting to use the Svelte Language Server in its IDE tooling
-- [shadcn-svelte](https://www.shadcn-svelte.com/) is an unofficial port of [shadcn/ui](https://github.com/shadcn/ui) to Svelte that makes it easy to build your component library from common base components
-- [sveltekit-multibuild](https://github.com/MrNNP/sveltekit-multibuild) is a starter repo to create Android apps, web sites, desktop apps, and Chrome extensions automatically
-- [SvelteKit AI Chatbot](https://github.com/jianyuan/sveltekit-ai-chatbot) is an open-source AI chatbot app template built with SvelteKit, the Vercel AI SDK, OpenAI, and Vercel KV.
-- [KitAI](https://kit-ai.vercel.app/) provides batteries-included AI templates for SvelteKit and Next.js
-- [Svelte Form Builder](https://github.com/pragmatic-engineering/svelte-form-builder-community) is a no-code drag&drop form builder for Svelte
-
-Thanks for reading! As always, feel free to let us know if we missed anything on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.gg/svelte).
-
-Until next time 👋
diff --git a/documentation/blog/2023-08-01-whats-new-in-svelte-august-2023.md b/documentation/blog/2023-08-01-whats-new-in-svelte-august-2023.md
deleted file mode 100644
index 34a482b266..0000000000
--- a/documentation/blog/2023-08-01-whats-new-in-svelte-august-2023.md
+++ /dev/null
@@ -1,97 +0,0 @@
----
-title: "What's new in Svelte: August 2023"
-description: 'Extending Custom Element Classes and new +server exports'
-author: Dani Sandoval
-authorURL: https://dreamindani.com
----
-
-Some sweet new features have dropped in both Svelte and SvelteKit, this month. It's also great to see how many products and side projects have launched using Svelte as their core technology!
-
-More on all that down below...
-
-## What's new in Svelte & Language Tools
-
-There's been a bunch of minor bugfixes since the Svelte 4 release. You can find them in the [CHANGELOG](https://github.com/sveltejs/svelte/blob/master/packages/svelte/CHANGELOG.md).
-
-The **4.1.0 release** added the ability to further customize the custom element class that wraps the underlying Svelte component. Check out the [Custom Elements API docs](https://svelte.dev/docs/custom-elements-api) or the [PR](https://github.com/sveltejs/svelte/pull/8991) for more info!
-
-In addition to supporting SvelteKit's new `HEAD` server method, Svelte's language tools now support Prettier v3 (**extensions-107.9.0**) and workspace trust settings are now used to support all settings in workspace (**extensions-107.8.0**).
-
-## What's new in SvelteKit
-
-- The `HEAD` server method is now available in API routes (**1.22.0**, [Docs](https://kit.svelte.dev/docs/routing#server), [#9753](https://github.com/sveltejs/kit/pull/9753))
-- Responses with `Vary` headers are now cached, too (except for `Vary: *`) (**1.22.0**, [Docs](https://kit.svelte.dev/docs/routing#server-content-negotiation), [#9993](https://github.com/sveltejs/kit/pull/9993))
-- There's now a more helpful error for preview if SvelteKit's build output doesn't exist (**1.22.2**, [#10337](https://github.com/sveltejs/kit/pull/10337))
-
-For all the patches and performance updates from this month, check out the [SvelteKit CHANGELOG](https://github.com/sveltejs/kit/blob/master/packages/kit/CHANGELOG.md). You can also find adapter-specific CHANGELOGs in each of [the `adapter` directories](https://github.com/sveltejs/kit/tree/master/packages).
-
----
-
-## Community Showcase
-
-**Apps & Sites built with Svelte**
-
-- [GitLight](https://github.com/ColinLienard/gitlight) brings GitHub & GitLab notifications to your desktop
-- [Days](https://github.com/paprikka/days) is paprikka's life in days, inspired by Buster Benson's Life in Weeks
-- [Mofi](https://mofi.loud.red/) is a content-aware fill and trim for music
-- [JSON Bucket](https://github.com/Nico-Mayer/json-bucket) stores your JSON data so you can access it anywhere through generated API routes
-- [Soggy Planet](https://www.cosmicplayground.org/soggy-planet) is an interactive map of Earth where sea levels rise and fall and the lights of civilization shine through the night ([Source](https://github.com/ryanatkn/cosmicplayground))
-- [PaperClip](https://www.paperclipapp.xyz/) is a Chrome extension that makes it easy to memorize details from papers in machine learning, computer vision, and natural language processing.
-- [Maktaba](https://www.maktaba.digital/) is a bookmark manager that "you will actually use"
-- [Whispering](https://github.com/braden-w/whispering-extension) is a Chrome extension that lets you access OpenAI's Whisper API for fast transcription in the browser (including ChatGPT)
-- [DocuTalk](https://docutalk.co/) is an AI Customer Support chatbot for your website
-- [Krello](https://github.com/iamrishupatel/trello-clone) is a Trello clone built with Svelte, Appwrite and Flowbite
-- [Been](https://beeneverywhere.net/) is a map builder with travel stats like visited countries, extreme visited points, etc.
-- [image-to-social-media-thumbnail](https://brody.fyi/tools/image-to-social-media-thumbnail) lets you convert any image to a social media thumbnail
-- [Svelte Capacitor Store](https://github.com/sdekna/svelte-capacitor-store) is a persistent store that uses capacitor (preferences) storage on native devices, and localStorage otherwise, making it ideal for multi-platform projects
-
-**Learning Resources**
-_Featuring Svelte Contributors and Ambassadors_
-
-- [Exploring Svelte 4 w/ Kevin AK: Performance, Compatibility, & Web Component Support | Modern Web Pod](https://www.youtube.com/watch?v=YOL0HGGVib4) by This Dot Media
-- [Svelte Sirens Stream Design Systems: Lessons Learned](https://www.youtube.com/live/YHZaiIGSqsE?feature=share) featuring Eric Liu, creator of Carbon Components Svelte and the `sveld` docgen library
-- This Week in Svelte:
-  - [2023 June 30](https://www.youtube.com/watch?v=sDz4_BLoYQ4) - Svelte 4.0.1, SK 1.21, lists, screen readers, loading
-  - [2023 July 7](https://www.youtube.com/watch?v=0tq1ph4DDFA) - Svelte 4.0.5, Kit 1.22.1, Svelte 5, local storage and markdown
-  - [2023 July 21](https://www.youtube.com/watch?v=AG4_3kon3zU) - Svelte 4.1.1, SvelteKit 1.22.3, Progressive enhancement
-
-_To Watch/Hear_
-
-- [What is The Transitional Web? with Chris Ferdinandi](https://www.smashingmagazine.com/2023/07/smashing-podcast-episode-63/?ref=dailydevbytes.com) by Smashing Podcast
-- [SvelteKit in 100 seconds](https://www.youtube.com/watch?v=H1eEFfAkIik) by Fireship
-- [Primo V2 Introduction](https://www.youtube.com/watch?v=ThInVXgxJ1Q) by Primo (a [visual CMS](https://primocms.org/) based on Svelte)
-- [Understanding Svelte (vs React)](https://www.youtube.com/watch?v=lYYGhm7p74Q) by Kodaps Academy
-- [Is it thàt simple? - Mastering SvelteKit](https://www.youtube.com/watch?v=6Vrc1VO8pgs) by Threeveloper
-- [Markdown in SvelteKit with custom Components: mdsvex](https://www.youtube.com/watch?v=VJFkyGd0FEA) by hartenfellerdev
-- [How To Add Confetti for Svelte and Sveltekit 🎉](https://www.youtube.com/watch?v=gXtWSb94704) and [Make Your SvelteKit Code 10x Faster With Rust and WebAssembly](https://www.youtube.com/watch?v=Vn2bIv_J_UE) by SvelteRust
-
-_To Read_
-
-- [SvelteJS: My ecosystem is bigger than yours](https://hackmd.io/@roguegpu/r1RKQMdt3) by roguegpu
-- [Avoid shared state on the server in SvelteKit](https://blog.aakashgoplani.in/avoid-shared-state-on-the-server-in-sveltekit) by Aakash Goplani
-- [SvelteKit Fontaine: Reduce Custom Font CLS](https://rodneylab.com/sveltekit-fontaine/) by Rodney Lab
-- [A Simple Guide to Redirects in Svelte Kit](https://rgbstudios.org/blog/redirects-in-svelte-kit) by Justin Golden
-- [React vs Svelte (Q3 2023)](https://gee-astro-personal.vercel.app/blog/post2) by Gee
-- [SvelteKit Page Reaction Component with Upstash Redis](https://scottspence.com/posts/sveltekit-page-reaction-component-with-upstash-redis) by Scott Spence
-- [Building a privacy-friendly, self-hosted application architecture with SvelteKit](https://khromov.se/building-a-privacy-friendly-self-hosted-application-architecture-with-sveltekit/) and [Building a privacy-friendly, self-hosted application architecture with SvelteKit](https://khromov.se/building-a-privacy-friendly-self-hosted-application-architecture-with-sveltekit/) by Stanislav Khromov
-- [Deploying Sveltekit on IIS](https://dev.to/nnutnonn/deploying-sveltekit-on-iis--5gf6) by Nutchapon Makelai
-- [Streamlined Authentication and Secrets Management](https://eman.hashnode.dev/streamlined-authentication-and-secrets-management) by Eman
-
-**Libraries, Tools & Components**
-
-- [Melt UI](https://github.com/melt-ui/melt-ui) is a set of headless, accessible component builders for Svelte
-- [MDsveX](https://github.com/pngwn/MDsveX/releases/tag/mdsvex%400.11.0) has been updated to work with Svelte 4
-- [Svelte Sonner](https://github.com/wobsoriano/svelte-sonner) is an opinionated toast component for Svelte
-- [WebExtensionTemplate](https://github.com/kyle-n/WebExtensionTemplate) lets you skip the boilerplate and write a Web Extension with TypeScript and Svelte or React
-- [svelte-rust](https://github.com/Hugo-Dz/svelte-rust) lets you run Rust code in your Svelte app
-- [SvelteKit SSE](https://github.com/tncrazvan/sveltekit-sse) provides an easy way to produce and consume server sent events
-- [better-svelte-writable](https://github.com/tnthung/better-svelte-writable) provides a type-safe writable which gives you more control over the container
-- [Svetch.ts](https://github.com/Bewinxed/svetch#readme) is a client/types/schema/docs generator for your API endpoints
-- [sveltekit-localize-url](https://github.com/rinart73/sveltekit-localize-url) handles URL localization and routing
-- [elegua](https://github.com/howesteve/elegua) is a small, reactive PWA router for Svelte
-- [Molly](https://github.com/renefournier/molly/tree/main) is a bash script and npm module that helps you clean up unused Svelte components in your project
-- [sveltekit-bot](https://github.com/begoon/sveltekit-bot) is a Telegram bot made with SvelteKit and Vercel
-
-Thanks for reading! As always, feel free to let us know if we missed anything on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.gg/svelte).
-
-Until next time 👋
diff --git a/documentation/blog/2023-08-31-view-transitions.md b/documentation/blog/2023-08-31-view-transitions.md
deleted file mode 100644
index 01db9262bf..0000000000
--- a/documentation/blog/2023-08-31-view-transitions.md
+++ /dev/null
@@ -1,265 +0,0 @@
----
-title: Unlocking view transitions in SvelteKit 1.24
-description: Streamlined page transitions with onNavigate
-author: Geoff Rich
-authorURL: https://geoffrich.net
----
-
-The [view transitions API](https://developer.chrome.com/docs/web-platform/view-transitions/) has been sweeping the web development world lately, and for good reason. It streamlines the process of animating between two page states, which is especially useful for page transitions.
-
-However, until now, you couldn’t easily use this API in a SvelteKit app, since it was difficult to slot into the right place in the navigation lifecycle. SvelteKit 1.24 brought a new [`onNavigate`](https://kit.svelte.dev/docs/modules#$app-navigation-onnavigate) lifecycle hook to make view transitions integration much easier – let’s dive in.
-
-## How view transitions work
-
-You can trigger a view transition by calling `document.startViewTransition` and passing a callback that updates the DOM somehow. For our purposes today, SvelteKit will update the DOM as the user navigates. Once the callback finishes, the browser will transition to the new page state — by default, it does a crossfade between the old and the new states.
-
-```js
-// @errors: 2339
-const domUpdate = async () => {};
-// ---cut---
-document.startViewTransition(async () => {
-	await domUpdate(); // mock function for demonstration purposes
-});
-```
-
-Behind the scenes, the browser does something really clever. When the transition starts, it captures the current state of the page and takes a screenshot. It then holds that screenshot in place while the DOM is updating. Once the DOM has finished updating, it captures the new state, and animates between the two states.
-
-While it’s only implemented in Chrome (and other Chromium-based browsers) for now, [WebKit is also in favor](https://github.com/WebKit/standards-positions/issues/48#issuecomment-1679760489) of it. Even if you’re on an unsupported browser, it’s a perfect candidate for progressive enhancement since we can always fall back to a non-animated navigation.
-
-It’s important to note that view transitions is a browser API, not a SvelteKit one. `onNavigate` is the only SvelteKit-specific API we’ll use today. Everything else can be used wherever you write for the web! For more on the view transitions API, I highly recommend the [Chrome explainer](https://developer.chrome.com/docs/web-platform/view-transitions/) by Jake Archibald.
-
-## How `onNavigate` works
-
-Before learning how to write view transitions, let's highlight the function that makes it all possible: [`onNavigate`](https://kit.svelte.dev/docs/modules#$app-navigation-onnavigate).
-
-Until recently, SvelteKit had two navigation lifecycle functions: [`beforeNavigate`](https://kit.svelte.dev/docs/modules#$app-navigation-beforenavigate), which fires before a navigation starts, and [`afterNavigate`](https://kit.svelte.dev/docs/modules#$app-navigation-afternavigate), which fires after the page has been updated following a navigation. SvelteKit 1.24 introduces a third: `onNavigate`, which will fire on every navigation, immediately before the new page is rendered. Importantly, it will run _after_ any data loading for the page has completed – since starting a view transition prevents any interaction with the page, we want to start it as late as possible.
-
-You can also return a promise from `onNavigate`, which will suspend the navigation until it resolves. This will let us wait to complete the navigation until the view transition has started.
-
-```js
-// @errors: 2304 7006
-function delayNavigation() {
-	return new Promise((res) => setTimeout(res, 100));
-}
-
-onNavigate(async (navigation) => {
-	// do some work immediately before the navigation completes
-
-	// optionally return a promise to delay navigation until it resolves
-	return delayNavigation();
-});
-```
-
-With that out of the way, let's see how you can use view transitions in your SvelteKit app.
-
-## Getting started with view transitions
-
-The best way to see view transitions in action is to try it yourself. You can spin up the SvelteKit demo app by running `npx sv create` in your local terminal, or in your browser on [StackBlitz](https://sveltekit.new). Make sure to use a browser that supports the view transitions API. Once you have the app running, add the following to the script block in `src/routes/+layout.svelte`.
-
-```js
-// @errors: 2305 7006 2339 2810
-import { onNavigate } from '$app/navigation';
-
-onNavigate((navigation) => {
-	if (!document.startViewTransition) return;
-
-	return new Promise((resolve) => {
-		document.startViewTransition(async () => {
-			resolve();
-			await navigation.complete;
-		});
-	});
-});
-```
-
-With that, every navigation that occurs will trigger a view transition. You can already see this in action – by default, the browser will crossfade between the old and new pages.
-
-<video src="https://sveltejs.github.io/assets/video/vt-demo-1.mp4" controls muted playsinline></video>
-
-<details>
-<summary>How the code works</summary>
-
-This code may look a bit intimidating – if you're curious, I can break it down line-by-line, but for now it’s enough to know that adding it will allow you to interact with the view transitions API during navigation.
-
-As mentioned above, the `onNavigate` callback will run immediately before the new page is rendered after a navigation. Inside the callback, we check if `document.startViewTransition` exists. If it doesn’t (i.e. the browser doesn’t support it), we exit early.
-
-We then return a promise to delay completing the navigation until the view transition has started. We use a [promise constructor](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/Promise) so that we can control when the promise resolves.
-
-```js
-// @errors: 1108
-return new Promise((resolve) => {
-	document.startViewTransition(async () => {
-		resolve();
-		await navigation.complete;
-	});
-});
-```
-
-Inside the promise constructor, we start the view transition. Inside the view transition callback we resolve the promise we just returned, which indicates to SvelteKit that it should finish the navigation. It’s important that the navigation waits to finish until _after_ we start the view transition – the browser needs to snapshot the old state so it can transition to the new state.
-
-Finally, inside the view transition callback we wait for SvelteKit to finish the navigation by awaiting `navigation.complete`. Once `navigation.complete` resolves, the new page has been loaded into the DOM and the browser can animate between the two states.
-
-It’s a bit of a mouthful, but by not abstracting it we allow you to interact with the view transition directly and make any customizations you require.
-
-</details>
-
-## Customizing the transition with CSS
-
-We can also customize this page transition using CSS animation. In the style block of your `+layout.svelte`, add the following CSS rules.
-
-```css
-@keyframes fade-in {
-	from {
-		opacity: 0;
-	}
-}
-
-@keyframes fade-out {
-	to {
-		opacity: 0;
-	}
-}
-
-@keyframes slide-from-right {
-	from {
-		transform: translateX(30px);
-	}
-}
-
-@keyframes slide-to-left {
-	to {
-		transform: translateX(-30px);
-	}
-}
-
-:root::view-transition-old(root) {
-	animation:
-		90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
-		300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
-}
-
-:root::view-transition-new(root) {
-	animation:
-		210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
-		300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
-}
-```
-
-Now when you navigate between pages, the old page will fade out and slide to the left, and the new page will fade in and slide from the right. These particular animation styles come from Jake Archibald’s excellent [Chrome Developers article on view transitions](https://developer.chrome.com/docs/web-platform/view-transitions/), which is well worth a read if you want to understand everything you can do with this API.
-
-Note that we have to add `:root` before the `::view-transition` pseudoelements – these elements are only on the root of the document, so we don’t want Svelte to [scope them](/docs/svelte-components#style) to the component.
-
-You might have noticed that the entire page slides in and out, even though the header is the same on both the old and new page. To make for a smoother transition, we can give the header a unique `view-transition-name` so that it is animated separately from the rest of the page. In `src/routes/Header.svelte`, find the `header` CSS selector in the style block and add a view transition name.
-
-```css
-header {
-	display: flex;
-	justify-content: space-between;
-	view-transition-name: header;
-}
-```
-
-Now, the header will not transition in and out on navigation, but the rest of the page will.
-
-<video src="https://sveltejs.github.io/assets/video/vt-demo-2.mp4" controls muted playsinline></video>
-
-<details>
-<summary>Fixing the types</summary>
-
-Since `startViewTransition` is not supported by all browsers, your IDE may not know that it exists. To make the errors go away and get the correct typings, add the following to your `app.d.ts`:
-
-```ts
-declare global {
-	// preserve any customizations you have here
-	namespace App {
-		// interface Error {}
-		// interface Locals {}
-		// interface PageData {}
-		// interface Platform {}
-	}
-
-	// add these lines
-	interface ViewTransition {
-		updateCallbackDone: Promise<void>;
-		ready: Promise<void>;
-		finished: Promise<void>;
-		skipTransition: () => void;
-	}
-
-	interface Document {
-		startViewTransition(updateCallback: () => Promise<void>): ViewTransition;
-	}
-}
-
-export {};
-```
-
-</details>
-
-## Transitioning individual elements
-
-We just saw how giving an element a `view-transition-name` separates it out from the rest of the page's animation. Setting a `view-transition-name` also instructs the browser to smoothly animate it to its new position after the transition completes. The `view-transition-name` acts as a unique identifier so the browser can identify matching elements from the old and new states.
-
-Let’s see what that looks like – our demo app’s navigation has a small triangle indicating the active page. Right now, it abruptly appears in the new position after we navigate. Let’s give it a `view-transition-name` so the browser animates it to its new position instead.
-
-Inside `src/routes/Header.svelte`, find the CSS rule creating the active page indicator and give it a `view-transition-name`:
-
-```css
-li[aria-current='page']::before {
-	/* other existing rules */
-	view-transition-name: active-page;
-}
-```
-
-By adding that single line, the indicator will now smoothly slide to its new position instead of jumping.
-
-<video src="https://sveltejs.github.io/assets/video/vt-demo-3.mp4" controls muted playsinline></video>
-
-(It might be easy to miss the difference – look at the small moving triangle indicator at the top of the screen!)
-
-## Reduced motion
-
-It’s important to respect our users’ [motion preferences](https://web.dev/prefers-reduced-motion/) while implementing animation on the web. Just because you can implement an extreme page transition doesn’t mean you should. To disable all page transitions for users who prefer reduced motion, you can add the following to the global `styles.css`:
-
-```css
-@media (prefers-reduced-motion) {
-	::view-transition-group(*),
-	::view-transition-old(*),
-	::view-transition-new(*) {
-		animation: none !important;
-	}
-}
-```
-
-While this may be the safest option, reduced motion does not necessarily mean no animation. Instead, you could consider your view transitions on a case-by-case basis. For instance, maybe we disable the sliding animation, but leave the default crossfade (which doesn’t involve motion). You can do so by wrapping the `::view-transition` rules you want to disable in a `prefers-reduced-motion: no-preference` media-query:
-
-```css
-@media (prefers-reduced-motion: no-preference) {
-	:root::view-transition-old(root) {
-		animation:
-			90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
-			300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
-	}
-
-	:root::view-transition-new(root) {
-		animation:
-			210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
-			300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
-	}
-}
-```
-
-## What’s next?
-
-As you can see, SvelteKit doesn’t abstract a whole lot about _how_ view transitions work – you’re interacting directly with the browser’s built-in `document.startViewTransition` and `::view-transition` APIs, rather than framework abstractions like those found in Nuxt and Astro. We’re eager to see how people end up using view transitions in SvelteKit apps, and whether it makes sense to add higher level abstractions of our own in future.
-
-## Resources
-
-You can find the demo code from this post [on GitHub](https://github.com/geoffrich/sveltekit-onnavigate-demo) and the live version [deployed to Vercel](https://sveltekit-onnavigate-demo.vercel.app/). Here are some other view transitions resources you may find helpful:
-
-- [MDN view transitions docs](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API)
-- [Chrome view transitions API explainer](https://developer.chrome.com/docs/web-platform/view-transitions/)
-- [Rich Harris demoing view transitions with onNavigate](https://www.youtube.com/shorts/weOCWOD2UIo)
-- [My Svelte Summit video showing how to use view transitions for FLIP animations](https://youtu.be/K95TQ-Yh7Cw)
-- [Fruit list demo](https://sveltekit-shared-element-transitions-codelab.vercel.app/fruits) ([source](https://github.com/geoffrich/sveltekit-view-transitions))
-- [Svelte Summit video list demo](https://http-203-svelte.vercel.app/) (based on a [Jake Archibald demo](https://http203-playlist.netlify.app/)) ([source](https://github.com/geoffrich/http-203-svelte))
diff --git a/documentation/blog/2023-09-01-whats-new-in-svelte-september-2023.md b/documentation/blog/2023-09-01-whats-new-in-svelte-september-2023.md
deleted file mode 100644
index f68241735f..0000000000
--- a/documentation/blog/2023-09-01-whats-new-in-svelte-september-2023.md
+++ /dev/null
@@ -1,98 +0,0 @@
----
-title: "What's new in Svelte: September 2023"
-description: "New parameters in SvelteKit's redirect and an onNavigate lifecycle function come to life"
-author: Dani Sandoval
-authorURL: https://dreamindani.com
----
-
-Happy September y'all! With all the [sneak peeks at what's coming soon in Svelte 5](https://twitter.com/Rich_Harris/status/1688581184018583558), we thought it'd be best to look back at the last month to see what's shipped and what the community is building with Svelte.
-
-Before we jump in, a warm welcome to the new Svelte Ambassadors: [@cainux](https://github.com/cainux) and [@grischaerbe](https://github.com/grischaerbe)! Welcome to the crew ⛴️
-
-## What's new in Svelte & Language Tools
-
-- `svelteHTML` has moved from language-tools into Svelte core so that `svelte/element` types will now load correctly (**4.2.0** in Svelte, **107.10.0** in Language Tools)
-
-## What's new in SvelteKit
-
-- `URL` is now accepted in the `redirect` function (**1.23.0**, [Docs](https://kit.svelte.dev/docs/modules#sveltejs-kit-redirect), [#10570](https://github.com/sveltejs/kit/pull/10570))
-- Mistyped route filenames will now throw a warning (**1.23.0**, [#10558](https://github.com/sveltejs/kit/pull/10558))
-- The new `onNavigate` lifecycle function enables view transitions - Check out the [blog post](https://svelte.dev/blog/view-transitions) for more info (**1.24.0**, [Docs](https://kit.svelte.dev/docs/modules#app-navigation-onnavigate), [#9605](https://github.com/sveltejs/kit/pull/9605))
-
-But that's just the new features! For all the patches and performance updates from this month, check out the [SvelteKit CHANGELOG](https://github.com/sveltejs/kit/blob/master/packages/kit/CHANGELOG.md). You can also find adapter-specific CHANGELOGs in each of [the `adapter` directories](https://github.com/sveltejs/kit/tree/master/packages).
-
----
-
-## Community Showcase
-
-**Apps & Sites built with Svelte**
-
-- [Planet Of The Bugs](https://planetofthebugs.xyz/) allows developers to practice and hone their skill-sets by exposing them to an endless supply of unique, curated issues and bugs from popular open-source projects on Github
-- [Minesweeper](https://github.com/ProductionPanic/minesweeper/tree/main) is an Android game built with SvelteKit, Capacitor, TailwindCSS and DaisyUI (check it out on the [Google Play Store](https://play.google.com/store/apps/details?id=com.production.panic.minesweeper&pli=1))
-- [Pendor](https://www.pendor.ai/) is an AI component generator for Svelte
-- [Avatars Pro](https://senja.io/testimonial-widgets/avatars-pro) is a social proof widget made for the web
-- [Pomodoro Focus](https://github.com/con-dog/pomodoro-focus) is a pomodoro timer browser extension
-- [memegen](https://github.com/bhupeshpr25/memegen) is a Firefox web extension that allows users to generate memes using various templates
-- [Resgen](https://resgen.app/) is a Chrome extension that tailors resumes based on job descriptions and your experiences
-- [Icono Search](https://www.icono-search.com) is an AI-powered video search engine
-- [digital-paper](https://github.com/danferns/digital-paper) is a writing app with no backspace or undo
-- [Ubuntu 22.04 in Svelte](https://github.com/manhhungpc/ubuntu2204-svelte) aims to replicate the Ubuntu 22.04 desktop experience on the web
-- [My Queue](https://www.myqueue.so/) creates a playlist of written articles by turning them into audio stories
-
-**Learning Resources**
-_Featuring Svelte Contributors and Ambassadors_
-
-- [Svelte Society - London August 2023](https://www.youtube.com/watch?v=90Psdk5rAnU)
-- [Building a Blog using SvelteKit and Nostr as a CMS (Part 1](https://kevinak.se/blog/building-a-blog-using-sveltekit-and-nostr-as-a-cms-part-1-1690807337563)) by Kev
-- [Mastering SvelteKit with Geoff Rich | JS Drops](https://www.youtube.com/watch?v=MaF8kRbHbi0) by This Dot Media
-- [Using GitHub Contributions To Flex On The Normies](https://youtu.be/f9fd1L1FEts?si=3hbihW-X5-GKSJxN), [Learn Svelte By Making A Matching Game](https://www.youtube.com/watch?v=w2q9caYXgkg) and [Who Needs API Permission When You Can Use Web Scraping](https://www.youtube.com/watch?v=T-lBPpeokfY) by Joy of Code
-- [The missing guide to understanding adapter-static in SvelteKit](https://khromov.se/the-missing-guide-to-understanding-adapter-static-in-sveltekit/) by Stanislav Khromov
-- This Week in Svelte:
-  - [2023 July 28](https://www.youtube.com/watch?v=mvTEQ_C0qRQ) - Screen reader market share, Svelte to plain JS, Web Components
-  - [2023 Aug 4](https://www.youtube.com/watch?v=Ye8cCJyPZjg) - Svelte 4.1.2, SvelteKit 1.22.4, ES Modules, Types in markup
-  - [2023 August 11](https://www.youtube.com/watch?v=A8XUaiCVkCI) - Svelte 4.2.0, SvelteKit 1.22.5, How to create Toggle Switches
-  - [2023 August 18](https://www.youtube.com/watch?v=nJ5Wf3uL7dM) - SvelteKit 1.22.6, accessible form error summaries
-  - [2023 August 25](https://www.youtube.com/watch?v=JoPzvlBKXXE) - SvelteKit 1.23.0, Bun and SvelteKit, Enhanced search
-- Svienna (Svelte Society Vienna) Sessions
-  - [Ermin Celikovic - You might not need a slider library](https://www.youtube.com/watch?v=dSUmtijkFOc)
-  - [Lukas Stracke - How to use sentry.io in your SvelteKit App](https://www.youtube.com/watch?v=u41-MtPGH04)
-  - [Jean-Yves Couet - SvelteKit & Remult... fullstack apps in minutes!](https://www.youtube.com/watch?v=N8d290fTzq8)
-- Sirens Sessions
-  - [Prismic Slice Machines & SvelteKit](https://www.youtube.com/watch?v=19Meb-yMsAg) with Sam Littlefair
-  - [Medusa and SvelteKit E-Commerce Stack](https://www.youtube.com/watch?v=rVVHxows9dY) with Lacey Pevey
-  - [Design Systems: Lessons Learned](https://www.youtube.com/watch?v=YHZaiIGSqsE) with Eric Liu
-
-_To Watch_
-
-- [Image optimization in SvelteKit with vite-imagetools](https://www.youtube.com/watch?v=285vSLe9LQ8) by hartenfellerdev
-- [Building a Todo App with Rust and SvelteKit: Complete Tutorial](https://www.youtube.com/watch?v=w7is2bCTUg0) and [Stripe Payment In SvelteKit With Dynamic Pricing](https://www.youtube.com/watch?v=o8gvCLgz1vs) by SvelteRust
-- [Leaflet maps in SvelteKit like it's 2023 (HowTo)](https://www.youtube.com/watch?v=JFctWXEzFZw)
-  ShipBit
-
-_To Read_
-
-- [Internationalization in SvelteKit (Series)](https://blog.aakashgoplani.in/series/i18n-in-sveltekit) by Aakash Goplani
-- [The easiest Chatbot you will ever build](https://simon-prammer.vercel.app/blog/post/sveltekit-langchain) and [Intro to LangSmith🦜️🛠️](https://simon-prammer.vercel.app/blog/post/langsmith) by Simon Prammer
-- [SvelteKit: How to make code-based router, instead of file-based router [August 2023]](https://dev.to/maxcore/sveltekit-how-to-make-code-based-router-instead-of-file-based-router-august-2023-5f9) by Max Core
-- [SvelteKit Hydration Gotcha](https://www.captaincodeman.com/sveltekit-hydration-gotcha) by Captain Codeman
-- [Automatically generate sitemap.xml in SvelteKit](https://alex-schnabl.medium.com/automatically-generate-sitemap-xml-in-sveltekit-910bd09d17e7) by Alex Schnabl
-- [Discovering Svelte: Things I Learned While Using Svelte](https://www.tronic247.com/discovering-svelte-things-i-learned-while-using-svelte/) by Posandu Mapa
-- [Typed fetch with Sveltekit and Hono using RPC](https://dev.to/subhendupsingh/typed-fetch-with-sveltekit-and-hono-using-rpc-2clf) by Subhendu Pratap Singh
-- [Svelte Context Module Scripts Explained](https://raqueebuddinaziz.com/blog/svelte-context-module-scripts-explained) by raqueebuddin aziz
-- [Building with GPT4 and Svelte](https://kvak.io/meoweler) by levmiseri
-- [Type-safe User Authentication in SvelteKit with Lucia, Planetscale, and Upstash Redis](https://upstash.com/blog/lucia-sveltekit) by Chris Jayden
-- [Document Svelte Projects with HTML and JSDoc Comments](https://blog.robino.dev/posts/doc-comments-svelte) by Ross Robino
-
-**Libraries, Tools & Components**
-
-- [Carta](https://github.com/BearToCode/carta-md) is a lightweight, fast and extensible Svelte Markdown editor and viewer, based on Marked
-- [Threlte](https://threlte.xyz/), the 3D framework built from Svelte and Three.js has released version 6
-- [vite-plugin-web-extension](https://vite-plugin-web-extension.aklinker1.io/guide/frontend-frameworks.html#svelte-integration) works great with Svelte to make building browser extensions easier
-- [Salvia-kit Svelte Dashboards](https://github.com/salvia-kit/svelte-dashboards) contains 10 free dashboard templates for SvelteKit
-- [drab](https://github.com/rossrobino/drab) is an Unstyled Svelte component library
-- [svelte-img-previewer](https://www.npmjs.com/package/svelte-img-previewer?activeTab=readme) is a tool for displaying images from input file types in Svelte
-- [sveltekit-search-params](https://github.com/paoloricciuti/sveltekit-search-params) describes itself as the fastest way to read AND write from query search params in SvelteKit
-
-That's it for this month! Feel free to let us know if we missed anything on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.gg/svelte).
-
-Until next time 👋
diff --git a/documentation/blog/2023-09-20-runes.md b/documentation/blog/2023-09-20-runes.md
deleted file mode 100644
index 971b4abba9..0000000000
--- a/documentation/blog/2023-09-20-runes.md
+++ /dev/null
@@ -1,223 +0,0 @@
----
-title: Introducing runes
-description: "Rethinking 'rethinking reactivity'"
-author: The Svelte team
-authorURL: /
----
-
-In 2019, Svelte 3 turned JavaScript into a [reactive language](/blog/svelte-3-rethinking-reactivity). Svelte is a web UI framework that uses a compiler to turn declarative component code like this...
-
-```svelte
-<script>
-	let count = 0;
-
-	function increment() {
-		count += 1;
-	}
-</script>
-
-<button on:click={increment}>
-	clicks: {count}
-</button>
-```
-
-...into tightly optimized JavaScript that updates the document when state like `count` changes. Because the compiler can 'see' where `count` is referenced, the generated code is [highly efficient](/blog/virtual-dom-is-pure-overhead), and because we're hijacking syntax like `let` and `=` instead of using cumbersome APIs, you can [write less code](/blog/write-less-code).
-
-A common piece of feedback we get is 'I wish I could write all my JavaScript like this'. When you're used to things inside components magically updating, going back to boring old procedural code feels like going from colour to black-and-white.
-
-Svelte 5 changes all that with _runes_, which unlock _universal, fine-grained reactivity_.
-
-<div class="max">
-<figure style="max-width: 960px; margin: 0 auto">
-<div style="aspect-ratio: 1.755; position: relative; margin: 0 auto;">
-	<iframe style="position: absolute; width: 100%; height: 100%; left: 0; top: 0; margin: 0;" src="https://www.youtube-nocookie.com/embed/RVnxF3j3N8U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-</div>
-
-<figcaption>Introducing runes</figcaption>
-</figure>
-</div>
-
-## Before we begin
-
-Even though we're changing how things work under the hood, Svelte 5 should be a drop-in replacement for almost everyone. The new features are opt-in — your existing components will continue to work.
-
-We don't yet have a release date for Svelte 5. What we're showing you here is a work-in-progress that is likely to change!
-
-## What are runes?
-
-> **rune** /ro͞on/ _noun_
->
-> A letter or mark used as a mystical or magic symbol.
-
-Runes are symbols that influence the Svelte compiler. Whereas Svelte today uses `let`, `=`, the [`export`](https://learn.svelte.dev/tutorial/declaring-props) keyword and the [`$:`](https://learn.svelte.dev/tutorial/reactive-declarations) label to mean specific things, runes use _function syntax_ to achieve the same things and more.
-
-For example, to declare a piece of reactive state, we can use the `$state` rune:
-
-```diff
-<script>
--	let count = 0;
-+	let count = $state(0);
-
-	function increment() {
-		count += 1;
-	}
-</script>
-
-<button on:click={increment}>
-	clicks: {count}
-</button>
-```
-
-At first glance, this might seem like a step back — perhaps even [un-Svelte-like](https://twitter.com/stolinski/status/1438173489479958536). Isn't it better if `let count` is reactive by default?
-
-Well, no. The reality is that as applications grow in complexity, figuring out which values are reactive and which aren't can get tricky. And the heuristic only works for `let` declarations at the top level of a component, which can cause confusion. Having code behave one way inside `.svelte` files and another inside `.js` can make it hard to refactor code, for example if you need to turn something into a [store](https://learn.svelte.dev/tutorial/writable-stores) so that you can use it in multiple places.
-
-## Beyond components
-
-With runes, reactivity extends beyond the boundaries of your `.svelte` files. Suppose we wanted to encapsulate our counter logic in a way that could be reused between components. Today, you would use a [custom store](https://learn.svelte.dev/tutorial/custom-stores) in a `.js` or `.ts` file:
-
-```js
-import { writable } from 'svelte/store';
-
-export function createCounter() {
-	const { subscribe, update } = writable(0);
-
-	return {
-		subscribe,
-		increment: () => update((n) => n + 1)
-	};
-}
-```
-
-Because this implements the _store contract_ — the returned value has a `subscribe` method — we can reference the store value by prefixing the store name with `$`:
-
-```diff
-<script>
-+	import { createCounter } from './counter.js';
-+
-+	const counter = createCounter();
--	let count = 0;
--
--	function increment() {
--		count += 1;
--	}
-</script>
-
--<button on:click={increment}>
--	clicks: {count}
-+<button on:click={counter.increment}>
-+	clicks: {$counter}
-</button>
-```
-
-This works, but it's pretty weird! We've found that the store API can get rather unwieldy when you start doing more complex things.
-
-With runes, things get much simpler:
-
-```diff
--import { writable } from 'svelte/store';
-
-export function createCounter() {
--	const { subscribe, update } = writable(0);
-+	let count = $state(0);
-
-	return {
--		subscribe,
--		increment: () => update((n) => n + 1)
-+		get count() { return count },
-+		increment: () => count += 1
-   };
-}
-```
-
-```diff
-<script>
-	import { createCounter } from './counter.js';
-
-	const counter = createCounter();
-</script>
-
-<button on:click={counter.increment}>
--	clicks: {$counter}
-+	clicks: {counter.count}
-</button>
-```
-
-Note that we're using a [get property](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get) in the returned object, so that `counter.count` always refers to the current value rather than the value at the time the function was called.
-
-## Runtime reactivity
-
-Today, Svelte uses _compile-time reactivity_. This means that if you have some code that uses the `$:` label to re-run automatically when dependencies change, those dependencies are determined when Svelte compiles your component:
-
-```svelte
-<script>
-	export let width;
-	export let height;
-
-	// the compiler knows it should recalculate `area`
-	// when either `width` or `height` change...
-	$: area = width * height;
-
-	// ...and that it should log the value of `area`
-	// when _it_ changes
-	$: console.log(area);
-</script>
-```
-
-This works well... until it doesn't. Suppose we refactored the code above:
-
-```js
-// @errors: 7006 2304
-const multiplyByHeight = (width) => width * height;
-$: area = multiplyByHeight(width);
-```
-
-Because the `$: area = ...` declaration can only 'see' `width`, it won't be recalculated when `height` changes. As a result, code is hard to refactor, and understanding the intricacies of when Svelte chooses to update which values can become rather tricky beyond a certain level of complexity.
-
-Svelte 5 introduces the `$derived` and `$effect` runes, which instead determine the dependencies of their expressions when they are evaluated:
-
-```svelte
-<script>
-	let { width, height } = $props(); // instead of `export let`
-
-	const area = $derived(width * height);
-
-	$effect(() => {
-		console.log(area);
-	});
-</script>
-```
-
-As with `$state`, `$derived` and `$effect` can also be used in your `.js` and `.ts` files.
-
-## Signal boost
-
-Like every other framework, we've come to the realisation that [Knockout](https://knockoutjs.com/) was right all along.
-
-Svelte 5's reactivity is powered by _signals_, which are essentially [what Knockout was doing in 2010](https://dev.to/this-is-learning/the-evolution-of-signals-in-javascript-8ob). More recently, signals have been popularised by [Solid](https://www.solidjs.com/) and adopted by a multitude of other frameworks.
-
-We're doing things a bit differently though. In Svelte 5, signals are an under-the-hood implementation detail rather than something you interact with directly. As such, we don't have the same API design constraints, and can maximise both efficiency _and_ ergonomics. For example, we avoid the type narrowing issues that arise when values are accessed by function call, and when compiling in server-side rendering mode we can ditch the signals altogether, since on the server they're nothing but overhead.
-
-Signals unlock _fine-grained reactivity_, meaning that (for example) changes to a value inside a large list needn't invalidate all the _other_ members of the list. As such, Svelte 5 is ridonkulously fast.
-
-## Simpler times ahead
-
-Runes are an additive feature, but they make a whole bunch of existing concepts obsolete:
-
-- the difference between `let` at the top level of a component and everywhere else
-- `export let`
-- `$:`, with all its attendant quirks
-- different behaviour between `<script>` and `<script context="module">`
-- `$$props` and `$$restProps`
-- lifecycle functions (things like `afterUpdate` can just be `$effect` functions)
-- the store API and `$` store prefix (while stores are no longer necessary, they are not being deprecated)
-
-For those of you who already use Svelte, it's new stuff to learn, albeit hopefully stuff that makes your Svelte apps easier to build and maintain. But newcomers won't need to learn all those things — it'll just be in a section of the docs titled 'old stuff'.
-
-This is just the beginning though. We have a long list of ideas for subsequent releases that will make Svelte simpler and more capable.
-
-## Try it!
-
-You can't use Svelte 5 in production yet. We're in the thick of it at the moment and can't tell you when it'll be ready to use in your apps.
-
-But we didn't want to leave you hanging. We've created a [preview site](https://svelte-5-preview.vercel.app) with detailed explanations of the new features and an interactive playground. You can also visit the `#svelte-5-alpha` channel of the [Svelte Discord](/chat) to learn more. We'd love to have your feedback!
diff --git a/documentation/blog/2023-10-01-hacktoberfest.md b/documentation/blog/2023-10-01-hacktoberfest.md
deleted file mode 100644
index eafab46c02..0000000000
--- a/documentation/blog/2023-10-01-hacktoberfest.md
+++ /dev/null
@@ -1,24 +0,0 @@
----
-title: 'Hacktoberfest 2023 with SvelteKit'
-description: 'SvelteKit joins in the Hacktoberfest event in 2023'
-author: Willow (GHOST) & Braden Wiggins
-authorURL: https://ghostdev.xyz
----
-
-# Sveltekit 🧡 Hacktoberfest
-
-We're excited to announce SvelteKit's participation in this year's Hacktoberfest! Hacktoberfest is a global event that takes place every October, during which developers are encouraged to contribute to open-source projects like SvelteKit. The goal is to foster a vibrant open-source community, celebrate shared knowledge, and make the world of coding more accessible to all. You can find other participating repositories by searching the [`hacktoberfest` topic](https://github.com/topics/hacktoberfest) on github.
-
-## Getting Started
-
-The first step is to [register for Hacktoberfest](https://hacktoberfest.com/register). Once you've registered, any PRs submitted to Sveltekit will count towards your participation in the event!
-
-## Contributing
-
-If you need inspiration when looking for an issue to fix, check out the [low hanging fruit](https://github.com/sveltejs/kit/labels/low%20hanging%20fruit), [contributions-welcome](https://github.com/sveltejs/kit/labels/contributions-welcome), [ready to implement](https://github.com/sveltejs/kit/labels/ready%20to%20implement), or [documentation](https://github.com/sveltejs/kit/labels/documentation) tags.
-
-It's a good idea to communicate clearly and often about what you're trying to solve or take on. You can do this by commenting on the issues you intend to take on. This helps avoid duplicate work and ensures that your contribution is in line with the project's goals. Nobody likes to have their work rejected, so it's best to ask questions early and often!
-
-Join our [Discord](https://svelte.dev/chat) and ask questions in the dedicated `#hacktoberfest` channel. We're happy to help you get started!
-
-We're excited to see what you've got in store for SvelteKit! Happy hacking! 🎃
diff --git a/documentation/blog/2023-10-01-whats-new-in-svelte-october-2023.md b/documentation/blog/2023-10-01-whats-new-in-svelte-october-2023.md
deleted file mode 100644
index 6e9df4d1d3..0000000000
--- a/documentation/blog/2023-10-01-whats-new-in-svelte-october-2023.md
+++ /dev/null
@@ -1,86 +0,0 @@
----
-title: "What's new in Svelte: October 2023"
-description: 'Reactions to Runes and SvelteKit +server fallbacks'
-author: Dani Sandoval
-authorURL: https://dreamindani.com
----
-
-Svelte 5 isn't out yet (you can, however, [preview it now](https://svelte-5-preview.vercel.app/)), but that doesn't mean we don't get a sneak peek! Most notably are [Runes](https://svelte.dev/blog/runes) - a simpler way to manage reactive variables in Svelte code. There's lots of links the showcase section for deeper dives on all things Runes, but let's talk about what else been released this month...
-
-## What's new in Svelte & Language Tools
-
-- [Svelte 4.2.1](https://github.com/sveltejs/svelte/blob/master/packages/svelte/CHANGELOG.md#421) was released with a bunch of fixes to HTML, CSS and sourcemap compilation
-- [The latest version of the Svelte language tools](https://github.com/sveltejs/language-tools/releases/tag/extensions-107.11.0) [enhances component references](https://github.com/sveltejs/language-tools/pull/2157) in the "Find All References" command, [fixes a persistent issue with automated types going missing](https://github.com/sveltejs/language-tools/pull/2160) after restarting a project and [adds fallback handling to auto-types](https://github.com/sveltejs/language-tools/issues/2156) (like those found in SvelteKit's `+server.js` files)
-
-## What's new in SvelteKit
-
-- `+server.js` now has a catch-all handler that handles all unimplemented valid server requests. Just export a `fallback` function! (**1.25.0**, [Docs](https://kit.svelte.dev/docs/routing#server-fallback-method-handler), [#9755](https://github.com/sveltejs/kit/pull/9755))
-
-That's all for the new features! If you're looking for other patches and performance updates, check out the [SvelteKit CHANGELOG](https://github.com/sveltejs/kit/blob/master/packages/kit/CHANGELOG.md). You can also find adapter-specific CHANGELOGs in each of [the `adapter` directories](https://github.com/sveltejs/kit/tree/master/packages).
-
----
-
-## Community Showcase
-
-[Svelte Summit Fall](https://www.sveltesummit.com/) is happening on Nov 11, 2023. The 7th Virtual Svelte Conference is [open for proposals until October 15](https://sessionize.com/svelte-summit-fall-2023/) - anyone can submit!
-
-Threlte [is throwing a hackathon](https://threlte.xyz/hackathon) (**motion warning for the landing page** - it will respect Reduce Motion settings). The kickoff event is on Sunday, 15 October 2023 16:00 UTC.
-
-**Apps & Sites built with Svelte**
-
-- [game-of-life-svelte](https://github.com/StephenGunn/game-of-life-svelte) is a Conway's Game of Life implementation using SvelteKit tech
-- [Limey](https://limey.io/) is an easy-to-use website builder for simple sites and landing pages
-- [Appwrite's new landing page](https://appwrite.io/) is now written with SvelteKit (previously covered was their [console UI](https://github.com/appwrite/console) in Svelte)
-- [PlaceIt](https://github.com/Dae314/placeit-game) is a game about numbers and places
-- [Sveltroid](https://sveltroid.vercel.app/) is a fan-made recreation of Metroid Prime: Remastered ([code](https://github.com/TylerTonyJohnson/Metroid))
-- [Bolighub](https://www.bolighub.dk/) is a Denmark housing search portal
-- [Dithering](https://www.sigrist.dev/dithering) is a tool to dither photos with plenty of options
-- [Rocky Mountain Slam](https://www.rockymountainslam.com/) is an interactive map to follow Jason Heyn as he attempts to complete the first ever Rocky Mountain Slam ([code](https://github.com/martyheyn/rocky-mnt-slam))
-
-**Learning Resources**
-
-_Featuring Svelte Contributors and Ambassadors_
-
-- [Svelte 5: Introducing Runes... with Rich Harris](https://www.youtube.com/watch?v=RVnxF3j3N8U) and its follow-up: [Svelte 5 runes: what's the deal with getters and setters?](https://www.youtube.com/watch?v=NR8L5m73dtE)
-- [Conditionally stream data in SvelteKit](https://geoffrich.net/posts/conditionally-stream-data/) by Geoff Rich
-- [Svelte Runes Change How Reactivity Works In Svelte](https://www.youtube.com/watch?v=TOTUXiYZhf4), [Make A 3D GitHub Skyline With Svelte To Flex On Your Peers](https://www.youtube.com/watch?v=f9fd1L1FEts), [Simple Page Transitions Using The View Transitions API With SvelteKit](https://www.youtube.com/watch?v=q_2irZO4SS8) and [Using JavaScript Libraries With Svelte Is Easy](https://www.youtube.com/watch?v=N9OjaQ0XtKQ) by Joy of Code
-- [Modern Web Podcast S11E2](https://modernweb.podbean.com/e/modern-web-podcast-s11e2-exploring-svelte-open-source-and-discord-bots-with-willow-ghost/) - Exploring Svelte, Open Source, and Discord Bots with Willow (GHOST)
-- [We are back! Svelte 5, Transitions, What's New?!](https://www.svelteradio.com/episodes/we-are-back-svelte-5-transitions-whats-new) by Svelte Radio
-- This Week in Svelte:
-  - [2023 September 1](https://www.youtube.com/watch?v=fonBnVCIrjE) - SvelteKit 1.24.0, View Transitions API, AbortController
-  - [2023 September 8](https://www.youtube.com/watch?v=jfBjmczZwRc) - SvelteKit 1.24.1, Capacitor walkthrough, reusing prop types
-  - [2023 September 15](https://www.youtube.com/watch?v=qH2FavwhU88) - SvelteKit 1.25.0, deserialize form data, magic is coming
-  - [2023 September 22](https://www.youtube.com/watch?v=ek7KE1EDu2w) - Svelte 5 Runes!
-
-_To Watch_
-
-- [RUNES - Coming in Svelte v5 | My Take](https://www.youtube.com/watch?v=iCK1coch1wA) by Coding Garden
-- [Don't Sleep on Svelte 5](https://www.youtube.com/watch?v=DgNWssn2vpc) and [Level Up Your Svelte Stores](https://www.youtube.com/watch?v=-vjNAyL2JCQ) by Huntabyte
-- [Introduction To Svelte Runes (Every Svelte Rune Explained)](https://www.youtube.com/watch?v=gihSBVfyFbI) by Cooper Codes
-- [Svelte Runes: Awesome or Awful?](https://www.youtube.com/watch?v=JRZCqUOmFwY) by Jack Herrington
-- [Let Build A Youtube Clone With SvelteKit (Svelte, Tailwind Css, RapidApi, Shadcn Svelte, Axios, etc)](https://www.youtube.com/watch?v=65yMfpsoH4o) by Lawal Adebola
-
-_To Read_
-
-- [Create the Perfect Sharable Rune in Svelte](https://dev.to/jdgamble555/create-the-perfect-sharable-rune-in-svelte-ij8) by Jonathan Gamble
-- [You Don't Need to "Learn" Svelte](https://kaviisuri.com/you-dont-need-to-learn-svelte) by KaviiSuri
-- [Build Websites with Prismic and SvelteKit](https://prismic.io/blog/sveltekit-prismic-integration) by Angelo Ashmore
-- [How to embed Svelte apps inside PHP?](https://www.okupter.com/blog/php-embed-svelte) by Justin Ahinon
-- [Using Web Browser's Indexed DB in SvelteKit](https://dev.to/theether0/using-web-browsers-indexed-db-in-sveltekit-3oo3) by Shivam Meena
-- [Integrate Storybook in Svelte: Doing it the Svelte-way](https://mainmatter.com/blog/2023/09/18/integrate-storybook-in-svelte-doing-it-the-svelte-way/) by Oscar Dominguez
-- [The Sveltekit tutorial: Part 1 | What, why, and how?](https://tntman.tech/posts/sveltekit-guide-part-1) by Suyashtnt
-
-**Libraries, Tools & Components**
-
-- [KitForStartups](https://github.com/okupter/kitforstartups) is an Open Source SvelteKit SaaS boilerplate
-- [SuperNavigation](https://github.com/0xDjole/super-navigation) is a mobile-like navigation UX for the web
-- [skeleton-material-theme](https://github.com/plasmatech8/skeleton-material-theme) is a Material theme for the Skeleton UI library
-- [better-i18n-for-svelte](https://github.com/versiobit/better-i18n-for-svelte) is a SEO focused library for multi-language SvelteKit sites
-- [uico](https://github.com/rossrobino/uico) is a Tailwind plugin that provides utility classes for basic UI elements
-- [svelte-maskify](https://www.npmjs.com/package/svelte-maskify) is a action wrapper for AlpineJS masks
-- [sveltekit-capacitor](https://github.com/Hugos68/sveltekit-capacitor) is a template for building a SvelteKit SPA with Capacitor
-- [router-gen.ts](https://gist.github.com/HugeLetters/7a2813897dfe08fa948a13cac8a359c7) is a type-safe router for SvelteKit
-
-That's it for this month! Feel free to let us know if we missed anything on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.gg/svelte).
-
-Until next time 👋
diff --git a/documentation/blog/2023-11-01-whats-new-in-svelte-november-2023.md b/documentation/blog/2023-11-01-whats-new-in-svelte-november-2023.md
deleted file mode 100644
index 420030787a..0000000000
--- a/documentation/blog/2023-11-01-whats-new-in-svelte-november-2023.md
+++ /dev/null
@@ -1,89 +0,0 @@
----
-title: "What's new in Svelte: November 2023"
-description: 'Svelte Summit on Nov 11 and better DevEx for all!'
-author: Dani Sandoval
-authorURL: https://dreamindani.com
----
-
-Mark your calendars! [Svelte Summit Fall](https://www.sveltesummit.com/2023/fall) is on November 11th. Join us on [YouTube](https://www.youtube.com/@SvelteSociety/streams) and in the [Discord](https://svelte.dev/chat) for hours of Svelte-focused fun 🎥
-
-Every month, maintainers within the Svelte ecosystem fix bugs, improve performance and bring new features to Svelte, SvelteKit and the tooling around them. This month's releases brings an improved developer experience with better [block folding](https://code.visualstudio.com/docs/editor/codebasics#_folding), inferred types and configuration for `use:enhance`.
-
-Let's take a closer look 👀...
-
-## What's new in Svelte & Language Tools
-
-- Svelte 4.2.2 cleans up a few element-specific features ([Release Notes](https://github.com/sveltejs/svelte/blob/master/packages/svelte/CHANGELOG.md#422))
-- Extensions 107.12.0 improves block folding for functions, if statements and more ([Release Notes](https://github.com/sveltejs/language-tools/releases/tag/extensions-107.12.0), [PR](https://github.com/sveltejs/language-tools/pull/2169))
-
-## What's new in SvelteKit
-
-- Route parameter types will now be inferred from the applicable matcher's guard check (**kit@1.26.0**, [Docs](https://kit.svelte.dev/docs/advanced-routing#matching), [#10755](https://github.com/sveltejs/kit/pull/10755))
-- The new `invalidateAll` boolean option lets you turn on and off the `invalidateAll()` form function within the `enhance` callback (**kit@1.27.0**, [Docs](https://kit.svelte.dev/docs/form-actions#progressive-enhancement-use-enhance), [#9476](https://github.com/sveltejs/kit/issues/9476))
-- The output of the project creation wizard will now reflect which package manager you're using (**create-svelte@5.1.1**, [#10811](https://github.com/sveltejs/kit/pull/10811))
-
-For a complete list of bug fixes and performance updates, check out the [SvelteKit CHANGELOG](https://github.com/sveltejs/kit/blob/master/packages/kit/CHANGELOG.md). You can also find adapter-specific CHANGELOGs in each of [the `adapter` directories](https://github.com/sveltejs/kit/tree/master/packages).
-
----
-
-## Community Showcase
-
-**Apps & Sites built with Svelte**
-
-- [4THSEX](https://4thsex.com/) is a creative website for the producer / creative director with the same name
-- [Syntax.fm](https://github.com/syntaxfm/website) has been redesigned from the ground up with SvelteKit
-- [GitContext](https://gitcontext.com/) is an early-access tool to improve the process of reviewing code
-- [Lunier](https://www.lunier.fr/) is a site to browse and buy handbags (site is in French)
-- [Feldman Architecture](https://feldmanarchitecture.com/) is a portfolio set for the architects of the same name
-- [Formulator](https://formulator.app/) is a faster way to iterate, experiment, & build user interfaces
-- [Dwarf](https://www.dwarf.domains/) is a relaxed domain name marketplace for domain hoarders
-- [Teek](https://teek.vercel.app/) is a simple, free time tracker for developers with an hourly rate
-- [Sessionic](https://github.com/navorite/sessionic) is a web extension to easily save browser sessions and manage them
-- [Pilink](https://pil.ink/) is a "suckless" link shortener
-
-**Learning Resources**
-
-_Featuring Svelte Contributors and Ambassadors_
-
-- [Wolfensvelte 3D and the Svelte Language Server in the Browser with Jason Bradnick](https://www.svelteradio.com/episodes/wolfensvelte-3d-and-the-svelte-language-server-in-the-browser-with-jason-bradnick) by Svelte Radio
-- [This Is How You Sveltify Any JavaScript Library](https://www.youtube.com/watch?v=RuM4KHTZqD4), [Svelte Actions Make Svelte The Best JavaScript Framework](https://www.youtube.com/watch?v=LGOqg0Y7sAc) and [How Svelte Stores Make State Management Easy](https://www.youtube.com/watch?v=L3uBfL-4dDM) by Joy of Code
-- Svelte Society Talks
-  - [Svelte Society - San Diego October 2023](https://www.youtube.com/watch?v=9FZYJTr24ZI)
-  - [Daniils Petrovs - SvelteKit: From landing page to offline PWAs](https://www.youtube.com/watch?v=SaccqQ-JrZ4)
-  - [Lukas Stracke - State of Sentry for Svelte 2023](https://www.youtube.com/watch?v=V4Hup134wdA)
-- This Week in Svelte:
-  - [2023 September 29](https://www.youtube.com/watch?v=SduFW1onshg) - Svelte 4.2.1, SvelteKit 1.25.1, Runes FAQ, data mocking
-  - [2023 October 6](https://www.youtube.com/watch?v=CMXST0R6xRY) - Ordering attribs, client hints, async custom store with runes
-  - [2023 October 13](https://www.youtube.com/watch?v=Tp6ctouCX7A) - SvelteKit 1.25.2, How Melt UI works
-  - [2023 October 20](https://www.youtube.com/watch?v=O13bGtOV-aA) - Kit 1.26.0, Svelte 4.2.2, dynamically-loaded components
-
-_To Watch_
-
-- [SvelteKit & TailwindCSS Tutorial – Build & Deploy a Web Portfolio](https://www.youtube.com/watch?v=-2UjwQzxvBQ) by freeCodeCamp.org
-- [Why SvelteKit? [Intro to SvelteKit 1.0, part 1]](https://www.youtube.com/watch?v=FP4AylVsiT8) by Jeffrey Codes Javascript
-- [Build an AI Chatbot - it's that easy?!](https://www.youtube.com/watch?v=FcDj9_590Xg) by Simon Prammer
-- [Introduction to SvelteKit | FREE 5 HOUR SVELTE WORKSHOP 2023 | Lessons + Coding Exercises](https://www.youtube.com/watch?v=wWRhX_Hzyf8) by This Dot Media
-
-_To Read_
-
-- [What we learned from migrating our web app to SvelteKit](https://blog.datawrapper.de/migrating-our-web-app-to-sveltekit/) by Marten Sigwart
-- [SvelteKit Tutorial: Build a Website From Scratch](https://prismic.io/blog/svelte-sveltekit-tutorial) by Prismic has been updated based on the latest SvelteKit features
-- [Svelte by Example](https://sveltebyexample.com/) is a succinct, gentle introduction to Svelte & SvelteKit
-- [The Comprehensive Guide to Locals in SvelteKit](https://khromov.se/the-comprehensive-guide-to-locals-in-sveltekit/) by Stanislav Khromov
-- [How to build a blog, the hard way](https://cpf.sh/blog/2023/10/27/how-to-build-a-blog-the-hard-way) by Curtis Parfitt-Ford
-- [How to make a full-content RSS feed for your SvelteKit blog](https://www.kylenazario.com/blog/full-content-rss-feed-with-sveltekit) by Kyle Nazario
-- [A simple hash-routed dialog system with Svelte](https://inorganik.net/posts/2023-10-08-routed-svelte-dialogs) by Jamie Perkins
-- [When and Where to Render](https://blog.robino.dev/posts/rendering-strategies) and [One Less Reason to Build a Native App](https://blog.robino.dev/posts/install-web-app) by Ross Robino
-- [Open Neovim From Your Browser - Integrating nvim with Svelte’s Inspector](https://theosteiner.de/open-neovim-from-your-browser-integrating-nvim-with-sveltes-inspector) by Theo Steiner
-
-**Libraries, Tools & Components**
-
-- Work to [support SvelteKit in Deno](https://github.com/denoland/deno/issues/17248) is ongoing and [Deno now supports](https://github.com/denoland/deno/pull/21026) creating SvelteKit projects out-of-the-box!
-- [Purplix](https://github.com/WardPearce/Purplix.io) is an open-source collection of tools dedicated to user privacy and creating trust with your audience
-- [Obra Icons](https://github.com/Obra-Studio/obra-icons-svelte-public) is a simple, consistent set of icons, perfect for user interfaces
-- [svelte-chat-langchain](https://github.com/SimonPrammer/svelte-chat-langchain) is a minimal version of "Chat LangChain" implemented with SvelteKit, Vercel AI SDK and of course Langchain
-- [Cloudinary just released](https://svelte.cloudinary.dev/) an official Svelte SDK ([GitHub](https://github.com/cloudinary-community/svelte-cloudinary))
-
-That's it for this month! Feel free to let us know if we missed anything on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.gg/svelte).
-
-Until next time 👋
diff --git a/documentation/examples/00-introduction/00-hello-world/App.svelte b/documentation/examples/00-introduction/00-hello-world/App.svelte
deleted file mode 100644
index aa19c0abc4..0000000000
--- a/documentation/examples/00-introduction/00-hello-world/App.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<script>
-	let name = 'world';
-</script>
-
-<h1>Hello {name}!</h1>
diff --git a/documentation/examples/00-introduction/00-hello-world/meta.json b/documentation/examples/00-introduction/00-hello-world/meta.json
deleted file mode 100644
index 86590ebcc6..0000000000
--- a/documentation/examples/00-introduction/00-hello-world/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Hello world"
-}
diff --git a/documentation/examples/00-introduction/01-dynamic-attributes/App.svelte b/documentation/examples/00-introduction/01-dynamic-attributes/App.svelte
deleted file mode 100644
index 18259f27b0..0000000000
--- a/documentation/examples/00-introduction/01-dynamic-attributes/App.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<script>
-	let src = '/tutorial/image.gif';
-	let name = 'Rick Astley';
-</script>
-
-<!-- {src} is short for src={src} -->
-<img {src} alt="{name} dancing" />
diff --git a/documentation/examples/00-introduction/01-dynamic-attributes/meta.json b/documentation/examples/00-introduction/01-dynamic-attributes/meta.json
deleted file mode 100644
index 735b441544..0000000000
--- a/documentation/examples/00-introduction/01-dynamic-attributes/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Dynamic attributes"
-}
diff --git a/documentation/examples/00-introduction/02-styling/App.svelte b/documentation/examples/00-introduction/02-styling/App.svelte
deleted file mode 100644
index 5266147df3..0000000000
--- a/documentation/examples/00-introduction/02-styling/App.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<p>Styled!</p>
-
-<style>
-	p {
-		color: purple;
-		font-family: 'Comic Sans MS', cursive;
-		font-size: 2em;
-	}
-</style>
diff --git a/documentation/examples/00-introduction/02-styling/meta.json b/documentation/examples/00-introduction/02-styling/meta.json
deleted file mode 100644
index ab28e2c52f..0000000000
--- a/documentation/examples/00-introduction/02-styling/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Styling"
-}
diff --git a/documentation/examples/00-introduction/03-nested-components/App.svelte b/documentation/examples/00-introduction/03-nested-components/App.svelte
deleted file mode 100644
index 86f7f3a773..0000000000
--- a/documentation/examples/00-introduction/03-nested-components/App.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<script>
-	import Nested from './Nested.svelte';
-</script>
-
-<p>These styles...</p>
-<Nested />
-
-<style>
-	p {
-		color: purple;
-		font-family: 'Comic Sans MS', cursive;
-		font-size: 2em;
-	}
-</style>
diff --git a/documentation/examples/00-introduction/03-nested-components/Nested.svelte b/documentation/examples/00-introduction/03-nested-components/Nested.svelte
deleted file mode 100644
index de5d97fa86..0000000000
--- a/documentation/examples/00-introduction/03-nested-components/Nested.svelte
+++ /dev/null
@@ -1 +0,0 @@
-<p>...don't affect this element</p>
diff --git a/documentation/examples/00-introduction/03-nested-components/meta.json b/documentation/examples/00-introduction/03-nested-components/meta.json
deleted file mode 100644
index 5e383a49bd..0000000000
--- a/documentation/examples/00-introduction/03-nested-components/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Nested components"
-}
diff --git a/documentation/examples/00-introduction/04-html-tags/App.svelte b/documentation/examples/00-introduction/04-html-tags/App.svelte
deleted file mode 100644
index ebc5ade2bb..0000000000
--- a/documentation/examples/00-introduction/04-html-tags/App.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<script>
-	let string = `here's some <strong>HTML!!!</strong>`;
-</script>
-
-<p>{@html string}</p>
diff --git a/documentation/examples/00-introduction/04-html-tags/meta.json b/documentation/examples/00-introduction/04-html-tags/meta.json
deleted file mode 100644
index 04968c43aa..0000000000
--- a/documentation/examples/00-introduction/04-html-tags/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "HTML tags"
-}
diff --git a/documentation/examples/00-introduction/meta.json b/documentation/examples/00-introduction/meta.json
deleted file mode 100644
index fd70acd694..0000000000
--- a/documentation/examples/00-introduction/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Introduction"
-}
diff --git a/documentation/examples/01-reactivity/00-reactive-assignments/App.svelte b/documentation/examples/01-reactivity/00-reactive-assignments/App.svelte
deleted file mode 100644
index 6d78f949e1..0000000000
--- a/documentation/examples/01-reactivity/00-reactive-assignments/App.svelte
+++ /dev/null
@@ -1,12 +0,0 @@
-<script>
-	let count = 0;
-
-	function handleClick() {
-		count += 1;
-	}
-</script>
-
-<button on:click={handleClick}>
-	Clicked {count}
-	{count === 1 ? 'time' : 'times'}
-</button>
diff --git a/documentation/examples/01-reactivity/00-reactive-assignments/meta.json b/documentation/examples/01-reactivity/00-reactive-assignments/meta.json
deleted file mode 100644
index b863d19abd..0000000000
--- a/documentation/examples/01-reactivity/00-reactive-assignments/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Reactive assignments"
-}
diff --git a/documentation/examples/01-reactivity/01-reactive-declarations/App.svelte b/documentation/examples/01-reactivity/01-reactive-declarations/App.svelte
deleted file mode 100644
index 7d2eafba9f..0000000000
--- a/documentation/examples/01-reactivity/01-reactive-declarations/App.svelte
+++ /dev/null
@@ -1,18 +0,0 @@
-<script>
-	let count = 1;
-
-	// the `$:` means 're-run whenever these values change'
-	$: doubled = count * 2;
-	$: quadrupled = doubled * 2;
-
-	function handleClick() {
-		count += 1;
-	}
-</script>
-
-<button on:click={handleClick}>
-	Count: {count}
-</button>
-
-<p>{count} * 2 = {doubled}</p>
-<p>{doubled} * 2 = {quadrupled}</p>
diff --git a/documentation/examples/01-reactivity/01-reactive-declarations/meta.json b/documentation/examples/01-reactivity/01-reactive-declarations/meta.json
deleted file mode 100644
index cddf2d9562..0000000000
--- a/documentation/examples/01-reactivity/01-reactive-declarations/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Reactive declarations"
-}
diff --git a/documentation/examples/01-reactivity/02-reactive-statements/App.svelte b/documentation/examples/01-reactivity/02-reactive-statements/App.svelte
deleted file mode 100644
index 99590c87d7..0000000000
--- a/documentation/examples/01-reactivity/02-reactive-statements/App.svelte
+++ /dev/null
@@ -1,17 +0,0 @@
-<script>
-	let count = 0;
-
-	$: if (count >= 10) {
-		alert(`count is dangerously high!`);
-		count = 9;
-	}
-
-	function handleClick() {
-		count += 1;
-	}
-</script>
-
-<button on:click={handleClick}>
-	Clicked {count}
-	{count === 1 ? 'time' : 'times'}
-</button>
diff --git a/documentation/examples/01-reactivity/02-reactive-statements/meta.json b/documentation/examples/01-reactivity/02-reactive-statements/meta.json
deleted file mode 100644
index e74b0b575a..0000000000
--- a/documentation/examples/01-reactivity/02-reactive-statements/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Reactive statements"
-}
diff --git a/documentation/examples/01-reactivity/meta.json b/documentation/examples/01-reactivity/meta.json
deleted file mode 100644
index fe8d63b26d..0000000000
--- a/documentation/examples/01-reactivity/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Reactivity"
-}
diff --git a/documentation/examples/02-props/00-declaring-props/App.svelte b/documentation/examples/02-props/00-declaring-props/App.svelte
deleted file mode 100644
index f64b69a87c..0000000000
--- a/documentation/examples/02-props/00-declaring-props/App.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<script>
-	import Nested from './Nested.svelte';
-</script>
-
-<Nested answer={42} />
diff --git a/documentation/examples/02-props/00-declaring-props/Nested.svelte b/documentation/examples/02-props/00-declaring-props/Nested.svelte
deleted file mode 100644
index 7267c0edea..0000000000
--- a/documentation/examples/02-props/00-declaring-props/Nested.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<script>
-	export let answer;
-</script>
-
-<p>The answer is {answer}</p>
diff --git a/documentation/examples/02-props/00-declaring-props/meta.json b/documentation/examples/02-props/00-declaring-props/meta.json
deleted file mode 100644
index 420af805c4..0000000000
--- a/documentation/examples/02-props/00-declaring-props/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Declaring props"
-}
diff --git a/documentation/examples/02-props/01-default-values/App.svelte b/documentation/examples/02-props/01-default-values/App.svelte
deleted file mode 100644
index 27e880eb5c..0000000000
--- a/documentation/examples/02-props/01-default-values/App.svelte
+++ /dev/null
@@ -1,6 +0,0 @@
-<script>
-	import Nested from './Nested.svelte';
-</script>
-
-<Nested answer={42} />
-<Nested />
diff --git a/documentation/examples/02-props/01-default-values/Nested.svelte b/documentation/examples/02-props/01-default-values/Nested.svelte
deleted file mode 100644
index 3efe9ccb75..0000000000
--- a/documentation/examples/02-props/01-default-values/Nested.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<script>
-	export let answer = 'a mystery';
-</script>
-
-<p>The answer is {answer}</p>
diff --git a/documentation/examples/02-props/01-default-values/meta.json b/documentation/examples/02-props/01-default-values/meta.json
deleted file mode 100644
index 319a7fdbea..0000000000
--- a/documentation/examples/02-props/01-default-values/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Default values"
-}
diff --git a/documentation/examples/02-props/02-spread-props/App.svelte b/documentation/examples/02-props/02-spread-props/App.svelte
deleted file mode 100644
index d2f97713d1..0000000000
--- a/documentation/examples/02-props/02-spread-props/App.svelte
+++ /dev/null
@@ -1,12 +0,0 @@
-<script>
-	import Info from './Info.svelte';
-
-	const pkg = {
-		name: 'svelte',
-		version: 3,
-		speed: 'blazing',
-		website: 'https://svelte.dev'
-	};
-</script>
-
-<Info {...pkg} />
diff --git a/documentation/examples/02-props/02-spread-props/Info.svelte b/documentation/examples/02-props/02-spread-props/Info.svelte
deleted file mode 100644
index 241b84a9af..0000000000
--- a/documentation/examples/02-props/02-spread-props/Info.svelte
+++ /dev/null
@@ -1,12 +0,0 @@
-<script>
-	export let name;
-	export let version;
-	export let speed;
-	export let website;
-</script>
-
-<p>
-	The <code>{name}</code> package is {speed} fast. Download version {version} from
-	<a href="https://www.npmjs.com/package/{name}">npm</a>
-	and <a href={website}>learn more here</a>
-</p>
diff --git a/documentation/examples/02-props/02-spread-props/meta.json b/documentation/examples/02-props/02-spread-props/meta.json
deleted file mode 100644
index d2185f97c1..0000000000
--- a/documentation/examples/02-props/02-spread-props/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Spread props"
-}
diff --git a/documentation/examples/02-props/meta.json b/documentation/examples/02-props/meta.json
deleted file mode 100644
index d03965c7cb..0000000000
--- a/documentation/examples/02-props/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Props"
-}
diff --git a/documentation/examples/03-logic/00-if-blocks/App.svelte b/documentation/examples/03-logic/00-if-blocks/App.svelte
deleted file mode 100644
index d986710847..0000000000
--- a/documentation/examples/03-logic/00-if-blocks/App.svelte
+++ /dev/null
@@ -1,15 +0,0 @@
-<script>
-	let user = { loggedIn: false };
-
-	function toggle() {
-		user.loggedIn = !user.loggedIn;
-	}
-</script>
-
-{#if user.loggedIn}
-	<button on:click={toggle}> Log out </button>
-{/if}
-
-{#if !user.loggedIn}
-	<button on:click={toggle}> Log in </button>
-{/if}
diff --git a/documentation/examples/03-logic/00-if-blocks/meta.json b/documentation/examples/03-logic/00-if-blocks/meta.json
deleted file mode 100644
index 9ea2f5724d..0000000000
--- a/documentation/examples/03-logic/00-if-blocks/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "If blocks"
-}
diff --git a/documentation/examples/03-logic/01-else-blocks/App.svelte b/documentation/examples/03-logic/01-else-blocks/App.svelte
deleted file mode 100644
index 146e54bcc0..0000000000
--- a/documentation/examples/03-logic/01-else-blocks/App.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script>
-	let user = { loggedIn: false };
-
-	function toggle() {
-		user.loggedIn = !user.loggedIn;
-	}
-</script>
-
-{#if user.loggedIn}
-	<button on:click={toggle}> Log out </button>
-{:else}
-	<button on:click={toggle}> Log in </button>
-{/if}
diff --git a/documentation/examples/03-logic/01-else-blocks/meta.json b/documentation/examples/03-logic/01-else-blocks/meta.json
deleted file mode 100644
index 46f18e058c..0000000000
--- a/documentation/examples/03-logic/01-else-blocks/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Else blocks"
-}
diff --git a/documentation/examples/03-logic/02-else-if-blocks/App.svelte b/documentation/examples/03-logic/02-else-if-blocks/App.svelte
deleted file mode 100644
index 2b740dbf9b..0000000000
--- a/documentation/examples/03-logic/02-else-if-blocks/App.svelte
+++ /dev/null
@@ -1,11 +0,0 @@
-<script>
-	let x = 7;
-</script>
-
-{#if x > 10}
-	<p>{x} is greater than 10</p>
-{:else if 5 > x}
-	<p>{x} is less than 5</p>
-{:else}
-	<p>{x} is between 5 and 10</p>
-{/if}
diff --git a/documentation/examples/03-logic/02-else-if-blocks/meta.json b/documentation/examples/03-logic/02-else-if-blocks/meta.json
deleted file mode 100644
index aa22db3f01..0000000000
--- a/documentation/examples/03-logic/02-else-if-blocks/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Else-if blocks"
-}
diff --git a/documentation/examples/03-logic/03-each-blocks/App.svelte b/documentation/examples/03-logic/03-each-blocks/App.svelte
deleted file mode 100644
index 7d08b79ab8..0000000000
--- a/documentation/examples/03-logic/03-each-blocks/App.svelte
+++ /dev/null
@@ -1,19 +0,0 @@
-<script>
-	let cats = [
-		{ id: 'J---aiyznGQ', name: 'Keyboard Cat' },
-		{ id: 'z_AbfPXTKms', name: 'Maru' },
-		{ id: 'OUtn3pvWmpg', name: 'Henri The Existential Cat' }
-	];
-</script>
-
-<h1>The Famous Cats of YouTube</h1>
-
-<ul>
-	{#each cats as { id, name }, i}
-		<li>
-			<a target="_blank" rel="noreferrer" href="https://www.youtube.com/watch?v={id}">
-				{i + 1}: {name}
-			</a>
-		</li>
-	{/each}
-</ul>
diff --git a/documentation/examples/03-logic/03-each-blocks/meta.json b/documentation/examples/03-logic/03-each-blocks/meta.json
deleted file mode 100644
index d92f84ef89..0000000000
--- a/documentation/examples/03-logic/03-each-blocks/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Each blocks"
-}
diff --git a/documentation/examples/03-logic/04-keyed-each-blocks/App.svelte b/documentation/examples/03-logic/04-keyed-each-blocks/App.svelte
deleted file mode 100644
index 4f26f709e2..0000000000
--- a/documentation/examples/03-logic/04-keyed-each-blocks/App.svelte
+++ /dev/null
@@ -1,33 +0,0 @@
-<script>
-	import Thing from './Thing.svelte';
-
-	let things = [
-		{ id: 1, color: 'darkblue' },
-		{ id: 2, color: 'indigo' },
-		{ id: 3, color: 'deeppink' },
-		{ id: 4, color: 'salmon' },
-		{ id: 5, color: 'gold' }
-	];
-
-	function handleClick() {
-		things = things.slice(1);
-	}
-</script>
-
-<button on:click={handleClick}> Remove first thing </button>
-
-<div style="display: grid; grid-template-columns: 1fr 1fr; grid-gap: 1em">
-	<div>
-		<h2>Keyed</h2>
-		{#each things as thing (thing.id)}
-			<Thing current={thing.color} />
-		{/each}
-	</div>
-
-	<div>
-		<h2>Unkeyed</h2>
-		{#each things as thing}
-			<Thing current={thing.color} />
-		{/each}
-	</div>
-</div>
diff --git a/documentation/examples/03-logic/04-keyed-each-blocks/Thing.svelte b/documentation/examples/03-logic/04-keyed-each-blocks/Thing.svelte
deleted file mode 100644
index 7d069ea7e4..0000000000
--- a/documentation/examples/03-logic/04-keyed-each-blocks/Thing.svelte
+++ /dev/null
@@ -1,24 +0,0 @@
-<script>
-	// `current` is updated whenever the prop value changes...
-	export let current;
-
-	// ...but `initial` is fixed upon initialisation
-	const initial = current;
-</script>
-
-<p>
-	<span style="background-color: {initial}">initial</span>
-	<span style="background-color: {current}">current</span>
-</p>
-
-<style>
-	span {
-		display: inline-block;
-		padding: 0.2em 0.5em;
-		margin: 0 0.2em 0.2em 0;
-		width: 4em;
-		text-align: center;
-		border-radius: 0.2em;
-		color: white;
-	}
-</style>
diff --git a/documentation/examples/03-logic/04-keyed-each-blocks/meta.json b/documentation/examples/03-logic/04-keyed-each-blocks/meta.json
deleted file mode 100644
index fa182ae360..0000000000
--- a/documentation/examples/03-logic/04-keyed-each-blocks/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Keyed each blocks"
-}
diff --git a/documentation/examples/03-logic/05-await-blocks/App.svelte b/documentation/examples/03-logic/05-await-blocks/App.svelte
deleted file mode 100644
index fa1e4fe9cb..0000000000
--- a/documentation/examples/03-logic/05-await-blocks/App.svelte
+++ /dev/null
@@ -1,28 +0,0 @@
-<script>
-	let promise = getRandomNumber();
-
-	async function getRandomNumber() {
-		const res = await fetch(`/tutorial/random-number`);
-		const text = await res.text();
-
-		if (res.ok) {
-			return text;
-		} else {
-			throw new Error(text);
-		}
-	}
-
-	function handleClick() {
-		promise = getRandomNumber();
-	}
-</script>
-
-<button on:click={handleClick}> generate random number </button>
-
-{#await promise}
-	<p>...waiting</p>
-{:then number}
-	<p>The number is {number}</p>
-{:catch error}
-	<p style="color: red">{error.message}</p>
-{/await}
diff --git a/documentation/examples/03-logic/05-await-blocks/meta.json b/documentation/examples/03-logic/05-await-blocks/meta.json
deleted file mode 100644
index 6ed00514ed..0000000000
--- a/documentation/examples/03-logic/05-await-blocks/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Await blocks"
-}
diff --git a/documentation/examples/03-logic/meta.json b/documentation/examples/03-logic/meta.json
deleted file mode 100644
index 22e69b0c83..0000000000
--- a/documentation/examples/03-logic/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Logic"
-}
diff --git a/documentation/examples/04-events/00-dom-events/App.svelte b/documentation/examples/04-events/00-dom-events/App.svelte
deleted file mode 100644
index 2f6eac115c..0000000000
--- a/documentation/examples/04-events/00-dom-events/App.svelte
+++ /dev/null
@@ -1,20 +0,0 @@
-<script>
-	let m = { x: 0, y: 0 };
-
-	function handleMousemove(event) {
-		m.x = event.clientX;
-		m.y = event.clientY;
-	}
-</script>
-
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<div on:mousemove={handleMousemove}>
-	The mouse position is {m.x} x {m.y}
-</div>
-
-<style>
-	div {
-		width: 100%;
-		height: 100%;
-	}
-</style>
diff --git a/documentation/examples/04-events/00-dom-events/meta.json b/documentation/examples/04-events/00-dom-events/meta.json
deleted file mode 100644
index f23a9c21d5..0000000000
--- a/documentation/examples/04-events/00-dom-events/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "DOM events"
-}
diff --git a/documentation/examples/04-events/01-inline-handlers/App.svelte b/documentation/examples/04-events/01-inline-handlers/App.svelte
deleted file mode 100644
index 4827241f30..0000000000
--- a/documentation/examples/04-events/01-inline-handlers/App.svelte
+++ /dev/null
@@ -1,15 +0,0 @@
-<script>
-	let m = { x: 0, y: 0 };
-</script>
-
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<div on:mousemove={(e) => (m = { x: e.clientX, y: e.clientY })}>
-	The mouse position is {m.x} x {m.y}
-</div>
-
-<style>
-	div {
-		width: 100%;
-		height: 100%;
-	}
-</style>
diff --git a/documentation/examples/04-events/01-inline-handlers/meta.json b/documentation/examples/04-events/01-inline-handlers/meta.json
deleted file mode 100644
index 5cbdbf4cb4..0000000000
--- a/documentation/examples/04-events/01-inline-handlers/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Inline handlers"
-}
diff --git a/documentation/examples/04-events/02-event-modifiers/App.svelte b/documentation/examples/04-events/02-event-modifiers/App.svelte
deleted file mode 100644
index c22168901f..0000000000
--- a/documentation/examples/04-events/02-event-modifiers/App.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<script>
-	function handleClick() {
-		alert('no more alerts');
-	}
-</script>
-
-<button on:click|once={handleClick}> Click me </button>
diff --git a/documentation/examples/04-events/02-event-modifiers/meta.json b/documentation/examples/04-events/02-event-modifiers/meta.json
deleted file mode 100644
index ae16092f1f..0000000000
--- a/documentation/examples/04-events/02-event-modifiers/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Event modifiers"
-}
diff --git a/documentation/examples/04-events/03-component-events/App.svelte b/documentation/examples/04-events/03-component-events/App.svelte
deleted file mode 100644
index 3600b45efd..0000000000
--- a/documentation/examples/04-events/03-component-events/App.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<script>
-	import Inner from './Inner.svelte';
-
-	function handleMessage(event) {
-		alert(event.detail.text);
-	}
-</script>
-
-<Inner on:message={handleMessage} />
diff --git a/documentation/examples/04-events/03-component-events/Inner.svelte b/documentation/examples/04-events/03-component-events/Inner.svelte
deleted file mode 100644
index c2e85b4c97..0000000000
--- a/documentation/examples/04-events/03-component-events/Inner.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script>
-	import { createEventDispatcher } from 'svelte';
-
-	const dispatch = createEventDispatcher();
-
-	function sayHello() {
-		dispatch('message', {
-			text: 'Hello!'
-		});
-	}
-</script>
-
-<button on:click={sayHello}> Click to say hello </button>
diff --git a/documentation/examples/04-events/03-component-events/meta.json b/documentation/examples/04-events/03-component-events/meta.json
deleted file mode 100644
index 0565d335e8..0000000000
--- a/documentation/examples/04-events/03-component-events/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Component events"
-}
diff --git a/documentation/examples/04-events/04-event-forwarding/App.svelte b/documentation/examples/04-events/04-event-forwarding/App.svelte
deleted file mode 100644
index 2e8e743f4e..0000000000
--- a/documentation/examples/04-events/04-event-forwarding/App.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<script>
-	import Outer from './Outer.svelte';
-
-	function handleMessage(event) {
-		alert(event.detail.text);
-	}
-</script>
-
-<Outer on:message={handleMessage} />
diff --git a/documentation/examples/04-events/04-event-forwarding/Inner.svelte b/documentation/examples/04-events/04-event-forwarding/Inner.svelte
deleted file mode 100644
index c2e85b4c97..0000000000
--- a/documentation/examples/04-events/04-event-forwarding/Inner.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script>
-	import { createEventDispatcher } from 'svelte';
-
-	const dispatch = createEventDispatcher();
-
-	function sayHello() {
-		dispatch('message', {
-			text: 'Hello!'
-		});
-	}
-</script>
-
-<button on:click={sayHello}> Click to say hello </button>
diff --git a/documentation/examples/04-events/04-event-forwarding/Outer.svelte b/documentation/examples/04-events/04-event-forwarding/Outer.svelte
deleted file mode 100644
index 62a5d1d852..0000000000
--- a/documentation/examples/04-events/04-event-forwarding/Outer.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<script>
-	import Inner from './Inner.svelte';
-</script>
-
-<Inner on:message />
diff --git a/documentation/examples/04-events/04-event-forwarding/meta.json b/documentation/examples/04-events/04-event-forwarding/meta.json
deleted file mode 100644
index 5506471c94..0000000000
--- a/documentation/examples/04-events/04-event-forwarding/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Event forwarding"
-}
diff --git a/documentation/examples/04-events/05-dom-event-forwarding/App.svelte b/documentation/examples/04-events/05-dom-event-forwarding/App.svelte
deleted file mode 100644
index 4e5764a310..0000000000
--- a/documentation/examples/04-events/05-dom-event-forwarding/App.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<script>
-	import CustomButton from './CustomButton.svelte';
-
-	function handleClick() {
-		alert('clicked');
-	}
-</script>
-
-<CustomButton on:click={handleClick} />
diff --git a/documentation/examples/04-events/05-dom-event-forwarding/CustomButton.svelte b/documentation/examples/04-events/05-dom-event-forwarding/CustomButton.svelte
deleted file mode 100644
index 1f90fac103..0000000000
--- a/documentation/examples/04-events/05-dom-event-forwarding/CustomButton.svelte
+++ /dev/null
@@ -1,20 +0,0 @@
-<button on:click> Click me </button>
-
-<style>
-	button {
-		height: 4rem;
-		width: 8rem;
-		background-color: #aaa;
-		border-color: #f1c40f;
-		color: #f1c40f;
-		font-size: 1.25rem;
-		background-image: linear-gradient(45deg, #f1c40f 50%, transparent 50%);
-		background-position: 100%;
-		background-size: 400%;
-		transition: background 300ms ease-in-out;
-	}
-	button:hover {
-		background-position: 0;
-		color: #aaa;
-	}
-</style>
diff --git a/documentation/examples/04-events/05-dom-event-forwarding/meta.json b/documentation/examples/04-events/05-dom-event-forwarding/meta.json
deleted file mode 100644
index c2fdf2ddcf..0000000000
--- a/documentation/examples/04-events/05-dom-event-forwarding/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "DOM event forwarding"
-}
diff --git a/documentation/examples/04-events/meta.json b/documentation/examples/04-events/meta.json
deleted file mode 100644
index 42460e989b..0000000000
--- a/documentation/examples/04-events/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Events"
-}
diff --git a/documentation/examples/05-bindings/00-text-inputs/App.svelte b/documentation/examples/05-bindings/00-text-inputs/App.svelte
deleted file mode 100644
index 9ec139df21..0000000000
--- a/documentation/examples/05-bindings/00-text-inputs/App.svelte
+++ /dev/null
@@ -1,6 +0,0 @@
-<script>
-	let name = '';
-</script>
-
-<input bind:value={name} placeholder="enter your name" />
-<p>Hello {name || 'stranger'}!</p>
diff --git a/documentation/examples/05-bindings/00-text-inputs/meta.json b/documentation/examples/05-bindings/00-text-inputs/meta.json
deleted file mode 100644
index ac90cb18c0..0000000000
--- a/documentation/examples/05-bindings/00-text-inputs/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Text inputs"
-}
diff --git a/documentation/examples/05-bindings/01-numeric-inputs/App.svelte b/documentation/examples/05-bindings/01-numeric-inputs/App.svelte
deleted file mode 100644
index 15ef23c466..0000000000
--- a/documentation/examples/05-bindings/01-numeric-inputs/App.svelte
+++ /dev/null
@@ -1,16 +0,0 @@
-<script>
-	let a = 1;
-	let b = 2;
-</script>
-
-<label>
-	<input type="number" bind:value={a} min="0" max="10" />
-	<input type="range" bind:value={a} min="0" max="10" />
-</label>
-
-<label>
-	<input type="number" bind:value={b} min="0" max="10" />
-	<input type="range" bind:value={b} min="0" max="10" />
-</label>
-
-<p>{a} + {b} = {a + b}</p>
diff --git a/documentation/examples/05-bindings/01-numeric-inputs/meta.json b/documentation/examples/05-bindings/01-numeric-inputs/meta.json
deleted file mode 100644
index a7218c38cd..0000000000
--- a/documentation/examples/05-bindings/01-numeric-inputs/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Numeric inputs"
-}
diff --git a/documentation/examples/05-bindings/02-checkbox-inputs/App.svelte b/documentation/examples/05-bindings/02-checkbox-inputs/App.svelte
deleted file mode 100644
index b337359317..0000000000
--- a/documentation/examples/05-bindings/02-checkbox-inputs/App.svelte
+++ /dev/null
@@ -1,16 +0,0 @@
-<script>
-	let yes = false;
-</script>
-
-<label>
-	<input type="checkbox" bind:checked={yes} />
-	Yes! Send me regular email spam
-</label>
-
-{#if yes}
-	<p>Thank you. We will bombard your inbox and sell your personal details.</p>
-{:else}
-	<p>You must opt-in to continue. If you're not paying, you're the product.</p>
-{/if}
-
-<button disabled={!yes}> Subscribe </button>
diff --git a/documentation/examples/05-bindings/02-checkbox-inputs/meta.json b/documentation/examples/05-bindings/02-checkbox-inputs/meta.json
deleted file mode 100644
index 262b0f00e5..0000000000
--- a/documentation/examples/05-bindings/02-checkbox-inputs/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Checkbox inputs"
-}
diff --git a/documentation/examples/05-bindings/03-group-inputs/App.svelte b/documentation/examples/05-bindings/03-group-inputs/App.svelte
deleted file mode 100644
index 0ab215d519..0000000000
--- a/documentation/examples/05-bindings/03-group-inputs/App.svelte
+++ /dev/null
@@ -1,49 +0,0 @@
-<script>
-	let scoops = 1;
-	let flavours = ['Mint choc chip'];
-
-	let menu = ['Cookies and cream', 'Mint choc chip', 'Raspberry ripple'];
-
-	function join(flavours) {
-		if (flavours.length === 1) return flavours[0];
-		return `${flavours.slice(0, -1).join(', ')} and ${flavours[flavours.length - 1]}`;
-	}
-</script>
-
-<h2>Size</h2>
-
-<label>
-	<input type="radio" bind:group={scoops} value={1} />
-	One scoop
-</label>
-
-<label>
-	<input type="radio" bind:group={scoops} value={2} />
-	Two scoops
-</label>
-
-<label>
-	<input type="radio" bind:group={scoops} value={3} />
-	Three scoops
-</label>
-
-<h2>Flavours</h2>
-
-{#each menu as flavour}
-	<label>
-		<input type="checkbox" bind:group={flavours} value={flavour} />
-		{flavour}
-	</label>
-{/each}
-
-{#if flavours.length === 0}
-	<p>Please select at least one flavour</p>
-{:else if flavours.length > scoops}
-	<p>Can't order more flavours than scoops!</p>
-{:else}
-	<p>
-		You ordered {scoops}
-		{scoops === 1 ? 'scoop' : 'scoops'}
-		of {join(flavours)}
-	</p>
-{/if}
diff --git a/documentation/examples/05-bindings/03-group-inputs/meta.json b/documentation/examples/05-bindings/03-group-inputs/meta.json
deleted file mode 100644
index 9c7517686d..0000000000
--- a/documentation/examples/05-bindings/03-group-inputs/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Group inputs"
-}
diff --git a/documentation/examples/05-bindings/04-textarea-inputs/App.svelte b/documentation/examples/05-bindings/04-textarea-inputs/App.svelte
deleted file mode 100644
index ecb809095d..0000000000
--- a/documentation/examples/05-bindings/04-textarea-inputs/App.svelte
+++ /dev/null
@@ -1,15 +0,0 @@
-<script>
-	import { marked } from 'marked';
-	let text = `Some words are *italic*, some are **bold**`;
-</script>
-
-<textarea bind:value={text} />
-
-{@html marked(text)}
-
-<style>
-	textarea {
-		width: 100%;
-		height: 200px;
-	}
-</style>
diff --git a/documentation/examples/05-bindings/04-textarea-inputs/meta.json b/documentation/examples/05-bindings/04-textarea-inputs/meta.json
deleted file mode 100644
index 3e7963efcd..0000000000
--- a/documentation/examples/05-bindings/04-textarea-inputs/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Textarea inputs"
-}
diff --git a/documentation/examples/05-bindings/05-file-inputs/App.svelte b/documentation/examples/05-bindings/05-file-inputs/App.svelte
deleted file mode 100644
index fdf478e1bb..0000000000
--- a/documentation/examples/05-bindings/05-file-inputs/App.svelte
+++ /dev/null
@@ -1,26 +0,0 @@
-<script>
-	let files;
-
-	$: if (files) {
-		// Note that `files` is of type `FileList`, not an Array:
-		// https://developer.mozilla.org/en-US/docs/Web/API/FileList
-		console.log(files);
-
-		for (const file of files) {
-			console.log(`${file.name}: ${file.size} bytes`);
-		}
-	}
-</script>
-
-<label for="avatar">Upload a picture:</label>
-<input accept="image/png, image/jpeg" bind:files id="avatar" name="avatar" type="file" />
-
-<label for="many">Upload multiple files of any type:</label>
-<input bind:files id="many" multiple type="file" />
-
-{#if files}
-	<h2>Selected files:</h2>
-	{#each Array.from(files) as file}
-		<p>{file.name} ({file.size} bytes)</p>
-	{/each}
-{/if}
diff --git a/documentation/examples/05-bindings/05-file-inputs/meta.json b/documentation/examples/05-bindings/05-file-inputs/meta.json
deleted file mode 100644
index 92d0587e87..0000000000
--- a/documentation/examples/05-bindings/05-file-inputs/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "File inputs"
-}
diff --git a/documentation/examples/05-bindings/06-select-bindings/App.svelte b/documentation/examples/05-bindings/06-select-bindings/App.svelte
deleted file mode 100644
index 7785258fe2..0000000000
--- a/documentation/examples/05-bindings/06-select-bindings/App.svelte
+++ /dev/null
@@ -1,41 +0,0 @@
-<script>
-	let questions = [
-		{ id: 1, text: `Where did you go to school?` },
-		{ id: 2, text: `What is your mother's name?` },
-		{ id: 3, text: `What is another personal fact that an attacker could easily find with Google?` }
-	];
-
-	let selected;
-
-	let answer = '';
-
-	function handleSubmit() {
-		alert(`answered question ${selected.id} (${selected.text}) with "${answer}"`);
-	}
-</script>
-
-<h2>Insecurity questions</h2>
-
-<form on:submit|preventDefault={handleSubmit}>
-	<select bind:value={selected} on:change={() => (answer = '')}>
-		{#each questions as question}
-			<option value={question}>
-				{question.text}
-			</option>
-		{/each}
-	</select>
-
-	<input bind:value={answer} />
-
-	<button disabled={!answer} type="submit"> Submit </button>
-</form>
-
-<p>selected question {selected ? selected.id : '[waiting...]'}</p>
-
-<style>
-	input {
-		display: block;
-		width: 500px;
-		max-width: 100%;
-	}
-</style>
diff --git a/documentation/examples/05-bindings/06-select-bindings/meta.json b/documentation/examples/05-bindings/06-select-bindings/meta.json
deleted file mode 100644
index 0e5fdbafd3..0000000000
--- a/documentation/examples/05-bindings/06-select-bindings/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Select bindings"
-}
diff --git a/documentation/examples/05-bindings/07-multiple-select-bindings/App.svelte b/documentation/examples/05-bindings/07-multiple-select-bindings/App.svelte
deleted file mode 100644
index 2fd19c28ad..0000000000
--- a/documentation/examples/05-bindings/07-multiple-select-bindings/App.svelte
+++ /dev/null
@@ -1,50 +0,0 @@
-<script>
-	let scoops = 1;
-	let flavours = ['Mint choc chip'];
-
-	let menu = ['Cookies and cream', 'Mint choc chip', 'Raspberry ripple'];
-
-	function join(flavours) {
-		if (flavours.length === 1) return flavours[0];
-		return `${flavours.slice(0, -1).join(', ')} and ${flavours[flavours.length - 1]}`;
-	}
-</script>
-
-<h2>Size</h2>
-
-<label>
-	<input type="radio" bind:group={scoops} value={1} />
-	One scoop
-</label>
-
-<label>
-	<input type="radio" bind:group={scoops} value={2} />
-	Two scoops
-</label>
-
-<label>
-	<input type="radio" bind:group={scoops} value={3} />
-	Three scoops
-</label>
-
-<h2>Flavours</h2>
-
-<select multiple bind:value={flavours}>
-	{#each menu as flavour}
-		<option value={flavour}>
-			{flavour}
-		</option>
-	{/each}
-</select>
-
-{#if flavours.length === 0}
-	<p>Please select at least one flavour</p>
-{:else if flavours.length > scoops}
-	<p>Can't order more flavours than scoops!</p>
-{:else}
-	<p>
-		You ordered {scoops}
-		{scoops === 1 ? 'scoop' : 'scoops'}
-		of {join(flavours)}
-	</p>
-{/if}
diff --git a/documentation/examples/05-bindings/07-multiple-select-bindings/meta.json b/documentation/examples/05-bindings/07-multiple-select-bindings/meta.json
deleted file mode 100644
index 11b6cafd83..0000000000
--- a/documentation/examples/05-bindings/07-multiple-select-bindings/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Select multiple"
-}
diff --git a/documentation/examples/05-bindings/08-each-block-bindings/App.svelte b/documentation/examples/05-bindings/08-each-block-bindings/App.svelte
deleted file mode 100644
index a8118093d3..0000000000
--- a/documentation/examples/05-bindings/08-each-block-bindings/App.svelte
+++ /dev/null
@@ -1,33 +0,0 @@
-<script>
-	let todos = [
-		{ done: false, text: 'finish Svelte tutorial' },
-		{ done: false, text: 'build an app' },
-		{ done: false, text: 'world domination' }
-	];
-
-	function add() {
-		todos = todos.concat({ done: false, text: '' });
-	}
-
-	function clear() {
-		todos = todos.filter((t) => !t.done);
-	}
-
-	$: remaining = todos.filter((t) => !t.done).length;
-</script>
-
-<h1>Todos</h1>
-
-{#each todos as todo}
-	<div>
-		<input type="checkbox" bind:checked={todo.done} />
-
-		<input placeholder="What needs to be done?" bind:value={todo.text} disabled={todo.done} />
-	</div>
-{/each}
-
-<p>{remaining} remaining</p>
-
-<button on:click={add}> Add new </button>
-
-<button on:click={clear}> Clear completed </button>
diff --git a/documentation/examples/05-bindings/08-each-block-bindings/meta.json b/documentation/examples/05-bindings/08-each-block-bindings/meta.json
deleted file mode 100644
index bb4e1e1e88..0000000000
--- a/documentation/examples/05-bindings/08-each-block-bindings/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Each block bindings"
-}
diff --git a/documentation/examples/05-bindings/09-media-elements/App.svelte b/documentation/examples/05-bindings/09-media-elements/App.svelte
deleted file mode 100644
index 836804f8bc..0000000000
--- a/documentation/examples/05-bindings/09-media-elements/App.svelte
+++ /dev/null
@@ -1,134 +0,0 @@
-<script>
-	// These values are bound to properties of the video
-	let time = 0;
-	let duration;
-	let paused = true;
-
-	let showControls = true;
-	let showControlsTimeout;
-
-	// Used to track time of last mouse down event
-	let lastMouseDown;
-
-	function handleMove(e) {
-		// Make the controls visible, but fade out after
-		// 2.5 seconds of inactivity
-		clearTimeout(showControlsTimeout);
-		showControlsTimeout = setTimeout(() => (showControls = false), 2500);
-		showControls = true;
-
-		if (!duration) return; // video not loaded yet
-		if (e.type !== 'touchmove' && !(e.buttons & 1)) return; // mouse not down
-
-		const clientX = e.type === 'touchmove' ? e.touches[0].clientX : e.clientX;
-		const { left, right } = this.getBoundingClientRect();
-		time = (duration * (clientX - left)) / (right - left);
-	}
-
-	// we can't rely on the built-in click event, because it fires
-	// after a drag — we have to listen for clicks ourselves
-	function handleMousedown(e) {
-		lastMouseDown = new Date();
-	}
-
-	function handleMouseup(e) {
-		if (new Date() - lastMouseDown < 300) {
-			if (paused) e.target.play();
-			else e.target.pause();
-		}
-	}
-
-	function format(seconds) {
-		if (isNaN(seconds)) return '...';
-
-		const minutes = Math.floor(seconds / 60);
-		seconds = Math.floor(seconds % 60);
-		if (seconds < 10) seconds = '0' + seconds;
-
-		return `${minutes}:${seconds}`;
-	}
-</script>
-
-<h1>Caminandes: Llamigos</h1>
-<p>From <a href="https://studio.blender.org/films">Blender Studio</a>. CC-BY</p>
-
-<div>
-	<video
-		poster="https://sveltejs.github.io/assets/caminandes-llamigos.jpg"
-		src="https://sveltejs.github.io/assets/caminandes-llamigos.mp4"
-		on:mousemove={handleMove}
-		on:touchmove|preventDefault={handleMove}
-		on:mousedown={handleMousedown}
-		on:mouseup={handleMouseup}
-		bind:currentTime={time}
-		bind:duration
-		bind:paused
-	>
-		<track kind="captions" />
-	</video>
-
-	<div class="controls" style="opacity: {duration && showControls ? 1 : 0}">
-		<progress value={time / duration || 0} />
-
-		<div class="info">
-			<span class="time">{format(time)}</span>
-			<span>click anywhere to {paused ? 'play' : 'pause'} / drag to seek</span>
-			<span class="time">{format(duration)}</span>
-		</div>
-	</div>
-</div>
-
-<style>
-	div {
-		position: relative;
-	}
-
-	.controls {
-		position: absolute;
-		top: 0;
-		width: 100%;
-		transition: opacity 1s;
-	}
-
-	.info {
-		display: flex;
-		width: 100%;
-		justify-content: space-between;
-	}
-
-	span {
-		padding: 0.2em 0.5em;
-		color: white;
-		text-shadow: 0 0 8px black;
-		font-size: 1.4em;
-		opacity: 0.7;
-	}
-
-	.time {
-		width: 3em;
-	}
-
-	.time:last-child {
-		text-align: right;
-	}
-
-	progress {
-		display: block;
-		width: 100%;
-		height: 10px;
-		-webkit-appearance: none;
-		appearance: none;
-	}
-
-	progress::-webkit-progress-bar {
-		background-color: rgba(0, 0, 0, 0.2);
-	}
-
-	progress::-webkit-progress-value {
-		background-color: rgba(255, 255, 255, 0.6);
-	}
-
-	video {
-		width: 100%;
-	}
-</style>
diff --git a/documentation/examples/05-bindings/09-media-elements/meta.json b/documentation/examples/05-bindings/09-media-elements/meta.json
deleted file mode 100644
index 66dfeb7047..0000000000
--- a/documentation/examples/05-bindings/09-media-elements/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Media elements"
-}
diff --git a/documentation/examples/05-bindings/10-dimensions/App.svelte b/documentation/examples/05-bindings/10-dimensions/App.svelte
deleted file mode 100644
index 4d4a8b2cf2..0000000000
--- a/documentation/examples/05-bindings/10-dimensions/App.svelte
+++ /dev/null
@@ -1,24 +0,0 @@
-<script>
-	let w;
-	let h;
-	let size = 42;
-	let text = 'edit me';
-</script>
-
-<input type="range" bind:value={size} />
-<input bind:value={text} />
-
-<p>size: {w}px x {h}px</p>
-
-<div bind:clientWidth={w} bind:clientHeight={h}>
-	<span style="font-size: {size}px">{text}</span>
-</div>
-
-<style>
-	input {
-		display: block;
-	}
-	div {
-		display: inline-block;
-	}
-</style>
diff --git a/documentation/examples/05-bindings/10-dimensions/meta.json b/documentation/examples/05-bindings/10-dimensions/meta.json
deleted file mode 100644
index fe06ae404e..0000000000
--- a/documentation/examples/05-bindings/10-dimensions/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Dimensions"
-}
diff --git a/documentation/examples/05-bindings/11-bind-this/App.svelte b/documentation/examples/05-bindings/11-bind-this/App.svelte
deleted file mode 100644
index fe0fbe1b01..0000000000
--- a/documentation/examples/05-bindings/11-bind-this/App.svelte
+++ /dev/null
@@ -1,51 +0,0 @@
-<script>
-	import { onMount } from 'svelte';
-
-	let canvas;
-
-	onMount(() => {
-		const ctx = canvas.getContext('2d');
-		let frame;
-
-		(function loop() {
-			frame = requestAnimationFrame(loop);
-
-			const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
-
-			for (let p = 0; p < imageData.data.length; p += 4) {
-				const i = p / 4;
-				const x = i % canvas.width;
-				const y = (i / canvas.height) >>> 0;
-
-				const t = window.performance.now();
-
-				const r = 64 + (128 * x) / canvas.width + 64 * Math.sin(t / 1000);
-				const g = 64 + (128 * y) / canvas.height + 64 * Math.cos(t / 1400);
-				const b = 128;
-
-				imageData.data[p + 0] = r;
-				imageData.data[p + 1] = g;
-				imageData.data[p + 2] = b;
-				imageData.data[p + 3] = 255;
-			}
-
-			ctx.putImageData(imageData, 0, 0);
-		})();
-
-		return () => {
-			cancelAnimationFrame(frame);
-		};
-	});
-</script>
-
-<canvas bind:this={canvas} width={32} height={32} />
-
-<style>
-	canvas {
-		width: 100%;
-		height: 100%;
-		background-color: #666;
-		-webkit-mask: url(/svelte-logo-mask.svg) 50% 50% no-repeat;
-		mask: url(/svelte-logo-mask.svg) 50% 50% no-repeat;
-	}
-</style>
diff --git a/documentation/examples/05-bindings/11-bind-this/meta.json b/documentation/examples/05-bindings/11-bind-this/meta.json
deleted file mode 100644
index 232abf7272..0000000000
--- a/documentation/examples/05-bindings/11-bind-this/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "bind:this={canvas}"
-}
diff --git a/documentation/examples/05-bindings/12-component-bindings/App.svelte b/documentation/examples/05-bindings/12-component-bindings/App.svelte
deleted file mode 100644
index 254ced9464..0000000000
--- a/documentation/examples/05-bindings/12-component-bindings/App.svelte
+++ /dev/null
@@ -1,29 +0,0 @@
-<script>
-	import Keypad from './Keypad.svelte';
-
-	let pin;
-	$: view = pin ? pin.replace(/\d(?!$)/g, '•') : 'enter your pin';
-
-	function handleSubmit() {
-		alert(`submitted ${pin}`);
-	}
-</script>
-
-<h1 class:pin>{view}</h1>
-
-<Keypad bind:value={pin} on:submit={handleSubmit} />
-
-<style>
-	h1 {
-		color: #ccc;
-	}
-	h1.pin {
-		color: #333;
-	}
-	:global(body.dark) h1 {
-		color: #444;
-	}
-	:global(body.dark) h1.pin {
-		color: #fff;
-	}
-</style>
diff --git a/documentation/examples/05-bindings/12-component-bindings/Keypad.svelte b/documentation/examples/05-bindings/12-component-bindings/Keypad.svelte
deleted file mode 100644
index c814a2238f..0000000000
--- a/documentation/examples/05-bindings/12-component-bindings/Keypad.svelte
+++ /dev/null
@@ -1,40 +0,0 @@
-<script>
-	import { createEventDispatcher } from 'svelte';
-
-	export let value = '';
-
-	const dispatch = createEventDispatcher();
-
-	const select = (num) => () => (value += num);
-	const clear = () => (value = '');
-	const submit = () => dispatch('submit');
-</script>
-
-<div class="keypad">
-	<button on:click={select(1)}>1</button>
-	<button on:click={select(2)}>2</button>
-	<button on:click={select(3)}>3</button>
-	<button on:click={select(4)}>4</button>
-	<button on:click={select(5)}>5</button>
-	<button on:click={select(6)}>6</button>
-	<button on:click={select(7)}>7</button>
-	<button on:click={select(8)}>8</button>
-	<button on:click={select(9)}>9</button>
-
-	<button disabled={!value} on:click={clear}>clear</button>
-	<button on:click={select(0)}>0</button>
-	<button disabled={!value} on:click={submit}>submit</button>
-</div>
-
-<style>
-	.keypad {
-		display: grid;
-		grid-template-columns: repeat(3, 5em);
-		grid-template-rows: repeat(4, 3em);
-		grid-gap: 0.5em;
-	}
-
-	button {
-		margin: 0;
-	}
-</style>
diff --git a/documentation/examples/05-bindings/12-component-bindings/meta.json b/documentation/examples/05-bindings/12-component-bindings/meta.json
deleted file mode 100644
index 5ed7f96ac2..0000000000
--- a/documentation/examples/05-bindings/12-component-bindings/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Component bindings"
-}
diff --git a/documentation/examples/05-bindings/meta.json b/documentation/examples/05-bindings/meta.json
deleted file mode 100644
index b6b01225e3..0000000000
--- a/documentation/examples/05-bindings/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Bindings"
-}
diff --git a/documentation/examples/06-lifecycle/00-onmount/App.svelte b/documentation/examples/06-lifecycle/00-onmount/App.svelte
deleted file mode 100644
index c8d1f6092f..0000000000
--- a/documentation/examples/06-lifecycle/00-onmount/App.svelte
+++ /dev/null
@@ -1,39 +0,0 @@
-<script>
-	import { onMount } from 'svelte';
-
-	let photos = [];
-
-	onMount(async () => {
-		const res = await fetch(`/tutorial/api/album`);
-		photos = await res.json();
-	});
-</script>
-
-<h1>Photo album</h1>
-
-<div class="photos">
-	{#each photos as photo}
-		<figure>
-			<img src={photo.thumbnailUrl} alt={photo.title} />
-			<figcaption>{photo.title}</figcaption>
-		</figure>
-	{:else}
-		<!-- this block renders when photos.length === 0 -->
-		<p>loading...</p>
-	{/each}
-</div>
-
-<style>
-	.photos {
-		width: 100%;
-		display: grid;
-		grid-template-columns: repeat(5, 1fr);
-		grid-gap: 8px;
-	}
-
-	figure,
-	img {
-		width: 100%;
-		margin: 0;
-	}
-</style>
diff --git a/documentation/examples/06-lifecycle/00-onmount/meta.json b/documentation/examples/06-lifecycle/00-onmount/meta.json
deleted file mode 100644
index a644c75073..0000000000
--- a/documentation/examples/06-lifecycle/00-onmount/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "onMount"
-}
diff --git a/documentation/examples/06-lifecycle/01-ondestroy/App.svelte b/documentation/examples/06-lifecycle/01-ondestroy/App.svelte
deleted file mode 100644
index ededcc4f9e..0000000000
--- a/documentation/examples/06-lifecycle/01-ondestroy/App.svelte
+++ /dev/null
@@ -1,12 +0,0 @@
-<script>
-	import { onInterval } from './utils.js';
-
-	let seconds = 0;
-	onInterval(() => (seconds += 1), 1000);
-</script>
-
-<p>
-	The page has been open for
-	{seconds}
-	{seconds === 1 ? 'second' : 'seconds'}
-</p>
diff --git a/documentation/examples/06-lifecycle/01-ondestroy/meta.json b/documentation/examples/06-lifecycle/01-ondestroy/meta.json
deleted file mode 100644
index f168949ec0..0000000000
--- a/documentation/examples/06-lifecycle/01-ondestroy/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "onDestroy"
-}
diff --git a/documentation/examples/06-lifecycle/01-ondestroy/utils.js b/documentation/examples/06-lifecycle/01-ondestroy/utils.js
deleted file mode 100644
index 42423ff320..0000000000
--- a/documentation/examples/06-lifecycle/01-ondestroy/utils.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { onDestroy } from 'svelte';
-
-export function onInterval(callback, milliseconds) {
-	const interval = setInterval(callback, milliseconds);
-
-	onDestroy(() => {
-		clearInterval(interval);
-	});
-}
diff --git a/documentation/examples/06-lifecycle/02-update/App.svelte b/documentation/examples/06-lifecycle/02-update/App.svelte
deleted file mode 100644
index afc1b29ea8..0000000000
--- a/documentation/examples/06-lifecycle/02-update/App.svelte
+++ /dev/null
@@ -1,113 +0,0 @@
-<script>
-	import Eliza from 'elizabot';
-	import { beforeUpdate, afterUpdate } from 'svelte';
-
-	let div;
-	let autoscroll;
-
-	beforeUpdate(() => {
-		autoscroll = div && div.offsetHeight + div.scrollTop > div.scrollHeight - 20;
-	});
-
-	afterUpdate(() => {
-		if (autoscroll) div.scrollTo(0, div.scrollHeight);
-	});
-
-	const eliza = new Eliza();
-
-	let comments = [{ author: 'eliza', text: eliza.getInitial() }];
-
-	function handleKeydown(event) {
-		if (event.key === 'Enter') {
-			const text = event.target.value;
-			if (!text) return;
-
-			comments = comments.concat({
-				author: 'user',
-				text
-			});
-
-			event.target.value = '';
-
-			const reply = eliza.transform(text);
-
-			setTimeout(
-				() => {
-					comments = comments.concat({
-						author: 'eliza',
-						text: '...',
-						placeholder: true
-					});
-
-					setTimeout(
-						() => {
-							comments = comments
-								.filter((comment) => !comment.placeholder)
-								.concat({
-									author: 'eliza',
-									text: reply
-								});
-						},
-						500 + Math.random() * 500
-					);
-				},
-				200 + Math.random() * 200
-			);
-		}
-	}
-</script>
-
-<div class="chat">
-	<h1>Eliza</h1>
-
-	<div class="scrollable" bind:this={div}>
-		{#each comments as comment}
-			<article class={comment.author}>
-				<span>{comment.text}</span>
-			</article>
-		{/each}
-	</div>
-
-	<input on:keydown={handleKeydown} />
-</div>
-
-<style>
-	.chat {
-		display: flex;
-		flex-direction: column;
-		height: 100%;
-		max-width: 320px;
-	}
-
-	.scrollable {
-		flex: 1 1 auto;
-		border-top: 1px solid #eee;
-		margin: 0 0 0.5em 0;
-		overflow-y: auto;
-	}
-
-	article {
-		margin: 0.5em 0;
-	}
-
-	.user {
-		text-align: right;
-	}
-
-	span {
-		color: black;
-		padding: 0.5em 1em;
-		display: inline-block;
-	}
-
-	.eliza span {
-		background-color: #eee;
-		border-radius: 1em 1em 1em 0;
-	}
-
-	.user span {
-		background-color: #0074d9;
-		color: white;
-		border-radius: 1em 1em 0 1em;
-	}
-</style>
diff --git a/documentation/examples/06-lifecycle/02-update/meta.json b/documentation/examples/06-lifecycle/02-update/meta.json
deleted file mode 100644
index 7f4db08030..0000000000
--- a/documentation/examples/06-lifecycle/02-update/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "beforeUpdate and afterUpdate"
-}
diff --git a/documentation/examples/06-lifecycle/03-tick/App.svelte b/documentation/examples/06-lifecycle/03-tick/App.svelte
deleted file mode 100644
index 2f076946b3..0000000000
--- a/documentation/examples/06-lifecycle/03-tick/App.svelte
+++ /dev/null
@@ -1,31 +0,0 @@
-<script>
-	import { tick } from 'svelte';
-
-	let text = `Select some text and hit the tab key to toggle uppercase`;
-
-	async function handleKeydown(event) {
-		if (event.key !== 'Tab') return;
-
-		event.preventDefault();
-
-		const { selectionStart, selectionEnd, value } = this;
-		const selection = value.slice(selectionStart, selectionEnd);
-
-		const replacement = /[a-z]/.test(selection) ? selection.toUpperCase() : selection.toLowerCase();
-
-		text = value.slice(0, selectionStart) + replacement + value.slice(selectionEnd);
-
-		await tick();
-		this.selectionStart = selectionStart;
-		this.selectionEnd = selectionEnd;
-	}
-</script>
-
-<textarea value={text} on:keydown={handleKeydown} />
-
-<style>
-	textarea {
-		width: 100%;
-		height: 200px;
-	}
-</style>
diff --git a/documentation/examples/06-lifecycle/03-tick/meta.json b/documentation/examples/06-lifecycle/03-tick/meta.json
deleted file mode 100644
index 4de872bf86..0000000000
--- a/documentation/examples/06-lifecycle/03-tick/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "tick"
-}
diff --git a/documentation/examples/06-lifecycle/meta.json b/documentation/examples/06-lifecycle/meta.json
deleted file mode 100644
index 5ed3972e7a..0000000000
--- a/documentation/examples/06-lifecycle/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Lifecycle"
-}
diff --git a/documentation/examples/07-stores/00-writable-stores/App.svelte b/documentation/examples/07-stores/00-writable-stores/App.svelte
deleted file mode 100644
index 3d301a760f..0000000000
--- a/documentation/examples/07-stores/00-writable-stores/App.svelte
+++ /dev/null
@@ -1,18 +0,0 @@
-<script>
-	import { count } from './stores.js';
-	import Incrementer from './Incrementer.svelte';
-	import Decrementer from './Decrementer.svelte';
-	import Resetter from './Resetter.svelte';
-
-	let countValue;
-
-	const unsubscribe = count.subscribe((value) => {
-		countValue = value;
-	});
-</script>
-
-<h1>The count is {countValue}</h1>
-
-<Incrementer />
-<Decrementer />
-<Resetter />
diff --git a/documentation/examples/07-stores/00-writable-stores/Decrementer.svelte b/documentation/examples/07-stores/00-writable-stores/Decrementer.svelte
deleted file mode 100644
index 596ba4bbab..0000000000
--- a/documentation/examples/07-stores/00-writable-stores/Decrementer.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<script>
-	import { count } from './stores.js';
-
-	function decrement() {
-		count.update((n) => n - 1);
-	}
-</script>
-
-<button on:click={decrement}> - </button>
diff --git a/documentation/examples/07-stores/00-writable-stores/Incrementer.svelte b/documentation/examples/07-stores/00-writable-stores/Incrementer.svelte
deleted file mode 100644
index 1fb7dea3cb..0000000000
--- a/documentation/examples/07-stores/00-writable-stores/Incrementer.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<script>
-	import { count } from './stores.js';
-
-	function increment() {
-		count.update((n) => n + 1);
-	}
-</script>
-
-<button on:click={increment}> + </button>
diff --git a/documentation/examples/07-stores/00-writable-stores/Resetter.svelte b/documentation/examples/07-stores/00-writable-stores/Resetter.svelte
deleted file mode 100644
index 9c8809961f..0000000000
--- a/documentation/examples/07-stores/00-writable-stores/Resetter.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<script>
-	import { count } from './stores.js';
-
-	function reset() {
-		count.set(0);
-	}
-</script>
-
-<button on:click={reset}> reset </button>
diff --git a/documentation/examples/07-stores/00-writable-stores/meta.json b/documentation/examples/07-stores/00-writable-stores/meta.json
deleted file mode 100644
index 9e899622e3..0000000000
--- a/documentation/examples/07-stores/00-writable-stores/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Writable stores"
-}
diff --git a/documentation/examples/07-stores/00-writable-stores/stores.js b/documentation/examples/07-stores/00-writable-stores/stores.js
deleted file mode 100644
index d432d339ec..0000000000
--- a/documentation/examples/07-stores/00-writable-stores/stores.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { writable } from 'svelte/store';
-
-export const count = writable(0);
diff --git a/documentation/examples/07-stores/01-auto-subscriptions/App.svelte b/documentation/examples/07-stores/01-auto-subscriptions/App.svelte
deleted file mode 100644
index 9923689329..0000000000
--- a/documentation/examples/07-stores/01-auto-subscriptions/App.svelte
+++ /dev/null
@@ -1,12 +0,0 @@
-<script>
-	import { count } from './stores.js';
-	import Incrementer from './Incrementer.svelte';
-	import Decrementer from './Decrementer.svelte';
-	import Resetter from './Resetter.svelte';
-</script>
-
-<h1>The count is {$count}</h1>
-
-<Incrementer />
-<Decrementer />
-<Resetter />
diff --git a/documentation/examples/07-stores/01-auto-subscriptions/Decrementer.svelte b/documentation/examples/07-stores/01-auto-subscriptions/Decrementer.svelte
deleted file mode 100644
index 596ba4bbab..0000000000
--- a/documentation/examples/07-stores/01-auto-subscriptions/Decrementer.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<script>
-	import { count } from './stores.js';
-
-	function decrement() {
-		count.update((n) => n - 1);
-	}
-</script>
-
-<button on:click={decrement}> - </button>
diff --git a/documentation/examples/07-stores/01-auto-subscriptions/Incrementer.svelte b/documentation/examples/07-stores/01-auto-subscriptions/Incrementer.svelte
deleted file mode 100644
index 1fb7dea3cb..0000000000
--- a/documentation/examples/07-stores/01-auto-subscriptions/Incrementer.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<script>
-	import { count } from './stores.js';
-
-	function increment() {
-		count.update((n) => n + 1);
-	}
-</script>
-
-<button on:click={increment}> + </button>
diff --git a/documentation/examples/07-stores/01-auto-subscriptions/Resetter.svelte b/documentation/examples/07-stores/01-auto-subscriptions/Resetter.svelte
deleted file mode 100644
index 9c8809961f..0000000000
--- a/documentation/examples/07-stores/01-auto-subscriptions/Resetter.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<script>
-	import { count } from './stores.js';
-
-	function reset() {
-		count.set(0);
-	}
-</script>
-
-<button on:click={reset}> reset </button>
diff --git a/documentation/examples/07-stores/01-auto-subscriptions/meta.json b/documentation/examples/07-stores/01-auto-subscriptions/meta.json
deleted file mode 100644
index 7a4e2e7167..0000000000
--- a/documentation/examples/07-stores/01-auto-subscriptions/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Auto-subscriptions"
-}
diff --git a/documentation/examples/07-stores/01-auto-subscriptions/stores.js b/documentation/examples/07-stores/01-auto-subscriptions/stores.js
deleted file mode 100644
index d432d339ec..0000000000
--- a/documentation/examples/07-stores/01-auto-subscriptions/stores.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { writable } from 'svelte/store';
-
-export const count = writable(0);
diff --git a/documentation/examples/07-stores/02-readable-stores/App.svelte b/documentation/examples/07-stores/02-readable-stores/App.svelte
deleted file mode 100644
index 6d1d80b455..0000000000
--- a/documentation/examples/07-stores/02-readable-stores/App.svelte
+++ /dev/null
@@ -1,12 +0,0 @@
-<script>
-	import { time } from './stores.js';
-
-	const formatter = new Intl.DateTimeFormat('en', {
-		hour12: true,
-		hour: 'numeric',
-		minute: '2-digit',
-		second: '2-digit'
-	});
-</script>
-
-<h1>The time is {formatter.format($time)}</h1>
diff --git a/documentation/examples/07-stores/02-readable-stores/meta.json b/documentation/examples/07-stores/02-readable-stores/meta.json
deleted file mode 100644
index 1ba22f9367..0000000000
--- a/documentation/examples/07-stores/02-readable-stores/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Readable stores"
-}
diff --git a/documentation/examples/07-stores/02-readable-stores/stores.js b/documentation/examples/07-stores/02-readable-stores/stores.js
deleted file mode 100644
index 8c11f6d3aa..0000000000
--- a/documentation/examples/07-stores/02-readable-stores/stores.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import { readable } from 'svelte/store';
-
-export const time = readable(new Date(), function start(set) {
-	const interval = setInterval(() => {
-		set(new Date());
-	}, 1000);
-
-	return function stop() {
-		clearInterval(interval);
-	};
-});
diff --git a/documentation/examples/07-stores/03-derived-stores/App.svelte b/documentation/examples/07-stores/03-derived-stores/App.svelte
deleted file mode 100644
index d1013c1a26..0000000000
--- a/documentation/examples/07-stores/03-derived-stores/App.svelte
+++ /dev/null
@@ -1,18 +0,0 @@
-<script>
-	import { time, elapsed } from './stores.js';
-
-	const formatter = new Intl.DateTimeFormat('en', {
-		hour12: true,
-		hour: 'numeric',
-		minute: '2-digit',
-		second: '2-digit'
-	});
-</script>
-
-<h1>The time is {formatter.format($time)}</h1>
-
-<p>
-	This page has been open for
-	{$elapsed}
-	{$elapsed === 1 ? 'second' : 'seconds'}
-</p>
diff --git a/documentation/examples/07-stores/03-derived-stores/meta.json b/documentation/examples/07-stores/03-derived-stores/meta.json
deleted file mode 100644
index 5574475370..0000000000
--- a/documentation/examples/07-stores/03-derived-stores/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Derived stores"
-}
diff --git a/documentation/examples/07-stores/03-derived-stores/stores.js b/documentation/examples/07-stores/03-derived-stores/stores.js
deleted file mode 100644
index 741f927845..0000000000
--- a/documentation/examples/07-stores/03-derived-stores/stores.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import { readable, derived } from 'svelte/store';
-
-export const time = readable(new Date(), function start(set) {
-	const interval = setInterval(() => {
-		set(new Date());
-	}, 1000);
-
-	return function stop() {
-		clearInterval(interval);
-	};
-});
-
-const start = new Date();
-
-export const elapsed = derived(time, ($time) => Math.round(($time - start) / 1000));
diff --git a/documentation/examples/07-stores/04-custom-stores/App.svelte b/documentation/examples/07-stores/04-custom-stores/App.svelte
deleted file mode 100644
index dbdd299d69..0000000000
--- a/documentation/examples/07-stores/04-custom-stores/App.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<script>
-	import { count } from './stores.js';
-</script>
-
-<h1>The count is {$count}</h1>
-
-<button on:click={count.increment}>+</button>
-<button on:click={count.decrement}>-</button>
-<button on:click={count.reset}>reset</button>
diff --git a/documentation/examples/07-stores/04-custom-stores/meta.json b/documentation/examples/07-stores/04-custom-stores/meta.json
deleted file mode 100644
index 7f1b426835..0000000000
--- a/documentation/examples/07-stores/04-custom-stores/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Custom stores"
-}
diff --git a/documentation/examples/07-stores/04-custom-stores/stores.js b/documentation/examples/07-stores/04-custom-stores/stores.js
deleted file mode 100644
index da11e88df2..0000000000
--- a/documentation/examples/07-stores/04-custom-stores/stores.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { writable } from 'svelte/store';
-
-function createCount() {
-	const { subscribe, set, update } = writable(0);
-
-	return {
-		subscribe,
-		increment: () => update((n) => n + 1),
-		decrement: () => update((n) => n - 1),
-		reset: () => set(0)
-	};
-}
-
-export const count = createCount();
diff --git a/documentation/examples/07-stores/meta.json b/documentation/examples/07-stores/meta.json
deleted file mode 100644
index c70d14efe5..0000000000
--- a/documentation/examples/07-stores/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Stores"
-}
diff --git a/documentation/examples/08-motion/00-tweened/App.svelte b/documentation/examples/08-motion/00-tweened/App.svelte
deleted file mode 100644
index f4fb499f0f..0000000000
--- a/documentation/examples/08-motion/00-tweened/App.svelte
+++ /dev/null
@@ -1,28 +0,0 @@
-<script>
-	import { tweened } from 'svelte/motion';
-	import { cubicOut } from 'svelte/easing';
-
-	const progress = tweened(0, {
-		duration: 400,
-		easing: cubicOut
-	});
-</script>
-
-<progress value={$progress} />
-
-<button on:click={() => progress.set(0)}> 0% </button>
-
-<button on:click={() => progress.set(0.25)}> 25% </button>
-
-<button on:click={() => progress.set(0.5)}> 50% </button>
-
-<button on:click={() => progress.set(0.75)}> 75% </button>
-
-<button on:click={() => progress.set(1)}> 100% </button>
-
-<style>
-	progress {
-		display: block;
-		width: 100%;
-	}
-</style>
diff --git a/documentation/examples/08-motion/00-tweened/meta.json b/documentation/examples/08-motion/00-tweened/meta.json
deleted file mode 100644
index 97d369cd1b..0000000000
--- a/documentation/examples/08-motion/00-tweened/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Tweened"
-}
diff --git a/documentation/examples/08-motion/01-spring/App.svelte b/documentation/examples/08-motion/01-spring/App.svelte
deleted file mode 100644
index e5b59901aa..0000000000
--- a/documentation/examples/08-motion/01-spring/App.svelte
+++ /dev/null
@@ -1,45 +0,0 @@
-<script>
-	import { spring } from 'svelte/motion';
-
-	let coords = spring(
-		{ x: 50, y: 50 },
-		{
-			stiffness: 0.1,
-			damping: 0.25
-		}
-	);
-
-	let size = spring(10);
-</script>
-
-<div style="position: absolute; right: 1em;">
-	<label>
-		<h3>stiffness ({coords.stiffness})</h3>
-		<input bind:value={coords.stiffness} type="range" min="0" max="1" step="0.01" />
-	</label>
-
-	<label>
-		<h3>damping ({coords.damping})</h3>
-		<input bind:value={coords.damping} type="range" min="0" max="1" step="0.01" />
-	</label>
-</div>
-
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<svg
-	on:mousemove={(e) => coords.set({ x: e.clientX, y: e.clientY })}
-	on:mousedown={() => size.set(30)}
-	on:mouseup={() => size.set(10)}
->
-	<circle cx={$coords.x} cy={$coords.y} r={$size} />
-</svg>
-
-<style>
-	svg {
-		width: 100%;
-		height: 100%;
-		margin: -8px;
-	}
-	circle {
-		fill: #ff3e00;
-	}
-</style>
diff --git a/documentation/examples/08-motion/01-spring/meta.json b/documentation/examples/08-motion/01-spring/meta.json
deleted file mode 100644
index 7c926445a6..0000000000
--- a/documentation/examples/08-motion/01-spring/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Spring"
-}
diff --git a/documentation/examples/08-motion/meta.json b/documentation/examples/08-motion/meta.json
deleted file mode 100644
index 14919954a9..0000000000
--- a/documentation/examples/08-motion/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Motion"
-}
diff --git a/documentation/examples/09-transitions/00-transition/App.svelte b/documentation/examples/09-transitions/00-transition/App.svelte
deleted file mode 100644
index 29e9254d14..0000000000
--- a/documentation/examples/09-transitions/00-transition/App.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script>
-	import { fade } from 'svelte/transition';
-	let visible = true;
-</script>
-
-<label>
-	<input type="checkbox" bind:checked={visible} />
-	visible
-</label>
-
-{#if visible}
-	<p transition:fade>Fades in and out</p>
-{/if}
diff --git a/documentation/examples/09-transitions/00-transition/meta.json b/documentation/examples/09-transitions/00-transition/meta.json
deleted file mode 100644
index 8d466a6219..0000000000
--- a/documentation/examples/09-transitions/00-transition/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "The transition directive"
-}
diff --git a/documentation/examples/09-transitions/01-adding-parameters-to-transitions/App.svelte b/documentation/examples/09-transitions/01-adding-parameters-to-transitions/App.svelte
deleted file mode 100644
index 318739f1d0..0000000000
--- a/documentation/examples/09-transitions/01-adding-parameters-to-transitions/App.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script>
-	import { fly } from 'svelte/transition';
-	let visible = true;
-</script>
-
-<label>
-	<input type="checkbox" bind:checked={visible} />
-	visible
-</label>
-
-{#if visible}
-	<p transition:fly={{ y: 200, duration: 2000 }}>Flies in and out</p>
-{/if}
diff --git a/documentation/examples/09-transitions/01-adding-parameters-to-transitions/meta.json b/documentation/examples/09-transitions/01-adding-parameters-to-transitions/meta.json
deleted file mode 100644
index 8a857ebcbb..0000000000
--- a/documentation/examples/09-transitions/01-adding-parameters-to-transitions/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Adding parameters"
-}
diff --git a/documentation/examples/09-transitions/02-in-and-out/App.svelte b/documentation/examples/09-transitions/02-in-and-out/App.svelte
deleted file mode 100644
index bb44e5ca9f..0000000000
--- a/documentation/examples/09-transitions/02-in-and-out/App.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script>
-	import { fade, fly } from 'svelte/transition';
-	let visible = true;
-</script>
-
-<label>
-	<input type="checkbox" bind:checked={visible} />
-	visible
-</label>
-
-{#if visible}
-	<p in:fly={{ y: 200, duration: 2000 }} out:fade>Flies in, fades out</p>
-{/if}
diff --git a/documentation/examples/09-transitions/02-in-and-out/meta.json b/documentation/examples/09-transitions/02-in-and-out/meta.json
deleted file mode 100644
index ae0d4e800d..0000000000
--- a/documentation/examples/09-transitions/02-in-and-out/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "In and out"
-}
diff --git a/documentation/examples/09-transitions/03-custom-css-transitions/App.svelte b/documentation/examples/09-transitions/03-custom-css-transitions/App.svelte
deleted file mode 100644
index c85fe7ef89..0000000000
--- a/documentation/examples/09-transitions/03-custom-css-transitions/App.svelte
+++ /dev/null
@@ -1,49 +0,0 @@
-<script>
-	import { fade } from 'svelte/transition';
-	import { elasticOut } from 'svelte/easing';
-
-	let visible = true;
-
-	function spin(node, { duration }) {
-		return {
-			duration,
-			css: (t) => {
-				const eased = elasticOut(t);
-
-				return `
-					transform: scale(${eased}) rotate(${eased * 1080}deg);
-					color: hsl(
-						${~~(t * 360)},
-						${Math.min(100, 1000 - 1000 * t)}%,
-						${Math.min(50, 500 - 500 * t)}%
-					);`;
-			}
-		};
-	}
-</script>
-
-<label>
-	<input type="checkbox" bind:checked={visible} />
-	visible
-</label>
-
-{#if visible}
-	<div class="centered" in:spin={{ duration: 8000 }} out:fade>
-		<span>transitions!</span>
-	</div>
-{/if}
-
-<style>
-	.centered {
-		position: absolute;
-		left: 50%;
-		top: 50%;
-		transform: translate(-50%, -50%);
-	}
-
-	span {
-		position: absolute;
-		transform: translate(-50%, -50%);
-		font-size: 4em;
-	}
-</style>
diff --git a/documentation/examples/09-transitions/03-custom-css-transitions/meta.json b/documentation/examples/09-transitions/03-custom-css-transitions/meta.json
deleted file mode 100644
index cbe988abc8..0000000000
--- a/documentation/examples/09-transitions/03-custom-css-transitions/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Custom CSS transitions"
-}
diff --git a/documentation/examples/09-transitions/04-custom-js-transitions/App.svelte b/documentation/examples/09-transitions/04-custom-js-transitions/App.svelte
deleted file mode 100644
index 9ccd18a0f7..0000000000
--- a/documentation/examples/09-transitions/04-custom-js-transitions/App.svelte
+++ /dev/null
@@ -1,31 +0,0 @@
-<script>
-	let visible = false;
-
-	function typewriter(node, { speed = 1 }) {
-		const valid = node.childNodes.length === 1 && node.childNodes[0].nodeType === Node.TEXT_NODE;
-
-		if (!valid) {
-			throw new Error(`This transition only works on elements with a single text node child`);
-		}
-
-		const text = node.textContent;
-		const duration = text.length / (speed * 0.01);
-
-		return {
-			duration,
-			tick: (t) => {
-				const i = ~~(text.length * t);
-				node.textContent = text.slice(0, i);
-			}
-		};
-	}
-</script>
-
-<label>
-	<input type="checkbox" bind:checked={visible} />
-	visible
-</label>
-
-{#if visible}
-	<p transition:typewriter>The quick brown fox jumps over the lazy dog</p>
-{/if}
diff --git a/documentation/examples/09-transitions/04-custom-js-transitions/meta.json b/documentation/examples/09-transitions/04-custom-js-transitions/meta.json
deleted file mode 100644
index 4ec4afdfce..0000000000
--- a/documentation/examples/09-transitions/04-custom-js-transitions/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Custom JS transitions"
-}
diff --git a/documentation/examples/09-transitions/05-transition-events/App.svelte b/documentation/examples/09-transitions/05-transition-events/App.svelte
deleted file mode 100644
index 31ef18c930..0000000000
--- a/documentation/examples/09-transitions/05-transition-events/App.svelte
+++ /dev/null
@@ -1,25 +0,0 @@
-<script>
-	import { fly } from 'svelte/transition';
-
-	let visible = true;
-	let status = 'waiting...';
-</script>
-
-<p>status: {status}</p>
-
-<label>
-	<input type="checkbox" bind:checked={visible} />
-	visible
-</label>
-
-{#if visible}
-	<p
-		transition:fly={{ y: 200, duration: 2000 }}
-		on:introstart={() => (status = 'intro started')}
-		on:outrostart={() => (status = 'outro started')}
-		on:introend={() => (status = 'intro ended')}
-		on:outroend={() => (status = 'outro ended')}
-	>
-		Flies in and out
-	</p>
-{/if}
diff --git a/documentation/examples/09-transitions/05-transition-events/meta.json b/documentation/examples/09-transitions/05-transition-events/meta.json
deleted file mode 100644
index cad1f94386..0000000000
--- a/documentation/examples/09-transitions/05-transition-events/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Transition events"
-}
diff --git a/documentation/examples/09-transitions/06-deferred-transitions/App.svelte b/documentation/examples/09-transitions/06-deferred-transitions/App.svelte
deleted file mode 100644
index 8f603165c1..0000000000
--- a/documentation/examples/09-transitions/06-deferred-transitions/App.svelte
+++ /dev/null
@@ -1,155 +0,0 @@
-<script>
-	import { crossfade, scale } from 'svelte/transition';
-	import images from './images.js';
-
-	const [send, receive] = crossfade({
-		duration: 200,
-		fallback: scale
-	});
-
-	let selected = null;
-	let loading = null;
-
-	const ASSETS = `https://sveltejs.github.io/assets/crossfade`;
-
-	const load = (image) => {
-		const timeout = setTimeout(() => (loading = image), 100);
-
-		const img = new Image();
-
-		img.onload = () => {
-			selected = image;
-			clearTimeout(timeout);
-			loading = null;
-		};
-
-		img.src = `${ASSETS}/${image.id}.jpg`;
-	};
-</script>
-
-<div class="container">
-	<div class="phone">
-		<h1>Photo gallery</h1>
-
-		<div class="grid">
-			{#each images as image}
-				<div class="square">
-					{#if selected !== image}
-						<button
-							style="background-color: {image.color};"
-							on:click={() => load(image)}
-							in:receive={{ key: image.id }}
-							out:send={{ key: image.id }}>{loading === image ? '...' : image.id}</button
-						>
-					{/if}
-				</div>
-			{/each}
-		</div>
-
-		{#if selected}
-			{#await selected then d}
-				<div class="photo" in:receive|global={{ key: d.id }} out:send|global={{ key: d.id }}>
-					<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-noninteractive-element-interactions -->
-					<img alt={d.alt} src="{ASSETS}/{d.id}.jpg" on:click={() => (selected = null)} />
-
-					<p class="credit">
-						<a target="_blank" rel="noreferrer" href="https://www.flickr.com/photos/{d.path}"
-							>via Flickr</a
-						>
-						&ndash;
-						<a target="_blank" rel="noreferrer" href={d.license.url}>{d.license.name}</a>
-					</p>
-				</div>
-			{/await}
-		{/if}
-	</div>
-</div>
-
-<style>
-	.container {
-		position: absolute;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 100%;
-		height: 100%;
-		top: 0;
-		left: 0;
-	}
-
-	.phone {
-		position: relative;
-		display: flex;
-		flex-direction: column;
-		width: 52vmin;
-		height: 76vmin;
-		border: 2vmin solid #ccc;
-		border-bottom-width: 10vmin;
-		padding: 3vmin;
-		border-radius: 2vmin;
-	}
-
-	h1 {
-		font-weight: 300;
-		text-transform: uppercase;
-		font-size: 5vmin;
-		margin: 0.2em 0 0.5em 0;
-	}
-
-	.grid {
-		display: grid;
-		flex: 1;
-		grid-template-columns: repeat(3, 1fr);
-		grid-template-rows: repeat(4, 1fr);
-		grid-gap: 2vmin;
-	}
-
-	button {
-		width: 100%;
-		height: 100%;
-		color: white;
-		font-size: 5vmin;
-		border: none;
-		margin: 0;
-		will-change: transform;
-	}
-
-	.photo,
-	img {
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		overflow: hidden;
-	}
-
-	.photo {
-		display: flex;
-		align-items: stretch;
-		justify-content: flex-end;
-		flex-direction: column;
-		will-change: transform;
-	}
-
-	img {
-		object-fit: cover;
-		cursor: pointer;
-	}
-
-	.credit {
-		text-align: right;
-		font-size: 2.5vmin;
-		padding: 1em;
-		margin: 0;
-		color: white;
-		font-weight: bold;
-		opacity: 0.6;
-		background: rgba(0, 0, 0, 0.4);
-	}
-
-	.credit a,
-	.credit a:visited {
-		color: white;
-	}
-</style>
diff --git a/documentation/examples/09-transitions/06-deferred-transitions/images.js b/documentation/examples/09-transitions/06-deferred-transitions/images.js
deleted file mode 100644
index fa494ccdbc..0000000000
--- a/documentation/examples/09-transitions/06-deferred-transitions/images.js
+++ /dev/null
@@ -1,102 +0,0 @@
-const BY = {
-	name: 'CC BY 2.0',
-	url: 'https://creativecommons.org/licenses/by/2.0/'
-};
-
-const BY_SA = {
-	name: 'CC BY-SA 2.0',
-	url: 'https://creativecommons.org/licenses/by-sa/2.0/'
-};
-
-const BY_ND = {
-	name: 'CC BY-ND 2.0',
-	url: 'https://creativecommons.org/licenses/by-nd/2.0/'
-};
-
-// via http://labs.tineye.com/multicolr
-export default [
-	{
-		color: '#001f3f',
-		id: '1',
-		alt: 'Crepuscular rays',
-		path: '43428526@N03/7863279376',
-		license: BY
-	},
-	{
-		color: '#0074D9',
-		id: '2',
-		alt: 'Lapland winter scene',
-		path: '25507134@N00/6527537485',
-		license: BY
-	},
-	{
-		color: '#7FDBFF',
-		id: '3',
-		alt: 'Jellyfish',
-		path: '37707866@N00/3354331318',
-		license: BY
-	},
-	{
-		color: '#39CCCC',
-		id: '4',
-		alt: 'A man scuba diving',
-		path: '32751486@N00/4608886209',
-		license: BY_SA
-	},
-	{
-		color: '#3D9970',
-		id: '5',
-		alt: 'Underwater scene',
-		path: '25483059@N08/5548569010',
-		license: BY
-	},
-	{
-		color: '#2ECC40',
-		id: '6',
-		alt: 'Ferns',
-		path: '8404611@N06/2447470760',
-		license: BY
-	},
-	{
-		color: '#01FF70',
-		id: '7',
-		alt: 'Posters in a bar',
-		path: '33917831@N00/114428206',
-		license: BY_SA
-	},
-	{
-		color: '#FFDC00',
-		id: '8',
-		alt: 'Daffodil',
-		path: '46417125@N04/4818617089',
-		license: BY_ND
-	},
-	{
-		color: '#FF851B',
-		id: '9',
-		alt: 'Dust storm in Sydney',
-		path: '56068058@N00/3945496657',
-		license: BY
-	},
-	{
-		color: '#FF4136',
-		id: '10',
-		alt: 'Postbox',
-		path: '31883499@N05/4216820032',
-		license: BY
-	},
-	{
-		color: '#85144b',
-		id: '11',
-		alt: 'Fireworks',
-		path: '8484971@N07/2625506561',
-		license: BY_ND
-	},
-	{
-		color: '#B10DC9',
-		id: '12',
-		alt: 'The Stereophonics',
-		path: '58028312@N00/5385464371',
-		license: BY_ND
-	}
-];
diff --git a/documentation/examples/09-transitions/06-deferred-transitions/meta.json b/documentation/examples/09-transitions/06-deferred-transitions/meta.json
deleted file mode 100644
index 9b9e1e09bc..0000000000
--- a/documentation/examples/09-transitions/06-deferred-transitions/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Deferred transitions"
-}
diff --git a/documentation/examples/09-transitions/meta.json b/documentation/examples/09-transitions/meta.json
deleted file mode 100644
index 5981eece3e..0000000000
--- a/documentation/examples/09-transitions/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Transitions"
-}
diff --git a/documentation/examples/10-animations/00-animate/App.svelte b/documentation/examples/10-animations/00-animate/App.svelte
deleted file mode 100644
index 7209a25f15..0000000000
--- a/documentation/examples/10-animations/00-animate/App.svelte
+++ /dev/null
@@ -1,143 +0,0 @@
-<script>
-	import { quintOut } from 'svelte/easing';
-	import { crossfade } from 'svelte/transition';
-	import { flip } from 'svelte/animate';
-
-	const [send, receive] = crossfade({
-		fallback(node, params) {
-			const style = getComputedStyle(node);
-			const transform = style.transform === 'none' ? '' : style.transform;
-
-			return {
-				duration: 600,
-				easing: quintOut,
-				css: (t) => `
-					transform: ${transform} scale(${t});
-					opacity: ${t}
-				`
-			};
-		}
-	});
-
-	let todos = [
-		{ id: 1, done: false, description: 'write some docs' },
-		{ id: 2, done: false, description: 'start writing JSConf talk' },
-		{ id: 3, done: true, description: 'buy some milk' },
-		{ id: 4, done: false, description: 'mow the lawn' },
-		{ id: 5, done: false, description: 'feed the turtle' },
-		{ id: 6, done: false, description: 'fix some bugs' }
-	];
-
-	let uid = todos.length + 1;
-
-	function add(input) {
-		const todo = {
-			id: uid++,
-			done: false,
-			description: input.value
-		};
-
-		todos = [todo, ...todos];
-		input.value = '';
-	}
-
-	function remove(todo) {
-		todos = todos.filter((t) => t !== todo);
-	}
-</script>
-
-<div class="board">
-	<input
-		class="new-todo"
-		placeholder="what needs to be done?"
-		on:keydown={(event) => event.key === 'Enter' && add(event.target)}
-	/>
-
-	<div class="left">
-		<h2>todo</h2>
-		{#each todos.filter((t) => !t.done) as todo (todo.id)}
-			<label in:receive={{ key: todo.id }} out:send={{ key: todo.id }} animate:flip>
-				<input type="checkbox" bind:checked={todo.done} />
-				{todo.description}
-				<button on:click={() => remove(todo)}>x</button>
-			</label>
-		{/each}
-	</div>
-
-	<div class="right">
-		<h2>done</h2>
-		{#each todos.filter((t) => t.done) as todo (todo.id)}
-			<label in:receive={{ key: todo.id }} out:send={{ key: todo.id }} animate:flip>
-				<input type="checkbox" bind:checked={todo.done} />
-				{todo.description}
-				<button on:click={() => remove(todo)}>x</button>
-			</label>
-		{/each}
-	</div>
-</div>
-
-<style>
-	.new-todo {
-		font-size: 1.4em;
-		width: 100%;
-		margin: 2em 0 1em 0;
-	}
-
-	.board {
-		max-width: 36em;
-		margin: 0 auto;
-	}
-
-	.left,
-	.right {
-		float: left;
-		width: 50%;
-		padding: 0 1em 0 0;
-		box-sizing: border-box;
-	}
-
-	h2 {
-		font-size: 2em;
-		font-weight: 200;
-		user-select: none;
-	}
-
-	label {
-		top: 0;
-		left: 0;
-		display: block;
-		font-size: 1em;
-		line-height: 1;
-		padding: 0.5em;
-		margin: 0 auto 0.5em auto;
-		border-radius: 2px;
-		background-color: #eee;
-		user-select: none;
-		color: black;
-	}
-
-	input {
-		margin: 0;
-	}
-
-	.right label {
-		background-color: rgb(180, 240, 100);
-	}
-
-	button {
-		float: right;
-		height: 1em;
-		box-sizing: border-box;
-		padding: 0 0.5em;
-		line-height: 1;
-		background-color: transparent;
-		border: none;
-		color: rgb(170, 30, 30);
-		opacity: 0;
-		transition: opacity 0.2s;
-	}
-
-	label:hover button {
-		opacity: 1;
-	}
-</style>
diff --git a/documentation/examples/10-animations/00-animate/meta.json b/documentation/examples/10-animations/00-animate/meta.json
deleted file mode 100644
index 147c1a971f..0000000000
--- a/documentation/examples/10-animations/00-animate/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "The animate directive"
-}
diff --git a/documentation/examples/10-animations/meta.json b/documentation/examples/10-animations/meta.json
deleted file mode 100644
index 25cc16d8bb..0000000000
--- a/documentation/examples/10-animations/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Animations"
-}
diff --git a/documentation/examples/11-easing/00-easing/App.svelte b/documentation/examples/11-easing/00-easing/App.svelte
deleted file mode 100644
index c3814bb8bd..0000000000
--- a/documentation/examples/11-easing/00-easing/App.svelte
+++ /dev/null
@@ -1,100 +0,0 @@
-<script>
-	import { interpolateString as interpolate } from 'd3-interpolate';
-	import { tweened } from 'svelte/motion';
-
-	import Grid from './Grid.svelte';
-	import Controls from './Controls.svelte';
-
-	import { eases, types } from './eases.js';
-
-	let current_type = 'In';
-	let current_ease = 'sine';
-	let duration = 2000;
-	let current = eases.get(current_ease)[current_type];
-	let playing = false;
-	let width;
-
-	const ease_path = tweened(current.shape, { interpolate });
-	const time = tweened(0);
-	const value = tweened(1000);
-
-	async function runAnimations() {
-		playing = true;
-
-		value.set(1000, { duration: 0 });
-		time.set(0, { duration: 0 });
-
-		await ease_path.set(current.shape);
-		await Promise.all([
-			time.set(1000, { duration, easing: (x) => x }),
-			value.set(0, { duration, easing: current.fn })
-		]);
-
-		playing = false;
-	}
-
-	$: current = eases.get(current_ease)[current_type];
-	$: current && runAnimations();
-</script>
-
-<div bind:offsetWidth={width} class="easing-vis">
-	<svg viewBox="0 0 1400 1802">
-		<g class="canvas">
-			<Grid x={$time} y={$value} />
-			<g class="graph">
-				<path d={$ease_path} stroke="#ff3e00" stroke-width="2" fill="none" />
-
-				<path
-					d="M0,23.647C0,22.41 27.014,0.407 28.496,0.025C29.978,-0.357 69.188,3.744 70.104,4.744C71.02,5.745 71.02,41.499 70.104,42.5C69.188,43.501 29.978,47.601 28.496,47.219C27.014,46.837 0,24.884 0,23.647Z"
-					fill="#ff3e00"
-					style="transform: translate(1060px, {$value - 24}px)"
-				/>
-
-				<circle cx={$time} cy={$value} r="15" fill="#ff3e00" />
-			</g>
-		</g>
-	</svg>
-
-	<Controls
-		{eases}
-		{types}
-		{playing}
-		{width}
-		bind:duration
-		bind:current_ease
-		bind:current_type
-		on:play={runAnimations}
-	/>
-</div>
-
-<style>
-	:root {
-		scrollbar-gutter: stable;
-	}
-
-	.easing-vis {
-		display: flex;
-		max-height: 95%;
-		max-width: 800px;
-		margin: auto;
-		border: 1px solid #333;
-		border-radius: 2px;
-		padding: 20px;
-	}
-
-	svg {
-		width: 100%;
-		margin: 0 20px 0 0;
-	}
-
-	.graph {
-		transform: translate(200px, 400px);
-	}
-
-	@media (max-width: 600px) {
-		.easing-vis {
-			flex-direction: column;
-			max-height: calc(100% - 3rem);
-		}
-	}
-</style>
diff --git a/documentation/examples/11-easing/00-easing/Controls.svelte b/documentation/examples/11-easing/00-easing/Controls.svelte
deleted file mode 100644
index a938ee235b..0000000000
--- a/documentation/examples/11-easing/00-easing/Controls.svelte
+++ /dev/null
@@ -1,176 +0,0 @@
-<script>
-	import { createEventDispatcher } from 'svelte';
-
-	export let current_ease;
-	export let current_type;
-	export let eases;
-	export let types;
-	export let duration;
-	export let playing;
-	export let width;
-
-	const dispatch = createEventDispatcher();
-
-	$: mobile = width && width < 600;
-</script>
-
-<div class="easing-sidebar">
-	<div class="easing-types">
-		<h3>Ease</h3>
-		{#if mobile}
-			<select bind:value={current_ease}>
-				{#each [...eases] as [name]}
-					<option value={name} class:selected={name === current_ease}>
-						{name}
-					</option>
-				{/each}
-			</select>
-		{:else}
-			<ul>
-				{#each [...eases] as [name]}
-					<li class:selected={name === current_ease}>
-						<button on:click={() => (current_ease = name)}> {name}</button>
-					</li>
-				{/each}
-			</ul>
-		{/if}
-		<h3>Type</h3>
-		{#if mobile}
-			<select bind:value={current_type}>
-				{#each types as [name, type]}
-					<option value={type}>
-						{name}
-					</option>
-				{/each}
-			</select>
-		{:else}
-			<ul>
-				{#each types as [name, type]}
-					<li class:selected={type === current_type}>
-						<button on:click={() => (current_type = type)}> {name}</button>
-					</li>
-				{/each}
-			</ul>
-		{/if}
-	</div>
-	<h4>Duration</h4>
-	<div class="duration">
-		<span>
-			<input type="number" bind:value={duration} min="0" step="100" />
-			<button class="number" on:click={() => (duration -= 100)}>-</button>
-			<button class="number" on:click={() => (duration += 100)}>+</button>
-		</span>
-		<button class="play" on:click={() => dispatch('play')}>
-			{playing ? 'Restart' : 'Play'}
-		</button>
-	</div>
-</div>
-
-<style>
-	.easing-sidebar {
-		width: 11em;
-	}
-
-	ul {
-		list-style: none;
-		padding: 0;
-		display: grid;
-		grid-template-columns: 1fr;
-		gap: 3px;
-		font-size: 18px;
-	}
-
-	li {
-		display: grid;
-	}
-
-	li:hover {
-		background: #676778;
-		color: white;
-	}
-
-	button {
-		border: none;
-		border-radius: 2px;
-		padding: 2px;
-	}
-
-	.selected > button {
-		background: #ff3e00;
-		color: white;
-		font-weight: bold;
-	}
-
-	h3 {
-		margin: 0 10px 0 0;
-	}
-
-	h4 {
-		margin-bottom: 0;
-	}
-
-	select {
-		display: inline;
-		padding: 0.2em;
-		margin: 0;
-	}
-
-	.duration {
-		width: 100%;
-		display: flex;
-		align-items: center;
-		flex-wrap: wrap;
-	}
-
-	.duration span {
-		display: flex;
-	}
-
-	.duration input {
-		width: 80px;
-		margin: 10px 10px 10px 0;
-	}
-
-	.duration button {
-		margin: 10px 5px;
-	}
-
-	.duration .number {
-		width: 30px;
-	}
-
-	.duration .play {
-		margin: 0 5px 0 auto;
-		width: 100%;
-	}
-
-	@media (max-width: 600px) {
-		.easing-types {
-			display: flex;
-			align-items: center;
-			margin-top: 10px;
-		}
-
-		.easing-sidebar {
-			width: 100%;
-		}
-
-		.duration .play {
-			margin-left: auto;
-			width: unset;
-		}
-
-		h3 {
-			font-size: 0.9em;
-			display: inline;
-		}
-
-		h3:nth-of-type(2) {
-			margin-left: auto;
-		}
-
-		ul li {
-			margin-right: 10px;
-		}
-	}
-</style>
diff --git a/documentation/examples/11-easing/00-easing/Grid.svelte b/documentation/examples/11-easing/00-easing/Grid.svelte
deleted file mode 100644
index 313b46553a..0000000000
--- a/documentation/examples/11-easing/00-easing/Grid.svelte
+++ /dev/null
@@ -1,40 +0,0 @@
-<svelte:options namespace="svg" />
-
-<script>
-	export let x, y;
-</script>
-
-<rect
-	x="0"
-	y="0"
-	width="1400"
-	height="1800"
-	stroke="#ccc"
-	style="opacity: 0.5"
-	fill="none"
-	stroke-width="2"
-/>
-
-{#each { length: 8 } as _, i}
-	{#if i < 6}
-		<path d="M{(i + 1) * 200} 0 L{(i + 1) * 200} 1802" class="grid-line" />
-	{/if}
-	<path d="M0 {(i + 1) * 200} L1400 {(i + 1) * 200} " class="grid-line" />
-{/each}
-
-<path style="transform: translateX({x + 200}px)" d="M0 0 L0 1800" class="grid-line-xy" />
-<path style="transform: translateY({y}px)" d="M0 400 L1400 400" class="grid-line-xy" />
-<rect x="200" y="400" width="1000" height="1000" stroke="#999" fill="none" stroke-width="2" />
-
-<style>
-	.grid-line {
-		stroke: #ccc;
-		opacity: 0.5;
-		stroke-width: 2;
-	}
-
-	.grid-line-xy {
-		stroke: tomato;
-		stroke-width: 2;
-	}
-</style>
diff --git a/documentation/examples/11-easing/00-easing/eases.js b/documentation/examples/11-easing/00-easing/eases.js
deleted file mode 100644
index c4e4ed8d47..0000000000
--- a/documentation/examples/11-easing/00-easing/eases.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import * as eases from 'svelte/easing';
-
-const processed_eases = {};
-
-for (const ease in eases) {
-	if (ease === 'linear') {
-		processed_eases.linear = eases.linear;
-	} else {
-		const name = ease.replace(/In$|InOut$|Out$/, '');
-		const type = ease.match(/In$|InOut$|Out$/)[0];
-
-		if (!(name in processed_eases)) processed_eases[name] = {};
-		processed_eases[name][type] = {};
-		processed_eases[name][type].fn = eases[ease];
-
-		let shape = 'M0 1000';
-		for (let i = 1; i <= 1000; i++) {
-			shape = `${shape} L${(i / 1000) * 1000} ${1000 - eases[ease](i / 1000) * 1000} `;
-			processed_eases[name][type].shape = shape;
-		}
-	}
-}
-
-const sorted_eases = new Map([
-	['sine', processed_eases.sine],
-	['quad', processed_eases.quad],
-	['cubic', processed_eases.cubic],
-	['quart', processed_eases.quart],
-	['quint', processed_eases.quint],
-	['expo', processed_eases.expo],
-	['circ', processed_eases.circ],
-	['back', processed_eases.back],
-	['elastic', processed_eases.elastic],
-	['bounce', processed_eases.bounce]
-]);
-
-export const types = [
-	['Ease In', 'In'],
-	['Ease Out', 'Out'],
-	['Ease In Out', 'InOut']
-];
-
-export { sorted_eases as eases };
diff --git a/documentation/examples/11-easing/00-easing/meta.json b/documentation/examples/11-easing/00-easing/meta.json
deleted file mode 100644
index 0c8a4969ff..0000000000
--- a/documentation/examples/11-easing/00-easing/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Ease Visualiser"
-}
diff --git a/documentation/examples/11-easing/meta.json b/documentation/examples/11-easing/meta.json
deleted file mode 100644
index 54bd68373d..0000000000
--- a/documentation/examples/11-easing/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Easing"
-}
diff --git a/documentation/examples/12-svg/01-clock/App.svelte b/documentation/examples/12-svg/01-clock/App.svelte
deleted file mode 100644
index 7548dff2c9..0000000000
--- a/documentation/examples/12-svg/01-clock/App.svelte
+++ /dev/null
@@ -1,85 +0,0 @@
-<script>
-	import { onMount } from 'svelte';
-
-	let time = new Date();
-
-	// these automatically update when `time`
-	// changes, because of the `$:` prefix
-	$: hours = time.getHours();
-	$: minutes = time.getMinutes();
-	$: seconds = time.getSeconds();
-
-	onMount(() => {
-		const interval = setInterval(() => {
-			time = new Date();
-		}, 1000);
-
-		return () => {
-			clearInterval(interval);
-		};
-	});
-</script>
-
-<svg viewBox="-50 -50 100 100">
-	<circle class="clock-face" r="48" />
-
-	<!-- markers -->
-	{#each [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55] as minute}
-		<line class="major" y1="35" y2="45" transform="rotate({30 * minute})" />
-
-		{#each [1, 2, 3, 4] as offset}
-			<line class="minor" y1="42" y2="45" transform="rotate({6 * (minute + offset)})" />
-		{/each}
-	{/each}
-
-	<!-- hour hand -->
-	<line class="hour" y1="2" y2="-20" transform="rotate({30 * hours + minutes / 2})" />
-
-	<!-- minute hand -->
-	<line class="minute" y1="4" y2="-30" transform="rotate({6 * minutes + seconds / 10})" />
-
-	<!-- second hand -->
-	<g transform="rotate({6 * seconds})">
-		<line class="second" y1="10" y2="-38" />
-		<line class="second-counterweight" y1="10" y2="2" />
-	</g>
-</svg>
-
-<style>
-	svg {
-		width: 100%;
-		height: 100%;
-	}
-
-	.clock-face {
-		stroke: #333;
-		fill: white;
-	}
-
-	.minor {
-		stroke: #999;
-		stroke-width: 0.5;
-	}
-
-	.major {
-		stroke: #333;
-		stroke-width: 1;
-	}
-
-	.hour {
-		stroke: #333;
-	}
-
-	.minute {
-		stroke: #666;
-	}
-
-	.second,
-	.second-counterweight {
-		stroke: rgb(180, 0, 0);
-	}
-
-	.second-counterweight {
-		stroke-width: 3;
-	}
-</style>
diff --git a/documentation/examples/12-svg/01-clock/meta.json b/documentation/examples/12-svg/01-clock/meta.json
deleted file mode 100644
index 85917ba578..0000000000
--- a/documentation/examples/12-svg/01-clock/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Clock"
-}
diff --git a/documentation/examples/12-svg/02-bar-chart/App.svelte b/documentation/examples/12-svg/02-bar-chart/App.svelte
deleted file mode 100644
index 283b109ac0..0000000000
--- a/documentation/examples/12-svg/02-bar-chart/App.svelte
+++ /dev/null
@@ -1,118 +0,0 @@
-<script>
-	import { scaleLinear } from 'd3-scale';
-
-	const points = [
-		{ year: 1990, birthrate: 16.7 },
-		{ year: 1995, birthrate: 14.6 },
-		{ year: 2000, birthrate: 14.4 },
-		{ year: 2005, birthrate: 14 },
-		{ year: 2010, birthrate: 13 },
-		{ year: 2015, birthrate: 12.4 }
-	];
-
-	const xTicks = [1990, 1995, 2000, 2005, 2010, 2015];
-	const yTicks = [0, 5, 10, 15, 20];
-	const padding = { top: 20, right: 15, bottom: 20, left: 25 };
-
-	let width = 500;
-	let height = 200;
-
-	function formatMobile(tick) {
-		return "'" + tick.toString().slice(-2);
-	}
-
-	$: xScale = scaleLinear()
-		.domain([0, xTicks.length])
-		.range([padding.left, width - padding.right]);
-
-	$: yScale = scaleLinear()
-		.domain([0, Math.max.apply(null, yTicks)])
-		.range([height - padding.bottom, padding.top]);
-
-	$: innerWidth = width - (padding.left + padding.right);
-	$: barWidth = innerWidth / xTicks.length;
-</script>
-
-<h2>US birthrate by year</h2>
-
-<div class="chart" bind:clientWidth={width} bind:clientHeight={height}>
-	<svg>
-		<!-- y axis -->
-		<g class="axis y-axis">
-			{#each yTicks as tick}
-				<g class="tick tick-{tick}" transform="translate(0, {yScale(tick)})">
-					<line x2="100%" />
-					<text y="-4">{tick} {tick === 20 ? ' per 1,000 population' : ''}</text>
-				</g>
-			{/each}
-		</g>
-
-		<!-- x axis -->
-		<g class="axis x-axis">
-			{#each points as point, i}
-				<g class="tick" transform="translate({xScale(i)},{height})">
-					<text x={barWidth / 2} y="-4">{width > 380 ? point.year : formatMobile(point.year)}</text>
-				</g>
-			{/each}
-		</g>
-
-		<g class="bars">
-			{#each points as point, i}
-				<rect
-					x={xScale(i) + 2}
-					y={yScale(point.birthrate)}
-					width={barWidth - 4}
-					height={yScale(0) - yScale(point.birthrate)}
-				/>
-			{/each}
-		</g>
-	</svg>
-</div>
-
-<style>
-	h2 {
-		text-align: center;
-	}
-
-	.chart {
-		width: 100%;
-		max-width: 500px;
-		margin: 0 auto;
-	}
-
-	svg {
-		position: relative;
-		width: 100%;
-		height: 200px;
-	}
-
-	.tick {
-		font-family: Helvetica, Arial;
-		font-size: 0.725em;
-		font-weight: 200;
-	}
-
-	.tick line {
-		stroke: #e2e2e2;
-		stroke-dasharray: 2;
-	}
-
-	.tick text {
-		fill: #ccc;
-		text-anchor: start;
-	}
-
-	.tick.tick-0 line {
-		stroke-dasharray: 0;
-	}
-
-	.x-axis .tick text {
-		text-anchor: middle;
-	}
-
-	.bars rect {
-		fill: #a11;
-		stroke: none;
-		opacity: 0.65;
-	}
-</style>
diff --git a/documentation/examples/12-svg/02-bar-chart/meta.json b/documentation/examples/12-svg/02-bar-chart/meta.json
deleted file mode 100644
index d72e5a95a2..0000000000
--- a/documentation/examples/12-svg/02-bar-chart/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Bar chart"
-}
diff --git a/documentation/examples/12-svg/03-area-chart/App.svelte b/documentation/examples/12-svg/03-area-chart/App.svelte
deleted file mode 100644
index fb79b04878..0000000000
--- a/documentation/examples/12-svg/03-area-chart/App.svelte
+++ /dev/null
@@ -1,117 +0,0 @@
-<script>
-	import { scaleLinear } from 'd3-scale';
-	import points from './data.js';
-
-	const yTicks = [0, 2, 4, 6, 8];
-	const xTicks = [1980, 1990, 2000, 2010];
-	const padding = { top: 20, right: 15, bottom: 20, left: 25 };
-
-	let width = 500;
-	let height = 200;
-
-	$: xScale = scaleLinear()
-		.domain([minX, maxX])
-		.range([padding.left, width - padding.right]);
-
-	$: yScale = scaleLinear()
-		.domain([Math.min.apply(null, yTicks), Math.max.apply(null, yTicks)])
-		.range([height - padding.bottom, padding.top]);
-
-	$: minX = points[0].x;
-	$: maxX = points[points.length - 1].x;
-	$: path = `M${points.map((p) => `${xScale(p.x)},${yScale(p.y)}`).join('L')}`;
-	$: area = `${path}L${xScale(maxX)},${yScale(0)}L${xScale(minX)},${yScale(0)}Z`;
-
-	function formatMobile(tick) {
-		return "'" + tick.toString().slice(-2);
-	}
-</script>
-
-<h2>Arctic sea ice minimum</h2>
-
-<div class="chart" bind:clientWidth={width} bind:clientHeight={height}>
-	<svg>
-		<!-- y axis -->
-		<g class="axis y-axis" transform="translate(0, {padding.top})">
-			{#each yTicks as tick}
-				<g class="tick tick-{tick}" transform="translate(0, {yScale(tick) - padding.bottom})">
-					<line x2="100%" />
-					<text y="-4">{tick} {tick === 8 ? ' million sq km' : ''}</text>
-				</g>
-			{/each}
-		</g>
-
-		<!-- x axis -->
-		<g class="axis x-axis">
-			{#each xTicks as tick}
-				<g class="tick tick-{tick}" transform="translate({xScale(tick)},{height})">
-					<line y1="-{height}" y2="-{padding.bottom}" x1="0" x2="0" />
-					<text y="-2">{width > 380 ? tick : formatMobile(tick)}</text>
-				</g>
-			{/each}
-		</g>
-
-		<!-- data -->
-		<path class="path-area" d={area} />
-		<path class="path-line" d={path} />
-	</svg>
-</div>
-
-<p>
-	Average September extent. Source: <a href="https://climate.nasa.gov/vital-signs/arctic-sea-ice/"
-		>NSIDC/NASA</a
-	>
-</p>
-
-<style>
-	.chart,
-	h2,
-	p {
-		width: 100%;
-		max-width: 500px;
-		margin-left: auto;
-		margin-right: auto;
-	}
-
-	svg {
-		position: relative;
-		width: 100%;
-		height: 200px;
-		overflow: visible;
-	}
-
-	.tick {
-		font-size: 0.725em;
-		font-weight: 200;
-	}
-
-	.tick line {
-		stroke: #888;
-		stroke-dasharray: 2;
-	}
-
-	.tick text {
-		fill: #888;
-		text-anchor: start;
-	}
-
-	.tick.tick-0 line {
-		stroke-dasharray: 0;
-	}
-
-	.x-axis .tick text {
-		text-anchor: middle;
-	}
-
-	.path-line {
-		fill: none;
-		stroke: rgb(0, 100, 100);
-		stroke-linejoin: round;
-		stroke-linecap: round;
-		stroke-width: 2;
-	}
-
-	.path-area {
-		fill: rgba(0, 100, 100, 0.2);
-	}
-</style>
diff --git a/documentation/examples/12-svg/03-area-chart/data.js b/documentation/examples/12-svg/03-area-chart/data.js
deleted file mode 100644
index e50c29c9ac..0000000000
--- a/documentation/examples/12-svg/03-area-chart/data.js
+++ /dev/null
@@ -1,45 +0,0 @@
-export default [
-	{ x: 1979, y: 7.19 },
-	{ x: 1980, y: 7.83 },
-	{ x: 1981, y: 7.24 },
-	{ x: 1982, y: 7.44 },
-	{ x: 1983, y: 7.51 },
-	{ x: 1984, y: 7.1 },
-	{ x: 1985, y: 6.91 },
-	{ x: 1986, y: 7.53 },
-	{ x: 1987, y: 7.47 },
-	{ x: 1988, y: 7.48 },
-	{ x: 1989, y: 7.03 },
-	{ x: 1990, y: 6.23 },
-	{ x: 1991, y: 6.54 },
-	{ x: 1992, y: 7.54 },
-	{ x: 1993, y: 6.5 },
-	{ x: 1994, y: 7.18 },
-	{ x: 1995, y: 6.12 },
-	{ x: 1996, y: 7.87 },
-	{ x: 1997, y: 6.73 },
-	{ x: 1998, y: 6.55 },
-	{ x: 1999, y: 6.23 },
-	{ x: 2000, y: 6.31 },
-	{ x: 2001, y: 6.74 },
-	{ x: 2002, y: 5.95 },
-	{ x: 2003, y: 6.13 },
-	{ x: 2004, y: 6.04 },
-	{ x: 2005, y: 5.56 },
-	{ x: 2006, y: 5.91 },
-	{ x: 2007, y: 4.29 },
-	{ x: 2008, y: 4.72 },
-	{ x: 2009, y: 5.38 },
-	{ x: 2010, y: 4.92 },
-	{ x: 2011, y: 4.61 },
-	{ x: 2012, y: 3.62 },
-	{ x: 2013, y: 5.35 },
-	{ x: 2014, y: 5.28 },
-	{ x: 2015, y: 4.63 },
-	{ x: 2016, y: 4.72 },
-	{ x: 2017, y: 4.82 },
-	{ x: 2018, y: 4.79 },
-	{ x: 2019, y: 4.36 },
-	{ x: 2020, y: 4 },
-	{ x: 2021, y: 4.92 }
-];
diff --git a/documentation/examples/12-svg/03-area-chart/meta.json b/documentation/examples/12-svg/03-area-chart/meta.json
deleted file mode 100644
index fa86f9a990..0000000000
--- a/documentation/examples/12-svg/03-area-chart/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Area chart"
-}
diff --git a/documentation/examples/12-svg/04-scatterplot/App.svelte b/documentation/examples/12-svg/04-scatterplot/App.svelte
deleted file mode 100644
index 186193b119..0000000000
--- a/documentation/examples/12-svg/04-scatterplot/App.svelte
+++ /dev/null
@@ -1,24 +0,0 @@
-<script>
-	import Scatterplot from './Scatterplot.svelte';
-	import data from './data.js';
-</script>
-
-<div class="chart">
-	<h2>Anscombe's quartet</h2>
-
-	<Scatterplot points={data.a} />
-	<Scatterplot points={data.b} />
-	<Scatterplot points={data.c} />
-	<Scatterplot points={data.d} />
-</div>
-
-<style>
-	.chart {
-		width: 100%;
-		max-width: 640px;
-		height: calc(100% - 4em);
-		min-height: 280px;
-		max-height: 480px;
-		margin: 0 auto;
-	}
-</style>
diff --git a/documentation/examples/12-svg/04-scatterplot/Scatterplot.svelte b/documentation/examples/12-svg/04-scatterplot/Scatterplot.svelte
deleted file mode 100644
index 9c0a96efc5..0000000000
--- a/documentation/examples/12-svg/04-scatterplot/Scatterplot.svelte
+++ /dev/null
@@ -1,91 +0,0 @@
-<script>
-	import { onMount } from 'svelte';
-	import { scaleLinear } from 'd3-scale';
-
-	export let points;
-
-	let svg;
-	let width = 500;
-	let height = 200;
-
-	const padding = { top: 20, right: 40, bottom: 40, left: 25 };
-
-	$: xScale = scaleLinear()
-		.domain([0, 20])
-		.range([padding.left, width - padding.right]);
-
-	$: yScale = scaleLinear()
-		.domain([0, 12])
-		.range([height - padding.bottom, padding.top]);
-
-	$: xTicks = width > 180 ? [0, 4, 8, 12, 16, 20] : [0, 10, 20];
-
-	$: yTicks = height > 180 ? [0, 2, 4, 6, 8, 10, 12] : [0, 4, 8, 12];
-
-	onMount(resize);
-
-	function resize() {
-		({ width, height } = svg.getBoundingClientRect());
-	}
-</script>
-
-<svelte:window on:resize={resize} />
-
-<svg bind:this={svg}>
-	<!-- y axis -->
-	<g class="axis y-axis">
-		{#each yTicks as tick}
-			<g class="tick tick-{tick}" transform="translate(0, {yScale(tick)})">
-				<line x1={padding.left} x2={xScale(22)} />
-				<text x={padding.left - 8} y="+4">{tick}</text>
-			</g>
-		{/each}
-	</g>
-
-	<!-- x axis -->
-	<g class="axis x-axis">
-		{#each xTicks as tick}
-			<g class="tick" transform="translate({xScale(tick)},0)">
-				<line y1={yScale(0)} y2={yScale(13)} />
-				<text y={height - padding.bottom + 16}>{tick}</text>
-			</g>
-		{/each}
-	</g>
-
-	<!-- data -->
-	{#each points as point}
-		<circle cx={xScale(point.x)} cy={yScale(point.y)} r="5" />
-	{/each}
-</svg>
-
-<style>
-	svg {
-		width: 50%;
-		height: 50%;
-		float: left;
-	}
-
-	circle {
-		fill: orange;
-		fill-opacity: 0.6;
-		stroke: rgba(0, 0, 0, 0.5);
-	}
-
-	.tick line {
-		stroke: #ddd;
-		stroke-dasharray: 2;
-	}
-
-	text {
-		font-size: 12px;
-		fill: #999;
-	}
-
-	.x-axis text {
-		text-anchor: middle;
-	}
-
-	.y-axis text {
-		text-anchor: end;
-	}
-</style>
diff --git a/documentation/examples/12-svg/04-scatterplot/data.js b/documentation/examples/12-svg/04-scatterplot/data.js
deleted file mode 100644
index 71ce9dffe1..0000000000
--- a/documentation/examples/12-svg/04-scatterplot/data.js
+++ /dev/null
@@ -1,54 +0,0 @@
-export default {
-	a: [
-		{ x: 10, y: 8.04 },
-		{ x: 8, y: 6.95 },
-		{ x: 13, y: 7.58 },
-		{ x: 9, y: 8.81 },
-		{ x: 11, y: 8.33 },
-		{ x: 14, y: 9.96 },
-		{ x: 6, y: 7.24 },
-		{ x: 4, y: 4.26 },
-		{ x: 12, y: 10.84 },
-		{ x: 7, y: 4.82 },
-		{ x: 5, y: 5.68 }
-	],
-	b: [
-		{ x: 10, y: 9.14 },
-		{ x: 8, y: 8.14 },
-		{ x: 13, y: 8.74 },
-		{ x: 9, y: 8.77 },
-		{ x: 11, y: 9.26 },
-		{ x: 14, y: 8.1 },
-		{ x: 6, y: 6.13 },
-		{ x: 4, y: 3.1 },
-		{ x: 12, y: 9.13 },
-		{ x: 7, y: 7.26 },
-		{ x: 5, y: 4.74 }
-	],
-	c: [
-		{ x: 10, y: 7.46 },
-		{ x: 8, y: 6.77 },
-		{ x: 13, y: 12.74 },
-		{ x: 9, y: 7.11 },
-		{ x: 11, y: 7.81 },
-		{ x: 14, y: 8.84 },
-		{ x: 6, y: 6.08 },
-		{ x: 4, y: 5.39 },
-		{ x: 12, y: 8.15 },
-		{ x: 7, y: 6.42 },
-		{ x: 5, y: 5.73 }
-	],
-	d: [
-		{ x: 8, y: 6.58 },
-		{ x: 8, y: 5.76 },
-		{ x: 8, y: 7.71 },
-		{ x: 8, y: 8.84 },
-		{ x: 8, y: 8.47 },
-		{ x: 8, y: 7.04 },
-		{ x: 8, y: 5.25 },
-		{ x: 19, y: 12.5 },
-		{ x: 8, y: 5.56 },
-		{ x: 8, y: 7.91 },
-		{ x: 8, y: 6.89 }
-	]
-};
diff --git a/documentation/examples/12-svg/04-scatterplot/meta.json b/documentation/examples/12-svg/04-scatterplot/meta.json
deleted file mode 100644
index df11c668a9..0000000000
--- a/documentation/examples/12-svg/04-scatterplot/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Scatterplot"
-}
diff --git a/documentation/examples/12-svg/05-svg-transitions/App.svelte b/documentation/examples/12-svg/05-svg-transitions/App.svelte
deleted file mode 100644
index 3a4b1710c8..0000000000
--- a/documentation/examples/12-svg/05-svg-transitions/App.svelte
+++ /dev/null
@@ -1,68 +0,0 @@
-<script>
-	import { quintOut } from 'svelte/easing';
-	import { fade, draw, fly } from 'svelte/transition';
-	import { expand } from './custom-transitions.js';
-	import { inner, outer } from './shape.js';
-
-	let visible = true;
-</script>
-
-{#if visible}
-	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 103 124">
-		<g out:fade={{ duration: 200 }} opacity="0.2">
-			<path
-				in:expand={{ duration: 400, delay: 1000, easing: quintOut }}
-				style="stroke: #ff3e00; fill: #ff3e00; stroke-width: 50;"
-				d={outer}
-			/>
-			<path in:draw={{ duration: 1000 }} style="stroke:#ff3e00; stroke-width: 1.5" d={inner} />
-		</g>
-	</svg>
-
-	<div class="centered" out:fly={{ y: -20, duration: 800 }}>
-		{#each 'SVELTE' as char, i}
-			<span in:fade|global={{ delay: 1000 + i * 150, duration: 800 }}>{char}</span>
-		{/each}
-	</div>
-{/if}
-
-<label>
-	<input type="checkbox" bind:checked={visible} />
-	toggle me
-</label>
-
-<link href="https://fonts.googleapis.com/css?family=Overpass:100,400" rel="stylesheet" />
-
-<style>
-	svg {
-		width: 100%;
-		height: 100%;
-	}
-
-	path {
-		fill: white;
-		opacity: 1;
-	}
-
-	label {
-		position: absolute;
-		top: 1em;
-		left: 1em;
-	}
-
-	.centered {
-		font-size: 20vw;
-		position: absolute;
-		left: 50%;
-		top: 50%;
-		transform: translate(-50%, -50%);
-		font-family: 'Overpass';
-		letter-spacing: 0.12em;
-		color: #676778;
-		font-weight: 400;
-	}
-
-	.centered span {
-		will-change: filter;
-	}
-</style>
diff --git a/documentation/examples/12-svg/05-svg-transitions/custom-transitions.js b/documentation/examples/12-svg/05-svg-transitions/custom-transitions.js
deleted file mode 100644
index 58b9198a8a..0000000000
--- a/documentation/examples/12-svg/05-svg-transitions/custom-transitions.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { cubicOut } from 'svelte/easing';
-
-export function expand(node, params) {
-	const { delay = 0, duration = 400, easing = cubicOut } = params;
-
-	const w = parseFloat(getComputedStyle(node).strokeWidth);
-
-	return {
-		delay,
-		duration,
-		easing,
-		css: (t) => `opacity: ${t}; stroke-width: ${t * w}`
-	};
-}
diff --git a/documentation/examples/12-svg/05-svg-transitions/meta.json b/documentation/examples/12-svg/05-svg-transitions/meta.json
deleted file mode 100644
index 79a57977d7..0000000000
--- a/documentation/examples/12-svg/05-svg-transitions/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "SVG transitions"
-}
diff --git a/documentation/examples/12-svg/05-svg-transitions/shape.js b/documentation/examples/12-svg/05-svg-transitions/shape.js
deleted file mode 100644
index 3a85ab44ba..0000000000
--- a/documentation/examples/12-svg/05-svg-transitions/shape.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export const inner = `M45.41,108.86A21.81,21.81,0,0,1,22,100.18,20.2,20.2,0,0,1,18.53,84.9a19,19,0,0,1,.65-2.57l.52-1.58,1.41,1a35.32,35.32,0,0,0,10.75,5.37l1,.31-.1,1a6.2,6.2,0,0,0,1.11,4.08A6.57,6.57,0,0,0,41,95.19a6,6,0,0,0,1.68-.74L70.11,76.94a5.76,5.76,0,0,0,2.59-3.83,6.09,6.09,0,0,0-1-4.6,6.58,6.58,0,0,0-7.06-2.62,6.21,6.21,0,0,0-1.69.74L52.43,73.31a19.88,19.88,0,0,1-5.58,2.45,21.82,21.82,0,0,1-23.43-8.68A20.2,20.2,0,0,1,20,51.8a19,19,0,0,1,8.56-12.7L56,21.59a19.88,19.88,0,0,1,5.58-2.45A21.81,21.81,0,0,1,85,27.82,20.2,20.2,0,0,1,88.47,43.1a19,19,0,0,1-.65,2.57l-.52,1.58-1.41-1a35.32,35.32,0,0,0-10.75-5.37l-1-.31.1-1a6.2,6.2,0,0,0-1.11-4.08,6.57,6.57,0,0,0-7.06-2.62,6,6,0,0,0-1.68.74L36.89,51.06a5.71,5.71,0,0,0-2.58,3.83,6,6,0,0,0,1,4.6,6.58,6.58,0,0,0,7.06,2.62,6.21,6.21,0,0,0,1.69-.74l10.48-6.68a19.88,19.88,0,0,1,5.58-2.45,21.82,21.82,0,0,1,23.43,8.68A20.2,20.2,0,0,1,87,76.2a19,19,0,0,1-8.56,12.7L51,106.41a19.88,19.88,0,0,1-5.58,2.45`;
-export const outer = `M65,34 L37,52 A1 1 0 0 0 44 60 L70.5,44.5 A1 1 0 0 0 65,34Z M64,67 L36,85 A1 1 0 0 0 42 94 L68,77.5 A1 1 0 0 0 64,67Z`;
diff --git a/documentation/examples/12-svg/meta.json b/documentation/examples/12-svg/meta.json
deleted file mode 100644
index cba3160b14..0000000000
--- a/documentation/examples/12-svg/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "SVG"
-}
diff --git a/documentation/examples/13-actions/00-actions/App.svelte b/documentation/examples/13-actions/00-actions/App.svelte
deleted file mode 100644
index fcd0ca6ae3..0000000000
--- a/documentation/examples/13-actions/00-actions/App.svelte
+++ /dev/null
@@ -1,30 +0,0 @@
-<script>
-	import { clickOutside } from './click_outside.js';
-
-	let showModal = true;
-</script>
-
-<button on:click={() => (showModal = true)}>Show Modal</button>
-{#if showModal}
-	<div class="box" use:clickOutside on:outclick={() => (showModal = false)}>Click outside me!</div>
-{/if}
-
-<style>
-	.box {
-		--width: 100px;
-		--height: 100px;
-		position: absolute;
-		width: var(--width);
-		height: var(--height);
-		left: calc(50% - var(--width) / 2);
-		top: calc(50% - var(--height) / 2);
-		display: flex;
-		align-items: center;
-		padding: 8px;
-		border-radius: 4px;
-		background-color: #ff3e00;
-		color: #fff;
-		text-align: center;
-		font-weight: bold;
-	}
-</style>
diff --git a/documentation/examples/13-actions/00-actions/click_outside.js b/documentation/examples/13-actions/00-actions/click_outside.js
deleted file mode 100644
index 3a9a561593..0000000000
--- a/documentation/examples/13-actions/00-actions/click_outside.js
+++ /dev/null
@@ -1,15 +0,0 @@
-export function clickOutside(node) {
-	const handleClick = (event) => {
-		if (!node.contains(event.target)) {
-			node.dispatchEvent(new CustomEvent('outclick'));
-		}
-	};
-
-	document.addEventListener('click', handleClick, true);
-
-	return {
-		destroy() {
-			document.removeEventListener('click', handleClick, true);
-		}
-	};
-}
diff --git a/documentation/examples/13-actions/00-actions/meta.json b/documentation/examples/13-actions/00-actions/meta.json
deleted file mode 100644
index fb4dc640dd..0000000000
--- a/documentation/examples/13-actions/00-actions/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "The use directive"
-}
diff --git a/documentation/examples/13-actions/01-adding-parameters-to-actions/App.svelte b/documentation/examples/13-actions/01-adding-parameters-to-actions/App.svelte
deleted file mode 100644
index 23cc9f2f9e..0000000000
--- a/documentation/examples/13-actions/01-adding-parameters-to-actions/App.svelte
+++ /dev/null
@@ -1,21 +0,0 @@
-<script>
-	import { longpress } from './longpress.js';
-
-	let pressed = false;
-	let duration = 2000;
-</script>
-
-<label>
-	<input type="range" bind:value={duration} max={2000} step={100} />
-	{duration}ms
-</label>
-
-<button
-	use:longpress={duration}
-	on:longpress={() => (pressed = true)}
-	on:mouseenter={() => (pressed = false)}>press and hold</button
->
-
-{#if pressed}
-	<p>congratulations, you pressed and held for {duration}ms</p>
-{/if}
diff --git a/documentation/examples/13-actions/01-adding-parameters-to-actions/longpress.js b/documentation/examples/13-actions/01-adding-parameters-to-actions/longpress.js
deleted file mode 100644
index 240ecd0028..0000000000
--- a/documentation/examples/13-actions/01-adding-parameters-to-actions/longpress.js
+++ /dev/null
@@ -1,26 +0,0 @@
-export function longpress(node, duration) {
-	let timer;
-
-	const handleMousedown = () => {
-		timer = setTimeout(() => {
-			node.dispatchEvent(new CustomEvent('longpress'));
-		}, duration);
-	};
-
-	const handleMouseup = () => {
-		clearTimeout(timer);
-	};
-
-	node.addEventListener('mousedown', handleMousedown);
-	node.addEventListener('mouseup', handleMouseup);
-
-	return {
-		update(newDuration) {
-			duration = newDuration;
-		},
-		destroy() {
-			node.removeEventListener('mousedown', handleMousedown);
-			node.removeEventListener('mouseup', handleMouseup);
-		}
-	};
-}
diff --git a/documentation/examples/13-actions/01-adding-parameters-to-actions/meta.json b/documentation/examples/13-actions/01-adding-parameters-to-actions/meta.json
deleted file mode 100644
index 8a857ebcbb..0000000000
--- a/documentation/examples/13-actions/01-adding-parameters-to-actions/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Adding parameters"
-}
diff --git a/documentation/examples/13-actions/03-actions-pannable/App.svelte b/documentation/examples/13-actions/03-actions-pannable/App.svelte
deleted file mode 100644
index 5fdce1131a..0000000000
--- a/documentation/examples/13-actions/03-actions-pannable/App.svelte
+++ /dev/null
@@ -1,55 +0,0 @@
-<script>
-	import { spring } from 'svelte/motion';
-	import { pannable } from './pannable.js';
-
-	const coords = spring(
-		{ x: 0, y: 0 },
-		{
-			stiffness: 0.2,
-			damping: 0.4
-		}
-	);
-
-	function handlePanStart() {
-		coords.stiffness = coords.damping = 1;
-	}
-
-	function handlePanMove(event) {
-		coords.update(($coords) => ({
-			x: $coords.x + event.detail.dx,
-			y: $coords.y + event.detail.dy
-		}));
-	}
-
-	function handlePanEnd(event) {
-		coords.stiffness = 0.2;
-		coords.damping = 0.4;
-		coords.set({ x: 0, y: 0 });
-	}
-</script>
-
-<div
-	class="box"
-	use:pannable
-	on:panstart={handlePanStart}
-	on:panmove={handlePanMove}
-	on:panend={handlePanEnd}
-	style="transform:
-		translate({$coords.x}px,{$coords.y}px)
-		rotate({$coords.x * 0.2}deg)"
-/>
-
-<style>
-	.box {
-		--width: 100px;
-		--height: 100px;
-		position: absolute;
-		width: var(--width);
-		height: var(--height);
-		left: calc(50% - var(--width) / 2);
-		top: calc(50% - var(--height) / 2);
-		border-radius: 4px;
-		background-color: #ff3e00;
-		cursor: move;
-	}
-</style>
diff --git a/documentation/examples/13-actions/03-actions-pannable/meta.json b/documentation/examples/13-actions/03-actions-pannable/meta.json
deleted file mode 100644
index 3041762ecd..0000000000
--- a/documentation/examples/13-actions/03-actions-pannable/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "A more complex action"
-}
diff --git a/documentation/examples/13-actions/03-actions-pannable/pannable.js b/documentation/examples/13-actions/03-actions-pannable/pannable.js
deleted file mode 100644
index d7d4766627..0000000000
--- a/documentation/examples/13-actions/03-actions-pannable/pannable.js
+++ /dev/null
@@ -1,53 +0,0 @@
-export function pannable(node) {
-	let x;
-	let y;
-
-	function handleMousedown(event) {
-		x = event.clientX;
-		y = event.clientY;
-
-		node.dispatchEvent(
-			new CustomEvent('panstart', {
-				detail: { x, y }
-			})
-		);
-
-		window.addEventListener('mousemove', handleMousemove);
-		window.addEventListener('mouseup', handleMouseup);
-	}
-
-	function handleMousemove(event) {
-		const dx = event.clientX - x;
-		const dy = event.clientY - y;
-		x = event.clientX;
-		y = event.clientY;
-
-		node.dispatchEvent(
-			new CustomEvent('panmove', {
-				detail: { x, y, dx, dy }
-			})
-		);
-	}
-
-	function handleMouseup(event) {
-		x = event.clientX;
-		y = event.clientY;
-
-		node.dispatchEvent(
-			new CustomEvent('panend', {
-				detail: { x, y }
-			})
-		);
-
-		window.removeEventListener('mousemove', handleMousemove);
-		window.removeEventListener('mouseup', handleMouseup);
-	}
-
-	node.addEventListener('mousedown', handleMousedown);
-
-	return {
-		destroy() {
-			node.removeEventListener('mousedown', handleMousedown);
-		}
-	};
-}
diff --git a/documentation/examples/13-actions/meta.json b/documentation/examples/13-actions/meta.json
deleted file mode 100644
index 3943482e82..0000000000
--- a/documentation/examples/13-actions/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Actions"
-}
diff --git a/documentation/examples/14-classes/00-classes/App.svelte b/documentation/examples/14-classes/00-classes/App.svelte
deleted file mode 100644
index 395ed8ee5e..0000000000
--- a/documentation/examples/14-classes/00-classes/App.svelte
+++ /dev/null
@@ -1,20 +0,0 @@
-<script>
-	let current = 'foo';
-</script>
-
-<button class:active={current === 'foo'} on:click={() => (current = 'foo')}>foo</button>
-
-<button class:active={current === 'bar'} on:click={() => (current = 'bar')}>bar</button>
-
-<button class:active={current === 'baz'} on:click={() => (current = 'baz')}>baz</button>
-
-<style>
-	button {
-		display: block;
-	}
-
-	.active {
-		background-color: #ff3e00;
-		color: white;
-	}
-</style>
diff --git a/documentation/examples/14-classes/00-classes/meta.json b/documentation/examples/14-classes/00-classes/meta.json
deleted file mode 100644
index 82fca54c3c..0000000000
--- a/documentation/examples/14-classes/00-classes/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "The class directive"
-}
diff --git a/documentation/examples/14-classes/01-class-shorthand/App.svelte b/documentation/examples/14-classes/01-class-shorthand/App.svelte
deleted file mode 100644
index ad39916ce5..0000000000
--- a/documentation/examples/14-classes/01-class-shorthand/App.svelte
+++ /dev/null
@@ -1,18 +0,0 @@
-<script>
-	let big = false;
-</script>
-
-<label>
-	<input type="checkbox" bind:checked={big} />
-	big
-</label>
-
-<div class:big>
-	some {big ? 'big' : 'small'} text
-</div>
-
-<style>
-	.big {
-		font-size: 4em;
-	}
-</style>
diff --git a/documentation/examples/14-classes/01-class-shorthand/meta.json b/documentation/examples/14-classes/01-class-shorthand/meta.json
deleted file mode 100644
index ee98f80149..0000000000
--- a/documentation/examples/14-classes/01-class-shorthand/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Shorthand class directive"
-}
diff --git a/documentation/examples/14-classes/meta.json b/documentation/examples/14-classes/meta.json
deleted file mode 100644
index b966406a4e..0000000000
--- a/documentation/examples/14-classes/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Classes"
-}
diff --git a/documentation/examples/15-composition/00-slots/App.svelte b/documentation/examples/15-composition/00-slots/App.svelte
deleted file mode 100644
index 986bdc01c5..0000000000
--- a/documentation/examples/15-composition/00-slots/App.svelte
+++ /dev/null
@@ -1,8 +0,0 @@
-<script>
-	import Box from './Box.svelte';
-</script>
-
-<Box>
-	<h2>Hello!</h2>
-	<p>This is a box. It can contain anything.</p>
-</Box>
diff --git a/documentation/examples/15-composition/00-slots/Box.svelte b/documentation/examples/15-composition/00-slots/Box.svelte
deleted file mode 100644
index 2d0a378d25..0000000000
--- a/documentation/examples/15-composition/00-slots/Box.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<div class="box">
-	<slot />
-</div>
-
-<style>
-	.box {
-		width: 300px;
-		border: 1px solid #aaa;
-		border-radius: 2px;
-		box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
-		padding: 1em;
-		margin: 0 0 1em 0;
-	}
-</style>
diff --git a/documentation/examples/15-composition/00-slots/meta.json b/documentation/examples/15-composition/00-slots/meta.json
deleted file mode 100644
index 78e029ae70..0000000000
--- a/documentation/examples/15-composition/00-slots/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Slots"
-}
diff --git a/documentation/examples/15-composition/01-slot-fallbacks/App.svelte b/documentation/examples/15-composition/01-slot-fallbacks/App.svelte
deleted file mode 100644
index 708428d4d8..0000000000
--- a/documentation/examples/15-composition/01-slot-fallbacks/App.svelte
+++ /dev/null
@@ -1,10 +0,0 @@
-<script>
-	import Box from './Box.svelte';
-</script>
-
-<Box>
-	<h2>Hello!</h2>
-	<p>This is a box. It can contain anything.</p>
-</Box>
-
-<Box />
diff --git a/documentation/examples/15-composition/01-slot-fallbacks/Box.svelte b/documentation/examples/15-composition/01-slot-fallbacks/Box.svelte
deleted file mode 100644
index 8cb8128b31..0000000000
--- a/documentation/examples/15-composition/01-slot-fallbacks/Box.svelte
+++ /dev/null
@@ -1,16 +0,0 @@
-<div class="box">
-	<slot>
-		<em>no content was provided</em>
-	</slot>
-</div>
-
-<style>
-	.box {
-		width: 300px;
-		border: 1px solid #aaa;
-		border-radius: 2px;
-		box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
-		padding: 1em;
-		margin: 0 0 1em 0;
-	}
-</style>
diff --git a/documentation/examples/15-composition/01-slot-fallbacks/meta.json b/documentation/examples/15-composition/01-slot-fallbacks/meta.json
deleted file mode 100644
index ccc7d49a93..0000000000
--- a/documentation/examples/15-composition/01-slot-fallbacks/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Slot fallbacks"
-}
diff --git a/documentation/examples/15-composition/02-named-slots/App.svelte b/documentation/examples/15-composition/02-named-slots/App.svelte
deleted file mode 100644
index ea27d75edf..0000000000
--- a/documentation/examples/15-composition/02-named-slots/App.svelte
+++ /dev/null
@@ -1,12 +0,0 @@
-<script>
-	import ContactCard from './ContactCard.svelte';
-</script>
-
-<ContactCard>
-	<span slot="name"> P. Sherman </span>
-
-	<span slot="address">
-		42 Wallaby Way<br />
-		Sydney
-	</span>
-</ContactCard>
diff --git a/documentation/examples/15-composition/02-named-slots/ContactCard.svelte b/documentation/examples/15-composition/02-named-slots/ContactCard.svelte
deleted file mode 100644
index d72da2ad4c..0000000000
--- a/documentation/examples/15-composition/02-named-slots/ContactCard.svelte
+++ /dev/null
@@ -1,54 +0,0 @@
-<article class="contact-card">
-	<h2>
-		<slot name="name">
-			<span class="missing">Unknown name</span>
-		</slot>
-	</h2>
-
-	<div class="address">
-		<slot name="address">
-			<span class="missing">Unknown address</span>
-		</slot>
-	</div>
-
-	<div class="email">
-		<slot name="email">
-			<span class="missing">Unknown email</span>
-		</slot>
-	</div>
-</article>
-
-<style>
-	.contact-card {
-		width: 300px;
-		border: 1px solid #aaa;
-		border-radius: 2px;
-		box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
-		padding: 1em;
-	}
-
-	h2 {
-		padding: 0 0 0.2em 0;
-		margin: 0 0 1em 0;
-		border-bottom: 1px solid #ff3e00;
-	}
-
-	.address,
-	.email {
-		padding: 0 0 0 1.5em;
-		background: 0 0 no-repeat;
-		background-size: 20px 20px;
-		margin: 0 0 0.5em 0;
-		line-height: 1.2;
-	}
-
-	.address {
-		background-image: url(/tutorial/icons/map-marker.svg);
-	}
-	.email {
-		background-image: url(/tutorial/icons/email.svg);
-	}
-	.missing {
-		color: #999;
-	}
-</style>
diff --git a/documentation/examples/15-composition/02-named-slots/meta.json b/documentation/examples/15-composition/02-named-slots/meta.json
deleted file mode 100644
index b2f48bdaec..0000000000
--- a/documentation/examples/15-composition/02-named-slots/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Named slots"
-}
diff --git a/documentation/examples/15-composition/03-slot-props/App.svelte b/documentation/examples/15-composition/03-slot-props/App.svelte
deleted file mode 100644
index c281e61b04..0000000000
--- a/documentation/examples/15-composition/03-slot-props/App.svelte
+++ /dev/null
@@ -1,51 +0,0 @@
-<script>
-	import Hoverable from './Hoverable.svelte';
-</script>
-
-<Hoverable let:hovering={active}>
-	<div class:active>
-		{#if active}
-			<p>I am being hovered upon.</p>
-		{:else}
-			<p>Hover over me!</p>
-		{/if}
-	</div>
-</Hoverable>
-
-<Hoverable let:hovering={active}>
-	<div class:active>
-		{#if active}
-			<p>I am being hovered upon.</p>
-		{:else}
-			<p>Hover over me!</p>
-		{/if}
-	</div>
-</Hoverable>
-
-<Hoverable let:hovering={active}>
-	<div class:active>
-		{#if active}
-			<p>I am being hovered upon.</p>
-		{:else}
-			<p>Hover over me!</p>
-		{/if}
-	</div>
-</Hoverable>
-
-<style>
-	div {
-		padding: 1em;
-		margin: 0 0 1em 0;
-		background-color: #eee;
-	}
-
-	.active {
-		background-color: #ff3e00;
-		color: white;
-	}
-
-	p {
-		pointer-events: none;
-		color: black;
-	}
-</style>
diff --git a/documentation/examples/15-composition/03-slot-props/Hoverable.svelte b/documentation/examples/15-composition/03-slot-props/Hoverable.svelte
deleted file mode 100644
index fbf45e4d30..0000000000
--- a/documentation/examples/15-composition/03-slot-props/Hoverable.svelte
+++ /dev/null
@@ -1,16 +0,0 @@
-<script>
-	let hovering;
-
-	function enter() {
-		hovering = true;
-	}
-
-	function leave() {
-		hovering = false;
-	}
-</script>
-
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<div on:mouseenter={enter} on:mouseleave={leave}>
-	<slot {hovering} />
-</div>
diff --git a/documentation/examples/15-composition/03-slot-props/meta.json b/documentation/examples/15-composition/03-slot-props/meta.json
deleted file mode 100644
index 4b28b342fa..0000000000
--- a/documentation/examples/15-composition/03-slot-props/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Slot props"
-}
diff --git a/documentation/examples/15-composition/04-conditional-slots/App.svelte b/documentation/examples/15-composition/04-conditional-slots/App.svelte
deleted file mode 100644
index feba6b18d6..0000000000
--- a/documentation/examples/15-composition/04-conditional-slots/App.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script>
-	import Profile from './Profile.svelte';
-</script>
-
-<Profile>
-	<span slot="name">Bob</span>
-	<span slot="email">bob@email.com</span>
-</Profile>
-
-<Profile>
-	<span slot="name">Alice</span>
-	<span slot="phone">12345678</span>
-</Profile>
diff --git a/documentation/examples/15-composition/04-conditional-slots/Profile.svelte b/documentation/examples/15-composition/04-conditional-slots/Profile.svelte
deleted file mode 100644
index 963506ebca..0000000000
--- a/documentation/examples/15-composition/04-conditional-slots/Profile.svelte
+++ /dev/null
@@ -1,24 +0,0 @@
-<section>
-	<div>Name</div>
-	<slot name="name" />
-	{#if $$slots.email}
-		<div>Email</div>
-		<slot name="email" />
-	{/if}
-	{#if $$slots.phone}
-		<div>Phone</div>
-		<slot name="phone" />
-	{/if}
-</section>
-
-<style>
-	section {
-		width: 200px;
-		display: grid;
-		grid-template-columns: 1fr 1fr;
-		padding: 16px;
-		box-shadow: 2px 2px 4px #dedede;
-		border: 1px solid #888;
-		margin-bottom: 16px;
-	}
-</style>
diff --git a/documentation/examples/15-composition/04-conditional-slots/meta.json b/documentation/examples/15-composition/04-conditional-slots/meta.json
deleted file mode 100644
index 26d24b0812..0000000000
--- a/documentation/examples/15-composition/04-conditional-slots/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Conditional Slots"
-}
diff --git a/documentation/examples/15-composition/05-modal/App.svelte b/documentation/examples/15-composition/05-modal/App.svelte
deleted file mode 100644
index 107affa11d..0000000000
--- a/documentation/examples/15-composition/05-modal/App.svelte
+++ /dev/null
@@ -1,31 +0,0 @@
-<script>
-	import Modal from './Modal.svelte';
-
-	let showModal = false;
-</script>
-
-<button on:click={() => (showModal = true)}> show modal </button>
-
-<Modal bind:showModal>
-	<h2 slot="header">
-		modal
-		<small><em>adjective</em> mod·al \ˈmō-dəl\</small>
-	</h2>
-
-	<ol class="definition-list">
-		<li>of or relating to modality in logic</li>
-		<li>
-			containing provisions as to the mode of procedure or the manner of taking effect —used of a
-			contract or legacy
-		</li>
-		<li>of or relating to a musical mode</li>
-		<li>of or relating to structure as opposed to substance</li>
-		<li>
-			of, relating to, or constituting a grammatical form or category characteristically indicating
-			predication
-		</li>
-		<li>of or relating to a statistical mode</li>
-	</ol>
-
-	<a href="https://www.merriam-webster.com/dictionary/modal">merriam-webster.com</a>
-</Modal>
diff --git a/documentation/examples/15-composition/05-modal/Modal.svelte b/documentation/examples/15-composition/05-modal/Modal.svelte
deleted file mode 100644
index 3b832030fe..0000000000
--- a/documentation/examples/15-composition/05-modal/Modal.svelte
+++ /dev/null
@@ -1,64 +0,0 @@
-<script>
-	export let showModal; // boolean
-
-	let dialog; // HTMLDialogElement
-
-	$: if (dialog && showModal) dialog.showModal();
-</script>
-
-<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-noninteractive-element-interactions -->
-<dialog
-	bind:this={dialog}
-	on:close={() => (showModal = false)}
-	on:click|self={() => dialog.close()}
->
-	<!-- svelte-ignore a11y-no-static-element-interactions -->
-	<div on:click|stopPropagation>
-		<slot name="header" />
-		<hr />
-		<slot />
-		<hr />
-		<!-- svelte-ignore a11y-autofocus -->
-		<button autofocus on:click={() => dialog.close()}>close modal</button>
-	</div>
-</dialog>
-
-<style>
-	dialog {
-		max-width: 32em;
-		border-radius: 0.2em;
-		border: none;
-		padding: 0;
-	}
-	dialog::backdrop {
-		background: rgba(0, 0, 0, 0.3);
-	}
-	dialog > div {
-		padding: 1em;
-	}
-	dialog[open] {
-		animation: zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
-	}
-	@keyframes zoom {
-		from {
-			transform: scale(0.95);
-		}
-		to {
-			transform: scale(1);
-		}
-	}
-	dialog[open]::backdrop {
-		animation: fade 0.2s ease-out;
-	}
-	@keyframes fade {
-		from {
-			opacity: 0;
-		}
-		to {
-			opacity: 1;
-		}
-	}
-	button {
-		display: block;
-	}
-</style>
diff --git a/documentation/examples/15-composition/05-modal/meta.json b/documentation/examples/15-composition/05-modal/meta.json
deleted file mode 100644
index 360dafa159..0000000000
--- a/documentation/examples/15-composition/05-modal/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Modal"
-}
diff --git a/documentation/examples/15-composition/meta.json b/documentation/examples/15-composition/meta.json
deleted file mode 100644
index 1d81c05f29..0000000000
--- a/documentation/examples/15-composition/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Component composition"
-}
diff --git a/documentation/examples/16-context/00-context-api/App.svelte b/documentation/examples/16-context/00-context-api/App.svelte
deleted file mode 100644
index d564c9eee6..0000000000
--- a/documentation/examples/16-context/00-context-api/App.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script>
-	import Map from './Map.svelte';
-	import MapMarker from './MapMarker.svelte';
-</script>
-
-<Map lat={35} lon={-84} zoom={3.5}>
-	<MapMarker lat={37.8225} lon={-122.0024} label="Svelte Body Shaping" />
-	<MapMarker lat={33.8981} lon={-118.4169} label="Svelte Barbershop & Essentials" />
-	<MapMarker lat={29.723} lon={-95.4189} label="Svelte Waxing Studio" />
-	<MapMarker lat={28.3378} lon={-81.3966} label="Svelte 30 Nutritional Consultants" />
-	<MapMarker lat={40.6483} lon={-74.0237} label="Svelte Brands LLC" />
-	<MapMarker lat={40.6986} lon={-74.41} label="Svelte Medical Systems" />
-</Map>
diff --git a/documentation/examples/16-context/00-context-api/Map.svelte b/documentation/examples/16-context/00-context-api/Map.svelte
deleted file mode 100644
index a69d18c7fd..0000000000
--- a/documentation/examples/16-context/00-context-api/Map.svelte
+++ /dev/null
@@ -1,45 +0,0 @@
-<script>
-	import { onDestroy, setContext } from 'svelte';
-	import { mapbox, key } from './mapbox.js';
-
-	setContext(key, {
-		getMap: () => map
-	});
-
-	export let lat;
-	export let lon;
-	export let zoom;
-
-	let container;
-	let map;
-
-	function load() {
-		map = new mapbox.Map({
-			container,
-			style: 'mapbox://styles/mapbox/streets-v9',
-			center: [lon, lat],
-			zoom
-		});
-	}
-
-	onDestroy(() => {
-		if (map) map.remove();
-	});
-</script>
-
-<svelte:head>
-	<link rel="stylesheet" href="https://unpkg.com/mapbox-gl/dist/mapbox-gl.css" on:load={load} />
-</svelte:head>
-
-<div bind:this={container}>
-	{#if map}
-		<slot />
-	{/if}
-</div>
-
-<style>
-	div {
-		width: 100%;
-		height: 100%;
-	}
-</style>
diff --git a/documentation/examples/16-context/00-context-api/MapMarker.svelte b/documentation/examples/16-context/00-context-api/MapMarker.svelte
deleted file mode 100644
index 9c6df339cf..0000000000
--- a/documentation/examples/16-context/00-context-api/MapMarker.svelte
+++ /dev/null
@@ -1,15 +0,0 @@
-<script>
-	import { getContext } from 'svelte';
-	import { mapbox, key } from './mapbox.js';
-
-	const { getMap } = getContext(key);
-	const map = getMap();
-
-	export let lat;
-	export let lon;
-	export let label;
-
-	const popup = new mapbox.Popup({ offset: 25 }).setText(label);
-
-	const marker = new mapbox.Marker().setLngLat([lon, lat]).setPopup(popup).addTo(map);
-</script>
diff --git a/documentation/examples/16-context/00-context-api/mapbox.js b/documentation/examples/16-context/00-context-api/mapbox.js
deleted file mode 100644
index 42660d35ad..0000000000
--- a/documentation/examples/16-context/00-context-api/mapbox.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import mapbox from 'mapbox-gl';
-
-// https://docs.mapbox.com/help/glossary/access-token/
-mapbox.accessToken = MAPBOX_ACCESS_TOKEN;
-
-const key = {};
-
-export { mapbox, key };
diff --git a/documentation/examples/16-context/00-context-api/meta.json b/documentation/examples/16-context/00-context-api/meta.json
deleted file mode 100644
index f95f4c32b6..0000000000
--- a/documentation/examples/16-context/00-context-api/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "setContext and getContext"
-}
diff --git a/documentation/examples/16-context/meta.json b/documentation/examples/16-context/meta.json
deleted file mode 100644
index bb3c2c607d..0000000000
--- a/documentation/examples/16-context/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Context API"
-}
diff --git a/documentation/examples/17-special-elements/00-svelte-self/App.svelte b/documentation/examples/17-special-elements/00-svelte-self/App.svelte
deleted file mode 100644
index 52c6daf613..0000000000
--- a/documentation/examples/17-special-elements/00-svelte-self/App.svelte
+++ /dev/null
@@ -1,39 +0,0 @@
-<script>
-	import Folder from './Folder.svelte';
-
-	let root = [
-		{
-			type: 'folder',
-			name: 'Important work stuff',
-			files: [{ type: 'file', name: 'quarterly-results.xlsx' }]
-		},
-		{
-			type: 'folder',
-			name: 'Animal GIFs',
-			files: [
-				{
-					type: 'folder',
-					name: 'Dogs',
-					files: [
-						{ type: 'file', name: 'treadmill.gif' },
-						{ type: 'file', name: 'rope-jumping.gif' }
-					]
-				},
-				{
-					type: 'folder',
-					name: 'Goats',
-					files: [
-						{ type: 'file', name: 'parkour.gif' },
-						{ type: 'file', name: 'rampage.gif' }
-					]
-				},
-				{ type: 'file', name: 'cat-roomba.gif' },
-				{ type: 'file', name: 'duck-shuffle.gif' },
-				{ type: 'file', name: 'monkey-on-a-pig.gif' }
-			]
-		},
-		{ type: 'file', name: 'TODO.md' }
-	];
-</script>
-
-<Folder name="Home" files={root} expanded />
diff --git a/documentation/examples/17-special-elements/00-svelte-self/File.svelte b/documentation/examples/17-special-elements/00-svelte-self/File.svelte
deleted file mode 100644
index e769ab4841..0000000000
--- a/documentation/examples/17-special-elements/00-svelte-self/File.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<script>
-	export let name;
-	$: type = name.slice(name.lastIndexOf('.') + 1);
-</script>
-
-<span style="background-image: url(/tutorial/icons/{type}.svg)">{name}</span>
-
-<style>
-	span {
-		padding: 0 0 0 1.5em;
-		background: 0 0.1em no-repeat;
-		background-size: 1em 1em;
-	}
-</style>
diff --git a/documentation/examples/17-special-elements/00-svelte-self/Folder.svelte b/documentation/examples/17-special-elements/00-svelte-self/Folder.svelte
deleted file mode 100644
index 356263a91c..0000000000
--- a/documentation/examples/17-special-elements/00-svelte-self/Folder.svelte
+++ /dev/null
@@ -1,55 +0,0 @@
-<script>
-	import File from './File.svelte';
-	import { slide } from 'svelte/transition';
-
-	export let expanded = false;
-	export let name;
-	export let files;
-
-	function toggle() {
-		expanded = !expanded;
-	}
-</script>
-
-<button class:expanded on:click={toggle}>{name}</button>
-
-{#if expanded}
-	<ul transition:slide={{ duration: 300 }}>
-		{#each files as file}
-			<li>
-				{#if file.type === 'folder'}
-					<svelte:self {...file} />
-				{:else}
-					<File {...file} />
-				{/if}
-			</li>
-		{/each}
-	</ul>
-{/if}
-
-<style>
-	button {
-		padding: 0 0 0 1.5em;
-		background: url(/tutorial/icons/folder.svg) 0 0.1em no-repeat;
-		background-size: 1em 1em;
-		font-weight: bold;
-		cursor: pointer;
-		border: none;
-		font-size: 14px;
-	}
-
-	.expanded {
-		background-image: url(/tutorial/icons/folder-open.svg);
-	}
-
-	ul {
-		padding: 0.2em 0 0 0.5em;
-		margin: 0 0 0 0.5em;
-		list-style: none;
-		border-left: 1px solid #eee;
-	}
-
-	li {
-		padding: 0.2em 0;
-	}
-</style>
diff --git a/documentation/examples/17-special-elements/00-svelte-self/meta.json b/documentation/examples/17-special-elements/00-svelte-self/meta.json
deleted file mode 100644
index db833f9acd..0000000000
--- a/documentation/examples/17-special-elements/00-svelte-self/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "<svelte:self>"
-}
diff --git a/documentation/examples/17-special-elements/01-svelte-component/App.svelte b/documentation/examples/17-special-elements/01-svelte-component/App.svelte
deleted file mode 100644
index 69e51253fc..0000000000
--- a/documentation/examples/17-special-elements/01-svelte-component/App.svelte
+++ /dev/null
@@ -1,21 +0,0 @@
-<script>
-	import RedThing from './RedThing.svelte';
-	import GreenThing from './GreenThing.svelte';
-	import BlueThing from './BlueThing.svelte';
-
-	const options = [
-		{ color: 'red', component: RedThing },
-		{ color: 'green', component: GreenThing },
-		{ color: 'blue', component: BlueThing }
-	];
-
-	let selected = options[0];
-</script>
-
-<select bind:value={selected}>
-	{#each options as option}
-		<option value={option}>{option.color}</option>
-	{/each}
-</select>
-
-<svelte:component this={selected.component} />
diff --git a/documentation/examples/17-special-elements/01-svelte-component/BlueThing.svelte b/documentation/examples/17-special-elements/01-svelte-component/BlueThing.svelte
deleted file mode 100644
index 551f1afbbe..0000000000
--- a/documentation/examples/17-special-elements/01-svelte-component/BlueThing.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<strong>Blue thing</strong>
-
-<style>
-	strong {
-		color: blue;
-	}
-</style>
diff --git a/documentation/examples/17-special-elements/01-svelte-component/GreenThing.svelte b/documentation/examples/17-special-elements/01-svelte-component/GreenThing.svelte
deleted file mode 100644
index a224720e6c..0000000000
--- a/documentation/examples/17-special-elements/01-svelte-component/GreenThing.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<strong>Green thing</strong>
-
-<style>
-	strong {
-		color: green;
-	}
-</style>
diff --git a/documentation/examples/17-special-elements/01-svelte-component/RedThing.svelte b/documentation/examples/17-special-elements/01-svelte-component/RedThing.svelte
deleted file mode 100644
index 9774363c1b..0000000000
--- a/documentation/examples/17-special-elements/01-svelte-component/RedThing.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<strong>Red thing</strong>
-
-<style>
-	strong {
-		color: red;
-	}
-</style>
diff --git a/documentation/examples/17-special-elements/01-svelte-component/meta.json b/documentation/examples/17-special-elements/01-svelte-component/meta.json
deleted file mode 100644
index 227316f679..0000000000
--- a/documentation/examples/17-special-elements/01-svelte-component/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "<svelte:component>"
-}
diff --git a/documentation/examples/17-special-elements/02-svelte-element/App.svelte b/documentation/examples/17-special-elements/02-svelte-element/App.svelte
deleted file mode 100644
index 068f7b3c4f..0000000000
--- a/documentation/examples/17-special-elements/02-svelte-element/App.svelte
+++ /dev/null
@@ -1,12 +0,0 @@
-<script>
-	const options = ['h1', 'h3', 'p'];
-	let selected = options[0];
-</script>
-
-<select bind:value={selected}>
-	{#each options as option}
-		<option value={option}>{option}</option>
-	{/each}
-</select>
-
-<svelte:element this={selected}>I'm a {selected} tag</svelte:element>
diff --git a/documentation/examples/17-special-elements/02-svelte-element/meta.json b/documentation/examples/17-special-elements/02-svelte-element/meta.json
deleted file mode 100644
index 29ca542e1a..0000000000
--- a/documentation/examples/17-special-elements/02-svelte-element/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "<svelte:element>"
-}
diff --git a/documentation/examples/17-special-elements/03-svelte-window/App.svelte b/documentation/examples/17-special-elements/03-svelte-window/App.svelte
deleted file mode 100644
index 8ccc87d2b3..0000000000
--- a/documentation/examples/17-special-elements/03-svelte-window/App.svelte
+++ /dev/null
@@ -1,42 +0,0 @@
-<script>
-	let key;
-	let keyCode;
-
-	function handleKeydown(event) {
-		key = event.key;
-		keyCode = event.keyCode;
-	}
-</script>
-
-<svelte:window on:keydown={handleKeydown} />
-
-<div style="text-align: center">
-	{#if key}
-		<kbd>{key === ' ' ? 'Space' : key}</kbd>
-		<p>{keyCode}</p>
-	{:else}
-		<p>Focus this window and press any key</p>
-	{/if}
-</div>
-
-<style>
-	div {
-		display: flex;
-		height: 100%;
-		align-items: center;
-		justify-content: center;
-		flex-direction: column;
-	}
-
-	kbd {
-		background-color: #eee;
-		border-radius: 4px;
-		font-size: 6em;
-		padding: 0.2em 0.5em;
-		border-top: 5px solid rgba(255, 255, 255, 0.5);
-		border-left: 5px solid rgba(255, 255, 255, 0.5);
-		border-right: 5px solid rgba(0, 0, 0, 0.2);
-		border-bottom: 5px solid rgba(0, 0, 0, 0.2);
-		color: #555;
-	}
-</style>
diff --git a/documentation/examples/17-special-elements/03-svelte-window/meta.json b/documentation/examples/17-special-elements/03-svelte-window/meta.json
deleted file mode 100644
index 3dbc4f0acf..0000000000
--- a/documentation/examples/17-special-elements/03-svelte-window/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "<svelte:window>"
-}
diff --git a/documentation/examples/17-special-elements/04-svelte-window-bindings/App.svelte b/documentation/examples/17-special-elements/04-svelte-window-bindings/App.svelte
deleted file mode 100644
index 7e85600abe..0000000000
--- a/documentation/examples/17-special-elements/04-svelte-window-bindings/App.svelte
+++ /dev/null
@@ -1,86 +0,0 @@
-<script>
-	const layers = [0, 1, 2, 3, 4, 5, 6, 7, 8];
-
-	let y;
-</script>
-
-<svelte:window bind:scrollY={y} />
-
-<a class="parallax-container" href="https://www.firewatchgame.com">
-	{#each layers as layer}
-		<img
-			style="transform: translate(0,{(-y * layer) / (layers.length - 1)}px)"
-			src="https://www.firewatchgame.com/images/parallax/parallax{layer}.png"
-			alt="parallax layer {layer}"
-		/>
-	{/each}
-</a>
-
-<div class="text">
-	<span style="opacity: {1 - Math.max(0, y / 40)}"> scroll down </span>
-
-	<div class="foreground">
-		You have scrolled {y} pixels
-	</div>
-</div>
-
-<style>
-	.parallax-container {
-		position: fixed;
-		width: 2400px;
-		height: 712px;
-		left: 50%;
-		transform: translate(-50%, 0);
-	}
-
-	.parallax-container img {
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		will-change: transform;
-	}
-
-	.parallax-container img:last-child::after {
-		content: '';
-		position: absolute;
-		width: 100%;
-		height: 100%;
-		background: rgb(45, 10, 13);
-	}
-
-	.text {
-		position: relative;
-		width: 100%;
-		height: 300vh;
-		color: rgb(220, 113, 43);
-		text-align: center;
-		padding: 4em 0.5em 0.5em 0.5em;
-		box-sizing: border-box;
-		pointer-events: none;
-	}
-
-	span {
-		display: block;
-		font-size: 1em;
-		text-transform: uppercase;
-		will-change: transform, opacity;
-	}
-
-	.foreground {
-		position: absolute;
-		top: 711px;
-		left: 0;
-		width: 100%;
-		height: calc(100% - 712px);
-		background-color: rgb(32, 0, 1);
-		color: white;
-		padding: 50vh 0 0 0;
-	}
-
-	:global(body) {
-		margin: 0;
-		padding: 0;
-		background-color: rgb(253, 174, 51);
-	}
-</style>
diff --git a/documentation/examples/17-special-elements/04-svelte-window-bindings/meta.json b/documentation/examples/17-special-elements/04-svelte-window-bindings/meta.json
deleted file mode 100644
index c4864331cc..0000000000
--- a/documentation/examples/17-special-elements/04-svelte-window-bindings/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "<svelte:window> bindings"
-}
diff --git a/documentation/examples/17-special-elements/05-svelte-document/App.svelte b/documentation/examples/17-special-elements/05-svelte-document/App.svelte
deleted file mode 100644
index e11a9005db..0000000000
--- a/documentation/examples/17-special-elements/05-svelte-document/App.svelte
+++ /dev/null
@@ -1,10 +0,0 @@
-<script>
-	let selection = '';
-
-	const handleSelectionChange = (e) => (selection = document.getSelection());
-</script>
-
-<svelte:document on:selectionchange={handleSelectionChange} />
-
-<p>Select this text to fire events</p>
-<p>Selection: {selection}</p>
diff --git a/documentation/examples/17-special-elements/05-svelte-document/meta.json b/documentation/examples/17-special-elements/05-svelte-document/meta.json
deleted file mode 100644
index c48db2e62a..0000000000
--- a/documentation/examples/17-special-elements/05-svelte-document/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "<svelte:document>"
-}
diff --git a/documentation/examples/17-special-elements/06-svelte-body/App.svelte b/documentation/examples/17-special-elements/06-svelte-body/App.svelte
deleted file mode 100644
index 71edebea48..0000000000
--- a/documentation/examples/17-special-elements/06-svelte-body/App.svelte
+++ /dev/null
@@ -1,34 +0,0 @@
-<script>
-	let hereKitty = false;
-
-	const handleMouseenter = () => (hereKitty = true);
-	const handleMouseleave = () => (hereKitty = false);
-</script>
-
-<svelte:body on:mouseenter={handleMouseenter} on:mouseleave={handleMouseleave} />
-
-<!-- creative commons BY-NC http://www.pngall.com/kitten-png/download/7247 -->
-<img
-	class:curious={hereKitty}
-	alt="Kitten wants to know what's going on"
-	src="/tutorial/kitten.png"
-/>
-
-<style>
-	img {
-		position: absolute;
-		left: 0;
-		bottom: -60px;
-		transform: translate(-80%, 0) rotate(-30deg);
-		transform-origin: 100% 100%;
-		transition: transform 0.4s;
-	}
-
-	.curious {
-		transform: translate(-15%, 0) rotate(0deg);
-	}
-
-	:global(body) {
-		overflow: hidden;
-	}
-</style>
diff --git a/documentation/examples/17-special-elements/06-svelte-body/meta.json b/documentation/examples/17-special-elements/06-svelte-body/meta.json
deleted file mode 100644
index fbe7deeb96..0000000000
--- a/documentation/examples/17-special-elements/06-svelte-body/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "<svelte:body>"
-}
diff --git a/documentation/examples/17-special-elements/07-svelte-head/App.svelte b/documentation/examples/17-special-elements/07-svelte-head/App.svelte
deleted file mode 100644
index 5e6bb2d945..0000000000
--- a/documentation/examples/17-special-elements/07-svelte-head/App.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<svelte:head>
-	<link rel="stylesheet" href="/tutorial/dark-theme.css" />
-</svelte:head>
-
-<h1>Hello world!</h1>
diff --git a/documentation/examples/17-special-elements/07-svelte-head/meta.json b/documentation/examples/17-special-elements/07-svelte-head/meta.json
deleted file mode 100644
index b69672ba02..0000000000
--- a/documentation/examples/17-special-elements/07-svelte-head/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "<svelte:head>"
-}
diff --git a/documentation/examples/17-special-elements/meta.json b/documentation/examples/17-special-elements/meta.json
deleted file mode 100644
index 6c2af96c1d..0000000000
--- a/documentation/examples/17-special-elements/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Special elements"
-}
diff --git a/documentation/examples/18-module-context/01-module-exports/App.svelte b/documentation/examples/18-module-context/01-module-exports/App.svelte
deleted file mode 100644
index a018d3429f..0000000000
--- a/documentation/examples/18-module-context/01-module-exports/App.svelte
+++ /dev/null
@@ -1,45 +0,0 @@
-<script>
-	import AudioPlayer, { stopAll } from './AudioPlayer.svelte';
-</script>
-
-<button on:click={stopAll}> stop all audio </button>
-
-<!-- https://musopen.org/music/9862-the-blue-danube-op-314/ -->
-<AudioPlayer
-	src="https://sveltejs.github.io/assets/music/strauss.mp3"
-	title="The Blue Danube Waltz"
-	composer="Johann Strauss"
-	performer="European Archive"
-/>
-
-<!-- https://musopen.org/music/43775-the-planets-op-32/ -->
-<AudioPlayer
-	src="https://sveltejs.github.io/assets/music/holst.mp3"
-	title="Mars, the Bringer of War"
-	composer="Gustav Holst"
-	performer="USAF Heritage of America Band"
-/>
-
-<!-- https://musopen.org/music/8010-3-gymnopedies/ -->
-<AudioPlayer
-	src="https://sveltejs.github.io/assets/music/satie.mp3"
-	title="Gymnopédie no. 1"
-	composer="Erik Satie"
-	performer="Prodigal Procrastinator"
-/>
-
-<!-- https://musopen.org/music/2567-symphony-no-5-in-c-minor-op-67/ -->
-<AudioPlayer
-	src="https://sveltejs.github.io/assets/music/beethoven.mp3"
-	title="Symphony no. 5 in Cm, Op. 67 - I. Allegro con brio"
-	composer="Ludwig van Beethoven"
-	performer="European Archive"
-/>
-
-<!-- https://musopen.org/music/43683-requiem-in-d-minor-k-626/ -->
-<AudioPlayer
-	src="https://sveltejs.github.io/assets/music/mozart.mp3"
-	title="Requiem in D minor, K. 626 - III. Sequence - Lacrymosa"
-	composer="Wolfgang Amadeus Mozart"
-	performer="Markus Staab"
-/>
diff --git a/documentation/examples/18-module-context/01-module-exports/AudioPlayer.svelte b/documentation/examples/18-module-context/01-module-exports/AudioPlayer.svelte
deleted file mode 100644
index b76601e025..0000000000
--- a/documentation/examples/18-module-context/01-module-exports/AudioPlayer.svelte
+++ /dev/null
@@ -1,57 +0,0 @@
-<script context="module">
-	const elements = new Set();
-
-	export function stopAll() {
-		elements.forEach((element) => {
-			element.pause();
-		});
-	}
-</script>
-
-<script>
-	import { onMount } from 'svelte';
-
-	export let src;
-	export let title;
-	export let composer;
-	export let performer;
-
-	let audio;
-	let paused = true;
-
-	onMount(() => {
-		elements.add(audio);
-		return () => elements.delete(audio);
-	});
-
-	function stopOthers() {
-		elements.forEach((element) => {
-			if (element !== audio) element.pause();
-		});
-	}
-</script>
-
-<article class:playing={!paused}>
-	<h2>{title}</h2>
-	<p><strong>{composer}</strong> / performed by {performer}</p>
-
-	<audio bind:this={audio} bind:paused on:play={stopOthers} controls {src} />
-</article>
-
-<style>
-	article {
-		margin: 0 0 1em 0;
-		max-width: 800px;
-	}
-	h2,
-	p {
-		margin: 0 0 0.3em 0;
-	}
-	audio {
-		width: 100%;
-		margin: 0.5em 0 1em 0;
-	}
-	.playing {
-		color: #ff3e00;
-	}
-</style>
diff --git a/documentation/examples/18-module-context/01-module-exports/meta.json b/documentation/examples/18-module-context/01-module-exports/meta.json
deleted file mode 100644
index 5d718fc840..0000000000
--- a/documentation/examples/18-module-context/01-module-exports/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Named exports"
-}
diff --git a/documentation/examples/18-module-context/meta.json b/documentation/examples/18-module-context/meta.json
deleted file mode 100644
index 772fe6de40..0000000000
--- a/documentation/examples/18-module-context/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Module context"
-}
diff --git a/documentation/examples/19-debugging/00-debug/App.svelte b/documentation/examples/19-debugging/00-debug/App.svelte
deleted file mode 100644
index 30bffc896c..0000000000
--- a/documentation/examples/19-debugging/00-debug/App.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script>
-	let user = {
-		firstname: 'Ada',
-		lastname: 'Lovelace'
-	};
-</script>
-
-<input bind:value={user.firstname} />
-<input bind:value={user.lastname} />
-
-{@debug user}
-
-<h1>Hello {user.firstname}!</h1>
diff --git a/documentation/examples/19-debugging/00-debug/meta.json b/documentation/examples/19-debugging/00-debug/meta.json
deleted file mode 100644
index e899108a45..0000000000
--- a/documentation/examples/19-debugging/00-debug/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "The @debug tag"
-}
diff --git a/documentation/examples/19-debugging/meta.json b/documentation/examples/19-debugging/meta.json
deleted file mode 100644
index 5cfdfbc17d..0000000000
--- a/documentation/examples/19-debugging/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Debugging"
-}
diff --git a/documentation/examples/20-7guis/01-7guis-counter/App.svelte b/documentation/examples/20-7guis/01-7guis-counter/App.svelte
deleted file mode 100644
index 26c8c51477..0000000000
--- a/documentation/examples/20-7guis/01-7guis-counter/App.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<!-- https://eugenkiss.github.io/7guis/tasks#counter -->
-<script>
-	let count = 0;
-</script>
-
-<input type="number" bind:value={count} />
-<button on:click={() => (count += 1)}>count</button>
diff --git a/documentation/examples/20-7guis/01-7guis-counter/meta.json b/documentation/examples/20-7guis/01-7guis-counter/meta.json
deleted file mode 100644
index c7fe17ca02..0000000000
--- a/documentation/examples/20-7guis/01-7guis-counter/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Counter"
-}
diff --git a/documentation/examples/20-7guis/02-7guis-temperature/App.svelte b/documentation/examples/20-7guis/02-7guis-temperature/App.svelte
deleted file mode 100644
index e7de8eb707..0000000000
--- a/documentation/examples/20-7guis/02-7guis-temperature/App.svelte
+++ /dev/null
@@ -1,24 +0,0 @@
-<script>
-	let c = 0;
-	let f = 32;
-
-	function setBothFromC(value) {
-		c = +value;
-		f = +(32 + (9 / 5) * c).toFixed(1);
-	}
-
-	function setBothFromF(value) {
-		f = +value;
-		c = +((5 / 9) * (f - 32)).toFixed(1);
-	}
-</script>
-
-<!-- https://eugenkiss.github.io/7guis/tasks/#temp -->
-<input value={c} on:input={(e) => setBothFromC(e.target.value)} type="number" /> °C =
-<input value={f} on:input={(e) => setBothFromF(e.target.value)} type="number" /> °F
-
-<style>
-	input {
-		width: 5em;
-	}
-</style>
diff --git a/documentation/examples/20-7guis/02-7guis-temperature/meta.json b/documentation/examples/20-7guis/02-7guis-temperature/meta.json
deleted file mode 100644
index c5eacde091..0000000000
--- a/documentation/examples/20-7guis/02-7guis-temperature/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Temperature Converter"
-}
diff --git a/documentation/examples/20-7guis/03-7guis-flight-booker/App.svelte b/documentation/examples/20-7guis/03-7guis-flight-booker/App.svelte
deleted file mode 100644
index 42caebe506..0000000000
--- a/documentation/examples/20-7guis/03-7guis-flight-booker/App.svelte
+++ /dev/null
@@ -1,58 +0,0 @@
-<!-- https://eugenkiss.github.io/7guis/tasks/#flight -->
-<script>
-	const tomorrow = new Date(Date.now() + 86400000);
-
-	let start = [
-		tomorrow.getFullYear(),
-		pad(tomorrow.getMonth() + 1, 2),
-		pad(tomorrow.getDate(), 2)
-	].join('-');
-
-	let end = start;
-	let isReturn = false;
-
-	$: startDate = convertToDate(start);
-	$: endDate = convertToDate(end);
-
-	function bookFlight() {
-		const type = isReturn ? 'return' : 'one-way';
-
-		let message = `You have booked a ${type} flight, leaving ${startDate.toDateString()}`;
-		if (type === 'return') {
-			message += ` and returning ${endDate.toDateString()}`;
-		}
-
-		alert(message);
-	}
-
-	function convertToDate(str) {
-		const split = str.split('-');
-		return new Date(+split[0], +split[1] - 1, +split[2]);
-	}
-
-	function pad(x, len) {
-		x = String(x);
-		while (x.length < len) x = `0${x}`;
-		return x;
-	}
-</script>
-
-<select bind:value={isReturn}>
-	<option value={false}>one-way flight</option>
-	<option value={true}>return flight</option>
-</select>
-
-<input type="date" bind:value={start} />
-<input type="date" bind:value={end} disabled={!isReturn} />
-
-<button on:click={bookFlight} disabled={isReturn && startDate >= endDate}>book</button>
-
-<style>
-	select,
-	input,
-	button {
-		display: block;
-		margin: 0.5em 0;
-		font-size: inherit;
-	}
-</style>
diff --git a/documentation/examples/20-7guis/03-7guis-flight-booker/meta.json b/documentation/examples/20-7guis/03-7guis-flight-booker/meta.json
deleted file mode 100644
index 05abfec119..0000000000
--- a/documentation/examples/20-7guis/03-7guis-flight-booker/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Flight booker"
-}
diff --git a/documentation/examples/20-7guis/04-7guis-timer/App.svelte b/documentation/examples/20-7guis/04-7guis-timer/App.svelte
deleted file mode 100644
index 14103e424b..0000000000
--- a/documentation/examples/20-7guis/04-7guis-timer/App.svelte
+++ /dev/null
@@ -1,37 +0,0 @@
-<!-- https://eugenkiss.github.io/7guis/tasks#timer -->
-
-<script>
-	import { onMount } from 'svelte';
-
-	let elapsed = 0;
-	let duration = 5000;
-
-	onMount(() => {
-		let last_time = performance.now();
-
-		let frame = requestAnimationFrame(function update(time) {
-			frame = requestAnimationFrame(update);
-
-			elapsed += Math.min(time - last_time, duration - elapsed);
-			last_time = time;
-		});
-
-		return () => {
-			cancelAnimationFrame(frame);
-		};
-	});
-</script>
-
-<label>
-	elapsed time:
-	<progress value={elapsed / duration}></progress>
-</label>
-
-<div>{(elapsed / 1000).toFixed(1)}s</div>
-
-<label>
-	duration:
-	<input type="range" bind:value={duration} min="1" max="20000" />
-</label>
-
-<button on:click={() => (elapsed = 0)}>reset</button>
diff --git a/documentation/examples/20-7guis/04-7guis-timer/meta.json b/documentation/examples/20-7guis/04-7guis-timer/meta.json
deleted file mode 100644
index fdae7a752c..0000000000
--- a/documentation/examples/20-7guis/04-7guis-timer/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Timer"
-}
diff --git a/documentation/examples/20-7guis/05-7guis-crud/App.svelte b/documentation/examples/20-7guis/05-7guis-crud/App.svelte
deleted file mode 100644
index fbae236b9f..0000000000
--- a/documentation/examples/20-7guis/05-7guis-crud/App.svelte
+++ /dev/null
@@ -1,90 +0,0 @@
-<!-- https://eugenkiss.github.io/7guis/tasks#crud -->
-
-<script>
-	let people = [
-		{ first: 'Hans', last: 'Emil' },
-		{ first: 'Max', last: 'Mustermann' },
-		{ first: 'Roman', last: 'Tisch' }
-	];
-
-	let prefix = '';
-	let first = '';
-	let last = '';
-	let i = 0;
-
-	$: filteredPeople = prefix
-		? people.filter((person) => {
-				const name = `${person.last}, ${person.first}`;
-				return name.toLowerCase().startsWith(prefix.toLowerCase());
-			})
-		: people;
-
-	$: selected = filteredPeople[i];
-
-	$: reset_inputs(selected);
-
-	function create() {
-		people = people.concat({ first, last });
-		i = people.length - 1;
-		first = last = '';
-	}
-
-	function update() {
-		selected.first = first;
-		selected.last = last;
-		people = people;
-	}
-
-	function remove() {
-		// Remove selected person from the source array (people), not the filtered array
-		const index = people.indexOf(selected);
-		people = [...people.slice(0, index), ...people.slice(index + 1)];
-
-		first = last = '';
-		i = Math.min(i, filteredPeople.length - 2);
-	}
-
-	function reset_inputs(person) {
-		first = person ? person.first : '';
-		last = person ? person.last : '';
-	}
-</script>
-
-<input placeholder="filter prefix" bind:value={prefix} />
-
-<select bind:value={i} size={5}>
-	{#each filteredPeople as person, i}
-		<option value={i}>{person.last}, {person.first}</option>
-	{/each}
-</select>
-
-<label><input bind:value={first} placeholder="first" /></label>
-<label><input bind:value={last} placeholder="last" /></label>
-
-<div class="buttons">
-	<button on:click={create} disabled={!first || !last}>create</button>
-	<button on:click={update} disabled={!first || !last || !selected}>update</button>
-	<button on:click={remove} disabled={!selected}>delete</button>
-</div>
-
-<style>
-	* {
-		font-family: inherit;
-		font-size: inherit;
-	}
-
-	input {
-		display: block;
-		margin: 0 0 0.5em 0;
-	}
-
-	select {
-		float: left;
-		margin: 0 1em 1em 0;
-		width: 14em;
-	}
-
-	.buttons {
-		clear: both;
-	}
-</style>
diff --git a/documentation/examples/20-7guis/05-7guis-crud/meta.json b/documentation/examples/20-7guis/05-7guis-crud/meta.json
deleted file mode 100644
index 51e1ab9ef6..0000000000
--- a/documentation/examples/20-7guis/05-7guis-crud/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "CRUD"
-}
diff --git a/documentation/examples/20-7guis/06-7guis-circles/App.svelte b/documentation/examples/20-7guis/06-7guis-circles/App.svelte
deleted file mode 100644
index 12d79a1a05..0000000000
--- a/documentation/examples/20-7guis/06-7guis-circles/App.svelte
+++ /dev/null
@@ -1,129 +0,0 @@
-<!--
-https://eugenkiss.github.io/7guis/tasks#circle
-
-Click on the canvas to draw a circle. Click on a circle
-to select it. Right-click on the canvas to adjust the
-radius of the selected circle.
--->
-
-<script>
-	let i = 0;
-	let undoStack = [[]];
-	let circles = [];
-	let selected;
-	let adjusting = false;
-	let adjusted = false;
-
-	function handleClick(event) {
-		if (adjusting) {
-			adjusting = false;
-
-			// if circle was adjusted,
-			// push to the stack
-			if (adjusted) push();
-			return;
-		}
-
-		const circle = {
-			cx: event.clientX,
-			cy: event.clientY,
-			r: 50
-		};
-
-		circles = circles.concat(circle);
-		selected = circle;
-
-		push();
-	}
-
-	function adjust(event) {
-		selected.r = +event.target.value;
-		circles = circles;
-		adjusted = true;
-	}
-
-	function select(circle, event) {
-		if (!adjusting) {
-			event.stopPropagation();
-			selected = circle;
-		}
-	}
-
-	function push() {
-		const newUndoStack = undoStack.slice(0, ++i);
-		newUndoStack.push(clone(circles));
-		undoStack = newUndoStack;
-	}
-
-	function travel(d) {
-		circles = clone(undoStack[(i += d)]);
-		adjusting = false;
-	}
-
-	function clone(circles) {
-		return circles.map(({ cx, cy, r }) => ({ cx, cy, r }));
-	}
-</script>
-
-<div class="controls">
-	<button on:click={() => travel(-1)} disabled={i === 0}>undo</button>
-	<button on:click={() => travel(+1)} disabled={i === undoStack.length - 1}>redo</button>
-</div>
-<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
-<svg on:click={handleClick}>
-	{#each circles as circle}
-		<!-- svelte-ignore a11y-click-events-have-key-events -->
-		<circle
-			cx={circle.cx}
-			cy={circle.cy}
-			r={circle.r}
-			on:click={(event) => select(circle, event)}
-			on:contextmenu|stopPropagation|preventDefault={() => {
-				adjusting = !adjusting;
-				if (adjusting) selected = circle;
-			}}
-			fill={circle === selected ? '#ccc' : 'white'}
-		/>
-	{/each}
-</svg>
-
-{#if adjusting}
-	<div class="adjuster">
-		<p>adjust diameter of circle at {selected.cx}, {selected.cy}</p>
-		<input type="range" value={selected.r} on:input={adjust} />
-	</div>
-{/if}
-
-<style>
-	.controls {
-		position: absolute;
-		width: 100%;
-		text-align: center;
-	}
-
-	svg {
-		background-color: #eee;
-		width: 100%;
-		height: 100%;
-	}
-
-	circle {
-		stroke: black;
-	}
-
-	.adjuster {
-		position: absolute;
-		width: 80%;
-		top: 50%;
-		left: 50%;
-		transform: translate(-50%, -50%);
-		padding: 1em;
-		text-align: center;
-		background-color: rgba(255, 255, 255, 0.7);
-		border-radius: 4px;
-	}
-
-	input[type='range'] {
-		width: 100%;
-	}
-</style>
diff --git a/documentation/examples/20-7guis/06-7guis-circles/meta.json b/documentation/examples/20-7guis/06-7guis-circles/meta.json
deleted file mode 100644
index 963e1f9421..0000000000
--- a/documentation/examples/20-7guis/06-7guis-circles/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Circle Drawer"
-}
diff --git a/documentation/examples/20-7guis/meta.json b/documentation/examples/20-7guis/meta.json
deleted file mode 100644
index 2444946b49..0000000000
--- a/documentation/examples/20-7guis/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "7GUIs"
-}
diff --git a/documentation/examples/21-miscellaneous/01-hacker-news/App.svelte b/documentation/examples/21-miscellaneous/01-hacker-news/App.svelte
deleted file mode 100644
index e954246595..0000000000
--- a/documentation/examples/21-miscellaneous/01-hacker-news/App.svelte
+++ /dev/null
@@ -1,53 +0,0 @@
-<script>
-	import { onMount } from 'svelte';
-	import List from './List.svelte';
-	import Item from './Item.svelte';
-
-	let item;
-	let page;
-
-	async function hashchange() {
-		// the poor man's router!
-		const path = window.location.hash.slice(1);
-
-		if (path.startsWith('/item')) {
-			const id = path.slice(6);
-			item = await fetch(`https://node-hnapi.herokuapp.com/item/${id}`).then((r) => r.json());
-
-			window.scrollTo(0, 0);
-		} else if (path.startsWith('/top')) {
-			page = +path.slice(5);
-			item = null;
-		} else {
-			window.location.hash = '/top/1';
-		}
-	}
-
-	onMount(hashchange);
-</script>
-
-<svelte:window on:hashchange={hashchange} />
-
-<main>
-	{#if item}
-		<Item {item} returnTo="#/top/{page}" />
-	{:else if page}
-		<List {page} />
-	{/if}
-</main>
-
-<style>
-	main {
-		position: relative;
-		max-width: 800px;
-		margin: 0 auto;
-		min-height: 101vh;
-		padding: 1em;
-	}
-
-	main :global(.meta) {
-		color: #999;
-		font-size: 12px;
-		margin: 0 0 1em 0;
-	}
-</style>
diff --git a/documentation/examples/21-miscellaneous/01-hacker-news/Comment.svelte b/documentation/examples/21-miscellaneous/01-hacker-news/Comment.svelte
deleted file mode 100644
index 56a9c74af5..0000000000
--- a/documentation/examples/21-miscellaneous/01-hacker-news/Comment.svelte
+++ /dev/null
@@ -1,32 +0,0 @@
-<script>
-	export let comment;
-</script>
-
-<article>
-	<p class="meta">{comment.user} {comment.time_ago}</p>
-
-	{@html comment.content}
-
-	<div class="replies">
-		{#each comment.comments as child}
-			<svelte:self comment={child} />
-		{/each}
-	</div>
-</article>
-
-<style>
-	article {
-		border-top: 1px solid #eee;
-		margin: 1em 0 0 0;
-		padding: 1em 0 0 0;
-		font-size: 14px;
-	}
-
-	.meta {
-		color: #999;
-	}
-
-	.replies {
-		padding: 0 0 0 1em;
-	}
-</style>
diff --git a/documentation/examples/21-miscellaneous/01-hacker-news/Item.svelte b/documentation/examples/21-miscellaneous/01-hacker-news/Item.svelte
deleted file mode 100644
index db57a25757..0000000000
--- a/documentation/examples/21-miscellaneous/01-hacker-news/Item.svelte
+++ /dev/null
@@ -1,43 +0,0 @@
-<script>
-	import Comment from './Comment.svelte';
-
-	export let item;
-	export let returnTo;
-
-	$: url = !item.domain ? `https://news.ycombinator.com/${item.url}` : item.url;
-</script>
-
-<a href={returnTo}>&laquo; back</a>
-
-<article>
-	<a href={url}>
-		<h1>{item.title}</h1>
-		{#if item.domain}
-			<small>{item.domain}</small>
-		{/if}
-	</a>
-
-	<p class="meta">submitted by {item.user} {item.time_ago}</p>
-</article>
-
-<div class="comments">
-	{#each item.comments as comment}
-		<Comment {comment} />
-	{/each}
-</div>
-
-<style>
-	article {
-		margin: 0 0 1em 0;
-	}
-
-	a {
-		display: block;
-		margin: 0 0 1em 0;
-	}
-
-	h1 {
-		font-size: 1.4em;
-		margin: 0;
-	}
-</style>
diff --git a/documentation/examples/21-miscellaneous/01-hacker-news/List.svelte b/documentation/examples/21-miscellaneous/01-hacker-news/List.svelte
deleted file mode 100644
index e3f0b7b822..0000000000
--- a/documentation/examples/21-miscellaneous/01-hacker-news/List.svelte
+++ /dev/null
@@ -1,50 +0,0 @@
-<script>
-	import { beforeUpdate } from 'svelte';
-	import Summary from './Summary.svelte';
-
-	const PAGE_SIZE = 20;
-
-	export let page;
-
-	let items;
-	let offset;
-
-	$: fetch(`https://node-hnapi.herokuapp.com/news?page=${page}`)
-		.then((r) => r.json())
-		.then((data) => {
-			items = data;
-			offset = PAGE_SIZE * (page - 1);
-			window.scrollTo(0, 0);
-		});
-</script>
-
-{#if items}
-	{#each items as item, i}
-		<Summary {item} {i} {offset} />
-	{/each}
-
-	<a href="#/top/{page + 1}">page {page + 1}</a>
-{:else}
-	<p class="loading">loading...</p>
-{/if}
-
-<style>
-	a {
-		padding: 2em;
-		display: block;
-	}
-
-	.loading {
-		opacity: 0;
-		animation: 0.4s 0.8s forwards fade-in;
-	}
-
-	@keyframes fade-in {
-		from {
-			opacity: 0;
-		}
-		to {
-			opacity: 1;
-		}
-	}
-</style>
diff --git a/documentation/examples/21-miscellaneous/01-hacker-news/Summary.svelte b/documentation/examples/21-miscellaneous/01-hacker-news/Summary.svelte
deleted file mode 100644
index 360d2181b6..0000000000
--- a/documentation/examples/21-miscellaneous/01-hacker-news/Summary.svelte
+++ /dev/null
@@ -1,36 +0,0 @@
-<script>
-	export let item;
-	export let i;
-	export let offset;
-
-	function comment_text() {
-		const c = item.comments_count;
-		return `${c} ${c === 1 ? 'comment' : 'comments'}`;
-	}
-
-	$: url = item.type === 'ask' ? `https://news.ycombinator.com/${item.url}` : item.url;
-</script>
-
-<article>
-	<span>{i + offset + 1}</span>
-	<h2><a target="_blank" rel="noreferrer" href={url}>{item.title}</a></h2>
-	<p class="meta"><a href="#/item/{item.id}">{comment_text()}</a> by {item.user} {item.time_ago}</p>
-</article>
-
-<style>
-	article {
-		position: relative;
-		padding: 0 0 0 2em;
-		border-bottom: 1px solid #eee;
-	}
-
-	h2 {
-		font-size: 1em;
-		margin: 0.5em 0;
-	}
-
-	span {
-		position: absolute;
-		left: 0;
-	}
-</style>
diff --git a/documentation/examples/21-miscellaneous/01-hacker-news/meta.json b/documentation/examples/21-miscellaneous/01-hacker-news/meta.json
deleted file mode 100644
index e0ba23a6b7..0000000000
--- a/documentation/examples/21-miscellaneous/01-hacker-news/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Hacker News"
-}
diff --git a/documentation/examples/21-miscellaneous/02-immutable-data/App.svelte b/documentation/examples/21-miscellaneous/02-immutable-data/App.svelte
deleted file mode 100644
index f43f3bb767..0000000000
--- a/documentation/examples/21-miscellaneous/02-immutable-data/App.svelte
+++ /dev/null
@@ -1,36 +0,0 @@
-<script>
-	import ImmutableTodo from './ImmutableTodo.svelte';
-	import MutableTodo from './MutableTodo.svelte';
-
-	let todos = [
-		{ id: 1, done: true, text: 'wash the car' },
-		{ id: 2, done: false, text: 'take the dog for a walk' },
-		{ id: 3, done: false, text: 'mow the lawn' }
-	];
-
-	function toggle(id) {
-		todos = todos.map((todo) => {
-			if (todo.id === id) {
-				// return a new object
-				return {
-					id,
-					done: !todo.done,
-					text: todo.text
-				};
-			}
-
-			// return the same object
-			return todo;
-		});
-	}
-</script>
-
-<h2>Immutable</h2>
-{#each todos as todo}
-	<ImmutableTodo {todo} on:click={() => toggle(todo.id)} /><br />
-{/each}
-
-<h2>Mutable</h2>
-{#each todos as todo}
-	<MutableTodo {todo} on:click={() => toggle(todo.id)} /><br />
-{/each}
diff --git a/documentation/examples/21-miscellaneous/02-immutable-data/ImmutableTodo.svelte b/documentation/examples/21-miscellaneous/02-immutable-data/ImmutableTodo.svelte
deleted file mode 100644
index 72d3d83e6b..0000000000
--- a/documentation/examples/21-miscellaneous/02-immutable-data/ImmutableTodo.svelte
+++ /dev/null
@@ -1,30 +0,0 @@
-<svelte:options immutable />
-
-<script>
-	import { afterUpdate } from 'svelte';
-	import flash from './flash.js';
-
-	export let todo;
-
-	let btn;
-
-	afterUpdate(() => {
-		flash(btn);
-	});
-</script>
-
-<!-- the text will flash red whenever
-		the `todo` object changes -->
-<button bind:this={btn} on:click>
-	{todo.done ? '👍' : ''}
-	{todo.text}
-</button>
-
-<style>
-	button {
-		cursor: pointer;
-		border: none;
-		background: none;
-		font-size: 14px;
-	}
-</style>
diff --git a/documentation/examples/21-miscellaneous/02-immutable-data/MutableTodo.svelte b/documentation/examples/21-miscellaneous/02-immutable-data/MutableTodo.svelte
deleted file mode 100644
index d2ad294728..0000000000
--- a/documentation/examples/21-miscellaneous/02-immutable-data/MutableTodo.svelte
+++ /dev/null
@@ -1,28 +0,0 @@
-<script>
-	import { afterUpdate } from 'svelte';
-	import flash from './flash.js';
-
-	export let todo;
-
-	let btn;
-
-	afterUpdate(() => {
-		flash(btn);
-	});
-</script>
-
-<!-- the text will flash red whenever
-		the `todo` object changes -->
-<button bind:this={btn} on:click>
-	{todo.done ? '👍' : ''}
-	{todo.text}
-</button>
-
-<style>
-	button {
-		cursor: pointer;
-		border: none;
-		background: none;
-		font-size: 14px;
-	}
-</style>
diff --git a/documentation/examples/21-miscellaneous/02-immutable-data/flash.js b/documentation/examples/21-miscellaneous/02-immutable-data/flash.js
deleted file mode 100644
index 481038d009..0000000000
--- a/documentation/examples/21-miscellaneous/02-immutable-data/flash.js
+++ /dev/null
@@ -1,13 +0,0 @@
-export default function flash(element) {
-	requestAnimationFrame(() => {
-		element.style.transition = 'none';
-		element.style.color = 'rgba(255,62,0,1)';
-		element.style.backgroundColor = 'rgba(255,62,0,0.2)';
-
-		setTimeout(() => {
-			element.style.transition = 'color 1s, background 1s';
-			element.style.color = '';
-			element.style.backgroundColor = '';
-		});
-	});
-}
diff --git a/documentation/examples/21-miscellaneous/02-immutable-data/meta.json b/documentation/examples/21-miscellaneous/02-immutable-data/meta.json
deleted file mode 100644
index a896bad1b4..0000000000
--- a/documentation/examples/21-miscellaneous/02-immutable-data/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Immutable data"
-}
diff --git a/documentation/examples/21-miscellaneous/meta.json b/documentation/examples/21-miscellaneous/meta.json
deleted file mode 100644
index 1d0c05da09..0000000000
--- a/documentation/examples/21-miscellaneous/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Miscellaneous"
-}
diff --git a/documentation/examples/99-embeds/20181225-blog-svelte-css-in-js/App.svelte b/documentation/examples/99-embeds/20181225-blog-svelte-css-in-js/App.svelte
deleted file mode 100644
index a2046d0392..0000000000
--- a/documentation/examples/99-embeds/20181225-blog-svelte-css-in-js/App.svelte
+++ /dev/null
@@ -1,17 +0,0 @@
-<script>
-	import { comicSans, link } from './styles.js';
-	import Hero from './Hero.svelte';
-</script>
-
-<Hero />
-
-<div class={comicSans}>
-	<p>
-		Did you enjoy your lunch, mom? You drank it fast enough. I know, I just call her Annabelle cause
-		she's shaped like a…she's the belle of the ball! YOU'RE the Chiclet! Not me. Caw ca caw, caw ca
-		caw, caw ca caw! A Colombian cartel that WON'T kidnap and kill you. You go buy a tape recorder
-		and record yourself for a whole day. <a class={link} href="https://bluthipsum.com/"
-			>I think you'll be surprised at some of your phrasing.</a
-		>
-	</p>
-</div>
diff --git a/documentation/examples/99-embeds/20181225-blog-svelte-css-in-js/Hero.svelte b/documentation/examples/99-embeds/20181225-blog-svelte-css-in-js/Hero.svelte
deleted file mode 100644
index b59a11871a..0000000000
--- a/documentation/examples/99-embeds/20181225-blog-svelte-css-in-js/Hero.svelte
+++ /dev/null
@@ -1,15 +0,0 @@
-<script>
-	import { title, comicSans, box } from './styles.js';
-</script>
-
-<div class="{title} {comicSans}">
-	<h1>
-		<div class={box}>
-			<div class={box}>
-				<div class={box}>CSS</div>
-				in JS
-			</div>
-			in HTML
-		</div>
-	</h1>
-</div>
diff --git a/documentation/examples/99-embeds/20181225-blog-svelte-css-in-js/meta.json b/documentation/examples/99-embeds/20181225-blog-svelte-css-in-js/meta.json
deleted file mode 100644
index eaa2a1da63..0000000000
--- a/documentation/examples/99-embeds/20181225-blog-svelte-css-in-js/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "-"
-}
diff --git a/documentation/examples/99-embeds/20181225-blog-svelte-css-in-js/styles.js b/documentation/examples/99-embeds/20181225-blog-svelte-css-in-js/styles.js
deleted file mode 100644
index b54fa92763..0000000000
--- a/documentation/examples/99-embeds/20181225-blog-svelte-css-in-js/styles.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import emotion from '@emotion/css@11.1.3/dist/emotion-css.umd.min.js';
-
-const { css } = emotion;
-
-const brand = '#74D900';
-
-export const title = css`
-	color: ${brand};
-	font-size: 1em;
-	white-space: nowrap;
-`;
-
-export const comicSans = css`
-	font-family: 'Comic Sans MS', cursive;
-`;
-
-export const box = css`
-	position: relative;
-	display: inline-block;
-	border: 2px solid ${brand};
-	line-height: 1;
-	padding: 4px;
-	border-radius: 4px;
-`;
-
-export const link = css`
-	color: inherit;
-	font-weight: bold;
-	text-decoration: none;
-	border-bottom: 1px solid ${brand};
-	&:hover {
-		text-decoration: none;
-		background: ${brand};
-	}
-`;
diff --git a/documentation/examples/99-embeds/20190420-blog-write-less-code/App.svelte b/documentation/examples/99-embeds/20190420-blog-write-less-code/App.svelte
deleted file mode 100644
index 89b10d2a17..0000000000
--- a/documentation/examples/99-embeds/20190420-blog-write-less-code/App.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<script>
-	let a = 1;
-	let b = 2;
-</script>
-
-<input type="number" bind:value={a} />
-<input type="number" bind:value={b} />
-
-<p>{a} + {b} = {a + b}</p>
diff --git a/documentation/examples/99-embeds/20190420-blog-write-less-code/meta.json b/documentation/examples/99-embeds/20190420-blog-write-less-code/meta.json
deleted file mode 100644
index eaa2a1da63..0000000000
--- a/documentation/examples/99-embeds/20190420-blog-write-less-code/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "-"
-}
diff --git a/documentation/examples/99-embeds/meta.json b/documentation/examples/99-embeds/meta.json
deleted file mode 100644
index 0967ef424b..0000000000
--- a/documentation/examples/99-embeds/meta.json
+++ /dev/null
@@ -1 +0,0 @@
-{}
diff --git a/documentation/tutorial/01-introduction/01-basics/app-a/App.svelte b/documentation/tutorial/01-introduction/01-basics/app-a/App.svelte
deleted file mode 100644
index 597ecf5fc4..0000000000
--- a/documentation/tutorial/01-introduction/01-basics/app-a/App.svelte
+++ /dev/null
@@ -1 +0,0 @@
-<h1>Hello world!</h1>
diff --git a/documentation/tutorial/01-introduction/01-basics/text.md b/documentation/tutorial/01-introduction/01-basics/text.md
deleted file mode 100644
index 3846be53e4..0000000000
--- a/documentation/tutorial/01-introduction/01-basics/text.md
+++ /dev/null
@@ -1,29 +0,0 @@
----
-title: Basics
----
-
-Welcome to the Svelte tutorial. This will teach you everything you need to know to build fast, small web applications easily.
-
-You can also consult the [API docs](/docs) and the [examples](/examples), or — if you're impatient to start hacking on your machine locally — the [60-second quickstart](/docs/introduction).
-
-## What is Svelte?
-
-Svelte is a tool for building fast web applications.
-
-It is similar to JavaScript frameworks such as React and Vue, which share a goal of making it easy to build slick interactive user interfaces.
-
-But there's a crucial difference: Svelte converts your app into ideal JavaScript at _build time_, rather than interpreting your application code at _run time_. This means you don't pay the performance cost of the framework's abstractions, and you don't incur a penalty when your app first loads.
-
-You can build your entire app with Svelte, or you can add it incrementally to an existing codebase. You can also ship components as standalone packages that work anywhere, without the overhead of a dependency on a conventional framework.
-
-## How to use this tutorial
-
-You'll need to have basic familiarity with HTML, CSS and JavaScript to understand Svelte.
-
-As you progress through the tutorial, you'll be presented with mini exercises designed to illustrate new features. Later chapters build on the knowledge gained in earlier ones, so it's recommended that you go from start to finish. If necessary, you can navigate via the dropdown above (click 'Introduction / Basics').
-
-Each tutorial chapter will have a 'Show me' button that you can click if you get stuck following the instructions. Try not to rely on it too much; you will learn faster by figuring out where to put each suggested code block and manually typing it into the editor.
-
-## Understanding components
-
-In Svelte, an application is composed from one or more _components_. A component is a reusable self-contained block of code that encapsulates HTML, CSS and JavaScript that belong together, written into a `.svelte` file. The 'hello world' example in the code editor is a simple component.
diff --git a/documentation/tutorial/01-introduction/02-adding-data/app-a/App.svelte b/documentation/tutorial/01-introduction/02-adding-data/app-a/App.svelte
deleted file mode 100644
index 597ecf5fc4..0000000000
--- a/documentation/tutorial/01-introduction/02-adding-data/app-a/App.svelte
+++ /dev/null
@@ -1 +0,0 @@
-<h1>Hello world!</h1>
diff --git a/documentation/tutorial/01-introduction/02-adding-data/app-b/App.svelte b/documentation/tutorial/01-introduction/02-adding-data/app-b/App.svelte
deleted file mode 100644
index 5c48373a2a..0000000000
--- a/documentation/tutorial/01-introduction/02-adding-data/app-b/App.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<script>
-	let name = 'world';
-</script>
-
-<h1>Hello {name.toUpperCase()}!</h1>
diff --git a/documentation/tutorial/01-introduction/02-adding-data/text.md b/documentation/tutorial/01-introduction/02-adding-data/text.md
deleted file mode 100644
index 695d97a84f..0000000000
--- a/documentation/tutorial/01-introduction/02-adding-data/text.md
+++ /dev/null
@@ -1,23 +0,0 @@
----
-title: Adding data
----
-
-A component that just renders some static markup isn't very interesting. Let's add some data.
-
-First, add a script tag to your component and declare a `name` variable:
-
-```svelte
-<script>
-	let name = 'world';
-</script>
-
-<h1>Hello world!</h1>
-```
-
-Then, we can refer to `name` in the markup:
-
-```svelte
-<h1>Hello {name}!</h1>
-```
-
-Inside the curly braces, we can put any JavaScript we want. Try changing `name` to `name.toUpperCase()` for a shoutier greeting.
diff --git a/documentation/tutorial/01-introduction/03-dynamic-attributes/app-a/App.svelte b/documentation/tutorial/01-introduction/03-dynamic-attributes/app-a/App.svelte
deleted file mode 100644
index 94db39ab72..0000000000
--- a/documentation/tutorial/01-introduction/03-dynamic-attributes/app-a/App.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<script>
-	let src = '/tutorial/image.gif';
-</script>
-
-<img />
diff --git a/documentation/tutorial/01-introduction/03-dynamic-attributes/app-b/App.svelte b/documentation/tutorial/01-introduction/03-dynamic-attributes/app-b/App.svelte
deleted file mode 100644
index 1ef6d8c326..0000000000
--- a/documentation/tutorial/01-introduction/03-dynamic-attributes/app-b/App.svelte
+++ /dev/null
@@ -1,6 +0,0 @@
-<script>
-	let src = '/tutorial/image.gif';
-	let name = 'Rick Astley';
-</script>
-
-<img {src} alt="{name} dances." />
diff --git a/documentation/tutorial/01-introduction/03-dynamic-attributes/text.md b/documentation/tutorial/01-introduction/03-dynamic-attributes/text.md
deleted file mode 100644
index 5211869504..0000000000
--- a/documentation/tutorial/01-introduction/03-dynamic-attributes/text.md
+++ /dev/null
@@ -1,35 +0,0 @@
----
-title: Dynamic attributes
----
-
-You can use curly braces to control element attributes, just like you use them to control text.
-
-Our image is missing a `src` attribute — let's add one:
-
-<!-- prettier-ignore -->
-```svelte
-<img src={src} />
-```
-
-That's better. But Svelte is giving us a warning:
-
-> A11y: &lt;img&gt; element should have an alt attribute
-
-When building web apps, it's important to make sure that they're _accessible_ to the broadest possible userbase, including people with (for example) impaired vision or motion, or people without powerful hardware or good internet connections. Accessibility (shortened to a11y) isn't always easy to get right, but Svelte will help by warning you if you write inaccessible markup.
-
-In this case, we're missing the `alt` attribute that describes the image for people using screenreaders, or people with slow or flaky internet connections that can't download the image. Let's add one:
-
-<!-- prettier-ignore -->
-```svelte
-<img src={src} alt="A man dances." />
-```
-
-We can use curly braces _inside_ attributes. Try changing it to `"{name} dances."` — remember to declare a `name` variable in the `<script>` block.
-
-## Shorthand attributes
-
-It's not uncommon to have an attribute where the name and value are the same, like `src={src}`. Svelte gives us a convenient shorthand for these cases:
-
-```svelte
-<img {src} alt="A man dances." />
-```
diff --git a/documentation/tutorial/01-introduction/04-styling/app-a/App.svelte b/documentation/tutorial/01-introduction/04-styling/app-a/App.svelte
deleted file mode 100644
index 672b0e96c7..0000000000
--- a/documentation/tutorial/01-introduction/04-styling/app-a/App.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<p>This is a paragraph.</p>
-
-<style>
-	/* Write your CSS here */
-</style>
diff --git a/documentation/tutorial/01-introduction/04-styling/app-b/App.svelte b/documentation/tutorial/01-introduction/04-styling/app-b/App.svelte
deleted file mode 100644
index a6451a008a..0000000000
--- a/documentation/tutorial/01-introduction/04-styling/app-b/App.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<p>This is a paragraph.</p>
-
-<style>
-	p {
-		color: purple;
-		font-family: 'Comic Sans MS', cursive;
-		font-size: 2em;
-	}
-</style>
diff --git a/documentation/tutorial/01-introduction/04-styling/text.md b/documentation/tutorial/01-introduction/04-styling/text.md
deleted file mode 100644
index 41ab8c47fb..0000000000
--- a/documentation/tutorial/01-introduction/04-styling/text.md
+++ /dev/null
@@ -1,19 +0,0 @@
----
-title: Styling
----
-
-Just like in HTML, you can add a `<style>` tag to your component. Let's add some styles to the `<p>` element:
-
-```svelte
-<p>This is a paragraph.</p>
-
-<style>
-	p {
-		color: purple;
-		font-family: 'Comic Sans MS', cursive;
-		font-size: 2em;
-	}
-</style>
-```
-
-Importantly, these rules are _scoped to the component_. You won't accidentally change the style of `<p>` elements elsewhere in your app, as we'll see in the next step.
diff --git a/documentation/tutorial/01-introduction/05-nested-components/app-a/App.svelte b/documentation/tutorial/01-introduction/05-nested-components/app-a/App.svelte
deleted file mode 100644
index a6451a008a..0000000000
--- a/documentation/tutorial/01-introduction/05-nested-components/app-a/App.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<p>This is a paragraph.</p>
-
-<style>
-	p {
-		color: purple;
-		font-family: 'Comic Sans MS', cursive;
-		font-size: 2em;
-	}
-</style>
diff --git a/documentation/tutorial/01-introduction/05-nested-components/app-a/Nested.svelte b/documentation/tutorial/01-introduction/05-nested-components/app-a/Nested.svelte
deleted file mode 100644
index 83fe98d1d9..0000000000
--- a/documentation/tutorial/01-introduction/05-nested-components/app-a/Nested.svelte
+++ /dev/null
@@ -1 +0,0 @@
-<p>This is another paragraph.</p>
diff --git a/documentation/tutorial/01-introduction/05-nested-components/app-b/App.svelte b/documentation/tutorial/01-introduction/05-nested-components/app-b/App.svelte
deleted file mode 100644
index 8319b69efa..0000000000
--- a/documentation/tutorial/01-introduction/05-nested-components/app-b/App.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<script>
-	import Nested from './Nested.svelte';
-</script>
-
-<p>This is a paragraph.</p>
-<Nested />
-
-<style>
-	p {
-		color: purple;
-		font-family: 'Comic Sans MS', cursive;
-		font-size: 2em;
-	}
-</style>
diff --git a/documentation/tutorial/01-introduction/05-nested-components/app-b/Nested.svelte b/documentation/tutorial/01-introduction/05-nested-components/app-b/Nested.svelte
deleted file mode 100644
index 83fe98d1d9..0000000000
--- a/documentation/tutorial/01-introduction/05-nested-components/app-b/Nested.svelte
+++ /dev/null
@@ -1 +0,0 @@
-<p>This is another paragraph.</p>
diff --git a/documentation/tutorial/01-introduction/05-nested-components/text.md b/documentation/tutorial/01-introduction/05-nested-components/text.md
deleted file mode 100644
index 3259cedb20..0000000000
--- a/documentation/tutorial/01-introduction/05-nested-components/text.md
+++ /dev/null
@@ -1,28 +0,0 @@
----
-title: Nested components
----
-
-It would be impractical to put your entire app in a single component. Instead, we can import components from other files and then use them as though we were including elements.
-
-We now present you 2 files in the editor on the right (upper bar) to click on, `App.svelte` and `Nested.svelte`.
-
-Each `.svelte` file holds a component that is a reusable self-contained block of code that encapsulates HTML, CSS, and JavaScript that belong together.
-
-Let's add a `<script>` tag to `App.svelte` that imports the file (our component) `Nested.svelte` into our app...
-
-```svelte
-<script>
-	import Nested from './Nested.svelte';
-</script>
-```
-
-...then use component `Nested` in the app markup:
-
-```svelte
-<p>This is a paragraph.</p>
-<Nested />
-```
-
-Notice that even though `Nested.svelte` has a `<p>` element, the styles from `App.svelte` don't leak in.
-
-Also notice that the component name `Nested` is capitalised. This convention has been adopted to allow us to differentiate between user-defined components and regular HTML tags.
diff --git a/documentation/tutorial/01-introduction/06-making-an-app/app-a/App.svelte b/documentation/tutorial/01-introduction/06-making-an-app/app-a/App.svelte
deleted file mode 100644
index 90035cbf1d..0000000000
--- a/documentation/tutorial/01-introduction/06-making-an-app/app-a/App.svelte
+++ /dev/null
@@ -1 +0,0 @@
-<h1>What now?</h1>
diff --git a/documentation/tutorial/01-introduction/06-making-an-app/text.md b/documentation/tutorial/01-introduction/06-making-an-app/text.md
deleted file mode 100644
index 297a5bff01..0000000000
--- a/documentation/tutorial/01-introduction/06-making-an-app/text.md
+++ /dev/null
@@ -1,37 +0,0 @@
----
-title: Making an app
----
-
-This tutorial is designed to get you familiar with the process of writing components. But at some point, you'll want to start writing components in the comfort of your own text editor.
-
-First, you'll need to integrate Svelte with a build tool. We recommend using [SvelteKit](https://kit.svelte.dev), which sets up [Vite](https://vitejs.dev/) with [vite-plugin-svelte](https://github.com/sveltejs/vite-plugin-svelte/) for you...
-
-```bash
-npx sv create myapp
-```
-
-There are also a number of [community-maintained integrations](https://sveltesociety.dev/tools).
-
-Don't worry if you're relatively new to web development and haven't used these tools before. We've prepared a simple step-by-step guide, [Svelte for new developers](/blog/svelte-for-new-developers), which walks you through the process.
-
-You'll also want to configure your text editor. There are [plugins](https://sveltesociety.dev/tools#editor-support) for many popular editors as well as an official [VS Code extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
-
-<!--
-NOTE: Removed until we have better place for setting-up-your-editor guide. See https://github.com/sveltejs/svelte/pull/7310#issuecomment-1049923609
-If your editor does not have a Svelte plugin then you can follow [this guide](/blog/setting-up-your-editor) to configure your text editor to treat `.svelte` files the same as `.html` for the sake of syntax highlighting. -->
-
-Then, once you've got your project set up, using Svelte components is easy. The compiler turns each component into a regular JavaScript class — just import it and instantiate with `new`:
-
-```js
-import App from './App.svelte';
-
-const app = new App({
-	target: document.body,
-	props: {
-		// we'll learn about props later
-		answer: 42
-	}
-});
-```
-
-You can then interact with `app` using the [component API](/docs/client-side-component-api) if you need to.
diff --git a/documentation/tutorial/01-introduction/meta.json b/documentation/tutorial/01-introduction/meta.json
deleted file mode 100644
index fd70acd694..0000000000
--- a/documentation/tutorial/01-introduction/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Introduction"
-}
diff --git a/documentation/tutorial/02-reactivity/01-reactive-assignments/app-a/App.svelte b/documentation/tutorial/02-reactivity/01-reactive-assignments/app-a/App.svelte
deleted file mode 100644
index 76483b567a..0000000000
--- a/documentation/tutorial/02-reactivity/01-reactive-assignments/app-a/App.svelte
+++ /dev/null
@@ -1,18 +0,0 @@
-<script>
-	let count = 0;
-
-	function incrementCount() {
-		// event handler code goes here
-	}
-</script>
-
-<button>
-	Clicked {count}
-	{count === 1 ? 'time' : 'times'}
-</button>
-
-<style>
-	button {
-		width: 200px;
-	}
-</style>
diff --git a/documentation/tutorial/02-reactivity/01-reactive-assignments/app-b/App.svelte b/documentation/tutorial/02-reactivity/01-reactive-assignments/app-b/App.svelte
deleted file mode 100644
index 17e7c07312..0000000000
--- a/documentation/tutorial/02-reactivity/01-reactive-assignments/app-b/App.svelte
+++ /dev/null
@@ -1,18 +0,0 @@
-<script>
-	let count = 0;
-
-	function incrementCount() {
-		count += 1;
-	}
-</script>
-
-<button on:click={incrementCount}>
-	Clicked {count}
-	{count === 1 ? 'time' : 'times'}
-</button>
-
-<style>
-	button {
-		width: 200px;
-	}
-</style>
diff --git a/documentation/tutorial/02-reactivity/01-reactive-assignments/text.md b/documentation/tutorial/02-reactivity/01-reactive-assignments/text.md
deleted file mode 100644
index 6122906b0a..0000000000
--- a/documentation/tutorial/02-reactivity/01-reactive-assignments/text.md
+++ /dev/null
@@ -1,21 +0,0 @@
----
-title: Assignments
----
-
-At the heart of Svelte is a powerful system of _reactivity_ for keeping the DOM in sync with your application state — for example, in response to an event.
-
-To demonstrate it, we first need to wire up an event handler. Replace line 9 with this:
-
-```svelte
-<button on:click={incrementCount}>
-```
-
-Inside the `incrementCount` function, all we need to do is change the value of `count`:
-
-```js
-function incrementCount() {
-	count += 1;
-}
-```
-
-Svelte 'instruments' this assignment with some code that tells it the DOM will need to be updated.
diff --git a/documentation/tutorial/02-reactivity/02-reactive-declarations/app-a/App.svelte b/documentation/tutorial/02-reactivity/02-reactive-declarations/app-a/App.svelte
deleted file mode 100644
index 6d78f949e1..0000000000
--- a/documentation/tutorial/02-reactivity/02-reactive-declarations/app-a/App.svelte
+++ /dev/null
@@ -1,12 +0,0 @@
-<script>
-	let count = 0;
-
-	function handleClick() {
-		count += 1;
-	}
-</script>
-
-<button on:click={handleClick}>
-	Clicked {count}
-	{count === 1 ? 'time' : 'times'}
-</button>
diff --git a/documentation/tutorial/02-reactivity/02-reactive-declarations/app-b/App.svelte b/documentation/tutorial/02-reactivity/02-reactive-declarations/app-b/App.svelte
deleted file mode 100644
index d031bc1879..0000000000
--- a/documentation/tutorial/02-reactivity/02-reactive-declarations/app-b/App.svelte
+++ /dev/null
@@ -1,15 +0,0 @@
-<script>
-	let count = 0;
-	$: doubled = count * 2;
-
-	function handleClick() {
-		count += 1;
-	}
-</script>
-
-<button on:click={handleClick}>
-	Clicked {count}
-	{count === 1 ? 'time' : 'times'}
-</button>
-
-<p>{count} doubled is {doubled}</p>
diff --git a/documentation/tutorial/02-reactivity/02-reactive-declarations/text.md b/documentation/tutorial/02-reactivity/02-reactive-declarations/text.md
deleted file mode 100644
index f00fcade39..0000000000
--- a/documentation/tutorial/02-reactivity/02-reactive-declarations/text.md
+++ /dev/null
@@ -1,20 +0,0 @@
----
-title: Declarations
----
-
-Svelte's reactivity not only keeps the DOM in sync with your application's variables as shown in the previous section, it can also keep variables in sync with each other using reactive declarations. They look like this:
-
-```js
-let count = 0;
-$: doubled = count * 2;
-```
-
-> Don't worry if this looks a little alien. It's [valid](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/label) (if unconventional) JavaScript, which Svelte interprets to mean 're-run this code whenever any of the referenced values change'. Once you get used to it, there's no going back.
-
-Let's use `doubled` in our markup:
-
-```svelte
-<p>{count} doubled is {doubled}</p>
-```
-
-Of course, you could just write `{count * 2}` in the markup instead — you don't have to use reactive values. Reactive values become particularly valuable when you need to reference them multiple times, or you have values that depend on _other_ reactive values.
diff --git a/documentation/tutorial/02-reactivity/03-reactive-statements/app-a/App.svelte b/documentation/tutorial/02-reactivity/03-reactive-statements/app-a/App.svelte
deleted file mode 100644
index 6d78f949e1..0000000000
--- a/documentation/tutorial/02-reactivity/03-reactive-statements/app-a/App.svelte
+++ /dev/null
@@ -1,12 +0,0 @@
-<script>
-	let count = 0;
-
-	function handleClick() {
-		count += 1;
-	}
-</script>
-
-<button on:click={handleClick}>
-	Clicked {count}
-	{count === 1 ? 'time' : 'times'}
-</button>
diff --git a/documentation/tutorial/02-reactivity/03-reactive-statements/app-b/App.svelte b/documentation/tutorial/02-reactivity/03-reactive-statements/app-b/App.svelte
deleted file mode 100644
index 8d6f7aded5..0000000000
--- a/documentation/tutorial/02-reactivity/03-reactive-statements/app-b/App.svelte
+++ /dev/null
@@ -1,17 +0,0 @@
-<script>
-	let count = 0;
-
-	$: if (count >= 10) {
-		alert('count is dangerously high!');
-		count = 9;
-	}
-
-	function handleClick() {
-		count += 1;
-	}
-</script>
-
-<button on:click={handleClick}>
-	Clicked {count}
-	{count === 1 ? 'time' : 'times'}
-</button>
diff --git a/documentation/tutorial/02-reactivity/03-reactive-statements/text.md b/documentation/tutorial/02-reactivity/03-reactive-statements/text.md
deleted file mode 100644
index c2715ca473..0000000000
--- a/documentation/tutorial/02-reactivity/03-reactive-statements/text.md
+++ /dev/null
@@ -1,27 +0,0 @@
----
-title: Statements
----
-
-We're not limited to declaring reactive _values_ — we can also run arbitrary _statements_ reactively. For example, we can log the value of `count` whenever it changes:
-
-```js
-$: console.log('the count is ' + count);
-```
-
-You can easily group statements together with a block:
-
-```js
-$: {
-	console.log('the count is ' + count);
-	alert('I SAID THE COUNT IS ' + count);
-}
-```
-
-You can even put the `$:` in front of things like `if` blocks:
-
-```js
-$: if (count >= 10) {
-	alert('count is dangerously high!');
-	count = 9;
-}
-```
diff --git a/documentation/tutorial/02-reactivity/04-updating-arrays-and-objects/app-a/App.svelte b/documentation/tutorial/02-reactivity/04-updating-arrays-and-objects/app-a/App.svelte
deleted file mode 100644
index 5b55360fe3..0000000000
--- a/documentation/tutorial/02-reactivity/04-updating-arrays-and-objects/app-a/App.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script>
-	let numbers = [1, 2, 3, 4];
-
-	function addNumber() {
-		numbers.push(numbers.length + 1);
-	}
-
-	$: sum = numbers.reduce((t, n) => t + n, 0);
-</script>
-
-<p>{numbers.join(' + ')} = {sum}</p>
-
-<button on:click={addNumber}> Add a number </button>
diff --git a/documentation/tutorial/02-reactivity/04-updating-arrays-and-objects/app-b/App.svelte b/documentation/tutorial/02-reactivity/04-updating-arrays-and-objects/app-b/App.svelte
deleted file mode 100644
index f8583940fc..0000000000
--- a/documentation/tutorial/02-reactivity/04-updating-arrays-and-objects/app-b/App.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script>
-	let numbers = [1, 2, 3, 4];
-
-	function addNumber() {
-		numbers = [...numbers, numbers.length + 1];
-	}
-
-	$: sum = numbers.reduce((t, n) => t + n, 0);
-</script>
-
-<p>{numbers.join(' + ')} = {sum}</p>
-
-<button on:click={addNumber}> Add a number </button>
diff --git a/documentation/tutorial/02-reactivity/04-updating-arrays-and-objects/text.md b/documentation/tutorial/02-reactivity/04-updating-arrays-and-objects/text.md
deleted file mode 100644
index 3ca961027d..0000000000
--- a/documentation/tutorial/02-reactivity/04-updating-arrays-and-objects/text.md
+++ /dev/null
@@ -1,54 +0,0 @@
----
-title: Updating arrays and objects
----
-
-Svelte's reactivity is triggered by assignments. Methods that mutate arrays or objects will not trigger updates by themselves.
-
-In this example, clicking the "Add a number" button calls the `addNumber` function, which appends a number to the array but doesn't trigger the recalculation of `sum`.
-
-One way to fix that is to assign `numbers` to itself to tell the compiler it has changed:
-
-```js
-function addNumber() {
-	numbers.push(numbers.length + 1);
-	numbers = numbers;
-}
-```
-
-You could also write this more concisely using the ES6 spread syntax:
-
-```js
-function addNumber() {
-	numbers = [...numbers, numbers.length + 1];
-}
-```
-
-The same rule applies to array methods such as `pop`, `shift`, and `splice` and to object methods such as `Map.set`, `Set.add`, etc.
-
-Assignments to _properties_ of arrays and objects — e.g. `obj.foo += 1` or `array[i] = x` — work the same way as assignments to the values themselves.
-
-```js
-function addNumber() {
-	numbers[numbers.length] = numbers.length + 1;
-}
-```
-
-However, indirect assignments to references such as this...
-
-```js
-const foo = obj.foo;
-foo.bar = 'baz';
-```
-
-or
-
-```js
-function quox(thing) {
-	thing.foo.bar = 'baz';
-}
-quox(obj);
-```
-
-...won't trigger reactivity on `obj.foo.bar`, unless you follow it up with `obj = obj`.
-
-A simple rule of thumb: the updated variable must directly appear on the left hand side of the assignment.
diff --git a/documentation/tutorial/02-reactivity/meta.json b/documentation/tutorial/02-reactivity/meta.json
deleted file mode 100644
index fe8d63b26d..0000000000
--- a/documentation/tutorial/02-reactivity/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Reactivity"
-}
diff --git a/documentation/tutorial/03-props/01-declaring-props/app-a/App.svelte b/documentation/tutorial/03-props/01-declaring-props/app-a/App.svelte
deleted file mode 100644
index f64b69a87c..0000000000
--- a/documentation/tutorial/03-props/01-declaring-props/app-a/App.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<script>
-	import Nested from './Nested.svelte';
-</script>
-
-<Nested answer={42} />
diff --git a/documentation/tutorial/03-props/01-declaring-props/app-a/Nested.svelte b/documentation/tutorial/03-props/01-declaring-props/app-a/Nested.svelte
deleted file mode 100644
index 141cae3230..0000000000
--- a/documentation/tutorial/03-props/01-declaring-props/app-a/Nested.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<script>
-	let answer;
-</script>
-
-<p>The answer is {answer}</p>
diff --git a/documentation/tutorial/03-props/01-declaring-props/app-b/App.svelte b/documentation/tutorial/03-props/01-declaring-props/app-b/App.svelte
deleted file mode 100644
index f64b69a87c..0000000000
--- a/documentation/tutorial/03-props/01-declaring-props/app-b/App.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<script>
-	import Nested from './Nested.svelte';
-</script>
-
-<Nested answer={42} />
diff --git a/documentation/tutorial/03-props/01-declaring-props/app-b/Nested.svelte b/documentation/tutorial/03-props/01-declaring-props/app-b/Nested.svelte
deleted file mode 100644
index 7267c0edea..0000000000
--- a/documentation/tutorial/03-props/01-declaring-props/app-b/Nested.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<script>
-	export let answer;
-</script>
-
-<p>The answer is {answer}</p>
diff --git a/documentation/tutorial/03-props/01-declaring-props/text.md b/documentation/tutorial/03-props/01-declaring-props/text.md
deleted file mode 100644
index dbf13d1e2a..0000000000
--- a/documentation/tutorial/03-props/01-declaring-props/text.md
+++ /dev/null
@@ -1,15 +0,0 @@
----
-title: Declaring props
----
-
-So far, we've dealt exclusively with internal state — that is to say, the values are only accessible within a given component.
-
-In any real application, you'll need to pass data from one component down to its children. To do that, we need to declare _properties_, generally shortened to 'props'. In Svelte, we do that with the `export` keyword. Edit the `Nested.svelte` component:
-
-```svelte
-<script>
-	export let answer;
-</script>
-```
-
-> Just like `$:`, this may feel a little weird at first. That's not how `export` normally works in JavaScript modules! Just roll with it for now — it'll soon become second nature.
diff --git a/documentation/tutorial/03-props/02-default-values/app-a/App.svelte b/documentation/tutorial/03-props/02-default-values/app-a/App.svelte
deleted file mode 100644
index f64b69a87c..0000000000
--- a/documentation/tutorial/03-props/02-default-values/app-a/App.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<script>
-	import Nested from './Nested.svelte';
-</script>
-
-<Nested answer={42} />
diff --git a/documentation/tutorial/03-props/02-default-values/app-a/Nested.svelte b/documentation/tutorial/03-props/02-default-values/app-a/Nested.svelte
deleted file mode 100644
index 7267c0edea..0000000000
--- a/documentation/tutorial/03-props/02-default-values/app-a/Nested.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<script>
-	export let answer;
-</script>
-
-<p>The answer is {answer}</p>
diff --git a/documentation/tutorial/03-props/02-default-values/app-b/App.svelte b/documentation/tutorial/03-props/02-default-values/app-b/App.svelte
deleted file mode 100644
index 27e880eb5c..0000000000
--- a/documentation/tutorial/03-props/02-default-values/app-b/App.svelte
+++ /dev/null
@@ -1,6 +0,0 @@
-<script>
-	import Nested from './Nested.svelte';
-</script>
-
-<Nested answer={42} />
-<Nested />
diff --git a/documentation/tutorial/03-props/02-default-values/app-b/Nested.svelte b/documentation/tutorial/03-props/02-default-values/app-b/Nested.svelte
deleted file mode 100644
index 3efe9ccb75..0000000000
--- a/documentation/tutorial/03-props/02-default-values/app-b/Nested.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<script>
-	export let answer = 'a mystery';
-</script>
-
-<p>The answer is {answer}</p>
diff --git a/documentation/tutorial/03-props/02-default-values/text.md b/documentation/tutorial/03-props/02-default-values/text.md
deleted file mode 100644
index 47a7502c06..0000000000
--- a/documentation/tutorial/03-props/02-default-values/text.md
+++ /dev/null
@@ -1,18 +0,0 @@
----
-title: Default values
----
-
-We can easily specify default values for props in `Nested.svelte`:
-
-```svelte
-<script>
-	export let answer = 'a mystery';
-</script>
-```
-
-If we now add a second component _without_ an `answer` prop, it will fall back to the default:
-
-```svelte
-<Nested answer={42} />
-<Nested />
-```
diff --git a/documentation/tutorial/03-props/03-spread-props/app-a/App.svelte b/documentation/tutorial/03-props/03-spread-props/app-a/App.svelte
deleted file mode 100644
index 448895faf2..0000000000
--- a/documentation/tutorial/03-props/03-spread-props/app-a/App.svelte
+++ /dev/null
@@ -1,12 +0,0 @@
-<script>
-	import Info from './Info.svelte';
-
-	const pkg = {
-		name: 'svelte',
-		version: 3,
-		speed: 'blazing',
-		website: 'https://svelte.dev'
-	};
-</script>
-
-<Info name={pkg.name} version={pkg.version} speed={pkg.speed} website={pkg.website} />
diff --git a/documentation/tutorial/03-props/03-spread-props/app-a/Info.svelte b/documentation/tutorial/03-props/03-spread-props/app-a/Info.svelte
deleted file mode 100644
index 241b84a9af..0000000000
--- a/documentation/tutorial/03-props/03-spread-props/app-a/Info.svelte
+++ /dev/null
@@ -1,12 +0,0 @@
-<script>
-	export let name;
-	export let version;
-	export let speed;
-	export let website;
-</script>
-
-<p>
-	The <code>{name}</code> package is {speed} fast. Download version {version} from
-	<a href="https://www.npmjs.com/package/{name}">npm</a>
-	and <a href={website}>learn more here</a>
-</p>
diff --git a/documentation/tutorial/03-props/03-spread-props/app-b/App.svelte b/documentation/tutorial/03-props/03-spread-props/app-b/App.svelte
deleted file mode 100644
index d2f97713d1..0000000000
--- a/documentation/tutorial/03-props/03-spread-props/app-b/App.svelte
+++ /dev/null
@@ -1,12 +0,0 @@
-<script>
-	import Info from './Info.svelte';
-
-	const pkg = {
-		name: 'svelte',
-		version: 3,
-		speed: 'blazing',
-		website: 'https://svelte.dev'
-	};
-</script>
-
-<Info {...pkg} />
diff --git a/documentation/tutorial/03-props/03-spread-props/app-b/Info.svelte b/documentation/tutorial/03-props/03-spread-props/app-b/Info.svelte
deleted file mode 100644
index 241b84a9af..0000000000
--- a/documentation/tutorial/03-props/03-spread-props/app-b/Info.svelte
+++ /dev/null
@@ -1,12 +0,0 @@
-<script>
-	export let name;
-	export let version;
-	export let speed;
-	export let website;
-</script>
-
-<p>
-	The <code>{name}</code> package is {speed} fast. Download version {version} from
-	<a href="https://www.npmjs.com/package/{name}">npm</a>
-	and <a href={website}>learn more here</a>
-</p>
diff --git a/documentation/tutorial/03-props/03-spread-props/text.md b/documentation/tutorial/03-props/03-spread-props/text.md
deleted file mode 100644
index 0730110754..0000000000
--- a/documentation/tutorial/03-props/03-spread-props/text.md
+++ /dev/null
@@ -1,11 +0,0 @@
----
-title: Spread props
----
-
-If you have an object of properties, you can 'spread' them onto a component instead of specifying each one:
-
-```svelte
-<Info {...pkg} />
-```
-
-> Conversely, if you need to reference all the props that were passed into a component, including ones that weren't declared with `export`, you can do so by accessing `$$props` directly. It's not generally recommended, as it's difficult for Svelte to optimise, but it's useful in rare cases.
diff --git a/documentation/tutorial/03-props/meta.json b/documentation/tutorial/03-props/meta.json
deleted file mode 100644
index d03965c7cb..0000000000
--- a/documentation/tutorial/03-props/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Props"
-}
diff --git a/documentation/tutorial/04-logic/01-if-blocks/app-a/App.svelte b/documentation/tutorial/04-logic/01-if-blocks/app-a/App.svelte
deleted file mode 100644
index a68a0b1219..0000000000
--- a/documentation/tutorial/04-logic/01-if-blocks/app-a/App.svelte
+++ /dev/null
@@ -1,11 +0,0 @@
-<script>
-	let user = { loggedIn: false };
-
-	function toggle() {
-		user.loggedIn = !user.loggedIn;
-	}
-</script>
-
-<button on:click={toggle}> Log out </button>
-
-<button on:click={toggle}> Log in </button>
diff --git a/documentation/tutorial/04-logic/01-if-blocks/app-b/App.svelte b/documentation/tutorial/04-logic/01-if-blocks/app-b/App.svelte
deleted file mode 100644
index d986710847..0000000000
--- a/documentation/tutorial/04-logic/01-if-blocks/app-b/App.svelte
+++ /dev/null
@@ -1,15 +0,0 @@
-<script>
-	let user = { loggedIn: false };
-
-	function toggle() {
-		user.loggedIn = !user.loggedIn;
-	}
-</script>
-
-{#if user.loggedIn}
-	<button on:click={toggle}> Log out </button>
-{/if}
-
-{#if !user.loggedIn}
-	<button on:click={toggle}> Log in </button>
-{/if}
diff --git a/documentation/tutorial/04-logic/01-if-blocks/text.md b/documentation/tutorial/04-logic/01-if-blocks/text.md
deleted file mode 100644
index 9b45e65fc2..0000000000
--- a/documentation/tutorial/04-logic/01-if-blocks/text.md
+++ /dev/null
@@ -1,19 +0,0 @@
----
-title: If blocks
----
-
-HTML doesn't have a way of expressing _logic_, like conditionals and loops. Svelte does.
-
-To conditionally render some markup, we wrap it in an `if` block:
-
-```svelte
-{#if user.loggedIn}
-	<button on:click={toggle}> Log out </button>
-{/if}
-
-{#if !user.loggedIn}
-	<button on:click={toggle}> Log in </button>
-{/if}
-```
-
-Try it — update the component, and click on the buttons.
diff --git a/documentation/tutorial/04-logic/02-else-blocks/app-a/App.svelte b/documentation/tutorial/04-logic/02-else-blocks/app-a/App.svelte
deleted file mode 100644
index d986710847..0000000000
--- a/documentation/tutorial/04-logic/02-else-blocks/app-a/App.svelte
+++ /dev/null
@@ -1,15 +0,0 @@
-<script>
-	let user = { loggedIn: false };
-
-	function toggle() {
-		user.loggedIn = !user.loggedIn;
-	}
-</script>
-
-{#if user.loggedIn}
-	<button on:click={toggle}> Log out </button>
-{/if}
-
-{#if !user.loggedIn}
-	<button on:click={toggle}> Log in </button>
-{/if}
diff --git a/documentation/tutorial/04-logic/02-else-blocks/app-b/App.svelte b/documentation/tutorial/04-logic/02-else-blocks/app-b/App.svelte
deleted file mode 100644
index 146e54bcc0..0000000000
--- a/documentation/tutorial/04-logic/02-else-blocks/app-b/App.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script>
-	let user = { loggedIn: false };
-
-	function toggle() {
-		user.loggedIn = !user.loggedIn;
-	}
-</script>
-
-{#if user.loggedIn}
-	<button on:click={toggle}> Log out </button>
-{:else}
-	<button on:click={toggle}> Log in </button>
-{/if}
diff --git a/documentation/tutorial/04-logic/02-else-blocks/text.md b/documentation/tutorial/04-logic/02-else-blocks/text.md
deleted file mode 100644
index 677ac477dc..0000000000
--- a/documentation/tutorial/04-logic/02-else-blocks/text.md
+++ /dev/null
@@ -1,15 +0,0 @@
----
-title: Else blocks
----
-
-Since the two conditions — `if user.loggedIn` and `if !user.loggedIn` — are mutually exclusive, we can simplify this component slightly by using an `else` block:
-
-```svelte
-{#if user.loggedIn}
-	<button on:click={toggle}> Log out </button>
-{:else}
-	<button on:click={toggle}> Log in </button>
-{/if}
-```
-
-> A `#` character always indicates a _block opening_ tag. A `/` character always indicates a _block closing_ tag. A `:` character, as in `{:else}`, indicates a _block continuation_ tag. Don't worry — you've already learned almost all the syntax Svelte adds to HTML.
diff --git a/documentation/tutorial/04-logic/03-else-if-blocks/app-a/App.svelte b/documentation/tutorial/04-logic/03-else-if-blocks/app-a/App.svelte
deleted file mode 100644
index fb41a894f9..0000000000
--- a/documentation/tutorial/04-logic/03-else-if-blocks/app-a/App.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<script>
-	let x = 7;
-</script>
-
-{#if x > 10}
-	<p>{x} is greater than 10</p>
-{:else}
-	<p>{x} is between 0 and 10</p>
-{/if}
diff --git a/documentation/tutorial/04-logic/03-else-if-blocks/app-b/App.svelte b/documentation/tutorial/04-logic/03-else-if-blocks/app-b/App.svelte
deleted file mode 100644
index 2b740dbf9b..0000000000
--- a/documentation/tutorial/04-logic/03-else-if-blocks/app-b/App.svelte
+++ /dev/null
@@ -1,11 +0,0 @@
-<script>
-	let x = 7;
-</script>
-
-{#if x > 10}
-	<p>{x} is greater than 10</p>
-{:else if 5 > x}
-	<p>{x} is less than 5</p>
-{:else}
-	<p>{x} is between 5 and 10</p>
-{/if}
diff --git a/documentation/tutorial/04-logic/03-else-if-blocks/text.md b/documentation/tutorial/04-logic/03-else-if-blocks/text.md
deleted file mode 100644
index 15c3d08fe4..0000000000
--- a/documentation/tutorial/04-logic/03-else-if-blocks/text.md
+++ /dev/null
@@ -1,15 +0,0 @@
----
-title: Else-if blocks
----
-
-Multiple conditions can be 'chained' together with `else if`:
-
-```svelte
-{#if x > 10}
-	<p>{x} is greater than 10</p>
-{:else if 5 > x}
-	<p>{x} is less than 5</p>
-{:else}
-	<p>{x} is between 5 and 10</p>
-{/if}
-```
diff --git a/documentation/tutorial/04-logic/04-each-blocks/app-a/App.svelte b/documentation/tutorial/04-logic/04-each-blocks/app-a/App.svelte
deleted file mode 100644
index de2601e7e6..0000000000
--- a/documentation/tutorial/04-logic/04-each-blocks/app-a/App.svelte
+++ /dev/null
@@ -1,19 +0,0 @@
-<script>
-	let cats = [
-		{ id: 'J---aiyznGQ', name: 'Keyboard Cat' },
-		{ id: 'z_AbfPXTKms', name: 'Maru' },
-		{ id: 'OUtn3pvWmpg', name: 'Henri The Existential Cat' }
-	];
-</script>
-
-<h1>The Famous Cats of YouTube</h1>
-
-<ul>
-	<!-- open each block -->
-	<li>
-		<a target="_blank" href="https://www.youtube.com/watch?v={cat.id}" rel="noreferrer">
-			{cat.name}
-		</a>
-	</li>
-	<!-- close each block -->
-</ul>
diff --git a/documentation/tutorial/04-logic/04-each-blocks/app-b/App.svelte b/documentation/tutorial/04-logic/04-each-blocks/app-b/App.svelte
deleted file mode 100644
index 527372f5ed..0000000000
--- a/documentation/tutorial/04-logic/04-each-blocks/app-b/App.svelte
+++ /dev/null
@@ -1,19 +0,0 @@
-<script>
-	let cats = [
-		{ id: 'J---aiyznGQ', name: 'Keyboard Cat' },
-		{ id: 'z_AbfPXTKms', name: 'Maru' },
-		{ id: 'OUtn3pvWmpg', name: 'Henri The Existential Cat' }
-	];
-</script>
-
-<h1>The Famous Cats of YouTube</h1>
-
-<ul>
-	{#each cats as { id, name }, i}
-		<li>
-			<a target="_blank" href="https://www.youtube.com/watch?v={id}" rel="noreferrer">
-				{i + 1}: {name}
-			</a>
-		</li>
-	{/each}
-</ul>
diff --git a/documentation/tutorial/04-logic/04-each-blocks/text.md b/documentation/tutorial/04-logic/04-each-blocks/text.md
deleted file mode 100644
index 8f53608b20..0000000000
--- a/documentation/tutorial/04-logic/04-each-blocks/text.md
+++ /dev/null
@@ -1,33 +0,0 @@
----
-title: Each blocks
----
-
-If you need to loop over lists of data, use an `each` block:
-
-```svelte
-<ul>
-	{#each cats as cat}
-		<li>
-			<a target="_blank" href="https://www.youtube.com/watch?v={cat.id}" rel="noreferrer">
-				{cat.name}
-			</a>
-		</li>
-	{/each}
-</ul>
-```
-
-> The expression (`cats`, in this case) can be any array or array-like object (i.e. it has a `length` property). You can loop over generic iterables with `each [...iterable]`.
-
-You can get the current _index_ as a second argument, like so:
-
-```svelte
-{#each cats as cat, i}
-	<li>
-		<a target="_blank" href="https://www.youtube.com/watch?v={cat.id}" rel="noreferrer">
-			{i + 1}: {cat.name}
-		</a>
-	</li>
-{/each}
-```
-
-If you prefer, you can use destructuring — `each cats as { id, name }` — and replace `cat.id` and `cat.name` with `id` and `name`.
diff --git a/documentation/tutorial/04-logic/05-keyed-each-blocks/app-a/App.svelte b/documentation/tutorial/04-logic/05-keyed-each-blocks/app-a/App.svelte
deleted file mode 100644
index 60cd74fbe7..0000000000
--- a/documentation/tutorial/04-logic/05-keyed-each-blocks/app-a/App.svelte
+++ /dev/null
@@ -1,21 +0,0 @@
-<script>
-	import Thing from './Thing.svelte';
-
-	let things = [
-		{ id: 1, name: 'apple' },
-		{ id: 2, name: 'banana' },
-		{ id: 3, name: 'carrot' },
-		{ id: 4, name: 'doughnut' },
-		{ id: 5, name: 'egg' }
-	];
-
-	function handleClick() {
-		things = things.slice(1);
-	}
-</script>
-
-<button on:click={handleClick}> Remove first thing </button>
-
-{#each things as thing}
-	<Thing name={thing.name} />
-{/each}
diff --git a/documentation/tutorial/04-logic/05-keyed-each-blocks/app-a/Thing.svelte b/documentation/tutorial/04-logic/05-keyed-each-blocks/app-a/Thing.svelte
deleted file mode 100644
index e1b0bd43e7..0000000000
--- a/documentation/tutorial/04-logic/05-keyed-each-blocks/app-a/Thing.svelte
+++ /dev/null
@@ -1,40 +0,0 @@
-<script>
-	import { onDestroy } from 'svelte';
-
-	const emojis = {
-		apple: '🍎',
-		banana: '🍌',
-		carrot: '🥕',
-		doughnut: '🍩',
-		egg: '🥚'
-	};
-
-	// the name is updated whenever the prop value changes...
-	export let name;
-
-	// ...but the "emoji" variable is fixed upon initialisation of the component
-	const emoji = emojis[name];
-
-	// observe in the console which entry is removed
-	onDestroy(() => {
-		console.log('thing destroyed: ' + name);
-	});
-</script>
-
-<p>
-	<span>The emoji for {name} is {emoji}</span>
-</p>
-
-<style>
-	p {
-		margin: 0.8em 0;
-	}
-	span {
-		display: inline-block;
-		padding: 0.2em 1em 0.3em;
-		text-align: center;
-		border-radius: 0.2em;
-		color: #333333;
-		background-color: #ffdfd3;
-	}
-</style>
diff --git a/documentation/tutorial/04-logic/05-keyed-each-blocks/app-b/App.svelte b/documentation/tutorial/04-logic/05-keyed-each-blocks/app-b/App.svelte
deleted file mode 100644
index 4e485456da..0000000000
--- a/documentation/tutorial/04-logic/05-keyed-each-blocks/app-b/App.svelte
+++ /dev/null
@@ -1,21 +0,0 @@
-<script>
-	import Thing from './Thing.svelte';
-
-	let things = [
-		{ id: 1, name: 'apple' },
-		{ id: 2, name: 'banana' },
-		{ id: 3, name: 'carrot' },
-		{ id: 4, name: 'doughnut' },
-		{ id: 5, name: 'egg' }
-	];
-
-	function handleClick() {
-		things = things.slice(1);
-	}
-</script>
-
-<button on:click={handleClick}> Remove first thing </button>
-
-{#each things as thing (thing.id)}
-	<Thing name={thing.name} />
-{/each}
diff --git a/documentation/tutorial/04-logic/05-keyed-each-blocks/app-b/Thing.svelte b/documentation/tutorial/04-logic/05-keyed-each-blocks/app-b/Thing.svelte
deleted file mode 100644
index e1b0bd43e7..0000000000
--- a/documentation/tutorial/04-logic/05-keyed-each-blocks/app-b/Thing.svelte
+++ /dev/null
@@ -1,40 +0,0 @@
-<script>
-	import { onDestroy } from 'svelte';
-
-	const emojis = {
-		apple: '🍎',
-		banana: '🍌',
-		carrot: '🥕',
-		doughnut: '🍩',
-		egg: '🥚'
-	};
-
-	// the name is updated whenever the prop value changes...
-	export let name;
-
-	// ...but the "emoji" variable is fixed upon initialisation of the component
-	const emoji = emojis[name];
-
-	// observe in the console which entry is removed
-	onDestroy(() => {
-		console.log('thing destroyed: ' + name);
-	});
-</script>
-
-<p>
-	<span>The emoji for {name} is {emoji}</span>
-</p>
-
-<style>
-	p {
-		margin: 0.8em 0;
-	}
-	span {
-		display: inline-block;
-		padding: 0.2em 1em 0.3em;
-		text-align: center;
-		border-radius: 0.2em;
-		color: #333333;
-		background-color: #ffdfd3;
-	}
-</style>
diff --git a/documentation/tutorial/04-logic/05-keyed-each-blocks/text.md b/documentation/tutorial/04-logic/05-keyed-each-blocks/text.md
deleted file mode 100644
index e3f5f1afbd..0000000000
--- a/documentation/tutorial/04-logic/05-keyed-each-blocks/text.md
+++ /dev/null
@@ -1,21 +0,0 @@
----
-title: Keyed each blocks
----
-
-By default, when you modify the value of an `each` block, it will add and remove items at the _end_ of the block, and update any values that have changed. That might not be what you want.
-
-It's easier to show why than to explain. Click to expand the `Console`, then click the 'Remove first thing' button a few times, and notice what happens: it does not remove the first `<Thing>` component, but rather the _last_ DOM node. Then it updates the `name` value in the remaining DOM nodes, but not the emoji.
-
-Instead, we'd like to remove only the first `<Thing>` component and its DOM node, and leave the others unaffected.
-
-To do that, we specify a unique identifier (or "key") for the `each` block:
-
-```svelte
-{#each things as thing (thing.id)}
-	<Thing name={thing.name} />
-{/each}
-```
-
-Here, `(thing.id)` is the _key_, which tells Svelte how to figure out which DOM node to change when the component updates.
-
-> You can use any object as the key, as Svelte uses a `Map` internally — in other words you could do `(thing)` instead of `(thing.id)`. Using a string or number is generally safer, however, since it means identity persists without referential equality, for example when updating with fresh data from an API server.
diff --git a/documentation/tutorial/04-logic/06-await-blocks/app-a/App.svelte b/documentation/tutorial/04-logic/06-await-blocks/app-a/App.svelte
deleted file mode 100644
index 430bade379..0000000000
--- a/documentation/tutorial/04-logic/06-await-blocks/app-a/App.svelte
+++ /dev/null
@@ -1,23 +0,0 @@
-<script>
-	async function getRandomNumber() {
-		const res = await fetch(`/tutorial/random-number`);
-		const text = await res.text();
-
-		if (res.ok) {
-			return text;
-		} else {
-			throw new Error(text);
-		}
-	}
-
-	let promise = getRandomNumber();
-
-	function handleClick() {
-		promise = getRandomNumber();
-	}
-</script>
-
-<button on:click={handleClick}> generate random number </button>
-
-<!-- replace this element -->
-<p>{promise}</p>
diff --git a/documentation/tutorial/04-logic/06-await-blocks/app-b/App.svelte b/documentation/tutorial/04-logic/06-await-blocks/app-b/App.svelte
deleted file mode 100644
index ac46be1d63..0000000000
--- a/documentation/tutorial/04-logic/06-await-blocks/app-b/App.svelte
+++ /dev/null
@@ -1,28 +0,0 @@
-<script>
-	async function getRandomNumber() {
-		const res = await fetch(`/tutorial/random-number`);
-		const text = await res.text();
-
-		if (res.ok) {
-			return text;
-		} else {
-			throw new Error(text);
-		}
-	}
-
-	let promise = getRandomNumber();
-
-	function handleClick() {
-		promise = getRandomNumber();
-	}
-</script>
-
-<button on:click={handleClick}> generate random number </button>
-
-{#await promise}
-	<p>...waiting</p>
-{:then number}
-	<p>The number is {number}</p>
-{:catch error}
-	<p style="color: red">{error.message}</p>
-{/await}
diff --git a/documentation/tutorial/04-logic/06-await-blocks/text.md b/documentation/tutorial/04-logic/06-await-blocks/text.md
deleted file mode 100644
index 9a528da102..0000000000
--- a/documentation/tutorial/04-logic/06-await-blocks/text.md
+++ /dev/null
@@ -1,25 +0,0 @@
----
-title: Await blocks
----
-
-Most web applications have to deal with asynchronous data at some point. Svelte makes it easy to _await_ the value of [promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises) directly in your markup:
-
-```svelte
-{#await promise}
-	<p>...waiting</p>
-{:then number}
-	<p>The number is {number}</p>
-{:catch error}
-	<p style="color: red">{error.message}</p>
-{/await}
-```
-
-> Only the most recent `promise` is considered, meaning you don't need to worry about race conditions.
-
-If you know that your promise can't reject, you can omit the `catch` block. You can also omit the first block if you don't want to show anything until the promise resolves:
-
-```svelte
-{#await promise then number}
-	<p>the number is {number}</p>
-{/await}
-```
diff --git a/documentation/tutorial/04-logic/meta.json b/documentation/tutorial/04-logic/meta.json
deleted file mode 100644
index 22e69b0c83..0000000000
--- a/documentation/tutorial/04-logic/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Logic"
-}
diff --git a/documentation/tutorial/05-events/01-dom-events/app-a/App.svelte b/documentation/tutorial/05-events/01-dom-events/app-a/App.svelte
deleted file mode 100644
index 5a020e0ea9..0000000000
--- a/documentation/tutorial/05-events/01-dom-events/app-a/App.svelte
+++ /dev/null
@@ -1,19 +0,0 @@
-<script>
-	let m = { x: 0, y: 0 };
-
-	function handleMousemove(event) {
-		m.x = event.clientX;
-		m.y = event.clientY;
-	}
-</script>
-
-<div>
-	The mouse position is {m.x} x {m.y}
-</div>
-
-<style>
-	div {
-		width: 100%;
-		height: 100%;
-	}
-</style>
diff --git a/documentation/tutorial/05-events/01-dom-events/app-b/App.svelte b/documentation/tutorial/05-events/01-dom-events/app-b/App.svelte
deleted file mode 100644
index 54470a9a5e..0000000000
--- a/documentation/tutorial/05-events/01-dom-events/app-b/App.svelte
+++ /dev/null
@@ -1,19 +0,0 @@
-<script>
-	let m = { x: 0, y: 0 };
-
-	function handleMousemove(event) {
-		m.x = event.clientX;
-		m.y = event.clientY;
-	}
-</script>
-
-<div on:mousemove={handleMousemove}>
-	The mouse position is {m.x} x {m.y}
-</div>
-
-<style>
-	div {
-		width: 100%;
-		height: 100%;
-	}
-</style>
diff --git a/documentation/tutorial/05-events/01-dom-events/text.md b/documentation/tutorial/05-events/01-dom-events/text.md
deleted file mode 100644
index 64cfa32170..0000000000
--- a/documentation/tutorial/05-events/01-dom-events/text.md
+++ /dev/null
@@ -1,11 +0,0 @@
----
-title: DOM events
----
-
-As we've briefly seen already, you can listen to any event on an element with the `on:` directive:
-
-```svelte
-<div on:mousemove={handleMousemove}>
-	The mouse position is {m.x} x {m.y}
-</div>
-```
diff --git a/documentation/tutorial/05-events/02-inline-handlers/app-a/App.svelte b/documentation/tutorial/05-events/02-inline-handlers/app-a/App.svelte
deleted file mode 100644
index 54470a9a5e..0000000000
--- a/documentation/tutorial/05-events/02-inline-handlers/app-a/App.svelte
+++ /dev/null
@@ -1,19 +0,0 @@
-<script>
-	let m = { x: 0, y: 0 };
-
-	function handleMousemove(event) {
-		m.x = event.clientX;
-		m.y = event.clientY;
-	}
-</script>
-
-<div on:mousemove={handleMousemove}>
-	The mouse position is {m.x} x {m.y}
-</div>
-
-<style>
-	div {
-		width: 100%;
-		height: 100%;
-	}
-</style>
diff --git a/documentation/tutorial/05-events/02-inline-handlers/app-b/App.svelte b/documentation/tutorial/05-events/02-inline-handlers/app-b/App.svelte
deleted file mode 100644
index 24127035ad..0000000000
--- a/documentation/tutorial/05-events/02-inline-handlers/app-b/App.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<script>
-	let m = { x: 0, y: 0 };
-</script>
-
-<div on:mousemove={(e) => (m = { x: e.clientX, y: e.clientY })}>
-	The mouse position is {m.x} x {m.y}
-</div>
-
-<style>
-	div {
-		width: 100%;
-		height: 100%;
-	}
-</style>
diff --git a/documentation/tutorial/05-events/02-inline-handlers/text.md b/documentation/tutorial/05-events/02-inline-handlers/text.md
deleted file mode 100644
index 99ae43c429..0000000000
--- a/documentation/tutorial/05-events/02-inline-handlers/text.md
+++ /dev/null
@@ -1,13 +0,0 @@
----
-title: Inline handlers
----
-
-You can also declare event handlers inline:
-
-```svelte
-<div on:mousemove={(e) => (m = { x: e.clientX, y: e.clientY })}>
-	The mouse position is {m.x} x {m.y}
-</div>
-```
-
-> In some frameworks you may see recommendations to avoid inline event handlers for performance reasons, particularly inside loops. That advice doesn't apply to Svelte — the compiler will always do the right thing, whichever form you choose.
diff --git a/documentation/tutorial/05-events/03-event-modifiers/app-a/App.svelte b/documentation/tutorial/05-events/03-event-modifiers/app-a/App.svelte
deleted file mode 100644
index 0a000c832f..0000000000
--- a/documentation/tutorial/05-events/03-event-modifiers/app-a/App.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<script>
-	function handleClick() {
-		alert('clicked');
-	}
-</script>
-
-<button on:click={handleClick}> Click me </button>
diff --git a/documentation/tutorial/05-events/03-event-modifiers/app-b/App.svelte b/documentation/tutorial/05-events/03-event-modifiers/app-b/App.svelte
deleted file mode 100644
index c22168901f..0000000000
--- a/documentation/tutorial/05-events/03-event-modifiers/app-b/App.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<script>
-	function handleClick() {
-		alert('no more alerts');
-	}
-</script>
-
-<button on:click|once={handleClick}> Click me </button>
diff --git a/documentation/tutorial/05-events/03-event-modifiers/text.md b/documentation/tutorial/05-events/03-event-modifiers/text.md
deleted file mode 100644
index eea563fec2..0000000000
--- a/documentation/tutorial/05-events/03-event-modifiers/text.md
+++ /dev/null
@@ -1,28 +0,0 @@
----
-title: Event modifiers
----
-
-DOM event handlers can have _modifiers_ that alter their behaviour. For example, a handler with a `once` modifier will only run a single time:
-
-```svelte
-<script>
-	function handleClick() {
-		alert('no more alerts');
-	}
-</script>
-
-<button on:click|once={handleClick}> Click me </button>
-```
-
-The full list of modifiers:
-
-- `preventDefault` — calls `event.preventDefault()` before running the handler. Useful for client-side form handling, for example.
-- `stopPropagation` — calls `event.stopPropagation()`, preventing the event reaching the next element
-- `passive` — improves scrolling performance on touch/wheel events (Svelte will add it automatically where it's safe to do so)
-- `nonpassive` — explicitly set `passive: false`
-- `capture` — fires the handler during the _capture_ phase instead of the _bubbling_ phase ([MDN docs](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture))
-- `once` — remove the handler after the first time it runs
-- `self` — only trigger handler if event.target is the element itself
-- `trusted` — only trigger handler if `event.isTrusted` is `true`. I.e. if the event is triggered by a user action.
-
-You can chain modifiers together, e.g. `on:click|once|capture={...}`.
diff --git a/documentation/tutorial/05-events/04-component-events/app-a/App.svelte b/documentation/tutorial/05-events/04-component-events/app-a/App.svelte
deleted file mode 100644
index 3600b45efd..0000000000
--- a/documentation/tutorial/05-events/04-component-events/app-a/App.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<script>
-	import Inner from './Inner.svelte';
-
-	function handleMessage(event) {
-		alert(event.detail.text);
-	}
-</script>
-
-<Inner on:message={handleMessage} />
diff --git a/documentation/tutorial/05-events/04-component-events/app-a/Inner.svelte b/documentation/tutorial/05-events/04-component-events/app-a/Inner.svelte
deleted file mode 100644
index cf0d8c89f2..0000000000
--- a/documentation/tutorial/05-events/04-component-events/app-a/Inner.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<script>
-	// setup code goes here
-
-	function sayHello() {}
-</script>
-
-<button on:click={sayHello}> Click to say hello </button>
diff --git a/documentation/tutorial/05-events/04-component-events/app-b/App.svelte b/documentation/tutorial/05-events/04-component-events/app-b/App.svelte
deleted file mode 100644
index 3600b45efd..0000000000
--- a/documentation/tutorial/05-events/04-component-events/app-b/App.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<script>
-	import Inner from './Inner.svelte';
-
-	function handleMessage(event) {
-		alert(event.detail.text);
-	}
-</script>
-
-<Inner on:message={handleMessage} />
diff --git a/documentation/tutorial/05-events/04-component-events/app-b/Inner.svelte b/documentation/tutorial/05-events/04-component-events/app-b/Inner.svelte
deleted file mode 100644
index c2e85b4c97..0000000000
--- a/documentation/tutorial/05-events/04-component-events/app-b/Inner.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script>
-	import { createEventDispatcher } from 'svelte';
-
-	const dispatch = createEventDispatcher();
-
-	function sayHello() {
-		dispatch('message', {
-			text: 'Hello!'
-		});
-	}
-</script>
-
-<button on:click={sayHello}> Click to say hello </button>
diff --git a/documentation/tutorial/05-events/04-component-events/text.md b/documentation/tutorial/05-events/04-component-events/text.md
deleted file mode 100644
index 0df2bc68f0..0000000000
--- a/documentation/tutorial/05-events/04-component-events/text.md
+++ /dev/null
@@ -1,27 +0,0 @@
----
-title: Component events
----
-
-Components can also dispatch events. To do so, they must create an event dispatcher. Update `Inner.svelte`:
-
-```svelte
-<script>
-	import { createEventDispatcher } from 'svelte';
-
-	const dispatch = createEventDispatcher();
-
-	function sayHello() {
-		dispatch('message', {
-			text: 'Hello!'
-		});
-	}
-</script>
-```
-
-> `createEventDispatcher` must be called when the component is first instantiated — you can't do it later inside e.g. a `setTimeout` callback. This links `dispatch` to the component instance.
-
-Notice that the `App` component is listening to the messages dispatched by `Inner` component thanks to the `on:message` directive. This directive is an attribute prefixed with `on:` followed by the event name that we are dispatching (in this case, `message`).
-
-Without this attribute, messages would still be dispatched, but the App would not react to it. You can try removing the `on:message` attribute and pressing the button again.
-
-> You can also try changing the event name to something else. For instance, change `dispatch('message')` to `dispatch('myevent')` in `Inner.svelte` and change the attribute name from `on:message` to `on:myevent` in the `App.svelte` component.
diff --git a/documentation/tutorial/05-events/05-event-forwarding/app-a/App.svelte b/documentation/tutorial/05-events/05-event-forwarding/app-a/App.svelte
deleted file mode 100644
index 2e8e743f4e..0000000000
--- a/documentation/tutorial/05-events/05-event-forwarding/app-a/App.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<script>
-	import Outer from './Outer.svelte';
-
-	function handleMessage(event) {
-		alert(event.detail.text);
-	}
-</script>
-
-<Outer on:message={handleMessage} />
diff --git a/documentation/tutorial/05-events/05-event-forwarding/app-a/Inner.svelte b/documentation/tutorial/05-events/05-event-forwarding/app-a/Inner.svelte
deleted file mode 100644
index c2e85b4c97..0000000000
--- a/documentation/tutorial/05-events/05-event-forwarding/app-a/Inner.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script>
-	import { createEventDispatcher } from 'svelte';
-
-	const dispatch = createEventDispatcher();
-
-	function sayHello() {
-		dispatch('message', {
-			text: 'Hello!'
-		});
-	}
-</script>
-
-<button on:click={sayHello}> Click to say hello </button>
diff --git a/documentation/tutorial/05-events/05-event-forwarding/app-a/Outer.svelte b/documentation/tutorial/05-events/05-event-forwarding/app-a/Outer.svelte
deleted file mode 100644
index 77f0490d23..0000000000
--- a/documentation/tutorial/05-events/05-event-forwarding/app-a/Outer.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<script>
-	import Inner from './Inner.svelte';
-</script>
-
-<Inner />
diff --git a/documentation/tutorial/05-events/05-event-forwarding/app-b/App.svelte b/documentation/tutorial/05-events/05-event-forwarding/app-b/App.svelte
deleted file mode 100644
index 2e8e743f4e..0000000000
--- a/documentation/tutorial/05-events/05-event-forwarding/app-b/App.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<script>
-	import Outer from './Outer.svelte';
-
-	function handleMessage(event) {
-		alert(event.detail.text);
-	}
-</script>
-
-<Outer on:message={handleMessage} />
diff --git a/documentation/tutorial/05-events/05-event-forwarding/app-b/Inner.svelte b/documentation/tutorial/05-events/05-event-forwarding/app-b/Inner.svelte
deleted file mode 100644
index c2e85b4c97..0000000000
--- a/documentation/tutorial/05-events/05-event-forwarding/app-b/Inner.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script>
-	import { createEventDispatcher } from 'svelte';
-
-	const dispatch = createEventDispatcher();
-
-	function sayHello() {
-		dispatch('message', {
-			text: 'Hello!'
-		});
-	}
-</script>
-
-<button on:click={sayHello}> Click to say hello </button>
diff --git a/documentation/tutorial/05-events/05-event-forwarding/app-b/Outer.svelte b/documentation/tutorial/05-events/05-event-forwarding/app-b/Outer.svelte
deleted file mode 100644
index 62a5d1d852..0000000000
--- a/documentation/tutorial/05-events/05-event-forwarding/app-b/Outer.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<script>
-	import Inner from './Inner.svelte';
-</script>
-
-<Inner on:message />
diff --git a/documentation/tutorial/05-events/05-event-forwarding/text.md b/documentation/tutorial/05-events/05-event-forwarding/text.md
deleted file mode 100644
index 9257267688..0000000000
--- a/documentation/tutorial/05-events/05-event-forwarding/text.md
+++ /dev/null
@@ -1,34 +0,0 @@
----
-title: Event forwarding
----
-
-Unlike DOM events, component events don't _bubble_. If you want to listen to an event on some deeply nested component, the intermediate components must _forward_ the event.
-
-In this case, we have the same `App.svelte` and `Inner.svelte` as in the [previous chapter](/tutorial/component-events), but there's now an `Outer.svelte` component that contains `<Inner/>`.
-
-One way we could solve the problem is adding `createEventDispatcher` to `Outer.svelte`, listening for the `message` event, and creating a handler for it:
-
-```svelte
-<script>
-	import Inner from './Inner.svelte';
-	import { createEventDispatcher } from 'svelte';
-
-	const dispatch = createEventDispatcher();
-
-	function forward(event) {
-		dispatch('message', event.detail);
-	}
-</script>
-
-<Inner on:message={forward} />
-```
-
-But that's a lot of code to write, so Svelte gives us an equivalent shorthand — an `on:message` event directive without a value means 'forward all `message` events'.
-
-```svelte
-<script>
-	import Inner from './Inner.svelte';
-</script>
-
-<Inner on:message />
-```
diff --git a/documentation/tutorial/05-events/06-dom-event-forwarding/app-a/App.svelte b/documentation/tutorial/05-events/06-dom-event-forwarding/app-a/App.svelte
deleted file mode 100644
index f7dc6576bf..0000000000
--- a/documentation/tutorial/05-events/06-dom-event-forwarding/app-a/App.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<script>
-	import CustomButton from './CustomButton.svelte';
-
-	function handleClick() {
-		alert('Button Clicked');
-	}
-</script>
-
-<CustomButton on:click={handleClick} />
diff --git a/documentation/tutorial/05-events/06-dom-event-forwarding/app-a/CustomButton.svelte b/documentation/tutorial/05-events/06-dom-event-forwarding/app-a/CustomButton.svelte
deleted file mode 100644
index be35e53a41..0000000000
--- a/documentation/tutorial/05-events/06-dom-event-forwarding/app-a/CustomButton.svelte
+++ /dev/null
@@ -1,20 +0,0 @@
-<button> Click me </button>
-
-<style>
-	button {
-		background: #e2e8f0;
-		color: #64748b;
-		border: unset;
-		border-radius: 6px;
-		padding: 0.75rem 1.5rem;
-		cursor: pointer;
-	}
-	button:hover {
-		background: #cbd5e1;
-		color: #475569;
-	}
-	button:focus {
-		background: #94a3b8;
-		color: #f1f5f9;
-	}
-</style>
diff --git a/documentation/tutorial/05-events/06-dom-event-forwarding/app-b/App.svelte b/documentation/tutorial/05-events/06-dom-event-forwarding/app-b/App.svelte
deleted file mode 100644
index f7dc6576bf..0000000000
--- a/documentation/tutorial/05-events/06-dom-event-forwarding/app-b/App.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<script>
-	import CustomButton from './CustomButton.svelte';
-
-	function handleClick() {
-		alert('Button Clicked');
-	}
-</script>
-
-<CustomButton on:click={handleClick} />
diff --git a/documentation/tutorial/05-events/06-dom-event-forwarding/app-b/CustomButton.svelte b/documentation/tutorial/05-events/06-dom-event-forwarding/app-b/CustomButton.svelte
deleted file mode 100644
index 04f17a4436..0000000000
--- a/documentation/tutorial/05-events/06-dom-event-forwarding/app-b/CustomButton.svelte
+++ /dev/null
@@ -1,20 +0,0 @@
-<button on:click> Click me </button>
-
-<style>
-	button {
-		background: #e2e8f0;
-		color: #64748b;
-		border: unset;
-		border-radius: 6px;
-		padding: 0.75rem 1.5rem;
-		cursor: pointer;
-	}
-	button:hover {
-		background: #cbd5e1;
-		color: #475569;
-	}
-	button:focus {
-		background: #94a3b8;
-		color: #f1f5f9;
-	}
-</style>
diff --git a/documentation/tutorial/05-events/06-dom-event-forwarding/text.md b/documentation/tutorial/05-events/06-dom-event-forwarding/text.md
deleted file mode 100644
index de30272fd8..0000000000
--- a/documentation/tutorial/05-events/06-dom-event-forwarding/text.md
+++ /dev/null
@@ -1,11 +0,0 @@
----
-title: DOM event forwarding
----
-
-Event forwarding works for DOM events too.
-
-We want to get notified of clicks on our `<CustomButton>` — to do that, we just need to forward `click` events on the `<button>` element in `CustomButton.svelte`:
-
-```svelte
-<button on:click> Click me </button>
-```
diff --git a/documentation/tutorial/05-events/meta.json b/documentation/tutorial/05-events/meta.json
deleted file mode 100644
index 42460e989b..0000000000
--- a/documentation/tutorial/05-events/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Events"
-}
diff --git a/documentation/tutorial/06-bindings/01-text-inputs/app-a/App.svelte b/documentation/tutorial/06-bindings/01-text-inputs/app-a/App.svelte
deleted file mode 100644
index 39ae9ad6b9..0000000000
--- a/documentation/tutorial/06-bindings/01-text-inputs/app-a/App.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<script>
-	let name = 'world';
-</script>
-
-<input value={name} />
-
-<h1>Hello {name}!</h1>
diff --git a/documentation/tutorial/06-bindings/01-text-inputs/app-b/App.svelte b/documentation/tutorial/06-bindings/01-text-inputs/app-b/App.svelte
deleted file mode 100644
index 94061c0df2..0000000000
--- a/documentation/tutorial/06-bindings/01-text-inputs/app-b/App.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<script>
-	let name = 'world';
-</script>
-
-<input bind:value={name} />
-
-<h1>Hello {name}!</h1>
diff --git a/documentation/tutorial/06-bindings/01-text-inputs/text.md b/documentation/tutorial/06-bindings/01-text-inputs/text.md
deleted file mode 100644
index 68e0c2ff9c..0000000000
--- a/documentation/tutorial/06-bindings/01-text-inputs/text.md
+++ /dev/null
@@ -1,15 +0,0 @@
----
-title: Text inputs
----
-
-As a general rule, data flow in Svelte is _top down_ — a parent component can set props on a child component, and a component can set attributes on an element, but not the other way around.
-
-Sometimes it's useful to break that rule. Take the case of the `<input>` element in this component — we _could_ add an `on:input` event handler that sets the value of `name` to `event.target.value`, but it's a bit... boilerplatey. It gets even worse with other form elements, as we'll see.
-
-Instead, we can use the `bind:value` directive:
-
-```svelte
-<input bind:value={name} />
-```
-
-This means that not only will changes to the value of `name` update the input value, but changes to the input value will update `name`.
diff --git a/documentation/tutorial/06-bindings/02-numeric-inputs/app-a/App.svelte b/documentation/tutorial/06-bindings/02-numeric-inputs/app-a/App.svelte
deleted file mode 100644
index 69f1405744..0000000000
--- a/documentation/tutorial/06-bindings/02-numeric-inputs/app-a/App.svelte
+++ /dev/null
@@ -1,26 +0,0 @@
-<script>
-	let a = 1;
-	let b = 2;
-</script>
-
-<label>
-	<input type="number" value={a} min="0" max="10" />
-	<input type="range" value={a} min="0" max="10" />
-</label>
-
-<label>
-	<input type="number" value={b} min="0" max="10" />
-	<input type="range" value={b} min="0" max="10" />
-</label>
-
-<p>{a} + {b} = {a + b}</p>
-
-<style>
-	label {
-		display: flex;
-	}
-	input,
-	p {
-		margin: 6px;
-	}
-</style>
diff --git a/documentation/tutorial/06-bindings/02-numeric-inputs/app-b/App.svelte b/documentation/tutorial/06-bindings/02-numeric-inputs/app-b/App.svelte
deleted file mode 100644
index 0598d99ee0..0000000000
--- a/documentation/tutorial/06-bindings/02-numeric-inputs/app-b/App.svelte
+++ /dev/null
@@ -1,26 +0,0 @@
-<script>
-	let a = 1;
-	let b = 2;
-</script>
-
-<label>
-	<input type="number" bind:value={a} min="0" max="10" />
-	<input type="range" bind:value={a} min="0" max="10" />
-</label>
-
-<label>
-	<input type="number" bind:value={b} min="0" max="10" />
-	<input type="range" bind:value={b} min="0" max="10" />
-</label>
-
-<p>{a} + {b} = {a + b}</p>
-
-<style>
-	label {
-		display: flex;
-	}
-	input,
-	p {
-		margin: 6px;
-	}
-</style>
diff --git a/documentation/tutorial/06-bindings/02-numeric-inputs/text.md b/documentation/tutorial/06-bindings/02-numeric-inputs/text.md
deleted file mode 100644
index a9b539e603..0000000000
--- a/documentation/tutorial/06-bindings/02-numeric-inputs/text.md
+++ /dev/null
@@ -1,12 +0,0 @@
----
-title: Numeric inputs
----
-
-In the DOM, everything is a string. That's unhelpful when you're dealing with numeric inputs — `type="number"` and `type="range"` — as it means you have to remember to coerce `input.value` before using it.
-
-With `bind:value`, Svelte takes care of it for you:
-
-```svelte
-<input type="number" bind:value={a} min="0" max="10" />
-<input type="range" bind:value={a} min="0" max="10" />
-```
diff --git a/documentation/tutorial/06-bindings/03-checkbox-inputs/app-a/App.svelte b/documentation/tutorial/06-bindings/03-checkbox-inputs/app-a/App.svelte
deleted file mode 100644
index fcc421e3b9..0000000000
--- a/documentation/tutorial/06-bindings/03-checkbox-inputs/app-a/App.svelte
+++ /dev/null
@@ -1,16 +0,0 @@
-<script>
-	let yes = false;
-</script>
-
-<label>
-	<input type="checkbox" checked={yes} />
-	Yes! Send me regular email spam
-</label>
-
-{#if yes}
-	<p>Thank you. We will bombard your inbox and sell your personal details.</p>
-{:else}
-	<p>You must opt-in to continue. If you're not paying, you're the product.</p>
-{/if}
-
-<button disabled={!yes}> Subscribe </button>
diff --git a/documentation/tutorial/06-bindings/03-checkbox-inputs/app-b/App.svelte b/documentation/tutorial/06-bindings/03-checkbox-inputs/app-b/App.svelte
deleted file mode 100644
index b337359317..0000000000
--- a/documentation/tutorial/06-bindings/03-checkbox-inputs/app-b/App.svelte
+++ /dev/null
@@ -1,16 +0,0 @@
-<script>
-	let yes = false;
-</script>
-
-<label>
-	<input type="checkbox" bind:checked={yes} />
-	Yes! Send me regular email spam
-</label>
-
-{#if yes}
-	<p>Thank you. We will bombard your inbox and sell your personal details.</p>
-{:else}
-	<p>You must opt-in to continue. If you're not paying, you're the product.</p>
-{/if}
-
-<button disabled={!yes}> Subscribe </button>
diff --git a/documentation/tutorial/06-bindings/03-checkbox-inputs/text.md b/documentation/tutorial/06-bindings/03-checkbox-inputs/text.md
deleted file mode 100644
index f2dd2e3c01..0000000000
--- a/documentation/tutorial/06-bindings/03-checkbox-inputs/text.md
+++ /dev/null
@@ -1,9 +0,0 @@
----
-title: Checkbox inputs
----
-
-Checkboxes are used for toggling between states. Instead of binding to `input.value`, we bind to `input.checked`:
-
-```svelte
-<input type="checkbox" bind:checked={yes} />
-```
diff --git a/documentation/tutorial/06-bindings/04-group-inputs/app-a/App.svelte b/documentation/tutorial/06-bindings/04-group-inputs/app-a/App.svelte
deleted file mode 100644
index f41a922a4b..0000000000
--- a/documentation/tutorial/06-bindings/04-group-inputs/app-a/App.svelte
+++ /dev/null
@@ -1,55 +0,0 @@
-<script>
-	let scoops = 1;
-	let flavours = ['Mint choc chip'];
-
-	function join(flavours) {
-		if (flavours.length === 1) return flavours[0];
-		return `${flavours.slice(0, -1).join(', ')} and ${flavours[flavours.length - 1]}`;
-	}
-</script>
-
-<h2>Size</h2>
-
-<label>
-	<input type="radio" group={scoops} name="scoops" value={1} />
-	One scoop
-</label>
-
-<label>
-	<input type="radio" group={scoops} name="scoops" value={2} />
-	Two scoops
-</label>
-
-<label>
-	<input type="radio" group={scoops} name="scoops" value={3} />
-	Three scoops
-</label>
-
-<h2>Flavours</h2>
-
-<label>
-	<input type="checkbox" group={flavours} name="flavours" value="Cookies and cream" />
-	Cookies and cream
-</label>
-
-<label>
-	<input type="checkbox" group={flavours} name="flavours" value="Mint choc chip" />
-	Mint choc chip
-</label>
-
-<label>
-	<input type="checkbox" group={flavours} name="flavours" value="Raspberry ripple" />
-	Raspberry ripple
-</label>
-
-{#if flavours.length === 0}
-	<p>Please select at least one flavour</p>
-{:else if flavours.length > scoops}
-	<p>Can't order more flavours than scoops!</p>
-{:else}
-	<p>
-		You ordered {scoops}
-		{scoops === 1 ? 'scoop' : 'scoops'}
-		of {join(flavours)}
-	</p>
-{/if}
diff --git a/documentation/tutorial/06-bindings/04-group-inputs/app-b/App.svelte b/documentation/tutorial/06-bindings/04-group-inputs/app-b/App.svelte
deleted file mode 100644
index ce0565ab8e..0000000000
--- a/documentation/tutorial/06-bindings/04-group-inputs/app-b/App.svelte
+++ /dev/null
@@ -1,49 +0,0 @@
-<script>
-	let scoops = 1;
-	let flavours = ['Mint choc chip'];
-
-	let menu = ['Cookies and cream', 'Mint choc chip', 'Raspberry ripple'];
-
-	function join(flavours) {
-		if (flavours.length === 1) return flavours[0];
-		return `${flavours.slice(0, -1).join(', ')} and ${flavours[flavours.length - 1]}`;
-	}
-</script>
-
-<h2>Size</h2>
-
-<label>
-	<input type="radio" bind:group={scoops} name="scoops" value={1} />
-	One scoop
-</label>
-
-<label>
-	<input type="radio" bind:group={scoops} name="scoops" value={2} />
-	Two scoops
-</label>
-
-<label>
-	<input type="radio" bind:group={scoops} name="scoops" value={3} />
-	Three scoops
-</label>
-
-<h2>Flavours</h2>
-
-{#each menu as flavour}
-	<label>
-		<input type="checkbox" bind:group={flavours} name="flavours" value={flavour} />
-		{flavour}
-	</label>
-{/each}
-
-{#if flavours.length === 0}
-	<p>Please select at least one flavour</p>
-{:else if flavours.length > scoops}
-	<p>Can't order more flavours than scoops!</p>
-{:else}
-	<p>
-		You ordered {scoops}
-		{scoops === 1 ? 'scoop' : 'scoops'}
-		of {join(flavours)}
-	</p>
-{/if}
diff --git a/documentation/tutorial/06-bindings/04-group-inputs/text.md b/documentation/tutorial/06-bindings/04-group-inputs/text.md
deleted file mode 100644
index 790e95ea83..0000000000
--- a/documentation/tutorial/06-bindings/04-group-inputs/text.md
+++ /dev/null
@@ -1,32 +0,0 @@
----
-title: Group inputs
----
-
-If you have multiple inputs relating to the same value, you can use `bind:group` along with the `value` attribute. Radio inputs in the same group are mutually exclusive; checkbox inputs in the same group form an array of selected values.
-
-Add `bind:group` to each input:
-
-```svelte
-<input type="radio" bind:group={scoops} name="scoops" value={1} />
-```
-
-In this case, we could make the code simpler by moving the checkbox inputs into an `each` block. First, add a `menu` variable to the `<script>` block...
-
-```js
-let menu = ['Cookies and cream', 'Mint choc chip', 'Raspberry ripple'];
-```
-
-...then replace the second section:
-
-```svelte
-<h2>Flavours</h2>
-
-{#each menu as flavour}
-	<label>
-		<input type="checkbox" bind:group={flavours} name="flavours" value={flavour} />
-		{flavour}
-	</label>
-{/each}
-```
-
-It's now easy to expand our ice cream menu in new and exciting directions.
diff --git a/documentation/tutorial/06-bindings/05-textarea-inputs/app-a/App.svelte b/documentation/tutorial/06-bindings/05-textarea-inputs/app-a/App.svelte
deleted file mode 100644
index 8de3d510d2..0000000000
--- a/documentation/tutorial/06-bindings/05-textarea-inputs/app-a/App.svelte
+++ /dev/null
@@ -1,15 +0,0 @@
-<script>
-	import { marked } from 'marked';
-	let value = `Some words are *italic*, some are **bold**`;
-</script>
-
-{@html marked(value)}
-
-<textarea {value} />
-
-<style>
-	textarea {
-		width: 100%;
-		height: 200px;
-	}
-</style>
diff --git a/documentation/tutorial/06-bindings/05-textarea-inputs/app-b/App.svelte b/documentation/tutorial/06-bindings/05-textarea-inputs/app-b/App.svelte
deleted file mode 100644
index ccfaad4c2a..0000000000
--- a/documentation/tutorial/06-bindings/05-textarea-inputs/app-b/App.svelte
+++ /dev/null
@@ -1,15 +0,0 @@
-<script>
-	import { marked } from 'marked';
-	let value = `Some words are *italic*, some are **bold**`;
-</script>
-
-{@html marked(value)}
-
-<textarea bind:value />
-
-<style>
-	textarea {
-		width: 100%;
-		height: 200px;
-	}
-</style>
diff --git a/documentation/tutorial/06-bindings/05-textarea-inputs/text.md b/documentation/tutorial/06-bindings/05-textarea-inputs/text.md
deleted file mode 100644
index aad1b5ced0..0000000000
--- a/documentation/tutorial/06-bindings/05-textarea-inputs/text.md
+++ /dev/null
@@ -1,18 +0,0 @@
----
-title: Textarea inputs
----
-
-The `<textarea>` element behaves similarly to a text input in Svelte — use `bind:value` to create a two-way binding between the `<textarea>` content and the `value` variable:
-
-<!-- prettier-ignore -->
-```svelte
-<textarea bind:value={value} />
-```
-
-In cases like these, where the names match, we can also use a shorthand form:
-
-```svelte
-<textarea bind:value />
-```
-
-This applies to all bindings, not just textareas.
diff --git a/documentation/tutorial/06-bindings/06-select-bindings/app-a/App.svelte b/documentation/tutorial/06-bindings/06-select-bindings/app-a/App.svelte
deleted file mode 100644
index eaaa0aeabe..0000000000
--- a/documentation/tutorial/06-bindings/06-select-bindings/app-a/App.svelte
+++ /dev/null
@@ -1,41 +0,0 @@
-<script>
-	let questions = [
-		{ id: 1, text: `Where did you go to school?` },
-		{ id: 2, text: `What is your mother's name?` },
-		{ id: 3, text: `What is another personal fact that an attacker could easily find with Google?` }
-	];
-
-	let selected;
-
-	let answer = '';
-
-	function handleSubmit() {
-		alert(`answered question ${selected.id} (${selected.text}) with "${answer}"`);
-	}
-</script>
-
-<h2>Insecurity questions</h2>
-
-<form on:submit|preventDefault={handleSubmit}>
-	<select value={selected} on:change={() => (answer = '')}>
-		{#each questions as question}
-			<option value={question}>
-				{question.text}
-			</option>
-		{/each}
-	</select>
-
-	<input bind:value={answer} />
-
-	<button disabled={!answer} type="submit"> Submit </button>
-</form>
-
-<p>selected question {selected ? selected.id : '[waiting...]'}</p>
-
-<style>
-	input {
-		display: block;
-		width: 500px;
-		max-width: 100%;
-	}
-</style>
diff --git a/documentation/tutorial/06-bindings/06-select-bindings/app-b/App.svelte b/documentation/tutorial/06-bindings/06-select-bindings/app-b/App.svelte
deleted file mode 100644
index 7785258fe2..0000000000
--- a/documentation/tutorial/06-bindings/06-select-bindings/app-b/App.svelte
+++ /dev/null
@@ -1,41 +0,0 @@
-<script>
-	let questions = [
-		{ id: 1, text: `Where did you go to school?` },
-		{ id: 2, text: `What is your mother's name?` },
-		{ id: 3, text: `What is another personal fact that an attacker could easily find with Google?` }
-	];
-
-	let selected;
-
-	let answer = '';
-
-	function handleSubmit() {
-		alert(`answered question ${selected.id} (${selected.text}) with "${answer}"`);
-	}
-</script>
-
-<h2>Insecurity questions</h2>
-
-<form on:submit|preventDefault={handleSubmit}>
-	<select bind:value={selected} on:change={() => (answer = '')}>
-		{#each questions as question}
-			<option value={question}>
-				{question.text}
-			</option>
-		{/each}
-	</select>
-
-	<input bind:value={answer} />
-
-	<button disabled={!answer} type="submit"> Submit </button>
-</form>
-
-<p>selected question {selected ? selected.id : '[waiting...]'}</p>
-
-<style>
-	input {
-		display: block;
-		width: 500px;
-		max-width: 100%;
-	}
-</style>
diff --git a/documentation/tutorial/06-bindings/06-select-bindings/text.md b/documentation/tutorial/06-bindings/06-select-bindings/text.md
deleted file mode 100644
index 2e076fc36f..0000000000
--- a/documentation/tutorial/06-bindings/06-select-bindings/text.md
+++ /dev/null
@@ -1,13 +0,0 @@
----
-title: Select bindings
----
-
-We can also use `bind:value` with `<select>` elements. Update line 20:
-
-```svelte
-<select bind:value={selected} on:change="{() => answer = ''}">
-```
-
-Note that the `<option>` values are objects rather than strings. Svelte doesn't mind.
-
-> Because we haven't set an initial value of `selected`, the binding will set it to the default value (the first in the list) automatically. Be careful though — until the binding is initialised, `selected` remains undefined, so we can't blindly reference e.g. `selected.id` in the template. If your use case allows it, you could also set an initial value to bypass this problem.
diff --git a/documentation/tutorial/06-bindings/07-multiple-select-bindings/app-a/App.svelte b/documentation/tutorial/06-bindings/07-multiple-select-bindings/app-a/App.svelte
deleted file mode 100644
index 0ab215d519..0000000000
--- a/documentation/tutorial/06-bindings/07-multiple-select-bindings/app-a/App.svelte
+++ /dev/null
@@ -1,49 +0,0 @@
-<script>
-	let scoops = 1;
-	let flavours = ['Mint choc chip'];
-
-	let menu = ['Cookies and cream', 'Mint choc chip', 'Raspberry ripple'];
-
-	function join(flavours) {
-		if (flavours.length === 1) return flavours[0];
-		return `${flavours.slice(0, -1).join(', ')} and ${flavours[flavours.length - 1]}`;
-	}
-</script>
-
-<h2>Size</h2>
-
-<label>
-	<input type="radio" bind:group={scoops} value={1} />
-	One scoop
-</label>
-
-<label>
-	<input type="radio" bind:group={scoops} value={2} />
-	Two scoops
-</label>
-
-<label>
-	<input type="radio" bind:group={scoops} value={3} />
-	Three scoops
-</label>
-
-<h2>Flavours</h2>
-
-{#each menu as flavour}
-	<label>
-		<input type="checkbox" bind:group={flavours} value={flavour} />
-		{flavour}
-	</label>
-{/each}
-
-{#if flavours.length === 0}
-	<p>Please select at least one flavour</p>
-{:else if flavours.length > scoops}
-	<p>Can't order more flavours than scoops!</p>
-{:else}
-	<p>
-		You ordered {scoops}
-		{scoops === 1 ? 'scoop' : 'scoops'}
-		of {join(flavours)}
-	</p>
-{/if}
diff --git a/documentation/tutorial/06-bindings/07-multiple-select-bindings/app-b/App.svelte b/documentation/tutorial/06-bindings/07-multiple-select-bindings/app-b/App.svelte
deleted file mode 100644
index 2fd19c28ad..0000000000
--- a/documentation/tutorial/06-bindings/07-multiple-select-bindings/app-b/App.svelte
+++ /dev/null
@@ -1,50 +0,0 @@
-<script>
-	let scoops = 1;
-	let flavours = ['Mint choc chip'];
-
-	let menu = ['Cookies and cream', 'Mint choc chip', 'Raspberry ripple'];
-
-	function join(flavours) {
-		if (flavours.length === 1) return flavours[0];
-		return `${flavours.slice(0, -1).join(', ')} and ${flavours[flavours.length - 1]}`;
-	}
-</script>
-
-<h2>Size</h2>
-
-<label>
-	<input type="radio" bind:group={scoops} value={1} />
-	One scoop
-</label>
-
-<label>
-	<input type="radio" bind:group={scoops} value={2} />
-	Two scoops
-</label>
-
-<label>
-	<input type="radio" bind:group={scoops} value={3} />
-	Three scoops
-</label>
-
-<h2>Flavours</h2>
-
-<select multiple bind:value={flavours}>
-	{#each menu as flavour}
-		<option value={flavour}>
-			{flavour}
-		</option>
-	{/each}
-</select>
-
-{#if flavours.length === 0}
-	<p>Please select at least one flavour</p>
-{:else if flavours.length > scoops}
-	<p>Can't order more flavours than scoops!</p>
-{:else}
-	<p>
-		You ordered {scoops}
-		{scoops === 1 ? 'scoop' : 'scoops'}
-		of {join(flavours)}
-	</p>
-{/if}
diff --git a/documentation/tutorial/06-bindings/07-multiple-select-bindings/text.md b/documentation/tutorial/06-bindings/07-multiple-select-bindings/text.md
deleted file mode 100644
index 1107d74b54..0000000000
--- a/documentation/tutorial/06-bindings/07-multiple-select-bindings/text.md
+++ /dev/null
@@ -1,21 +0,0 @@
----
-title: Select multiple
----
-
-A select can have a `multiple` attribute, in which case it will populate an array rather than selecting a single value.
-
-Returning to our [earlier ice cream example](/tutorial/group-inputs), we can replace the checkboxes with a `<select multiple>`:
-
-```svelte
-<h2>Flavours</h2>
-
-<select multiple bind:value={flavours}>
-	{#each menu as flavour}
-		<option value={flavour}>
-			{flavour}
-		</option>
-	{/each}
-</select>
-```
-
-> Press and hold the `control` key (or the `command` key on MacOS) for selecting multiple options.
diff --git a/documentation/tutorial/06-bindings/08-contenteditable-bindings/app-a/App.svelte b/documentation/tutorial/06-bindings/08-contenteditable-bindings/app-a/App.svelte
deleted file mode 100644
index 2d01a6ced8..0000000000
--- a/documentation/tutorial/06-bindings/08-contenteditable-bindings/app-a/App.svelte
+++ /dev/null
@@ -1,15 +0,0 @@
-<script>
-	let html = '<p>Write some text!</p>';
-</script>
-
-<div contenteditable="true" />
-
-<pre>{html}</pre>
-
-<style>
-	[contenteditable] {
-		padding: 0.5em;
-		border: 1px solid #eee;
-		border-radius: 4px;
-	}
-</style>
diff --git a/documentation/tutorial/06-bindings/08-contenteditable-bindings/app-b/App.svelte b/documentation/tutorial/06-bindings/08-contenteditable-bindings/app-b/App.svelte
deleted file mode 100644
index b7c0ad8c31..0000000000
--- a/documentation/tutorial/06-bindings/08-contenteditable-bindings/app-b/App.svelte
+++ /dev/null
@@ -1,15 +0,0 @@
-<script>
-	let html = '<p>Write some text!</p>';
-</script>
-
-<div contenteditable="true" bind:innerHTML={html} />
-
-<pre>{html}</pre>
-
-<style>
-	[contenteditable] {
-		padding: 0.5em;
-		border: 1px solid #eee;
-		border-radius: 4px;
-	}
-</style>
diff --git a/documentation/tutorial/06-bindings/08-contenteditable-bindings/text.md b/documentation/tutorial/06-bindings/08-contenteditable-bindings/text.md
deleted file mode 100644
index 7ba124e38a..0000000000
--- a/documentation/tutorial/06-bindings/08-contenteditable-bindings/text.md
+++ /dev/null
@@ -1,15 +0,0 @@
----
-title: Contenteditable bindings
----
-
-Elements with the `contenteditable` attribute support the following bindings:
-
-- [`innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML)
-- [`innerText`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText)
-- [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent)
-
-There are slight differences between each of these, read more about them [here](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent#Differences_from_innerText).
-
-```svelte
-<div contenteditable="true" bind:innerHTML={html} />
-```
diff --git a/documentation/tutorial/06-bindings/09-each-block-bindings/app-a/App.svelte b/documentation/tutorial/06-bindings/09-each-block-bindings/app-a/App.svelte
deleted file mode 100644
index a42c8136ad..0000000000
--- a/documentation/tutorial/06-bindings/09-each-block-bindings/app-a/App.svelte
+++ /dev/null
@@ -1,39 +0,0 @@
-<script>
-	let todos = [
-		{ done: false, text: 'finish Svelte tutorial' },
-		{ done: false, text: 'build an app' },
-		{ done: false, text: 'world domination' }
-	];
-
-	function add() {
-		todos = todos.concat({ done: false, text: '' });
-	}
-
-	function clear() {
-		todos = todos.filter((t) => !t.done);
-	}
-
-	$: remaining = todos.filter((t) => !t.done).length;
-</script>
-
-<h1>Todos</h1>
-
-{#each todos as todo}
-	<div class:done={todo.done}>
-		<input type="checkbox" checked={todo.done} />
-
-		<input placeholder="What needs to be done?" value={todo.text} />
-	</div>
-{/each}
-
-<p>{remaining} remaining</p>
-
-<button on:click={add}> Add new </button>
-
-<button on:click={clear}> Clear completed </button>
-
-<style>
-	.done {
-		opacity: 0.4;
-	}
-</style>
diff --git a/documentation/tutorial/06-bindings/09-each-block-bindings/app-b/App.svelte b/documentation/tutorial/06-bindings/09-each-block-bindings/app-b/App.svelte
deleted file mode 100644
index 3ddb1a4fb4..0000000000
--- a/documentation/tutorial/06-bindings/09-each-block-bindings/app-b/App.svelte
+++ /dev/null
@@ -1,39 +0,0 @@
-<script>
-	let todos = [
-		{ done: false, text: 'finish Svelte tutorial' },
-		{ done: false, text: 'build an app' },
-		{ done: false, text: 'world domination' }
-	];
-
-	function add() {
-		todos = todos.concat({ done: false, text: '' });
-	}
-
-	function clear() {
-		todos = todos.filter((t) => !t.done);
-	}
-
-	$: remaining = todos.filter((t) => !t.done).length;
-</script>
-
-<h1>Todos</h1>
-
-{#each todos as todo}
-	<div class:done={todo.done}>
-		<input type="checkbox" bind:checked={todo.done} />
-
-		<input placeholder="What needs to be done?" bind:value={todo.text} />
-	</div>
-{/each}
-
-<p>{remaining} remaining</p>
-
-<button on:click={add}> Add new </button>
-
-<button on:click={clear}> Clear completed </button>
-
-<style>
-	.done {
-		opacity: 0.4;
-	}
-</style>
diff --git a/documentation/tutorial/06-bindings/09-each-block-bindings/text.md b/documentation/tutorial/06-bindings/09-each-block-bindings/text.md
deleted file mode 100644
index cbba3d97f3..0000000000
--- a/documentation/tutorial/06-bindings/09-each-block-bindings/text.md
+++ /dev/null
@@ -1,17 +0,0 @@
----
-title: Each block bindings
----
-
-You can even bind to properties inside an `each` block.
-
-```svelte
-{#each todos as todo}
-	<div class:done={todo.done}>
-		<input type="checkbox" bind:checked={todo.done} />
-
-		<input placeholder="What needs to be done?" bind:value={todo.text} />
-	</div>
-{/each}
-```
-
-> Note that interacting with these `<input>` elements will mutate the array. If you prefer to work with immutable data, you should avoid these bindings and use event handlers instead.
diff --git a/documentation/tutorial/06-bindings/10-media-elements/app-a/App.svelte b/documentation/tutorial/06-bindings/10-media-elements/app-a/App.svelte
deleted file mode 100644
index 2ab418cc08..0000000000
--- a/documentation/tutorial/06-bindings/10-media-elements/app-a/App.svelte
+++ /dev/null
@@ -1,131 +0,0 @@
-<script>
-	// These values are bound to properties of the video
-	let time = 0;
-	let duration;
-	let paused = true;
-
-	let showControls = true;
-	let showControlsTimeout;
-
-	// Used to track time of last mouse down event
-	let lastMouseDown;
-
-	function handleMove(e) {
-		// Make the controls visible, but fade out after
-		// 2.5 seconds of inactivity
-		clearTimeout(showControlsTimeout);
-		showControlsTimeout = setTimeout(() => (showControls = false), 2500);
-		showControls = true;
-
-		if (!duration) return; // video not loaded yet
-		if (e.type !== 'touchmove' && !(e.buttons & 1)) return; // mouse not down
-
-		const clientX = e.type === 'touchmove' ? e.touches[0].clientX : e.clientX;
-		const { left, right } = this.getBoundingClientRect();
-		time = (duration * (clientX - left)) / (right - left);
-	}
-
-	// we can't rely on the built-in click event, because it fires
-	// after a drag — we have to listen for clicks ourselves
-	function handleMousedown(e) {
-		lastMouseDown = new Date();
-	}
-
-	function handleMouseup(e) {
-		if (new Date() - lastMouseDown < 300) {
-			if (paused) e.target.play();
-			else e.target.pause();
-		}
-	}
-
-	function format(seconds) {
-		if (isNaN(seconds)) return '...';
-
-		const minutes = Math.floor(seconds / 60);
-		seconds = Math.floor(seconds % 60);
-		if (seconds < 10) seconds = '0' + seconds;
-
-		return `${minutes}:${seconds}`;
-	}
-</script>
-
-<h1>Caminandes: Llamigos</h1>
-<p>From <a href="https://studio.blender.org/films">Blender Studio</a>. CC-BY</p>
-
-<div>
-	<video
-		poster="https://sveltejs.github.io/assets/caminandes-llamigos.jpg"
-		src="https://sveltejs.github.io/assets/caminandes-llamigos.mp4"
-		on:mousemove={handleMove}
-		on:touchmove|preventDefault={handleMove}
-		on:mousedown={handleMousedown}
-		on:mouseup={handleMouseup}
-	>
-		<track kind="captions" />
-	</video>
-
-	<div class="controls" style="opacity: {duration && showControls ? 1 : 0}">
-		<progress value={time / duration || 0} />
-
-		<div class="info">
-			<span class="time">{format(time)}</span>
-			<span>click anywhere to {paused ? 'play' : 'pause'} / drag to seek</span>
-			<span class="time">{format(duration)}</span>
-		</div>
-	</div>
-</div>
-
-<style>
-	div {
-		position: relative;
-	}
-
-	.controls {
-		position: absolute;
-		top: 0;
-		width: 100%;
-		transition: opacity 1s;
-	}
-
-	.info {
-		display: flex;
-		width: 100%;
-		justify-content: space-between;
-	}
-
-	span {
-		padding: 0.2em 0.5em;
-		color: white;
-		text-shadow: 0 0 8px black;
-		font-size: 1.4em;
-		opacity: 0.7;
-	}
-
-	.time {
-		width: 3em;
-	}
-
-	.time:last-child {
-		text-align: right;
-	}
-
-	progress {
-		display: block;
-		width: 100%;
-		height: 10px;
-		-webkit-appearance: none;
-		appearance: none;
-	}
-
-	progress::-webkit-progress-bar {
-		background-color: rgba(0, 0, 0, 0.2);
-	}
-
-	progress::-webkit-progress-value {
-		background-color: rgba(255, 255, 255, 0.6);
-	}
-
-	video {
-		width: 100%;
-	}
-</style>
diff --git a/documentation/tutorial/06-bindings/10-media-elements/app-b/App.svelte b/documentation/tutorial/06-bindings/10-media-elements/app-b/App.svelte
deleted file mode 100644
index 836804f8bc..0000000000
--- a/documentation/tutorial/06-bindings/10-media-elements/app-b/App.svelte
+++ /dev/null
@@ -1,134 +0,0 @@
-<script>
-	// These values are bound to properties of the video
-	let time = 0;
-	let duration;
-	let paused = true;
-
-	let showControls = true;
-	let showControlsTimeout;
-
-	// Used to track time of last mouse down event
-	let lastMouseDown;
-
-	function handleMove(e) {
-		// Make the controls visible, but fade out after
-		// 2.5 seconds of inactivity
-		clearTimeout(showControlsTimeout);
-		showControlsTimeout = setTimeout(() => (showControls = false), 2500);
-		showControls = true;
-
-		if (!duration) return; // video not loaded yet
-		if (e.type !== 'touchmove' && !(e.buttons & 1)) return; // mouse not down
-
-		const clientX = e.type === 'touchmove' ? e.touches[0].clientX : e.clientX;
-		const { left, right } = this.getBoundingClientRect();
-		time = (duration * (clientX - left)) / (right - left);
-	}
-
-	// we can't rely on the built-in click event, because it fires
-	// after a drag — we have to listen for clicks ourselves
-	function handleMousedown(e) {
-		lastMouseDown = new Date();
-	}
-
-	function handleMouseup(e) {
-		if (new Date() - lastMouseDown < 300) {
-			if (paused) e.target.play();
-			else e.target.pause();
-		}
-	}
-
-	function format(seconds) {
-		if (isNaN(seconds)) return '...';
-
-		const minutes = Math.floor(seconds / 60);
-		seconds = Math.floor(seconds % 60);
-		if (seconds < 10) seconds = '0' + seconds;
-
-		return `${minutes}:${seconds}`;
-	}
-</script>
-
-<h1>Caminandes: Llamigos</h1>
-<p>From <a href="https://studio.blender.org/films">Blender Studio</a>. CC-BY</p>
-
-<div>
-	<video
-		poster="https://sveltejs.github.io/assets/caminandes-llamigos.jpg"
-		src="https://sveltejs.github.io/assets/caminandes-llamigos.mp4"
-		on:mousemove={handleMove}
-		on:touchmove|preventDefault={handleMove}
-		on:mousedown={handleMousedown}
-		on:mouseup={handleMouseup}
-		bind:currentTime={time}
-		bind:duration
-		bind:paused
-	>
-		<track kind="captions" />
-	</video>
-
-	<div class="controls" style="opacity: {duration && showControls ? 1 : 0}">
-		<progress value={time / duration || 0} />
-
-		<div class="info">
-			<span class="time">{format(time)}</span>
-			<span>click anywhere to {paused ? 'play' : 'pause'} / drag to seek</span>
-			<span class="time">{format(duration)}</span>
-		</div>
-	</div>
-</div>
-
-<style>
-	div {
-		position: relative;
-	}
-
-	.controls {
-		position: absolute;
-		top: 0;
-		width: 100%;
-		transition: opacity 1s;
-	}
-
-	.info {
-		display: flex;
-		width: 100%;
-		justify-content: space-between;
-	}
-
-	span {
-		padding: 0.2em 0.5em;
-		color: white;
-		text-shadow: 0 0 8px black;
-		font-size: 1.4em;
-		opacity: 0.7;
-	}
-
-	.time {
-		width: 3em;
-	}
-
-	.time:last-child {
-		text-align: right;
-	}
-
-	progress {
-		display: block;
-		width: 100%;
-		height: 10px;
-		-webkit-appearance: none;
-		appearance: none;
-	}
-
-	progress::-webkit-progress-bar {
-		background-color: rgba(0, 0, 0, 0.2);
-	}
-
-	progress::-webkit-progress-value {
-		background-color: rgba(255, 255, 255, 0.6);
-	}
-
-	video {
-		width: 100%;
-	}
-</style>
diff --git a/documentation/tutorial/06-bindings/10-media-elements/text.md b/documentation/tutorial/06-bindings/10-media-elements/text.md
deleted file mode 100644
index 5ee2d4ac53..0000000000
--- a/documentation/tutorial/06-bindings/10-media-elements/text.md
+++ /dev/null
@@ -1,48 +0,0 @@
----
-title: Media elements
----
-
-The `<audio>` and `<video>` elements have several properties that you can bind to. This example demonstrates a few of them.
-
-On line 62, add `currentTime={time}`, `duration` and `paused` bindings:
-
-```svelte
-<video
-	poster="https://sveltejs.github.io/assets/caminandes-llamigos.jpg"
-	src="https://sveltejs.github.io/assets/caminandes-llamigos.mp4"
-	on:mousemove={handleMove}
-	on:touchmove|preventDefault={handleMove}
-	on:mousedown={handleMousedown}
-	on:mouseup={handleMouseup}
-	bind:currentTime={time}
-	bind:duration
-	bind:paused
->
-	<track kind="captions" />
-</video>
-```
-
-> `bind:duration` is equivalent to `bind:duration={duration}`
-
-Now, when you click on the video, it will update `time`, `duration` and `paused` as appropriate. This means we can use them to build custom controls.
-
-> Ordinarily on the web, you would track `currentTime` by listening for `timeupdate` events. But these events fire too infrequently, resulting in choppy UI. Svelte does better — it checks `currentTime` using `requestAnimationFrame`.
-
-The complete set of bindings for `<audio>` and `<video>` is as follows — six _readonly_ bindings...
-
-- `duration` (readonly) — the total duration of the video, in seconds
-- `buffered` (readonly) — an array of `{start, end}` objects
-- `seekable` (readonly) — ditto
-- `played` (readonly) — ditto
-- `seeking` (readonly) — boolean
-- `ended` (readonly) — boolean
-
-...and five _two-way_ bindings:
-
-- `currentTime` — the current point in the video, in seconds
-- `playbackRate` — how fast to play the video, where `1` is 'normal'
-- `paused` — this one should be self-explanatory
-- `volume` — a value between 0 and 1
-- `muted` — a boolean value where true is muted
-
-Videos additionally have readonly `videoWidth` and `videoHeight` bindings.
diff --git a/documentation/tutorial/06-bindings/11-dimensions/app-a/App.svelte b/documentation/tutorial/06-bindings/11-dimensions/app-a/App.svelte
deleted file mode 100644
index 96fb6d2477..0000000000
--- a/documentation/tutorial/06-bindings/11-dimensions/app-a/App.svelte
+++ /dev/null
@@ -1,27 +0,0 @@
-<script>
-	let w;
-	let h;
-	let size = 42;
-	let text = 'edit me';
-</script>
-
-<input type="range" bind:value={size} />
-<input bind:value={text} />
-
-<p>size: {w}px x {h}px</p>
-
-<div>
-	<span style="font-size: {size}px">{text}</span>
-</div>
-
-<style>
-	input {
-		display: block;
-	}
-	div {
-		display: inline-block;
-	}
-	span {
-		word-break: break-all;
-	}
-</style>
diff --git a/documentation/tutorial/06-bindings/11-dimensions/app-b/App.svelte b/documentation/tutorial/06-bindings/11-dimensions/app-b/App.svelte
deleted file mode 100644
index 699664748a..0000000000
--- a/documentation/tutorial/06-bindings/11-dimensions/app-b/App.svelte
+++ /dev/null
@@ -1,27 +0,0 @@
-<script>
-	let w;
-	let h;
-	let size = 42;
-	let text = 'edit me';
-</script>
-
-<input type="range" bind:value={size} />
-<input bind:value={text} />
-
-<p>size: {w}px x {h}px</p>
-
-<div bind:clientWidth={w} bind:clientHeight={h}>
-	<span style="font-size: {size}px">{text}</span>
-</div>
-
-<style>
-	input {
-		display: block;
-	}
-	div {
-		display: inline-block;
-	}
-	span {
-		word-break: break-all;
-	}
-</style>
diff --git a/documentation/tutorial/06-bindings/11-dimensions/text.md b/documentation/tutorial/06-bindings/11-dimensions/text.md
deleted file mode 100644
index 7b12a0827e..0000000000
--- a/documentation/tutorial/06-bindings/11-dimensions/text.md
+++ /dev/null
@@ -1,17 +0,0 @@
----
-title: Dimensions
----
-
-Every block-level element has `clientWidth`, `clientHeight`, `offsetWidth` and `offsetHeight` bindings:
-
-```svelte
-<div bind:clientWidth={w} bind:clientHeight={h}>
-	<span style="font-size: {size}px">{text}</span>
-</div>
-```
-
-These bindings are readonly — changing the values of `w` and `h` won't have any effect.
-
-> Elements are measured using a technique similar to [this one](http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/). There is some overhead involved, so it's not recommended to use this for large numbers of elements.
->
-> `display: inline` elements cannot be measured with this approach; nor can elements that can't contain other elements (such as `<canvas>`). In these cases you will need to measure a wrapper element instead.
diff --git a/documentation/tutorial/06-bindings/12-bind-this/app-a/App.svelte b/documentation/tutorial/06-bindings/12-bind-this/app-a/App.svelte
deleted file mode 100644
index b84f7f6bcc..0000000000
--- a/documentation/tutorial/06-bindings/12-bind-this/app-a/App.svelte
+++ /dev/null
@@ -1,49 +0,0 @@
-<script>
-	import { onMount } from 'svelte';
-
-	let canvas;
-
-	onMount(() => {
-		const ctx = canvas.getContext('2d');
-		let frame = requestAnimationFrame(loop);
-
-		function loop(t) {
-			frame = requestAnimationFrame(loop);
-
-			const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
-
-			for (let p = 0; p < imageData.data.length; p += 4) {
-				const i = p / 4;
-				const x = i % canvas.width;
-				const y = (i / canvas.width) >>> 0;
-
-				const r = 64 + (128 * x) / canvas.width + 64 * Math.sin(t / 1000);
-				const g = 64 + (128 * y) / canvas.height + 64 * Math.cos(t / 1000);
-				const b = 128;
-
-				imageData.data[p + 0] = r;
-				imageData.data[p + 1] = g;
-				imageData.data[p + 2] = b;
-				imageData.data[p + 3] = 255;
-			}
-
-			ctx.putImageData(imageData, 0, 0);
-		}
-
-		return () => {
-			cancelAnimationFrame(frame);
-		};
-	});
-</script>
-
-<canvas width={32} height={32} />
-
-<style>
-	canvas {
-		width: 100%;
-		height: 100%;
-		background-color: #666;
-		-webkit-mask: url(/svelte-logo-mask.svg) 50% 50% no-repeat;
-		mask: url(/svelte-logo-mask.svg) 50% 50% no-repeat;
-	}
-</style>
diff --git a/documentation/tutorial/06-bindings/12-bind-this/app-b/App.svelte b/documentation/tutorial/06-bindings/12-bind-this/app-b/App.svelte
deleted file mode 100644
index b73e800947..0000000000
--- a/documentation/tutorial/06-bindings/12-bind-this/app-b/App.svelte
+++ /dev/null
@@ -1,49 +0,0 @@
-<script>
-	import { onMount } from 'svelte';
-
-	let canvas;
-
-	onMount(() => {
-		const ctx = canvas.getContext('2d');
-		let frame = requestAnimationFrame(loop);
-
-		function loop(t) {
-			frame = requestAnimationFrame(loop);
-
-			const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
-
-			for (let p = 0; p < imageData.data.length; p += 4) {
-				const i = p / 4;
-				const x = i % canvas.width;
-				const y = (i / canvas.width) >>> 0;
-
-				const r = 64 + (128 * x) / canvas.width + 64 * Math.sin(t / 1000);
-				const g = 64 + (128 * y) / canvas.height + 64 * Math.cos(t / 1000);
-				const b = 128;
-
-				imageData.data[p + 0] = r;
-				imageData.data[p + 1] = g;
-				imageData.data[p + 2] = b;
-				imageData.data[p + 3] = 255;
-			}
-
-			ctx.putImageData(imageData, 0, 0);
-		}
-
-		return () => {
-			cancelAnimationFrame(frame);
-		};
-	});
-</script>
-
-<canvas bind:this={canvas} width={32} height={32} />
-
-<style>
-	canvas {
-		width: 100%;
-		height: 100%;
-		background-color: #666;
-		-webkit-mask: url(/svelte-logo-mask.svg) 50% 50% no-repeat;
-		mask: url(/svelte-logo-mask.svg) 50% 50% no-repeat;
-	}
-</style>
diff --git a/documentation/tutorial/06-bindings/12-bind-this/text.md b/documentation/tutorial/06-bindings/12-bind-this/text.md
deleted file mode 100644
index 16d3982934..0000000000
--- a/documentation/tutorial/06-bindings/12-bind-this/text.md
+++ /dev/null
@@ -1,11 +0,0 @@
----
-title: This
----
-
-The readonly `this` binding applies to every element (and component) and allows you to obtain a reference to rendered elements. For example, we can get a reference to a `<canvas>` element:
-
-```svelte
-<canvas bind:this={canvas} width={32} height={32} />
-```
-
-Note that the value of `canvas` will be `undefined` until the component has mounted, so we put the logic inside the `onMount` [lifecycle function](/tutorial/onmount).
diff --git a/documentation/tutorial/06-bindings/13-component-bindings/app-a/App.svelte b/documentation/tutorial/06-bindings/13-component-bindings/app-a/App.svelte
deleted file mode 100644
index 9a31c537a6..0000000000
--- a/documentation/tutorial/06-bindings/13-component-bindings/app-a/App.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<script>
-	import Keypad from './Keypad.svelte';
-
-	let pin;
-	$: view = pin ? pin.replace(/\d(?!$)/g, '•') : 'enter your pin';
-
-	function handleSubmit() {
-		alert(`submitted ${pin}`);
-	}
-</script>
-
-<h1 style="color: {pin ? '#333' : '#ccc'}">{view}</h1>
-
-<Keypad on:submit={handleSubmit} />
diff --git a/documentation/tutorial/06-bindings/13-component-bindings/app-a/Keypad.svelte b/documentation/tutorial/06-bindings/13-component-bindings/app-a/Keypad.svelte
deleted file mode 100644
index c814a2238f..0000000000
--- a/documentation/tutorial/06-bindings/13-component-bindings/app-a/Keypad.svelte
+++ /dev/null
@@ -1,40 +0,0 @@
-<script>
-	import { createEventDispatcher } from 'svelte';
-
-	export let value = '';
-
-	const dispatch = createEventDispatcher();
-
-	const select = (num) => () => (value += num);
-	const clear = () => (value = '');
-	const submit = () => dispatch('submit');
-</script>
-
-<div class="keypad">
-	<button on:click={select(1)}>1</button>
-	<button on:click={select(2)}>2</button>
-	<button on:click={select(3)}>3</button>
-	<button on:click={select(4)}>4</button>
-	<button on:click={select(5)}>5</button>
-	<button on:click={select(6)}>6</button>
-	<button on:click={select(7)}>7</button>
-	<button on:click={select(8)}>8</button>
-	<button on:click={select(9)}>9</button>
-
-	<button disabled={!value} on:click={clear}>clear</button>
-	<button on:click={select(0)}>0</button>
-	<button disabled={!value} on:click={submit}>submit</button>
-</div>
-
-<style>
-	.keypad {
-		display: grid;
-		grid-template-columns: repeat(3, 5em);
-		grid-template-rows: repeat(4, 3em);
-		grid-gap: 0.5em;
-	}
-
-	button {
-		margin: 0;
-	}
-</style>
diff --git a/documentation/tutorial/06-bindings/13-component-bindings/app-b/App.svelte b/documentation/tutorial/06-bindings/13-component-bindings/app-b/App.svelte
deleted file mode 100644
index b3666f891d..0000000000
--- a/documentation/tutorial/06-bindings/13-component-bindings/app-b/App.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<script>
-	import Keypad from './Keypad.svelte';
-
-	let pin;
-	$: view = pin ? pin.replace(/\d(?!$)/g, '•') : 'enter your pin';
-
-	function handleSubmit() {
-		alert(`submitted ${pin}`);
-	}
-</script>
-
-<h1 style="color: {pin ? '#333' : '#ccc'}">{view}</h1>
-
-<Keypad bind:value={pin} on:submit={handleSubmit} />
diff --git a/documentation/tutorial/06-bindings/13-component-bindings/app-b/Keypad.svelte b/documentation/tutorial/06-bindings/13-component-bindings/app-b/Keypad.svelte
deleted file mode 100644
index c814a2238f..0000000000
--- a/documentation/tutorial/06-bindings/13-component-bindings/app-b/Keypad.svelte
+++ /dev/null
@@ -1,40 +0,0 @@
-<script>
-	import { createEventDispatcher } from 'svelte';
-
-	export let value = '';
-
-	const dispatch = createEventDispatcher();
-
-	const select = (num) => () => (value += num);
-	const clear = () => (value = '');
-	const submit = () => dispatch('submit');
-</script>
-
-<div class="keypad">
-	<button on:click={select(1)}>1</button>
-	<button on:click={select(2)}>2</button>
-	<button on:click={select(3)}>3</button>
-	<button on:click={select(4)}>4</button>
-	<button on:click={select(5)}>5</button>
-	<button on:click={select(6)}>6</button>
-	<button on:click={select(7)}>7</button>
-	<button on:click={select(8)}>8</button>
-	<button on:click={select(9)}>9</button>
-
-	<button disabled={!value} on:click={clear}>clear</button>
-	<button on:click={select(0)}>0</button>
-	<button disabled={!value} on:click={submit}>submit</button>
-</div>
-
-<style>
-	.keypad {
-		display: grid;
-		grid-template-columns: repeat(3, 5em);
-		grid-template-rows: repeat(4, 3em);
-		grid-gap: 0.5em;
-	}
-
-	button {
-		margin: 0;
-	}
-</style>
diff --git a/documentation/tutorial/06-bindings/13-component-bindings/text.md b/documentation/tutorial/06-bindings/13-component-bindings/text.md
deleted file mode 100644
index a5426fa868..0000000000
--- a/documentation/tutorial/06-bindings/13-component-bindings/text.md
+++ /dev/null
@@ -1,13 +0,0 @@
----
-title: Component bindings
----
-
-Just as you can bind to properties of DOM elements, you can bind to component props. For example, we can bind to the `value` prop of this `<Keypad>` component as though it were a form element:
-
-```svelte
-<Keypad bind:value={pin} on:submit={handleSubmit} />
-```
-
-Now, when the user interacts with the keypad, the value of `pin` in the parent component is immediately updated.
-
-> Use component bindings sparingly. It can be difficult to track the flow of data around your application if you have too many of them, especially if there is no 'single source of truth'.
diff --git a/documentation/tutorial/06-bindings/14-component-this/app-a/App.svelte b/documentation/tutorial/06-bindings/14-component-this/app-a/App.svelte
deleted file mode 100644
index 41a6a10d3d..0000000000
--- a/documentation/tutorial/06-bindings/14-component-this/app-a/App.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<script>
-	import InputField from './InputField.svelte';
-</script>
-
-<InputField />
diff --git a/documentation/tutorial/06-bindings/14-component-this/app-a/InputField.svelte b/documentation/tutorial/06-bindings/14-component-this/app-a/InputField.svelte
deleted file mode 100644
index caf9c2c9e3..0000000000
--- a/documentation/tutorial/06-bindings/14-component-this/app-a/InputField.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<script>
-	let input;
-
-	export function focus() {
-		input.focus();
-	}
-</script>
-
-<input bind:this={input} />
diff --git a/documentation/tutorial/06-bindings/14-component-this/app-b/App.svelte b/documentation/tutorial/06-bindings/14-component-this/app-b/App.svelte
deleted file mode 100644
index b5bd3d2e7d..0000000000
--- a/documentation/tutorial/06-bindings/14-component-this/app-b/App.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<script>
-	import InputField from './InputField.svelte';
-
-	let field;
-</script>
-
-<InputField bind:this={field} />
-
-<button on:click={() => field.focus()}>Focus field</button>
diff --git a/documentation/tutorial/06-bindings/14-component-this/app-b/InputField.svelte b/documentation/tutorial/06-bindings/14-component-this/app-b/InputField.svelte
deleted file mode 100644
index caf9c2c9e3..0000000000
--- a/documentation/tutorial/06-bindings/14-component-this/app-b/InputField.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<script>
-	let input;
-
-	export function focus() {
-		input.focus();
-	}
-</script>
-
-<input bind:this={input} />
diff --git a/documentation/tutorial/06-bindings/14-component-this/text.md b/documentation/tutorial/06-bindings/14-component-this/text.md
deleted file mode 100644
index e87f338234..0000000000
--- a/documentation/tutorial/06-bindings/14-component-this/text.md
+++ /dev/null
@@ -1,21 +0,0 @@
----
-title: Binding to component instances
----
-
-Just as you can bind to DOM elements, you can bind to component instances themselves. For example, we can bind the instance of `<InputField>` to a variable named `field` in the same way we did when binding DOM Elements
-
-```svelte
-<script>
-	let field;
-</script>
-
-<InputField bind:this={field} />
-```
-
-Now we can programmatically interact with this component using `field`.
-
-```svelte
-<button on:click={() => field.focus()}> Focus field </button>
-```
-
-> Note that we can't do `{field.focus}` since field is undefined when the button is first rendered and throws an error.
diff --git a/documentation/tutorial/06-bindings/meta.json b/documentation/tutorial/06-bindings/meta.json
deleted file mode 100644
index b6b01225e3..0000000000
--- a/documentation/tutorial/06-bindings/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Bindings"
-}
diff --git a/documentation/tutorial/07-lifecycle/01-onmount/app-a/App.svelte b/documentation/tutorial/07-lifecycle/01-onmount/app-a/App.svelte
deleted file mode 100644
index 43f8fbd05c..0000000000
--- a/documentation/tutorial/07-lifecycle/01-onmount/app-a/App.svelte
+++ /dev/null
@@ -1,32 +0,0 @@
-<script>
-	let photos = [];
-</script>
-
-<h1>Photo album</h1>
-
-<div class="photos">
-	{#each photos as photo}
-		<figure>
-			<img src={photo.thumbnailUrl} alt={photo.title} />
-			<figcaption>{photo.title}</figcaption>
-		</figure>
-	{:else}
-		<!-- this block renders when photos.length === 0 -->
-		<p>loading...</p>
-	{/each}
-</div>
-
-<style>
-	.photos {
-		width: 100%;
-		display: grid;
-		grid-template-columns: repeat(5, 1fr);
-		grid-gap: 8px;
-	}
-
-	figure,
-	img {
-		width: 100%;
-		margin: 0;
-	}
-</style>
diff --git a/documentation/tutorial/07-lifecycle/01-onmount/app-b/App.svelte b/documentation/tutorial/07-lifecycle/01-onmount/app-b/App.svelte
deleted file mode 100644
index c8d1f6092f..0000000000
--- a/documentation/tutorial/07-lifecycle/01-onmount/app-b/App.svelte
+++ /dev/null
@@ -1,39 +0,0 @@
-<script>
-	import { onMount } from 'svelte';
-
-	let photos = [];
-
-	onMount(async () => {
-		const res = await fetch(`/tutorial/api/album`);
-		photos = await res.json();
-	});
-</script>
-
-<h1>Photo album</h1>
-
-<div class="photos">
-	{#each photos as photo}
-		<figure>
-			<img src={photo.thumbnailUrl} alt={photo.title} />
-			<figcaption>{photo.title}</figcaption>
-		</figure>
-	{:else}
-		<!-- this block renders when photos.length === 0 -->
-		<p>loading...</p>
-	{/each}
-</div>
-
-<style>
-	.photos {
-		width: 100%;
-		display: grid;
-		grid-template-columns: repeat(5, 1fr);
-		grid-gap: 8px;
-	}
-
-	figure,
-	img {
-		width: 100%;
-		margin: 0;
-	}
-</style>
diff --git a/documentation/tutorial/07-lifecycle/01-onmount/text.md b/documentation/tutorial/07-lifecycle/01-onmount/text.md
deleted file mode 100644
index 517a9304df..0000000000
--- a/documentation/tutorial/07-lifecycle/01-onmount/text.md
+++ /dev/null
@@ -1,28 +0,0 @@
----
-title: onMount
----
-
-Every component has a _lifecycle_ that starts when it is created, and ends when it is destroyed. There are a handful of functions that allow you to run code at key moments during that lifecycle.
-
-The one you'll use most frequently is `onMount`, which runs after the component is first rendered to the DOM. We briefly encountered it [earlier](/tutorial/bind-this) when we needed to interact with a `<canvas>` element after it had been rendered.
-
-We'll add an `onMount` handler that loads some data over the network:
-
-```svelte
-<script>
-	import { onMount } from 'svelte';
-
-	let photos = [];
-
-	onMount(async () => {
-		const res = await fetch(`/tutorial/api/album`);
-		photos = await res.json();
-	});
-</script>
-```
-
-> It's recommended to put the `fetch` in `onMount` rather than at the top level of the `<script>` because of server-side rendering (SSR). With the exception of `onDestroy`, lifecycle functions don't run during SSR, which means we can avoid fetching data that should be loaded lazily once the component has been mounted in the DOM.
-
-Lifecycle functions must be called while the component is initialising so that the callback is bound to the component instance — not (say) in a `setTimeout`.
-
-If the `onMount` callback returns a function, that function will be called when the component is destroyed.
diff --git a/documentation/tutorial/07-lifecycle/02-ondestroy/app-a/App.svelte b/documentation/tutorial/07-lifecycle/02-ondestroy/app-a/App.svelte
deleted file mode 100644
index 33a2710ba2..0000000000
--- a/documentation/tutorial/07-lifecycle/02-ondestroy/app-a/App.svelte
+++ /dev/null
@@ -1,21 +0,0 @@
-<script>
-	import Timer from './Timer.svelte';
-
-	let open = false;
-	let seconds = 0;
-
-	const toggle = () => (open = !open);
-	const handleTick = () => (seconds += 1);
-</script>
-
-<div>
-	<button on:click={toggle}>{open ? 'Close' : 'Open'} Timer</button>
-	<p>
-		The Timer component has been open for
-		{seconds}
-		{seconds === 1 ? 'second' : 'seconds'}
-	</p>
-	{#if open}
-		<Timer callback={handleTick} />
-	{/if}
-</div>
diff --git a/documentation/tutorial/07-lifecycle/02-ondestroy/app-a/Timer.svelte b/documentation/tutorial/07-lifecycle/02-ondestroy/app-a/Timer.svelte
deleted file mode 100644
index bf801d908d..0000000000
--- a/documentation/tutorial/07-lifecycle/02-ondestroy/app-a/Timer.svelte
+++ /dev/null
@@ -1,20 +0,0 @@
-<script>
-	import { onInterval } from './utils.js';
-
-	export let callback;
-	export let interval = 1000;
-
-	onInterval(callback, interval);
-</script>
-
-<p>
-	This component executes a callback every
-	{interval} millisecond{interval === 1 ? '' : 's'}
-</p>
-
-<style>
-	p {
-		border: 1px solid blue;
-		padding: 5px;
-	}
-</style>
diff --git a/documentation/tutorial/07-lifecycle/02-ondestroy/app-a/utils.js b/documentation/tutorial/07-lifecycle/02-ondestroy/app-a/utils.js
deleted file mode 100644
index e46039fc35..0000000000
--- a/documentation/tutorial/07-lifecycle/02-ondestroy/app-a/utils.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { onDestroy } from 'svelte';
-
-export function onInterval(callback, milliseconds) {
-	const interval = setInterval(callback, milliseconds);
-
-	onDestroy(() => {
-		// Fix the memory leak here
-	});
-}
diff --git a/documentation/tutorial/07-lifecycle/02-ondestroy/app-b/App.svelte b/documentation/tutorial/07-lifecycle/02-ondestroy/app-b/App.svelte
deleted file mode 100644
index 40406f6cd0..0000000000
--- a/documentation/tutorial/07-lifecycle/02-ondestroy/app-b/App.svelte
+++ /dev/null
@@ -1,21 +0,0 @@
-<script>
-	import Timer from './Timer.svelte';
-
-	let open = true;
-	let seconds = 0;
-
-	const toggle = () => (open = !open);
-	const handleTick = () => (seconds += 1);
-</script>
-
-<div>
-	<button on:click={toggle}>{open ? 'Close' : 'Open'} Timer</button>
-	<p>
-		The Timer component has been open for
-		{seconds}
-		{seconds === 1 ? 'second' : 'seconds'}
-	</p>
-	{#if open}
-		<Timer callback={handleTick} />
-	{/if}
-</div>
diff --git a/documentation/tutorial/07-lifecycle/02-ondestroy/app-b/Timer.svelte b/documentation/tutorial/07-lifecycle/02-ondestroy/app-b/Timer.svelte
deleted file mode 100644
index bf801d908d..0000000000
--- a/documentation/tutorial/07-lifecycle/02-ondestroy/app-b/Timer.svelte
+++ /dev/null
@@ -1,20 +0,0 @@
-<script>
-	import { onInterval } from './utils.js';
-
-	export let callback;
-	export let interval = 1000;
-
-	onInterval(callback, interval);
-</script>
-
-<p>
-	This component executes a callback every
-	{interval} millisecond{interval === 1 ? '' : 's'}
-</p>
-
-<style>
-	p {
-		border: 1px solid blue;
-		padding: 5px;
-	}
-</style>
diff --git a/documentation/tutorial/07-lifecycle/02-ondestroy/app-b/utils.js b/documentation/tutorial/07-lifecycle/02-ondestroy/app-b/utils.js
deleted file mode 100644
index 42423ff320..0000000000
--- a/documentation/tutorial/07-lifecycle/02-ondestroy/app-b/utils.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { onDestroy } from 'svelte';
-
-export function onInterval(callback, milliseconds) {
-	const interval = setInterval(callback, milliseconds);
-
-	onDestroy(() => {
-		clearInterval(interval);
-	});
-}
diff --git a/documentation/tutorial/07-lifecycle/02-ondestroy/text.md b/documentation/tutorial/07-lifecycle/02-ondestroy/text.md
deleted file mode 100644
index 63a1d67d87..0000000000
--- a/documentation/tutorial/07-lifecycle/02-ondestroy/text.md
+++ /dev/null
@@ -1,45 +0,0 @@
----
-title: onDestroy
----
-
-To run code when your component is destroyed, use `onDestroy`.
-
-For example, we can add a `setInterval` function when our component initialises, and clean it up when it's no longer relevant. Doing so prevents memory leaks.
-
-```svelte
-<script>
-	import { onDestroy } from 'svelte';
-
-	let counter = 0;
-	const interval = setInterval(() => (counter += 1), 1000);
-
-	onDestroy(() => clearInterval(interval));
-</script>
-```
-
-While it's important to call lifecycle functions during the component's initialisation, it doesn't matter _where_ you call them from. So if we wanted, we could abstract the interval logic into a helper function in `utils.js`...
-
-```js
-import { onDestroy } from 'svelte';
-
-export function onInterval(callback, milliseconds) {
-	const interval = setInterval(callback, milliseconds);
-
-	onDestroy(() => {
-		clearInterval(interval);
-	});
-}
-```
-
-...and import it into our component:
-
-```svelte
-<script>
-	import { onInterval } from './utils.js';
-
-	let counter = 0;
-	onInterval(() => (counter += 1), 1000);
-</script>
-```
-
-Open and close the timer a few times and make sure the counter keeps ticking and the CPU load increases. This is due to a memory leak as the previous timers are not deleted. Don't forget to refresh the page before solving the example.
diff --git a/documentation/tutorial/07-lifecycle/03-update/app-a/App.svelte b/documentation/tutorial/07-lifecycle/03-update/app-a/App.svelte
deleted file mode 100644
index 235b53889f..0000000000
--- a/documentation/tutorial/07-lifecycle/03-update/app-a/App.svelte
+++ /dev/null
@@ -1,113 +0,0 @@
-<script>
-	import Eliza from 'elizabot';
-	import { beforeUpdate, afterUpdate } from 'svelte';
-
-	let div;
-
-	beforeUpdate(() => {
-		// determine whether we should auto-scroll
-		// once the DOM is updated...
-	});
-
-	afterUpdate(() => {
-		// ...the DOM is now in sync with the data
-	});
-
-	const eliza = new Eliza();
-
-	let comments = [{ author: 'eliza', text: eliza.getInitial() }];
-
-	function handleKeydown(event) {
-		if (event.key === 'Enter') {
-			const text = event.target.value;
-			if (!text) return;
-
-			comments = comments.concat({
-				author: 'user',
-				text
-			});
-
-			event.target.value = '';
-
-			const reply = eliza.transform(text);
-
-			setTimeout(
-				() => {
-					comments = comments.concat({
-						author: 'eliza',
-						text: '...',
-						placeholder: true
-					});
-
-					setTimeout(
-						() => {
-							comments = comments
-								.filter((comment) => !comment.placeholder)
-								.concat({
-									author: 'eliza',
-									text: reply
-								});
-						},
-						500 + Math.random() * 500
-					);
-				},
-				200 + Math.random() * 200
-			);
-		}
-	}
-</script>
-
-<div class="chat">
-	<h1>Eliza</h1>
-
-	<div class="scrollable" bind:this={div}>
-		{#each comments as comment}
-			<article class={comment.author}>
-				<span>{comment.text}</span>
-			</article>
-		{/each}
-	</div>
-
-	<input on:keydown={handleKeydown} />
-</div>
-
-<style>
-	.chat {
-		display: flex;
-		flex-direction: column;
-		height: 100%;
-		max-width: 320px;
-	}
-
-	.scrollable {
-		flex: 1 1 auto;
-		border-top: 1px solid #eee;
-		margin: 0 0 0.5em 0;
-		overflow-y: auto;
-	}
-
-	article {
-		margin: 0.5em 0;
-	}
-
-	.user {
-		text-align: right;
-	}
-
-	span {
-		padding: 0.5em 1em;
-		display: inline-block;
-	}
-
-	.eliza span {
-		background-color: #eee;
-		border-radius: 1em 1em 1em 0;
-	}
-
-	.user span {
-		background-color: #0074d9;
-		color: white;
-		border-radius: 1em 1em 0 1em;
-		word-break: break-all;
-	}
-</style>
diff --git a/documentation/tutorial/07-lifecycle/03-update/app-b/App.svelte b/documentation/tutorial/07-lifecycle/03-update/app-b/App.svelte
deleted file mode 100644
index 7afb5eb427..0000000000
--- a/documentation/tutorial/07-lifecycle/03-update/app-b/App.svelte
+++ /dev/null
@@ -1,113 +0,0 @@
-<script>
-	import Eliza from 'elizabot';
-	import { beforeUpdate, afterUpdate } from 'svelte';
-
-	let div;
-	let autoscroll;
-
-	beforeUpdate(() => {
-		autoscroll = div && div.offsetHeight + div.scrollTop > div.scrollHeight - 20;
-	});
-
-	afterUpdate(() => {
-		if (autoscroll) div.scrollTo(0, div.scrollHeight);
-	});
-
-	const eliza = new Eliza();
-
-	let comments = [{ author: 'eliza', text: eliza.getInitial() }];
-
-	function handleKeydown(event) {
-		if (event.key === 'Enter') {
-			const text = event.target.value;
-			if (!text) return;
-
-			comments = comments.concat({
-				author: 'user',
-				text
-			});
-
-			event.target.value = '';
-
-			const reply = eliza.transform(text);
-
-			setTimeout(
-				() => {
-					comments = comments.concat({
-						author: 'eliza',
-						text: '...',
-						placeholder: true
-					});
-
-					setTimeout(
-						() => {
-							comments = comments
-								.filter((comment) => !comment.placeholder)
-								.concat({
-									author: 'eliza',
-									text: reply
-								});
-						},
-						500 + Math.random() * 500
-					);
-				},
-				200 + Math.random() * 200
-			);
-		}
-	}
-</script>
-
-<div class="chat">
-	<h1>Eliza</h1>
-
-	<div class="scrollable" bind:this={div}>
-		{#each comments as comment}
-			<article class={comment.author}>
-				<span>{comment.text}</span>
-			</article>
-		{/each}
-	</div>
-
-	<input on:keydown={handleKeydown} />
-</div>
-
-<style>
-	.chat {
-		display: flex;
-		flex-direction: column;
-		height: 100%;
-		max-width: 320px;
-	}
-
-	.scrollable {
-		flex: 1 1 auto;
-		border-top: 1px solid #eee;
-		margin: 0 0 0.5em 0;
-		overflow-y: auto;
-	}
-
-	article {
-		margin: 0.5em 0;
-	}
-
-	.user {
-		text-align: right;
-	}
-
-	span {
-		padding: 0.5em 1em;
-		display: inline-block;
-	}
-
-	.eliza span {
-		background-color: #eee;
-		border-radius: 1em 1em 1em 0;
-	}
-
-	.user span {
-		background-color: #0074d9;
-		color: white;
-		border-radius: 1em 1em 0 1em;
-		word-break: break-all;
-	}
-</style>
diff --git a/documentation/tutorial/07-lifecycle/03-update/text.md b/documentation/tutorial/07-lifecycle/03-update/text.md
deleted file mode 100644
index 3c791245b0..0000000000
--- a/documentation/tutorial/07-lifecycle/03-update/text.md
+++ /dev/null
@@ -1,24 +0,0 @@
----
-title: beforeUpdate and afterUpdate
----
-
-The `beforeUpdate` function schedules work to happen immediately before the DOM is updated. `afterUpdate` is its counterpart, used for running code once the DOM is in sync with your data.
-
-Together, they're useful for doing things imperatively that are difficult to achieve in a purely state-driven way, like updating the scroll position of an element.
-
-This [Eliza](https://en.wikipedia.org/wiki/ELIZA) chatbot is annoying to use, because you have to keep scrolling the chat window. Let's fix that.
-
-```js
-let div;
-let autoscroll;
-
-beforeUpdate(() => {
-	autoscroll = div && div.offsetHeight + div.scrollTop > div.scrollHeight - 20;
-});
-
-afterUpdate(() => {
-	if (autoscroll) div.scrollTo(0, div.scrollHeight);
-});
-```
-
-Note that `beforeUpdate` will first run before the component has mounted, so we need to check for the existence of `div` before reading its properties.
diff --git a/documentation/tutorial/07-lifecycle/04-tick/app-a/App.svelte b/documentation/tutorial/07-lifecycle/04-tick/app-a/App.svelte
deleted file mode 100644
index 28251429b5..0000000000
--- a/documentation/tutorial/07-lifecycle/04-tick/app-a/App.svelte
+++ /dev/null
@@ -1,29 +0,0 @@
-<script>
-	let text = `Select some text and hit the tab key to toggle uppercase`;
-
-	async function handleKeydown(event) {
-		if (event.key !== 'Tab') return;
-
-		event.preventDefault();
-
-		const { selectionStart, selectionEnd, value } = this;
-		const selection = value.slice(selectionStart, selectionEnd);
-
-		const replacement = /[a-z]/.test(selection) ? selection.toUpperCase() : selection.toLowerCase();
-
-		text = value.slice(0, selectionStart) + replacement + value.slice(selectionEnd);
-
-		// this has no effect, because the DOM hasn't updated yet
-		this.selectionStart = selectionStart;
-		this.selectionEnd = selectionEnd;
-	}
-</script>
-
-<textarea value={text} on:keydown={handleKeydown} />
-
-<style>
-	textarea {
-		width: 100%;
-		height: 200px;
-	}
-</style>
diff --git a/documentation/tutorial/07-lifecycle/04-tick/app-b/App.svelte b/documentation/tutorial/07-lifecycle/04-tick/app-b/App.svelte
deleted file mode 100644
index 2f076946b3..0000000000
--- a/documentation/tutorial/07-lifecycle/04-tick/app-b/App.svelte
+++ /dev/null
@@ -1,31 +0,0 @@
-<script>
-	import { tick } from 'svelte';
-
-	let text = `Select some text and hit the tab key to toggle uppercase`;
-
-	async function handleKeydown(event) {
-		if (event.key !== 'Tab') return;
-
-		event.preventDefault();
-
-		const { selectionStart, selectionEnd, value } = this;
-		const selection = value.slice(selectionStart, selectionEnd);
-
-		const replacement = /[a-z]/.test(selection) ? selection.toUpperCase() : selection.toLowerCase();
-
-		text = value.slice(0, selectionStart) + replacement + value.slice(selectionEnd);
-
-		await tick();
-		this.selectionStart = selectionStart;
-		this.selectionEnd = selectionEnd;
-	}
-</script>
-
-<textarea value={text} on:keydown={handleKeydown} />
-
-<style>
-	textarea {
-		width: 100%;
-		height: 200px;
-	}
-</style>
diff --git a/documentation/tutorial/07-lifecycle/04-tick/text.md b/documentation/tutorial/07-lifecycle/04-tick/text.md
deleted file mode 100644
index a457247346..0000000000
--- a/documentation/tutorial/07-lifecycle/04-tick/text.md
+++ /dev/null
@@ -1,21 +0,0 @@
----
-title: tick
----
-
-The `tick` function is unlike other lifecycle functions in that you can call it any time, not just when the component first initialises. It returns a promise that resolves as soon as any pending state changes have been applied to the DOM (or immediately, if there are no pending state changes).
-
-When you update component state in Svelte, it doesn't update the DOM immediately. Instead, it waits until the next _microtask_ to see if there are any other changes that need to be applied, including in other components. Doing so avoids unnecessary work and allows the browser to batch things more effectively.
-
-You can see that behaviour in this example. Select a range of text and hit the tab key. Because the `<textarea>` value changes, the current selection is cleared and the cursor jumps, annoyingly, to the end. We can fix this by importing `tick`...
-
-```js
-import { tick } from 'svelte';
-```
-
-...and running it immediately before we set `this.selectionStart` and `this.selectionEnd` at the end of `handleKeydown`:
-
-```js
-await tick();
-this.selectionStart = selectionStart;
-this.selectionEnd = selectionEnd;
-```
diff --git a/documentation/tutorial/07-lifecycle/meta.json b/documentation/tutorial/07-lifecycle/meta.json
deleted file mode 100644
index 5ed3972e7a..0000000000
--- a/documentation/tutorial/07-lifecycle/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Lifecycle"
-}
diff --git a/documentation/tutorial/08-stores/01-writable-stores/app-a/App.svelte b/documentation/tutorial/08-stores/01-writable-stores/app-a/App.svelte
deleted file mode 100644
index 4838325b67..0000000000
--- a/documentation/tutorial/08-stores/01-writable-stores/app-a/App.svelte
+++ /dev/null
@@ -1,18 +0,0 @@
-<script>
-	import { count } from './stores.js';
-	import Incrementer from './Incrementer.svelte';
-	import Decrementer from './Decrementer.svelte';
-	import Resetter from './Resetter.svelte';
-
-	let countValue;
-
-	count.subscribe((value) => {
-		countValue = value;
-	});
-</script>
-
-<h1>The count is {countValue}</h1>
-
-<Incrementer />
-<Decrementer />
-<Resetter />
diff --git a/documentation/tutorial/08-stores/01-writable-stores/app-a/Decrementer.svelte b/documentation/tutorial/08-stores/01-writable-stores/app-a/Decrementer.svelte
deleted file mode 100644
index 049f8aeb47..0000000000
--- a/documentation/tutorial/08-stores/01-writable-stores/app-a/Decrementer.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<script>
-	import { count } from './stores.js';
-
-	function decrement() {
-		// TODO decrement the count
-	}
-</script>
-
-<button on:click={decrement}> - </button>
diff --git a/documentation/tutorial/08-stores/01-writable-stores/app-a/Incrementer.svelte b/documentation/tutorial/08-stores/01-writable-stores/app-a/Incrementer.svelte
deleted file mode 100644
index bfce8f2eac..0000000000
--- a/documentation/tutorial/08-stores/01-writable-stores/app-a/Incrementer.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<script>
-	import { count } from './stores.js';
-
-	function increment() {
-		// TODO increment the count
-	}
-</script>
-
-<button on:click={increment}> + </button>
diff --git a/documentation/tutorial/08-stores/01-writable-stores/app-a/Resetter.svelte b/documentation/tutorial/08-stores/01-writable-stores/app-a/Resetter.svelte
deleted file mode 100644
index 88f0b975d6..0000000000
--- a/documentation/tutorial/08-stores/01-writable-stores/app-a/Resetter.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<script>
-	import { count } from './stores.js';
-
-	function reset() {
-		// TODO reset the count
-	}
-</script>
-
-<button on:click={reset}> reset </button>
diff --git a/documentation/tutorial/08-stores/01-writable-stores/app-a/stores.js b/documentation/tutorial/08-stores/01-writable-stores/app-a/stores.js
deleted file mode 100644
index d432d339ec..0000000000
--- a/documentation/tutorial/08-stores/01-writable-stores/app-a/stores.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { writable } from 'svelte/store';
-
-export const count = writable(0);
diff --git a/documentation/tutorial/08-stores/01-writable-stores/app-b/App.svelte b/documentation/tutorial/08-stores/01-writable-stores/app-b/App.svelte
deleted file mode 100644
index 4838325b67..0000000000
--- a/documentation/tutorial/08-stores/01-writable-stores/app-b/App.svelte
+++ /dev/null
@@ -1,18 +0,0 @@
-<script>
-	import { count } from './stores.js';
-	import Incrementer from './Incrementer.svelte';
-	import Decrementer from './Decrementer.svelte';
-	import Resetter from './Resetter.svelte';
-
-	let countValue;
-
-	count.subscribe((value) => {
-		countValue = value;
-	});
-</script>
-
-<h1>The count is {countValue}</h1>
-
-<Incrementer />
-<Decrementer />
-<Resetter />
diff --git a/documentation/tutorial/08-stores/01-writable-stores/app-b/Decrementer.svelte b/documentation/tutorial/08-stores/01-writable-stores/app-b/Decrementer.svelte
deleted file mode 100644
index 596ba4bbab..0000000000
--- a/documentation/tutorial/08-stores/01-writable-stores/app-b/Decrementer.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<script>
-	import { count } from './stores.js';
-
-	function decrement() {
-		count.update((n) => n - 1);
-	}
-</script>
-
-<button on:click={decrement}> - </button>
diff --git a/documentation/tutorial/08-stores/01-writable-stores/app-b/Incrementer.svelte b/documentation/tutorial/08-stores/01-writable-stores/app-b/Incrementer.svelte
deleted file mode 100644
index 1fb7dea3cb..0000000000
--- a/documentation/tutorial/08-stores/01-writable-stores/app-b/Incrementer.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<script>
-	import { count } from './stores.js';
-
-	function increment() {
-		count.update((n) => n + 1);
-	}
-</script>
-
-<button on:click={increment}> + </button>
diff --git a/documentation/tutorial/08-stores/01-writable-stores/app-b/Resetter.svelte b/documentation/tutorial/08-stores/01-writable-stores/app-b/Resetter.svelte
deleted file mode 100644
index 9c8809961f..0000000000
--- a/documentation/tutorial/08-stores/01-writable-stores/app-b/Resetter.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<script>
-	import { count } from './stores.js';
-
-	function reset() {
-		count.set(0);
-	}
-</script>
-
-<button on:click={reset}> reset </button>
diff --git a/documentation/tutorial/08-stores/01-writable-stores/app-b/stores.js b/documentation/tutorial/08-stores/01-writable-stores/app-b/stores.js
deleted file mode 100644
index d432d339ec..0000000000
--- a/documentation/tutorial/08-stores/01-writable-stores/app-b/stores.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { writable } from 'svelte/store';
-
-export const count = writable(0);
diff --git a/documentation/tutorial/08-stores/01-writable-stores/text.md b/documentation/tutorial/08-stores/01-writable-stores/text.md
deleted file mode 100644
index c3fb17ffad..0000000000
--- a/documentation/tutorial/08-stores/01-writable-stores/text.md
+++ /dev/null
@@ -1,27 +0,0 @@
----
-title: Writable stores
----
-
-Not all application state belongs inside your application's component hierarchy. Sometimes, you'll have values that need to be accessed by multiple unrelated components, or by a regular JavaScript module.
-
-In Svelte, we do this with _stores_. A store is simply an object with a `subscribe` method that allows interested parties to be notified whenever the store value changes. In `App.svelte`, `count` is a store, and we're setting `countValue` in the `count.subscribe` callback.
-
-Click the `stores.js` tab to see the definition of `count`. It's a _writable_ store, which means it has `set` and `update` methods in addition to `subscribe`.
-
-Now go to the `Incrementer.svelte` tab so that we can wire up the `+` button:
-
-```js
-function increment() {
-	count.update((n) => n + 1);
-}
-```
-
-Clicking the `+` button should now update the count. Do the inverse for `Decrementer.svelte`.
-
-Finally, in `Resetter.svelte`, implement `reset`:
-
-```js
-function reset() {
-	count.set(0);
-}
-```
diff --git a/documentation/tutorial/08-stores/02-auto-subscriptions/app-a/App.svelte b/documentation/tutorial/08-stores/02-auto-subscriptions/app-a/App.svelte
deleted file mode 100644
index 4838325b67..0000000000
--- a/documentation/tutorial/08-stores/02-auto-subscriptions/app-a/App.svelte
+++ /dev/null
@@ -1,18 +0,0 @@
-<script>
-	import { count } from './stores.js';
-	import Incrementer from './Incrementer.svelte';
-	import Decrementer from './Decrementer.svelte';
-	import Resetter from './Resetter.svelte';
-
-	let countValue;
-
-	count.subscribe((value) => {
-		countValue = value;
-	});
-</script>
-
-<h1>The count is {countValue}</h1>
-
-<Incrementer />
-<Decrementer />
-<Resetter />
diff --git a/documentation/tutorial/08-stores/02-auto-subscriptions/app-a/Decrementer.svelte b/documentation/tutorial/08-stores/02-auto-subscriptions/app-a/Decrementer.svelte
deleted file mode 100644
index 596ba4bbab..0000000000
--- a/documentation/tutorial/08-stores/02-auto-subscriptions/app-a/Decrementer.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<script>
-	import { count } from './stores.js';
-
-	function decrement() {
-		count.update((n) => n - 1);
-	}
-</script>
-
-<button on:click={decrement}> - </button>
diff --git a/documentation/tutorial/08-stores/02-auto-subscriptions/app-a/Incrementer.svelte b/documentation/tutorial/08-stores/02-auto-subscriptions/app-a/Incrementer.svelte
deleted file mode 100644
index 1fb7dea3cb..0000000000
--- a/documentation/tutorial/08-stores/02-auto-subscriptions/app-a/Incrementer.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<script>
-	import { count } from './stores.js';
-
-	function increment() {
-		count.update((n) => n + 1);
-	}
-</script>
-
-<button on:click={increment}> + </button>
diff --git a/documentation/tutorial/08-stores/02-auto-subscriptions/app-a/Resetter.svelte b/documentation/tutorial/08-stores/02-auto-subscriptions/app-a/Resetter.svelte
deleted file mode 100644
index 9c8809961f..0000000000
--- a/documentation/tutorial/08-stores/02-auto-subscriptions/app-a/Resetter.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<script>
-	import { count } from './stores.js';
-
-	function reset() {
-		count.set(0);
-	}
-</script>
-
-<button on:click={reset}> reset </button>
diff --git a/documentation/tutorial/08-stores/02-auto-subscriptions/app-a/stores.js b/documentation/tutorial/08-stores/02-auto-subscriptions/app-a/stores.js
deleted file mode 100644
index d432d339ec..0000000000
--- a/documentation/tutorial/08-stores/02-auto-subscriptions/app-a/stores.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { writable } from 'svelte/store';
-
-export const count = writable(0);
diff --git a/documentation/tutorial/08-stores/02-auto-subscriptions/app-b/App.svelte b/documentation/tutorial/08-stores/02-auto-subscriptions/app-b/App.svelte
deleted file mode 100644
index 9923689329..0000000000
--- a/documentation/tutorial/08-stores/02-auto-subscriptions/app-b/App.svelte
+++ /dev/null
@@ -1,12 +0,0 @@
-<script>
-	import { count } from './stores.js';
-	import Incrementer from './Incrementer.svelte';
-	import Decrementer from './Decrementer.svelte';
-	import Resetter from './Resetter.svelte';
-</script>
-
-<h1>The count is {$count}</h1>
-
-<Incrementer />
-<Decrementer />
-<Resetter />
diff --git a/documentation/tutorial/08-stores/02-auto-subscriptions/app-b/Decrementer.svelte b/documentation/tutorial/08-stores/02-auto-subscriptions/app-b/Decrementer.svelte
deleted file mode 100644
index 596ba4bbab..0000000000
--- a/documentation/tutorial/08-stores/02-auto-subscriptions/app-b/Decrementer.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<script>
-	import { count } from './stores.js';
-
-	function decrement() {
-		count.update((n) => n - 1);
-	}
-</script>
-
-<button on:click={decrement}> - </button>
diff --git a/documentation/tutorial/08-stores/02-auto-subscriptions/app-b/Incrementer.svelte b/documentation/tutorial/08-stores/02-auto-subscriptions/app-b/Incrementer.svelte
deleted file mode 100644
index 1fb7dea3cb..0000000000
--- a/documentation/tutorial/08-stores/02-auto-subscriptions/app-b/Incrementer.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<script>
-	import { count } from './stores.js';
-
-	function increment() {
-		count.update((n) => n + 1);
-	}
-</script>
-
-<button on:click={increment}> + </button>
diff --git a/documentation/tutorial/08-stores/02-auto-subscriptions/app-b/Resetter.svelte b/documentation/tutorial/08-stores/02-auto-subscriptions/app-b/Resetter.svelte
deleted file mode 100644
index 9c8809961f..0000000000
--- a/documentation/tutorial/08-stores/02-auto-subscriptions/app-b/Resetter.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<script>
-	import { count } from './stores.js';
-
-	function reset() {
-		count.set(0);
-	}
-</script>
-
-<button on:click={reset}> reset </button>
diff --git a/documentation/tutorial/08-stores/02-auto-subscriptions/app-b/stores.js b/documentation/tutorial/08-stores/02-auto-subscriptions/app-b/stores.js
deleted file mode 100644
index d432d339ec..0000000000
--- a/documentation/tutorial/08-stores/02-auto-subscriptions/app-b/stores.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { writable } from 'svelte/store';
-
-export const count = writable(0);
diff --git a/documentation/tutorial/08-stores/02-auto-subscriptions/text.md b/documentation/tutorial/08-stores/02-auto-subscriptions/text.md
deleted file mode 100644
index 9e641606f0..0000000000
--- a/documentation/tutorial/08-stores/02-auto-subscriptions/text.md
+++ /dev/null
@@ -1,56 +0,0 @@
----
-title: Auto-subscriptions
----
-
-The app in the previous example works, but there's a subtle bug — the store is subscribed to, but never unsubscribed. If the component was instantiated and destroyed many times, this would result in a _memory leak_.
-
-Start by declaring `unsubscribe` in `App.svelte`:
-
-```js
-const unsubscribe = count.subscribe((value) => {
-	countValue = value;
-});
-```
-
-> Calling a `subscribe` method returns an `unsubscribe` function.
-
-You now declared `unsubscribe`, but it still needs to be called, for example through the `onDestroy` [lifecycle hook](/tutorial/ondestroy):
-
-```svelte
-<script>
-	import { onDestroy } from 'svelte';
-	import { count } from './stores.js';
-	import Incrementer from './Incrementer.svelte';
-	import Decrementer from './Decrementer.svelte';
-	import Resetter from './Resetter.svelte';
-
-	let countValue;
-
-	const unsubscribe = count.subscribe((value) => {
-		countValue = value;
-	});
-
-	onDestroy(unsubscribe);
-</script>
-
-<h1>The count is {countValue}</h1>
-```
-
-It starts to get a bit boilerplatey though, especially if your component subscribes to multiple stores. Instead, Svelte has a trick up its sleeve — you can reference a store value by prefixing the store name with `$`:
-
-```svelte
-<script>
-	import { count } from './stores.js';
-	import Incrementer from './Incrementer.svelte';
-	import Decrementer from './Decrementer.svelte';
-	import Resetter from './Resetter.svelte';
-</script>
-
-<h1>The count is {$count}</h1>
-```
-
-> Auto-subscription only works with store variables that are declared (or imported) at the top-level scope of a component.
-
-You're not limited to using `$count` inside the markup, either — you can use it anywhere in the `<script>` as well, such as in event handlers or reactive declarations.
-
-> Any name beginning with `$` is assumed to refer to a store value. It's effectively a reserved character — Svelte will prevent you from declaring your own variables with a `$` prefix.
diff --git a/documentation/tutorial/08-stores/03-readable-stores/app-a/App.svelte b/documentation/tutorial/08-stores/03-readable-stores/app-a/App.svelte
deleted file mode 100644
index 6d1d80b455..0000000000
--- a/documentation/tutorial/08-stores/03-readable-stores/app-a/App.svelte
+++ /dev/null
@@ -1,12 +0,0 @@
-<script>
-	import { time } from './stores.js';
-
-	const formatter = new Intl.DateTimeFormat('en', {
-		hour12: true,
-		hour: 'numeric',
-		minute: '2-digit',
-		second: '2-digit'
-	});
-</script>
-
-<h1>The time is {formatter.format($time)}</h1>
diff --git a/documentation/tutorial/08-stores/03-readable-stores/app-a/stores.js b/documentation/tutorial/08-stores/03-readable-stores/app-a/stores.js
deleted file mode 100644
index ec0a749d79..0000000000
--- a/documentation/tutorial/08-stores/03-readable-stores/app-a/stores.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import { readable } from 'svelte/store';
-
-export const time = readable(null, function start(set) {
-	// implementation goes here
-
-	return function stop() {};
-});
diff --git a/documentation/tutorial/08-stores/03-readable-stores/app-b/App.svelte b/documentation/tutorial/08-stores/03-readable-stores/app-b/App.svelte
deleted file mode 100644
index 6d1d80b455..0000000000
--- a/documentation/tutorial/08-stores/03-readable-stores/app-b/App.svelte
+++ /dev/null
@@ -1,12 +0,0 @@
-<script>
-	import { time } from './stores.js';
-
-	const formatter = new Intl.DateTimeFormat('en', {
-		hour12: true,
-		hour: 'numeric',
-		minute: '2-digit',
-		second: '2-digit'
-	});
-</script>
-
-<h1>The time is {formatter.format($time)}</h1>
diff --git a/documentation/tutorial/08-stores/03-readable-stores/app-b/stores.js b/documentation/tutorial/08-stores/03-readable-stores/app-b/stores.js
deleted file mode 100644
index 8c11f6d3aa..0000000000
--- a/documentation/tutorial/08-stores/03-readable-stores/app-b/stores.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import { readable } from 'svelte/store';
-
-export const time = readable(new Date(), function start(set) {
-	const interval = setInterval(() => {
-		set(new Date());
-	}, 1000);
-
-	return function stop() {
-		clearInterval(interval);
-	};
-});
diff --git a/documentation/tutorial/08-stores/03-readable-stores/text.md b/documentation/tutorial/08-stores/03-readable-stores/text.md
deleted file mode 100644
index 5e53852702..0000000000
--- a/documentation/tutorial/08-stores/03-readable-stores/text.md
+++ /dev/null
@@ -1,19 +0,0 @@
----
-title: Readable stores
----
-
-Not all stores should be writable by whoever has a reference to them. For example, you might have a store representing the mouse position or the user's geolocation, and it doesn't make sense to be able to set those values from 'outside'. For those cases, we have _readable_ stores.
-
-Click over to the `stores.js` tab. The first argument to `readable` is an initial value, which can be `null` or `undefined` if you don't have one yet. The second argument is a `start` function that takes a `set` callback and returns a `stop` function. The `start` function is called when the store gets its first subscriber; `stop` is called when the last subscriber unsubscribes.
-
-```js
-export const time = readable(new Date(), function start(set) {
-	const interval = setInterval(() => {
-		set(new Date());
-	}, 1000);
-
-	return function stop() {
-		clearInterval(interval);
-	};
-});
-```
diff --git a/documentation/tutorial/08-stores/04-derived-stores/app-a/App.svelte b/documentation/tutorial/08-stores/04-derived-stores/app-a/App.svelte
deleted file mode 100644
index d1013c1a26..0000000000
--- a/documentation/tutorial/08-stores/04-derived-stores/app-a/App.svelte
+++ /dev/null
@@ -1,18 +0,0 @@
-<script>
-	import { time, elapsed } from './stores.js';
-
-	const formatter = new Intl.DateTimeFormat('en', {
-		hour12: true,
-		hour: 'numeric',
-		minute: '2-digit',
-		second: '2-digit'
-	});
-</script>
-
-<h1>The time is {formatter.format($time)}</h1>
-
-<p>
-	This page has been open for
-	{$elapsed}
-	{$elapsed === 1 ? 'second' : 'seconds'}
-</p>
diff --git a/documentation/tutorial/08-stores/04-derived-stores/app-a/stores.js b/documentation/tutorial/08-stores/04-derived-stores/app-a/stores.js
deleted file mode 100644
index 854dd7d439..0000000000
--- a/documentation/tutorial/08-stores/04-derived-stores/app-a/stores.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import { readable, derived } from 'svelte/store';
-
-export const time = readable(new Date(), function start(set) {
-	const interval = setInterval(() => {
-		set(new Date());
-	}, 1000);
-
-	return function stop() {
-		clearInterval(interval);
-	};
-});
-
-const start = new Date();
-
-export const elapsed = derived(time, ($time) => {});
diff --git a/documentation/tutorial/08-stores/04-derived-stores/app-b/App.svelte b/documentation/tutorial/08-stores/04-derived-stores/app-b/App.svelte
deleted file mode 100644
index d1013c1a26..0000000000
--- a/documentation/tutorial/08-stores/04-derived-stores/app-b/App.svelte
+++ /dev/null
@@ -1,18 +0,0 @@
-<script>
-	import { time, elapsed } from './stores.js';
-
-	const formatter = new Intl.DateTimeFormat('en', {
-		hour12: true,
-		hour: 'numeric',
-		minute: '2-digit',
-		second: '2-digit'
-	});
-</script>
-
-<h1>The time is {formatter.format($time)}</h1>
-
-<p>
-	This page has been open for
-	{$elapsed}
-	{$elapsed === 1 ? 'second' : 'seconds'}
-</p>
diff --git a/documentation/tutorial/08-stores/04-derived-stores/app-b/stores.js b/documentation/tutorial/08-stores/04-derived-stores/app-b/stores.js
deleted file mode 100644
index 741f927845..0000000000
--- a/documentation/tutorial/08-stores/04-derived-stores/app-b/stores.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import { readable, derived } from 'svelte/store';
-
-export const time = readable(new Date(), function start(set) {
-	const interval = setInterval(() => {
-		set(new Date());
-	}, 1000);
-
-	return function stop() {
-		clearInterval(interval);
-	};
-});
-
-const start = new Date();
-
-export const elapsed = derived(time, ($time) => Math.round(($time - start) / 1000));
diff --git a/documentation/tutorial/08-stores/04-derived-stores/text.md b/documentation/tutorial/08-stores/04-derived-stores/text.md
deleted file mode 100644
index 45078abc5c..0000000000
--- a/documentation/tutorial/08-stores/04-derived-stores/text.md
+++ /dev/null
@@ -1,11 +0,0 @@
----
-title: Derived stores
----
-
-You can create a store whose value is based on the value of one or more _other_ stores with `derived`. Building on our previous example, we can create a store that derives the time the page has been open:
-
-```js
-export const elapsed = derived(time, ($time) => Math.round(($time - start) / 1000));
-```
-
-> It's possible to derive a store from multiple inputs, and to explicitly `set` a value instead of returning it (which is useful for deriving values asynchronously). Consult the [API reference](/docs/svelte-store#derived) for more information.
diff --git a/documentation/tutorial/08-stores/05-custom-stores/app-a/App.svelte b/documentation/tutorial/08-stores/05-custom-stores/app-a/App.svelte
deleted file mode 100644
index dbdd299d69..0000000000
--- a/documentation/tutorial/08-stores/05-custom-stores/app-a/App.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<script>
-	import { count } from './stores.js';
-</script>
-
-<h1>The count is {$count}</h1>
-
-<button on:click={count.increment}>+</button>
-<button on:click={count.decrement}>-</button>
-<button on:click={count.reset}>reset</button>
diff --git a/documentation/tutorial/08-stores/05-custom-stores/app-a/stores.js b/documentation/tutorial/08-stores/05-custom-stores/app-a/stores.js
deleted file mode 100644
index 5afb62786d..0000000000
--- a/documentation/tutorial/08-stores/05-custom-stores/app-a/stores.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { writable } from 'svelte/store';
-
-function createCount() {
-	const { subscribe, set, update } = writable(0);
-
-	return {
-		subscribe,
-		increment: () => {},
-		decrement: () => {},
-		reset: () => {}
-	};
-}
-
-export const count = createCount();
diff --git a/documentation/tutorial/08-stores/05-custom-stores/app-b/App.svelte b/documentation/tutorial/08-stores/05-custom-stores/app-b/App.svelte
deleted file mode 100644
index dbdd299d69..0000000000
--- a/documentation/tutorial/08-stores/05-custom-stores/app-b/App.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<script>
-	import { count } from './stores.js';
-</script>
-
-<h1>The count is {$count}</h1>
-
-<button on:click={count.increment}>+</button>
-<button on:click={count.decrement}>-</button>
-<button on:click={count.reset}>reset</button>
diff --git a/documentation/tutorial/08-stores/05-custom-stores/app-b/stores.js b/documentation/tutorial/08-stores/05-custom-stores/app-b/stores.js
deleted file mode 100644
index da11e88df2..0000000000
--- a/documentation/tutorial/08-stores/05-custom-stores/app-b/stores.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { writable } from 'svelte/store';
-
-function createCount() {
-	const { subscribe, set, update } = writable(0);
-
-	return {
-		subscribe,
-		increment: () => update((n) => n + 1),
-		decrement: () => update((n) => n - 1),
-		reset: () => set(0)
-	};
-}
-
-export const count = createCount();
diff --git a/documentation/tutorial/08-stores/05-custom-stores/text.md b/documentation/tutorial/08-stores/05-custom-stores/text.md
deleted file mode 100644
index ebc4276786..0000000000
--- a/documentation/tutorial/08-stores/05-custom-stores/text.md
+++ /dev/null
@@ -1,20 +0,0 @@
----
-title: Custom stores
----
-
-As long as an object correctly implements the `subscribe` method, it's a store. Beyond that, anything goes. It's very easy, therefore, to create custom stores with domain-specific logic.
-
-For example, the `count` store from our earlier example could include `increment`, `decrement` and `reset` methods and avoid exposing `set` and `update`:
-
-```js
-function createCount() {
-	const { subscribe, set, update } = writable(0);
-
-	return {
-		subscribe,
-		increment: () => update((n) => n + 1),
-		decrement: () => update((n) => n - 1),
-		reset: () => set(0)
-	};
-}
-```
diff --git a/documentation/tutorial/08-stores/06-store-bindings/app-a/App.svelte b/documentation/tutorial/08-stores/06-store-bindings/app-a/App.svelte
deleted file mode 100644
index ede9beab31..0000000000
--- a/documentation/tutorial/08-stores/06-store-bindings/app-a/App.svelte
+++ /dev/null
@@ -1,6 +0,0 @@
-<script>
-	import { name, greeting } from './stores.js';
-</script>
-
-<h1>{$greeting}</h1>
-<input value={$name} />
diff --git a/documentation/tutorial/08-stores/06-store-bindings/app-a/stores.js b/documentation/tutorial/08-stores/06-store-bindings/app-a/stores.js
deleted file mode 100644
index 58f25475c5..0000000000
--- a/documentation/tutorial/08-stores/06-store-bindings/app-a/stores.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import { writable, derived } from 'svelte/store';
-
-export const name = writable('world');
-
-export const greeting = derived(name, ($name) => `Hello ${$name}!`);
diff --git a/documentation/tutorial/08-stores/06-store-bindings/app-b/App.svelte b/documentation/tutorial/08-stores/06-store-bindings/app-b/App.svelte
deleted file mode 100644
index 84331e1e7b..0000000000
--- a/documentation/tutorial/08-stores/06-store-bindings/app-b/App.svelte
+++ /dev/null
@@ -1,8 +0,0 @@
-<script>
-	import { name, greeting } from './stores.js';
-</script>
-
-<h1>{$greeting}</h1>
-<input bind:value={$name} />
-
-<button on:click={() => ($name += '!')}> Add exclamation mark! </button>
diff --git a/documentation/tutorial/08-stores/06-store-bindings/app-b/stores.js b/documentation/tutorial/08-stores/06-store-bindings/app-b/stores.js
deleted file mode 100644
index 58f25475c5..0000000000
--- a/documentation/tutorial/08-stores/06-store-bindings/app-b/stores.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import { writable, derived } from 'svelte/store';
-
-export const name = writable('world');
-
-export const greeting = derived(name, ($name) => `Hello ${$name}!`);
diff --git a/documentation/tutorial/08-stores/06-store-bindings/text.md b/documentation/tutorial/08-stores/06-store-bindings/text.md
deleted file mode 100644
index 054140e8d7..0000000000
--- a/documentation/tutorial/08-stores/06-store-bindings/text.md
+++ /dev/null
@@ -1,21 +0,0 @@
----
-title: Store bindings
----
-
-If a store is writable — i.e. it has a `set` method — you can bind to its value, just as you can bind to local component state.
-
-In this example we have a writable store `name` and a derived store `greeting`. Update the `<input>` element:
-
-```svelte
-<input bind:value={$name} />
-```
-
-Changing the input value will now update `name` and all its dependents.
-
-We can also assign directly to store values inside a component. Add a `<button>` element:
-
-```svelte
-<button on:click={() => ($name += '!')}> Add exclamation mark! </button>
-```
-
-The `$name += '!'` assignment is equivalent to `name.set($name + '!')`.
diff --git a/documentation/tutorial/08-stores/meta.json b/documentation/tutorial/08-stores/meta.json
deleted file mode 100644
index c70d14efe5..0000000000
--- a/documentation/tutorial/08-stores/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Stores"
-}
diff --git a/documentation/tutorial/09-motion/01-tweened/app-a/App.svelte b/documentation/tutorial/09-motion/01-tweened/app-a/App.svelte
deleted file mode 100644
index c209dcf36d..0000000000
--- a/documentation/tutorial/09-motion/01-tweened/app-a/App.svelte
+++ /dev/null
@@ -1,24 +0,0 @@
-<script>
-	import { writable } from 'svelte/store';
-
-	const progress = writable(0);
-</script>
-
-<progress value={$progress} />
-
-<button on:click={() => progress.set(0)}> 0% </button>
-
-<button on:click={() => progress.set(0.25)}> 25% </button>
-
-<button on:click={() => progress.set(0.5)}> 50% </button>
-
-<button on:click={() => progress.set(0.75)}> 75% </button>
-
-<button on:click={() => progress.set(1)}> 100% </button>
-
-<style>
-	progress {
-		display: block;
-		width: 100%;
-	}
-</style>
diff --git a/documentation/tutorial/09-motion/01-tweened/app-b/App.svelte b/documentation/tutorial/09-motion/01-tweened/app-b/App.svelte
deleted file mode 100644
index f4fb499f0f..0000000000
--- a/documentation/tutorial/09-motion/01-tweened/app-b/App.svelte
+++ /dev/null
@@ -1,28 +0,0 @@
-<script>
-	import { tweened } from 'svelte/motion';
-	import { cubicOut } from 'svelte/easing';
-
-	const progress = tweened(0, {
-		duration: 400,
-		easing: cubicOut
-	});
-</script>
-
-<progress value={$progress} />
-
-<button on:click={() => progress.set(0)}> 0% </button>
-
-<button on:click={() => progress.set(0.25)}> 25% </button>
-
-<button on:click={() => progress.set(0.5)}> 50% </button>
-
-<button on:click={() => progress.set(0.75)}> 75% </button>
-
-<button on:click={() => progress.set(1)}> 100% </button>
-
-<style>
-	progress {
-		display: block;
-		width: 100%;
-	}
-</style>
diff --git a/documentation/tutorial/09-motion/01-tweened/text.md b/documentation/tutorial/09-motion/01-tweened/text.md
deleted file mode 100644
index 6ef4a8ac7b..0000000000
--- a/documentation/tutorial/09-motion/01-tweened/text.md
+++ /dev/null
@@ -1,40 +0,0 @@
----
-title: Tweened
----
-
-Setting values and watching the DOM update automatically is cool. Know what's even cooler? _Tweening_ those values. Svelte includes tools to help you build slick user interfaces that use animation to communicate changes.
-
-Let's start by changing the `progress` store to a `tweened` value:
-
-```svelte
-<script>
-	import { tweened } from 'svelte/motion';
-
-	const progress = tweened(0);
-</script>
-```
-
-Clicking the buttons causes the progress bar to animate to its new value. It's a bit robotic and unsatisfying though. We need to add an easing function:
-
-```svelte
-<script>
-	import { tweened } from 'svelte/motion';
-	import { cubicOut } from 'svelte/easing';
-
-	const progress = tweened(0, {
-		duration: 400,
-		easing: cubicOut
-	});
-</script>
-```
-
-> The `svelte/easing` module contains the [Penner easing equations](https://web.archive.org/web/20190805215728/http://robertpenner.com/easing/), or you can supply your own `p => t` function where `p` and `t` are both values between 0 and 1.
-
-The full set of options available to `tweened`:
-
-- `delay` — milliseconds before the tween starts
-- `duration` — either the duration of the tween in milliseconds, or a `(from, to) => milliseconds` function allowing you to (e.g.) specify longer tweens for larger changes in value
-- `easing` — a `p => t` function
-- `interpolate` — a custom `(from, to) => t => value` function for interpolating between arbitrary values. By default, Svelte will interpolate between numbers, dates, and identically-shaped arrays and objects (as long as they only contain numbers and dates or other valid arrays and objects). If you want to interpolate (for example) colour strings or transformation matrices, supply a custom interpolator
-
-You can also pass these options to `progress.set` and `progress.update` as a second argument, in which case they will override the defaults. The `set` and `update` methods both return a promise that resolves when the tween completes.
diff --git a/documentation/tutorial/09-motion/02-spring/app-a/App.svelte b/documentation/tutorial/09-motion/02-spring/app-a/App.svelte
deleted file mode 100644
index 39afc6c1a7..0000000000
--- a/documentation/tutorial/09-motion/02-spring/app-a/App.svelte
+++ /dev/null
@@ -1,37 +0,0 @@
-<script>
-	import { writable } from 'svelte/store';
-
-	let coords = writable({ x: 50, y: 50 });
-	let size = writable(10);
-</script>
-
-<div style="position: absolute; right: 1em;">
-	<label>
-		<h3>stiffness ({coords.stiffness})</h3>
-		<input bind:value={coords.stiffness} type="range" min="0" max="1" step="0.01" />
-	</label>
-
-	<label>
-		<h3>damping ({coords.damping})</h3>
-		<input bind:value={coords.damping} type="range" min="0" max="1" step="0.01" />
-	</label>
-</div>
-
-<svg
-	on:mousemove={(e) => coords.set({ x: e.clientX, y: e.clientY })}
-	on:mousedown={() => size.set(30)}
-	on:mouseup={() => size.set(10)}
->
-	<circle cx={$coords.x} cy={$coords.y} r={$size} />
-</svg>
-
-<style>
-	svg {
-		width: 100%;
-		height: 100%;
-		margin: -8px;
-	}
-	circle {
-		fill: #ff3e00;
-	}
-</style>
diff --git a/documentation/tutorial/09-motion/02-spring/app-b/App.svelte b/documentation/tutorial/09-motion/02-spring/app-b/App.svelte
deleted file mode 100644
index 59346dcb3b..0000000000
--- a/documentation/tutorial/09-motion/02-spring/app-b/App.svelte
+++ /dev/null
@@ -1,44 +0,0 @@
-<script>
-	import { spring } from 'svelte/motion';
-
-	let coords = spring(
-		{ x: 50, y: 50 },
-		{
-			stiffness: 0.1,
-			damping: 0.25
-		}
-	);
-
-	let size = spring(10);
-</script>
-
-<div style="position: absolute; right: 1em;">
-	<label>
-		<h3>stiffness ({coords.stiffness})</h3>
-		<input bind:value={coords.stiffness} type="range" min="0" max="1" step="0.01" />
-	</label>
-
-	<label>
-		<h3>damping ({coords.damping})</h3>
-		<input bind:value={coords.damping} type="range" min="0" max="1" step="0.01" />
-	</label>
-</div>
-
-<svg
-	on:mousemove={(e) => coords.set({ x: e.clientX, y: e.clientY })}
-	on:mousedown={() => size.set(30)}
-	on:mouseup={() => size.set(10)}
->
-	<circle cx={$coords.x} cy={$coords.y} r={$size} />
-</svg>
-
-<style>
-	svg {
-		width: 100%;
-		height: 100%;
-		margin: -8px;
-	}
-	circle {
-		fill: #ff3e00;
-	}
-</style>
diff --git a/documentation/tutorial/09-motion/02-spring/text.md b/documentation/tutorial/09-motion/02-spring/text.md
deleted file mode 100644
index 188151e9fc..0000000000
--- a/documentation/tutorial/09-motion/02-spring/text.md
+++ /dev/null
@@ -1,32 +0,0 @@
----
-title: Spring
----
-
-The `spring` function is an alternative to `tweened` that often works better for values that are frequently changing.
-
-In this example we have two stores — one representing the circle's coordinates, and one representing its size. Let's convert them to springs:
-
-```svelte
-<script>
-	import { spring } from 'svelte/motion';
-
-	let coords = spring({ x: 50, y: 50 });
-	let size = spring(10);
-</script>
-```
-
-Both springs have default `stiffness` and `damping` values, which control the spring's, well... springiness. We can specify our own initial values:
-
-```js
-let coords = spring(
-	{ x: 50, y: 50 },
-	{
-		stiffness: 0.1,
-		damping: 0.25
-	}
-);
-```
-
-Waggle your mouse around, and try dragging the sliders to get a feel for how they affect the spring's behaviour. Notice that you can adjust the values while the spring is still in motion.
-
-Consult the [API reference](/docs/svelte-motion#spring) for more information.
diff --git a/documentation/tutorial/09-motion/meta.json b/documentation/tutorial/09-motion/meta.json
deleted file mode 100644
index 14919954a9..0000000000
--- a/documentation/tutorial/09-motion/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Motion"
-}
diff --git a/documentation/tutorial/10-transitions/01-transition/app-a/App.svelte b/documentation/tutorial/10-transitions/01-transition/app-a/App.svelte
deleted file mode 100644
index 5ba3e7fb7b..0000000000
--- a/documentation/tutorial/10-transitions/01-transition/app-a/App.svelte
+++ /dev/null
@@ -1,12 +0,0 @@
-<script>
-	let visible = true;
-</script>
-
-<label>
-	<input type="checkbox" bind:checked={visible} />
-	visible
-</label>
-
-{#if visible}
-	<p>Fades in and out</p>
-{/if}
diff --git a/documentation/tutorial/10-transitions/01-transition/app-b/App.svelte b/documentation/tutorial/10-transitions/01-transition/app-b/App.svelte
deleted file mode 100644
index 29e9254d14..0000000000
--- a/documentation/tutorial/10-transitions/01-transition/app-b/App.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script>
-	import { fade } from 'svelte/transition';
-	let visible = true;
-</script>
-
-<label>
-	<input type="checkbox" bind:checked={visible} />
-	visible
-</label>
-
-{#if visible}
-	<p transition:fade>Fades in and out</p>
-{/if}
diff --git a/documentation/tutorial/10-transitions/01-transition/text.md b/documentation/tutorial/10-transitions/01-transition/text.md
deleted file mode 100644
index bc72fbf07b..0000000000
--- a/documentation/tutorial/10-transitions/01-transition/text.md
+++ /dev/null
@@ -1,20 +0,0 @@
----
-title: The transition directive
----
-
-We can make more appealing user interfaces by gracefully transitioning elements into and out of the DOM. Svelte makes this very easy with the `transition` directive.
-
-First, import the `fade` function from `svelte/transition`...
-
-```svelte
-<script>
-	import { fade } from 'svelte/transition';
-	let visible = true;
-</script>
-```
-
-...then add it to the `<p>` element:
-
-```svelte
-<p transition:fade>Fades in and out</p>
-```
diff --git a/documentation/tutorial/10-transitions/02-adding-parameters-to-transitions/app-a/App.svelte b/documentation/tutorial/10-transitions/02-adding-parameters-to-transitions/app-a/App.svelte
deleted file mode 100644
index 29e9254d14..0000000000
--- a/documentation/tutorial/10-transitions/02-adding-parameters-to-transitions/app-a/App.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script>
-	import { fade } from 'svelte/transition';
-	let visible = true;
-</script>
-
-<label>
-	<input type="checkbox" bind:checked={visible} />
-	visible
-</label>
-
-{#if visible}
-	<p transition:fade>Fades in and out</p>
-{/if}
diff --git a/documentation/tutorial/10-transitions/02-adding-parameters-to-transitions/app-b/App.svelte b/documentation/tutorial/10-transitions/02-adding-parameters-to-transitions/app-b/App.svelte
deleted file mode 100644
index 318739f1d0..0000000000
--- a/documentation/tutorial/10-transitions/02-adding-parameters-to-transitions/app-b/App.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script>
-	import { fly } from 'svelte/transition';
-	let visible = true;
-</script>
-
-<label>
-	<input type="checkbox" bind:checked={visible} />
-	visible
-</label>
-
-{#if visible}
-	<p transition:fly={{ y: 200, duration: 2000 }}>Flies in and out</p>
-{/if}
diff --git a/documentation/tutorial/10-transitions/02-adding-parameters-to-transitions/text.md b/documentation/tutorial/10-transitions/02-adding-parameters-to-transitions/text.md
deleted file mode 100644
index 317930c7e4..0000000000
--- a/documentation/tutorial/10-transitions/02-adding-parameters-to-transitions/text.md
+++ /dev/null
@@ -1,20 +0,0 @@
----
-title: Adding parameters
----
-
-Transition functions can accept parameters. Replace the `fade` transition with `fly`...
-
-```svelte
-<script>
-	import { fly } from 'svelte/transition';
-	let visible = true;
-</script>
-```
-
-...and apply it to the `<p>` along with some options:
-
-```svelte
-<p transition:fly={{ y: 200, duration: 2000 }}>Flies in and out</p>
-```
-
-Note that the transition is _reversible_ — if you toggle the checkbox while the transition is ongoing, it transitions from the current point, rather than the beginning or the end.
diff --git a/documentation/tutorial/10-transitions/03-in-and-out/app-a/App.svelte b/documentation/tutorial/10-transitions/03-in-and-out/app-a/App.svelte
deleted file mode 100644
index 318739f1d0..0000000000
--- a/documentation/tutorial/10-transitions/03-in-and-out/app-a/App.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script>
-	import { fly } from 'svelte/transition';
-	let visible = true;
-</script>
-
-<label>
-	<input type="checkbox" bind:checked={visible} />
-	visible
-</label>
-
-{#if visible}
-	<p transition:fly={{ y: 200, duration: 2000 }}>Flies in and out</p>
-{/if}
diff --git a/documentation/tutorial/10-transitions/03-in-and-out/app-b/App.svelte b/documentation/tutorial/10-transitions/03-in-and-out/app-b/App.svelte
deleted file mode 100644
index bb44e5ca9f..0000000000
--- a/documentation/tutorial/10-transitions/03-in-and-out/app-b/App.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script>
-	import { fade, fly } from 'svelte/transition';
-	let visible = true;
-</script>
-
-<label>
-	<input type="checkbox" bind:checked={visible} />
-	visible
-</label>
-
-{#if visible}
-	<p in:fly={{ y: 200, duration: 2000 }} out:fade>Flies in, fades out</p>
-{/if}
diff --git a/documentation/tutorial/10-transitions/03-in-and-out/text.md b/documentation/tutorial/10-transitions/03-in-and-out/text.md
deleted file mode 100644
index ed68e08219..0000000000
--- a/documentation/tutorial/10-transitions/03-in-and-out/text.md
+++ /dev/null
@@ -1,17 +0,0 @@
----
-title: In and out
----
-
-Instead of the `transition` directive, an element can have an `in` or an `out` directive, or both together. Import `fade` alongside `fly`...
-
-```js
-import { fade, fly } from 'svelte/transition';
-```
-
-...then replace the `transition` directive with separate `in` and `out` directives:
-
-```svelte
-<p in:fly={{ y: 200, duration: 2000 }} out:fade>Flies in, fades out</p>
-```
-
-In this case, the transitions are _not_ reversed.
diff --git a/documentation/tutorial/10-transitions/04-custom-css-transitions/app-a/App.svelte b/documentation/tutorial/10-transitions/04-custom-css-transitions/app-a/App.svelte
deleted file mode 100644
index 621a581342..0000000000
--- a/documentation/tutorial/10-transitions/04-custom-css-transitions/app-a/App.svelte
+++ /dev/null
@@ -1,38 +0,0 @@
-<script>
-	import { fade } from 'svelte/transition';
-
-	let visible = true;
-
-	function spin(node, { duration }) {
-		return {
-			duration,
-			css: (t) => ``
-		};
-	}
-</script>
-
-<label>
-	<input type="checkbox" bind:checked={visible} />
-	visible
-</label>
-
-{#if visible}
-	<div class="centered" in:spin={{ duration: 8000 }} out:fade>
-		<span>transitions!</span>
-	</div>
-{/if}
-
-<style>
-	.centered {
-		position: absolute;
-		left: 50%;
-		top: 50%;
-		transform: translate(-50%, -50%);
-	}
-
-	span {
-		position: absolute;
-		transform: translate(-50%, -50%);
-		font-size: 4em;
-	}
-</style>
diff --git a/documentation/tutorial/10-transitions/04-custom-css-transitions/app-b/App.svelte b/documentation/tutorial/10-transitions/04-custom-css-transitions/app-b/App.svelte
deleted file mode 100644
index df055bd8f9..0000000000
--- a/documentation/tutorial/10-transitions/04-custom-css-transitions/app-b/App.svelte
+++ /dev/null
@@ -1,49 +0,0 @@
-<script>
-	import { fade } from 'svelte/transition';
-	import { elasticOut } from 'svelte/easing';
-
-	let visible = true;
-
-	function spin(node, { duration }) {
-		return {
-			duration,
-			css: (t) => {
-				const eased = elasticOut(t);
-
-				return `
-					transform: scale(${eased}) rotate(${eased * 1080}deg);
-					color: hsl(
-						${Math.trunc(t * 360)},
-						${Math.min(100, 1000 - 1000 * t)}%,
-						${Math.min(50, 500 - 500 * t)}%
-					);`;
-			}
-		};
-	}
-</script>
-
-<label>
-	<input type="checkbox" bind:checked={visible} />
-	visible
-</label>
-
-{#if visible}
-	<div class="centered" in:spin={{ duration: 8000 }} out:fade>
-		<span>transitions!</span>
-	</div>
-{/if}
-
-<style>
-	.centered {
-		position: absolute;
-		left: 50%;
-		top: 50%;
-		transform: translate(-50%, -50%);
-	}
-
-	span {
-		position: absolute;
-		transform: translate(-50%, -50%);
-		font-size: 4em;
-	}
-</style>
diff --git a/documentation/tutorial/10-transitions/04-custom-css-transitions/text.md b/documentation/tutorial/10-transitions/04-custom-css-transitions/text.md
deleted file mode 100644
index 0a34058ace..0000000000
--- a/documentation/tutorial/10-transitions/04-custom-css-transitions/text.md
+++ /dev/null
@@ -1,77 +0,0 @@
----
-title: Custom CSS transitions
----
-
-The `svelte/transition` module has a handful of built-in transitions, but it's very easy to create your own. By way of example, this is the source of the `fade` transition:
-
-```js
-function fade(node, { delay = 0, duration = 400 }) {
-	const o = +getComputedStyle(node).opacity;
-
-	return {
-		delay,
-		duration,
-		css: (t) => `opacity: ${t * o}`
-	};
-}
-```
-
-The function takes two arguments — the node to which the transition is applied, and any parameters that were passed in — and returns a transition object which can have the following properties:
-
-- `delay` — milliseconds before the transition begins
-- `duration` — length of the transition in milliseconds
-- `easing` — a `p => t` easing function (see the chapter on [tweening](/tutorial/tweened))
-- `css` — a `(t, u) => css` function, where `u === 1 - t`
-- `tick` — a `(t, u) => {...}` function that has some effect on the node
-
-The `t` value is `0` at the beginning of an intro or the end of an outro, and `1` at the end of an intro or beginning of an outro.
-
-Most of the time you should return the `css` property and _not_ the `tick` property, as CSS animations run off the main thread to prevent jank where possible. Svelte 'simulates' the transition and constructs a CSS animation, then lets it run.
-
-For example, the `fade` transition generates a CSS animation somewhat like this:
-
-```css
-0% {
-	opacity: 0;
-}
-10% {
-	opacity: 0.1;
-}
-20% {
-	opacity: 0.2;
-}
-/* ... */
-100% {
-	opacity: 1;
-}
-```
-
-We can get a lot more creative though. Let's make something truly gratuitous:
-
-```svelte
-<script>
-	import { fade } from 'svelte/transition';
-	import { elasticOut } from 'svelte/easing';
-
-	let visible = true;
-
-	function spin(node, { duration }) {
-		return {
-			duration,
-			css: (t) => {
-				const eased = elasticOut(t);
-
-				return `
-					transform: scale(${eased}) rotate(${eased * 1080}deg);
-					color: hsl(
-						${Math.trunc(t * 360)},
-						${Math.min(100, 1000 - 1000 * t)}%,
-						${Math.min(50, 500 - 500 * t)}%
-					);`;
-			}
-		};
-	}
-</script>
-```
-
-Remember: with great power comes great responsibility.
diff --git a/documentation/tutorial/10-transitions/05-custom-js-transitions/app-a/App.svelte b/documentation/tutorial/10-transitions/05-custom-js-transitions/app-a/App.svelte
deleted file mode 100644
index d5d029f223..0000000000
--- a/documentation/tutorial/10-transitions/05-custom-js-transitions/app-a/App.svelte
+++ /dev/null
@@ -1,18 +0,0 @@
-<script>
-	let visible = false;
-
-	function typewriter(node, { speed = 50 }) {
-		// implementation goes here
-
-		return {};
-	}
-</script>
-
-<label>
-	<input type="checkbox" bind:checked={visible} />
-	visible
-</label>
-
-{#if visible}
-	<p transition:typewriter>The quick brown fox jumps over the lazy dog</p>
-{/if}
diff --git a/documentation/tutorial/10-transitions/05-custom-js-transitions/app-b/App.svelte b/documentation/tutorial/10-transitions/05-custom-js-transitions/app-b/App.svelte
deleted file mode 100644
index 21536e8683..0000000000
--- a/documentation/tutorial/10-transitions/05-custom-js-transitions/app-b/App.svelte
+++ /dev/null
@@ -1,31 +0,0 @@
-<script>
-	let visible = false;
-
-	function typewriter(node, { speed = 1 }) {
-		const valid = node.childNodes.length === 1 && node.childNodes[0].nodeType === Node.TEXT_NODE;
-
-		if (!valid) {
-			throw new Error(`This transition only works on elements with a single text node child`);
-		}
-
-		const text = node.textContent;
-		const duration = text.length / (speed * 0.01);
-
-		return {
-			duration,
-			tick: (t) => {
-				const i = Math.trunc(text.length * t);
-				node.textContent = text.slice(0, i);
-			}
-		};
-	}
-</script>
-
-<label>
-	<input type="checkbox" bind:checked={visible} />
-	visible
-</label>
-
-{#if visible}
-	<p transition:typewriter>The quick brown fox jumps over the lazy dog</p>
-{/if}
diff --git a/documentation/tutorial/10-transitions/05-custom-js-transitions/text.md b/documentation/tutorial/10-transitions/05-custom-js-transitions/text.md
deleted file mode 100644
index 3b330c6268..0000000000
--- a/documentation/tutorial/10-transitions/05-custom-js-transitions/text.md
+++ /dev/null
@@ -1,26 +0,0 @@
----
-title: Custom JS transitions
----
-
-While you should generally use CSS for transitions as much as possible, there are some effects that can't be achieved without JavaScript, such as a typewriter effect:
-
-```js
-function typewriter(node, { speed = 1 }) {
-	const valid = node.childNodes.length === 1 && node.childNodes[0].nodeType === Node.TEXT_NODE;
-
-	if (!valid) {
-		throw new Error(`This transition only works on elements with a single text node child`);
-	}
-
-	const text = node.textContent;
-	const duration = text.length / (speed * 0.01);
-
-	return {
-		duration,
-		tick: (t) => {
-			const i = Math.trunc(text.length * t);
-			node.textContent = text.slice(0, i);
-		}
-	};
-}
-```
diff --git a/documentation/tutorial/10-transitions/06-transition-events/app-a/App.svelte b/documentation/tutorial/10-transitions/06-transition-events/app-a/App.svelte
deleted file mode 100644
index 59458e9c2f..0000000000
--- a/documentation/tutorial/10-transitions/06-transition-events/app-a/App.svelte
+++ /dev/null
@@ -1,17 +0,0 @@
-<script>
-	import { fly } from 'svelte/transition';
-
-	let visible = true;
-	let status = 'waiting...';
-</script>
-
-<p>status: {status}</p>
-
-<label>
-	<input type="checkbox" bind:checked={visible} />
-	visible
-</label>
-
-{#if visible}
-	<p transition:fly={{ y: 200, duration: 2000 }}>Flies in and out</p>
-{/if}
diff --git a/documentation/tutorial/10-transitions/06-transition-events/app-b/App.svelte b/documentation/tutorial/10-transitions/06-transition-events/app-b/App.svelte
deleted file mode 100644
index 31ef18c930..0000000000
--- a/documentation/tutorial/10-transitions/06-transition-events/app-b/App.svelte
+++ /dev/null
@@ -1,25 +0,0 @@
-<script>
-	import { fly } from 'svelte/transition';
-
-	let visible = true;
-	let status = 'waiting...';
-</script>
-
-<p>status: {status}</p>
-
-<label>
-	<input type="checkbox" bind:checked={visible} />
-	visible
-</label>
-
-{#if visible}
-	<p
-		transition:fly={{ y: 200, duration: 2000 }}
-		on:introstart={() => (status = 'intro started')}
-		on:outrostart={() => (status = 'outro started')}
-		on:introend={() => (status = 'intro ended')}
-		on:outroend={() => (status = 'outro ended')}
-	>
-		Flies in and out
-	</p>
-{/if}
diff --git a/documentation/tutorial/10-transitions/06-transition-events/text.md b/documentation/tutorial/10-transitions/06-transition-events/text.md
deleted file mode 100644
index 75cf5dcfab..0000000000
--- a/documentation/tutorial/10-transitions/06-transition-events/text.md
+++ /dev/null
@@ -1,17 +0,0 @@
----
-title: Transition events
----
-
-It can be useful to know when transitions are beginning and ending. Svelte dispatches events that you can listen to like any other DOM event:
-
-```svelte
-<p
-	transition:fly={{ y: 200, duration: 2000 }}
-	on:introstart={() => (status = 'intro started')}
-	on:outrostart={() => (status = 'outro started')}
-	on:introend={() => (status = 'intro ended')}
-	on:outroend={() => (status = 'outro ended')}
->
-	Flies in and out
-</p>
-```
diff --git a/documentation/tutorial/10-transitions/07-global-transitions/app-a/App.svelte b/documentation/tutorial/10-transitions/07-global-transitions/app-a/App.svelte
deleted file mode 100644
index 9700f945b4..0000000000
--- a/documentation/tutorial/10-transitions/07-global-transitions/app-a/App.svelte
+++ /dev/null
@@ -1,31 +0,0 @@
-<script>
-	import { slide } from 'svelte/transition';
-
-	let showItems = true;
-	let i = 5;
-	let items = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten'];
-</script>
-
-<label>
-	<input type="checkbox" bind:checked={showItems} />
-	show list
-</label>
-
-<label>
-	<input type="range" bind:value={i} max="10" />
-</label>
-
-{#if showItems}
-	{#each items.slice(0, i) as item}
-		<div transition:slide>
-			{item}
-		</div>
-	{/each}
-{/if}
-
-<style>
-	div {
-		padding: 0.5em 0;
-		border-top: 1px solid #eee;
-	}
-</style>
diff --git a/documentation/tutorial/10-transitions/07-global-transitions/app-b/App.svelte b/documentation/tutorial/10-transitions/07-global-transitions/app-b/App.svelte
deleted file mode 100644
index 93de6a0cdc..0000000000
--- a/documentation/tutorial/10-transitions/07-global-transitions/app-b/App.svelte
+++ /dev/null
@@ -1,31 +0,0 @@
-<script>
-	import { slide } from 'svelte/transition';
-
-	let showItems = true;
-	let i = 5;
-	let items = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten'];
-</script>
-
-<label>
-	<input type="checkbox" bind:checked={showItems} />
-	show list
-</label>
-
-<label>
-	<input type="range" bind:value={i} max="10" />
-</label>
-
-{#if showItems}
-	{#each items.slice(0, i) as item}
-		<div transition:slide|global>
-			{item}
-		</div>
-	{/each}
-{/if}
-
-<style>
-	div {
-		padding: 0.5em 0;
-		border-top: 1px solid #eee;
-	}
-</style>
diff --git a/documentation/tutorial/10-transitions/07-global-transitions/text.md b/documentation/tutorial/10-transitions/07-global-transitions/text.md
deleted file mode 100644
index 8f31620623..0000000000
--- a/documentation/tutorial/10-transitions/07-global-transitions/text.md
+++ /dev/null
@@ -1,17 +0,0 @@
----
-title: Global transitions
----
-
-Ordinarily, transitions will only play on elements when their direct containing block is added or destroyed. In the example here, toggling the visibility of the entire list does not apply transitions to individual list elements.
-
-Instead, we'd like transitions to not only play when individual items are added and removed with the slider but also when we toggle the checkbox.
-
-We can achieve this with a _global_ transition, which plays when _any_ block containing the transitions is added or removed:
-
-```svelte
-<div transition:slide|global>
-	{item}
-</div>
-```
-
-> In Svelte 3, transitions were global by default and you had to use the `|local` modifier to make them local.
diff --git a/documentation/tutorial/10-transitions/08-deferred-transitions/app-a/App.svelte b/documentation/tutorial/10-transitions/08-deferred-transitions/app-a/App.svelte
deleted file mode 100644
index 71d1923c80..0000000000
--- a/documentation/tutorial/10-transitions/08-deferred-transitions/app-a/App.svelte
+++ /dev/null
@@ -1,150 +0,0 @@
-<script>
-	import { quintOut } from 'svelte/easing';
-	import { crossfade } from 'svelte/transition';
-
-	const [send, receive] = crossfade({
-		duration: (d) => Math.sqrt(d * 200),
-
-		fallback(node, params) {
-			const style = getComputedStyle(node);
-			const transform = style.transform === 'none' ? '' : style.transform;
-
-			return {
-				duration: 600,
-				easing: quintOut,
-				css: (t) => `
-					transform: ${transform} scale(${t});
-					opacity: ${t}
-				`
-			};
-		}
-	});
-
-	let uid = 1;
-
-	let todos = [
-		{ id: uid++, done: false, description: 'write some docs' },
-		{ id: uid++, done: false, description: 'start writing blog post' },
-		{ id: uid++, done: true, description: 'buy some milk' },
-		{ id: uid++, done: false, description: 'mow the lawn' },
-		{ id: uid++, done: false, description: 'feed the turtle' },
-		{ id: uid++, done: false, description: 'fix some bugs' }
-	];
-
-	function add(input) {
-		const todo = {
-			id: uid++,
-			done: false,
-			description: input.value
-		};
-
-		todos = [todo, ...todos];
-		input.value = '';
-	}
-
-	function remove(todo) {
-		todos = todos.filter((t) => t !== todo);
-	}
-
-	function mark(todo, done) {
-		todo.done = done;
-		remove(todo);
-		todos = todos.concat(todo);
-	}
-</script>
-
-<div class="board">
-	<input
-		placeholder="what needs to be done?"
-		on:keydown={(e) => e.key === 'Enter' && add(e.target)}
-	/>
-
-	<div class="left">
-		<h2>todo</h2>
-		{#each todos.filter((t) => !t.done) as todo (todo.id)}
-			<label>
-				<input type="checkbox" on:change={() => mark(todo, true)} />
-				{todo.description}
-				<button on:click={() => remove(todo)}>remove</button>
-			</label>
-		{/each}
-	</div>
-
-	<div class="right">
-		<h2>done</h2>
-		{#each todos.filter((t) => t.done) as todo (todo.id)}
-			<label class="done">
-				<input type="checkbox" checked on:change={() => mark(todo, false)} />
-				{todo.description}
-				<button on:click={() => remove(todo)}>remove</button>
-			</label>
-		{/each}
-	</div>
-</div>
-
-<style>
-	.board {
-		display: grid;
-		grid-template-columns: 1fr 1fr;
-		grid-gap: 1em;
-		max-width: 36em;
-		margin: 0 auto;
-	}
-
-	.board > input {
-		font-size: 1.4em;
-		grid-column: 1/3;
-	}
-
-	h2 {
-		font-size: 2em;
-		font-weight: 200;
-		user-select: none;
-		margin: 0 0 0.5em 0;
-	}
-
-	label {
-		display: block;
-		position: relative;
-		line-height: 1.2;
-		padding: 0.5em 2.5em 0.5em 2em;
-		margin: 0 0 0.5em 0;
-		border-radius: 2px;
-		user-select: none;
-		border: 1px solid hsl(240, 8%, 70%);
-		background-color: hsl(240, 8%, 93%);
-		color: #333;
-	}
-
-	input[type='checkbox'] {
-		position: absolute;
-		left: 0.5em;
-		top: 0.6em;
-		margin: 0;
-	}
-
-	.done {
-		border: 1px solid hsl(240, 8%, 90%);
-		background-color: hsl(240, 8%, 98%);
-	}
-
-	button {
-		position: absolute;
-		top: 0;
-		right: 0.2em;
-		width: 2em;
-		height: 100%;
-		background: no-repeat 50% 50%
-			url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23676778' d='M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M17,7H14.5L13.5,6H10.5L9.5,7H7V9H17V7M9,18H15A1,1 0 0,0 16,17V10H8V17A1,1 0 0,0 9,18Z'%3E%3C/path%3E%3C/svg%3E");
-		background-size: 1.4em 1.4em;
-		border: none;
-		opacity: 0;
-		transition: opacity 0.2s;
-		text-indent: -9999px;
-		cursor: pointer;
-	}
-
-	label:hover button {
-		opacity: 1;
-	}
-</style>
diff --git a/documentation/tutorial/10-transitions/08-deferred-transitions/app-b/App.svelte b/documentation/tutorial/10-transitions/08-deferred-transitions/app-b/App.svelte
deleted file mode 100644
index f3850b881f..0000000000
--- a/documentation/tutorial/10-transitions/08-deferred-transitions/app-b/App.svelte
+++ /dev/null
@@ -1,150 +0,0 @@
-<script>
-	import { quintOut } from 'svelte/easing';
-	import { crossfade } from 'svelte/transition';
-
-	const [send, receive] = crossfade({
-		duration: (d) => Math.sqrt(d * 200),
-
-		fallback(node, params) {
-			const style = getComputedStyle(node);
-			const transform = style.transform === 'none' ? '' : style.transform;
-
-			return {
-				duration: 600,
-				easing: quintOut,
-				css: (t) => `
-					transform: ${transform} scale(${t});
-					opacity: ${t}
-				`
-			};
-		}
-	});
-
-	let uid = 1;
-
-	let todos = [
-		{ id: uid++, done: false, description: 'write some docs' },
-		{ id: uid++, done: false, description: 'start writing blog post' },
-		{ id: uid++, done: true, description: 'buy some milk' },
-		{ id: uid++, done: false, description: 'mow the lawn' },
-		{ id: uid++, done: false, description: 'feed the turtle' },
-		{ id: uid++, done: false, description: 'fix some bugs' }
-	];
-
-	function add(input) {
-		const todo = {
-			id: uid++,
-			done: false,
-			description: input.value
-		};
-
-		todos = [todo, ...todos];
-		input.value = '';
-	}
-
-	function remove(todo) {
-		todos = todos.filter((t) => t !== todo);
-	}
-
-	function mark(todo, done) {
-		todo.done = done;
-		remove(todo);
-		todos = todos.concat(todo);
-	}
-</script>
-
-<div class="board">
-	<input
-		placeholder="what needs to be done?"
-		on:keydown={(e) => e.key === 'Enter' && add(e.target)}
-	/>
-
-	<div class="left">
-		<h2>todo</h2>
-		{#each todos.filter((t) => !t.done) as todo (todo.id)}
-			<label in:receive={{ key: todo.id }} out:send={{ key: todo.id }}>
-				<input type="checkbox" on:change={() => mark(todo, true)} />
-				{todo.description}
-				<button on:click={() => remove(todo)}>remove</button>
-			</label>
-		{/each}
-	</div>
-
-	<div class="right">
-		<h2>done</h2>
-		{#each todos.filter((t) => t.done) as todo (todo.id)}
-			<label class="done" in:receive={{ key: todo.id }} out:send={{ key: todo.id }}>
-				<input type="checkbox" checked on:change={() => mark(todo, false)} />
-				{todo.description}
-				<button on:click={() => remove(todo)}>remove</button>
-			</label>
-		{/each}
-	</div>
-</div>
-
-<style>
-	.board {
-		display: grid;
-		grid-template-columns: 1fr 1fr;
-		grid-gap: 1em;
-		max-width: 36em;
-		margin: 0 auto;
-	}
-
-	.board > input {
-		font-size: 1.4em;
-		grid-column: 1/3;
-	}
-
-	h2 {
-		font-size: 2em;
-		font-weight: 200;
-		user-select: none;
-		margin: 0 0 0.5em 0;
-	}
-
-	label {
-		display: block;
-		position: relative;
-		line-height: 1.2;
-		padding: 0.5em 2.5em 0.5em 2em;
-		margin: 0 0 0.5em 0;
-		border-radius: 2px;
-		user-select: none;
-		border: 1px solid hsl(240, 8%, 70%);
-		background-color: hsl(240, 8%, 93%);
-		color: #333;
-	}
-
-	input[type='checkbox'] {
-		position: absolute;
-		left: 0.5em;
-		top: 0.6em;
-		margin: 0;
-	}
-
-	.done {
-		border: 1px solid hsl(240, 8%, 90%);
-		background-color: hsl(240, 8%, 98%);
-	}
-
-	button {
-		position: absolute;
-		top: 0;
-		right: 0.2em;
-		width: 2em;
-		height: 100%;
-		background: no-repeat 50% 50%
-			url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23676778' d='M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M17,7H14.5L13.5,6H10.5L9.5,7H7V9H17V7M9,18H15A1,1 0 0,0 16,17V10H8V17A1,1 0 0,0 9,18Z'%3E%3C/path%3E%3C/svg%3E");
-		background-size: 1.4em 1.4em;
-		border: none;
-		opacity: 0;
-		transition: opacity 0.2s;
-		text-indent: -9999px;
-		cursor: pointer;
-	}
-
-	label:hover button {
-		opacity: 1;
-	}
-</style>
diff --git a/documentation/tutorial/10-transitions/08-deferred-transitions/text.md b/documentation/tutorial/10-transitions/08-deferred-transitions/text.md
deleted file mode 100644
index b56e2fd996..0000000000
--- a/documentation/tutorial/10-transitions/08-deferred-transitions/text.md
+++ /dev/null
@@ -1,30 +0,0 @@
----
-title: Deferred transitions
----
-
-A particularly powerful feature of Svelte's transition engine is the ability to _defer_ transitions, so that they can be coordinated between multiple elements.
-
-Take this pair of todo lists, in which toggling a todo sends it to the opposite list. In the real world, objects don't behave like that — instead of disappearing and reappearing in another place, they move through a series of intermediate positions. Using motion can go a long way towards helping users understand what's happening in your app.
-
-We can achieve this effect using the `crossfade` function, which creates a pair of transitions called `send` and `receive`. When an element is 'sent', it looks for a corresponding element being 'received', and generates a transition that transforms the element to its counterpart's position and fades it out. When an element is 'received', the reverse happens. If there is no counterpart, the `fallback` transition is used.
-
-Find the `<label>` element on line 65, and add the `send` and `receive` transitions:
-
-```svelte
-<label
-	in:receive="{{key: todo.id}}"
-	out:send="{{key: todo.id}}"
->
-```
-
-Do the same for the next `<label>` element:
-
-```svelte
-<label
-	class="done"
-	in:receive="{{key: todo.id}}"
-	out:send="{{key: todo.id}}"
->
-```
-
-Now, when you toggle items, they move smoothly to their new location. The non-transitioning items still jump around awkwardly — we can fix that in the next chapter.
diff --git a/documentation/tutorial/10-transitions/09-key-blocks/app-a/App.svelte b/documentation/tutorial/10-transitions/09-key-blocks/app-a/App.svelte
deleted file mode 100644
index 2a318c510a..0000000000
--- a/documentation/tutorial/10-transitions/09-key-blocks/app-a/App.svelte
+++ /dev/null
@@ -1,20 +0,0 @@
-<script>
-	import { fly } from 'svelte/transition';
-
-	let number = 0;
-</script>
-
-<div>
-	The number is:
-	<span style="display: inline-block" in:fly={{ y: -20 }}>
-		{number}
-	</span>
-</div>
-<br />
-<button
-	on:click={() => {
-		number += 1;
-	}}
->
-	Increment
-</button>
diff --git a/documentation/tutorial/10-transitions/09-key-blocks/app-b/App.svelte b/documentation/tutorial/10-transitions/09-key-blocks/app-b/App.svelte
deleted file mode 100644
index 04b06b2169..0000000000
--- a/documentation/tutorial/10-transitions/09-key-blocks/app-b/App.svelte
+++ /dev/null
@@ -1,22 +0,0 @@
-<script>
-	import { fly } from 'svelte/transition';
-
-	let number = 0;
-</script>
-
-<div>
-	The number is:
-	{#key number}
-		<span style="display: inline-block" in:fly={{ y: -20 }}>
-			{number}
-		</span>
-	{/key}
-</div>
-<br />
-<button
-	on:click={() => {
-		number += 1;
-	}}
->
-	Increment
-</button>
diff --git a/documentation/tutorial/10-transitions/09-key-blocks/text.md b/documentation/tutorial/10-transitions/09-key-blocks/text.md
deleted file mode 100644
index 4154ce5eb6..0000000000
--- a/documentation/tutorial/10-transitions/09-key-blocks/text.md
+++ /dev/null
@@ -1,18 +0,0 @@
----
-title: Key blocks
----
-
-Key blocks destroy and recreate their contents when the value of an expression changes.
-
-```svelte
-{#key number}
-	<span style="display: inline-block" in:fly={{ y: -20 }}>
-		{number}
-	</span>
-{/key}
-```
-
-This is useful if you want an element to play its transition whenever a value changes instead of only when the element enters or leaves the DOM.
-
-Wrap the `<span>` element in a key block depending on `number`. This will make the
-animation play whenever you press the increment button.
diff --git a/documentation/tutorial/10-transitions/meta.json b/documentation/tutorial/10-transitions/meta.json
deleted file mode 100644
index 5981eece3e..0000000000
--- a/documentation/tutorial/10-transitions/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Transitions"
-}
diff --git a/documentation/tutorial/11-animations/01-animate/app-a/App.svelte b/documentation/tutorial/11-animations/01-animate/app-a/App.svelte
deleted file mode 100644
index f3850b881f..0000000000
--- a/documentation/tutorial/11-animations/01-animate/app-a/App.svelte
+++ /dev/null
@@ -1,150 +0,0 @@
-<script>
-	import { quintOut } from 'svelte/easing';
-	import { crossfade } from 'svelte/transition';
-
-	const [send, receive] = crossfade({
-		duration: (d) => Math.sqrt(d * 200),
-
-		fallback(node, params) {
-			const style = getComputedStyle(node);
-			const transform = style.transform === 'none' ? '' : style.transform;
-
-			return {
-				duration: 600,
-				easing: quintOut,
-				css: (t) => `
-					transform: ${transform} scale(${t});
-					opacity: ${t}
-				`
-			};
-		}
-	});
-
-	let uid = 1;
-
-	let todos = [
-		{ id: uid++, done: false, description: 'write some docs' },
-		{ id: uid++, done: false, description: 'start writing blog post' },
-		{ id: uid++, done: true, description: 'buy some milk' },
-		{ id: uid++, done: false, description: 'mow the lawn' },
-		{ id: uid++, done: false, description: 'feed the turtle' },
-		{ id: uid++, done: false, description: 'fix some bugs' }
-	];
-
-	function add(input) {
-		const todo = {
-			id: uid++,
-			done: false,
-			description: input.value
-		};
-
-		todos = [todo, ...todos];
-		input.value = '';
-	}
-
-	function remove(todo) {
-		todos = todos.filter((t) => t !== todo);
-	}
-
-	function mark(todo, done) {
-		todo.done = done;
-		remove(todo);
-		todos = todos.concat(todo);
-	}
-</script>
-
-<div class="board">
-	<input
-		placeholder="what needs to be done?"
-		on:keydown={(e) => e.key === 'Enter' && add(e.target)}
-	/>
-
-	<div class="left">
-		<h2>todo</h2>
-		{#each todos.filter((t) => !t.done) as todo (todo.id)}
-			<label in:receive={{ key: todo.id }} out:send={{ key: todo.id }}>
-				<input type="checkbox" on:change={() => mark(todo, true)} />
-				{todo.description}
-				<button on:click={() => remove(todo)}>remove</button>
-			</label>
-		{/each}
-	</div>
-
-	<div class="right">
-		<h2>done</h2>
-		{#each todos.filter((t) => t.done) as todo (todo.id)}
-			<label class="done" in:receive={{ key: todo.id }} out:send={{ key: todo.id }}>
-				<input type="checkbox" checked on:change={() => mark(todo, false)} />
-				{todo.description}
-				<button on:click={() => remove(todo)}>remove</button>
-			</label>
-		{/each}
-	</div>
-</div>
-
-<style>
-	.board {
-		display: grid;
-		grid-template-columns: 1fr 1fr;
-		grid-gap: 1em;
-		max-width: 36em;
-		margin: 0 auto;
-	}
-
-	.board > input {
-		font-size: 1.4em;
-		grid-column: 1/3;
-	}
-
-	h2 {
-		font-size: 2em;
-		font-weight: 200;
-		user-select: none;
-		margin: 0 0 0.5em 0;
-	}
-
-	label {
-		display: block;
-		position: relative;
-		line-height: 1.2;
-		padding: 0.5em 2.5em 0.5em 2em;
-		margin: 0 0 0.5em 0;
-		border-radius: 2px;
-		user-select: none;
-		border: 1px solid hsl(240, 8%, 70%);
-		background-color: hsl(240, 8%, 93%);
-		color: #333;
-	}
-
-	input[type='checkbox'] {
-		position: absolute;
-		left: 0.5em;
-		top: 0.6em;
-		margin: 0;
-	}
-
-	.done {
-		border: 1px solid hsl(240, 8%, 90%);
-		background-color: hsl(240, 8%, 98%);
-	}
-
-	button {
-		position: absolute;
-		top: 0;
-		right: 0.2em;
-		width: 2em;
-		height: 100%;
-		background: no-repeat 50% 50%
-			url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23676778' d='M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M17,7H14.5L13.5,6H10.5L9.5,7H7V9H17V7M9,18H15A1,1 0 0,0 16,17V10H8V17A1,1 0 0,0 9,18Z'%3E%3C/path%3E%3C/svg%3E");
-		background-size: 1.4em 1.4em;
-		border: none;
-		opacity: 0;
-		transition: opacity 0.2s;
-		text-indent: -9999px;
-		cursor: pointer;
-	}
-
-	label:hover button {
-		opacity: 1;
-	}
-</style>
diff --git a/documentation/tutorial/11-animations/01-animate/app-b/App.svelte b/documentation/tutorial/11-animations/01-animate/app-b/App.svelte
deleted file mode 100644
index ccf09b0f4e..0000000000
--- a/documentation/tutorial/11-animations/01-animate/app-b/App.svelte
+++ /dev/null
@@ -1,151 +0,0 @@
-<script>
-	import { quintOut } from 'svelte/easing';
-	import { crossfade } from 'svelte/transition';
-	import { flip } from 'svelte/animate';
-
-	const [send, receive] = crossfade({
-		duration: (d) => Math.sqrt(d * 200),
-
-		fallback(node, params) {
-			const style = getComputedStyle(node);
-			const transform = style.transform === 'none' ? '' : style.transform;
-
-			return {
-				duration: 600,
-				easing: quintOut,
-				css: (t) => `
-					transform: ${transform} scale(${t});
-					opacity: ${t}
-				`
-			};
-		}
-	});
-
-	let uid = 1;
-
-	let todos = [
-		{ id: uid++, done: false, description: 'write some docs' },
-		{ id: uid++, done: false, description: 'start writing blog post' },
-		{ id: uid++, done: true, description: 'buy some milk' },
-		{ id: uid++, done: false, description: 'mow the lawn' },
-		{ id: uid++, done: false, description: 'feed the turtle' },
-		{ id: uid++, done: false, description: 'fix some bugs' }
-	];
-
-	function add(input) {
-		const todo = {
-			id: uid++,
-			done: false,
-			description: input.value
-		};
-
-		todos = [todo, ...todos];
-		input.value = '';
-	}
-
-	function remove(todo) {
-		todos = todos.filter((t) => t !== todo);
-	}
-
-	function mark(todo, done) {
-		todo.done = done;
-		remove(todo);
-		todos = todos.concat(todo);
-	}
-</script>
-
-<div class="board">
-	<input
-		placeholder="what needs to be done?"
-		on:keydown={(e) => e.key === 'Enter' && add(e.target)}
-	/>
-
-	<div class="left">
-		<h2>todo</h2>
-		{#each todos.filter((t) => !t.done) as todo (todo.id)}
-			<label in:receive={{ key: todo.id }} out:send={{ key: todo.id }} animate:flip>
-				<input type="checkbox" on:change={() => mark(todo, true)} />
-				{todo.description}
-				<button on:click={() => remove(todo)}>remove</button>
-			</label>
-		{/each}
-	</div>
-
-	<div class="right">
-		<h2>done</h2>
-		{#each todos.filter((t) => t.done) as todo (todo.id)}
-			<label class="done" in:receive={{ key: todo.id }} out:send={{ key: todo.id }} animate:flip>
-				<input type="checkbox" checked on:change={() => mark(todo, false)} />
-				{todo.description}
-				<button on:click={() => remove(todo)}>remove</button>
-			</label>
-		{/each}
-	</div>
-</div>
-
-<style>
-	.board {
-		display: grid;
-		grid-template-columns: 1fr 1fr;
-		grid-gap: 1em;
-		max-width: 36em;
-		margin: 0 auto;
-	}
-
-	.board > input {
-		font-size: 1.4em;
-		grid-column: 1/3;
-	}
-
-	h2 {
-		font-size: 2em;
-		font-weight: 200;
-		user-select: none;
-		margin: 0 0 0.5em 0;
-	}
-
-	label {
-		display: block;
-		position: relative;
-		line-height: 1.2;
-		padding: 0.5em 2.5em 0.5em 2em;
-		margin: 0 0 0.5em 0;
-		border-radius: 2px;
-		user-select: none;
-		border: 1px solid hsl(240, 8%, 70%);
-		background-color: hsl(240, 8%, 93%);
-		color: #333;
-	}
-
-	input[type='checkbox'] {
-		position: absolute;
-		left: 0.5em;
-		top: 0.6em;
-		margin: 0;
-	}
-
-	.done {
-		border: 1px solid hsl(240, 8%, 90%);
-		background-color: hsl(240, 8%, 98%);
-	}
-
-	button {
-		position: absolute;
-		top: 0;
-		right: 0.2em;
-		width: 2em;
-		height: 100%;
-		background: no-repeat 50% 50%
-			url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23676778' d='M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M17,7H14.5L13.5,6H10.5L9.5,7H7V9H17V7M9,18H15A1,1 0 0,0 16,17V10H8V17A1,1 0 0,0 9,18Z'%3E%3C/path%3E%3C/svg%3E");
-		background-size: 1.4em 1.4em;
-		border: none;
-		opacity: 0;
-		transition: opacity 0.2s;
-		text-indent: -9999px;
-		cursor: pointer;
-	}
-
-	label:hover button {
-		opacity: 1;
-	}
-</style>
diff --git a/documentation/tutorial/11-animations/01-animate/text.md b/documentation/tutorial/11-animations/01-animate/text.md
deleted file mode 100644
index 983ab0be01..0000000000
--- a/documentation/tutorial/11-animations/01-animate/text.md
+++ /dev/null
@@ -1,37 +0,0 @@
----
-title: The animate directive
----
-
-In the [previous chapter](/tutorial/deferred-transitions), we used deferred transitions to create the illusion of motion as elements move from one todo list to the other.
-
-To complete the illusion, we also need to apply motion to the elements that _aren't_ transitioning. For this, we use the `animate` directive.
-
-First, import the `flip` function — flip stands for ['First, Last, Invert, Play'](https://aerotwist.com/blog/flip-your-animations/) — from `svelte/animate`:
-
-```js
-import { flip } from 'svelte/animate';
-```
-
-Then add it to the `<label>` elements:
-
-```svelte
-<label
-	in:receive="{{key: todo.id}}"
-	out:send="{{key: todo.id}}"
-	animate:flip
->
-```
-
-The movement is a little slow in this case, so we can add a `duration` parameter:
-
-```svelte
-<label
-	in:receive="{{key: todo.id}}"
-	out:send="{{key: todo.id}}"
-	animate:flip="{{duration: 200}}"
->
-```
-
-> `duration` can also be a `d => milliseconds` function, where `d` is the number of pixels the element has to travel
-
-Note that all the transitions and animations are being applied with CSS, rather than JavaScript, meaning they won't block (or be blocked by) the main thread.
diff --git a/documentation/tutorial/11-animations/meta.json b/documentation/tutorial/11-animations/meta.json
deleted file mode 100644
index 25cc16d8bb..0000000000
--- a/documentation/tutorial/11-animations/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Animations"
-}
diff --git a/documentation/tutorial/12-actions/01-actions/app-a/App.svelte b/documentation/tutorial/12-actions/01-actions/app-a/App.svelte
deleted file mode 100644
index cc2ebf66b3..0000000000
--- a/documentation/tutorial/12-actions/01-actions/app-a/App.svelte
+++ /dev/null
@@ -1,28 +0,0 @@
-<script>
-	let showModal = true;
-</script>
-
-<button on:click={() => (showModal = true)}>Show Modal</button>
-{#if showModal}
-	<div class="box" on:outclick={() => (showModal = false)}>Click outside me!</div>
-{/if}
-
-<style>
-	.box {
-		--width: 100px;
-		--height: 100px;
-		position: absolute;
-		width: var(--width);
-		height: var(--height);
-		left: calc(50% - var(--width) / 2);
-		top: calc(50% - var(--height) / 2);
-		display: flex;
-		align-items: center;
-		padding: 8px;
-		border-radius: 4px;
-		background-color: #ff3e00;
-		color: #fff;
-		text-align: center;
-		font-weight: bold;
-	}
-</style>
diff --git a/documentation/tutorial/12-actions/01-actions/app-a/click_outside.js b/documentation/tutorial/12-actions/01-actions/app-a/click_outside.js
deleted file mode 100644
index c406f6e95c..0000000000
--- a/documentation/tutorial/12-actions/01-actions/app-a/click_outside.js
+++ /dev/null
@@ -1,9 +0,0 @@
-export function clickOutside(node) {
-	// setup work goes here...
-
-	return {
-		destroy() {
-			// ...cleanup goes here
-		}
-	};
-}
diff --git a/documentation/tutorial/12-actions/01-actions/app-b/App.svelte b/documentation/tutorial/12-actions/01-actions/app-b/App.svelte
deleted file mode 100644
index fcd0ca6ae3..0000000000
--- a/documentation/tutorial/12-actions/01-actions/app-b/App.svelte
+++ /dev/null
@@ -1,30 +0,0 @@
-<script>
-	import { clickOutside } from './click_outside.js';
-
-	let showModal = true;
-</script>
-
-<button on:click={() => (showModal = true)}>Show Modal</button>
-{#if showModal}
-	<div class="box" use:clickOutside on:outclick={() => (showModal = false)}>Click outside me!</div>
-{/if}
-
-<style>
-	.box {
-		--width: 100px;
-		--height: 100px;
-		position: absolute;
-		width: var(--width);
-		height: var(--height);
-		left: calc(50% - var(--width) / 2);
-		top: calc(50% - var(--height) / 2);
-		display: flex;
-		align-items: center;
-		padding: 8px;
-		border-radius: 4px;
-		background-color: #ff3e00;
-		color: #fff;
-		text-align: center;
-		font-weight: bold;
-	}
-</style>
diff --git a/documentation/tutorial/12-actions/01-actions/app-b/click_outside.js b/documentation/tutorial/12-actions/01-actions/app-b/click_outside.js
deleted file mode 100644
index 3a9a561593..0000000000
--- a/documentation/tutorial/12-actions/01-actions/app-b/click_outside.js
+++ /dev/null
@@ -1,15 +0,0 @@
-export function clickOutside(node) {
-	const handleClick = (event) => {
-		if (!node.contains(event.target)) {
-			node.dispatchEvent(new CustomEvent('outclick'));
-		}
-	};
-
-	document.addEventListener('click', handleClick, true);
-
-	return {
-		destroy() {
-			document.removeEventListener('click', handleClick, true);
-		}
-	};
-}
diff --git a/documentation/tutorial/12-actions/01-actions/text.md b/documentation/tutorial/12-actions/01-actions/text.md
deleted file mode 100644
index 70f5519d26..0000000000
--- a/documentation/tutorial/12-actions/01-actions/text.md
+++ /dev/null
@@ -1,46 +0,0 @@
----
-title: The use directive
----
-
-Actions are essentially element-level lifecycle functions. They're useful for things like:
-
-- interfacing with third-party libraries
-- lazy-loaded images
-- tooltips
-- adding custom event handlers
-
-In this app, we want to make the orange modal close when the user clicks outside it. It has an event handler for the `outclick` event, but it isn't a native DOM event. We have to dispatch it ourselves. First, import the `clickOutside` function...
-
-```js
-import { clickOutside } from './click_outside.js';
-```
-
-...then use it with the element:
-
-```svelte
-<div class="box" use:clickOutside on:outclick={() => (showModal = false)}>Click outside me!</div>
-```
-
-Open the `click_outside.js` file. Like transition functions, an action function receives a `node` (which is the element that the action is applied to) and some optional parameters, and returns an action object. That object can have a `destroy` function, which is called when the element is unmounted.
-
-We want to fire the `outclick` event when the user clicks outside the orange box. One possible implementation looks like this:
-
-```js
-export function clickOutside(node) {
-	const handleClick = (event) => {
-		if (!node.contains(event.target)) {
-			node.dispatchEvent(new CustomEvent('outclick'));
-		}
-	};
-
-	document.addEventListener('click', handleClick, true);
-
-	return {
-		destroy() {
-			document.removeEventListener('click', handleClick, true);
-		}
-	};
-}
-```
-
-Update the `clickOutside` function, click the button to show the modal and then click outside it to close it.
diff --git a/documentation/tutorial/12-actions/02-adding-parameters-to-actions/app-a/App.svelte b/documentation/tutorial/12-actions/02-adding-parameters-to-actions/app-a/App.svelte
deleted file mode 100644
index 4428fa1f4f..0000000000
--- a/documentation/tutorial/12-actions/02-adding-parameters-to-actions/app-a/App.svelte
+++ /dev/null
@@ -1,19 +0,0 @@
-<script>
-	import { longpress } from './longpress.js';
-
-	let pressed = false;
-	let duration = 2000;
-</script>
-
-<label>
-	<input type="range" bind:value={duration} max={2000} step={100} />
-	{duration}ms
-</label>
-
-<button use:longpress on:longpress={() => (pressed = true)} on:mouseenter={() => (pressed = false)}
-	>press and hold</button
->
-
-{#if pressed}
-	<p>congratulations, you pressed and held for {duration}ms</p>
-{/if}
diff --git a/documentation/tutorial/12-actions/02-adding-parameters-to-actions/app-a/longpress.js b/documentation/tutorial/12-actions/02-adding-parameters-to-actions/app-a/longpress.js
deleted file mode 100644
index d4568dad7a..0000000000
--- a/documentation/tutorial/12-actions/02-adding-parameters-to-actions/app-a/longpress.js
+++ /dev/null
@@ -1,24 +0,0 @@
-export function longpress(node, duration) {
-	let timer;
-
-	const handleMousedown = () => {
-		timer = setTimeout(() => {
-			node.dispatchEvent(new CustomEvent('longpress'));
-		}, 500);
-	};
-
-	const handleMouseup = () => {
-		clearTimeout(timer);
-	};
-
-	node.addEventListener('mousedown', handleMousedown);
-	node.addEventListener('mouseup', handleMouseup);
-
-	return {
-		destroy() {
-			clearTimeout(timer);
-			node.removeEventListener('mousedown', handleMousedown);
-			node.removeEventListener('mouseup', handleMouseup);
-		}
-	};
-}
diff --git a/documentation/tutorial/12-actions/02-adding-parameters-to-actions/app-b/App.svelte b/documentation/tutorial/12-actions/02-adding-parameters-to-actions/app-b/App.svelte
deleted file mode 100644
index 23cc9f2f9e..0000000000
--- a/documentation/tutorial/12-actions/02-adding-parameters-to-actions/app-b/App.svelte
+++ /dev/null
@@ -1,21 +0,0 @@
-<script>
-	import { longpress } from './longpress.js';
-
-	let pressed = false;
-	let duration = 2000;
-</script>
-
-<label>
-	<input type="range" bind:value={duration} max={2000} step={100} />
-	{duration}ms
-</label>
-
-<button
-	use:longpress={duration}
-	on:longpress={() => (pressed = true)}
-	on:mouseenter={() => (pressed = false)}>press and hold</button
->
-
-{#if pressed}
-	<p>congratulations, you pressed and held for {duration}ms</p>
-{/if}
diff --git a/documentation/tutorial/12-actions/02-adding-parameters-to-actions/app-b/longpress.js b/documentation/tutorial/12-actions/02-adding-parameters-to-actions/app-b/longpress.js
deleted file mode 100644
index 496e035efc..0000000000
--- a/documentation/tutorial/12-actions/02-adding-parameters-to-actions/app-b/longpress.js
+++ /dev/null
@@ -1,27 +0,0 @@
-export function longpress(node, duration) {
-	let timer;
-
-	const handleMousedown = () => {
-		timer = setTimeout(() => {
-			node.dispatchEvent(new CustomEvent('longpress'));
-		}, duration);
-	};
-
-	const handleMouseup = () => {
-		clearTimeout(timer);
-	};
-
-	node.addEventListener('mousedown', handleMousedown);
-	node.addEventListener('mouseup', handleMouseup);
-
-	return {
-		update(newDuration) {
-			duration = newDuration;
-		},
-		destroy() {
-			clearTimeout(timer);
-			node.removeEventListener('mousedown', handleMousedown);
-			node.removeEventListener('mouseup', handleMouseup);
-		}
-	};
-}
diff --git a/documentation/tutorial/12-actions/02-adding-parameters-to-actions/text.md b/documentation/tutorial/12-actions/02-adding-parameters-to-actions/text.md
deleted file mode 100644
index b1eb261d41..0000000000
--- a/documentation/tutorial/12-actions/02-adding-parameters-to-actions/text.md
+++ /dev/null
@@ -1,44 +0,0 @@
----
-title: Adding parameters
----
-
-Like transitions and animations, an action can take an argument, which the action function will be called with alongside the element it belongs to.
-
-Here, we're using a `longpress` action that fires an event with the same name whenever the user presses and holds the button for a given duration. Right now, if you switch over to the `longpress.js` file, you'll see it's hardcoded to 500ms.
-
-We can change the action function to accept a `duration` as a second argument, and pass that `duration` to the `setTimeout` call:
-
-```js
-export function longpress(node, duration) {
-	// ...
-
-	const handleMousedown = () => {
-		timer = setTimeout(() => {
-			node.dispatchEvent(new CustomEvent('longpress'));
-		}, duration);
-	};
-
-	// ...
-}
-```
-
-Back in `App.svelte`, we can pass the `duration` value to the action:
-
-```svelte
-<button use:longpress={duration}
-```
-
-This _almost_ works — the event now only fires after 2 seconds. But if you slide the duration down, it will still take two seconds.
-
-To change that, we can add an `update` method in `longpress.js`. This will be called whenever the argument changes:
-
-```js
-return {
-	update(newDuration) {
-		duration = newDuration;
-	}
-	// ...
-};
-```
-
-> If you need to pass multiple arguments to an action, combine them into a single object, as in `use:longpress={{duration, spiciness}}`
diff --git a/documentation/tutorial/12-actions/meta.json b/documentation/tutorial/12-actions/meta.json
deleted file mode 100644
index 3943482e82..0000000000
--- a/documentation/tutorial/12-actions/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Actions"
-}
diff --git a/documentation/tutorial/13-advanced-styling/01-classes/app-a/App.svelte b/documentation/tutorial/13-advanced-styling/01-classes/app-a/App.svelte
deleted file mode 100644
index 15efeb2c9f..0000000000
--- a/documentation/tutorial/13-advanced-styling/01-classes/app-a/App.svelte
+++ /dev/null
@@ -1,20 +0,0 @@
-<script>
-	let current = 'foo';
-</script>
-
-<button class={current === 'foo' ? 'selected' : ''} on:click={() => (current = 'foo')}>foo</button>
-
-<button class={current === 'bar' ? 'selected' : ''} on:click={() => (current = 'bar')}>bar</button>
-
-<button class={current === 'baz' ? 'selected' : ''} on:click={() => (current = 'baz')}>baz</button>
-
-<style>
-	button {
-		display: block;
-	}
-
-	.selected {
-		background-color: #ff3e00;
-		color: white;
-	}
-</style>
diff --git a/documentation/tutorial/13-advanced-styling/01-classes/app-b/App.svelte b/documentation/tutorial/13-advanced-styling/01-classes/app-b/App.svelte
deleted file mode 100644
index 1dc18806b3..0000000000
--- a/documentation/tutorial/13-advanced-styling/01-classes/app-b/App.svelte
+++ /dev/null
@@ -1,20 +0,0 @@
-<script>
-	let current = 'foo';
-</script>
-
-<button class:selected={current === 'foo'} on:click={() => (current = 'foo')}>foo</button>
-
-<button class:selected={current === 'bar'} on:click={() => (current = 'bar')}>bar</button>
-
-<button class:selected={current === 'baz'} on:click={() => (current = 'baz')}>baz</button>
-
-<style>
-	button {
-		display: block;
-	}
-
-	.selected {
-		background-color: #ff3e00;
-		color: white;
-	}
-</style>
diff --git a/documentation/tutorial/13-advanced-styling/01-classes/text.md b/documentation/tutorial/13-advanced-styling/01-classes/text.md
deleted file mode 100644
index d60a157e60..0000000000
--- a/documentation/tutorial/13-advanced-styling/01-classes/text.md
+++ /dev/null
@@ -1,25 +0,0 @@
----
-title: The class directive
----
-
-Like any other attribute, you can specify classes with a JavaScript attribute, seen here:
-
-<!-- prettier-ignore -->
-```svelte
-<button
-	class={current === 'foo' ? 'selected' : ''}
-	on:click={() => current = 'foo'}
->foo</button>
-```
-
-This is such a common pattern in UI development that Svelte includes a special directive to simplify it:
-
-<!-- prettier-ignore -->
-```svelte
-<button
-	class:selected={current === 'foo'}
-	on:click={() => current = 'foo'}
->foo</button>
-```
-
-The `selected` class is added to the element whenever the value of the expression is truthy, and removed when it's falsy.
diff --git a/documentation/tutorial/13-advanced-styling/02-class-shorthand/app-a/App.svelte b/documentation/tutorial/13-advanced-styling/02-class-shorthand/app-a/App.svelte
deleted file mode 100644
index ad39916ce5..0000000000
--- a/documentation/tutorial/13-advanced-styling/02-class-shorthand/app-a/App.svelte
+++ /dev/null
@@ -1,18 +0,0 @@
-<script>
-	let big = false;
-</script>
-
-<label>
-	<input type="checkbox" bind:checked={big} />
-	big
-</label>
-
-<div class:big>
-	some {big ? 'big' : 'small'} text
-</div>
-
-<style>
-	.big {
-		font-size: 4em;
-	}
-</style>
diff --git a/documentation/tutorial/13-advanced-styling/02-class-shorthand/app-b/App.svelte b/documentation/tutorial/13-advanced-styling/02-class-shorthand/app-b/App.svelte
deleted file mode 100644
index ad39916ce5..0000000000
--- a/documentation/tutorial/13-advanced-styling/02-class-shorthand/app-b/App.svelte
+++ /dev/null
@@ -1,18 +0,0 @@
-<script>
-	let big = false;
-</script>
-
-<label>
-	<input type="checkbox" bind:checked={big} />
-	big
-</label>
-
-<div class:big>
-	some {big ? 'big' : 'small'} text
-</div>
-
-<style>
-	.big {
-		font-size: 4em;
-	}
-</style>
diff --git a/documentation/tutorial/13-advanced-styling/02-class-shorthand/text.md b/documentation/tutorial/13-advanced-styling/02-class-shorthand/text.md
deleted file mode 100644
index 1a42c23d07..0000000000
--- a/documentation/tutorial/13-advanced-styling/02-class-shorthand/text.md
+++ /dev/null
@@ -1,20 +0,0 @@
----
-title: Shorthand class directive
----
-
-Often, the name of the class will be the same as the name of the value it depends on:
-
-<!-- prettier-ignore -->
-```svelte
-<div class:big={big}>
-	<!-- ... -->
-</div>
-```
-
-In those cases we can use a shorthand form:
-
-```svelte
-<div class:big>
-	<!-- ... -->
-</div>
-```
diff --git a/documentation/tutorial/13-advanced-styling/03-inline-styles/app-a/App.svelte b/documentation/tutorial/13-advanced-styling/03-inline-styles/app-a/App.svelte
deleted file mode 100644
index 7a806717ef..0000000000
--- a/documentation/tutorial/13-advanced-styling/03-inline-styles/app-a/App.svelte
+++ /dev/null
@@ -1,15 +0,0 @@
-<script>
-	let bgOpacity = 0.5;
-	$: color = bgOpacity < 0.6 ? '#000' : '#fff';
-</script>
-
-<input type="range" min="0" max="1" step="0.1" bind:value={bgOpacity} />
-
-<p>This is a paragraph.</p>
-
-<style>
-	p {
-		font-family: 'Comic Sans MS', cursive;
-		background: rgba(255, 62, 0, var(--opacity));
-	}
-</style>
diff --git a/documentation/tutorial/13-advanced-styling/03-inline-styles/app-b/App.svelte b/documentation/tutorial/13-advanced-styling/03-inline-styles/app-b/App.svelte
deleted file mode 100644
index 758db1c567..0000000000
--- a/documentation/tutorial/13-advanced-styling/03-inline-styles/app-b/App.svelte
+++ /dev/null
@@ -1,15 +0,0 @@
-<script>
-	let bgOpacity = 0.5;
-	$: color = bgOpacity < 0.6 ? '#000' : '#fff';
-</script>
-
-<input type="range" min="0" max="1" step="0.1" bind:value={bgOpacity} />
-
-<p style="color: {color}; --opacity: {bgOpacity};">This is a paragraph.</p>
-
-<style>
-	p {
-		font-family: 'Comic Sans MS', cursive;
-		background: rgba(255, 62, 0, var(--opacity));
-	}
-</style>
diff --git a/documentation/tutorial/13-advanced-styling/03-inline-styles/text.md b/documentation/tutorial/13-advanced-styling/03-inline-styles/text.md
deleted file mode 100644
index f558958358..0000000000
--- a/documentation/tutorial/13-advanced-styling/03-inline-styles/text.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-title: Inline styles
----
-
-Apart from adding styles inside style tags, you can also add styles to individual elements using the style attribute. Usually you will want to do styling through CSS, but this can come in handy for dynamic styles, especially when combined with CSS custom properties.
-
-Add the following style attribute to the paragraph element:
-`style="color: {color}; --opacity: {bgOpacity};"`
-
-Great, now you can style the paragraph using variables that change based on your input without having to make a class for every possible value.
diff --git a/documentation/tutorial/13-advanced-styling/04-style-directive/app-a/App.svelte b/documentation/tutorial/13-advanced-styling/04-style-directive/app-a/App.svelte
deleted file mode 100644
index 758db1c567..0000000000
--- a/documentation/tutorial/13-advanced-styling/04-style-directive/app-a/App.svelte
+++ /dev/null
@@ -1,15 +0,0 @@
-<script>
-	let bgOpacity = 0.5;
-	$: color = bgOpacity < 0.6 ? '#000' : '#fff';
-</script>
-
-<input type="range" min="0" max="1" step="0.1" bind:value={bgOpacity} />
-
-<p style="color: {color}; --opacity: {bgOpacity};">This is a paragraph.</p>
-
-<style>
-	p {
-		font-family: 'Comic Sans MS', cursive;
-		background: rgba(255, 62, 0, var(--opacity));
-	}
-</style>
diff --git a/documentation/tutorial/13-advanced-styling/04-style-directive/app-b/App.svelte b/documentation/tutorial/13-advanced-styling/04-style-directive/app-b/App.svelte
deleted file mode 100644
index d75db22ad4..0000000000
--- a/documentation/tutorial/13-advanced-styling/04-style-directive/app-b/App.svelte
+++ /dev/null
@@ -1,15 +0,0 @@
-<script>
-	let bgOpacity = 0.5;
-	$: color = bgOpacity < 0.6 ? '#000' : '#fff';
-</script>
-
-<input type="range" min="0" max="1" step="0.1" bind:value={bgOpacity} />
-
-<p style:color style:--opacity={bgOpacity}>This is a paragraph.</p>
-
-<style>
-	p {
-		font-family: 'Comic Sans MS', cursive;
-		background: rgba(255, 62, 0, var(--opacity));
-	}
-</style>
diff --git a/documentation/tutorial/13-advanced-styling/04-style-directive/text.md b/documentation/tutorial/13-advanced-styling/04-style-directive/text.md
deleted file mode 100644
index fcee97e88a..0000000000
--- a/documentation/tutorial/13-advanced-styling/04-style-directive/text.md
+++ /dev/null
@@ -1,18 +0,0 @@
----
-title: The style directive
----
-
-Being able to set CSS properties dynamically is nice. However, this can get unwieldy if you have to write a long string. Mistakes like missing any of the semicolons could make the whole string invalid. Therefore, Svelte provides a nicer way to write inline styles with the style directive.
-
-Change the style attribute of the paragraph to the following:
-
-```svelte
-<p
-	style:color
-	style:--opacity="{bgOpacity}"
->
-```
-
-The style directive shares a few qualities with the class directive. You can use a shorthand when the name of the property and the variable are the same. So `style:color="{color}"` can be written as just `style:color`.
-
-Similar to the class directive, the style directive will take precedence if you try to set the same property through a style attribute.
diff --git a/documentation/tutorial/13-advanced-styling/meta.json b/documentation/tutorial/13-advanced-styling/meta.json
deleted file mode 100644
index 7fdc33bd29..0000000000
--- a/documentation/tutorial/13-advanced-styling/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Advanced styling"
-}
diff --git a/documentation/tutorial/14-composition/01-slots/app-a/App.svelte b/documentation/tutorial/14-composition/01-slots/app-a/App.svelte
deleted file mode 100644
index 7f7b5d4437..0000000000
--- a/documentation/tutorial/14-composition/01-slots/app-a/App.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<script>
-	import Box from './Box.svelte';
-</script>
-
-<Box>
-	<!-- put content here -->
-</Box>
diff --git a/documentation/tutorial/14-composition/01-slots/app-a/Box.svelte b/documentation/tutorial/14-composition/01-slots/app-a/Box.svelte
deleted file mode 100644
index 36e57ccd88..0000000000
--- a/documentation/tutorial/14-composition/01-slots/app-a/Box.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<div class="box">
-	<!-- content should be injected here -->
-</div>
-
-<style>
-	.box {
-		width: 300px;
-		border: 1px solid #aaa;
-		border-radius: 2px;
-		box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
-		padding: 1em;
-		margin: 0 0 1em 0;
-	}
-</style>
diff --git a/documentation/tutorial/14-composition/01-slots/app-b/App.svelte b/documentation/tutorial/14-composition/01-slots/app-b/App.svelte
deleted file mode 100644
index 986bdc01c5..0000000000
--- a/documentation/tutorial/14-composition/01-slots/app-b/App.svelte
+++ /dev/null
@@ -1,8 +0,0 @@
-<script>
-	import Box from './Box.svelte';
-</script>
-
-<Box>
-	<h2>Hello!</h2>
-	<p>This is a box. It can contain anything.</p>
-</Box>
diff --git a/documentation/tutorial/14-composition/01-slots/app-b/Box.svelte b/documentation/tutorial/14-composition/01-slots/app-b/Box.svelte
deleted file mode 100644
index 2d0a378d25..0000000000
--- a/documentation/tutorial/14-composition/01-slots/app-b/Box.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<div class="box">
-	<slot />
-</div>
-
-<style>
-	.box {
-		width: 300px;
-		border: 1px solid #aaa;
-		border-radius: 2px;
-		box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
-		padding: 1em;
-		margin: 0 0 1em 0;
-	}
-</style>
diff --git a/documentation/tutorial/14-composition/01-slots/text.md b/documentation/tutorial/14-composition/01-slots/text.md
deleted file mode 100644
index b75995e9c4..0000000000
--- a/documentation/tutorial/14-composition/01-slots/text.md
+++ /dev/null
@@ -1,28 +0,0 @@
----
-title: Slots
----
-
-Just like elements can have children...
-
-```svelte
-<div>
-	<p>I'm a child of the div</p>
-</div>
-```
-
-...so can components. Before a component can accept children, though, it needs to know where to put them. We do this with the `<slot>` element. Put this inside `Box.svelte`:
-
-```svelte
-<div class="box">
-	<slot />
-</div>
-```
-
-You can now put things in the box:
-
-```svelte
-<Box>
-	<h2>Hello!</h2>
-	<p>This is a box. It can contain anything.</p>
-</Box>
-```
diff --git a/documentation/tutorial/14-composition/02-slot-fallbacks/app-a/App.svelte b/documentation/tutorial/14-composition/02-slot-fallbacks/app-a/App.svelte
deleted file mode 100644
index 986bdc01c5..0000000000
--- a/documentation/tutorial/14-composition/02-slot-fallbacks/app-a/App.svelte
+++ /dev/null
@@ -1,8 +0,0 @@
-<script>
-	import Box from './Box.svelte';
-</script>
-
-<Box>
-	<h2>Hello!</h2>
-	<p>This is a box. It can contain anything.</p>
-</Box>
diff --git a/documentation/tutorial/14-composition/02-slot-fallbacks/app-a/Box.svelte b/documentation/tutorial/14-composition/02-slot-fallbacks/app-a/Box.svelte
deleted file mode 100644
index 2d0a378d25..0000000000
--- a/documentation/tutorial/14-composition/02-slot-fallbacks/app-a/Box.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<div class="box">
-	<slot />
-</div>
-
-<style>
-	.box {
-		width: 300px;
-		border: 1px solid #aaa;
-		border-radius: 2px;
-		box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
-		padding: 1em;
-		margin: 0 0 1em 0;
-	}
-</style>
diff --git a/documentation/tutorial/14-composition/02-slot-fallbacks/app-b/App.svelte b/documentation/tutorial/14-composition/02-slot-fallbacks/app-b/App.svelte
deleted file mode 100644
index 708428d4d8..0000000000
--- a/documentation/tutorial/14-composition/02-slot-fallbacks/app-b/App.svelte
+++ /dev/null
@@ -1,10 +0,0 @@
-<script>
-	import Box from './Box.svelte';
-</script>
-
-<Box>
-	<h2>Hello!</h2>
-	<p>This is a box. It can contain anything.</p>
-</Box>
-
-<Box />
diff --git a/documentation/tutorial/14-composition/02-slot-fallbacks/app-b/Box.svelte b/documentation/tutorial/14-composition/02-slot-fallbacks/app-b/Box.svelte
deleted file mode 100644
index 8cb8128b31..0000000000
--- a/documentation/tutorial/14-composition/02-slot-fallbacks/app-b/Box.svelte
+++ /dev/null
@@ -1,16 +0,0 @@
-<div class="box">
-	<slot>
-		<em>no content was provided</em>
-	</slot>
-</div>
-
-<style>
-	.box {
-		width: 300px;
-		border: 1px solid #aaa;
-		border-radius: 2px;
-		box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
-		padding: 1em;
-		margin: 0 0 1em 0;
-	}
-</style>
diff --git a/documentation/tutorial/14-composition/02-slot-fallbacks/text.md b/documentation/tutorial/14-composition/02-slot-fallbacks/text.md
deleted file mode 100644
index da7ab1a9f4..0000000000
--- a/documentation/tutorial/14-composition/02-slot-fallbacks/text.md
+++ /dev/null
@@ -1,24 +0,0 @@
----
-title: Slot fallbacks
----
-
-A component can specify _fallbacks_ for any slots that are left empty, by putting content inside the `<slot>` element:
-
-```svelte
-<div class="box">
-	<slot>
-		<em>no content was provided</em>
-	</slot>
-</div>
-```
-
-We can now create instances of `<Box>` without any children:
-
-```svelte
-<Box>
-	<h2>Hello!</h2>
-	<p>This is a box. It can contain anything.</p>
-</Box>
-
-<Box />
-```
diff --git a/documentation/tutorial/14-composition/03-named-slots/app-a/App.svelte b/documentation/tutorial/14-composition/03-named-slots/app-a/App.svelte
deleted file mode 100644
index f3143305ca..0000000000
--- a/documentation/tutorial/14-composition/03-named-slots/app-a/App.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<script>
-	import ContactCard from './ContactCard.svelte';
-</script>
-
-<ContactCard>
-	<!-- contact details go here -->
-</ContactCard>
diff --git a/documentation/tutorial/14-composition/03-named-slots/app-a/ContactCard.svelte b/documentation/tutorial/14-composition/03-named-slots/app-a/ContactCard.svelte
deleted file mode 100644
index a3174a9217..0000000000
--- a/documentation/tutorial/14-composition/03-named-slots/app-a/ContactCard.svelte
+++ /dev/null
@@ -1,54 +0,0 @@
-<article class="contact-card">
-	<h2>
-		<slot>
-			<span class="missing">Unknown name</span>
-		</slot>
-	</h2>
-
-	<div class="address">
-		<slot>
-			<span class="missing">Unknown address</span>
-		</slot>
-	</div>
-
-	<div class="email">
-		<slot>
-			<span class="missing">Unknown email</span>
-		</slot>
-	</div>
-</article>
-
-<style>
-	.contact-card {
-		width: 300px;
-		border: 1px solid #aaa;
-		border-radius: 2px;
-		box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
-		padding: 1em;
-	}
-
-	h2 {
-		padding: 0 0 0.2em 0;
-		margin: 0 0 1em 0;
-		border-bottom: 1px solid #ff3e00;
-	}
-
-	.address,
-	.email {
-		padding: 0 0 0 1.5em;
-		background: 0 50% no-repeat;
-		background-size: 1em 1em;
-		margin: 0 0 0.5em 0;
-		line-height: 1.2;
-	}
-
-	.address {
-		background-image: url(/tutorial/icons/map-marker.svg);
-	}
-	.email {
-		background-image: url(/tutorial/icons/email.svg);
-	}
-	.missing {
-		color: #999;
-	}
-</style>
diff --git a/documentation/tutorial/14-composition/03-named-slots/app-b/App.svelte b/documentation/tutorial/14-composition/03-named-slots/app-b/App.svelte
deleted file mode 100644
index ea27d75edf..0000000000
--- a/documentation/tutorial/14-composition/03-named-slots/app-b/App.svelte
+++ /dev/null
@@ -1,12 +0,0 @@
-<script>
-	import ContactCard from './ContactCard.svelte';
-</script>
-
-<ContactCard>
-	<span slot="name"> P. Sherman </span>
-
-	<span slot="address">
-		42 Wallaby Way<br />
-		Sydney
-	</span>
-</ContactCard>
diff --git a/documentation/tutorial/14-composition/03-named-slots/app-b/ContactCard.svelte b/documentation/tutorial/14-composition/03-named-slots/app-b/ContactCard.svelte
deleted file mode 100644
index d72da2ad4c..0000000000
--- a/documentation/tutorial/14-composition/03-named-slots/app-b/ContactCard.svelte
+++ /dev/null
@@ -1,54 +0,0 @@
-<article class="contact-card">
-	<h2>
-		<slot name="name">
-			<span class="missing">Unknown name</span>
-		</slot>
-	</h2>
-
-	<div class="address">
-		<slot name="address">
-			<span class="missing">Unknown address</span>
-		</slot>
-	</div>
-
-	<div class="email">
-		<slot name="email">
-			<span class="missing">Unknown email</span>
-		</slot>
-	</div>
-</article>
-
-<style>
-	.contact-card {
-		width: 300px;
-		border: 1px solid #aaa;
-		border-radius: 2px;
-		box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
-		padding: 1em;
-	}
-
-	h2 {
-		padding: 0 0 0.2em 0;
-		margin: 0 0 1em 0;
-		border-bottom: 1px solid #ff3e00;
-	}
-
-	.address,
-	.email {
-		padding: 0 0 0 1.5em;
-		background: 0 0 no-repeat;
-		background-size: 20px 20px;
-		margin: 0 0 0.5em 0;
-		line-height: 1.2;
-	}
-
-	.address {
-		background-image: url(/tutorial/icons/map-marker.svg);
-	}
-	.email {
-		background-image: url(/tutorial/icons/email.svg);
-	}
-	.missing {
-		color: #999;
-	}
-</style>
diff --git a/documentation/tutorial/14-composition/03-named-slots/text.md b/documentation/tutorial/14-composition/03-named-slots/text.md
deleted file mode 100644
index f2e34ad9a0..0000000000
--- a/documentation/tutorial/14-composition/03-named-slots/text.md
+++ /dev/null
@@ -1,42 +0,0 @@
----
-title: Named slots
----
-
-The previous example contained a _default slot_, which renders the direct children of a component. Sometimes you will need more control over placement, such as with this `<ContactCard>`. In those cases, we can use _named slots_.
-
-In `ContactCard.svelte`, add a `name` attribute to each slot:
-
-```svelte
-<article class="contact-card">
-	<h2>
-		<slot name="name">
-			<span class="missing">Unknown name</span>
-		</slot>
-	</h2>
-
-	<div class="address">
-		<slot name="address">
-			<span class="missing">Unknown address</span>
-		</slot>
-	</div>
-
-	<div class="email">
-		<slot name="email">
-			<span class="missing">Unknown email</span>
-		</slot>
-	</div>
-</article>
-```
-
-Then, add elements with corresponding `slot="..."` attributes inside the `<ContactCard>` component:
-
-```svelte
-<ContactCard>
-	<span slot="name"> P. Sherman </span>
-
-	<span slot="address">
-		42 Wallaby Way<br />
-		Sydney
-	</span>
-</ContactCard>
-```
diff --git a/documentation/tutorial/14-composition/04-optional-slots/app-a/App.svelte b/documentation/tutorial/14-composition/04-optional-slots/app-a/App.svelte
deleted file mode 100755
index f120d03a30..0000000000
--- a/documentation/tutorial/14-composition/04-optional-slots/app-a/App.svelte
+++ /dev/null
@@ -1,47 +0,0 @@
-<script>
-	import Project from './Project.svelte';
-	import Comment from './Comment.svelte';
-</script>
-
-<h1>Projects</h1>
-
-<ul>
-	<li>
-		<Project title="Add TypeScript support" tasksCompleted={25} totalTasks={57}>
-			<div slot="comments">
-				<Comment name="Ecma Script" postedAt={new Date('2020-08-17T14:12:23')}>
-					<p>Those interface tests are now passing.</p>
-				</Comment>
-			</div>
-		</Project>
-	</li>
-	<li>
-		<Project title="Update documentation" tasksCompleted={18} totalTasks={21} />
-	</li>
-</ul>
-
-<style>
-	h1 {
-		font-weight: 300;
-		margin: 0 1rem;
-	}
-
-	ul {
-		list-style: none;
-		padding: 0;
-		margin: 0.5rem;
-		display: flex;
-	}
-
-	@media (max-width: 600px) {
-		ul {
-			flex-direction: column;
-		}
-	}
-
-	li {
-		padding: 0.5rem;
-		flex: 1 1 50%;
-		min-width: 200px;
-	}
-</style>
diff --git a/documentation/tutorial/14-composition/04-optional-slots/app-a/Comment.svelte b/documentation/tutorial/14-composition/04-optional-slots/app-a/Comment.svelte
deleted file mode 100755
index 153c734376..0000000000
--- a/documentation/tutorial/14-composition/04-optional-slots/app-a/Comment.svelte
+++ /dev/null
@@ -1,59 +0,0 @@
-<script>
-	export let name;
-	export let postedAt;
-
-	$: avatar = `https://ui-avatars.com/api/?name=${name.replace(
-		/ /g,
-		'+'
-	)}&rounded=true&background=ff3e00&color=fff&bold=true`;
-</script>
-
-<article>
-	<div class="header">
-		<img src={avatar} alt="" height="32" width="32" />
-		<div class="details">
-			<h4>{name}</h4>
-			<time datetime={postedAt.toISOString()}>{postedAt.toLocaleDateString()}</time>
-		</div>
-	</div>
-	<div class="body">
-		<slot />
-	</div>
-</article>
-
-<style>
-	article {
-		background-color: #fff;
-		border: 1px #ccc solid;
-		border-radius: 4px;
-		padding: 1rem;
-	}
-
-	.header {
-		align-items: center;
-		display: flex;
-	}
-
-	.details {
-		flex: 1 1 auto;
-		margin-left: 0.5rem;
-	}
-
-	h4 {
-		margin: 0;
-	}
-
-	time {
-		color: #777;
-		font-size: 0.75rem;
-		text-decoration: underline;
-	}
-
-	.body {
-		margin-top: 0.5rem;
-	}
-
-	.body :global(p) {
-		margin: 0;
-	}
-</style>
diff --git a/documentation/tutorial/14-composition/04-optional-slots/app-a/Project.svelte b/documentation/tutorial/14-composition/04-optional-slots/app-a/Project.svelte
deleted file mode 100755
index 6c5a6b7590..0000000000
--- a/documentation/tutorial/14-composition/04-optional-slots/app-a/Project.svelte
+++ /dev/null
@@ -1,62 +0,0 @@
-<script>
-	export let title;
-	export let tasksCompleted = 0;
-	export let totalTasks = 0;
-</script>
-
-<article class:has-discussion={true}>
-	<div>
-		<h2>{title}</h2>
-		<p>{tasksCompleted}/{totalTasks} tasks completed</p>
-	</div>
-	<div class="discussion">
-		<h3>Comments</h3>
-		<slot name="comments" />
-	</div>
-</article>
-
-<style>
-	article {
-		border: 1px #ccc solid;
-		border-radius: 4px;
-		position: relative;
-	}
-
-	article > div {
-		padding: 1.25rem;
-	}
-
-	article.has-discussion::after {
-		content: '';
-		background-color: #ff3e00;
-		border-radius: 10px;
-		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-		height: 20px;
-		position: absolute;
-		right: -10px;
-		top: -10px;
-		width: 20px;
-	}
-
-	h2,
-	h3 {
-		margin: 0 0 0.5rem;
-	}
-
-	h3 {
-		font-size: 0.875rem;
-		font-weight: 500;
-		letter-spacing: 0.08em;
-		text-transform: uppercase;
-	}
-
-	p {
-		color: #777;
-		margin: 0;
-	}
-
-	.discussion {
-		background-color: #eee;
-		border-top: 1px #ccc solid;
-	}
-</style>
diff --git a/documentation/tutorial/14-composition/04-optional-slots/app-b/App.svelte b/documentation/tutorial/14-composition/04-optional-slots/app-b/App.svelte
deleted file mode 100755
index f120d03a30..0000000000
--- a/documentation/tutorial/14-composition/04-optional-slots/app-b/App.svelte
+++ /dev/null
@@ -1,47 +0,0 @@
-<script>
-	import Project from './Project.svelte';
-	import Comment from './Comment.svelte';
-</script>
-
-<h1>Projects</h1>
-
-<ul>
-	<li>
-		<Project title="Add TypeScript support" tasksCompleted={25} totalTasks={57}>
-			<div slot="comments">
-				<Comment name="Ecma Script" postedAt={new Date('2020-08-17T14:12:23')}>
-					<p>Those interface tests are now passing.</p>
-				</Comment>
-			</div>
-		</Project>
-	</li>
-	<li>
-		<Project title="Update documentation" tasksCompleted={18} totalTasks={21} />
-	</li>
-</ul>
-
-<style>
-	h1 {
-		font-weight: 300;
-		margin: 0 1rem;
-	}
-
-	ul {
-		list-style: none;
-		padding: 0;
-		margin: 0.5rem;
-		display: flex;
-	}
-
-	@media (max-width: 600px) {
-		ul {
-			flex-direction: column;
-		}
-	}
-
-	li {
-		padding: 0.5rem;
-		flex: 1 1 50%;
-		min-width: 200px;
-	}
-</style>
diff --git a/documentation/tutorial/14-composition/04-optional-slots/app-b/Comment.svelte b/documentation/tutorial/14-composition/04-optional-slots/app-b/Comment.svelte
deleted file mode 100755
index 153c734376..0000000000
--- a/documentation/tutorial/14-composition/04-optional-slots/app-b/Comment.svelte
+++ /dev/null
@@ -1,59 +0,0 @@
-<script>
-	export let name;
-	export let postedAt;
-
-	$: avatar = `https://ui-avatars.com/api/?name=${name.replace(
-		/ /g,
-		'+'
-	)}&rounded=true&background=ff3e00&color=fff&bold=true`;
-</script>
-
-<article>
-	<div class="header">
-		<img src={avatar} alt="" height="32" width="32" />
-		<div class="details">
-			<h4>{name}</h4>
-			<time datetime={postedAt.toISOString()}>{postedAt.toLocaleDateString()}</time>
-		</div>
-	</div>
-	<div class="body">
-		<slot />
-	</div>
-</article>
-
-<style>
-	article {
-		background-color: #fff;
-		border: 1px #ccc solid;
-		border-radius: 4px;
-		padding: 1rem;
-	}
-
-	.header {
-		align-items: center;
-		display: flex;
-	}
-
-	.details {
-		flex: 1 1 auto;
-		margin-left: 0.5rem;
-	}
-
-	h4 {
-		margin: 0;
-	}
-
-	time {
-		color: #777;
-		font-size: 0.75rem;
-		text-decoration: underline;
-	}
-
-	.body {
-		margin-top: 0.5rem;
-	}
-
-	.body :global(p) {
-		margin: 0;
-	}
-</style>
diff --git a/documentation/tutorial/14-composition/04-optional-slots/app-b/Project.svelte b/documentation/tutorial/14-composition/04-optional-slots/app-b/Project.svelte
deleted file mode 100755
index 41aa4111b9..0000000000
--- a/documentation/tutorial/14-composition/04-optional-slots/app-b/Project.svelte
+++ /dev/null
@@ -1,64 +0,0 @@
-<script>
-	export let title;
-	export let tasksCompleted = 0;
-	export let totalTasks = 0;
-</script>
-
-<article class:has-discussion={$$slots.comments}>
-	<div>
-		<h2>{title}</h2>
-		<p>{tasksCompleted}/{totalTasks} tasks completed</p>
-	</div>
-	{#if $$slots.comments}
-		<div class="discussion">
-			<h3>Comments</h3>
-			<slot name="comments" />
-		</div>
-	{/if}
-</article>
-
-<style>
-	article {
-		border: 1px #ccc solid;
-		border-radius: 4px;
-		position: relative;
-	}
-
-	article > div {
-		padding: 1.25rem;
-	}
-
-	article.has-discussion::after {
-		content: '';
-		background-color: #ff3e00;
-		border-radius: 10px;
-		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-		height: 20px;
-		position: absolute;
-		right: -10px;
-		top: -10px;
-		width: 20px;
-	}
-
-	h2,
-	h3 {
-		margin: 0 0 0.5rem;
-	}
-
-	h3 {
-		font-size: 0.875rem;
-		font-weight: 500;
-		letter-spacing: 0.08em;
-		text-transform: uppercase;
-	}
-
-	p {
-		color: #777;
-		margin: 0;
-	}
-
-	.discussion {
-		background-color: #eee;
-		border-top: 1px #ccc solid;
-	}
-</style>
diff --git a/documentation/tutorial/14-composition/04-optional-slots/text.md b/documentation/tutorial/14-composition/04-optional-slots/text.md
deleted file mode 100644
index 9d74e3c268..0000000000
--- a/documentation/tutorial/14-composition/04-optional-slots/text.md
+++ /dev/null
@@ -1,28 +0,0 @@
----
-title: Checking for slot content
----
-
-In some cases, you may want to control parts of your component based on whether the parent passes in content for a certain slot. Perhaps you have a wrapper around that slot, and you don't want to render it if the slot is empty. Or perhaps you'd like to apply a class only if the slot is present. You can do this by checking the properties of the special `$$slots` variable.
-
-`$$slots` is an object whose keys are the names of the slots passed in by the parent component. If the parent leaves a slot empty, then `$$slots` will not have an entry for that slot.
-
-Notice that both instances of `<Project>` in this example render a container for comments and a notification dot, even though only one has comments. We want to use `$$slots` to make sure we only render these elements when the parent `<App>` passes in content for the `comments` slot.
-
-In `Project.svelte`, update the `class:has-discussion` directive on the `<article>`:
-
-```svelte
-<article class:has-discussion={$$slots.comments}>
-```
-
-Next, wrap the `comments` slot and its wrapping `<div>` in an `if` block that checks `$$slots`:
-
-```svelte
-{#if $$slots.comments}
-	<div class="discussion">
-		<h3>Comments</h3>
-		<slot name="comments" />
-	</div>
-{/if}
-```
-
-Now the comments container and the notification dot won't render when `<App>` leaves the `comments` slot empty.
diff --git a/documentation/tutorial/14-composition/05-slot-props/app-a/App.svelte b/documentation/tutorial/14-composition/05-slot-props/app-a/App.svelte
deleted file mode 100644
index dcf0dacae5..0000000000
--- a/documentation/tutorial/14-composition/05-slot-props/app-a/App.svelte
+++ /dev/null
@@ -1,27 +0,0 @@
-<script>
-	import Hoverable from './Hoverable.svelte';
-</script>
-
-<Hoverable>
-	<div class:active={hovering}>
-		{#if hovering}
-			<p>I am being hovered upon.</p>
-		{:else}
-			<p>Hover over me!</p>
-		{/if}
-	</div>
-</Hoverable>
-
-<style>
-	div {
-		padding: 1em;
-		margin: 0 0 1em 0;
-		background-color: #eee;
-		color: black;
-	}
-
-	.active {
-		background-color: #ff3e00;
-		color: white;
-	}
-</style>
diff --git a/documentation/tutorial/14-composition/05-slot-props/app-a/Hoverable.svelte b/documentation/tutorial/14-composition/05-slot-props/app-a/Hoverable.svelte
deleted file mode 100644
index cee53ffc08..0000000000
--- a/documentation/tutorial/14-composition/05-slot-props/app-a/Hoverable.svelte
+++ /dev/null
@@ -1,15 +0,0 @@
-<script>
-	let hovering;
-
-	function enter() {
-		hovering = true;
-	}
-
-	function leave() {
-		hovering = false;
-	}
-</script>
-
-<div on:mouseenter={enter} on:mouseleave={leave}>
-	<slot />
-</div>
diff --git a/documentation/tutorial/14-composition/05-slot-props/app-b/App.svelte b/documentation/tutorial/14-composition/05-slot-props/app-b/App.svelte
deleted file mode 100644
index 024de304dc..0000000000
--- a/documentation/tutorial/14-composition/05-slot-props/app-b/App.svelte
+++ /dev/null
@@ -1,47 +0,0 @@
-<script>
-	import Hoverable from './Hoverable.svelte';
-</script>
-
-<Hoverable let:hovering={active}>
-	<div class:active>
-		{#if active}
-			<p>I am being hovered upon.</p>
-		{:else}
-			<p>Hover over me!</p>
-		{/if}
-	</div>
-</Hoverable>
-
-<Hoverable let:hovering={active}>
-	<div class:active>
-		{#if active}
-			<p>I am being hovered upon.</p>
-		{:else}
-			<p>Hover over me!</p>
-		{/if}
-	</div>
-</Hoverable>
-
-<Hoverable let:hovering={active}>
-	<div class:active>
-		{#if active}
-			<p>I am being hovered upon.</p>
-		{:else}
-			<p>Hover over me!</p>
-		{/if}
-	</div>
-</Hoverable>
-
-<style>
-	div {
-		padding: 1em;
-		margin: 0 0 1em 0;
-		background-color: #eee;
-		color: black;
-	}
-
-	.active {
-		background-color: #ff3e00;
-		color: white;
-	}
-</style>
diff --git a/documentation/tutorial/14-composition/05-slot-props/app-b/Hoverable.svelte b/documentation/tutorial/14-composition/05-slot-props/app-b/Hoverable.svelte
deleted file mode 100644
index 773a8ecf6a..0000000000
--- a/documentation/tutorial/14-composition/05-slot-props/app-b/Hoverable.svelte
+++ /dev/null
@@ -1,15 +0,0 @@
-<script>
-	let hovering;
-
-	function enter() {
-		hovering = true;
-	}
-
-	function leave() {
-		hovering = false;
-	}
-</script>
-
-<div on:mouseenter={enter} on:mouseleave={leave}>
-	<slot {hovering} />
-</div>
diff --git a/documentation/tutorial/14-composition/05-slot-props/text.md b/documentation/tutorial/14-composition/05-slot-props/text.md
deleted file mode 100644
index f7f5617b36..0000000000
--- a/documentation/tutorial/14-composition/05-slot-props/text.md
+++ /dev/null
@@ -1,49 +0,0 @@
----
-title: Slot props
----
-
-In this app, we have a `<Hoverable>` component that tracks whether the mouse is currently over it. It needs to pass that data _back_ to the parent component, so that we can update the slotted contents.
-
-For this, we use _slot props_. In `Hoverable.svelte`, pass the `hovering` value into the slot:
-
-<!-- prettier-ignore -->
-```svelte
-<div on:mouseenter={enter} on:mouseleave={leave}>
-	<slot hovering={hovering} />
-</div>
-```
-
-> Remember you can also use the `{hovering}` shorthand, if you prefer.
-
-Then, to expose `hovering` to the contents of the `<Hoverable>` component, we use the `let` directive:
-
-<!-- prettier-ignore -->
-```svelte
-<Hoverable let:hovering={hovering}>
-	<div class:active={hovering}>
-		{#if hovering}
-			<p>I am being hovered upon.</p>
-		{:else}
-			<p>Hover over me!</p>
-		{/if}
-	</div>
-</Hoverable>
-```
-
-You can rename the variable, if you want — let's call it `active` in the parent component:
-
-```svelte
-<Hoverable let:hovering={active}>
-	<div class:active>
-		{#if active}
-			<p>I am being hovered upon.</p>
-		{:else}
-			<p>Hover over me!</p>
-		{/if}
-	</div>
-</Hoverable>
-```
-
-You can have as many of these components as you like, and the slotted props will remain local to the component where they're declared.
-
-> Named slots can also have props; use the `let` directive on an element with a `slot="..."` attribute, instead of on the component itself.
diff --git a/documentation/tutorial/14-composition/meta.json b/documentation/tutorial/14-composition/meta.json
deleted file mode 100644
index 1d81c05f29..0000000000
--- a/documentation/tutorial/14-composition/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Component composition"
-}
diff --git a/documentation/tutorial/15-context/01-context-api/app-a/App.svelte b/documentation/tutorial/15-context/01-context-api/app-a/App.svelte
deleted file mode 100644
index d564c9eee6..0000000000
--- a/documentation/tutorial/15-context/01-context-api/app-a/App.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script>
-	import Map from './Map.svelte';
-	import MapMarker from './MapMarker.svelte';
-</script>
-
-<Map lat={35} lon={-84} zoom={3.5}>
-	<MapMarker lat={37.8225} lon={-122.0024} label="Svelte Body Shaping" />
-	<MapMarker lat={33.8981} lon={-118.4169} label="Svelte Barbershop & Essentials" />
-	<MapMarker lat={29.723} lon={-95.4189} label="Svelte Waxing Studio" />
-	<MapMarker lat={28.3378} lon={-81.3966} label="Svelte 30 Nutritional Consultants" />
-	<MapMarker lat={40.6483} lon={-74.0237} label="Svelte Brands LLC" />
-	<MapMarker lat={40.6986} lon={-74.41} label="Svelte Medical Systems" />
-</Map>
diff --git a/documentation/tutorial/15-context/01-context-api/app-a/Map.svelte b/documentation/tutorial/15-context/01-context-api/app-a/Map.svelte
deleted file mode 100644
index 495aae6a0d..0000000000
--- a/documentation/tutorial/15-context/01-context-api/app-a/Map.svelte
+++ /dev/null
@@ -1,44 +0,0 @@
-<script>
-	import { onDestroy } from 'svelte';
-	import { mapbox } from './mapbox.js';
-
-	// set the context here...
-
-	export let lat;
-	export let lon;
-	export let zoom;
-
-	let container;
-	let map;
-
-	function load() {
-		map = new mapbox.Map({
-			container,
-			style: 'mapbox://styles/mapbox/streets-v9',
-			center: [lon, lat],
-			zoom
-		});
-	}
-
-	onDestroy(() => {
-		if (map) map.remove();
-	});
-</script>
-
-<!-- this special element will be explained in a later section -->
-<svelte:head>
-	<link rel="stylesheet" href="https://unpkg.com/mapbox-gl/dist/mapbox-gl.css" on:load={load} />
-</svelte:head>
-
-<div bind:this={container}>
-	{#if map}
-		<slot />
-	{/if}
-</div>
-
-<style>
-	div {
-		width: 100%;
-		height: 100%;
-	}
-</style>
diff --git a/documentation/tutorial/15-context/01-context-api/app-a/MapMarker.svelte b/documentation/tutorial/15-context/01-context-api/app-a/MapMarker.svelte
deleted file mode 100644
index 94436445c7..0000000000
--- a/documentation/tutorial/15-context/01-context-api/app-a/MapMarker.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script>
-	import { mapbox } from './mapbox.js';
-
-	// ...get the context here
-
-	export let lat;
-	export let lon;
-	export let label;
-
-	const popup = new mapbox.Popup({ offset: 25 }).setText(label);
-
-	const marker = new mapbox.Marker().setLngLat([lon, lat]).setPopup(popup).addTo(map);
-</script>
diff --git a/documentation/tutorial/15-context/01-context-api/app-a/mapbox.js b/documentation/tutorial/15-context/01-context-api/app-a/mapbox.js
deleted file mode 100644
index 16a7ffa417..0000000000
--- a/documentation/tutorial/15-context/01-context-api/app-a/mapbox.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import mapbox from 'mapbox-gl';
-
-// https://docs.mapbox.com/help/glossary/access-token/
-mapbox.accessToken = MAPBOX_ACCESS_TOKEN;
-
-const key = Symbol();
-
-export { mapbox, key };
diff --git a/documentation/tutorial/15-context/01-context-api/app-b/App.svelte b/documentation/tutorial/15-context/01-context-api/app-b/App.svelte
deleted file mode 100644
index d564c9eee6..0000000000
--- a/documentation/tutorial/15-context/01-context-api/app-b/App.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script>
-	import Map from './Map.svelte';
-	import MapMarker from './MapMarker.svelte';
-</script>
-
-<Map lat={35} lon={-84} zoom={3.5}>
-	<MapMarker lat={37.8225} lon={-122.0024} label="Svelte Body Shaping" />
-	<MapMarker lat={33.8981} lon={-118.4169} label="Svelte Barbershop & Essentials" />
-	<MapMarker lat={29.723} lon={-95.4189} label="Svelte Waxing Studio" />
-	<MapMarker lat={28.3378} lon={-81.3966} label="Svelte 30 Nutritional Consultants" />
-	<MapMarker lat={40.6483} lon={-74.0237} label="Svelte Brands LLC" />
-	<MapMarker lat={40.6986} lon={-74.41} label="Svelte Medical Systems" />
-</Map>
diff --git a/documentation/tutorial/15-context/01-context-api/app-b/Map.svelte b/documentation/tutorial/15-context/01-context-api/app-b/Map.svelte
deleted file mode 100644
index ddc3ebe7cc..0000000000
--- a/documentation/tutorial/15-context/01-context-api/app-b/Map.svelte
+++ /dev/null
@@ -1,46 +0,0 @@
-<script>
-	import { onDestroy, setContext } from 'svelte';
-	import { mapbox, key } from './mapbox.js';
-
-	setContext(key, {
-		getMap: () => map
-	});
-
-	export let lat;
-	export let lon;
-	export let zoom;
-
-	let container;
-	let map;
-
-	function load() {
-		map = new mapbox.Map({
-			container,
-			style: 'mapbox://styles/mapbox/streets-v9',
-			center: [lon, lat],
-			zoom
-		});
-	}
-
-	onDestroy(() => {
-		if (map) map.remove();
-	});
-</script>
-
-<!-- this special element will be explained in a later section -->
-<svelte:head>
-	<link rel="stylesheet" href="https://unpkg.com/mapbox-gl/dist/mapbox-gl.css" on:load={load} />
-</svelte:head>
-
-<div bind:this={container}>
-	{#if map}
-		<slot />
-	{/if}
-</div>
-
-<style>
-	div {
-		width: 100%;
-		height: 100%;
-	}
-</style>
diff --git a/documentation/tutorial/15-context/01-context-api/app-b/MapMarker.svelte b/documentation/tutorial/15-context/01-context-api/app-b/MapMarker.svelte
deleted file mode 100644
index 9c6df339cf..0000000000
--- a/documentation/tutorial/15-context/01-context-api/app-b/MapMarker.svelte
+++ /dev/null
@@ -1,15 +0,0 @@
-<script>
-	import { getContext } from 'svelte';
-	import { mapbox, key } from './mapbox.js';
-
-	const { getMap } = getContext(key);
-	const map = getMap();
-
-	export let lat;
-	export let lon;
-	export let label;
-
-	const popup = new mapbox.Popup({ offset: 25 }).setText(label);
-
-	const marker = new mapbox.Marker().setLngLat([lon, lat]).setPopup(popup).addTo(map);
-</script>
diff --git a/documentation/tutorial/15-context/01-context-api/app-b/mapbox.js b/documentation/tutorial/15-context/01-context-api/app-b/mapbox.js
deleted file mode 100644
index 16a7ffa417..0000000000
--- a/documentation/tutorial/15-context/01-context-api/app-b/mapbox.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import mapbox from 'mapbox-gl';
-
-// https://docs.mapbox.com/help/glossary/access-token/
-mapbox.accessToken = MAPBOX_ACCESS_TOKEN;
-
-const key = Symbol();
-
-export { mapbox, key };
diff --git a/documentation/tutorial/15-context/01-context-api/text.md b/documentation/tutorial/15-context/01-context-api/text.md
deleted file mode 100644
index 86782bfc5f..0000000000
--- a/documentation/tutorial/15-context/01-context-api/text.md
+++ /dev/null
@@ -1,56 +0,0 @@
----
-title: setContext and getContext
----
-
-The context API provides a mechanism for components to 'talk' to each other without passing around data and functions as props, or dispatching lots of events. It's an advanced feature, but a useful one.
-
-Take this example app using a [Mapbox GL](https://docs.mapbox.com/mapbox-gl-js/overview/) map. We'd like to display the markers, using the `<MapMarker>` component, but we don't want to have to pass around a reference to the underlying Mapbox instance as a prop on each component.
-
-There are two halves to the context API — `setContext` and `getContext`. If a component calls `setContext(key, context)`, then any _child_ component can retrieve the context with `const context = getContext(key)`.
-
-Let's set the context first. In `Map.svelte`, import `setContext` from `svelte` and `key` from `mapbox.js` and call `setContext`:
-
-```js
-import { onDestroy, setContext } from 'svelte';
-import { mapbox, key } from './mapbox.js';
-
-setContext(key, {
-	getMap: () => map
-});
-```
-
-The context object can be anything you like. Like [lifecycle functions](/tutorial/onmount), `setContext` and `getContext` must be called during component initialisation. Calling it afterwards - for example inside `onMount` - will throw an error. In this example, since `map` isn't created until the component has mounted, our context object contains a `getMap` function rather than `map` itself.
-
-On the other side of the equation, in `MapMarker.svelte`, we can now get a reference to the Mapbox instance:
-
-```js
-import { getContext } from 'svelte';
-import { mapbox, key } from './mapbox.js';
-
-const { getMap } = getContext(key);
-const map = getMap();
-```
-
-The markers can now add themselves to the map.
-
-> A more finished version of `<MapMarker>` would also handle removal and prop changes, but we're only demonstrating context here.
-
-## Context keys
-
-In `mapbox.js` you'll see this line:
-
-```js
-const key = Symbol();
-```
-
-Technically, we can use any value as a key — we could do `setContext('mapbox', ...)` for example. The downside of using a string is that different component libraries might accidentally use the same one; using [symbols](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol), on the other hand, means that the keys are guaranteed not to conflict in any circumstance, even when you have multiple different contexts operating across many component layers, since a symbol is essentially a unique identifier.
-
-## Contexts vs. stores
-
-Contexts and stores seem similar. They differ in that stores are available to _any_ part of an app, while a context is only available to _a component and its descendants_. This can be helpful if you want to use several instances of a component without the state of one interfering with the state of the others.
-
-In fact, you might use the two together. Since context is not reactive, values that change over time should be represented as stores:
-
-```js
-const { these, are, stores } = getContext(...);
-```
diff --git a/documentation/tutorial/15-context/meta.json b/documentation/tutorial/15-context/meta.json
deleted file mode 100644
index bb3c2c607d..0000000000
--- a/documentation/tutorial/15-context/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Context API"
-}
diff --git a/documentation/tutorial/16-special-elements/01-svelte-self/app-a/App.svelte b/documentation/tutorial/16-special-elements/01-svelte-self/app-a/App.svelte
deleted file mode 100644
index 38dc3a3b5e..0000000000
--- a/documentation/tutorial/16-special-elements/01-svelte-self/app-a/App.svelte
+++ /dev/null
@@ -1,29 +0,0 @@
-<script>
-	import Folder from './Folder.svelte';
-
-	let root = [
-		{
-			name: 'Important work stuff',
-			files: [{ name: 'quarterly-results.xlsx' }]
-		},
-		{
-			name: 'Animal GIFs',
-			files: [
-				{
-					name: 'Dogs',
-					files: [{ name: 'treadmill.gif' }, { name: 'rope-jumping.gif' }]
-				},
-				{
-					name: 'Goats',
-					files: [{ name: 'parkour.gif' }, { name: 'rampage.gif' }]
-				},
-				{ name: 'cat-roomba.gif' },
-				{ name: 'duck-shuffle.gif' },
-				{ name: 'monkey-on-a-pig.gif' }
-			]
-		},
-		{ name: 'TODO.md' }
-	];
-</script>
-
-<Folder name="Home" files={root} expanded />
diff --git a/documentation/tutorial/16-special-elements/01-svelte-self/app-a/File.svelte b/documentation/tutorial/16-special-elements/01-svelte-self/app-a/File.svelte
deleted file mode 100644
index e769ab4841..0000000000
--- a/documentation/tutorial/16-special-elements/01-svelte-self/app-a/File.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<script>
-	export let name;
-	$: type = name.slice(name.lastIndexOf('.') + 1);
-</script>
-
-<span style="background-image: url(/tutorial/icons/{type}.svg)">{name}</span>
-
-<style>
-	span {
-		padding: 0 0 0 1.5em;
-		background: 0 0.1em no-repeat;
-		background-size: 1em 1em;
-	}
-</style>
diff --git a/documentation/tutorial/16-special-elements/01-svelte-self/app-a/Folder.svelte b/documentation/tutorial/16-special-elements/01-svelte-self/app-a/Folder.svelte
deleted file mode 100644
index cf49668e99..0000000000
--- a/documentation/tutorial/16-special-elements/01-svelte-self/app-a/Folder.svelte
+++ /dev/null
@@ -1,54 +0,0 @@
-<script>
-	import File from './File.svelte';
-
-	export let expanded = false;
-	export let name;
-	export let files;
-
-	function toggle() {
-		expanded = !expanded;
-	}
-</script>
-
-<button class:expanded on:click={toggle}>{name}</button>
-
-{#if expanded}
-	<ul>
-		{#each files as file}
-			<li>
-				{#if file.files}
-					<!-- show folder -->
-				{:else}
-					<File {...file} />
-				{/if}
-			</li>
-		{/each}
-	</ul>
-{/if}
-
-<style>
-	button {
-		padding: 0 0 0 1.5em;
-		background: url(/tutorial/icons/folder.svg) 0 0.1em no-repeat;
-		background-size: 1em 1em;
-		font-weight: bold;
-		cursor: pointer;
-		border: none;
-		margin: 0;
-	}
-
-	.expanded {
-		background-image: url(/tutorial/icons/folder-open.svg);
-	}
-
-	ul {
-		padding: 0.2em 0 0 0.5em;
-		margin: 0 0 0 0.5em;
-		list-style: none;
-		border-left: 1px solid #eee;
-	}
-
-	li {
-		padding: 0.2em 0;
-	}
-</style>
diff --git a/documentation/tutorial/16-special-elements/01-svelte-self/app-b/App.svelte b/documentation/tutorial/16-special-elements/01-svelte-self/app-b/App.svelte
deleted file mode 100644
index 38dc3a3b5e..0000000000
--- a/documentation/tutorial/16-special-elements/01-svelte-self/app-b/App.svelte
+++ /dev/null
@@ -1,29 +0,0 @@
-<script>
-	import Folder from './Folder.svelte';
-
-	let root = [
-		{
-			name: 'Important work stuff',
-			files: [{ name: 'quarterly-results.xlsx' }]
-		},
-		{
-			name: 'Animal GIFs',
-			files: [
-				{
-					name: 'Dogs',
-					files: [{ name: 'treadmill.gif' }, { name: 'rope-jumping.gif' }]
-				},
-				{
-					name: 'Goats',
-					files: [{ name: 'parkour.gif' }, { name: 'rampage.gif' }]
-				},
-				{ name: 'cat-roomba.gif' },
-				{ name: 'duck-shuffle.gif' },
-				{ name: 'monkey-on-a-pig.gif' }
-			]
-		},
-		{ name: 'TODO.md' }
-	];
-</script>
-
-<Folder name="Home" files={root} expanded />
diff --git a/documentation/tutorial/16-special-elements/01-svelte-self/app-b/File.svelte b/documentation/tutorial/16-special-elements/01-svelte-self/app-b/File.svelte
deleted file mode 100644
index e769ab4841..0000000000
--- a/documentation/tutorial/16-special-elements/01-svelte-self/app-b/File.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<script>
-	export let name;
-	$: type = name.slice(name.lastIndexOf('.') + 1);
-</script>
-
-<span style="background-image: url(/tutorial/icons/{type}.svg)">{name}</span>
-
-<style>
-	span {
-		padding: 0 0 0 1.5em;
-		background: 0 0.1em no-repeat;
-		background-size: 1em 1em;
-	}
-</style>
diff --git a/documentation/tutorial/16-special-elements/01-svelte-self/app-b/Folder.svelte b/documentation/tutorial/16-special-elements/01-svelte-self/app-b/Folder.svelte
deleted file mode 100644
index dcf80e3645..0000000000
--- a/documentation/tutorial/16-special-elements/01-svelte-self/app-b/Folder.svelte
+++ /dev/null
@@ -1,54 +0,0 @@
-<script>
-	import File from './File.svelte';
-
-	export let expanded = false;
-	export let name;
-	export let files;
-
-	function toggle() {
-		expanded = !expanded;
-	}
-</script>
-
-<button class:expanded on:click={toggle}>{name}</button>
-
-{#if expanded}
-	<ul>
-		{#each files as file}
-			<li>
-				{#if file.files}
-					<svelte:self {...file} />
-				{:else}
-					<File {...file} />
-				{/if}
-			</li>
-		{/each}
-	</ul>
-{/if}
-
-<style>
-	button {
-		padding: 0 0 0 1.5em;
-		background: url(/tutorial/icons/folder.svg) 0 0.1em no-repeat;
-		background-size: 1em 1em;
-		font-weight: bold;
-		cursor: pointer;
-		border: none;
-		margin: 0;
-	}
-
-	.expanded {
-		background-image: url(/tutorial/icons/folder-open.svg);
-	}
-
-	ul {
-		padding: 0.2em 0 0 0.5em;
-		margin: 0 0 0 0.5em;
-		list-style: none;
-		border-left: 1px solid #eee;
-	}
-
-	li {
-		padding: 0.2em 0;
-	}
-</style>
diff --git a/documentation/tutorial/16-special-elements/01-svelte-self/text.md b/documentation/tutorial/16-special-elements/01-svelte-self/text.md
deleted file mode 100644
index 04d7913e4b..0000000000
--- a/documentation/tutorial/16-special-elements/01-svelte-self/text.md
+++ /dev/null
@@ -1,25 +0,0 @@
----
-title: <svelte:self>
----
-
-Svelte provides a variety of built-in elements. The first, `<svelte:self>`, allows a component to contain itself recursively.
-
-It's useful for things like this folder tree view, where folders can contain _other_ folders. In `Folder.svelte` we want to be able to do this...
-
-```svelte
-{#if file.files}
-	<Folder {...file} />
-{:else}
-	<File {...file} />
-{/if}
-```
-
-...but that's impossible, because a module can't import itself. Instead, we use `<svelte:self>`:
-
-```svelte
-{#if file.files}
-	<svelte:self {...file} />
-{:else}
-	<File {...file} />
-{/if}
-```
diff --git a/documentation/tutorial/16-special-elements/02-svelte-component/app-a/App.svelte b/documentation/tutorial/16-special-elements/02-svelte-component/app-a/App.svelte
deleted file mode 100644
index 79aad72bdf..0000000000
--- a/documentation/tutorial/16-special-elements/02-svelte-component/app-a/App.svelte
+++ /dev/null
@@ -1,27 +0,0 @@
-<script>
-	import RedThing from './RedThing.svelte';
-	import GreenThing from './GreenThing.svelte';
-	import BlueThing from './BlueThing.svelte';
-
-	const options = [
-		{ color: 'red', component: RedThing },
-		{ color: 'green', component: GreenThing },
-		{ color: 'blue', component: BlueThing }
-	];
-
-	let selected = options[0];
-</script>
-
-<select bind:value={selected}>
-	{#each options as option}
-		<option value={option}>{option.color}</option>
-	{/each}
-</select>
-
-{#if selected.color === 'red'}
-	<RedThing />
-{:else if selected.color === 'green'}
-	<GreenThing />
-{:else if selected.color === 'blue'}
-	<BlueThing />
-{/if}
diff --git a/documentation/tutorial/16-special-elements/02-svelte-component/app-a/BlueThing.svelte b/documentation/tutorial/16-special-elements/02-svelte-component/app-a/BlueThing.svelte
deleted file mode 100644
index 551f1afbbe..0000000000
--- a/documentation/tutorial/16-special-elements/02-svelte-component/app-a/BlueThing.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<strong>Blue thing</strong>
-
-<style>
-	strong {
-		color: blue;
-	}
-</style>
diff --git a/documentation/tutorial/16-special-elements/02-svelte-component/app-a/GreenThing.svelte b/documentation/tutorial/16-special-elements/02-svelte-component/app-a/GreenThing.svelte
deleted file mode 100644
index a224720e6c..0000000000
--- a/documentation/tutorial/16-special-elements/02-svelte-component/app-a/GreenThing.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<strong>Green thing</strong>
-
-<style>
-	strong {
-		color: green;
-	}
-</style>
diff --git a/documentation/tutorial/16-special-elements/02-svelte-component/app-a/RedThing.svelte b/documentation/tutorial/16-special-elements/02-svelte-component/app-a/RedThing.svelte
deleted file mode 100644
index 9774363c1b..0000000000
--- a/documentation/tutorial/16-special-elements/02-svelte-component/app-a/RedThing.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<strong>Red thing</strong>
-
-<style>
-	strong {
-		color: red;
-	}
-</style>
diff --git a/documentation/tutorial/16-special-elements/02-svelte-component/app-b/App.svelte b/documentation/tutorial/16-special-elements/02-svelte-component/app-b/App.svelte
deleted file mode 100644
index 69e51253fc..0000000000
--- a/documentation/tutorial/16-special-elements/02-svelte-component/app-b/App.svelte
+++ /dev/null
@@ -1,21 +0,0 @@
-<script>
-	import RedThing from './RedThing.svelte';
-	import GreenThing from './GreenThing.svelte';
-	import BlueThing from './BlueThing.svelte';
-
-	const options = [
-		{ color: 'red', component: RedThing },
-		{ color: 'green', component: GreenThing },
-		{ color: 'blue', component: BlueThing }
-	];
-
-	let selected = options[0];
-</script>
-
-<select bind:value={selected}>
-	{#each options as option}
-		<option value={option}>{option.color}</option>
-	{/each}
-</select>
-
-<svelte:component this={selected.component} />
diff --git a/documentation/tutorial/16-special-elements/02-svelte-component/app-b/BlueThing.svelte b/documentation/tutorial/16-special-elements/02-svelte-component/app-b/BlueThing.svelte
deleted file mode 100644
index 551f1afbbe..0000000000
--- a/documentation/tutorial/16-special-elements/02-svelte-component/app-b/BlueThing.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<strong>Blue thing</strong>
-
-<style>
-	strong {
-		color: blue;
-	}
-</style>
diff --git a/documentation/tutorial/16-special-elements/02-svelte-component/app-b/GreenThing.svelte b/documentation/tutorial/16-special-elements/02-svelte-component/app-b/GreenThing.svelte
deleted file mode 100644
index a224720e6c..0000000000
--- a/documentation/tutorial/16-special-elements/02-svelte-component/app-b/GreenThing.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<strong>Green thing</strong>
-
-<style>
-	strong {
-		color: green;
-	}
-</style>
diff --git a/documentation/tutorial/16-special-elements/02-svelte-component/app-b/RedThing.svelte b/documentation/tutorial/16-special-elements/02-svelte-component/app-b/RedThing.svelte
deleted file mode 100644
index 9774363c1b..0000000000
--- a/documentation/tutorial/16-special-elements/02-svelte-component/app-b/RedThing.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<strong>Red thing</strong>
-
-<style>
-	strong {
-		color: red;
-	}
-</style>
diff --git a/documentation/tutorial/16-special-elements/02-svelte-component/text.md b/documentation/tutorial/16-special-elements/02-svelte-component/text.md
deleted file mode 100644
index 5582d29d17..0000000000
--- a/documentation/tutorial/16-special-elements/02-svelte-component/text.md
+++ /dev/null
@@ -1,23 +0,0 @@
----
-title: <svelte:component>
----
-
-A component can change its category altogether with `<svelte:component>`. Instead of a sequence of `if` blocks...
-
-```svelte
-{#if selected.color === 'red'}
-	<RedThing />
-{:else if selected.color === 'green'}
-	<GreenThing />
-{:else if selected.color === 'blue'}
-	<BlueThing />
-{/if}
-```
-
-...we can have a single dynamic component:
-
-```svelte
-<svelte:component this={selected.component} />
-```
-
-The `this` value can be any component constructor, or a falsy value — if it's falsy, no component is rendered.
diff --git a/documentation/tutorial/16-special-elements/03-svelte-element/app-a/App.svelte b/documentation/tutorial/16-special-elements/03-svelte-element/app-a/App.svelte
deleted file mode 100644
index 0718efd949..0000000000
--- a/documentation/tutorial/16-special-elements/03-svelte-element/app-a/App.svelte
+++ /dev/null
@@ -1,18 +0,0 @@
-<script>
-	const options = ['h1', 'h3', 'p'];
-	let selected = options[0];
-</script>
-
-<select bind:value={selected}>
-	{#each options as option}
-		<option value={option}>{option}</option>
-	{/each}
-</select>
-
-{#if selected === 'h1'}
-	<h1>I'm a h1 tag</h1>
-{:else if selected === 'h3'}
-	<h3>I'm a h3 tag</h3>
-{:else if selected === 'p'}
-	<p>I'm a p tag</p>
-{/if}
diff --git a/documentation/tutorial/16-special-elements/03-svelte-element/app-b/App.svelte b/documentation/tutorial/16-special-elements/03-svelte-element/app-b/App.svelte
deleted file mode 100644
index 068f7b3c4f..0000000000
--- a/documentation/tutorial/16-special-elements/03-svelte-element/app-b/App.svelte
+++ /dev/null
@@ -1,12 +0,0 @@
-<script>
-	const options = ['h1', 'h3', 'p'];
-	let selected = options[0];
-</script>
-
-<select bind:value={selected}>
-	{#each options as option}
-		<option value={option}>{option}</option>
-	{/each}
-</select>
-
-<svelte:element this={selected}>I'm a {selected} tag</svelte:element>
diff --git a/documentation/tutorial/16-special-elements/03-svelte-element/text.md b/documentation/tutorial/16-special-elements/03-svelte-element/text.md
deleted file mode 100644
index 8965d5549e..0000000000
--- a/documentation/tutorial/16-special-elements/03-svelte-element/text.md
+++ /dev/null
@@ -1,23 +0,0 @@
----
-title: <svelte:element>
----
-
-Sometimes we don't know in advance what kind of DOM element to render. `<svelte:element>` comes in handy here. Instead of a sequence of `if` blocks...
-
-```svelte
-{#if selected === 'h1'}
-	<h1>I'm a h1 tag</h1>
-{:else if selected === 'h3'}
-	<h3>I'm a h3 tag</h3>
-{:else if selected === 'p'}
-	<p>I'm a p tag</p>
-{/if}
-```
-
-...we can have a single dynamic component:
-
-```svelte
-<svelte:element this={selected}>I'm a {selected} tag</svelte:element>
-```
-
-The `this` value can be any string, or a falsy value — if it's falsy, no element is rendered.
diff --git a/documentation/tutorial/16-special-elements/04-svelte-window/app-a/App.svelte b/documentation/tutorial/16-special-elements/04-svelte-window/app-a/App.svelte
deleted file mode 100644
index d42d315b80..0000000000
--- a/documentation/tutorial/16-special-elements/04-svelte-window/app-a/App.svelte
+++ /dev/null
@@ -1,42 +0,0 @@
-<script>
-	let key;
-	let code;
-
-	function handleKeydown(event) {
-		key = event.key;
-		code = event.code;
-	}
-</script>
-
-<svelte:window />
-
-<div style="text-align: center">
-	{#if key}
-		<kbd>{key === ' ' ? 'Space' : key}</kbd>
-		<p>{code}</p>
-	{:else}
-		<p>Focus this window and press any key</p>
-	{/if}
-</div>
-
-<style>
-	div {
-		display: flex;
-		height: 100%;
-		align-items: center;
-		justify-content: center;
-		flex-direction: column;
-	}
-
-	kbd {
-		background-color: #eee;
-		border-radius: 4px;
-		font-size: 6em;
-		padding: 0.2em 0.5em;
-		border-top: 5px solid rgba(255, 255, 255, 0.5);
-		border-left: 5px solid rgba(255, 255, 255, 0.5);
-		border-right: 5px solid rgba(0, 0, 0, 0.2);
-		border-bottom: 5px solid rgba(0, 0, 0, 0.2);
-		color: #555;
-	}
-</style>
diff --git a/documentation/tutorial/16-special-elements/04-svelte-window/app-b/App.svelte b/documentation/tutorial/16-special-elements/04-svelte-window/app-b/App.svelte
deleted file mode 100644
index 2a90bbef8b..0000000000
--- a/documentation/tutorial/16-special-elements/04-svelte-window/app-b/App.svelte
+++ /dev/null
@@ -1,42 +0,0 @@
-<script>
-	let key;
-	let code;
-
-	function handleKeydown(event) {
-		key = event.key;
-		code = event.code;
-	}
-</script>
-
-<svelte:window on:keydown={handleKeydown} />
-
-<div style="text-align: center">
-	{#if key}
-		<kbd>{key === ' ' ? 'Space' : key}</kbd>
-		<p>{code}</p>
-	{:else}
-		<p>Focus this window and press any key</p>
-	{/if}
-</div>
-
-<style>
-	div {
-		display: flex;
-		height: 100%;
-		align-items: center;
-		justify-content: center;
-		flex-direction: column;
-	}
-
-	kbd {
-		background-color: #eee;
-		border-radius: 4px;
-		font-size: 6em;
-		padding: 0.2em 0.5em;
-		border-top: 5px solid rgba(255, 255, 255, 0.5);
-		border-left: 5px solid rgba(255, 255, 255, 0.5);
-		border-right: 5px solid rgba(0, 0, 0, 0.2);
-		border-bottom: 5px solid rgba(0, 0, 0, 0.2);
-		color: #555;
-	}
-</style>
diff --git a/documentation/tutorial/16-special-elements/04-svelte-window/text.md b/documentation/tutorial/16-special-elements/04-svelte-window/text.md
deleted file mode 100644
index 4c6c777c71..0000000000
--- a/documentation/tutorial/16-special-elements/04-svelte-window/text.md
+++ /dev/null
@@ -1,13 +0,0 @@
----
-title: <svelte:window>
----
-
-Just as you can add event listeners to any DOM element, you can add event listeners to the `window` object with `<svelte:window>`.
-
-On line 11, add the `keydown` listener:
-
-```svelte
-<svelte:window on:keydown={handleKeydown} />
-```
-
-> As with DOM elements, you can add [event modifiers](/tutorial/event-modifiers) like `preventDefault`.
diff --git a/documentation/tutorial/16-special-elements/05-svelte-window-bindings/app-a/App.svelte b/documentation/tutorial/16-special-elements/05-svelte-window-bindings/app-a/App.svelte
deleted file mode 100644
index 97e557a0b5..0000000000
--- a/documentation/tutorial/16-special-elements/05-svelte-window-bindings/app-a/App.svelte
+++ /dev/null
@@ -1,86 +0,0 @@
-<script>
-	const layers = [0, 1, 2, 3, 4, 5, 6, 7, 8];
-
-	let y;
-</script>
-
-<svelte:window />
-
-<a class="parallax-container" href="https://www.firewatchgame.com">
-	{#each layers as layer}
-		<img
-			style="transform: translate(0,{(-y * layer) / (layers.length - 1)}px)"
-			src="https://www.firewatchgame.com/images/parallax/parallax{layer}.png"
-			alt="parallax layer {layer}"
-		/>
-	{/each}
-</a>
-
-<div class="text">
-	<span style="opacity: {1 - Math.max(0, y / 40)}"> scroll down </span>
-
-	<div class="foreground">
-		You have scrolled {y} pixels
-	</div>
-</div>
-
-<style>
-	.parallax-container {
-		position: fixed;
-		width: 2400px;
-		height: 712px;
-		left: 50%;
-		transform: translate(-50%, 0);
-	}
-
-	.parallax-container img {
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		will-change: transform;
-	}
-
-	.parallax-container img:last-child::after {
-		content: '';
-		position: absolute;
-		width: 100%;
-		height: 100%;
-		background: rgb(45, 10, 13);
-	}
-
-	.text {
-		position: relative;
-		width: 100%;
-		height: 300vh;
-		color: rgb(220, 113, 43);
-		text-align: center;
-		padding: 4em 0.5em 0.5em 0.5em;
-		box-sizing: border-box;
-		pointer-events: none;
-	}
-
-	span {
-		display: block;
-		font-size: 1em;
-		text-transform: uppercase;
-		will-change: transform, opacity;
-	}
-
-	.foreground {
-		position: absolute;
-		top: 711px;
-		left: 0;
-		width: 100%;
-		height: calc(100% - 712px);
-		background-color: rgb(32, 0, 1);
-		color: white;
-		padding: 50vh 0 0 0;
-	}
-
-	:global(body) {
-		margin: 0;
-		padding: 0;
-		background-color: rgb(253, 174, 51);
-	}
-</style>
diff --git a/documentation/tutorial/16-special-elements/05-svelte-window-bindings/app-b/App.svelte b/documentation/tutorial/16-special-elements/05-svelte-window-bindings/app-b/App.svelte
deleted file mode 100644
index 7e85600abe..0000000000
--- a/documentation/tutorial/16-special-elements/05-svelte-window-bindings/app-b/App.svelte
+++ /dev/null
@@ -1,86 +0,0 @@
-<script>
-	const layers = [0, 1, 2, 3, 4, 5, 6, 7, 8];
-
-	let y;
-</script>
-
-<svelte:window bind:scrollY={y} />
-
-<a class="parallax-container" href="https://www.firewatchgame.com">
-	{#each layers as layer}
-		<img
-			style="transform: translate(0,{(-y * layer) / (layers.length - 1)}px)"
-			src="https://www.firewatchgame.com/images/parallax/parallax{layer}.png"
-			alt="parallax layer {layer}"
-		/>
-	{/each}
-</a>
-
-<div class="text">
-	<span style="opacity: {1 - Math.max(0, y / 40)}"> scroll down </span>
-
-	<div class="foreground">
-		You have scrolled {y} pixels
-	</div>
-</div>
-
-<style>
-	.parallax-container {
-		position: fixed;
-		width: 2400px;
-		height: 712px;
-		left: 50%;
-		transform: translate(-50%, 0);
-	}
-
-	.parallax-container img {
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		will-change: transform;
-	}
-
-	.parallax-container img:last-child::after {
-		content: '';
-		position: absolute;
-		width: 100%;
-		height: 100%;
-		background: rgb(45, 10, 13);
-	}
-
-	.text {
-		position: relative;
-		width: 100%;
-		height: 300vh;
-		color: rgb(220, 113, 43);
-		text-align: center;
-		padding: 4em 0.5em 0.5em 0.5em;
-		box-sizing: border-box;
-		pointer-events: none;
-	}
-
-	span {
-		display: block;
-		font-size: 1em;
-		text-transform: uppercase;
-		will-change: transform, opacity;
-	}
-
-	.foreground {
-		position: absolute;
-		top: 711px;
-		left: 0;
-		width: 100%;
-		height: calc(100% - 712px);
-		background-color: rgb(32, 0, 1);
-		color: white;
-		padding: 50vh 0 0 0;
-	}
-
-	:global(body) {
-		margin: 0;
-		padding: 0;
-		background-color: rgb(253, 174, 51);
-	}
-</style>
diff --git a/documentation/tutorial/16-special-elements/05-svelte-window-bindings/text.md b/documentation/tutorial/16-special-elements/05-svelte-window-bindings/text.md
deleted file mode 100644
index 6885c2974e..0000000000
--- a/documentation/tutorial/16-special-elements/05-svelte-window-bindings/text.md
+++ /dev/null
@@ -1,21 +0,0 @@
----
-title: <svelte:window> bindings
----
-
-We can also bind to certain properties of `window`, such as `scrollY`. Update line 7:
-
-```svelte
-<svelte:window bind:scrollY={y} />
-```
-
-The list of properties you can bind to is as follows:
-
-- `innerWidth`
-- `innerHeight`
-- `outerWidth`
-- `outerHeight`
-- `scrollX`
-- `scrollY`
-- `online` — an alias for `window.navigator.onLine`
-
-All except `scrollX` and `scrollY` are readonly.
diff --git a/documentation/tutorial/16-special-elements/06-svelte-document/app-a/App.svelte b/documentation/tutorial/16-special-elements/06-svelte-document/app-a/App.svelte
deleted file mode 100644
index 7b9cc7bcb7..0000000000
--- a/documentation/tutorial/16-special-elements/06-svelte-document/app-a/App.svelte
+++ /dev/null
@@ -1,10 +0,0 @@
-<script>
-	let selection = '';
-
-	const handleSelectionChange = (e) => (selection = document.getSelection());
-</script>
-
-<svelte:document />
-
-<p>Select this text to fire events</p>
-<p>Selection: {selection}</p>
diff --git a/documentation/tutorial/16-special-elements/06-svelte-document/app-b/App.svelte b/documentation/tutorial/16-special-elements/06-svelte-document/app-b/App.svelte
deleted file mode 100644
index e11a9005db..0000000000
--- a/documentation/tutorial/16-special-elements/06-svelte-document/app-b/App.svelte
+++ /dev/null
@@ -1,10 +0,0 @@
-<script>
-	let selection = '';
-
-	const handleSelectionChange = (e) => (selection = document.getSelection());
-</script>
-
-<svelte:document on:selectionchange={handleSelectionChange} />
-
-<p>Select this text to fire events</p>
-<p>Selection: {selection}</p>
diff --git a/documentation/tutorial/16-special-elements/06-svelte-document/text.md b/documentation/tutorial/16-special-elements/06-svelte-document/text.md
deleted file mode 100644
index 0f0a7e4ff1..0000000000
--- a/documentation/tutorial/16-special-elements/06-svelte-document/text.md
+++ /dev/null
@@ -1,13 +0,0 @@
----
-title: <svelte:document>
----
-
-Similar to `<svelte:window>`, the `<svelte:document>` element allows you to listen for events that fire on `document`. This is useful with events like `selectionchange`, which doesn't fire on `window`.
-
-Add the `selectionchange` handler to the `<svelte:document>` tag:
-
-```svelte
-<svelte:document on:selectionchange={handleSelectionChange} />
-```
-
-> Avoid `mouseenter` and `mouseleave` handlers on this element, these events are not fired on `document` in all browsers. Use `<svelte:body>` for this instead.
diff --git a/documentation/tutorial/16-special-elements/07-svelte-body/app-a/App.svelte b/documentation/tutorial/16-special-elements/07-svelte-body/app-a/App.svelte
deleted file mode 100644
index 43d6c6b7eb..0000000000
--- a/documentation/tutorial/16-special-elements/07-svelte-body/app-a/App.svelte
+++ /dev/null
@@ -1,34 +0,0 @@
-<script>
-	let hereKitty = false;
-
-	const handleMouseenter = () => (hereKitty = true);
-	const handleMouseleave = () => (hereKitty = false);
-</script>
-
-<svelte:body />
-
-<!-- creative commons BY-NC http://www.pngall.com/kitten-png/download/7247 -->
-<img
-	class:curious={hereKitty}
-	alt="Kitten wants to know what's going on"
-	src="/tutorial/kitten.png"
-/>
-
-<style>
-	img {
-		position: absolute;
-		left: 0;
-		bottom: -60px;
-		transform: translate(-80%, 0) rotate(-30deg);
-		transform-origin: 100% 100%;
-		transition: transform 0.4s;
-	}
-
-	.curious {
-		transform: translate(-15%, 0) rotate(0deg);
-	}
-
-	:global(body) {
-		overflow: hidden;
-	}
-</style>
diff --git a/documentation/tutorial/16-special-elements/07-svelte-body/app-b/App.svelte b/documentation/tutorial/16-special-elements/07-svelte-body/app-b/App.svelte
deleted file mode 100644
index 71edebea48..0000000000
--- a/documentation/tutorial/16-special-elements/07-svelte-body/app-b/App.svelte
+++ /dev/null
@@ -1,34 +0,0 @@
-<script>
-	let hereKitty = false;
-
-	const handleMouseenter = () => (hereKitty = true);
-	const handleMouseleave = () => (hereKitty = false);
-</script>
-
-<svelte:body on:mouseenter={handleMouseenter} on:mouseleave={handleMouseleave} />
-
-<!-- creative commons BY-NC http://www.pngall.com/kitten-png/download/7247 -->
-<img
-	class:curious={hereKitty}
-	alt="Kitten wants to know what's going on"
-	src="/tutorial/kitten.png"
-/>
-
-<style>
-	img {
-		position: absolute;
-		left: 0;
-		bottom: -60px;
-		transform: translate(-80%, 0) rotate(-30deg);
-		transform-origin: 100% 100%;
-		transition: transform 0.4s;
-	}
-
-	.curious {
-		transform: translate(-15%, 0) rotate(0deg);
-	}
-
-	:global(body) {
-		overflow: hidden;
-	}
-</style>
diff --git a/documentation/tutorial/16-special-elements/07-svelte-body/text.md b/documentation/tutorial/16-special-elements/07-svelte-body/text.md
deleted file mode 100644
index 15a57d7d51..0000000000
--- a/documentation/tutorial/16-special-elements/07-svelte-body/text.md
+++ /dev/null
@@ -1,15 +0,0 @@
----
-title: <svelte:body>
----
-
-Similar to `<svelte:window>` and `<svelte:document>`, the `<svelte:body>` element allows you to listen for events that fire on `document.body`. This is useful with the `mouseenter` and `mouseleave` events, which don't fire on `window`.
-
-Add the `mouseenter` and `mouseleave` handlers to the `<svelte:body>` tag:
-
-<!-- prettier-ignore -->
-```svelte
-<svelte:body
-	on:mouseenter={handleMouseenter}
-	on:mouseleave={handleMouseleave}
-/>
-```
diff --git a/documentation/tutorial/16-special-elements/08-svelte-head/app-a/App.svelte b/documentation/tutorial/16-special-elements/08-svelte-head/app-a/App.svelte
deleted file mode 100644
index 73477dbe9d..0000000000
--- a/documentation/tutorial/16-special-elements/08-svelte-head/app-a/App.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<svelte:head>
-	<!-- elements go here -->
-</svelte:head>
-
-<h1>Hello world!</h1>
diff --git a/documentation/tutorial/16-special-elements/08-svelte-head/app-b/App.svelte b/documentation/tutorial/16-special-elements/08-svelte-head/app-b/App.svelte
deleted file mode 100644
index 5e6bb2d945..0000000000
--- a/documentation/tutorial/16-special-elements/08-svelte-head/app-b/App.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<svelte:head>
-	<link rel="stylesheet" href="/tutorial/dark-theme.css" />
-</svelte:head>
-
-<h1>Hello world!</h1>
diff --git a/documentation/tutorial/16-special-elements/08-svelte-head/text.md b/documentation/tutorial/16-special-elements/08-svelte-head/text.md
deleted file mode 100644
index 91fd4740f5..0000000000
--- a/documentation/tutorial/16-special-elements/08-svelte-head/text.md
+++ /dev/null
@@ -1,13 +0,0 @@
----
-title: <svelte:head>
----
-
-The `<svelte:head>` element allows you to insert elements inside the `<head>` of your document:
-
-```svelte
-<svelte:head>
-	<link rel="stylesheet" href="/tutorial/dark-theme.css" />
-</svelte:head>
-```
-
-> In server-side rendering (SSR) mode, contents of `<svelte:head>` are returned separately from the rest of your HTML.
diff --git a/documentation/tutorial/16-special-elements/09-svelte-options/app-a/App.svelte b/documentation/tutorial/16-special-elements/09-svelte-options/app-a/App.svelte
deleted file mode 100644
index 96eb7b3977..0000000000
--- a/documentation/tutorial/16-special-elements/09-svelte-options/app-a/App.svelte
+++ /dev/null
@@ -1,30 +0,0 @@
-<script>
-	import Todo from './Todo.svelte';
-
-	let todos = [
-		{ id: 1, done: true, text: 'wash the car' },
-		{ id: 2, done: false, text: 'take the dog for a walk' },
-		{ id: 3, done: false, text: 'mow the lawn' }
-	];
-
-	function toggle(toggled) {
-		todos = todos.map((todo) => {
-			if (todo === toggled) {
-				// return a new object
-				return {
-					id: todo.id,
-					text: todo.text,
-					done: !todo.done
-				};
-			}
-
-			// return the same object
-			return todo;
-		});
-	}
-</script>
-
-<h2>Todos</h2>
-{#each todos as todo}
-	<Todo {todo} on:click={() => toggle(todo)} />
-{/each}
diff --git a/documentation/tutorial/16-special-elements/09-svelte-options/app-a/Todo.svelte b/documentation/tutorial/16-special-elements/09-svelte-options/app-a/Todo.svelte
deleted file mode 100644
index 14083c0ba4..0000000000
--- a/documentation/tutorial/16-special-elements/09-svelte-options/app-a/Todo.svelte
+++ /dev/null
@@ -1,28 +0,0 @@
-<script>
-	import { afterUpdate } from 'svelte';
-	import flash from './flash.js';
-
-	export let todo;
-
-	let button;
-
-	afterUpdate(() => {
-		flash(button);
-	});
-</script>
-
-<!-- the text will flash red whenever
-     the `todo` object changes -->
-<button bind:this={button} type="button" on:click>
-	{todo.done ? '👍' : ''}
-	{todo.text}
-</button>
-
-<style>
-	button {
-		all: unset;
-		display: block;
-		cursor: pointer;
-		line-height: 1.5;
-	}
-</style>
diff --git a/documentation/tutorial/16-special-elements/09-svelte-options/app-a/flash.js b/documentation/tutorial/16-special-elements/09-svelte-options/app-a/flash.js
deleted file mode 100644
index 481038d009..0000000000
--- a/documentation/tutorial/16-special-elements/09-svelte-options/app-a/flash.js
+++ /dev/null
@@ -1,13 +0,0 @@
-export default function flash(element) {
-	requestAnimationFrame(() => {
-		element.style.transition = 'none';
-		element.style.color = 'rgba(255,62,0,1)';
-		element.style.backgroundColor = 'rgba(255,62,0,0.2)';
-
-		setTimeout(() => {
-			element.style.transition = 'color 1s, background 1s';
-			element.style.color = '';
-			element.style.backgroundColor = '';
-		});
-	});
-}
diff --git a/documentation/tutorial/16-special-elements/09-svelte-options/app-b/App.svelte b/documentation/tutorial/16-special-elements/09-svelte-options/app-b/App.svelte
deleted file mode 100644
index 96eb7b3977..0000000000
--- a/documentation/tutorial/16-special-elements/09-svelte-options/app-b/App.svelte
+++ /dev/null
@@ -1,30 +0,0 @@
-<script>
-	import Todo from './Todo.svelte';
-
-	let todos = [
-		{ id: 1, done: true, text: 'wash the car' },
-		{ id: 2, done: false, text: 'take the dog for a walk' },
-		{ id: 3, done: false, text: 'mow the lawn' }
-	];
-
-	function toggle(toggled) {
-		todos = todos.map((todo) => {
-			if (todo === toggled) {
-				// return a new object
-				return {
-					id: todo.id,
-					text: todo.text,
-					done: !todo.done
-				};
-			}
-
-			// return the same object
-			return todo;
-		});
-	}
-</script>
-
-<h2>Todos</h2>
-{#each todos as todo}
-	<Todo {todo} on:click={() => toggle(todo)} />
-{/each}
diff --git a/documentation/tutorial/16-special-elements/09-svelte-options/app-b/Todo.svelte b/documentation/tutorial/16-special-elements/09-svelte-options/app-b/Todo.svelte
deleted file mode 100644
index 6104f16493..0000000000
--- a/documentation/tutorial/16-special-elements/09-svelte-options/app-b/Todo.svelte
+++ /dev/null
@@ -1,30 +0,0 @@
-<svelte:options immutable={true} />
-
-<script>
-	import { afterUpdate } from 'svelte';
-	import flash from './flash.js';
-
-	export let todo;
-
-	let button;
-
-	afterUpdate(() => {
-		flash(button);
-	});
-</script>
-
-<!-- the text will flash red whenever
-     the `todo` object changes -->
-<button bind:this={button} type="button" on:click>
-	{todo.done ? '👍' : ''}
-	{todo.text}
-</button>
-
-<style>
-	button {
-		all: unset;
-		display: block;
-		cursor: pointer;
-		line-height: 1.5;
-	}
-</style>
diff --git a/documentation/tutorial/16-special-elements/09-svelte-options/app-b/flash.js b/documentation/tutorial/16-special-elements/09-svelte-options/app-b/flash.js
deleted file mode 100644
index 481038d009..0000000000
--- a/documentation/tutorial/16-special-elements/09-svelte-options/app-b/flash.js
+++ /dev/null
@@ -1,13 +0,0 @@
-export default function flash(element) {
-	requestAnimationFrame(() => {
-		element.style.transition = 'none';
-		element.style.color = 'rgba(255,62,0,1)';
-		element.style.backgroundColor = 'rgba(255,62,0,0.2)';
-
-		setTimeout(() => {
-			element.style.transition = 'color 1s, background 1s';
-			element.style.color = '';
-			element.style.backgroundColor = '';
-		});
-	});
-}
diff --git a/documentation/tutorial/16-special-elements/09-svelte-options/text.md b/documentation/tutorial/16-special-elements/09-svelte-options/text.md
deleted file mode 100644
index 2049365efc..0000000000
--- a/documentation/tutorial/16-special-elements/09-svelte-options/text.md
+++ /dev/null
@@ -1,30 +0,0 @@
----
-title: <svelte:options>
----
-
-The `<svelte:options>` element allows you to specify compiler options.
-
-We'll use the `immutable` option as an example. In this app, the `<Todo>` component flashes whenever it receives new data. Clicking on one of the items toggles its `done` state by creating an updated `todos` array. This causes the _other_ `<Todo>` items to flash, even though they don't end up making any changes to the DOM.
-
-We can optimise this by telling the `<Todo>` component to expect _immutable_ data. This means that we're promising never to _mutate_ the `todo` prop, but will instead create new todo objects whenever things change.
-
-Add this to the top of the `Todo.svelte` file:
-
-```svelte
-<svelte:options immutable={true} />
-```
-
-> You can shorten this to `<svelte:options immutable/>` if you prefer.
-
-Now, when you toggle todos by clicking on them, only the updated component flashes.
-
-The options that can be set here are:
-
-- `immutable={true}` — you never use mutable data, so the compiler can do simple referential equality checks to determine if values have changed
-- `immutable={false}` — the default. Svelte will be more conservative about whether or not mutable objects have changed
-- `accessors={true}` — adds getters and setters for the component's props
-- `accessors={false}` — the default
-- `namespace="..."` — the namespace where this component will be used, most commonly `"svg"`
-- `customElement={...}` — the [options](/docs/custom-elements-api#component-options) to use when compiling this component as a custom element. If a string is passed, it is used as the `tag` option
-
-Consult the [API reference](/docs) for more information on these options.
diff --git a/documentation/tutorial/16-special-elements/10-svelte-fragment/app-a/App.svelte b/documentation/tutorial/16-special-elements/10-svelte-fragment/app-a/App.svelte
deleted file mode 100644
index d3ccc673c8..0000000000
--- a/documentation/tutorial/16-special-elements/10-svelte-fragment/app-a/App.svelte
+++ /dev/null
@@ -1,10 +0,0 @@
-<script>
-	import Box from './Box.svelte';
-</script>
-
-<Box>
-	<div slot="footer">
-		<p>All rights reserved.</p>
-		<p>Copyright (c) 2019 Svelte Industries</p>
-	</div>
-</Box>
diff --git a/documentation/tutorial/16-special-elements/10-svelte-fragment/app-a/Box.svelte b/documentation/tutorial/16-special-elements/10-svelte-fragment/app-a/Box.svelte
deleted file mode 100644
index 843a3940aa..0000000000
--- a/documentation/tutorial/16-special-elements/10-svelte-fragment/app-a/Box.svelte
+++ /dev/null
@@ -1,20 +0,0 @@
-<div class="box">
-	<slot name="header">No header was provided</slot>
-	<p>Some content between header and footer</p>
-	<slot name="footer" />
-</div>
-
-<style>
-	.box {
-		width: 300px;
-		border: 1px solid #aaa;
-		border-radius: 2px;
-		box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
-		padding: 1em;
-		margin: 0 0 1em 0;
-
-		display: flex;
-		flex-direction: column;
-		gap: 1em;
-	}
-</style>
diff --git a/documentation/tutorial/16-special-elements/10-svelte-fragment/app-b/App.svelte b/documentation/tutorial/16-special-elements/10-svelte-fragment/app-b/App.svelte
deleted file mode 100644
index 9ad2616ad7..0000000000
--- a/documentation/tutorial/16-special-elements/10-svelte-fragment/app-b/App.svelte
+++ /dev/null
@@ -1,10 +0,0 @@
-<script>
-	import Box from './Box.svelte';
-</script>
-
-<Box>
-	<svelte:fragment slot="footer">
-		<p>All rights reserved.</p>
-		<p>Copyright (c) 2019 Svelte Industries</p>
-	</svelte:fragment>
-</Box>
diff --git a/documentation/tutorial/16-special-elements/10-svelte-fragment/app-b/Box.svelte b/documentation/tutorial/16-special-elements/10-svelte-fragment/app-b/Box.svelte
deleted file mode 100644
index 843a3940aa..0000000000
--- a/documentation/tutorial/16-special-elements/10-svelte-fragment/app-b/Box.svelte
+++ /dev/null
@@ -1,20 +0,0 @@
-<div class="box">
-	<slot name="header">No header was provided</slot>
-	<p>Some content between header and footer</p>
-	<slot name="footer" />
-</div>
-
-<style>
-	.box {
-		width: 300px;
-		border: 1px solid #aaa;
-		border-radius: 2px;
-		box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
-		padding: 1em;
-		margin: 0 0 1em 0;
-
-		display: flex;
-		flex-direction: column;
-		gap: 1em;
-	}
-</style>
diff --git a/documentation/tutorial/16-special-elements/10-svelte-fragment/text.md b/documentation/tutorial/16-special-elements/10-svelte-fragment/text.md
deleted file mode 100644
index 153cf616fb..0000000000
--- a/documentation/tutorial/16-special-elements/10-svelte-fragment/text.md
+++ /dev/null
@@ -1,35 +0,0 @@
----
-title: <svelte:fragment>
----
-
-The `<svelte:fragment>` element allows you to place content in a named slot without wrapping it in a container DOM element. This keeps the flow layout of your document intact.
-
-In the example notice how we applied a flex layout with a gap of `1em` to the box.
-
-```svelte
-<!-- Box.svelte -->
-<div class="box">
-	<slot name="header">No header was provided</slot>
-	<p>Some content between header and footer</p>
-	<slot name="footer" />
-</div>
-
-<style>
-	.box {
-		display: flex;
-		flex-direction: column;
-		gap: 1em;
-	}
-</style>
-```
-
-However, the content in the footer is not spaced out according to this rhythm because wrapping it in a div created a new flow layout.
-
-We can solve this by changing `<div slot="footer">` in the `App` component. Replace the `<div>` with `<svelte:fragment>`:
-
-```svelte
-<svelte:fragment slot="footer">
-	<p>All rights reserved.</p>
-	<p>Copyright (c) 2019 Svelte Industries</p>
-</svelte:fragment>
-```
diff --git a/documentation/tutorial/16-special-elements/meta.json b/documentation/tutorial/16-special-elements/meta.json
deleted file mode 100644
index 6c2af96c1d..0000000000
--- a/documentation/tutorial/16-special-elements/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Special elements"
-}
diff --git a/documentation/tutorial/17-module-context/01-sharing-code/app-a/App.svelte b/documentation/tutorial/17-module-context/01-sharing-code/app-a/App.svelte
deleted file mode 100644
index f031b43fd5..0000000000
--- a/documentation/tutorial/17-module-context/01-sharing-code/app-a/App.svelte
+++ /dev/null
@@ -1,43 +0,0 @@
-<script>
-	import AudioPlayer from './AudioPlayer.svelte';
-</script>
-
-<!-- https://musopen.org/music/9862-the-blue-danube-op-314/ -->
-<AudioPlayer
-	src="https://sveltejs.github.io/assets/music/strauss.mp3"
-	title="The Blue Danube Waltz"
-	composer="Johann Strauss"
-	performer="European Archive"
-/>
-
-<!-- https://musopen.org/music/43775-the-planets-op-32/ -->
-<AudioPlayer
-	src="https://sveltejs.github.io/assets/music/holst.mp3"
-	title="Mars, the Bringer of War"
-	composer="Gustav Holst"
-	performer="USAF Heritage of America Band"
-/>
-
-<!-- https://musopen.org/music/8010-3-gymnopedies/ -->
-<AudioPlayer
-	src="https://sveltejs.github.io/assets/music/satie.mp3"
-	title="Gymnopédie no. 1"
-	composer="Erik Satie"
-	performer="Prodigal Procrastinator"
-/>
-
-<!-- https://musopen.org/music/2567-symphony-no-5-in-c-minor-op-67/ -->
-<AudioPlayer
-	src="https://sveltejs.github.io/assets/music/beethoven.mp3"
-	title="Symphony no. 5 in Cm, Op. 67 - I. Allegro con brio"
-	composer="Ludwig van Beethoven"
-	performer="European Archive"
-/>
-
-<!-- https://musopen.org/music/43683-requiem-in-d-minor-k-626/ -->
-<AudioPlayer
-	src="https://sveltejs.github.io/assets/music/mozart.mp3"
-	title="Requiem in D minor, K. 626 - III. Sequence - Lacrymosa"
-	composer="Wolfgang Amadeus Mozart"
-	performer="Markus Staab"
-/>
diff --git a/documentation/tutorial/17-module-context/01-sharing-code/app-a/AudioPlayer.svelte b/documentation/tutorial/17-module-context/01-sharing-code/app-a/AudioPlayer.svelte
deleted file mode 100644
index 0533ec0876..0000000000
--- a/documentation/tutorial/17-module-context/01-sharing-code/app-a/AudioPlayer.svelte
+++ /dev/null
@@ -1,38 +0,0 @@
-<script>
-	export let src;
-	export let title;
-	export let composer;
-	export let performer;
-
-	let audio;
-	let paused = true;
-
-	function stopOthers() {
-		// TODO: implement stopOthers
-	}
-</script>
-
-<article class:playing={!paused}>
-	<h2>{title}</h2>
-	<p><strong>{composer}</strong> / performed by {performer}</p>
-
-	<audio bind:this={audio} bind:paused on:play={stopOthers} controls {src} />
-</article>
-
-<style>
-	article {
-		margin: 0 0 1em 0;
-		max-width: 800px;
-	}
-	h2,
-	p {
-		margin: 0 0 0.3em 0;
-	}
-	audio {
-		width: 100%;
-		margin: 0.5em 0 1em 0;
-	}
-	.playing {
-		color: #ff3e00;
-	}
-</style>
diff --git a/documentation/tutorial/17-module-context/01-sharing-code/app-b/App.svelte b/documentation/tutorial/17-module-context/01-sharing-code/app-b/App.svelte
deleted file mode 100644
index f031b43fd5..0000000000
--- a/documentation/tutorial/17-module-context/01-sharing-code/app-b/App.svelte
+++ /dev/null
@@ -1,43 +0,0 @@
-<script>
-	import AudioPlayer from './AudioPlayer.svelte';
-</script>
-
-<!-- https://musopen.org/music/9862-the-blue-danube-op-314/ -->
-<AudioPlayer
-	src="https://sveltejs.github.io/assets/music/strauss.mp3"
-	title="The Blue Danube Waltz"
-	composer="Johann Strauss"
-	performer="European Archive"
-/>
-
-<!-- https://musopen.org/music/43775-the-planets-op-32/ -->
-<AudioPlayer
-	src="https://sveltejs.github.io/assets/music/holst.mp3"
-	title="Mars, the Bringer of War"
-	composer="Gustav Holst"
-	performer="USAF Heritage of America Band"
-/>
-
-<!-- https://musopen.org/music/8010-3-gymnopedies/ -->
-<AudioPlayer
-	src="https://sveltejs.github.io/assets/music/satie.mp3"
-	title="Gymnopédie no. 1"
-	composer="Erik Satie"
-	performer="Prodigal Procrastinator"
-/>
-
-<!-- https://musopen.org/music/2567-symphony-no-5-in-c-minor-op-67/ -->
-<AudioPlayer
-	src="https://sveltejs.github.io/assets/music/beethoven.mp3"
-	title="Symphony no. 5 in Cm, Op. 67 - I. Allegro con brio"
-	composer="Ludwig van Beethoven"
-	performer="European Archive"
-/>
-
-<!-- https://musopen.org/music/43683-requiem-in-d-minor-k-626/ -->
-<AudioPlayer
-	src="https://sveltejs.github.io/assets/music/mozart.mp3"
-	title="Requiem in D minor, K. 626 - III. Sequence - Lacrymosa"
-	composer="Wolfgang Amadeus Mozart"
-	performer="Markus Staab"
-/>
diff --git a/documentation/tutorial/17-module-context/01-sharing-code/app-b/AudioPlayer.svelte b/documentation/tutorial/17-module-context/01-sharing-code/app-b/AudioPlayer.svelte
deleted file mode 100644
index 6e2e605026..0000000000
--- a/documentation/tutorial/17-module-context/01-sharing-code/app-b/AudioPlayer.svelte
+++ /dev/null
@@ -1,43 +0,0 @@
-<script context="module">
-	let current;
-</script>
-
-<script>
-	export let src;
-	export let title;
-	export let composer;
-	export let performer;
-
-	let audio;
-	let paused = true;
-
-	function stopOthers() {
-		if (current && current !== audio) current.pause();
-		current = audio;
-	}
-</script>
-
-<article class:playing={!paused}>
-	<h2>{title}</h2>
-	<p><strong>{composer}</strong> / performed by {performer}</p>
-
-	<audio bind:this={audio} bind:paused on:play={stopOthers} controls {src} />
-</article>
-
-<style>
-	article {
-		margin: 0 0 1em 0;
-		max-width: 800px;
-	}
-	h2,
-	p {
-		margin: 0 0 0.3em 0;
-	}
-	audio {
-		width: 100%;
-		margin: 0.5em 0 1em 0;
-	}
-	.playing {
-		color: #ff3e00;
-	}
-</style>
diff --git a/documentation/tutorial/17-module-context/01-sharing-code/text.md b/documentation/tutorial/17-module-context/01-sharing-code/text.md
deleted file mode 100644
index 4ac909a7ef..0000000000
--- a/documentation/tutorial/17-module-context/01-sharing-code/text.md
+++ /dev/null
@@ -1,24 +0,0 @@
----
-title: Sharing code
----
-
-In all the examples we've seen so far, the `<script>` block contains code that runs when each component instance is initialised. For the vast majority of components, that's all you'll ever need.
-
-Very occasionally, you'll need to run some code outside of an individual component instance. For example, you can play all five of these audio players simultaneously; it would be better if playing one stopped all the others.
-
-We can do that by declaring a `<script context="module">` block. Code contained inside it will run once, when the module first evaluates, rather than when a component is instantiated. Place this at the top of `AudioPlayer.svelte`:
-
-```svelte
-<script context="module">
-	let current;
-</script>
-```
-
-It's now possible for the components to 'talk' to each other without any state management:
-
-```js
-function stopOthers() {
-	if (current && current !== audio) current.pause();
-	current = audio;
-}
-```
diff --git a/documentation/tutorial/17-module-context/02-module-exports/app-a/App.svelte b/documentation/tutorial/17-module-context/02-module-exports/app-a/App.svelte
deleted file mode 100644
index 9365c46c0a..0000000000
--- a/documentation/tutorial/17-module-context/02-module-exports/app-a/App.svelte
+++ /dev/null
@@ -1,45 +0,0 @@
-<script>
-	import AudioPlayer from './AudioPlayer.svelte';
-</script>
-
-<button> stop all audio </button>
-
-<!-- https://musopen.org/music/9862-the-blue-danube-op-314/ -->
-<AudioPlayer
-	src="https://sveltejs.github.io/assets/music/strauss.mp3"
-	title="The Blue Danube Waltz"
-	composer="Johann Strauss"
-	performer="European Archive"
-/>
-
-<!-- https://musopen.org/music/43775-the-planets-op-32/ -->
-<AudioPlayer
-	src="https://sveltejs.github.io/assets/music/holst.mp3"
-	title="Mars, the Bringer of War"
-	composer="Gustav Holst"
-	performer="USAF Heritage of America Band"
-/>
-
-<!-- https://musopen.org/music/8010-3-gymnopedies/ -->
-<AudioPlayer
-	src="https://sveltejs.github.io/assets/music/satie.mp3"
-	title="Gymnopédie no. 1"
-	composer="Erik Satie"
-	performer="Prodigal Procrastinator"
-/>
-
-<!-- https://musopen.org/music/2567-symphony-no-5-in-c-minor-op-67/ -->
-<AudioPlayer
-	src="https://sveltejs.github.io/assets/music/beethoven.mp3"
-	title="Symphony no. 5 in Cm, Op. 67 - I. Allegro con brio"
-	composer="Ludwig van Beethoven"
-	performer="European Archive"
-/>
-
-<!-- https://musopen.org/music/43683-requiem-in-d-minor-k-626/ -->
-<AudioPlayer
-	src="https://sveltejs.github.io/assets/music/mozart.mp3"
-	title="Requiem in D minor, K. 626 - III. Sequence - Lacrymosa"
-	composer="Wolfgang Amadeus Mozart"
-	performer="Markus Staab"
-/>
diff --git a/documentation/tutorial/17-module-context/02-module-exports/app-a/AudioPlayer.svelte b/documentation/tutorial/17-module-context/02-module-exports/app-a/AudioPlayer.svelte
deleted file mode 100644
index 2b229e50dd..0000000000
--- a/documentation/tutorial/17-module-context/02-module-exports/app-a/AudioPlayer.svelte
+++ /dev/null
@@ -1,51 +0,0 @@
-<script context="module">
-	const elements = new Set();
-</script>
-
-<script>
-	import { onMount } from 'svelte';
-
-	export let src;
-	export let title;
-	export let composer;
-	export let performer;
-
-	let audio;
-	let paused = true;
-
-	onMount(() => {
-		elements.add(audio);
-		return () => elements.delete(audio);
-	});
-
-	function stopOthers() {
-		elements.forEach((element) => {
-			if (element !== audio) element.pause();
-		});
-	}
-</script>
-
-<article class:playing={!paused}>
-	<h2>{title}</h2>
-	<p><strong>{composer}</strong> / performed by {performer}</p>
-
-	<audio bind:this={audio} bind:paused on:play={stopOthers} controls {src} />
-</article>
-
-<style>
-	article {
-		margin: 0 0 1em 0;
-		max-width: 800px;
-	}
-	h2,
-	p {
-		margin: 0 0 0.3em 0;
-	}
-	audio {
-		width: 100%;
-		margin: 0.5em 0 1em 0;
-	}
-	.playing {
-		color: #ff3e00;
-	}
-</style>
diff --git a/documentation/tutorial/17-module-context/02-module-exports/app-b/App.svelte b/documentation/tutorial/17-module-context/02-module-exports/app-b/App.svelte
deleted file mode 100644
index a018d3429f..0000000000
--- a/documentation/tutorial/17-module-context/02-module-exports/app-b/App.svelte
+++ /dev/null
@@ -1,45 +0,0 @@
-<script>
-	import AudioPlayer, { stopAll } from './AudioPlayer.svelte';
-</script>
-
-<button on:click={stopAll}> stop all audio </button>
-
-<!-- https://musopen.org/music/9862-the-blue-danube-op-314/ -->
-<AudioPlayer
-	src="https://sveltejs.github.io/assets/music/strauss.mp3"
-	title="The Blue Danube Waltz"
-	composer="Johann Strauss"
-	performer="European Archive"
-/>
-
-<!-- https://musopen.org/music/43775-the-planets-op-32/ -->
-<AudioPlayer
-	src="https://sveltejs.github.io/assets/music/holst.mp3"
-	title="Mars, the Bringer of War"
-	composer="Gustav Holst"
-	performer="USAF Heritage of America Band"
-/>
-
-<!-- https://musopen.org/music/8010-3-gymnopedies/ -->
-<AudioPlayer
-	src="https://sveltejs.github.io/assets/music/satie.mp3"
-	title="Gymnopédie no. 1"
-	composer="Erik Satie"
-	performer="Prodigal Procrastinator"
-/>
-
-<!-- https://musopen.org/music/2567-symphony-no-5-in-c-minor-op-67/ -->
-<AudioPlayer
-	src="https://sveltejs.github.io/assets/music/beethoven.mp3"
-	title="Symphony no. 5 in Cm, Op. 67 - I. Allegro con brio"
-	composer="Ludwig van Beethoven"
-	performer="European Archive"
-/>
-
-<!-- https://musopen.org/music/43683-requiem-in-d-minor-k-626/ -->
-<AudioPlayer
-	src="https://sveltejs.github.io/assets/music/mozart.mp3"
-	title="Requiem in D minor, K. 626 - III. Sequence - Lacrymosa"
-	composer="Wolfgang Amadeus Mozart"
-	performer="Markus Staab"
-/>
diff --git a/documentation/tutorial/17-module-context/02-module-exports/app-b/AudioPlayer.svelte b/documentation/tutorial/17-module-context/02-module-exports/app-b/AudioPlayer.svelte
deleted file mode 100644
index b76601e025..0000000000
--- a/documentation/tutorial/17-module-context/02-module-exports/app-b/AudioPlayer.svelte
+++ /dev/null
@@ -1,57 +0,0 @@
-<script context="module">
-	const elements = new Set();
-
-	export function stopAll() {
-		elements.forEach((element) => {
-			element.pause();
-		});
-	}
-</script>
-
-<script>
-	import { onMount } from 'svelte';
-
-	export let src;
-	export let title;
-	export let composer;
-	export let performer;
-
-	let audio;
-	let paused = true;
-
-	onMount(() => {
-		elements.add(audio);
-		return () => elements.delete(audio);
-	});
-
-	function stopOthers() {
-		elements.forEach((element) => {
-			if (element !== audio) element.pause();
-		});
-	}
-</script>
-
-<article class:playing={!paused}>
-	<h2>{title}</h2>
-	<p><strong>{composer}</strong> / performed by {performer}</p>
-
-	<audio bind:this={audio} bind:paused on:play={stopOthers} controls {src} />
-</article>
-
-<style>
-	article {
-		margin: 0 0 1em 0;
-		max-width: 800px;
-	}
-	h2,
-	p {
-		margin: 0 0 0.3em 0;
-	}
-	audio {
-		width: 100%;
-		margin: 0.5em 0 1em 0;
-	}
-	.playing {
-		color: #ff3e00;
-	}
-</style>
diff --git a/documentation/tutorial/17-module-context/02-module-exports/text.md b/documentation/tutorial/17-module-context/02-module-exports/text.md
deleted file mode 100644
index 55c94645f4..0000000000
--- a/documentation/tutorial/17-module-context/02-module-exports/text.md
+++ /dev/null
@@ -1,33 +0,0 @@
----
-title: Exports
----
-
-Anything exported from a `context="module"` script block becomes an export from the module itself. If we export a `stopAll` function from `AudioPlayer.svelte`...
-
-```svelte
-<script context="module">
-	const elements = new Set();
-
-	export function stopAll() {
-		elements.forEach((element) => {
-			element.pause();
-		});
-	}
-</script>
-```
-
-...we can then import it in `App.svelte`...
-
-```svelte
-<script>
-	import AudioPlayer, { stopAll } from './AudioPlayer.svelte';
-</script>
-```
-
-...and use it in an event handler:
-
-```svelte
-<button on:click={stopAll}> stop all audio </button>
-```
-
-> You can't have a default export, because the component _is_ the default export.
diff --git a/documentation/tutorial/17-module-context/meta.json b/documentation/tutorial/17-module-context/meta.json
deleted file mode 100644
index 772fe6de40..0000000000
--- a/documentation/tutorial/17-module-context/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Module context"
-}
diff --git a/documentation/tutorial/18-special-tags/01-debug/app-a/App.svelte b/documentation/tutorial/18-special-tags/01-debug/app-a/App.svelte
deleted file mode 100644
index 78a0b81741..0000000000
--- a/documentation/tutorial/18-special-tags/01-debug/app-a/App.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script>
-	let user = {
-		firstname: 'Ada',
-		lastname: 'Lovelace'
-	};
-</script>
-
-<input bind:value={user.firstname} />
-<input bind:value={user.lastname} />
-
-{(console.log(user), '')}
-
-<h1>Hello {user.firstname}!</h1>
diff --git a/documentation/tutorial/18-special-tags/01-debug/app-b/App.svelte b/documentation/tutorial/18-special-tags/01-debug/app-b/App.svelte
deleted file mode 100644
index 30bffc896c..0000000000
--- a/documentation/tutorial/18-special-tags/01-debug/app-b/App.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script>
-	let user = {
-		firstname: 'Ada',
-		lastname: 'Lovelace'
-	};
-</script>
-
-<input bind:value={user.firstname} />
-<input bind:value={user.lastname} />
-
-{@debug user}
-
-<h1>Hello {user.firstname}!</h1>
diff --git a/documentation/tutorial/18-special-tags/01-debug/text.md b/documentation/tutorial/18-special-tags/01-debug/text.md
deleted file mode 100644
index 2da1e3d2be..0000000000
--- a/documentation/tutorial/18-special-tags/01-debug/text.md
+++ /dev/null
@@ -1,15 +0,0 @@
----
-title: The @debug tag
----
-
-Occasionally, it's useful to inspect a piece of data as it flows through your app.
-
-One approach is to use `console.log(...)` inside your markup. If you want to pause execution, though, you can use the `{@debug ...}` tag with a comma-separated list of values you want to inspect:
-
-```svelte
-{@debug user}
-
-<h1>Hello {user.firstname}!</h1>
-```
-
-If you now open your devtools and start interacting with the `<input>` elements, you'll trigger the debugger as the value of `user` changes.
diff --git a/documentation/tutorial/18-special-tags/02-html-tags/app-a/App.svelte b/documentation/tutorial/18-special-tags/02-html-tags/app-a/App.svelte
deleted file mode 100644
index 77270433f1..0000000000
--- a/documentation/tutorial/18-special-tags/02-html-tags/app-a/App.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<script>
-	let string = `this string contains some <strong>HTML!!!</strong>`;
-</script>
-
-<p>{string}</p>
diff --git a/documentation/tutorial/18-special-tags/02-html-tags/app-b/App.svelte b/documentation/tutorial/18-special-tags/02-html-tags/app-b/App.svelte
deleted file mode 100644
index 463eb8250e..0000000000
--- a/documentation/tutorial/18-special-tags/02-html-tags/app-b/App.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<script>
-	let string = `this string contains some <strong>HTML!!!</strong>`;
-</script>
-
-<p>{@html string}</p>
diff --git a/documentation/tutorial/18-special-tags/02-html-tags/text.md b/documentation/tutorial/18-special-tags/02-html-tags/text.md
deleted file mode 100644
index ee9123dea9..0000000000
--- a/documentation/tutorial/18-special-tags/02-html-tags/text.md
+++ /dev/null
@@ -1,15 +0,0 @@
----
-title: HTML tags
----
-
-Ordinarily, strings are inserted as plain text, meaning that characters like `<` and `>` have no special meaning.
-
-But sometimes you need to render HTML directly into a component. For example, the words you're reading right now exist in a markdown file that gets included on this page as a blob of HTML.
-
-In Svelte, you do this with the special `{@html ...}` tag:
-
-```svelte
-<p>{@html string}</p>
-```
-
-> **Warning!** Svelte doesn't perform any sanitization of the expression inside `{@html ...}` before it gets inserted into the DOM. In other words, if you use this feature it's **critical** that you manually escape HTML that comes from sources you don't trust, otherwise you risk exposing your users to XSS attacks.
diff --git a/documentation/tutorial/18-special-tags/meta.json b/documentation/tutorial/18-special-tags/meta.json
deleted file mode 100644
index cbd6495e1c..0000000000
--- a/documentation/tutorial/18-special-tags/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Special tags"
-}
diff --git a/documentation/tutorial/19-next-steps/01-congratulations/app-a/App.svelte b/documentation/tutorial/19-next-steps/01-congratulations/app-a/App.svelte
deleted file mode 100644
index a5db2e5eab..0000000000
--- a/documentation/tutorial/19-next-steps/01-congratulations/app-a/App.svelte
+++ /dev/null
@@ -1,51 +0,0 @@
-<script>
-	import { onMount } from 'svelte';
-
-	let characters = ['🥳', '🎉', '✨'];
-
-	let confetti = new Array(100)
-		.fill()
-		.map((_, i) => {
-			return {
-				character: characters[i % characters.length],
-				x: Math.random() * 100,
-				y: -20 - Math.random() * 100,
-				r: 0.1 + Math.random() * 1
-			};
-		})
-		.sort((a, b) => a.r - b.r);
-
-	onMount(() => {
-		let frame;
-
-		function loop() {
-			frame = requestAnimationFrame(loop);
-
-			confetti = confetti.map((emoji) => {
-				emoji.y += 0.7 * emoji.r;
-				if (emoji.y > 120) emoji.y = -20;
-				return emoji;
-			});
-		}
-
-		loop();
-
-		return () => cancelAnimationFrame(frame);
-	});
-</script>
-
-{#each confetti as c}
-	<span style="left: {c.x}%; top: {c.y}%; transform: scale({c.r})">{c.character}</span>
-{/each}
-
-<style>
-	:global(body) {
-		overflow: hidden;
-	}
-
-	span {
-		position: absolute;
-		font-size: 5vw;
-		user-select: none;
-	}
-</style>
diff --git a/documentation/tutorial/19-next-steps/01-congratulations/text.md b/documentation/tutorial/19-next-steps/01-congratulations/text.md
deleted file mode 100644
index 5df63d9f6f..0000000000
--- a/documentation/tutorial/19-next-steps/01-congratulations/text.md
+++ /dev/null
@@ -1,11 +0,0 @@
----
-title: Congratulations!
----
-
-You've now finished the Svelte tutorial and are ready to start building apps. You can refer back to individual chapters at any time (click the title above to reveal a dropdown) or continue your learning via the [API reference](/docs), [Examples](/examples) and [Blog](/blog). If you're a Twitter user, you can get updates via [@sveltejs](https://twitter.com/sveltejs).
-
-To get set up in your local development environment, check out [the quickstart guide](/docs/introduction).
-
-If you're looking for a more expansive framework that includes routing, server-side rendering and everything else, take a look at [SvelteKit](https://kit.svelte.dev).
-
-Most importantly: since you're now a member of the Svelte community, you should [join our friendly Discord chatroom](https://svelte.dev/chat). That's where you'll find fellow Svelte users, and it's where we plan the future of the framework.
diff --git a/documentation/tutorial/19-next-steps/meta.json b/documentation/tutorial/19-next-steps/meta.json
deleted file mode 100644
index e4d029eab7..0000000000
--- a/documentation/tutorial/19-next-steps/meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"title": "Next steps"
-}

From 1a8aab0e384c5706a9cf34aba69f56b050b1e549 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 26 Nov 2024 15:13:34 -0500
Subject: [PATCH 109/159] chore: remove `node.parent` and `node.prev` (#14447)

* make get_possible_element_siblings non-recursive

* treat slots as blocks

* simplify

* simplify

* add test

* changeset

* chore: remove node.parent and node.prev

* simplify
---
 packages/svelte/src/compiler/index.js         |  1 -
 packages/svelte/src/compiler/legacy.js        |  8 -----
 .../src/compiler/phases/1-parse/index.js      | 24 ++-------------
 .../compiler/phases/1-parse/read/script.js    |  1 -
 .../compiler/phases/1-parse/state/element.js  | 29 ++++++-------------
 .../src/compiler/phases/1-parse/state/tag.js  | 22 ++++++--------
 .../src/compiler/phases/1-parse/state/text.js |  2 +-
 .../src/compiler/phases/2-analyze/index.js    |  4 +--
 .../server/visitors/shared/element.js         |  4 ---
 .../src/compiler/phases/3-transform/utils.js  |  1 -
 packages/svelte/src/compiler/phases/nodes.js  |  1 -
 .../svelte/src/compiler/types/template.d.ts   |  2 --
 12 files changed, 23 insertions(+), 76 deletions(-)

diff --git a/packages/svelte/src/compiler/index.js b/packages/svelte/src/compiler/index.js
index 2b3ad99d8b..fbd9c16e5d 100644
--- a/packages/svelte/src/compiler/index.js
+++ b/packages/svelte/src/compiler/index.js
@@ -120,7 +120,6 @@ function to_public_ast(source, ast, modern) {
 	if (modern) {
 		const clean = (/** @type {any} */ node) => {
 			delete node.metadata;
-			delete node.parent;
 		};
 
 		ast.options?.attributes.forEach((attribute) => {
diff --git a/packages/svelte/src/compiler/legacy.js b/packages/svelte/src/compiler/legacy.js
index e603da312b..52b4bd5860 100644
--- a/packages/svelte/src/compiler/legacy.js
+++ b/packages/svelte/src/compiler/legacy.js
@@ -45,8 +45,6 @@ export function convert(source, ast) {
 	return /** @type {Legacy.LegacyRoot} */ (
 		walk(root, null, {
 			_(node, { next }) {
-				// @ts-ignore
-				delete node.parent;
 				// @ts-ignore
 				delete node.metadata;
 				next();
@@ -62,8 +60,6 @@ export function convert(source, ast) {
 						idx = node.fragment.nodes.length;
 					}
 
-					// @ts-ignore
-					delete options.__raw__.parent;
 					node.fragment.nodes.splice(idx, 0, /** @type {any} */ (options).__raw__);
 				}
 
@@ -85,15 +81,11 @@ export function convert(source, ast) {
 				}
 
 				if (instance) {
-					// @ts-ignore
-					delete instance.parent;
 					// @ts-ignore
 					delete instance.attributes;
 				}
 
 				if (module) {
-					// @ts-ignore
-					delete module.parent;
 					// @ts-ignore
 					delete module.attributes;
 				}
diff --git a/packages/svelte/src/compiler/phases/1-parse/index.js b/packages/svelte/src/compiler/phases/1-parse/index.js
index de29aa5261..7639c2f0ed 100644
--- a/packages/svelte/src/compiler/phases/1-parse/index.js
+++ b/packages/svelte/src/compiler/phases/1-parse/index.js
@@ -262,30 +262,12 @@ export class Parser {
 	}
 
 	/**
-	 * @template T
-	 * @param {Omit<T, 'prev' | 'parent'>} node
+	 * @template {AST.Fragment['nodes'][number]} T
+	 * @param {T} node
 	 * @returns {T}
 	 */
 	append(node) {
-		const current = this.current();
-		const fragment = this.fragments.at(-1);
-
-		Object.defineProperties(node, {
-			prev: {
-				enumerable: false,
-				value: fragment?.nodes.at(-1) ?? null
-			},
-			parent: {
-				enumerable: false,
-				configurable: true,
-				value: current
-			}
-		});
-
-		// @ts-expect-error
-		fragment.nodes.push(node);
-
-		// @ts-expect-error
+		this.fragments.at(-1)?.nodes.push(node);
 		return node;
 	}
 }
diff --git a/packages/svelte/src/compiler/phases/1-parse/read/script.js b/packages/svelte/src/compiler/phases/1-parse/read/script.js
index 9675e5bbd8..85023cb781 100644
--- a/packages/svelte/src/compiler/phases/1-parse/read/script.js
+++ b/packages/svelte/src/compiler/phases/1-parse/read/script.js
@@ -84,7 +84,6 @@ export function read_script(parser, start, attributes) {
 		end: parser.index,
 		context,
 		content: ast,
-		parent: null,
 		// @ts-ignore
 		attributes
 	};
diff --git a/packages/svelte/src/compiler/phases/1-parse/state/element.js b/packages/svelte/src/compiler/phases/1-parse/state/element.js
index 9082b76c49..6eed811393 100644
--- a/packages/svelte/src/compiler/phases/1-parse/state/element.js
+++ b/packages/svelte/src/compiler/phases/1-parse/state/element.js
@@ -56,7 +56,6 @@ export default function element(parser) {
 		const data = parser.read_until(regex_closing_comment);
 		parser.eat('-->', true);
 
-		/** @type {ReturnType<typeof parser.append<AST.Comment>>} */
 		parser.append({
 			type: 'Comment',
 			start,
@@ -153,8 +152,7 @@ export default function element(parser) {
 						scoped: false,
 						has_spread: false,
 						path: []
-					},
-					parent: null
+					}
 				}
 			: /** @type {ElementLike} */ ({
 					type,
@@ -163,7 +161,6 @@ export default function element(parser) {
 					name,
 					attributes: [],
 					fragment: create_fragment(true),
-					parent: null,
 					metadata: {
 						// unpopulated at first, differs between types
 					}
@@ -348,8 +345,7 @@ export default function element(parser) {
 			end,
 			type: 'Text',
 			data,
-			raw: data,
-			parent: null
+			raw: data
 		};
 
 		element.fragment.nodes.push(node);
@@ -422,8 +418,7 @@ function read_static_attribute(parser) {
 				end: quoted ? parser.index - 1 : parser.index,
 				type: 'Text',
 				raw: raw,
-				data: decode_character_references(raw, true),
-				parent: null
+				data: decode_character_references(raw, true)
 			}
 		];
 	}
@@ -457,7 +452,6 @@ function read_attribute(parser) {
 				start,
 				end: parser.index,
 				expression,
-				parent: null,
 				metadata: {
 					expression: create_expression_metadata()
 				}
@@ -486,7 +480,6 @@ function read_attribute(parser) {
 					type: 'Identifier',
 					name
 				},
-				parent: null,
 				metadata: {
 					expression: create_expression_metadata()
 				}
@@ -531,7 +524,6 @@ function read_attribute(parser) {
 				name: directive_name,
 				modifiers: /** @type {Array<'important'>} */ (modifiers),
 				value,
-				parent: null,
 				metadata: {
 					expression: create_expression_metadata()
 				}
@@ -556,19 +548,20 @@ function read_attribute(parser) {
 		}
 
 		/** @type {Directive} */
-		// @ts-expect-error TODO can't figure out this error
 		const directive = {
 			start,
 			end,
 			type,
 			name: directive_name,
-			modifiers,
 			expression,
 			metadata: {
 				expression: create_expression_metadata()
 			}
 		};
 
+		// @ts-expect-error we do this separately from the declaration to avoid upsetting typescript
+		directive.modifiers = modifiers;
+
 		if (directive.type === 'TransitionDirective') {
 			const direction = name.slice(0, colon_index);
 			directive.intro = direction === 'in' || direction === 'transition';
@@ -623,8 +616,7 @@ function read_attribute_value(parser) {
 				end: parser.index - 1,
 				type: 'Text',
 				raw: '',
-				data: '',
-				parent: null
+				data: ''
 			}
 		];
 	}
@@ -681,8 +673,7 @@ function read_sequence(parser, done, location) {
 		end: -1,
 		type: 'Text',
 		raw: '',
-		data: '',
-		parent: null
+		data: ''
 	};
 
 	/** @type {Array<AST.Text | AST.ExpressionTag>} */
@@ -729,7 +720,6 @@ function read_sequence(parser, done, location) {
 				start: index,
 				end: parser.index,
 				expression,
-				parent: null,
 				metadata: {
 					expression: create_expression_metadata()
 				}
@@ -742,8 +732,7 @@ function read_sequence(parser, done, location) {
 				end: -1,
 				type: 'Text',
 				raw: '',
-				data: '',
-				parent: null
+				data: ''
 			};
 		} else {
 			current_chunk.raw += parser.template[parser.index++];
diff --git a/packages/svelte/src/compiler/phases/1-parse/state/tag.js b/packages/svelte/src/compiler/phases/1-parse/state/tag.js
index de118960ec..1632099c29 100644
--- a/packages/svelte/src/compiler/phases/1-parse/state/tag.js
+++ b/packages/svelte/src/compiler/phases/1-parse/state/tag.js
@@ -33,7 +33,6 @@ export default function tag(parser) {
 	parser.allow_whitespace();
 	parser.eat('}', true);
 
-	/** @type {ReturnType<typeof parser.append<AST.ExpressionTag>>} */
 	parser.append({
 		type: 'ExpressionTag',
 		start,
@@ -53,7 +52,7 @@ function open(parser) {
 	if (parser.eat('if')) {
 		parser.require_whitespace();
 
-		/** @type {ReturnType<typeof parser.append<AST.IfBlock>>} */
+		/** @type {AST.IfBlock} */
 		const block = parser.append({
 			type: 'IfBlock',
 			elseif: false,
@@ -174,7 +173,7 @@ function open(parser) {
 
 		parser.eat('}', true);
 
-		/** @type {ReturnType<typeof parser.append<AST.EachBlock>>} */
+		/** @type {AST.EachBlock} */
 		const block = parser.append({
 			type: 'EachBlock',
 			start,
@@ -198,7 +197,7 @@ function open(parser) {
 		const expression = read_expression(parser);
 		parser.allow_whitespace();
 
-		/** @type {ReturnType<typeof parser.append<AST.AwaitBlock>>} */
+		/** @type {AST.AwaitBlock} */
 		const block = parser.append({
 			type: 'AwaitBlock',
 			start,
@@ -252,7 +251,7 @@ function open(parser) {
 
 		parser.eat('}', true);
 
-		/** @type {ReturnType<typeof parser.append<AST.KeyBlock>>} */
+		/** @type {AST.KeyBlock} */
 		const block = parser.append({
 			type: 'KeyBlock',
 			start,
@@ -303,7 +302,7 @@ function open(parser) {
 		parser.allow_whitespace();
 		parser.eat('}', true);
 
-		/** @type {ReturnType<typeof parser.append<AST.SnippetBlock>>} */
+		/** @type {AST.SnippetBlock} */
 		const block = parser.append({
 			type: 'SnippetBlock',
 			start,
@@ -355,7 +354,7 @@ function next(parser) {
 			let elseif_start = start - 1;
 			while (parser.template[elseif_start] !== '{') elseif_start -= 1;
 
-			/** @type {ReturnType<typeof parser.append<AST.IfBlock>>} */
+			/** @type {AST.IfBlock} */
 			const child = parser.append({
 				start: elseif_start,
 				end: -1,
@@ -499,7 +498,6 @@ function special(parser) {
 		parser.allow_whitespace();
 		parser.eat('}', true);
 
-		/** @type {ReturnType<typeof parser.append<AST.HtmlTag>>} */
 		parser.append({
 			type: 'HtmlTag',
 			start,
@@ -537,7 +535,6 @@ function special(parser) {
 			parser.eat('}', true);
 		}
 
-		/** @type {ReturnType<typeof parser.append<AST.DebugTag>>} */
 		parser.append({
 			type: 'DebugTag',
 			start,
@@ -570,7 +567,6 @@ function special(parser) {
 
 		parser.eat('}', true);
 
-		/** @type {ReturnType<typeof parser.append<AST.ConstTag>>} */
 		parser.append({
 			type: 'ConstTag',
 			start,
@@ -601,15 +597,15 @@ function special(parser) {
 		parser.allow_whitespace();
 		parser.eat('}', true);
 
-		/** @type {ReturnType<typeof parser.append<AST.RenderTag>>} */
 		parser.append({
 			type: 'RenderTag',
 			start,
 			end: parser.index,
-			expression: expression,
+			expression: /** @type {AST.RenderTag['expression']} */ (expression),
 			metadata: {
 				dynamic: false,
-				args_with_call_expression: new Set()
+				args_with_call_expression: new Set(),
+				path: []
 			}
 		});
 	}
diff --git a/packages/svelte/src/compiler/phases/1-parse/state/text.js b/packages/svelte/src/compiler/phases/1-parse/state/text.js
index 388ffa19c0..d0af3a846a 100644
--- a/packages/svelte/src/compiler/phases/1-parse/state/text.js
+++ b/packages/svelte/src/compiler/phases/1-parse/state/text.js
@@ -12,7 +12,7 @@ export default function text(parser) {
 		data += parser.template[parser.index++];
 	}
 
-	/** @type {ReturnType<typeof parser.append<AST.Text>>} */
+	/** @type {AST.Text} */
 	parser.append({
 		type: 'Text',
 		start,
diff --git a/packages/svelte/src/compiler/phases/2-analyze/index.js b/packages/svelte/src/compiler/phases/2-analyze/index.js
index 0d8caa0a4b..ce34544eb4 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/index.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/index.js
@@ -758,8 +758,7 @@ export function analyze_component(root, source, options) {
 							data: ` ${analysis.css.hash}`,
 							raw: ` ${analysis.css.hash}`,
 							start: -1,
-							end: -1,
-							parent: null
+							end: -1
 						};
 
 						if (Array.isArray(class_attribute.value)) {
@@ -775,7 +774,6 @@ export function analyze_component(root, source, options) {
 								type: 'Text',
 								data: analysis.css.hash,
 								raw: analysis.css.hash,
-								parent: null,
 								start: -1,
 								end: -1
 							}
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js
index c386c4f7c0..2ab5d9b9fd 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js
@@ -135,7 +135,6 @@ export function build_element_attributes(node, context) {
 							type: 'ExpressionTag',
 							start: -1,
 							end: -1,
-							parent: attribute,
 							expression: is_checkbox
 								? b.call(
 										b.member(attribute.expression, 'includes'),
@@ -159,7 +158,6 @@ export function build_element_attributes(node, context) {
 							type: 'ExpressionTag',
 							start: -1,
 							end: -1,
-							parent: attribute,
 							expression: attribute.expression,
 							metadata: {
 								expression: create_expression_metadata()
@@ -376,7 +374,6 @@ function build_class_directives(class_directives, class_attribute) {
 			type: 'Text',
 			start: -1,
 			end: -1,
-			parent: class_attribute,
 			data: ' ',
 			raw: ' '
 		});
@@ -386,7 +383,6 @@ function build_class_directives(class_directives, class_attribute) {
 		type: 'ExpressionTag',
 		start: -1,
 		end: -1,
-		parent: class_attribute,
 		expression: b.call(
 			b.member(b.call(b.member(b.array(expressions), 'filter'), b.id('Boolean')), b.id('join')),
 			b.literal(' ')
diff --git a/packages/svelte/src/compiler/phases/3-transform/utils.js b/packages/svelte/src/compiler/phases/3-transform/utils.js
index 809c627098..a1b8dc0d03 100644
--- a/packages/svelte/src/compiler/phases/3-transform/utils.js
+++ b/packages/svelte/src/compiler/phases/3-transform/utils.js
@@ -277,7 +277,6 @@ export function clean_nodes(
 		trimmed.push({
 			type: 'Comment',
 			data: '',
-			parent: first.parent,
 			start: -1,
 			end: -1
 		});
diff --git a/packages/svelte/src/compiler/phases/nodes.js b/packages/svelte/src/compiler/phases/nodes.js
index ead525aaa1..1a1c21bb4b 100644
--- a/packages/svelte/src/compiler/phases/nodes.js
+++ b/packages/svelte/src/compiler/phases/nodes.js
@@ -43,7 +43,6 @@ export function create_attribute(name, start, end, value) {
 		end,
 		name,
 		value,
-		parent: null,
 		metadata: {
 			expression: create_expression_metadata(),
 			delegated: null
diff --git a/packages/svelte/src/compiler/types/template.d.ts b/packages/svelte/src/compiler/types/template.d.ts
index 59456412bd..0be0b25ab4 100644
--- a/packages/svelte/src/compiler/types/template.d.ts
+++ b/packages/svelte/src/compiler/types/template.d.ts
@@ -37,8 +37,6 @@ export namespace AST {
 		type: string;
 		start: number;
 		end: number;
-		/** @internal This is set during parsing on elements/components/expressions/text (but not attributes etc) */
-		parent: SvelteNode | null;
 	}
 
 	export interface Fragment {

From 4f318e6ad6c1fb9ec1d81c92b319461d099e391e Mon Sep 17 00:00:00 2001
From: Ben McCann <322311+benmccann@users.noreply.github.com>
Date: Tue, 26 Nov 2024 13:12:11 -0800
Subject: [PATCH 110/159] chore: remove unused dep and upgrade another one
 (#14449)

---
 packages/svelte/package.json     |   2 +-
 playgrounds/sandbox/package.json |   1 -
 pnpm-lock.yaml                   | 154 +++++++++----------------------
 3 files changed, 43 insertions(+), 114 deletions(-)

diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 9d9b04a6eb..61f2ec2d54 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -120,7 +120,7 @@
   "devDependencies": {
     "@jridgewell/trace-mapping": "^0.3.25",
     "@playwright/test": "^1.46.1",
-    "@rollup/plugin-commonjs": "^28.0.0",
+    "@rollup/plugin-commonjs": "^28.0.1",
     "@rollup/plugin-node-resolve": "^15.3.0",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-virtual": "^3.0.2",
diff --git a/playgrounds/sandbox/package.json b/playgrounds/sandbox/package.json
index acec9f1e64..944e79621e 100644
--- a/playgrounds/sandbox/package.json
+++ b/playgrounds/sandbox/package.json
@@ -13,7 +13,6 @@
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^4.0.0-next.6",
-    "nodemon": "^3.0.3",
     "polka": "^1.0.0-next.25",
     "svelte": "workspace:*",
     "tiny-glob": "^0.2.9",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0af617a61d..261a82f300 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -106,8 +106,8 @@ importers:
         specifier: ^1.46.1
         version: 1.46.1
       '@rollup/plugin-commonjs':
-        specifier: ^28.0.0
-        version: 28.0.0(rollup@4.22.4)
+        specifier: ^28.0.1
+        version: 28.0.1(rollup@4.22.4)
       '@rollup/plugin-node-resolve':
         specifier: ^15.3.0
         version: 15.3.0(rollup@4.22.4)
@@ -150,9 +150,6 @@ importers:
       '@sveltejs/vite-plugin-svelte':
         specifier: ^4.0.0-next.6
         version: 4.0.0-next.6(svelte@packages+svelte)(vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))
-      nodemon:
-        specifier: ^3.0.3
-        version: 3.0.3
       polka:
         specifier: ^1.0.0-next.25
         version: 1.0.0-next.25
@@ -279,7 +276,7 @@ importers:
         version: link:../../packages/svelte
       svelte-check:
         specifier: ^4.0.0
-        version: 4.0.1(svelte@packages+svelte)(typescript@5.5.4)
+        version: 4.0.1(picomatch@4.0.2)(svelte@packages+svelte)(typescript@5.5.4)
       typescript:
         specifier: ^5.5.4
         version: 5.5.4
@@ -719,8 +716,8 @@ packages:
   '@rollup/browser@3.29.4':
     resolution: {integrity: sha512-qkWkilNBn+90/9Xn2stuwFpXYhG/mZVPlDkTIPdQSEtJES0NS4o4atceEqeGeHOjQREY2jaIv7ld3IajA/Bmfw==}
 
-  '@rollup/plugin-commonjs@28.0.0':
-    resolution: {integrity: sha512-BJcu+a+Mpq476DMXG+hevgPSl56bkUoi88dKT8t3RyUp8kGuOh+2bU8Gs7zXDlu+fyZggnJ+iOBGrb/O1SorYg==}
+  '@rollup/plugin-commonjs@28.0.1':
+    resolution: {integrity: sha512-+tNWdlWKbpB3WgBN7ijjYkq9X5uhjmcvyjEght4NmH5fAU++zfQzAJ6wumLS+dNcvwEZhKx2Z+skY8m7v0wGSA==}
     engines: {node: '>=16.0.0 || 14 >= 14.17'}
     peerDependencies:
       rollup: ^2.68.0||^3.0.0||^4.0.0
@@ -1239,7 +1236,7 @@ packages:
     resolution: {integrity: sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==}
 
   concat-map@0.0.1:
-    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
+    resolution: {integrity: sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=}
 
   console-control-strings@1.1.0:
     resolution: {integrity: sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==}
@@ -1651,10 +1648,6 @@ packages:
   graphemer@1.4.0:
     resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
 
-  has-flag@3.0.0:
-    resolution: {integrity: sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==}
-    engines: {node: '>=4'}
-
   has-flag@4.0.0:
     resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
     engines: {node: '>=8'}
@@ -1700,9 +1693,6 @@ packages:
     resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
     engines: {node: '>=0.10.0'}
 
-  ignore-by-default@1.0.1:
-    resolution: {integrity: sha512-Ius2VYcGNk7T90CppJqcIkS5ooHUZyIQK+ClZfMfMNFEF9VSE73Fq+906u/CWu92x4gzZMWOwfFYckPObzdEbA==}
-
   ignore-walk@5.0.1:
     resolution: {integrity: sha512-yemi4pMf51WKT7khInJqAvsIGzoqYXblnsz0ql8tM+yi1EKYTY1evX4NAbJrLL/Aanr2HyZeluqU+Oi7MGHokw==}
     engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
@@ -2070,15 +2060,6 @@ packages:
     resolution: {integrity: sha512-u6fs2AEUljNho3EYTJNBfImO5QTo/J/1Etd+NVdCj7qWKUSN/bSLkZwhDv7I+w/MSC6qJ4cknepkAYykDdK8og==}
     hasBin: true
 
-  nodemon@3.0.3:
-    resolution: {integrity: sha512-7jH/NXbFPxVaMwmBCC2B9F/V6X1VkEdNgx3iu9jji8WxWcvhMWkmhNWhI5077zknOnZnBzba9hZP6bCPJLSReQ==}
-    engines: {node: '>=10'}
-    hasBin: true
-
-  nopt@1.0.10:
-    resolution: {integrity: sha512-NWmpvLSqUrgrAC9HCuxEvb+PSloHpqVu+FqcO4eeF2h5qYRhA7ev6KvelyQAKtegUbC6RypJnlEOhd8vloNKYg==}
-    hasBin: true
-
   nopt@5.0.0:
     resolution: {integrity: sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==}
     engines: {node: '>=6'}
@@ -2223,6 +2204,10 @@ packages:
     resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
     engines: {node: '>=8.6'}
 
+  picomatch@4.0.2:
+    resolution: {integrity: sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==}
+    engines: {node: '>=12'}
+
   pify@4.0.1:
     resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==}
     engines: {node: '>=6'}
@@ -2299,9 +2284,6 @@ packages:
   psl@1.9.0:
     resolution: {integrity: sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==}
 
-  pstree.remy@1.1.8:
-    resolution: {integrity: sha512-77DZwxQmxKnu3aR542U+X8FypNzbfJ+C5XQDk3uWjWxn6151aIMGthWYRXTqT1E5oJvg+ljaa2OJi+VfvCOQ8w==}
-
   publint@0.2.7:
     resolution: {integrity: sha512-tLU4ee3110BxWfAmCZggJmCUnYWgPTr0QLnx08sqpLYa8JHRiOudd+CgzdpfU5x5eOaW2WMkpmOrFshRFYK7Mw==}
     engines: {node: '>=16'}
@@ -2462,10 +2444,6 @@ packages:
     resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
     engines: {node: '>=14'}
 
-  simple-update-notifier@2.0.0:
-    resolution: {integrity: sha512-a2B9Y0KlNXl9u/vsW6sTIu9vGEpfKu2wRV6l1H3XEas/0gUIzGzBoP/IouTcUQbm9JWZLH3COxyn03TYlFax6w==}
-    engines: {node: '>=10'}
-
   sirv@2.0.4:
     resolution: {integrity: sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==}
     engines: {node: '>= 10'}
@@ -2542,10 +2520,6 @@ packages:
   style-mod@4.1.2:
     resolution: {integrity: sha512-wnD1HyVqpJUI2+eKZ+eo1UwghftP6yuFheBqqe+bWCotBjC2K1YnteJILRMs3SM4V/0dLEW1SC27MWP5y+mwmw==}
 
-  supports-color@5.5.0:
-    resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
-    engines: {node: '>=4'}
-
   supports-color@7.2.0:
     resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
     engines: {node: '>=8'}
@@ -2643,10 +2617,6 @@ packages:
     resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==}
     engines: {node: '>=6'}
 
-  touch@3.1.0:
-    resolution: {integrity: sha512-WBx8Uy5TLtOSRtIq+M03/sKDrXCLHxwDcquSP2c43Le03/9serjQBIztjRz6FkJez9D/hleyAXTBGLwwZUw9lA==}
-    hasBin: true
-
   tough-cookie@4.1.4:
     resolution: {integrity: sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==}
     engines: {node: '>=6'}
@@ -2686,9 +2656,6 @@ packages:
     engines: {node: '>=14.17'}
     hasBin: true
 
-  undefsafe@2.0.5:
-    resolution: {integrity: sha512-WxONCrssBM8TSPRqN5EmsjVrsv4A8X12J4ArBiiayv3DyyG3ZlIg6yysuuSYdZsVz3TKcTg2fd//Ujd4CHV1iA==}
-
   undici-types@5.26.5:
     resolution: {integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==}
 
@@ -3249,7 +3216,7 @@ snapshots:
   '@eslint/config-array@0.18.0':
     dependencies:
       '@eslint/object-schema': 2.1.4
-      debug: 4.3.6(supports-color@5.5.0)
+      debug: 4.3.6
       minimatch: 3.1.2
     transitivePeerDependencies:
       - supports-color
@@ -3257,7 +3224,7 @@ snapshots:
   '@eslint/eslintrc@3.1.0':
     dependencies:
       ajv: 6.12.6
-      debug: 4.3.6(supports-color@5.5.0)
+      debug: 4.3.6
       espree: 10.1.0
       globals: 14.0.0
       ignore: 5.3.2
@@ -3434,15 +3401,15 @@ snapshots:
 
   '@rollup/browser@3.29.4': {}
 
-  '@rollup/plugin-commonjs@28.0.0(rollup@4.22.4)':
+  '@rollup/plugin-commonjs@28.0.1(rollup@4.22.4)':
     dependencies:
       '@rollup/pluginutils': 5.1.0(rollup@4.22.4)
       commondir: 1.0.1
       estree-walker: 2.0.2
-      fdir: 6.3.0(picomatch@2.3.1)
+      fdir: 6.3.0(picomatch@4.0.2)
       is-reference: 1.2.1
       magic-string: 0.30.11
-      picomatch: 2.3.1
+      picomatch: 4.0.2
     optionalDependencies:
       rollup: 4.22.4
 
@@ -3586,7 +3553,7 @@ snapshots:
   '@sveltejs/vite-plugin-svelte-inspector@3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@packages+svelte)(vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)(vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))':
     dependencies:
       '@sveltejs/vite-plugin-svelte': 4.0.0-next.6(svelte@packages+svelte)(vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))
-      debug: 4.3.6(supports-color@5.5.0)
+      debug: 4.3.6
       svelte: link:packages/svelte
       vite: 5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)
     transitivePeerDependencies:
@@ -3595,7 +3562,7 @@ snapshots:
   '@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@packages+svelte)(vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))':
     dependencies:
       '@sveltejs/vite-plugin-svelte-inspector': 3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@packages+svelte)(vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)(vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))
-      debug: 4.3.6(supports-color@5.5.0)
+      debug: 4.3.6
       deepmerge: 4.3.1
       kleur: 4.1.5
       magic-string: 0.30.11
@@ -3661,7 +3628,7 @@ snapshots:
       '@typescript-eslint/types': 8.2.0
       '@typescript-eslint/typescript-estree': 8.2.0(typescript@5.5.4)
       '@typescript-eslint/visitor-keys': 8.2.0
-      debug: 4.3.6(supports-color@5.5.0)
+      debug: 4.3.6
       eslint: 9.9.1
     optionalDependencies:
       typescript: 5.5.4
@@ -3677,7 +3644,7 @@ snapshots:
     dependencies:
       '@typescript-eslint/typescript-estree': 8.2.0(typescript@5.5.4)
       '@typescript-eslint/utils': 8.2.0(eslint@9.9.1)(typescript@5.5.4)
-      debug: 4.3.6(supports-color@5.5.0)
+      debug: 4.3.6
       ts-api-utils: 1.3.0(typescript@5.5.4)
     optionalDependencies:
       typescript: 5.5.4
@@ -3691,7 +3658,7 @@ snapshots:
     dependencies:
       '@typescript-eslint/types': 8.2.0
       '@typescript-eslint/visitor-keys': 8.2.0
-      debug: 4.3.6(supports-color@5.5.0)
+      debug: 4.3.6
       globby: 11.1.0
       is-glob: 4.0.3
       minimatch: 9.0.5
@@ -3721,20 +3688,20 @@ snapshots:
   '@typescript/twoslash@3.1.0':
     dependencies:
       '@typescript/vfs': 1.3.5
-      debug: 4.3.6(supports-color@5.5.0)
+      debug: 4.3.6
       lz-string: 1.5.0
     transitivePeerDependencies:
       - supports-color
 
   '@typescript/vfs@1.3.4':
     dependencies:
-      debug: 4.3.6(supports-color@5.5.0)
+      debug: 4.3.6
     transitivePeerDependencies:
       - supports-color
 
   '@typescript/vfs@1.3.5':
     dependencies:
-      debug: 4.3.6(supports-color@5.5.0)
+      debug: 4.3.6
     transitivePeerDependencies:
       - supports-color
 
@@ -3765,7 +3732,7 @@ snapshots:
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@bcoe/v8-coverage': 0.2.3
-      debug: 4.3.6(supports-color@5.5.0)
+      debug: 4.3.6
       istanbul-lib-coverage: 3.2.2
       istanbul-lib-report: 3.0.1
       istanbul-lib-source-maps: 5.0.6
@@ -3830,13 +3797,13 @@ snapshots:
 
   agent-base@6.0.2:
     dependencies:
-      debug: 4.3.6(supports-color@5.5.0)
+      debug: 4.3.6
     transitivePeerDependencies:
       - supports-color
 
   agent-base@7.1.1:
     dependencies:
-      debug: 4.3.6(supports-color@5.5.0)
+      debug: 4.3.6
     transitivePeerDependencies:
       - supports-color
 
@@ -4022,11 +3989,9 @@ snapshots:
 
   dataloader@1.4.0: {}
 
-  debug@4.3.6(supports-color@5.5.0):
+  debug@4.3.6:
     dependencies:
       ms: 2.1.2
-    optionalDependencies:
-      supports-color: 5.5.0
 
   decimal.js@10.4.3: {}
 
@@ -4159,7 +4124,7 @@ snapshots:
     dependencies:
       '@eslint-community/eslint-utils': 4.4.0(eslint@9.9.1)
       '@jridgewell/sourcemap-codec': 1.5.0
-      debug: 4.3.6(supports-color@5.5.0)
+      debug: 4.3.6
       eslint: 9.9.1
       eslint-compat-utils: 0.5.1(eslint@9.9.1)
       esutils: 2.0.3
@@ -4203,7 +4168,7 @@ snapshots:
       ajv: 6.12.6
       chalk: 4.1.2
       cross-spawn: 7.0.3
-      debug: 4.3.6(supports-color@5.5.0)
+      debug: 4.3.6
       escape-string-regexp: 4.0.0
       eslint-scope: 8.0.2
       eslint-visitor-keys: 4.0.0
@@ -4306,9 +4271,9 @@ snapshots:
     dependencies:
       reusify: 1.0.4
 
-  fdir@6.3.0(picomatch@2.3.1):
+  fdir@6.3.0(picomatch@4.0.2):
     optionalDependencies:
-      picomatch: 2.3.1
+      picomatch: 4.0.2
 
   fenceparser@1.1.1: {}
 
@@ -4457,8 +4422,6 @@ snapshots:
 
   graphemer@1.4.0: {}
 
-  has-flag@3.0.0: {}
-
   has-flag@4.0.0: {}
 
   has-unicode@2.0.1: {}
@@ -4476,21 +4439,21 @@ snapshots:
   http-proxy-agent@7.0.2:
     dependencies:
       agent-base: 7.1.1
-      debug: 4.3.6(supports-color@5.5.0)
+      debug: 4.3.6
     transitivePeerDependencies:
       - supports-color
 
   https-proxy-agent@5.0.1:
     dependencies:
       agent-base: 6.0.2
-      debug: 4.3.6(supports-color@5.5.0)
+      debug: 4.3.6
     transitivePeerDependencies:
       - supports-color
 
   https-proxy-agent@7.0.5:
     dependencies:
       agent-base: 7.1.1
-      debug: 4.3.6(supports-color@5.5.0)
+      debug: 4.3.6
     transitivePeerDependencies:
       - supports-color
 
@@ -4506,8 +4469,6 @@ snapshots:
     dependencies:
       safer-buffer: 2.1.2
 
-  ignore-by-default@1.0.1: {}
-
   ignore-walk@5.0.1:
     dependencies:
       minimatch: 5.1.6
@@ -4596,7 +4557,7 @@ snapshots:
   istanbul-lib-source-maps@5.0.6:
     dependencies:
       '@jridgewell/trace-mapping': 0.3.25
-      debug: 4.3.6(supports-color@5.5.0)
+      debug: 4.3.6
       istanbul-lib-coverage: 3.2.2
     transitivePeerDependencies:
       - supports-color
@@ -4833,23 +4794,6 @@ snapshots:
 
   node-gyp-build@4.8.0: {}
 
-  nodemon@3.0.3:
-    dependencies:
-      chokidar: 3.5.3
-      debug: 4.3.6(supports-color@5.5.0)
-      ignore-by-default: 1.0.1
-      minimatch: 3.1.2
-      pstree.remy: 1.1.8
-      semver: 7.6.3
-      simple-update-notifier: 2.0.0
-      supports-color: 5.5.0
-      touch: 3.1.0
-      undefsafe: 2.0.5
-
-  nopt@1.0.10:
-    dependencies:
-      abbrev: 1.1.1
-
   nopt@5.0.0:
     dependencies:
       abbrev: 1.1.1
@@ -4975,6 +4919,8 @@ snapshots:
 
   picomatch@2.3.1: {}
 
+  picomatch@4.0.2: {}
+
   pify@4.0.1: {}
 
   playwright-core@1.46.1: {}
@@ -5031,8 +4977,6 @@ snapshots:
 
   psl@1.9.0: {}
 
-  pstree.remy@1.1.8: {}
-
   publint@0.2.7:
     dependencies:
       npm-packlist: 5.1.3
@@ -5196,10 +5140,6 @@ snapshots:
 
   signal-exit@4.1.0: {}
 
-  simple-update-notifier@2.0.0:
-    dependencies:
-      semver: 7.6.3
-
   sirv@2.0.4:
     dependencies:
       '@polka/url': 1.0.0-next.25
@@ -5270,21 +5210,17 @@ snapshots:
 
   style-mod@4.1.2: {}
 
-  supports-color@5.5.0:
-    dependencies:
-      has-flag: 3.0.0
-
   supports-color@7.2.0:
     dependencies:
       has-flag: 4.0.0
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
-  svelte-check@4.0.1(svelte@packages+svelte)(typescript@5.5.4):
+  svelte-check@4.0.1(picomatch@4.0.2)(svelte@packages+svelte)(typescript@5.5.4):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.25
       chokidar: 3.5.3
-      fdir: 6.3.0(picomatch@2.3.1)
+      fdir: 6.3.0(picomatch@4.0.2)
       picocolors: 1.1.0
       sade: 1.8.1
       svelte: link:packages/svelte
@@ -5365,10 +5301,6 @@ snapshots:
 
   totalist@3.0.1: {}
 
-  touch@3.1.0:
-    dependencies:
-      nopt: 1.0.10
-
   tough-cookie@4.1.4:
     dependencies:
       psl: 1.9.0
@@ -5407,8 +5339,6 @@ snapshots:
 
   typescript@5.5.4: {}
 
-  undefsafe@2.0.5: {}
-
   undici-types@5.26.5: {}
 
   universalify@0.1.2: {}
@@ -5433,7 +5363,7 @@ snapshots:
   vite-node@2.0.5(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0):
     dependencies:
       cac: 6.7.14
-      debug: 4.3.6(supports-color@5.5.0)
+      debug: 4.3.6
       pathe: 1.1.2
       tinyrainbow: 1.2.0
       vite: 5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)
@@ -5452,7 +5382,7 @@ snapshots:
     dependencies:
       '@antfu/utils': 0.7.8
       '@rollup/pluginutils': 5.1.0(rollup@4.22.4)
-      debug: 4.3.6(supports-color@5.5.0)
+      debug: 4.3.6
       error-stack-parser-es: 0.1.1
       fs-extra: 11.2.0
       open: 10.1.0
@@ -5490,7 +5420,7 @@ snapshots:
       '@vitest/spy': 2.0.5
       '@vitest/utils': 2.0.5
       chai: 5.1.1
-      debug: 4.3.6(supports-color@5.5.0)
+      debug: 4.3.6
       execa: 8.0.1
       magic-string: 0.30.11
       pathe: 1.1.2

From 19d80ad63c545bff2b84d29563cfab8e63b5bf68 Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Tue, 26 Nov 2024 22:30:21 +0100
Subject: [PATCH 111/159] fix: css pruning producing invalid css (#14448)

* fix: css pruning producing invalid css

* Update .changeset/big-hats-wonder.md

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/big-hats-wonder.md                 |   5 +
 .../compiler/phases/3-transform/css/index.js  |  18 +-
 .../svelte/tests/css/samples/has/expected.css |   2 +-
 .../unused-selector-in-between/expected.css   |   2 +-
 .../unused-selector-leading/expected.css      |   2 +-
 .../unused-selector-multiple/_config.js       | 160 ++++++++++++++++++
 .../unused-selector-multiple/expected.css     |  15 ++
 .../unused-selector-multiple/input.svelte     |  20 +++
 8 files changed, 211 insertions(+), 13 deletions(-)
 create mode 100644 .changeset/big-hats-wonder.md
 create mode 100644 packages/svelte/tests/css/samples/unused-selector-multiple/_config.js
 create mode 100644 packages/svelte/tests/css/samples/unused-selector-multiple/expected.css
 create mode 100644 packages/svelte/tests/css/samples/unused-selector-multiple/input.svelte

diff --git a/.changeset/big-hats-wonder.md b/.changeset/big-hats-wonder.md
new file mode 100644
index 0000000000..bc2e352ffb
--- /dev/null
+++ b/.changeset/big-hats-wonder.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: correctly remove unused selectors in middle of selector lists
diff --git a/packages/svelte/src/compiler/phases/3-transform/css/index.js b/packages/svelte/src/compiler/phases/3-transform/css/index.js
index d1f3d3baa6..c1175e4b5b 100644
--- a/packages/svelte/src/compiler/phases/3-transform/css/index.js
+++ b/packages/svelte/src/compiler/phases/3-transform/css/index.js
@@ -200,6 +200,7 @@ const visitors = {
 			let pruning = false;
 			let prune_start = children[0].start;
 			let last = prune_start;
+			let has_previous_used = false;
 
 			for (let i = 0; i < children.length; i += 1) {
 				const selector = children[i];
@@ -210,9 +211,9 @@ const visitors = {
 						while (state.code.original[i] !== ',') i--;
 
 						if (state.minify) {
-							state.code.remove(prune_start, i + 1);
+							state.code.remove(prune_start, has_previous_used ? i : i + 1);
 						} else {
-							state.code.overwrite(i, i + 1, '*/');
+							state.code.appendRight(has_previous_used ? i : i + 1, '*/');
 						}
 					} else {
 						if (i === 0) {
@@ -222,17 +223,10 @@ const visitors = {
 								state.code.prependRight(selector.start, '/* (unused) ');
 							}
 						} else {
-							// If this is not the last selector add a separator
-							const separator = i !== children.length - 1 ? ',' : '';
-
 							if (state.minify) {
 								prune_start = last;
-								if (separator) {
-									while (state.code.original[prune_start - 1] !== ',') prune_start++;
-									state.code.update(last, prune_start, separator);
-								}
 							} else {
-								state.code.overwrite(last, selector.start, `${separator} /* (unused) `);
+								state.code.overwrite(last, selector.start, ` /* (unused) `);
 							}
 						}
 					}
@@ -240,6 +234,10 @@ const visitors = {
 					pruning = !pruning;
 				}
 
+				if (!pruning && selector.metadata.used) {
+					has_previous_used = true;
+				}
+
 				last = selector.end;
 			}
 
diff --git a/packages/svelte/tests/css/samples/has/expected.css b/packages/svelte/tests/css/samples/has/expected.css
index 8eda676f93..68d6aad68a 100644
--- a/packages/svelte/tests/css/samples/has/expected.css
+++ b/packages/svelte/tests/css/samples/has/expected.css
@@ -75,7 +75,7 @@
 	/* (unused) .unused x:has(y) {
 		color: red;
 	}*/
-	/* (unused) .unused:has(.unused)*/ x.svelte-xyz:has(y:where(.svelte-xyz)) {
+	/* (unused) .unused:has(.unused),*/ x.svelte-xyz:has(y:where(.svelte-xyz)) {
 		color: green;
 	}
 
diff --git a/packages/svelte/tests/css/samples/unused-selector-in-between/expected.css b/packages/svelte/tests/css/samples/unused-selector-in-between/expected.css
index 5a93aa53b7..43db50b0fe 100644
--- a/packages/svelte/tests/css/samples/unused-selector-in-between/expected.css
+++ b/packages/svelte/tests/css/samples/unused-selector-in-between/expected.css
@@ -1,7 +1,7 @@
 
 	h1.svelte-xyz,
 	h2.svelte-xyz,
-	h3.svelte-xyz, /* (unused) h4*/
+	h3.svelte-xyz /* (unused) h4*/,
 	p.svelte-xyz {
 		color: red;
 	}
diff --git a/packages/svelte/tests/css/samples/unused-selector-leading/expected.css b/packages/svelte/tests/css/samples/unused-selector-leading/expected.css
index 61245348fb..1a5b5d6591 100644
--- a/packages/svelte/tests/css/samples/unused-selector-leading/expected.css
+++ b/packages/svelte/tests/css/samples/unused-selector-leading/expected.css
@@ -1,3 +1,3 @@
-	/* (unused) .foo*/ .bar.svelte-xyz /* (unused) .baz*/ {
+	/* (unused) .foo,*/ .bar.svelte-xyz /* (unused) .baz*/ {
 		color: red;
 	}
diff --git a/packages/svelte/tests/css/samples/unused-selector-multiple/_config.js b/packages/svelte/tests/css/samples/unused-selector-multiple/_config.js
new file mode 100644
index 0000000000..1239fe2e35
--- /dev/null
+++ b/packages/svelte/tests/css/samples/unused-selector-multiple/_config.js
@@ -0,0 +1,160 @@
+import { test } from '../../test';
+
+export default test({
+	warnings: [
+		{
+			code: 'a11y_missing_content',
+			message: '`<h1>` element should contain text',
+			start: {
+				line: 1,
+				column: 0,
+				character: 0
+			},
+			end: {
+				line: 1,
+				column: 9,
+				character: 9
+			}
+		},
+		{
+			code: 'a11y_missing_content',
+			message: '`<h4>` element should contain text',
+			start: {
+				line: 2,
+				column: 0,
+				character: 10
+			},
+			end: {
+				line: 2,
+				column: 9,
+				character: 19
+			}
+		},
+		{
+			code: 'css_unused_selector',
+			message: 'Unused CSS selector "h2"',
+			start: {
+				line: 6,
+				column: 5,
+				character: 35
+			},
+			end: {
+				line: 6,
+				column: 7,
+				character: 37
+			}
+		},
+		{
+			code: 'css_unused_selector',
+			message: 'Unused CSS selector "h3"',
+			start: {
+				line: 6,
+				column: 9,
+				character: 39
+			},
+			end: {
+				line: 6,
+				column: 11,
+				character: 41
+			}
+		},
+		{
+			code: 'css_unused_selector',
+			message: 'Unused CSS selector "h2"',
+			start: {
+				line: 9,
+				column: 5,
+				character: 66
+			},
+			end: {
+				line: 9,
+				column: 7,
+				character: 68
+			}
+		},
+		{
+			code: 'css_unused_selector',
+			message: 'Unused CSS selector "h2"',
+			start: {
+				line: 13,
+				column: 5,
+				character: 110
+			},
+			end: {
+				line: 13,
+				column: 7,
+				character: 112
+			}
+		},
+		{
+			code: 'css_unused_selector',
+			message: 'Unused CSS selector "h3"',
+			start: {
+				line: 13,
+				column: 9,
+				character: 114
+			},
+			end: {
+				line: 13,
+				column: 11,
+				character: 116
+			}
+		},
+		{
+			code: 'css_unused_selector',
+			message: 'Unused CSS selector "h2"',
+			start: {
+				line: 17,
+				column: 5,
+				character: 161
+			},
+			end: {
+				line: 17,
+				column: 7,
+				character: 163
+			}
+		},
+		{
+			code: 'css_unused_selector',
+			message: 'Unused CSS selector "h3"',
+			start: {
+				line: 17,
+				column: 9,
+				character: 165
+			},
+			end: {
+				line: 17,
+				column: 11,
+				character: 167
+			}
+		},
+		{
+			code: 'css_unused_selector',
+			message: 'Unused CSS selector "h5"',
+			start: {
+				line: 17,
+				column: 17,
+				character: 173
+			},
+			end: {
+				line: 17,
+				column: 19,
+				character: 175
+			}
+		},
+		{
+			code: 'css_unused_selector',
+			message: 'Unused CSS selector "h6"',
+			start: {
+				line: 17,
+				column: 21,
+				character: 177
+			},
+			end: {
+				line: 17,
+				column: 23,
+				character: 179
+			}
+		}
+	]
+});
diff --git a/packages/svelte/tests/css/samples/unused-selector-multiple/expected.css b/packages/svelte/tests/css/samples/unused-selector-multiple/expected.css
new file mode 100644
index 0000000000..78ddf12fec
--- /dev/null
+++ b/packages/svelte/tests/css/samples/unused-selector-multiple/expected.css
@@ -0,0 +1,15 @@
+
+	h1.svelte-xyz /* (unused) h2, h3*/ {
+		color: red;
+	}
+	h1.svelte-xyz /* (unused) h2*/ {
+		text-decoration: underline;
+	}
+
+	h1.svelte-xyz /* (unused) h2, h3*/, h4.svelte-xyz {
+		text-transform: uppercase;
+	}
+
+	h1.svelte-xyz /* (unused) h2, h3*/, h4.svelte-xyz /* (unused) h5, h6*/ {
+		background-color: green;
+	}
diff --git a/packages/svelte/tests/css/samples/unused-selector-multiple/input.svelte b/packages/svelte/tests/css/samples/unused-selector-multiple/input.svelte
new file mode 100644
index 0000000000..b5bdb16420
--- /dev/null
+++ b/packages/svelte/tests/css/samples/unused-selector-multiple/input.svelte
@@ -0,0 +1,20 @@
+<h1></h1>
+<h4></h4>
+
+
+<style>
+	h1, h2, h3 {
+		color: red;
+	}
+	h1, h2 {
+		text-decoration: underline;
+	}
+
+	h1, h2, h3, h4 {
+		text-transform: uppercase;
+	}
+
+	h1, h2, h3, h4, h5, h6 {
+		background-color: green;
+	}
+</style>

From e9ff665bead20d84df4464526a026b2070f3278a Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 27 Nov 2024 11:55:08 -0500
Subject: [PATCH 112/159] chore: minor css-prune.js tweaks (#14457)

---
 .../phases/2-analyze/css/css-prune.js         | 22 ++++++++-----------
 1 file changed, 9 insertions(+), 13 deletions(-)

diff --git a/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js b/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js
index dec85c0361..583b2c9f2d 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js
@@ -141,16 +141,12 @@ function get_relative_selectors(node) {
 
 		// nesting could be inside pseudo classes like :is, :has or :where
 		for (let selector of selectors) {
-			walk(
-				selector,
-				{},
-				{
-					// @ts-ignore
-					NestingSelector() {
-						has_explicit_nesting_selector = true;
-					}
+			walk(selector, null, {
+				// @ts-ignore
+				NestingSelector() {
+					has_explicit_nesting_selector = true;
 				}
-			);
+			});
 			// if we found one we can break from the others
 			if (has_explicit_nesting_selector) break;
 		}
@@ -881,17 +877,17 @@ function get_element_parent(node) {
 }
 
 /**
- * @param {Compiler.AST.RegularElement | Compiler.AST.SvelteElement} element
+ * @param {Compiler.AST.RegularElement | Compiler.AST.SvelteElement} node
  * @param {boolean} adjacent_only
  * @returns {Map<Compiler.AST.RegularElement | Compiler.AST.SvelteElement | Compiler.AST.SlotElement | Compiler.AST.RenderTag, NodeExistsValue>}
  */
-function get_possible_element_siblings(element, adjacent_only) {
+function get_possible_element_siblings(node, adjacent_only) {
 	/** @type {Map<Compiler.AST.RegularElement | Compiler.AST.SvelteElement | Compiler.AST.SlotElement | Compiler.AST.RenderTag, NodeExistsValue>} */
 	const result = new Map();
-	const path = element.metadata.path;
+	const path = node.metadata.path;
 
 	/** @type {Compiler.SvelteNode} */
-	let current = element;
+	let current = node;
 
 	let i = path.length;
 

From 41e47a4c001928bc03f0deda1e2b6e861872089e Mon Sep 17 00:00:00 2001
From: Ben McCann <322311+benmccann@users.noreply.github.com>
Date: Wed, 27 Nov 2024 16:39:52 -0800
Subject: [PATCH 113/159] chore: upgrade esm-env for Vite 6 support (#14460)

* chore: upgrade esm-env for Vite 6 support

* dedupe

---------

Co-authored-by: Conduitry <git@chor.date>
---
 .changeset/healthy-drinks-compete.md |  5 +++++
 packages/svelte/package.json         |  2 +-
 pnpm-lock.yaml                       | 18 +++++++++---------
 3 files changed, 15 insertions(+), 10 deletions(-)
 create mode 100644 .changeset/healthy-drinks-compete.md

diff --git a/.changeset/healthy-drinks-compete.md b/.changeset/healthy-drinks-compete.md
new file mode 100644
index 0000000000..80edab0171
--- /dev/null
+++ b/.changeset/healthy-drinks-compete.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+chore: upgrade esm-env for Vite 6 support
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 61f2ec2d54..5bf1863bc4 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -142,7 +142,7 @@
     "acorn-typescript": "^1.4.13",
     "aria-query": "^5.3.1",
     "axobject-query": "^4.1.0",
-    "esm-env": "^1.0.0",
+    "esm-env": "^1.2.0",
     "esrap": "^1.2.2",
     "is-reference": "^3.0.3",
     "locate-character": "^3.0.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 261a82f300..2556f0c100 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -81,8 +81,8 @@ importers:
         specifier: ^4.1.0
         version: 4.1.0
       esm-env:
-        specifier: ^1.0.0
-        version: 1.0.0
+        specifier: ^1.2.0
+        version: 1.2.0
       esrap:
         specifier: ^1.2.2
         version: 1.2.2
@@ -224,7 +224,7 @@ importers:
         version: 6.0.1(@lezer/common@1.2.1)
       esm-env:
         specifier: ^1.0.0
-        version: 1.0.0
+        version: 1.2.0
       marked:
         specifier: ^7.0.2
         version: 7.0.5
@@ -1236,7 +1236,7 @@ packages:
     resolution: {integrity: sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==}
 
   concat-map@0.0.1:
-    resolution: {integrity: sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=}
+    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
 
   console-control-strings@1.1.0:
     resolution: {integrity: sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==}
@@ -1442,8 +1442,8 @@ packages:
       jiti:
         optional: true
 
-  esm-env@1.0.0:
-    resolution: {integrity: sha512-Cf6VksWPsTuW01vU9Mk/3vRue91Zevka5SjyNf3nEpokFRuqt/KjUQoGAwq9qMmhpLTHmXzSIrFRw8zxWzmFBA==}
+  esm-env@1.2.0:
+    resolution: {integrity: sha512-OhSQuHL3mUcaQHjGe8UMG8GsJIJHYYz0flR0h9fiTPNMupLMkb7TvcRD0EeJXW5a8GHBgfz08b6FDLNK7kkPQA==}
 
   espree@10.1.0:
     resolution: {integrity: sha512-M1M6CpiE6ffoigIOWYO9UDP8TMUw9kqb21tf+08IgDYjCsOvCuDt4jQcZmoYxx+w7zlKw9/N0KXfto+I8/FrXA==}
@@ -3531,7 +3531,7 @@ snapshots:
       '@types/cookie': 0.6.0
       cookie: 0.6.0
       devalue: 5.1.1
-      esm-env: 1.0.0
+      esm-env: 1.2.0
       import-meta-resolve: 4.1.0
       kleur: 4.1.5
       magic-string: 0.30.11
@@ -3546,7 +3546,7 @@ snapshots:
   '@sveltejs/site-kit@6.0.0-next.64(@sveltejs/kit@2.8.3(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@packages+svelte)(vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)(vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)':
     dependencies:
       '@sveltejs/kit': 2.8.3(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@packages+svelte)(vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)(vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))
-      esm-env: 1.0.0
+      esm-env: 1.2.0
       svelte: link:packages/svelte
       svelte-persisted-store: 0.9.2(svelte@packages+svelte)
 
@@ -4194,7 +4194,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  esm-env@1.0.0: {}
+  esm-env@1.2.0: {}
 
   espree@10.1.0:
     dependencies:

From d6fc176fcb2f1685e762febf88e52a8f63aecb4c Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Thu, 28 Nov 2024 01:41:36 +0100
Subject: [PATCH 114/159] fix: strip exported TypeScript function overloads
 (#14458)

fixes #14455
---
 .changeset/shy-starfishes-type.md                           | 5 +++++
 .../src/compiler/phases/1-parse/remove_typescript_nodes.js  | 6 +++++-
 .../tests/runtime-runes/samples/typescript/main.svelte      | 4 ++++
 3 files changed, 14 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/shy-starfishes-type.md

diff --git a/.changeset/shy-starfishes-type.md b/.changeset/shy-starfishes-type.md
new file mode 100644
index 0000000000..e6c5bf51da
--- /dev/null
+++ b/.changeset/shy-starfishes-type.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: strip exported TypeScript function overloads
diff --git a/packages/svelte/src/compiler/phases/1-parse/remove_typescript_nodes.js b/packages/svelte/src/compiler/phases/1-parse/remove_typescript_nodes.js
index 36a25f5124..8db29ab067 100644
--- a/packages/svelte/src/compiler/phases/1-parse/remove_typescript_nodes.js
+++ b/packages/svelte/src/compiler/phases/1-parse/remove_typescript_nodes.js
@@ -36,7 +36,11 @@ const visitors = {
 		if (node.exportKind === 'type') return b.empty;
 
 		if (node.declaration) {
-			return context.next();
+			const result = context.next();
+			if (result?.declaration?.type === 'EmptyStatement') {
+				return b.empty;
+			}
+			return result;
 		}
 
 		if (node.specifiers) {
diff --git a/packages/svelte/tests/runtime-runes/samples/typescript/main.svelte b/packages/svelte/tests/runtime-runes/samples/typescript/main.svelte
index 71638688f2..8a3db5dead 100644
--- a/packages/svelte/tests/runtime-runes/samples/typescript/main.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/typescript/main.svelte
@@ -27,6 +27,10 @@
 		export type Foo = true
 	}
 
+	export function overload(a: boolean): boolean;
+	export function overload(b: string): number;
+	export function overload(c: any): any {}
+
 	export type { Hello };
 </script>
 

From dcef8ff45a91537f5f90fe95c7845b8cb2a0dc27 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Wed, 27 Nov 2024 19:47:28 -0500
Subject: [PATCH 115/159] Version Packages (#14451)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/big-hats-wonder.md        |  5 -----
 .changeset/healthy-drinks-compete.md |  5 -----
 .changeset/shy-starfishes-type.md    |  5 -----
 packages/svelte/CHANGELOG.md         | 10 ++++++++++
 packages/svelte/package.json         |  2 +-
 packages/svelte/src/version.js       |  2 +-
 6 files changed, 12 insertions(+), 17 deletions(-)
 delete mode 100644 .changeset/big-hats-wonder.md
 delete mode 100644 .changeset/healthy-drinks-compete.md
 delete mode 100644 .changeset/shy-starfishes-type.md

diff --git a/.changeset/big-hats-wonder.md b/.changeset/big-hats-wonder.md
deleted file mode 100644
index bc2e352ffb..0000000000
--- a/.changeset/big-hats-wonder.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: correctly remove unused selectors in middle of selector lists
diff --git a/.changeset/healthy-drinks-compete.md b/.changeset/healthy-drinks-compete.md
deleted file mode 100644
index 80edab0171..0000000000
--- a/.changeset/healthy-drinks-compete.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-chore: upgrade esm-env for Vite 6 support
diff --git a/.changeset/shy-starfishes-type.md b/.changeset/shy-starfishes-type.md
deleted file mode 100644
index e6c5bf51da..0000000000
--- a/.changeset/shy-starfishes-type.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: strip exported TypeScript function overloads
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 13c67caa84..f1694a58fb 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,15 @@
 # svelte
 
+## 5.2.10
+
+### Patch Changes
+
+- fix: correctly remove unused selectors in middle of selector lists ([#14448](https://github.com/sveltejs/svelte/pull/14448))
+
+- chore: upgrade esm-env for Vite 6 support ([#14460](https://github.com/sveltejs/svelte/pull/14460))
+
+- fix: strip exported TypeScript function overloads ([#14458](https://github.com/sveltejs/svelte/pull/14458))
+
 ## 5.2.9
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 5bf1863bc4..cf679a0e34 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.2.9",
+  "version": "5.2.10",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 4fabe40a59..ecc9de1a4a 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.2.9';
+export const VERSION = '5.2.10';
 export const PUBLIC_VERSION = '5';

From c4ac0e01e75eb20e99f6a31e974c6bc5b5f00dc7 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 28 Nov 2024 07:02:18 -0500
Subject: [PATCH 116/159] fix: better account for render tags when pruning CSS
 (#14456)

Fixes #14399

Add a mechanism to connect render tags to snippets to know where to walk when coming across render tags

---------

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
Co-authored-by: Simon Holthausen <simon.holthausen@vercel.com>
---
 .changeset/twelve-squids-wink.md              |   5 +
 .../src/compiler/phases/1-parse/state/tag.js  |   8 +-
 .../phases/2-analyze/css/css-prune.js         | 270 +++++++-----------
 .../compiler/phases/2-analyze/css/utils.js    |  11 +-
 .../src/compiler/phases/2-analyze/index.js    |  16 +-
 .../phases/2-analyze/visitors/RenderTag.js    |  19 +-
 .../phases/2-analyze/visitors/SnippetBlock.js |   2 +
 .../2-analyze/visitors/shared/component.js    |  51 ++++
 .../2-analyze/visitors/shared/snippets.js     |  17 ++
 .../svelte/src/compiler/phases/types.d.ts     |  13 +-
 .../svelte/src/compiler/types/template.d.ts   |  21 ++
 .../css/samples/child-combinator/expected.css |   2 +-
 .../samples/dynamic-element-tag/expected.css  |   2 +-
 .../expected.css                              |   4 +
 .../input.svelte                              |  13 +
 .../_config.js                                |  22 +-
 .../expected.css                              |  13 +-
 .../input.svelte                              |  12 +-
 .../expected.css                              |   2 +-
 .../expected.html                             |   2 +-
 .../general-siblings-combinator/expected.css  |   2 +-
 .../samples/has-with-render-tag/_config.js    |  20 ++
 .../samples/has-with-render-tag/expected.css  |  11 +
 .../samples/has-with-render-tag/input.svelte  |  26 ++
 .../Child.svelte                              |   5 +
 .../expected.css                              |   4 +
 .../input.svelte                              |  15 +
 .../Child.svelte                              |   5 +
 .../expected.css                              |   4 +
 .../input.svelte                              |  17 ++
 .../expected.css                              |   4 +
 .../input.svelte                              |  13 +
 .../expected.css                              |   4 +
 .../input.svelte                              |  13 +
 .../Child.svelte                              |   1 +
 .../expected.css                              |   4 +
 .../input.svelte                              |  15 +
 .../siblings-combinator-slot/_config.js       |  10 +-
 .../siblings-combinator-slot/expected.css     |   7 +-
 .../siblings-combinator-slot/input.svelte     |   6 +-
 .../siblings-combinator-star/expected.css     |   2 +-
 .../siblings-combinator-star/expected.html    |   2 +-
 .../samples/siblings-combinator/expected.css  |   2 +-
 .../tests/css/samples/snippets/_config.js     |  18 +-
 .../tests/css/samples/snippets/expected.css   |   6 +-
 .../tests/css/samples/snippets/input.svelte   |   4 +-
 46 files changed, 493 insertions(+), 232 deletions(-)
 create mode 100644 .changeset/twelve-squids-wink.md
 create mode 100644 packages/svelte/src/compiler/phases/2-analyze/visitors/shared/snippets.js
 create mode 100644 packages/svelte/tests/css/samples/general-siblings-combinator-render-tag/expected.css
 create mode 100644 packages/svelte/tests/css/samples/general-siblings-combinator-render-tag/input.svelte
 create mode 100644 packages/svelte/tests/css/samples/has-with-render-tag/_config.js
 create mode 100644 packages/svelte/tests/css/samples/has-with-render-tag/expected.css
 create mode 100644 packages/svelte/tests/css/samples/has-with-render-tag/input.svelte
 create mode 100644 packages/svelte/tests/css/samples/siblings-combinator-component-default-snippet/Child.svelte
 create mode 100644 packages/svelte/tests/css/samples/siblings-combinator-component-default-snippet/expected.css
 create mode 100644 packages/svelte/tests/css/samples/siblings-combinator-component-default-snippet/input.svelte
 create mode 100644 packages/svelte/tests/css/samples/siblings-combinator-component-named-snippet/Child.svelte
 create mode 100644 packages/svelte/tests/css/samples/siblings-combinator-component-named-snippet/expected.css
 create mode 100644 packages/svelte/tests/css/samples/siblings-combinator-component-named-snippet/input.svelte
 create mode 100644 packages/svelte/tests/css/samples/siblings-combinator-missing-fallback/expected.css
 create mode 100644 packages/svelte/tests/css/samples/siblings-combinator-missing-fallback/input.svelte
 create mode 100644 packages/svelte/tests/css/samples/siblings-combinator-render-tag/expected.css
 create mode 100644 packages/svelte/tests/css/samples/siblings-combinator-render-tag/input.svelte
 create mode 100644 packages/svelte/tests/css/samples/siblings-combinator-slot-named-between-default/Child.svelte
 create mode 100644 packages/svelte/tests/css/samples/siblings-combinator-slot-named-between-default/expected.css
 create mode 100644 packages/svelte/tests/css/samples/siblings-combinator-slot-named-between-default/input.svelte

diff --git a/.changeset/twelve-squids-wink.md b/.changeset/twelve-squids-wink.md
new file mode 100644
index 0000000000..0fde3dfb86
--- /dev/null
+++ b/.changeset/twelve-squids-wink.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: better account for render tags when pruning CSS
diff --git a/packages/svelte/src/compiler/phases/1-parse/state/tag.js b/packages/svelte/src/compiler/phases/1-parse/state/tag.js
index 1632099c29..3366c9ec97 100644
--- a/packages/svelte/src/compiler/phases/1-parse/state/tag.js
+++ b/packages/svelte/src/compiler/phases/1-parse/state/tag.js
@@ -314,7 +314,10 @@ function open(parser) {
 				name
 			},
 			parameters: function_expression.params,
-			body: create_fragment()
+			body: create_fragment(),
+			metadata: {
+				sites: new Set()
+			}
 		});
 		parser.stack.push(block);
 		parser.fragments.push(block.body);
@@ -605,7 +608,8 @@ function special(parser) {
 			metadata: {
 				dynamic: false,
 				args_with_call_expression: new Set(),
-				path: []
+				path: [],
+				snippets: new Set()
 			}
 		});
 	}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js b/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js
index 583b2c9f2d..0c38114a30 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js
@@ -1,16 +1,9 @@
-/** @import { Visitors } from 'zimmerframe' */
 /** @import * as Compiler from '#compiler' */
 import { walk } from 'zimmerframe';
 import { get_parent_rules, get_possible_values, is_outer_global } from './utils.js';
 import { regex_ends_with_whitespace, regex_starts_with_whitespace } from '../../patterns.js';
 import { get_attribute_chunks, is_text_attribute } from '../../../utils/ast.js';
 
-/**
- * @typedef {{
- *   element: Compiler.AST.RegularElement | Compiler.AST.SvelteElement;
- *   from_render_tag: boolean;
- * }} State
- */
 /** @typedef {NODE_PROBABLY_EXISTS | NODE_DEFINITELY_EXISTS} NodeExistsValue */
 
 const NODE_PROBABLY_EXISTS = 0;
@@ -53,78 +46,32 @@ const nesting_selector = {
 /**
  *
  * @param {Compiler.Css.StyleSheet} stylesheet
- * @param {Compiler.AST.RegularElement | Compiler.AST.SvelteElement | Compiler.AST.RenderTag} element
+ * @param {Compiler.AST.RegularElement | Compiler.AST.SvelteElement} element
  */
 export function prune(stylesheet, element) {
-	if (element.type === 'RenderTag') {
-		const parent = get_element_parent(element);
-		if (!parent) return;
-
-		walk(stylesheet, { element: parent, from_render_tag: true }, visitors);
-	} else {
-		walk(stylesheet, { element, from_render_tag: false }, visitors);
-	}
-}
-
-/** @type {Visitors<Compiler.Css.Node, State>} */
-const visitors = {
-	Rule(node, context) {
-		if (node.metadata.is_global_block) {
-			context.visit(node.prelude);
-		} else {
-			context.next();
-		}
-	},
-	ComplexSelector(node, context) {
-		const selectors = get_relative_selectors(node);
-		const inner = selectors[selectors.length - 1];
-
-		if (context.state.from_render_tag) {
-			// We're searching for a match that crosses a render tag boundary. That means we have to both traverse up
-			// the element tree (to see if we find an entry point) but also remove selectors from the end (assuming
-			// they are part of the render tag we don't see). We do all possible combinations of both until we find a match.
-			/** @type {Compiler.AST.RegularElement | Compiler.AST.SvelteElement | null} */
-			let element = context.state.element;
-
-			while (element) {
-				const selectors_to_check = selectors.slice();
-
-				while (selectors_to_check.length > 0) {
-					selectors_to_check.pop();
-
-					if (
-						apply_selector(
-							selectors_to_check,
-							/** @type {Compiler.Css.Rule} */ (node.metadata.rule),
-							element,
-							context.state
-						)
-					) {
-						mark(inner, element);
-						node.metadata.used = true;
-						return;
-					}
-				}
-
-				element = get_element_parent(element);
+	walk(/** @type {Compiler.Css.Node} */ (stylesheet), null, {
+		Rule(node, context) {
+			if (node.metadata.is_global_block) {
+				context.visit(node.prelude);
+			} else {
+				context.next();
+			}
+		},
+		ComplexSelector(node) {
+			const selectors = get_relative_selectors(node);
+
+			if (
+				apply_selector(selectors, /** @type {Compiler.Css.Rule} */ (node.metadata.rule), element)
+			) {
+				node.metadata.used = true;
 			}
-		} else if (
-			apply_selector(
-				selectors,
-				/** @type {Compiler.Css.Rule} */ (node.metadata.rule),
-				context.state.element,
-				context.state
-			)
-		) {
-			mark(inner, context.state.element);
-			node.metadata.used = true;
-		}
 
-		// note: we don't call context.next() here, we only recurse into
-		// selectors that don't belong to rules (i.e. inside `:is(...)` etc)
-		// when we encounter them below
-	}
-};
+			// note: we don't call context.next() here, we only recurse into
+			// selectors that don't belong to rules (i.e. inside `:is(...)` etc)
+			// when we encounter them below
+		}
+	});
+}
 
 /**
  * Retrieves the relative selectors (minus the trailing globals) from a complex selector.
@@ -147,6 +94,7 @@ function get_relative_selectors(node) {
 					has_explicit_nesting_selector = true;
 				}
 			});
+
 			// if we found one we can break from the others
 			if (has_explicit_nesting_selector) break;
 		}
@@ -199,89 +147,63 @@ function truncate(node) {
  * @param {Compiler.Css.RelativeSelector[]} relative_selectors
  * @param {Compiler.Css.Rule} rule
  * @param {Compiler.AST.RegularElement | Compiler.AST.SvelteElement} element
- * @param {State} state
  * @returns {boolean}
  */
-function apply_selector(relative_selectors, rule, element, state) {
+function apply_selector(relative_selectors, rule, element) {
 	const parent_selectors = relative_selectors.slice();
 	const relative_selector = parent_selectors.pop();
 
-	if (!relative_selector) return false;
+	const matched =
+		!!relative_selector &&
+		relative_selector_might_apply_to_node(relative_selector, rule, element) &&
+		apply_combinator(relative_selector, parent_selectors, rule, element);
 
-	const possible_match = relative_selector_might_apply_to_node(
-		relative_selector,
-		rule,
-		element,
-		state
-	);
-
-	if (!possible_match) {
-		return false;
-	}
-
-	if (relative_selector.combinator) {
-		return apply_combinator(
-			relative_selector.combinator,
-			relative_selector,
-			parent_selectors,
-			rule,
-			element,
-			state
-		);
-	}
+	if (matched) {
+		if (!is_outer_global(relative_selector)) {
+			relative_selector.metadata.scoped = true;
+		}
 
-	// if this is the left-most non-global selector, mark it — we want
-	// `x y z {...}` to become `x.blah y z.blah {...}`
-	const parent = parent_selectors[parent_selectors.length - 1];
-	if (!parent || is_global(parent, rule)) {
-		mark(relative_selector, element);
+		element.metadata.scoped = true;
 	}
 
-	return true;
+	return matched;
 }
 
 /**
- * @param {Compiler.Css.Combinator} combinator
  * @param {Compiler.Css.RelativeSelector} relative_selector
  * @param {Compiler.Css.RelativeSelector[]} parent_selectors
  * @param {Compiler.Css.Rule} rule
- * @param {Compiler.AST.RegularElement | Compiler.AST.SvelteElement} element
- * @param {State} state
+ * @param {Compiler.AST.RegularElement | Compiler.AST.SvelteElement | Compiler.AST.RenderTag | Compiler.AST.Component | Compiler.AST.SvelteComponent | Compiler.AST.SvelteSelf} node
  * @returns {boolean}
  */
-function apply_combinator(combinator, relative_selector, parent_selectors, rule, element, state) {
-	const name = combinator.name;
+function apply_combinator(relative_selector, parent_selectors, rule, node) {
+	if (!relative_selector.combinator) return true;
+
+	const name = relative_selector.combinator.name;
 
 	switch (name) {
 		case ' ':
 		case '>': {
 			let parent_matched = false;
-			let crossed_component_boundary = false;
 
-			const path = element.metadata.path;
+			const path = node.metadata.path;
 			let i = path.length;
 
 			while (i--) {
 				const parent = path[i];
 
-				if (parent.type === 'Component' || parent.type === 'SvelteComponent') {
-					crossed_component_boundary = true;
-				}
-
 				if (parent.type === 'SnippetBlock') {
-					// We assume the snippet might be rendered in a place where the parent selectors match.
-					// (We could do more static analysis and check the render tag reference to see if this snippet block continues
-					// with elements that actually match the selector, but that would be a lot of work for little gain)
-					return true;
+					for (const site of parent.metadata.sites) {
+						if (apply_combinator(relative_selector, parent_selectors, rule, site)) {
+							return true;
+						}
+					}
+
+					return false;
 				}
 
 				if (parent.type === 'RegularElement' || parent.type === 'SvelteElement') {
-					if (apply_selector(parent_selectors, rule, parent, state)) {
-						// TODO the `name === ' '` causes false positives, but removing it causes false negatives...
-						if (name === ' ' || crossed_component_boundary) {
-							mark(parent_selectors[parent_selectors.length - 1], parent);
-						}
-
+					if (apply_selector(parent_selectors, rule, parent)) {
 						parent_matched = true;
 					}
 
@@ -294,7 +216,7 @@ function apply_combinator(combinator, relative_selector, parent_selectors, rule,
 
 		case '+':
 		case '~': {
-			const siblings = get_possible_element_siblings(element, name === '+');
+			const siblings = get_possible_element_siblings(node, name === '+');
 
 			let sibling_matched = false;
 
@@ -302,18 +224,16 @@ function apply_combinator(combinator, relative_selector, parent_selectors, rule,
 				if (possible_sibling.type === 'RenderTag' || possible_sibling.type === 'SlotElement') {
 					// `{@render foo()}<p>foo</p>` with `:global(.x) + p` is a match
 					if (parent_selectors.length === 1 && parent_selectors[0].metadata.is_global) {
-						mark(relative_selector, element);
 						sibling_matched = true;
 					}
-				} else if (apply_selector(parent_selectors, rule, possible_sibling, state)) {
-					mark(relative_selector, element);
+				} else if (apply_selector(parent_selectors, rule, possible_sibling)) {
 					sibling_matched = true;
 				}
 			}
 
 			return (
 				sibling_matched ||
-				(get_element_parent(element) === null &&
+				(get_element_parent(node) === null &&
 					parent_selectors.every((selector) => is_global(selector, rule)))
 			);
 		}
@@ -324,19 +244,6 @@ function apply_combinator(combinator, relative_selector, parent_selectors, rule,
 	}
 }
 
-/**
- * Mark both the compound selector and the node it selects as encapsulated,
- * for transformation in a later step
- * @param {Compiler.Css.RelativeSelector} relative_selector
- * @param {Compiler.AST.RegularElement | Compiler.AST.SvelteElement} element
- */
-function mark(relative_selector, element) {
-	if (!is_outer_global(relative_selector)) {
-		relative_selector.metadata.scoped = true;
-	}
-	element.metadata.scoped = true;
-}
-
 /**
  * Returns `true` if the relative selector is global, meaning
  * it's a `:global(...)` or unscopeable selector, or
@@ -388,10 +295,9 @@ const regex_backslash_and_following_character = /\\(.)/g;
  * @param {Compiler.Css.RelativeSelector} relative_selector
  * @param {Compiler.Css.Rule} rule
  * @param {Compiler.AST.RegularElement | Compiler.AST.SvelteElement} element
- * @param {State} state
- * @returns {boolean  }
+ * @returns {boolean}
  */
-function relative_selector_might_apply_to_node(relative_selector, rule, element, state) {
+function relative_selector_might_apply_to_node(relative_selector, rule, element) {
 	// Sort :has(...) selectors in one bucket and everything else into another
 	const has_selectors = [];
 	const other_selectors = [];
@@ -416,7 +322,7 @@ function relative_selector_might_apply_to_node(relative_selector, rule, element,
 
 		// If this is a :has inside a global selector, we gotta include the element itself, too,
 		// because the global selector might be for an element that's outside the component (e.g. :root).
-		const rules = [rule, ...get_parent_rules(rule)];
+		const rules = get_parent_rules(rule);
 		const include_self =
 			rules.some((r) => r.prelude.children.some((c) => c.children.some((s) => is_global(s, r)))) ||
 			rules[rules.length - 1].prelude.children.some((c) =>
@@ -429,10 +335,12 @@ function relative_selector_might_apply_to_node(relative_selector, rule, element,
 			descendant_elements.push(element);
 		}
 
-		walk(
-			/** @type {Compiler.SvelteNode} */ (element.fragment),
-			{ is_child: true },
-			{
+		/**
+		 * @param {Compiler.SvelteNode} node
+		 * @param {{ is_child: boolean }} state
+		 */
+		function walk_children(node, state) {
+			walk(node, state, {
 				_(node, context) {
 					if (node.type === 'RegularElement' || node.type === 'SvelteElement') {
 						descendant_elements.push(node);
@@ -445,12 +353,18 @@ function relative_selector_might_apply_to_node(relative_selector, rule, element,
 						} else {
 							context.next();
 						}
+					} else if (node.type === 'RenderTag') {
+						for (const snippet of node.metadata.snippets) {
+							walk_children(snippet.body, context.state);
+						}
 					} else {
 						context.next();
 					}
 				}
-			}
-		);
+			});
+		}
+
+		walk_children(element.fragment, { is_child: true });
 
 		// :has(...) is special in that it means "look downwards in the CSS tree". Since our matching algorithm goes
 		// upwards and back-to-front, we need to first check the selectors inside :has(...), then check the rest of the
@@ -486,7 +400,7 @@ function relative_selector_might_apply_to_node(relative_selector, rule, element,
 					if (
 						selectors.length === 0 /* is :global(...) */ ||
 						(element.metadata.scoped && selector_matched) ||
-						apply_selector(selectors, rule, element, state)
+						apply_selector(selectors, rule, element)
 					) {
 						complex_selector.metadata.used = true;
 						selector_matched = matched = true;
@@ -516,7 +430,7 @@ function relative_selector_might_apply_to_node(relative_selector, rule, element,
 				) {
 					const args = selector.args;
 					const complex_selector = args.children[0];
-					return apply_selector(complex_selector.children, rule, element, state);
+					return apply_selector(complex_selector.children, rule, element);
 				}
 
 				// We came across a :global, everything beyond it is global and therefore a potential match
@@ -565,7 +479,7 @@ function relative_selector_might_apply_to_node(relative_selector, rule, element,
 						if (is_global) {
 							complex_selector.metadata.used = true;
 							matched = true;
-						} else if (apply_selector(relative, rule, element, state)) {
+						} else if (apply_selector(relative, rule, element)) {
 							complex_selector.metadata.used = true;
 							matched = true;
 						} else if (complex_selector.children.length > 1 && (name == 'is' || name == 'where')) {
@@ -649,7 +563,7 @@ function relative_selector_might_apply_to_node(relative_selector, rule, element,
 
 				for (const complex_selector of parent.prelude.children) {
 					if (
-						apply_selector(get_relative_selectors(complex_selector), parent, element, state) ||
+						apply_selector(get_relative_selectors(complex_selector), parent, element) ||
 						complex_selector.children.every((s) => is_global(s, parent))
 					) {
 						complex_selector.metadata.used = true;
@@ -703,17 +617,28 @@ function get_following_sibling_elements(element, include_self) {
 
 	// ...then walk them, starting from the node after the one
 	// containing the element in question
-	for (const node of nodes.slice(nodes.indexOf(start) + 1)) {
+
+	/** @param {Compiler.SvelteNode} node */
+	function get_siblings(node) {
 		walk(node, null, {
 			RegularElement(node) {
 				siblings.push(node);
 			},
 			SvelteElement(node) {
 				siblings.push(node);
+			},
+			RenderTag(node) {
+				for (const snippet of node.metadata.snippets) {
+					get_siblings(snippet.body);
+				}
 			}
 		});
 	}
 
+	for (const node of nodes.slice(nodes.indexOf(start) + 1)) {
+		get_siblings(node);
+	}
+
 	if (include_self) {
 		siblings.push(element);
 	}
@@ -858,7 +783,7 @@ function unquote(str) {
 }
 
 /**
- * @param {Compiler.AST.RegularElement | Compiler.AST.SvelteElement | Compiler.AST.RenderTag} node
+ * @param {Compiler.AST.RegularElement | Compiler.AST.SvelteElement | Compiler.AST.RenderTag | Compiler.AST.Component | Compiler.AST.SvelteComponent | Compiler.AST.SvelteSelf} node
  * @returns {Compiler.AST.RegularElement | Compiler.AST.SvelteElement | null}
  */
 function get_element_parent(node) {
@@ -877,7 +802,7 @@ function get_element_parent(node) {
 }
 
 /**
- * @param {Compiler.AST.RegularElement | Compiler.AST.SvelteElement} node
+ * @param {Compiler.AST.RegularElement | Compiler.AST.SvelteElement | Compiler.AST.RenderTag | Compiler.AST.Component | Compiler.AST.SvelteComponent | Compiler.AST.SvelteSelf} node
  * @param {boolean} adjacent_only
  * @returns {Map<Compiler.AST.RegularElement | Compiler.AST.SvelteElement | Compiler.AST.SlotElement | Compiler.AST.RenderTag, NodeExistsValue>}
  */
@@ -929,7 +854,28 @@ function get_possible_element_siblings(node, adjacent_only) {
 
 		current = path[i];
 
-		if (!current || !is_block(current)) break;
+		if (!current) break;
+
+		if (
+			current.type === 'Component' ||
+			current.type === 'SvelteComponent' ||
+			current.type === 'SvelteSelf'
+		) {
+			continue;
+		}
+
+		if (current.type === 'SnippetBlock') {
+			for (const site of current.metadata.sites) {
+				const siblings = get_possible_element_siblings(site, adjacent_only);
+				add_to_map(siblings, result);
+
+				if (adjacent_only && current.metadata.sites.size === 1 && has_definite_elements(siblings)) {
+					return result;
+				}
+			}
+		}
+
+		if (!is_block(current)) break;
 
 		if (current.type === 'EachBlock' && fragment === current.body) {
 			// `{#each ...}<a /><b />{/each}` — `<b>` can be previous sibling of `<a />`
diff --git a/packages/svelte/src/compiler/phases/2-analyze/css/utils.js b/packages/svelte/src/compiler/phases/2-analyze/css/utils.js
index 0226a150c9..07171a23bb 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/css/utils.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/css/utils.js
@@ -39,15 +39,14 @@ export function get_possible_values(chunk) {
  * @param {Css.Rule | null} rule
  */
 export function get_parent_rules(rule) {
-	const parents = [];
+	const rules = [];
 
-	let parent = rule?.metadata.parent_rule;
-	while (parent) {
-		parents.push(parent);
-		parent = parent.metadata.parent_rule;
+	while (rule) {
+		rules.push(rule);
+		rule = rule.metadata.parent_rule;
 	}
 
-	return parents;
+	return rules;
 }
 
 /**
diff --git a/packages/svelte/src/compiler/phases/2-analyze/index.js b/packages/svelte/src/compiler/phases/2-analyze/index.js
index ce34544eb4..60f48ac70c 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/index.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/index.js
@@ -438,7 +438,9 @@ export function analyze_component(root, source, options) {
 				: '',
 			keyframes: []
 		},
-		source
+		source,
+		snippet_renderers: new Map(),
+		snippets: new Set()
 	};
 
 	if (!runes) {
@@ -698,6 +700,16 @@ export function analyze_component(root, source, options) {
 		);
 	}
 
+	for (const [node, resolved] of analysis.snippet_renderers) {
+		if (!resolved) {
+			node.metadata.snippets = analysis.snippets;
+		}
+
+		for (const snippet of node.metadata.snippets) {
+			snippet.metadata.sites.add(node);
+		}
+	}
+
 	if (
 		analysis.uses_render_tags &&
 		(analysis.uses_slots || (!analysis.custom_element && analysis.slot_names.size > 0))
@@ -726,8 +738,6 @@ export function analyze_component(root, source, options) {
 		}
 
 		outer: for (const node of analysis.elements) {
-			if (node.type === 'RenderTag') continue;
-
 			if (node.metadata.scoped) {
 				// Dynamic elements in dom mode always use spread for attributes and therefore shouldn't have a class attribute added to them
 				// TODO this happens during the analysis phase, which shouldn't know anything about client vs server
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/RenderTag.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/RenderTag.js
index 57bd80ff1c..045224276a 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/RenderTag.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/RenderTag.js
@@ -4,6 +4,7 @@ import { unwrap_optional } from '../../../utils/ast.js';
 import * as e from '../../../errors.js';
 import { validate_opening_tag } from './shared/utils.js';
 import { mark_subtree_dynamic } from './shared/fragment.js';
+import { is_resolved_snippet } from './shared/snippets.js';
 
 /**
  * @param {AST.RenderTag} node
@@ -13,13 +14,25 @@ export function RenderTag(node, context) {
 	validate_opening_tag(node, context.state, '@');
 
 	node.metadata.path = [...context.path];
-	context.state.analysis.elements.push(node);
 
 	const callee = unwrap_optional(node.expression).callee;
 
-	node.metadata.dynamic =
-		callee.type !== 'Identifier' || context.state.scope.get(callee.name)?.kind !== 'normal';
+	const binding = callee.type === 'Identifier' ? context.state.scope.get(callee.name) : null;
 
+	node.metadata.dynamic = binding?.kind !== 'normal';
+
+	/**
+	 * If we can't unambiguously resolve this to a declaration, we
+	 * must assume the worst and link the render tag to every snippet
+	 */
+	let resolved = callee.type === 'Identifier' && is_resolved_snippet(binding);
+
+	if (binding?.initial?.type === 'SnippetBlock') {
+		// if this render tag unambiguously references a local snippet, our job is easy
+		node.metadata.snippets.add(binding.initial);
+	}
+
+	context.state.analysis.snippet_renderers.set(node, resolved);
 	context.state.analysis.uses_render_tags = true;
 
 	const raw_args = unwrap_optional(node.expression).arguments;
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/SnippetBlock.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/SnippetBlock.js
index 356cf2eeae..c94b65e361 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/SnippetBlock.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/SnippetBlock.js
@@ -8,6 +8,8 @@ import * as e from '../../../errors.js';
  * @param {Context} context
  */
 export function SnippetBlock(node, context) {
+	context.state.analysis.snippets.add(node);
+
 	validate_block_not_empty(node.body, context);
 
 	if (context.state.analysis.runes) {
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/component.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/component.js
index 9a432341a0..84a7e2f130 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/component.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/component.js
@@ -9,12 +9,63 @@ import {
 	validate_slot_attribute
 } from './attribute.js';
 import { mark_subtree_dynamic } from './fragment.js';
+import { is_resolved_snippet } from './snippets.js';
 
 /**
  * @param {AST.Component | AST.SvelteComponent | AST.SvelteSelf} node
  * @param {Context} context
  */
 export function visit_component(node, context) {
+	node.metadata.path = [...context.path];
+
+	// link this node to all the snippets that it could render, so that we can prune CSS correctly
+	node.metadata.snippets = new Set();
+
+	// 'resolved' means we know which snippets this component might render. if it is `false`,
+	// then `node.metadata.snippets` is populated with every locally defined snippet
+	// once analysis is complete
+	let resolved = true;
+
+	for (const attribute of node.attributes) {
+		if (attribute.type === 'SpreadAttribute' || attribute.type === 'BindDirective') {
+			resolved = false;
+			continue;
+		}
+
+		if (attribute.type !== 'Attribute' || !is_expression_attribute(attribute)) {
+			continue;
+		}
+
+		const expression = get_attribute_expression(attribute);
+
+		// given an attribute like `foo={bar}`, if `bar` resolves to an import or a prop
+		// then we know it doesn't reference a locally defined snippet. if it resolves
+		// to a `{#snippet bar()}` then we know _which_ snippet it resolves to. in all
+		// other cases, we can't know (without much more complex static analysis) which
+		// snippets the component might render, so we treat the component as unresolved
+		if (expression.type === 'Identifier') {
+			const binding = context.state.scope.get(expression.name);
+
+			resolved &&= is_resolved_snippet(binding);
+
+			if (binding?.initial?.type === 'SnippetBlock') {
+				node.metadata.snippets.add(binding.initial);
+			}
+		} else {
+			resolved = false;
+		}
+	}
+
+	if (resolved) {
+		for (const child of node.fragment.nodes) {
+			if (child.type === 'SnippetBlock') {
+				node.metadata.snippets.add(child);
+			}
+		}
+	}
+
+	context.state.analysis.snippet_renderers.set(node, resolved);
+
 	mark_subtree_dynamic(context.path);
 
 	for (const attribute of node.attributes) {
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/snippets.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/snippets.js
new file mode 100644
index 0000000000..124ae0b315
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/snippets.js
@@ -0,0 +1,17 @@
+/** @import { Binding } from '#compiler' */
+
+/**
+ * Returns `true` if a binding unambiguously resolves to a specific
+ * snippet declaration, or is external to the current component
+ * @param {Binding | null} binding
+ */
+export function is_resolved_snippet(binding) {
+	return (
+		!binding ||
+		binding.declaration_kind === 'import' ||
+		binding.kind === 'prop' ||
+		binding.kind === 'rest_prop' ||
+		binding.kind === 'bindable_prop' ||
+		binding?.initial?.type === 'SnippetBlock'
+	);
+}
diff --git a/packages/svelte/src/compiler/phases/types.d.ts b/packages/svelte/src/compiler/phases/types.d.ts
index f001a0c48c..fed5d66b2c 100644
--- a/packages/svelte/src/compiler/phases/types.d.ts
+++ b/packages/svelte/src/compiler/phases/types.d.ts
@@ -37,7 +37,7 @@ export interface ComponentAnalysis extends Analysis {
 	instance: Js;
 	template: Template;
 	/** Used for CSS pruning and scoping */
-	elements: Array<AST.RegularElement | AST.SvelteElement | AST.RenderTag>;
+	elements: Array<AST.RegularElement | AST.SvelteElement>;
 	runes: boolean;
 	exports: Array<{ name: string; alias: string | null }>;
 	/** Whether the component uses `$$props` */
@@ -72,6 +72,17 @@ export interface ComponentAnalysis extends Analysis {
 		keyframes: string[];
 	};
 	source: string;
+	/**
+	 * Every render tag/component, and whether it could be definitively resolved or not
+	 */
+	snippet_renderers: Map<
+		AST.RenderTag | AST.Component | AST.SvelteComponent | AST.SvelteSelf,
+		boolean
+	>;
+	/**
+	 * Every snippet that is declared locally
+	 */
+	snippets: Set<AST.SnippetBlock>;
 }
 
 declare module 'estree' {
diff --git a/packages/svelte/src/compiler/types/template.d.ts b/packages/svelte/src/compiler/types/template.d.ts
index 0be0b25ab4..efce217e82 100644
--- a/packages/svelte/src/compiler/types/template.d.ts
+++ b/packages/svelte/src/compiler/types/template.d.ts
@@ -166,6 +166,9 @@ export namespace AST {
 			dynamic: boolean;
 			args_with_call_expression: Set<number>;
 			path: SvelteNode[];
+			/** The set of locally-defined snippets that this render tag could correspond to,
+			 * used for CSS pruning purposes */
+			snippets: Set<SnippetBlock>;
 		};
 	}
 
@@ -278,6 +281,10 @@ export namespace AST {
 		metadata: {
 			scopes: Record<string, Scope>;
 			dynamic: boolean;
+			/** The set of locally-defined snippets that this component tag could render,
+			 * used for CSS pruning purposes */
+			snippets: Set<SnippetBlock>;
+			path: SvelteNode[];
 		};
 	}
 
@@ -318,6 +325,10 @@ export namespace AST {
 		/** @internal */
 		metadata: {
 			scopes: Record<string, Scope>;
+			/** The set of locally-defined snippets that this component tag could render,
+			 * used for CSS pruning purposes */
+			snippets: Set<SnippetBlock>;
+			path: SvelteNode[];
 		};
 	}
 
@@ -369,6 +380,10 @@ export namespace AST {
 		/** @internal */
 		metadata: {
 			scopes: Record<string, Scope>;
+			/** The set of locally-defined snippets that this component tag could render,
+			 * used for CSS pruning purposes */
+			snippets: Set<SnippetBlock>;
+			path: SvelteNode[];
 		};
 	}
 
@@ -438,6 +453,12 @@ export namespace AST {
 		expression: Identifier;
 		parameters: Pattern[];
 		body: Fragment;
+		/** @internal */
+		metadata: {
+			/** The set of components/render tags that could render this snippet,
+			 * used for CSS pruning */
+			sites: Set<Component | SvelteComponent | SvelteSelf | RenderTag>;
+		};
 	}
 
 	export interface Attribute extends BaseNode {
diff --git a/packages/svelte/tests/css/samples/child-combinator/expected.css b/packages/svelte/tests/css/samples/child-combinator/expected.css
index 4d7a2096ca..3143c231be 100644
--- a/packages/svelte/tests/css/samples/child-combinator/expected.css
+++ b/packages/svelte/tests/css/samples/child-combinator/expected.css
@@ -2,6 +2,6 @@
     background-color: red;
   }
 
-  main.svelte-xyz div > button:where(.svelte-xyz) {
+  main.svelte-xyz div:where(.svelte-xyz) > button:where(.svelte-xyz) {
     background-color: blue;
   }
diff --git a/packages/svelte/tests/css/samples/dynamic-element-tag/expected.css b/packages/svelte/tests/css/samples/dynamic-element-tag/expected.css
index 80f7facd5a..edb81ed12f 100644
--- a/packages/svelte/tests/css/samples/dynamic-element-tag/expected.css
+++ b/packages/svelte/tests/css/samples/dynamic-element-tag/expected.css
@@ -7,7 +7,7 @@
 	h2.svelte-xyz span:where(.svelte-xyz) {
 		color: red;
 	}
-	h2.svelte-xyz > span > b:where(.svelte-xyz) {
+	h2.svelte-xyz > span:where(.svelte-xyz) > b:where(.svelte-xyz) {
 		color: red;
 	}
 	h2.svelte-xyz span:where(.svelte-xyz) b:where(.svelte-xyz) {
diff --git a/packages/svelte/tests/css/samples/general-siblings-combinator-render-tag/expected.css b/packages/svelte/tests/css/samples/general-siblings-combinator-render-tag/expected.css
new file mode 100644
index 0000000000..37cb0b8e1f
--- /dev/null
+++ b/packages/svelte/tests/css/samples/general-siblings-combinator-render-tag/expected.css
@@ -0,0 +1,4 @@
+
+	h1.svelte-xyz ~ p:where(.svelte-xyz) {
+		color: green;
+	}
diff --git a/packages/svelte/tests/css/samples/general-siblings-combinator-render-tag/input.svelte b/packages/svelte/tests/css/samples/general-siblings-combinator-render-tag/input.svelte
new file mode 100644
index 0000000000..5a24653dcf
--- /dev/null
+++ b/packages/svelte/tests/css/samples/general-siblings-combinator-render-tag/input.svelte
@@ -0,0 +1,13 @@
+{#snippet foo()}
+	<p>this should be green</p>
+{/snippet}
+
+<h1>Hello</h1>
+
+{@render foo()}
+
+<style>
+	h1 ~ p {
+		color: green;
+	}
+</style>
diff --git a/packages/svelte/tests/css/samples/general-siblings-combinator-slot/_config.js b/packages/svelte/tests/css/samples/general-siblings-combinator-slot/_config.js
index 6fe2e4ac59..97e470d1c3 100644
--- a/packages/svelte/tests/css/samples/general-siblings-combinator-slot/_config.js
+++ b/packages/svelte/tests/css/samples/general-siblings-combinator-slot/_config.js
@@ -2,12 +2,6 @@ import { test } from '../../test';
 
 export default test({
 	warnings: [
-		{
-			code: 'css_unused_selector',
-			message: 'Unused CSS selector ".a ~ .b"',
-			start: { character: 110, column: 1, line: 10 },
-			end: { character: 117, column: 8, line: 10 }
-		},
 		{
 			code: 'css_unused_selector',
 			message: 'Unused CSS selector ".b ~ .c"',
@@ -17,26 +11,26 @@ export default test({
 		{
 			code: 'css_unused_selector',
 			message: 'Unused CSS selector ".c ~ .f"',
-			start: { character: 164, column: 1, line: 12 },
-			end: { character: 171, column: 8, line: 12 }
+			start: { character: 162, column: 1, line: 12 },
+			end: { character: 169, column: 8, line: 12 }
 		},
 		{
 			code: 'css_unused_selector',
 			message: 'Unused CSS selector ".f ~ .g"',
-			start: { character: 191, column: 1, line: 13 },
-			end: { character: 198, column: 8, line: 13 }
+			start: { character: 187, column: 1, line: 13 },
+			end: { character: 194, column: 8, line: 13 }
 		},
 		{
 			code: 'css_unused_selector',
 			message: 'Unused CSS selector ".b ~ .f"',
-			start: { character: 218, column: 1, line: 14 },
-			end: { character: 225, column: 8, line: 14 }
+			start: { character: 212, column: 1, line: 14 },
+			end: { character: 219, column: 8, line: 14 }
 		},
 		{
 			code: 'css_unused_selector',
 			message: 'Unused CSS selector ".b ~ .g"',
-			start: { character: 245, column: 1, line: 15 },
-			end: { character: 252, column: 8, line: 15 }
+			start: { character: 237, column: 1, line: 15 },
+			end: { character: 244, column: 8, line: 15 }
 		}
 	]
 });
diff --git a/packages/svelte/tests/css/samples/general-siblings-combinator-slot/expected.css b/packages/svelte/tests/css/samples/general-siblings-combinator-slot/expected.css
index 06590583e8..67a19d10c9 100644
--- a/packages/svelte/tests/css/samples/general-siblings-combinator-slot/expected.css
+++ b/packages/svelte/tests/css/samples/general-siblings-combinator-slot/expected.css
@@ -1,10 +1,11 @@
+
 	.d.svelte-xyz ~ .e:where(.svelte-xyz) { color: green; }
 	.a.svelte-xyz ~ .g:where(.svelte-xyz) { color: green; }
+	.a.svelte-xyz ~ .b:where(.svelte-xyz) { color: green; }
 
 	/* no match */
-	/* (unused) .a ~ .b { color: green; }*/
-	/* (unused) .b ~ .c { color: green; }*/
-	/* (unused) .c ~ .f { color: green; }*/
-	/* (unused) .f ~ .g { color: green; }*/
-	/* (unused) .b ~ .f { color: green; }*/
-	/* (unused) .b ~ .g { color: green; }*/
+	/* (unused) .b ~ .c { color: red; }*/
+	/* (unused) .c ~ .f { color: red; }*/
+	/* (unused) .f ~ .g { color: red; }*/
+	/* (unused) .b ~ .f { color: red; }*/
+	/* (unused) .b ~ .g { color: red; }*/
diff --git a/packages/svelte/tests/css/samples/general-siblings-combinator-slot/input.svelte b/packages/svelte/tests/css/samples/general-siblings-combinator-slot/input.svelte
index afb3b5226c..2e2846fa87 100644
--- a/packages/svelte/tests/css/samples/general-siblings-combinator-slot/input.svelte
+++ b/packages/svelte/tests/css/samples/general-siblings-combinator-slot/input.svelte
@@ -5,14 +5,14 @@
 <style>
 	.d ~ .e { color: green; }
 	.a ~ .g { color: green; }
+	.a ~ .b { color: green; }
 
 	/* no match */
-	.a ~ .b { color: green; }
-	.b ~ .c { color: green; }
-	.c ~ .f { color: green; }
-	.f ~ .g { color: green; }
-	.b ~ .f { color: green; }
-	.b ~ .g { color: green; }
+	.b ~ .c { color: red; }
+	.c ~ .f { color: red; }
+	.f ~ .g { color: red; }
+	.b ~ .f { color: red; }
+	.b ~ .g { color: red; }
 </style>
 
 <div class="a"></div>
diff --git a/packages/svelte/tests/css/samples/general-siblings-combinator-star/expected.css b/packages/svelte/tests/css/samples/general-siblings-combinator-star/expected.css
index 7ec653d1be..530213faac 100644
--- a/packages/svelte/tests/css/samples/general-siblings-combinator-star/expected.css
+++ b/packages/svelte/tests/css/samples/general-siblings-combinator-star/expected.css
@@ -1,4 +1,4 @@
-	.match.svelte-xyz > * ~ :where(.svelte-xyz) {
+	.match.svelte-xyz > :where(.svelte-xyz) ~ :where(.svelte-xyz) {
 		margin-left: 4px;
 	}
 	/* (unused) .not-match > * ~ * {
diff --git a/packages/svelte/tests/css/samples/general-siblings-combinator-star/expected.html b/packages/svelte/tests/css/samples/general-siblings-combinator-star/expected.html
index c97af84a65..def6560c20 100644
--- a/packages/svelte/tests/css/samples/general-siblings-combinator-star/expected.html
+++ b/packages/svelte/tests/css/samples/general-siblings-combinator-star/expected.html
@@ -2,6 +2,6 @@
   <div></div>
 </div>
 <div class="match svelte-xyz">
-  <div></div>
+  <div class="svelte-xyz"></div>
   <div class="svelte-xyz"></div>
 </div>
diff --git a/packages/svelte/tests/css/samples/general-siblings-combinator/expected.css b/packages/svelte/tests/css/samples/general-siblings-combinator/expected.css
index ffdd14f5c4..ff9874b9e4 100644
--- a/packages/svelte/tests/css/samples/general-siblings-combinator/expected.css
+++ b/packages/svelte/tests/css/samples/general-siblings-combinator/expected.css
@@ -1,6 +1,6 @@
 	div.svelte-xyz ~ article:where(.svelte-xyz) { color: green; }
 	span.svelte-xyz ~ b:where(.svelte-xyz) { color: green; }
-	div.svelte-xyz span ~ b:where(.svelte-xyz) { color: green; }
+	div.svelte-xyz span:where(.svelte-xyz) ~ b:where(.svelte-xyz) { color: green; }
 	.a.svelte-xyz ~ article:where(.svelte-xyz) { color: green; }
 	div.svelte-xyz ~ .b:where(.svelte-xyz) { color: green; }
 	.a.svelte-xyz ~ .c:where(.svelte-xyz) { color: green; }
diff --git a/packages/svelte/tests/css/samples/has-with-render-tag/_config.js b/packages/svelte/tests/css/samples/has-with-render-tag/_config.js
new file mode 100644
index 0000000000..db6da8c6bd
--- /dev/null
+++ b/packages/svelte/tests/css/samples/has-with-render-tag/_config.js
@@ -0,0 +1,20 @@
+import { test } from '../../test';
+
+export default test({
+	warnings: [
+		{
+			code: 'css_unused_selector',
+			message: 'Unused CSS selector "z:has(+ y)"',
+			start: {
+				line: 23,
+				column: 1,
+				character: 217
+			},
+			end: {
+				line: 23,
+				column: 11,
+				character: 227
+			}
+		}
+	]
+});
diff --git a/packages/svelte/tests/css/samples/has-with-render-tag/expected.css b/packages/svelte/tests/css/samples/has-with-render-tag/expected.css
new file mode 100644
index 0000000000..8efb84f565
--- /dev/null
+++ b/packages/svelte/tests/css/samples/has-with-render-tag/expected.css
@@ -0,0 +1,11 @@
+
+	x.svelte-xyz:has(y:where(.svelte-xyz)) {
+		color: green;
+	}
+	p.svelte-xyz:has(+ y:where(.svelte-xyz)) {
+		color: green;
+	}
+
+	/* (unused) z:has(+ y) {
+		color: red;
+	}*/
diff --git a/packages/svelte/tests/css/samples/has-with-render-tag/input.svelte b/packages/svelte/tests/css/samples/has-with-render-tag/input.svelte
new file mode 100644
index 0000000000..8e54e05d08
--- /dev/null
+++ b/packages/svelte/tests/css/samples/has-with-render-tag/input.svelte
@@ -0,0 +1,26 @@
+{#snippet foo()}
+	<y></y>
+{/snippet}
+
+<x>
+	this should be green
+	{@render foo()}
+</x>
+
+<z>
+	<p>this should be green</p>
+	{@render foo()}
+</z>
+
+<style>
+	x:has(y) {
+		color: green;
+	}
+	p:has(+ y) {
+		color: green;
+	}
+
+	z:has(+ y) {
+		color: red;
+	}
+</style>
diff --git a/packages/svelte/tests/css/samples/siblings-combinator-component-default-snippet/Child.svelte b/packages/svelte/tests/css/samples/siblings-combinator-component-default-snippet/Child.svelte
new file mode 100644
index 0000000000..17d34e7cf6
--- /dev/null
+++ b/packages/svelte/tests/css/samples/siblings-combinator-component-default-snippet/Child.svelte
@@ -0,0 +1,5 @@
+<script>
+	let { children } = $props();
+</script>
+
+{@render children()}
diff --git a/packages/svelte/tests/css/samples/siblings-combinator-component-default-snippet/expected.css b/packages/svelte/tests/css/samples/siblings-combinator-component-default-snippet/expected.css
new file mode 100644
index 0000000000..5e7756a4ea
--- /dev/null
+++ b/packages/svelte/tests/css/samples/siblings-combinator-component-default-snippet/expected.css
@@ -0,0 +1,4 @@
+
+	x.svelte-xyz + y:where(.svelte-xyz) {
+		color: green;
+	}
diff --git a/packages/svelte/tests/css/samples/siblings-combinator-component-default-snippet/input.svelte b/packages/svelte/tests/css/samples/siblings-combinator-component-default-snippet/input.svelte
new file mode 100644
index 0000000000..dff35608ea
--- /dev/null
+++ b/packages/svelte/tests/css/samples/siblings-combinator-component-default-snippet/input.svelte
@@ -0,0 +1,15 @@
+<script>
+	import Child from './Child.svelte';
+</script>
+
+<x></x>
+
+<Child>
+	<y>this should be green</y>
+</Child>
+
+<style>
+	x + y {
+		color: green;
+	}
+</style>
diff --git a/packages/svelte/tests/css/samples/siblings-combinator-component-named-snippet/Child.svelte b/packages/svelte/tests/css/samples/siblings-combinator-component-named-snippet/Child.svelte
new file mode 100644
index 0000000000..1df9f35e50
--- /dev/null
+++ b/packages/svelte/tests/css/samples/siblings-combinator-component-named-snippet/Child.svelte
@@ -0,0 +1,5 @@
+<script>
+	let { foo } = $props();
+</script>
+
+{@render foo()}
diff --git a/packages/svelte/tests/css/samples/siblings-combinator-component-named-snippet/expected.css b/packages/svelte/tests/css/samples/siblings-combinator-component-named-snippet/expected.css
new file mode 100644
index 0000000000..5e7756a4ea
--- /dev/null
+++ b/packages/svelte/tests/css/samples/siblings-combinator-component-named-snippet/expected.css
@@ -0,0 +1,4 @@
+
+	x.svelte-xyz + y:where(.svelte-xyz) {
+		color: green;
+	}
diff --git a/packages/svelte/tests/css/samples/siblings-combinator-component-named-snippet/input.svelte b/packages/svelte/tests/css/samples/siblings-combinator-component-named-snippet/input.svelte
new file mode 100644
index 0000000000..c0ec3bc4db
--- /dev/null
+++ b/packages/svelte/tests/css/samples/siblings-combinator-component-named-snippet/input.svelte
@@ -0,0 +1,17 @@
+<script>
+	import Child from './Child.svelte';
+</script>
+
+<x></x>
+
+<Child>
+	{#snippet foo()}
+		<y>this should be green</y>
+	{/snippet}
+</Child>
+
+<style>
+	x + y {
+		color: green;
+	}
+</style>
diff --git a/packages/svelte/tests/css/samples/siblings-combinator-missing-fallback/expected.css b/packages/svelte/tests/css/samples/siblings-combinator-missing-fallback/expected.css
new file mode 100644
index 0000000000..3e6114b405
--- /dev/null
+++ b/packages/svelte/tests/css/samples/siblings-combinator-missing-fallback/expected.css
@@ -0,0 +1,4 @@
+
+	x.svelte-xyz + z:where(.svelte-xyz) {
+		color: green;
+	}
diff --git a/packages/svelte/tests/css/samples/siblings-combinator-missing-fallback/input.svelte b/packages/svelte/tests/css/samples/siblings-combinator-missing-fallback/input.svelte
new file mode 100644
index 0000000000..df935eecd0
--- /dev/null
+++ b/packages/svelte/tests/css/samples/siblings-combinator-missing-fallback/input.svelte
@@ -0,0 +1,13 @@
+<x></x>
+
+<slot>
+	<y>fallback content</y>
+</slot>
+
+<z>this should be green if the slot fallback is not rendered</z>
+
+<style>
+	x + z {
+		color: green;
+	}
+</style>
diff --git a/packages/svelte/tests/css/samples/siblings-combinator-render-tag/expected.css b/packages/svelte/tests/css/samples/siblings-combinator-render-tag/expected.css
new file mode 100644
index 0000000000..da1c5241a9
--- /dev/null
+++ b/packages/svelte/tests/css/samples/siblings-combinator-render-tag/expected.css
@@ -0,0 +1,4 @@
+
+	h1.svelte-xyz + p:where(.svelte-xyz) {
+		color: green;
+	}
diff --git a/packages/svelte/tests/css/samples/siblings-combinator-render-tag/input.svelte b/packages/svelte/tests/css/samples/siblings-combinator-render-tag/input.svelte
new file mode 100644
index 0000000000..035ee37445
--- /dev/null
+++ b/packages/svelte/tests/css/samples/siblings-combinator-render-tag/input.svelte
@@ -0,0 +1,13 @@
+{#snippet foo()}
+	<p>this should be green</p>
+{/snippet}
+
+<h1>Hello</h1>
+
+{@render foo()}
+
+<style>
+	h1 + p {
+		color: green;
+	}
+</style>
diff --git a/packages/svelte/tests/css/samples/siblings-combinator-slot-named-between-default/Child.svelte b/packages/svelte/tests/css/samples/siblings-combinator-slot-named-between-default/Child.svelte
new file mode 100644
index 0000000000..4fa864ce7a
--- /dev/null
+++ b/packages/svelte/tests/css/samples/siblings-combinator-slot-named-between-default/Child.svelte
@@ -0,0 +1 @@
+<slot />
diff --git a/packages/svelte/tests/css/samples/siblings-combinator-slot-named-between-default/expected.css b/packages/svelte/tests/css/samples/siblings-combinator-slot-named-between-default/expected.css
new file mode 100644
index 0000000000..5300323d85
--- /dev/null
+++ b/packages/svelte/tests/css/samples/siblings-combinator-slot-named-between-default/expected.css
@@ -0,0 +1,4 @@
+
+	.a.svelte-xyz + .c:where(.svelte-xyz) {
+		color: green;
+	}
diff --git a/packages/svelte/tests/css/samples/siblings-combinator-slot-named-between-default/input.svelte b/packages/svelte/tests/css/samples/siblings-combinator-slot-named-between-default/input.svelte
new file mode 100644
index 0000000000..95c6e48952
--- /dev/null
+++ b/packages/svelte/tests/css/samples/siblings-combinator-slot-named-between-default/input.svelte
@@ -0,0 +1,15 @@
+<script>
+	import Child from './Child.svelte';
+</script>
+
+<Child>
+	<div class="a">a</div>
+	<div class="b" slot="wut">b</div>
+	<div class="c">c</div>
+</Child>
+
+<style>
+	.a + .c {
+		color: green;
+	}
+</style>
diff --git a/packages/svelte/tests/css/samples/siblings-combinator-slot/_config.js b/packages/svelte/tests/css/samples/siblings-combinator-slot/_config.js
index d13a8d726b..2786baeff8 100644
--- a/packages/svelte/tests/css/samples/siblings-combinator-slot/_config.js
+++ b/packages/svelte/tests/css/samples/siblings-combinator-slot/_config.js
@@ -2,12 +2,6 @@ import { test } from '../../test';
 
 export default test({
 	warnings: [
-		{
-			code: 'css_unused_selector',
-			message: 'Unused CSS selector ".a + .b"',
-			start: { character: 83, column: 1, line: 9 },
-			end: { character: 90, column: 8, line: 9 }
-		},
 		{
 			code: 'css_unused_selector',
 			message: 'Unused CSS selector ".b + .c"',
@@ -17,8 +11,8 @@ export default test({
 		{
 			code: 'css_unused_selector',
 			message: 'Unused CSS selector ".c + .f"',
-			start: { character: 137, column: 1, line: 11 },
-			end: { character: 144, column: 8, line: 11 }
+			start: { character: 135, column: 1, line: 11 },
+			end: { character: 142, column: 8, line: 11 }
 		}
 	]
 });
diff --git a/packages/svelte/tests/css/samples/siblings-combinator-slot/expected.css b/packages/svelte/tests/css/samples/siblings-combinator-slot/expected.css
index f4c2572bdc..643f6cf13f 100644
--- a/packages/svelte/tests/css/samples/siblings-combinator-slot/expected.css
+++ b/packages/svelte/tests/css/samples/siblings-combinator-slot/expected.css
@@ -1,6 +1,7 @@
+
 	.d.svelte-xyz + .e:where(.svelte-xyz) { color: green; }
+	.a.svelte-xyz + .b:where(.svelte-xyz) { color: green; }
 
 	/* no match */
-	/* (unused) .a + .b { color: green; }*/
-	/* (unused) .b + .c { color: green; }*/
-	/* (unused) .c + .f { color: green; }*/
+	/* (unused) .b + .c { color: red; }*/
+	/* (unused) .c + .f { color: red; }*/
diff --git a/packages/svelte/tests/css/samples/siblings-combinator-slot/input.svelte b/packages/svelte/tests/css/samples/siblings-combinator-slot/input.svelte
index 630bc2fe97..1b543f97b7 100644
--- a/packages/svelte/tests/css/samples/siblings-combinator-slot/input.svelte
+++ b/packages/svelte/tests/css/samples/siblings-combinator-slot/input.svelte
@@ -4,11 +4,11 @@
 
 <style>
 	.d + .e { color: green; }
+	.a + .b { color: green; }
 
 	/* no match */
-	.a + .b { color: green; }
-	.b + .c { color: green; }
-	.c + .f { color: green; }
+	.b + .c { color: red; }
+	.c + .f { color: red; }
 </style>
 
 <div class="a"></div>
diff --git a/packages/svelte/tests/css/samples/siblings-combinator-star/expected.css b/packages/svelte/tests/css/samples/siblings-combinator-star/expected.css
index 1de61b6842..4986c4f715 100644
--- a/packages/svelte/tests/css/samples/siblings-combinator-star/expected.css
+++ b/packages/svelte/tests/css/samples/siblings-combinator-star/expected.css
@@ -1,4 +1,4 @@
-	.match.svelte-xyz > * + :where(.svelte-xyz) {
+	.match.svelte-xyz > :where(.svelte-xyz) + :where(.svelte-xyz) {
 		margin-left: 4px;
 	}
 	/* (unused) .not-match > * + * {
diff --git a/packages/svelte/tests/css/samples/siblings-combinator-star/expected.html b/packages/svelte/tests/css/samples/siblings-combinator-star/expected.html
index c97af84a65..def6560c20 100644
--- a/packages/svelte/tests/css/samples/siblings-combinator-star/expected.html
+++ b/packages/svelte/tests/css/samples/siblings-combinator-star/expected.html
@@ -2,6 +2,6 @@
   <div></div>
 </div>
 <div class="match svelte-xyz">
-  <div></div>
+  <div class="svelte-xyz"></div>
   <div class="svelte-xyz"></div>
 </div>
diff --git a/packages/svelte/tests/css/samples/siblings-combinator/expected.css b/packages/svelte/tests/css/samples/siblings-combinator/expected.css
index 5622a66a30..97a7a46897 100644
--- a/packages/svelte/tests/css/samples/siblings-combinator/expected.css
+++ b/packages/svelte/tests/css/samples/siblings-combinator/expected.css
@@ -16,7 +16,7 @@
 	span.svelte-xyz + b:where(.svelte-xyz) {
 		color: green;
 	}
-	div.svelte-xyz span + b:where(.svelte-xyz) {
+	div.svelte-xyz span:where(.svelte-xyz) + b:where(.svelte-xyz) {
 		color: green;
 	}
 	.a.svelte-xyz + article:where(.svelte-xyz) {
diff --git a/packages/svelte/tests/css/samples/snippets/_config.js b/packages/svelte/tests/css/samples/snippets/_config.js
index f8b3b4ca39..8e3135260b 100644
--- a/packages/svelte/tests/css/samples/snippets/_config.js
+++ b/packages/svelte/tests/css/samples/snippets/_config.js
@@ -2,18 +2,32 @@ import { test } from '../../test';
 
 export default test({
 	warnings: [
+		{
+			code: 'css_unused_selector',
+			message: 'Unused CSS selector "p .foo"',
+			start: {
+				line: 28,
+				column: 1,
+				character: 356
+			},
+			end: {
+				line: 28,
+				column: 7,
+				character: 362
+			}
+		},
 		{
 			code: 'css_unused_selector',
 			message: 'Unused CSS selector "span div"',
 			start: {
 				line: 31,
 				column: 1,
-				character: 461
+				character: 383
 			},
 			end: {
 				line: 31,
 				column: 9,
-				character: 469
+				character: 391
 			}
 		}
 	]
diff --git a/packages/svelte/tests/css/samples/snippets/expected.css b/packages/svelte/tests/css/samples/snippets/expected.css
index 85ae5b4c25..62fadcd9e2 100644
--- a/packages/svelte/tests/css/samples/snippets/expected.css
+++ b/packages/svelte/tests/css/samples/snippets/expected.css
@@ -11,9 +11,9 @@
 	p.svelte-xyz span:where(.svelte-xyz) {
 		color: green;
 	}
-	p.svelte-xyz .foo:where(.svelte-xyz) {
-		color: purple; /* doesn't match, but our static analysis doesn't handle this currently */
-	}
+	/* (unused) p .foo {
+		color: red;
+	}*/
 	/* (unused) span div {
 		color: red;
 	}*/
diff --git a/packages/svelte/tests/css/samples/snippets/input.svelte b/packages/svelte/tests/css/samples/snippets/input.svelte
index b657e7e2bb..5dbbad0152 100644
--- a/packages/svelte/tests/css/samples/snippets/input.svelte
+++ b/packages/svelte/tests/css/samples/snippets/input.svelte
@@ -26,9 +26,9 @@
 		color: green;
 	}
 	p .foo {
-		color: purple; /* doesn't match, but our static analysis doesn't handle this currently */
+		color: red;
 	}
 	span div {
 		color: red;
 	}
-</style>
\ No newline at end of file
+</style>

From d62e7bdbe1a70381009e24bf858744b9227469fb Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Fri, 29 Nov 2024 15:09:05 +0100
Subject: [PATCH 117/159] fix: ignore text and expressions outside the template
 when validating HTML (#14468)

fixes #14466

The logic introduced in #14395 was flawed - not every text or expression outside the template is the child of an attribute. This turns it around: We know that every child of a fragment is inside the template, so we ignore all text/expression tags that are not child of a fragment
---
 .changeset/brave-keys-rescue.md                    |  5 +++++
 .../phases/2-analyze/visitors/ExpressionTag.js     |  4 ++--
 .../src/compiler/phases/2-analyze/visitors/Text.js |  4 ++--
 .../samples/invalid-node-placement-8/errors.json   | 14 ++++++++++++++
 .../samples/invalid-node-placement-8/input.svelte  |  4 ++++
 5 files changed, 27 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/brave-keys-rescue.md
 create mode 100644 packages/svelte/tests/validator/samples/invalid-node-placement-8/errors.json
 create mode 100644 packages/svelte/tests/validator/samples/invalid-node-placement-8/input.svelte

diff --git a/.changeset/brave-keys-rescue.md b/.changeset/brave-keys-rescue.md
new file mode 100644
index 0000000000..21ab4888be
--- /dev/null
+++ b/.changeset/brave-keys-rescue.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ignore text and expressions outside the template when validating HTML
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/ExpressionTag.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/ExpressionTag.js
index 7e21d5ca14..e0d2710a08 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/ExpressionTag.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/ExpressionTag.js
@@ -9,9 +9,9 @@ import { mark_subtree_dynamic } from './shared/fragment.js';
  * @param {Context} context
  */
 export function ExpressionTag(node, context) {
-	const in_attribute = context.path.at(-1)?.type === 'Attribute';
+	const in_template = context.path.at(-1)?.type === 'Fragment';
 
-	if (!in_attribute && context.state.parent_element) {
+	if (in_template && context.state.parent_element) {
 		if (!is_tag_valid_with_parent('#text', context.state.parent_element)) {
 			e.node_invalid_placement(node, '`{expression}`', context.state.parent_element);
 		}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/Text.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/Text.js
index 2eca7d43e9..b60030f638 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/Text.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/Text.js
@@ -9,9 +9,9 @@ import * as e from '../../../errors.js';
  * @param {Context} context
  */
 export function Text(node, context) {
-	const in_attribute = context.path.at(-1)?.type === 'Attribute';
+	const in_template = context.path.at(-1)?.type === 'Fragment';
 
-	if (!in_attribute && context.state.parent_element && regex_not_whitespace.test(node.data)) {
+	if (in_template && context.state.parent_element && regex_not_whitespace.test(node.data)) {
 		if (!is_tag_valid_with_parent('#text', context.state.parent_element)) {
 			e.node_invalid_placement(node, 'Text node', context.state.parent_element);
 		}
diff --git a/packages/svelte/tests/validator/samples/invalid-node-placement-8/errors.json b/packages/svelte/tests/validator/samples/invalid-node-placement-8/errors.json
new file mode 100644
index 0000000000..1127a76336
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/invalid-node-placement-8/errors.json
@@ -0,0 +1,14 @@
+[
+	{
+		"code": "node_invalid_placement",
+		"message": "Text node is invalid inside `<tbody>`",
+		"start": {
+			"line": 3,
+			"column": 8
+		},
+		"end": {
+			"line": 3,
+			"column": 13
+		}
+	}
+]
diff --git a/packages/svelte/tests/validator/samples/invalid-node-placement-8/input.svelte b/packages/svelte/tests/validator/samples/invalid-node-placement-8/input.svelte
new file mode 100644
index 0000000000..05905594f5
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/invalid-node-placement-8/input.svelte
@@ -0,0 +1,4 @@
+
+<table attr={value} style:x={y} class="I'm not {counted} as text in the table">
+	<tbody>I am {bad}</tbody>
+</table>

From ca3690f7df8c42b36c02b27a4da066fe2ac8ebd2 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Fri, 29 Nov 2024 10:33:05 -0500
Subject: [PATCH 118/159] Version Packages (#14464)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/brave-keys-rescue.md  | 5 -----
 .changeset/twelve-squids-wink.md | 5 -----
 packages/svelte/CHANGELOG.md     | 8 ++++++++
 packages/svelte/package.json     | 2 +-
 packages/svelte/src/version.js   | 2 +-
 5 files changed, 10 insertions(+), 12 deletions(-)
 delete mode 100644 .changeset/brave-keys-rescue.md
 delete mode 100644 .changeset/twelve-squids-wink.md

diff --git a/.changeset/brave-keys-rescue.md b/.changeset/brave-keys-rescue.md
deleted file mode 100644
index 21ab4888be..0000000000
--- a/.changeset/brave-keys-rescue.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: ignore text and expressions outside the template when validating HTML
diff --git a/.changeset/twelve-squids-wink.md b/.changeset/twelve-squids-wink.md
deleted file mode 100644
index 0fde3dfb86..0000000000
--- a/.changeset/twelve-squids-wink.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: better account for render tags when pruning CSS
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index f1694a58fb..0c75e07a32 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,13 @@
 # svelte
 
+## 5.2.11
+
+### Patch Changes
+
+- fix: ignore text and expressions outside the template when validating HTML ([#14468](https://github.com/sveltejs/svelte/pull/14468))
+
+- fix: better account for render tags when pruning CSS ([#14456](https://github.com/sveltejs/svelte/pull/14456))
+
 ## 5.2.10
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index cf679a0e34..4a0747041a 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.2.10",
+  "version": "5.2.11",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index ecc9de1a4a..517a76e74c 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.2.10';
+export const VERSION = '5.2.11';
 export const PUBLIC_VERSION = '5';

From a60e837e44fd41d4e68f9a0d59b9d09590908465 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Fri, 29 Nov 2024 16:37:04 -0500
Subject: [PATCH 119/159] fix: prevent infinite loops when pruning CSS (#14474)

fixes #14472

---------

Co-authored-by: Simon Holthausen <simon.holthausen@vercel.com>
---
 .changeset/itchy-timers-relax.md              |  5 ++++
 .../phases/2-analyze/css/css-prune.js         | 29 +++++++++++++++++--
 .../2-analyze/visitors/shared/component.js    |  2 +-
 .../css/samples/render-tag-loop/_config.js    | 20 +++++++++++++
 .../css/samples/render-tag-loop/expected.css  | 10 +++++++
 .../css/samples/render-tag-loop/input.svelte  | 25 ++++++++++++++++
 6 files changed, 88 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/itchy-timers-relax.md
 create mode 100644 packages/svelte/tests/css/samples/render-tag-loop/_config.js
 create mode 100644 packages/svelte/tests/css/samples/render-tag-loop/expected.css
 create mode 100644 packages/svelte/tests/css/samples/render-tag-loop/input.svelte

diff --git a/.changeset/itchy-timers-relax.md b/.changeset/itchy-timers-relax.md
new file mode 100644
index 0000000000..5d0913ba62
--- /dev/null
+++ b/.changeset/itchy-timers-relax.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: prevent infinite loops when pruning CSS
diff --git a/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js b/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js
index 0c38114a30..83c50c73d0 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js
@@ -43,6 +43,12 @@ const nesting_selector = {
 	}
 };
 
+/**
+ * Snippets encountered already (avoids infinite loops)
+ * @type {Set<Compiler.AST.SnippetBlock>}
+ */
+const seen = new Set();
+
 /**
  *
  * @param {Compiler.Css.StyleSheet} stylesheet
@@ -60,6 +66,8 @@ export function prune(stylesheet, element) {
 		ComplexSelector(node) {
 			const selectors = get_relative_selectors(node);
 
+			seen.clear();
+
 			if (
 				apply_selector(selectors, /** @type {Compiler.Css.Rule} */ (node.metadata.rule), element)
 			) {
@@ -193,6 +201,9 @@ function apply_combinator(relative_selector, parent_selectors, rule, node) {
 				const parent = path[i];
 
 				if (parent.type === 'SnippetBlock') {
+					if (seen.has(parent)) return true;
+					seen.add(parent);
+
 					for (const site of parent.metadata.sites) {
 						if (apply_combinator(relative_selector, parent_selectors, rule, site)) {
 							return true;
@@ -335,6 +346,8 @@ function relative_selector_might_apply_to_node(relative_selector, rule, element)
 			descendant_elements.push(element);
 		}
 
+		const seen = new Set();
+
 		/**
 		 * @param {Compiler.SvelteNode} node
 		 * @param {{ is_child: boolean }} state
@@ -355,6 +368,9 @@ function relative_selector_might_apply_to_node(relative_selector, rule, element)
 						}
 					} else if (node.type === 'RenderTag') {
 						for (const snippet of node.metadata.snippets) {
+							if (seen.has(snippet)) continue;
+
+							seen.add(snippet);
 							walk_children(snippet.body, context.state);
 						}
 					} else {
@@ -618,6 +634,8 @@ function get_following_sibling_elements(element, include_self) {
 	// ...then walk them, starting from the node after the one
 	// containing the element in question
 
+	const seen = new Set();
+
 	/** @param {Compiler.SvelteNode} node */
 	function get_siblings(node) {
 		walk(node, null, {
@@ -629,6 +647,9 @@ function get_following_sibling_elements(element, include_self) {
 			},
 			RenderTag(node) {
 				for (const snippet of node.metadata.snippets) {
+					if (seen.has(snippet)) continue;
+
+					seen.add(snippet);
 					get_siblings(snippet.body);
 				}
 			}
@@ -804,9 +825,10 @@ function get_element_parent(node) {
 /**
  * @param {Compiler.AST.RegularElement | Compiler.AST.SvelteElement | Compiler.AST.RenderTag | Compiler.AST.Component | Compiler.AST.SvelteComponent | Compiler.AST.SvelteSelf} node
  * @param {boolean} adjacent_only
+ * @param {Set<Compiler.AST.SnippetBlock>} seen
  * @returns {Map<Compiler.AST.RegularElement | Compiler.AST.SvelteElement | Compiler.AST.SlotElement | Compiler.AST.RenderTag, NodeExistsValue>}
  */
-function get_possible_element_siblings(node, adjacent_only) {
+function get_possible_element_siblings(node, adjacent_only, seen = new Set()) {
 	/** @type {Map<Compiler.AST.RegularElement | Compiler.AST.SvelteElement | Compiler.AST.SlotElement | Compiler.AST.RenderTag, NodeExistsValue>} */
 	const result = new Map();
 	const path = node.metadata.path;
@@ -865,8 +887,11 @@ function get_possible_element_siblings(node, adjacent_only) {
 		}
 
 		if (current.type === 'SnippetBlock') {
+			if (seen.has(current)) break;
+			seen.add(current);
+
 			for (const site of current.metadata.sites) {
-				const siblings = get_possible_element_siblings(site, adjacent_only);
+				const siblings = get_possible_element_siblings(site, adjacent_only, seen);
 				add_to_map(siblings, result);
 
 				if (adjacent_only && current.metadata.sites.size === 1 && has_definite_elements(siblings)) {
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/component.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/component.js
index 84a7e2f130..04bf3d2ff3 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/component.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/component.js
@@ -51,7 +51,7 @@ export function visit_component(node, context) {
 			if (binding?.initial?.type === 'SnippetBlock') {
 				node.metadata.snippets.add(binding.initial);
 			}
-		} else {
+		} else if (expression.type !== 'Literal') {
 			resolved = false;
 		}
 	}
diff --git a/packages/svelte/tests/css/samples/render-tag-loop/_config.js b/packages/svelte/tests/css/samples/render-tag-loop/_config.js
new file mode 100644
index 0000000000..f623b92cc3
--- /dev/null
+++ b/packages/svelte/tests/css/samples/render-tag-loop/_config.js
@@ -0,0 +1,20 @@
+import { test } from '../../test';
+
+export default test({
+	warnings: [
+		{
+			code: 'css_unused_selector',
+			message: 'Unused CSS selector "div + div"',
+			start: {
+				line: 19,
+				column: 1,
+				character: 185
+			},
+			end: {
+				line: 19,
+				column: 10,
+				character: 194
+			}
+		}
+	]
+});
diff --git a/packages/svelte/tests/css/samples/render-tag-loop/expected.css b/packages/svelte/tests/css/samples/render-tag-loop/expected.css
new file mode 100644
index 0000000000..1f05ddb41c
--- /dev/null
+++ b/packages/svelte/tests/css/samples/render-tag-loop/expected.css
@@ -0,0 +1,10 @@
+
+	div div.svelte-xyz {
+		color: green;
+	}
+	/* (unused) div + div {
+		color: red; /* this is marked as unused, but only because we've written an infinite loop - worth fixing? *\/
+	}*/
+	div.svelte-xyz:has(div:where(.svelte-xyz)) {
+		color: green;
+	}
diff --git a/packages/svelte/tests/css/samples/render-tag-loop/input.svelte b/packages/svelte/tests/css/samples/render-tag-loop/input.svelte
new file mode 100644
index 0000000000..ade8df5744
--- /dev/null
+++ b/packages/svelte/tests/css/samples/render-tag-loop/input.svelte
@@ -0,0 +1,25 @@
+{#snippet a()}
+	{@render b()}
+	<div>
+		{@render b()}
+	</div>
+{/snippet}
+
+{#snippet b()}
+	{@render a()}
+	<div>
+		{@render a()}
+	</div>
+{/snippet}
+
+<style>
+	div div {
+		color: green;
+	}
+	div + div {
+		color: red; /* this is marked as unused, but only because we've written an infinite loop - worth fixing? */
+	}
+	div:has(div) {
+		color: green;
+	}
+</style>

From 00aaad16b2601ce3c94735dc4c3633107268b163 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 30 Nov 2024 10:17:04 -0500
Subject: [PATCH 120/159] fix: generate correct code when encountering object
 expression statement (#14480)

* bump esrap

* changeset
---
 .changeset/sixty-kings-learn.md     |  5 +++++
 packages/svelte/package.json        |  2 +-
 pnpm-lock.yaml                      | 14 +++++++-------
 sites/svelte-5-preview/package.json |  2 +-
 4 files changed, 14 insertions(+), 9 deletions(-)
 create mode 100644 .changeset/sixty-kings-learn.md

diff --git a/.changeset/sixty-kings-learn.md b/.changeset/sixty-kings-learn.md
new file mode 100644
index 0000000000..927e21fa78
--- /dev/null
+++ b/.changeset/sixty-kings-learn.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: generate correct code when encountering object expression statement
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 4a0747041a..6b3970c7f9 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -143,7 +143,7 @@
     "aria-query": "^5.3.1",
     "axobject-query": "^4.1.0",
     "esm-env": "^1.2.0",
-    "esrap": "^1.2.2",
+    "esrap": "^1.2.3",
     "is-reference": "^3.0.3",
     "locate-character": "^3.0.0",
     "magic-string": "^0.30.11",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2556f0c100..9609d3e575 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -84,8 +84,8 @@ importers:
         specifier: ^1.2.0
         version: 1.2.0
       esrap:
-        specifier: ^1.2.2
-        version: 1.2.2
+        specifier: ^1.2.3
+        version: 1.2.3
       is-reference:
         specifier: ^3.0.3
         version: 3.0.3
@@ -260,8 +260,8 @@ importers:
         specifier: ^1.0.0
         version: 1.0.11(@sveltejs/kit@2.8.3(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@packages+svelte)(vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)(vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)
       esrap:
-        specifier: ^1.2.2
-        version: 1.2.2
+        specifier: ^1.2.3
+        version: 1.2.3
       publint:
         specifier: ^0.2.7
         version: 0.2.7
@@ -1462,8 +1462,8 @@ packages:
     resolution: {integrity: sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==}
     engines: {node: '>=0.10'}
 
-  esrap@1.2.2:
-    resolution: {integrity: sha512-F2pSJklxx1BlQIQgooczXCPHmcWpn6EsP5oo73LQfonG9fIlIENQ8vMmfGXeojP9MrkzUNAfyU5vdFlR9shHAw==}
+  esrap@1.2.3:
+    resolution: {integrity: sha512-ZlQmCCK+n7SGoqo7DnfKaP1sJZa49P01/dXzmjCASSo04p72w8EksT2NMK8CEX8DhKsfJXANioIw8VyHNsBfvQ==}
 
   esrecurse@4.3.0:
     resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
@@ -4214,7 +4214,7 @@ snapshots:
     dependencies:
       estraverse: 5.3.0
 
-  esrap@1.2.2:
+  esrap@1.2.3:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.0
       '@types/estree': 1.0.6
diff --git a/sites/svelte-5-preview/package.json b/sites/svelte-5-preview/package.json
index db4dd6d417..356a57c3f6 100644
--- a/sites/svelte-5-preview/package.json
+++ b/sites/svelte-5-preview/package.json
@@ -19,7 +19,7 @@
     "@sveltejs/site-kit": "6.0.0-next.64",
     "@sveltejs/vite-plugin-svelte": "^4.0.0-next.6",
     "@vercel/speed-insights": "^1.0.0",
-    "esrap": "^1.2.2",
+    "esrap": "^1.2.3",
     "marked": "^9.0.0",
     "publint": "^0.2.7",
     "shiki": "^0.14.7",

From 10a772972697d6b50a1de7b36558e8a7c7ed56ce Mon Sep 17 00:00:00 2001
From: Ben McCann <322311+benmccann@users.noreply.github.com>
Date: Sat, 30 Nov 2024 07:18:00 -0800
Subject: [PATCH 121/159] chore: bump jsdom to 25.0.1 (#14473)

---
 package.json   |  2 +-
 pnpm-lock.yaml | 98 +++++++++++++++++++-------------------------------
 2 files changed, 38 insertions(+), 62 deletions(-)

diff --git a/package.json b/package.json
index bcd5962c75..57dc4cdebe 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,7 @@
     "@vitest/coverage-v8": "^2.0.5",
     "eslint": "^9.9.1",
     "eslint-plugin-lube": "^0.4.3",
-    "jsdom": "25.0.0",
+    "jsdom": "25.0.1",
     "playwright": "^1.46.1",
     "prettier": "^3.2.4",
     "prettier-plugin-svelte": "^3.1.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9609d3e575..bc431a4096 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -22,7 +22,7 @@ importers:
         version: 20.12.7
       '@vitest/coverage-v8':
         specifier: ^2.0.5
-        version: 2.0.5(vitest@2.0.5(@types/node@20.12.7)(jsdom@25.0.0)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))
+        version: 2.0.5(vitest@2.0.5(@types/node@20.12.7)(jsdom@25.0.1)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))
       eslint:
         specifier: ^9.9.1
         version: 9.9.1
@@ -30,8 +30,8 @@ importers:
         specifier: ^0.4.3
         version: 0.4.3
       jsdom:
-        specifier: 25.0.0
-        version: 25.0.0
+        specifier: 25.0.1
+        version: 25.0.1
       playwright:
         specifier: ^1.46.1
         version: 1.46.1
@@ -55,7 +55,7 @@ importers:
         version: 1.2.5
       vitest:
         specifier: ^2.0.5
-        version: 2.0.5(@types/node@20.12.7)(jsdom@25.0.0)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)
+        version: 2.0.5(@types/node@20.12.7)(jsdom@25.0.1)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)
 
   packages/svelte:
     dependencies:
@@ -143,7 +143,7 @@ importers:
         version: 5.5.4
       vitest:
         specifier: ^2.0.5
-        version: 2.0.5(@types/node@20.12.7)(jsdom@25.0.0)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)
+        version: 2.0.5(@types/node@20.12.7)(jsdom@25.0.1)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)
 
   playgrounds/sandbox:
     devDependencies:
@@ -1236,7 +1236,7 @@ packages:
     resolution: {integrity: sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==}
 
   concat-map@0.0.1:
-    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
+    resolution: {integrity: sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=}
 
   console-control-strings@1.1.0:
     resolution: {integrity: sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==}
@@ -1260,8 +1260,8 @@ packages:
     engines: {node: '>=4'}
     hasBin: true
 
-  cssstyle@4.0.1:
-    resolution: {integrity: sha512-8ZYiJ3A/3OkDd093CBT/0UKDWry7ak4BdPTFP2+QEP7cmhouyq/Up709ASSj2cK02BbZiMgk7kYjZNS4QP5qrQ==}
+  cssstyle@4.1.0:
+    resolution: {integrity: sha512-h66W1URKpBS5YMI/V8PyXvTMFT8SupJ1IzoIV8IeBC/ji8WVmrO8dGlTi+2dh6whmdk6BiKJLD/ZBkhWbcg6nA==}
     engines: {node: '>=18'}
 
   csstype@3.1.3:
@@ -1817,8 +1817,8 @@ packages:
     resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
     hasBin: true
 
-  jsdom@25.0.0:
-    resolution: {integrity: sha512-OhoFVT59T7aEq75TVw9xxEfkXgacpqAhQaYgP9y/fDqWQCMB/b1H66RfmPm/MaeaAIU9nDwMOVTlPN51+ao6CQ==}
+  jsdom@25.0.1:
+    resolution: {integrity: sha512-8i7LzZj7BF8uplX+ZyOlIz86V6TAsSs+np6m1kpW9u0JWi4z/1t+FzcK1aek+ybTnAC4KhBL4uXCNT0wcUIeCw==}
     engines: {node: '>=18'}
     peerDependencies:
       canvas: ^2.11.2
@@ -2281,9 +2281,6 @@ packages:
   pseudomap@1.0.2:
     resolution: {integrity: sha512-b/YwNhb8lk1Zz2+bXXpS/LK9OisiZZ1SNsSLxN1x2OXVEhW2Ckr/7mWE5vrC1ZTiJlD9g19jWszTmJsB+oEpFQ==}
 
-  psl@1.9.0:
-    resolution: {integrity: sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==}
-
   publint@0.2.7:
     resolution: {integrity: sha512-tLU4ee3110BxWfAmCZggJmCUnYWgPTr0QLnx08sqpLYa8JHRiOudd+CgzdpfU5x5eOaW2WMkpmOrFshRFYK7Mw==}
     engines: {node: '>=16'}
@@ -2293,9 +2290,6 @@ packages:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
 
-  querystringify@2.2.0:
-    resolution: {integrity: sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==}
-
   queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
@@ -2321,9 +2315,6 @@ packages:
     resolution: {integrity: sha512-RSYAtP31mvYLkAHrOlh25pCNQ5hWnT106VukGaaFfuJrZFkGRX5GhUAdPqpSDXxOhA2c4akmRuplv1mRqnBn6Q==}
     engines: {node: '>=8'}
 
-  requires-port@1.0.0:
-    resolution: {integrity: sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==}
-
   resolve-from@4.0.0:
     resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
     engines: {node: '>=4'}
@@ -2357,9 +2348,6 @@ packages:
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
 
-  rrweb-cssom@0.6.0:
-    resolution: {integrity: sha512-APM0Gt1KoXBz0iIkkdB/kfvGOwC4UuJFeG/c+yV7wSc7q96cG/kJ0HiYCnzivD9SB53cLV1MlHFNfOuPaadYSw==}
-
   rrweb-cssom@0.7.1:
     resolution: {integrity: sha512-TrEMa7JGdVm0UThDJSx7ddw5nVm3UJS9o9CCIZ72B1vSyEZoziDqBYP3XIoi/12lKrJR8rE3jeFHMok2F/Mnsg==}
 
@@ -2601,6 +2589,13 @@ packages:
     resolution: {integrity: sha512-q5nmENpTHgiPVd1cJDDc9cVoYN5x4vCvwT3FMilvKPKneCBZAxn2YWQjDF0UMcE9k0Cay1gBiDfTMU0g+mPMQA==}
     engines: {node: '>=14.0.0'}
 
+  tldts-core@6.1.64:
+    resolution: {integrity: sha512-uqnl8vGV16KsyflHOzqrYjjArjfXaU6rMPXYy2/ZWoRKCkXtghgB4VwTDXUG+t0OTGeSewNAG31/x1gCTfLt+Q==}
+
+  tldts@6.1.64:
+    resolution: {integrity: sha512-ph4AE5BXWIOsSy9stpoeo7bYe/Cy7VfpciIH4RhVZUPItCJmhqWCN0EVzxd8BOHiyNb42vuJc6NWTjJkg91Tuw==}
+    hasBin: true
+
   tmp@0.0.33:
     resolution: {integrity: sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==}
     engines: {node: '>=0.6.0'}
@@ -2617,9 +2612,9 @@ packages:
     resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==}
     engines: {node: '>=6'}
 
-  tough-cookie@4.1.4:
-    resolution: {integrity: sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==}
-    engines: {node: '>=6'}
+  tough-cookie@5.0.0:
+    resolution: {integrity: sha512-FRKsF7cz96xIIeMZ82ehjC3xW2E+O2+v11udrDYewUbszngYhsGa8z6YUMMzO9QJZzzyd0nGGXnML/TReX6W8Q==}
+    engines: {node: '>=16'}
 
   tr46@0.0.3:
     resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
@@ -2663,10 +2658,6 @@ packages:
     resolution: {integrity: sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==}
     engines: {node: '>= 4.0.0'}
 
-  universalify@0.2.0:
-    resolution: {integrity: sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==}
-    engines: {node: '>= 4.0.0'}
-
   universalify@2.0.1:
     resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==}
     engines: {node: '>= 10.0.0'}
@@ -2674,9 +2665,6 @@ packages:
   uri-js@4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
 
-  url-parse@1.5.10:
-    resolution: {integrity: sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==}
-
   util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
@@ -3728,7 +3716,7 @@ snapshots:
       '@sveltejs/kit': 2.8.3(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@packages+svelte)(vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)(vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))
       svelte: link:packages/svelte
 
-  '@vitest/coverage-v8@2.0.5(vitest@2.0.5(@types/node@20.12.7)(jsdom@25.0.0)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))':
+  '@vitest/coverage-v8@2.0.5(vitest@2.0.5(@types/node@20.12.7)(jsdom@25.0.1)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))':
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@bcoe/v8-coverage': 0.2.3
@@ -3742,7 +3730,7 @@ snapshots:
       std-env: 3.7.0
       test-exclude: 7.0.1
       tinyrainbow: 1.2.0
-      vitest: 2.0.5(@types/node@20.12.7)(jsdom@25.0.0)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)
+      vitest: 2.0.5(@types/node@20.12.7)(jsdom@25.0.1)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)
     transitivePeerDependencies:
       - supports-color
 
@@ -3976,9 +3964,9 @@ snapshots:
 
   cssesc@3.0.0: {}
 
-  cssstyle@4.0.1:
+  cssstyle@4.1.0:
     dependencies:
-      rrweb-cssom: 0.6.0
+      rrweb-cssom: 0.7.1
 
   csstype@3.1.3: {}
 
@@ -4582,9 +4570,9 @@ snapshots:
     dependencies:
       argparse: 2.0.1
 
-  jsdom@25.0.0:
+  jsdom@25.0.1:
     dependencies:
-      cssstyle: 4.0.1
+      cssstyle: 4.1.0
       data-urls: 5.0.0
       decimal.js: 10.4.3
       form-data: 4.0.0
@@ -4597,7 +4585,7 @@ snapshots:
       rrweb-cssom: 0.7.1
       saxes: 6.0.0
       symbol-tree: 3.2.4
-      tough-cookie: 4.1.4
+      tough-cookie: 5.0.0
       w3c-xmlserializer: 5.0.0
       webidl-conversions: 7.0.0
       whatwg-encoding: 3.1.1
@@ -4975,8 +4963,6 @@ snapshots:
 
   pseudomap@1.0.2: {}
 
-  psl@1.9.0: {}
-
   publint@0.2.7:
     dependencies:
       npm-packlist: 5.1.3
@@ -4985,8 +4971,6 @@ snapshots:
 
   punycode@2.3.1: {}
 
-  querystringify@2.2.0: {}
-
   queue-microtask@1.2.3: {}
 
   randombytes@2.1.0:
@@ -5014,8 +4998,6 @@ snapshots:
 
   regexparam@3.0.0: {}
 
-  requires-port@1.0.0: {}
-
   resolve-from@4.0.0: {}
 
   resolve-from@5.0.0: {}
@@ -5058,8 +5040,6 @@ snapshots:
       '@rollup/rollup-win32-x64-msvc': 4.22.4
       fsevents: 2.3.3
 
-  rrweb-cssom@0.6.0: {}
-
   rrweb-cssom@0.7.1: {}
 
   run-applescript@7.0.0: {}
@@ -5289,6 +5269,12 @@ snapshots:
 
   tinyspy@3.0.0: {}
 
+  tldts-core@6.1.64: {}
+
+  tldts@6.1.64:
+    dependencies:
+      tldts-core: 6.1.64
+
   tmp@0.0.33:
     dependencies:
       os-tmpdir: 1.0.2
@@ -5301,12 +5287,9 @@ snapshots:
 
   totalist@3.0.1: {}
 
-  tough-cookie@4.1.4:
+  tough-cookie@5.0.0:
     dependencies:
-      psl: 1.9.0
-      punycode: 2.3.1
-      universalify: 0.2.0
-      url-parse: 1.5.10
+      tldts: 6.1.64
 
   tr46@0.0.3: {}
 
@@ -5343,19 +5326,12 @@ snapshots:
 
   universalify@0.1.2: {}
 
-  universalify@0.2.0: {}
-
   universalify@2.0.1: {}
 
   uri-js@4.4.1:
     dependencies:
       punycode: 2.3.1
 
-  url-parse@1.5.10:
-    dependencies:
-      querystringify: 2.2.0
-      requires-port: 1.0.0
-
   util-deprecate@1.0.2: {}
 
   v8-natives@1.2.5: {}
@@ -5410,7 +5386,7 @@ snapshots:
     optionalDependencies:
       vite: 5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)
 
-  vitest@2.0.5(@types/node@20.12.7)(jsdom@25.0.0)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0):
+  vitest@2.0.5(@types/node@20.12.7)(jsdom@25.0.1)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0):
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@vitest/expect': 2.0.5
@@ -5433,7 +5409,7 @@ snapshots:
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@types/node': 20.12.7
-      jsdom: 25.0.0
+      jsdom: 25.0.1
     transitivePeerDependencies:
       - less
       - lightningcss

From 4c884312287d367d8c3c33659ba20ad74b1d9e62 Mon Sep 17 00:00:00 2001
From: Ben McCann <322311+benmccann@users.noreply.github.com>
Date: Sat, 30 Nov 2024 07:42:51 -0800
Subject: [PATCH 122/159] fix: upgrade to esm-env 1.2.1 to fix issues with
 non-Vite setups (#14470)

* fix: upgrade to esm-env 1.2.1 to fix issues with non-Vite setups

* fix (albeit with annoying warnings)

* bundle with conditions to silence noise

* production is probably better

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/gentle-bulldogs-heal.md            |  5 +++++
 packages/svelte/package.json                  |  2 +-
 packages/svelte/tests/runtime-browser/test.ts |  8 ++++++--
 pnpm-lock.yaml                                | 16 ++++++++--------
 4 files changed, 20 insertions(+), 11 deletions(-)
 create mode 100644 .changeset/gentle-bulldogs-heal.md

diff --git a/.changeset/gentle-bulldogs-heal.md b/.changeset/gentle-bulldogs-heal.md
new file mode 100644
index 0000000000..32c1d6714c
--- /dev/null
+++ b/.changeset/gentle-bulldogs-heal.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: upgrade to esm-env 1.2.1 to fix issues with non-Vite setups
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 6b3970c7f9..cd61ce2e88 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -142,7 +142,7 @@
     "acorn-typescript": "^1.4.13",
     "aria-query": "^5.3.1",
     "axobject-query": "^4.1.0",
-    "esm-env": "^1.2.0",
+    "esm-env": "^1.2.1",
     "esrap": "^1.2.3",
     "is-reference": "^3.0.3",
     "locate-character": "^3.0.0",
diff --git a/packages/svelte/tests/runtime-browser/test.ts b/packages/svelte/tests/runtime-browser/test.ts
index 1b97988fda..582a10edf7 100644
--- a/packages/svelte/tests/runtime-browser/test.ts
+++ b/packages/svelte/tests/runtime-browser/test.ts
@@ -79,6 +79,7 @@ async function run_test(
 			__CONFIG__: path.resolve(test_dir, '_config.js'),
 			'assert.js': assert_file
 		},
+		conditions: ['browser', 'production'],
 		plugins: [
 			{
 				name: 'testing-runtime-browser',
@@ -131,6 +132,7 @@ async function run_test(
 				__MAIN_DOT_SVELTE__: path.resolve(test_dir, 'main.svelte'),
 				__CONFIG__: path.resolve(test_dir, '_config.js')
 			},
+			conditions: ['browser', 'production'],
 			plugins: [
 				{
 					name: 'testing-runtime-browser-ssr',
@@ -191,9 +193,11 @@ async function run_test(
 
 	try {
 		const page = await browser.newPage();
-		page.on('console', (type) => {
+		page.on('console', (message) => {
+			let method = message.type();
+			if (method === 'warning') method = 'warn';
 			// @ts-ignore
-			console[type.type()](type.text());
+			console[method](message.text());
 		});
 
 		if (build_result_ssr) {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bc431a4096..b604c59f20 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -81,8 +81,8 @@ importers:
         specifier: ^4.1.0
         version: 4.1.0
       esm-env:
-        specifier: ^1.2.0
-        version: 1.2.0
+        specifier: ^1.2.1
+        version: 1.2.1
       esrap:
         specifier: ^1.2.3
         version: 1.2.3
@@ -224,7 +224,7 @@ importers:
         version: 6.0.1(@lezer/common@1.2.1)
       esm-env:
         specifier: ^1.0.0
-        version: 1.2.0
+        version: 1.2.1
       marked:
         specifier: ^7.0.2
         version: 7.0.5
@@ -1442,8 +1442,8 @@ packages:
       jiti:
         optional: true
 
-  esm-env@1.2.0:
-    resolution: {integrity: sha512-OhSQuHL3mUcaQHjGe8UMG8GsJIJHYYz0flR0h9fiTPNMupLMkb7TvcRD0EeJXW5a8GHBgfz08b6FDLNK7kkPQA==}
+  esm-env@1.2.1:
+    resolution: {integrity: sha512-U9JedYYjCnadUlXk7e1Kr+aENQhtUaoaV9+gZm1T8LC/YBAPJx3NSPIAurFOC0U5vrdSevnUJS2/wUVxGwPhng==}
 
   espree@10.1.0:
     resolution: {integrity: sha512-M1M6CpiE6ffoigIOWYO9UDP8TMUw9kqb21tf+08IgDYjCsOvCuDt4jQcZmoYxx+w7zlKw9/N0KXfto+I8/FrXA==}
@@ -3519,7 +3519,7 @@ snapshots:
       '@types/cookie': 0.6.0
       cookie: 0.6.0
       devalue: 5.1.1
-      esm-env: 1.2.0
+      esm-env: 1.2.1
       import-meta-resolve: 4.1.0
       kleur: 4.1.5
       magic-string: 0.30.11
@@ -3534,7 +3534,7 @@ snapshots:
   '@sveltejs/site-kit@6.0.0-next.64(@sveltejs/kit@2.8.3(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@packages+svelte)(vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)(vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)':
     dependencies:
       '@sveltejs/kit': 2.8.3(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@packages+svelte)(vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)(vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))
-      esm-env: 1.2.0
+      esm-env: 1.2.1
       svelte: link:packages/svelte
       svelte-persisted-store: 0.9.2(svelte@packages+svelte)
 
@@ -4182,7 +4182,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  esm-env@1.2.0: {}
+  esm-env@1.2.1: {}
 
   espree@10.1.0:
     dependencies:

From 6dd60b568523398691903184fce40bccda35f4e6 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Sat, 30 Nov 2024 08:46:38 -0800
Subject: [PATCH 123/159] Version Packages (#14477)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/gentle-bulldogs-heal.md |  5 -----
 .changeset/itchy-timers-relax.md   |  5 -----
 .changeset/sixty-kings-learn.md    |  5 -----
 packages/svelte/CHANGELOG.md       | 10 ++++++++++
 packages/svelte/package.json       |  2 +-
 packages/svelte/src/version.js     |  2 +-
 6 files changed, 12 insertions(+), 17 deletions(-)
 delete mode 100644 .changeset/gentle-bulldogs-heal.md
 delete mode 100644 .changeset/itchy-timers-relax.md
 delete mode 100644 .changeset/sixty-kings-learn.md

diff --git a/.changeset/gentle-bulldogs-heal.md b/.changeset/gentle-bulldogs-heal.md
deleted file mode 100644
index 32c1d6714c..0000000000
--- a/.changeset/gentle-bulldogs-heal.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: upgrade to esm-env 1.2.1 to fix issues with non-Vite setups
diff --git a/.changeset/itchy-timers-relax.md b/.changeset/itchy-timers-relax.md
deleted file mode 100644
index 5d0913ba62..0000000000
--- a/.changeset/itchy-timers-relax.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: prevent infinite loops when pruning CSS
diff --git a/.changeset/sixty-kings-learn.md b/.changeset/sixty-kings-learn.md
deleted file mode 100644
index 927e21fa78..0000000000
--- a/.changeset/sixty-kings-learn.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: generate correct code when encountering object expression statement
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 0c75e07a32..b66a6e7e4f 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,15 @@
 # svelte
 
+## 5.2.12
+
+### Patch Changes
+
+- fix: upgrade to esm-env 1.2.1 to fix issues with non-Vite setups ([#14470](https://github.com/sveltejs/svelte/pull/14470))
+
+- fix: prevent infinite loops when pruning CSS ([#14474](https://github.com/sveltejs/svelte/pull/14474))
+
+- fix: generate correct code when encountering object expression statement ([#14480](https://github.com/sveltejs/svelte/pull/14480))
+
 ## 5.2.11
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index cd61ce2e88..641dcfa335 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.2.11",
+  "version": "5.2.12",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 517a76e74c..500b12a06e 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.2.11';
+export const VERSION = '5.2.12';
 export const PUBLIC_VERSION = '5';

From f2eed15c021b038a77cb97e71c565823ef2c16fb Mon Sep 17 00:00:00 2001
From: Romain l'Ourson <rcrestey@gmail.com>
Date: Sat, 30 Nov 2024 18:25:14 +0100
Subject: [PATCH 124/159] docs: fix scale description (#14454)

* Fix scale description

* regenerate

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 packages/svelte/src/transition/index.js | 2 +-
 packages/svelte/types/index.d.ts        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/svelte/src/transition/index.js b/packages/svelte/src/transition/index.js
index 8cc054cba2..4123106211 100644
--- a/packages/svelte/src/transition/index.js
+++ b/packages/svelte/src/transition/index.js
@@ -136,7 +136,7 @@ export function slide(node, { delay = 0, duration = 400, easing = cubic_out, axi
 }
 
 /**
- * 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.
  *
  * @param {Element} node
  * @param {ScaleParams} [params]
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
index 01119e7485..c30662cc76 100644
--- a/packages/svelte/types/index.d.ts
+++ b/packages/svelte/types/index.d.ts
@@ -1942,7 +1942,7 @@ declare module 'svelte/transition' {
 	 * */
 	export function slide(node: Element, { delay, duration, easing, axis }?: SlideParams | undefined): TransitionConfig;
 	/**
-	 * 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.
 	 *
 	 * */
 	export function scale(node: Element, { delay, duration, easing, start, opacity }?: ScaleParams | undefined): TransitionConfig;

From ed7ebcde1e8f01c49bc3082d00724e092803ac63 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Sun, 1 Dec 2024 13:53:42 +0000
Subject: [PATCH 125/159] feat: add error boundaries (#14211)

* feat: add error boundary support

tweak

tweak again

retry -> reset

tweaks

add tests

tweaks

tweaks

tweaks

more tests

more tests and tweaks

comments

tweak

tweak

tweak

tweak

tweak

* tweak

tweak

tweak

tweak

more fixes

tweak

tweak

more fixes

changeset

* Update packages/svelte/elements.d.ts

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>

* Update .changeset/polite-peaches-do.md

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>

* fix issue with rethrowing

* handle fallback error

* handle fallback error

* add more test coverage

* more tests

* more bug fixes

* guard against non-errors

* add component_stack to error

* alternative approach

* remove spread support

* lint

* add to legacy ast

* add to svelte-html

* disallow anything but attributes on the boundary element

* fix error

* more validation

* only create block when necessary

* swap argument order - results in nicer-looking code in many cases

* Update .changeset/polite-peaches-do.md

* simplify a bit

* simplify

* move declaration closer to usage

* push once

* unused

* tweaks

* consistent naming

* simplify

* add a couple newlines

* tweak comments

* simplify

* newlines

* placeholder documentation

* add some docs

* Update packages/svelte/src/internal/client/dom/blocks/boundary.js

Co-authored-by: Rich Harris <rich.harris@vercel.com>

* Update packages/svelte/src/internal/client/dom/blocks/boundary.js

Co-authored-by: Rich Harris <rich.harris@vercel.com>

* Update packages/svelte/src/internal/client/dom/blocks/boundary.js

Co-authored-by: Rich Harris <rich.harris@vercel.com>

* fix type

* fix link

* explain what happens if onerror throws

---------

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
Co-authored-by: Simon Holthausen <simon.holthausen@vercel.com>
Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/polite-peaches-do.md               |   5 +
 .../05-special-elements/01-svelte-boundary.md |  79 ++++++++++
 ...1-svelte-window.md => 02-svelte-window.md} |   0
 ...elte-document.md => 03-svelte-document.md} |   0
 .../{03-svelte-body.md => 04-svelte-body.md}  |   0
 .../{04-svelte-head.md => 05-svelte-head.md}  |   0
 ...svelte-element.md => 06-svelte-element.md} |   0
 ...svelte-options.md => 07-svelte-options.md} |   0
 .../98-reference/.generated/compile-errors.md |  12 ++
 packages/svelte/elements.d.ts                 |   4 +
 .../messages/compile-errors/template.md       |   8 +
 packages/svelte/src/compiler/errors.js        |  18 +++
 packages/svelte/src/compiler/legacy.js        |  14 ++
 .../compiler/phases/1-parse/state/element.js  |   3 +-
 .../src/compiler/phases/2-analyze/index.js    |   2 +
 .../2-analyze/visitors/SvelteBoundary.js      |  27 ++++
 .../3-transform/client/transform-client.js    |   2 +
 .../client/visitors/SvelteBoundary.js         |  61 ++++++++
 .../3-transform/server/transform-server.js    |   4 +-
 .../server/visitors/SvelteBoundary.js         |  17 +++
 .../src/compiler/phases/3-transform/utils.js  |   1 +
 .../svelte/src/compiler/types/template.d.ts   |   8 +-
 .../svelte/src/internal/client/constants.js   |  27 ++--
 .../internal/client/dom/blocks/boundary.js    | 134 +++++++++++++++++
 .../src/internal/client/dom/template.js       |   1 -
 packages/svelte/src/internal/client/index.js  |   1 +
 .../src/internal/client/reactivity/effects.js |   2 +-
 .../svelte/src/internal/client/runtime.js     | 142 ++++++++++++++----
 packages/svelte/svelte-html.d.ts              |   4 +
 .../samples/svelte-selfdestructive/_config.js |   2 +-
 .../samples/error-boundary-10/_config.js      |  14 ++
 .../samples/error-boundary-10/main.svelte     |  17 +++
 .../samples/error-boundary-11/_config.js      |  14 ++
 .../samples/error-boundary-11/main.svelte     |  17 +++
 .../samples/error-boundary-12/_config.js      |  13 ++
 .../samples/error-boundary-12/main.svelte     |  22 +++
 .../samples/error-boundary-13/Child.svelte    |   7 +
 .../samples/error-boundary-13/_config.js      |  13 ++
 .../samples/error-boundary-13/main.svelte     |  22 +++
 .../samples/error-boundary-14/Child.svelte    |   9 ++
 .../samples/error-boundary-14/_config.js      |   9 ++
 .../samples/error-boundary-14/main.svelte     |   9 ++
 .../samples/error-boundary-15/Child.svelte    |   9 ++
 .../samples/error-boundary-15/_config.js      |   9 ++
 .../samples/error-boundary-15/main.svelte     |  19 +++
 .../samples/error-boundary-16/Child.svelte    |  13 ++
 .../samples/error-boundary-16/_config.js      |  24 +++
 .../samples/error-boundary-16/main.svelte     |  12 ++
 .../samples/error-boundary-17/Child.svelte    |  15 ++
 .../samples/error-boundary-17/_config.js      |  15 ++
 .../samples/error-boundary-17/main.svelte     |  18 +++
 .../samples/error-boundary-18/_config.js      |  15 ++
 .../samples/error-boundary-18/main.svelte     |  16 ++
 .../samples/error-boundary-19/_config.js      |  14 ++
 .../samples/error-boundary-19/main.svelte     |  22 +++
 .../samples/error-boundary-2/_config.js       |  13 ++
 .../samples/error-boundary-2/main.svelte      |  15 ++
 .../samples/error-boundary-3/_config.js       |  14 ++
 .../samples/error-boundary-3/main.svelte      |  17 +++
 .../samples/error-boundary-4/_config.js       |  14 ++
 .../samples/error-boundary-4/main.svelte      |  17 +++
 .../samples/error-boundary-5/Child.svelte     |  13 ++
 .../samples/error-boundary-5/_config.js       |  31 ++++
 .../samples/error-boundary-5/main.svelte      |  18 +++
 .../samples/error-boundary-6/_config.js       |  13 ++
 .../samples/error-boundary-6/main.svelte      |  20 +++
 .../samples/error-boundary-7/Child.svelte     |   5 +
 .../samples/error-boundary-7/_config.js       |   8 +
 .../samples/error-boundary-7/main.svelte      |  14 ++
 .../samples/error-boundary-8/Child.svelte     |   5 +
 .../samples/error-boundary-8/_config.js       |   8 +
 .../samples/error-boundary-8/main.svelte      |  17 +++
 .../samples/error-boundary-9/Child.svelte     |   5 +
 .../samples/error-boundary-9/_config.js       |   8 +
 .../samples/error-boundary-9/main.svelte      |  20 +++
 .../samples/error-boundary/_config.js         |   9 ++
 .../samples/error-boundary/main.svelte        |  11 ++
 packages/svelte/types/index.d.ts              |   8 +-
 78 files changed, 1199 insertions(+), 49 deletions(-)
 create mode 100644 .changeset/polite-peaches-do.md
 create mode 100644 documentation/docs/05-special-elements/01-svelte-boundary.md
 rename documentation/docs/05-special-elements/{01-svelte-window.md => 02-svelte-window.md} (100%)
 rename documentation/docs/05-special-elements/{02-svelte-document.md => 03-svelte-document.md} (100%)
 rename documentation/docs/05-special-elements/{03-svelte-body.md => 04-svelte-body.md} (100%)
 rename documentation/docs/05-special-elements/{04-svelte-head.md => 05-svelte-head.md} (100%)
 rename documentation/docs/05-special-elements/{05-svelte-element.md => 06-svelte-element.md} (100%)
 rename documentation/docs/05-special-elements/{06-svelte-options.md => 07-svelte-options.md} (100%)
 create mode 100644 packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteBoundary.js
 create mode 100644 packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteBoundary.js
 create mode 100644 packages/svelte/src/compiler/phases/3-transform/server/visitors/SvelteBoundary.js
 create mode 100644 packages/svelte/src/internal/client/dom/blocks/boundary.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/error-boundary-10/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/error-boundary-10/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/error-boundary-11/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/error-boundary-11/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/error-boundary-12/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/error-boundary-12/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/error-boundary-13/Child.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/error-boundary-13/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/error-boundary-13/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/error-boundary-14/Child.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/error-boundary-14/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/error-boundary-14/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/error-boundary-15/Child.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/error-boundary-15/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/error-boundary-15/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/error-boundary-16/Child.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/error-boundary-16/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/error-boundary-16/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/error-boundary-17/Child.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/error-boundary-17/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/error-boundary-17/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/error-boundary-18/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/error-boundary-18/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/error-boundary-19/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/error-boundary-19/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/error-boundary-2/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/error-boundary-2/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/error-boundary-3/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/error-boundary-3/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/error-boundary-4/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/error-boundary-4/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/error-boundary-5/Child.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/error-boundary-5/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/error-boundary-5/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/error-boundary-6/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/error-boundary-6/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/error-boundary-7/Child.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/error-boundary-7/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/error-boundary-7/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/error-boundary-8/Child.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/error-boundary-8/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/error-boundary-8/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/error-boundary-9/Child.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/error-boundary-9/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/error-boundary-9/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/error-boundary/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/error-boundary/main.svelte

diff --git a/.changeset/polite-peaches-do.md b/.changeset/polite-peaches-do.md
new file mode 100644
index 0000000000..7b59c33ea7
--- /dev/null
+++ b/.changeset/polite-peaches-do.md
@@ -0,0 +1,5 @@
+---
+'svelte': minor
+---
+
+feat: add error boundaries with `<svelte:boundary>`
diff --git a/documentation/docs/05-special-elements/01-svelte-boundary.md b/documentation/docs/05-special-elements/01-svelte-boundary.md
new file mode 100644
index 0000000000..2e9f85c83a
--- /dev/null
+++ b/documentation/docs/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.
diff --git a/documentation/docs/05-special-elements/01-svelte-window.md b/documentation/docs/05-special-elements/02-svelte-window.md
similarity index 100%
rename from documentation/docs/05-special-elements/01-svelte-window.md
rename to documentation/docs/05-special-elements/02-svelte-window.md
diff --git a/documentation/docs/05-special-elements/02-svelte-document.md b/documentation/docs/05-special-elements/03-svelte-document.md
similarity index 100%
rename from documentation/docs/05-special-elements/02-svelte-document.md
rename to documentation/docs/05-special-elements/03-svelte-document.md
diff --git a/documentation/docs/05-special-elements/03-svelte-body.md b/documentation/docs/05-special-elements/04-svelte-body.md
similarity index 100%
rename from documentation/docs/05-special-elements/03-svelte-body.md
rename to documentation/docs/05-special-elements/04-svelte-body.md
diff --git a/documentation/docs/05-special-elements/04-svelte-head.md b/documentation/docs/05-special-elements/05-svelte-head.md
similarity index 100%
rename from documentation/docs/05-special-elements/04-svelte-head.md
rename to documentation/docs/05-special-elements/05-svelte-head.md
diff --git a/documentation/docs/05-special-elements/05-svelte-element.md b/documentation/docs/05-special-elements/06-svelte-element.md
similarity index 100%
rename from documentation/docs/05-special-elements/05-svelte-element.md
rename to documentation/docs/05-special-elements/06-svelte-element.md
diff --git a/documentation/docs/05-special-elements/06-svelte-options.md b/documentation/docs/05-special-elements/07-svelte-options.md
similarity index 100%
rename from documentation/docs/05-special-elements/06-svelte-options.md
rename to documentation/docs/05-special-elements/07-svelte-options.md
diff --git a/documentation/docs/98-reference/.generated/compile-errors.md b/documentation/docs/98-reference/.generated/compile-errors.md
index 16cd361e52..77166097a2 100644
--- a/documentation/docs/98-reference/.generated/compile-errors.md
+++ b/documentation/docs/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
 
 ```
diff --git a/packages/svelte/elements.d.ts b/packages/svelte/elements.d.ts
index 8b2d388bf8..035fa49c31 100644
--- a/packages/svelte/elements.d.ts
+++ b/packages/svelte/elements.d.ts
@@ -2044,6 +2044,10 @@ export interface SvelteHTMLElements {
 		[name: string]: any;
 	};
 	'svelte:head': { [name: string]: any };
+	'svelte:boundary': {
+		onerror?: (error: unknown, reset: () => void) => void;
+		failed?: import('svelte').Snippet<[error: unknown, reset: () => void]>;
+	};
 
 	[name: string]: { [name: string]: any };
 }
diff --git a/packages/svelte/messages/compile-errors/template.md b/packages/svelte/messages/compile-errors/template.md
index 38ff87d505..613d11ae51 100644
--- a/packages/svelte/messages/compile-errors/template.md
+++ b/packages/svelte/messages/compile-errors/template.md
@@ -282,6 +282,14 @@ HTML restricts where certain elements can appear. In case of a violation the bro
 
 > `<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
 
 > Invalid component definition — must be an `{expression}`
diff --git a/packages/svelte/src/compiler/errors.js b/packages/svelte/src/compiler/errors.js
index ad2919b34b..bb99275c6b 100644
--- a/packages/svelte/src/compiler/errors.js
+++ b/packages/svelte/src/compiler/errors.js
@@ -1228,6 +1228,24 @@ export function svelte_body_illegal_attribute(node) {
 	e(node, "svelte_body_illegal_attribute", "`<svelte:body>` does not support non-event attributes or spread attributes");
 }
 
+/**
+ * Valid attributes on `<svelte:boundary>` are `onerror` and `failed`
+ * @param {null | number | NodeLike} node
+ * @returns {never}
+ */
+export function svelte_boundary_invalid_attribute(node) {
+	e(node, "svelte_boundary_invalid_attribute", "Valid attributes on `<svelte:boundary>` are `onerror` and `failed`");
+}
+
+/**
+ * Attribute value must be a non-string expression
+ * @param {null | number | NodeLike} node
+ * @returns {never}
+ */
+export function svelte_boundary_invalid_attribute_value(node) {
+	e(node, "svelte_boundary_invalid_attribute_value", "Attribute value must be a non-string expression");
+}
+
 /**
  * Invalid component definition — must be an `{expression}`
  * @param {null | number | NodeLike} node
diff --git a/packages/svelte/src/compiler/legacy.js b/packages/svelte/src/compiler/legacy.js
index 52b4bd5860..2d90988936 100644
--- a/packages/svelte/src/compiler/legacy.js
+++ b/packages/svelte/src/compiler/legacy.js
@@ -381,6 +381,20 @@ export function convert(source, ast) {
 					children: node.body.nodes.map((child) => visit(child))
 				};
 			},
+			// @ts-expect-error
+			SvelteBoundary(node, { visit }) {
+				remove_surrounding_whitespace_nodes(node.fragment.nodes);
+				return {
+					type: 'SvelteBoundary',
+					name: 'svelte:boundary',
+					start: node.start,
+					end: node.end,
+					attributes: node.attributes.map(
+						(child) => /** @type {Legacy.LegacyAttributeLike} */ (visit(child))
+					),
+					children: node.fragment.nodes.map((child) => visit(child))
+				};
+			},
 			RegularElement(node, { visit }) {
 				return {
 					type: 'Element',
diff --git a/packages/svelte/src/compiler/phases/1-parse/state/element.js b/packages/svelte/src/compiler/phases/1-parse/state/element.js
index 6eed811393..45350bb1ae 100644
--- a/packages/svelte/src/compiler/phases/1-parse/state/element.js
+++ b/packages/svelte/src/compiler/phases/1-parse/state/element.js
@@ -43,7 +43,8 @@ const meta_tags = new Map([
 	['svelte:element', 'SvelteElement'],
 	['svelte:component', 'SvelteComponent'],
 	['svelte:self', 'SvelteSelf'],
-	['svelte:fragment', 'SvelteFragment']
+	['svelte:fragment', 'SvelteFragment'],
+	['svelte:boundary', 'SvelteBoundary']
 ]);
 
 /** @param {Parser} parser */
diff --git a/packages/svelte/src/compiler/phases/2-analyze/index.js b/packages/svelte/src/compiler/phases/2-analyze/index.js
index 60f48ac70c..67eea43e1e 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/index.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/index.js
@@ -60,6 +60,7 @@ import { SvelteFragment } from './visitors/SvelteFragment.js';
 import { SvelteHead } from './visitors/SvelteHead.js';
 import { SvelteSelf } from './visitors/SvelteSelf.js';
 import { SvelteWindow } from './visitors/SvelteWindow.js';
+import { SvelteBoundary } from './visitors/SvelteBoundary.js';
 import { TaggedTemplateExpression } from './visitors/TaggedTemplateExpression.js';
 import { Text } from './visitors/Text.js';
 import { TitleElement } from './visitors/TitleElement.js';
@@ -171,6 +172,7 @@ const visitors = {
 	SvelteHead,
 	SvelteSelf,
 	SvelteWindow,
+	SvelteBoundary,
 	TaggedTemplateExpression,
 	Text,
 	TransitionDirective,
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteBoundary.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteBoundary.js
new file mode 100644
index 0000000000..d50cb80cb8
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteBoundary.js
@@ -0,0 +1,27 @@
+/** @import { AST } from '#compiler' */
+/** @import { Context } from '../types' */
+import * as e from '../../../errors.js';
+
+const valid = ['onerror', 'failed'];
+
+/**
+ * @param {AST.SvelteBoundary} node
+ * @param {Context} context
+ */
+export function SvelteBoundary(node, context) {
+	for (const attribute of node.attributes) {
+		if (attribute.type !== 'Attribute' || !valid.includes(attribute.name)) {
+			e.svelte_boundary_invalid_attribute(attribute);
+		}
+
+		if (
+			attribute.value === true ||
+			(Array.isArray(attribute.value) &&
+				(attribute.value.length !== 1 || attribute.value[0].type !== 'ExpressionTag'))
+		) {
+			e.svelte_boundary_invalid_attribute_value(attribute);
+		}
+	}
+
+	context.next();
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js b/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
index 5349f60255..99cb78358a 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
@@ -48,6 +48,7 @@ import { SvelteComponent } from './visitors/SvelteComponent.js';
 import { SvelteDocument } from './visitors/SvelteDocument.js';
 import { SvelteElement } from './visitors/SvelteElement.js';
 import { SvelteFragment } from './visitors/SvelteFragment.js';
+import { SvelteBoundary } from './visitors/SvelteBoundary.js';
 import { SvelteHead } from './visitors/SvelteHead.js';
 import { SvelteSelf } from './visitors/SvelteSelf.js';
 import { SvelteWindow } from './visitors/SvelteWindow.js';
@@ -122,6 +123,7 @@ const visitors = {
 	SvelteDocument,
 	SvelteElement,
 	SvelteFragment,
+	SvelteBoundary,
 	SvelteHead,
 	SvelteSelf,
 	SvelteWindow,
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteBoundary.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteBoundary.js
new file mode 100644
index 0000000000..ef9f6bd798
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteBoundary.js
@@ -0,0 +1,61 @@
+/** @import { BlockStatement, Statement, Expression } from 'estree' */
+/** @import { AST } from '#compiler' */
+/** @import { ComponentContext } from '../types' */
+import * as b from '../../../../utils/builders.js';
+
+/**
+ * @param {AST.SvelteBoundary} node
+ * @param {ComponentContext} context
+ */
+export function SvelteBoundary(node, context) {
+	const props = b.object([]);
+
+	for (const attribute of node.attributes) {
+		if (attribute.type !== 'Attribute' || attribute.value === true) {
+			// these can't exist, because they would have caused validation
+			// to fail, but typescript doesn't know that
+			continue;
+		}
+
+		const chunk = Array.isArray(attribute.value)
+			? /** @type {AST.ExpressionTag} */ (attribute.value[0])
+			: attribute.value;
+
+		const expression = /** @type {Expression} */ (context.visit(chunk.expression, context.state));
+
+		if (attribute.metadata.expression.has_state) {
+			props.properties.push(b.get(attribute.name, [b.return(expression)]));
+		} else {
+			props.properties.push(b.init(attribute.name, expression));
+		}
+	}
+
+	const nodes = [];
+
+	/** @type {Statement[]} */
+	const snippet_statements = [];
+
+	// Capture the `failed` implicit snippet prop
+	for (const child of node.fragment.nodes) {
+		if (child.type === 'SnippetBlock' && child.expression.name === 'failed') {
+			/** @type {Statement[]} */
+			const init = [];
+			context.visit(child, { ...context.state, init });
+			props.properties.push(b.prop('init', child.expression, child.expression));
+			snippet_statements.push(...init);
+		} else {
+			nodes.push(child);
+		}
+	}
+
+	const block = /** @type {BlockStatement} */ (context.visit({ ...node.fragment, nodes }));
+
+	const boundary = b.stmt(
+		b.call('$.boundary', context.state.node, props, b.arrow([b.id('$$anchor')], block))
+	);
+
+	context.state.template.push('<!>');
+	context.state.init.push(
+		snippet_statements.length > 0 ? b.block([...snippet_statements, boundary]) : boundary
+	);
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/transform-server.js b/packages/svelte/src/compiler/phases/3-transform/server/transform-server.js
index c164aa4219..ffde76fab7 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/transform-server.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/transform-server.js
@@ -38,6 +38,7 @@ import { SvelteSelf } from './visitors/SvelteSelf.js';
 import { TitleElement } from './visitors/TitleElement.js';
 import { UpdateExpression } from './visitors/UpdateExpression.js';
 import { VariableDeclaration } from './visitors/VariableDeclaration.js';
+import { SvelteBoundary } from './visitors/SvelteBoundary.js';
 
 /** @type {Visitors} */
 const global_visitors = {
@@ -75,7 +76,8 @@ const template_visitors = {
 	SvelteFragment,
 	SvelteHead,
 	SvelteSelf,
-	TitleElement
+	TitleElement,
+	SvelteBoundary
 };
 
 /**
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/SvelteBoundary.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/SvelteBoundary.js
new file mode 100644
index 0000000000..0d54feee11
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/SvelteBoundary.js
@@ -0,0 +1,17 @@
+/** @import { BlockStatement } from 'estree' */
+/** @import { AST } from '#compiler' */
+/** @import { ComponentContext } from '../types' */
+import { BLOCK_CLOSE, BLOCK_OPEN } from '../../../../../internal/server/hydration.js';
+import * as b from '../../../../utils/builders.js';
+
+/**
+ * @param {AST.SvelteBoundary} node
+ * @param {ComponentContext} context
+ */
+export function SvelteBoundary(node, context) {
+	context.state.template.push(
+		b.literal(BLOCK_OPEN),
+		/** @type {BlockStatement} */ (context.visit(node.fragment)),
+		b.literal(BLOCK_CLOSE)
+	);
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/utils.js b/packages/svelte/src/compiler/phases/3-transform/utils.js
index a1b8dc0d03..14fd3aa2e8 100644
--- a/packages/svelte/src/compiler/phases/3-transform/utils.js
+++ b/packages/svelte/src/compiler/phases/3-transform/utils.js
@@ -305,6 +305,7 @@ export function clean_nodes(
 				parent.type === 'SnippetBlock' ||
 				parent.type === 'EachBlock' ||
 				parent.type === 'SvelteComponent' ||
+				parent.type === 'SvelteBoundary' ||
 				parent.type === 'Component' ||
 				parent.type === 'SvelteSelf') &&
 			first &&
diff --git a/packages/svelte/src/compiler/types/template.d.ts b/packages/svelte/src/compiler/types/template.d.ts
index efce217e82..ede4e1693c 100644
--- a/packages/svelte/src/compiler/types/template.d.ts
+++ b/packages/svelte/src/compiler/types/template.d.ts
@@ -363,6 +363,11 @@ export 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';
@@ -520,7 +525,8 @@ export type ElementLike =
 	| AST.SvelteHead
 	| AST.SvelteOptionsRaw
 	| AST.SvelteSelf
-	| AST.SvelteWindow;
+	| AST.SvelteWindow
+	| AST.SvelteBoundary;
 
 export type TemplateNode =
 	| AST.Root
diff --git a/packages/svelte/src/internal/client/constants.js b/packages/svelte/src/internal/client/constants.js
index bcf30e78db..a4840ce4eb 100644
--- a/packages/svelte/src/internal/client/constants.js
+++ b/packages/svelte/src/internal/client/constants.js
@@ -4,21 +4,22 @@ export const RENDER_EFFECT = 1 << 3;
 export const BLOCK_EFFECT = 1 << 4;
 export const BRANCH_EFFECT = 1 << 5;
 export const ROOT_EFFECT = 1 << 6;
-export const UNOWNED = 1 << 7;
-export const DISCONNECTED = 1 << 8;
-export const CLEAN = 1 << 9;
-export const DIRTY = 1 << 10;
-export const MAYBE_DIRTY = 1 << 11;
-export const INERT = 1 << 12;
-export const DESTROYED = 1 << 13;
-export const EFFECT_RAN = 1 << 14;
+export const BOUNDARY_EFFECT = 1 << 7;
+export const UNOWNED = 1 << 8;
+export const DISCONNECTED = 1 << 9;
+export const CLEAN = 1 << 10;
+export const DIRTY = 1 << 11;
+export const MAYBE_DIRTY = 1 << 12;
+export const INERT = 1 << 13;
+export const DESTROYED = 1 << 14;
+export const EFFECT_RAN = 1 << 15;
 /** 'Transparent' effects do not create a transition boundary */
-export const EFFECT_TRANSPARENT = 1 << 15;
+export const EFFECT_TRANSPARENT = 1 << 16;
 /** Svelte 4 legacy mode props need to be handled with deriveds and be recognized elsewhere, hence the dedicated flag */
-export const LEGACY_DERIVED_PROP = 1 << 16;
-export const INSPECT_EFFECT = 1 << 17;
-export const HEAD_EFFECT = 1 << 18;
-export const EFFECT_HAS_DERIVED = 1 << 19;
+export const LEGACY_DERIVED_PROP = 1 << 17;
+export const INSPECT_EFFECT = 1 << 18;
+export const HEAD_EFFECT = 1 << 19;
+export const EFFECT_HAS_DERIVED = 1 << 20;
 
 export const STATE_SYMBOL = Symbol('$state');
 export const STATE_SYMBOL_METADATA = Symbol('$state metadata');
diff --git a/packages/svelte/src/internal/client/dom/blocks/boundary.js b/packages/svelte/src/internal/client/dom/blocks/boundary.js
new file mode 100644
index 0000000000..7f4f000dce
--- /dev/null
+++ b/packages/svelte/src/internal/client/dom/blocks/boundary.js
@@ -0,0 +1,134 @@
+/** @import { Effect, TemplateNode, } from '#client' */
+
+import { BOUNDARY_EFFECT, EFFECT_TRANSPARENT } from '../../constants.js';
+import { block, branch, destroy_effect, pause_effect } from '../../reactivity/effects.js';
+import {
+	active_effect,
+	active_reaction,
+	component_context,
+	handle_error,
+	set_active_effect,
+	set_active_reaction,
+	set_component_context,
+	reset_is_throwing_error
+} from '../../runtime.js';
+import {
+	hydrate_next,
+	hydrate_node,
+	hydrating,
+	next,
+	remove_nodes,
+	set_hydrate_node
+} from '../hydration.js';
+import { queue_micro_task } from '../task.js';
+
+/**
+ * @param {Effect} boundary
+ * @param {() => void} fn
+ */
+function with_boundary(boundary, fn) {
+	var previous_effect = active_effect;
+	var previous_reaction = active_reaction;
+	var previous_ctx = component_context;
+
+	set_active_effect(boundary);
+	set_active_reaction(boundary);
+	set_component_context(boundary.ctx);
+
+	try {
+		fn();
+	} finally {
+		set_active_effect(previous_effect);
+		set_active_reaction(previous_reaction);
+		set_component_context(previous_ctx);
+	}
+}
+
+/**
+ * @param {TemplateNode} node
+ * @param {{
+ * 	 onerror?: (error: unknown, reset: () => void) => void,
+ *   failed?: (anchor: Node, error: () => unknown, reset: () => () => void) => void
+ * }} props
+ * @param {((anchor: Node) => void)} boundary_fn
+ * @returns {void}
+ */
+export function boundary(node, props, boundary_fn) {
+	var anchor = node;
+
+	/** @type {Effect} */
+	var boundary_effect;
+
+	block(() => {
+		var boundary = /** @type {Effect} */ (active_effect);
+		var hydrate_open = hydrate_node;
+		var is_creating_fallback = false;
+
+		// We re-use the effect's fn property to avoid allocation of an additional field
+		boundary.fn = (/** @type {unknown}} */ error) => {
+			var onerror = props.onerror;
+			let failed = props.failed;
+
+			// If we have nothing to capture the error, or if we hit an error while
+			// rendering the fallback, re-throw for another boundary to handle
+			if ((!onerror && !failed) || is_creating_fallback) {
+				throw error;
+			}
+
+			var reset = () => {
+				pause_effect(boundary_effect);
+
+				with_boundary(boundary, () => {
+					is_creating_fallback = false;
+					boundary_effect = branch(() => boundary_fn(anchor));
+					reset_is_throwing_error();
+				});
+			};
+
+			onerror?.(error, reset);
+
+			if (boundary_effect) {
+				destroy_effect(boundary_effect);
+			} else if (hydrating) {
+				set_hydrate_node(hydrate_open);
+				next();
+				set_hydrate_node(remove_nodes());
+			}
+
+			if (failed) {
+				// Render the `failed` snippet in a microtask
+				queue_micro_task(() => {
+					with_boundary(boundary, () => {
+						is_creating_fallback = true;
+
+						try {
+							boundary_effect = branch(() => {
+								failed(
+									anchor,
+									() => error,
+									() => reset
+								);
+							});
+						} catch (error) {
+							handle_error(error, boundary, null, boundary.ctx);
+						}
+
+						reset_is_throwing_error();
+						is_creating_fallback = false;
+					});
+				});
+			}
+		};
+
+		if (hydrating) {
+			hydrate_next();
+		}
+
+		boundary_effect = branch(() => boundary_fn(anchor));
+		reset_is_throwing_error();
+	}, EFFECT_TRANSPARENT | BOUNDARY_EFFECT);
+
+	if (hydrating) {
+		anchor = hydrate_node;
+	}
+}
diff --git a/packages/svelte/src/internal/client/dom/template.js b/packages/svelte/src/internal/client/dom/template.js
index 7ccffc7d2c..bcbae393ec 100644
--- a/packages/svelte/src/internal/client/dom/template.js
+++ b/packages/svelte/src/internal/client/dom/template.js
@@ -4,7 +4,6 @@ import { create_text, get_first_child } from './operations.js';
 import { create_fragment_from_html } from './reconciler.js';
 import { active_effect } from '../runtime.js';
 import { TEMPLATE_FRAGMENT, TEMPLATE_USE_IMPORT_NODE } from '../../../constants.js';
-import { queue_micro_task } from './task.js';
 
 /**
  * @param {TemplateNode} start
diff --git a/packages/svelte/src/internal/client/index.js b/packages/svelte/src/internal/client/index.js
index 6fd749b42c..e8cbefb090 100644
--- a/packages/svelte/src/internal/client/index.js
+++ b/packages/svelte/src/internal/client/index.js
@@ -124,6 +124,7 @@ export {
 	update_store,
 	mark_store_binding
 } from './reactivity/store.js';
+export { boundary } from './dom/blocks/boundary.js';
 export { set_text } from './render.js';
 export {
 	get,
diff --git a/packages/svelte/src/internal/client/reactivity/effects.js b/packages/svelte/src/internal/client/reactivity/effects.js
index 66b489cf54..69b006fc0f 100644
--- a/packages/svelte/src/internal/client/reactivity/effects.js
+++ b/packages/svelte/src/internal/client/reactivity/effects.js
@@ -464,12 +464,12 @@ export function destroy_effect(effect, remove_dom = true) {
 	}
 
 	// `first` and `child` are nulled out in destroy_effect_children
+	// we don't null out `parent` so that error propagation can work correctly
 	effect.next =
 		effect.prev =
 		effect.teardown =
 		effect.ctx =
 		effect.deps =
-		effect.parent =
 		effect.fn =
 		effect.nodes_start =
 		effect.nodes_end =
diff --git a/packages/svelte/src/internal/client/runtime.js b/packages/svelte/src/internal/client/runtime.js
index 8931d02009..caa481dd1f 100644
--- a/packages/svelte/src/internal/client/runtime.js
+++ b/packages/svelte/src/internal/client/runtime.js
@@ -24,7 +24,8 @@ import {
 	BLOCK_EFFECT,
 	ROOT_EFFECT,
 	LEGACY_DERIVED_PROP,
-	DISCONNECTED
+	DISCONNECTED,
+	BOUNDARY_EFFECT
 } from './constants.js';
 import { flush_tasks } from './dom/task.js';
 import { add_owner } from './dev/ownership.js';
@@ -37,10 +38,11 @@ import { legacy_mode_flag } from '../flags/index.js';
 
 const FLUSH_MICROTASK = 0;
 const FLUSH_SYNC = 1;
-
 // Used for DEV time error handling
 /** @param {WeakSet<Error>} value */
 const handled_errors = new WeakSet();
+export let is_throwing_error = false;
+
 // Used for controlling the flush of effects.
 let scheduler_mode = FLUSH_MICROTASK;
 // Used for handling scheduling
@@ -229,16 +231,81 @@ export function check_dirtiness(reaction) {
 }
 
 /**
- * @param {Error} error
+ * @param {unknown} error
  * @param {Effect} effect
+ */
+function propagate_error(error, effect) {
+	/** @type {Effect | null} */
+	var current = effect;
+
+	while (current !== null) {
+		if ((current.f & BOUNDARY_EFFECT) !== 0) {
+			try {
+				// @ts-expect-error
+				current.fn(error);
+				return;
+			} catch {
+				// Remove boundary flag from effect
+				current.f ^= BOUNDARY_EFFECT;
+			}
+		}
+
+		current = current.parent;
+	}
+
+	is_throwing_error = false;
+	throw error;
+}
+
+/**
+ * @param {Effect} effect
+ */
+function should_rethrow_error(effect) {
+	return (
+		(effect.f & DESTROYED) === 0 &&
+		(effect.parent === null || (effect.parent.f & BOUNDARY_EFFECT) === 0)
+	);
+}
+
+export function reset_is_throwing_error() {
+	is_throwing_error = false;
+}
+
+/**
+ * @param {unknown} error
+ * @param {Effect} effect
+ * @param {Effect | null} previous_effect
  * @param {ComponentContext | null} component_context
  */
-function handle_error(error, effect, component_context) {
-	// Given we don't yet have error boundaries, we will just always throw.
-	if (!DEV || handled_errors.has(error) || component_context === null) {
-		throw error;
+export function handle_error(error, effect, previous_effect, component_context) {
+	if (is_throwing_error) {
+		if (previous_effect === null) {
+			is_throwing_error = false;
+		}
+
+		if (should_rethrow_error(effect)) {
+			throw error;
+		}
+
+		return;
+	}
+
+	if (previous_effect !== null) {
+		is_throwing_error = true;
 	}
 
+	if (
+		!DEV ||
+		component_context === null ||
+		!(error instanceof Error) ||
+		handled_errors.has(error)
+	) {
+		propagate_error(error, effect);
+		return;
+	}
+
+	handled_errors.add(error);
+
 	const component_stack = [];
 
 	const effect_name = effect.fn?.name;
@@ -268,6 +335,9 @@ function handle_error(error, effect, component_context) {
 	define_property(error, 'message', {
 		value: error.message + `\n${component_stack.map((name) => `\n${indent}in ${name}`).join('')}\n`
 	});
+	define_property(error, 'component_stack', {
+		value: component_stack
+	});
 
 	const stack = error.stack;
 
@@ -287,8 +357,11 @@ function handle_error(error, effect, component_context) {
 		});
 	}
 
-	handled_errors.add(error);
-	throw error;
+	propagate_error(error, effect);
+
+	if (should_rethrow_error(effect)) {
+		throw error;
+	}
 }
 
 /**
@@ -449,7 +522,7 @@ export function update_effect(effect) {
 			dev_effect_stack.push(effect);
 		}
 	} catch (error) {
-		handle_error(/** @type {Error} */ (error), effect, previous_component_context);
+		handle_error(error, effect, previous_effect, previous_component_context || effect.ctx);
 	} finally {
 		active_effect = previous_effect;
 
@@ -529,22 +602,28 @@ function flush_queued_effects(effects) {
 	for (var i = 0; i < length; i++) {
 		var effect = effects[i];
 
-		if ((effect.f & (DESTROYED | INERT)) === 0 && check_dirtiness(effect)) {
-			update_effect(effect);
-
-			// Effects with no dependencies or teardown do not get added to the effect tree.
-			// Deferred effects (e.g. `$effect(...)`) _are_ added to the tree because we
-			// don't know if we need to keep them until they are executed. Doing the check
-			// here (rather than in `update_effect`) allows us to skip the work for
-			// immediate effects.
-			if (effect.deps === null && effect.first === null && effect.nodes_start === null) {
-				if (effect.teardown === null) {
-					// remove this effect from the graph
-					unlink_effect(effect);
-				} else {
-					// keep the effect in the graph, but free up some memory
-					effect.fn = null;
+		if ((effect.f & (DESTROYED | INERT)) === 0) {
+			try {
+				if (check_dirtiness(effect)) {
+					update_effect(effect);
+
+					// Effects with no dependencies or teardown do not get added to the effect tree.
+					// Deferred effects (e.g. `$effect(...)`) _are_ added to the tree because we
+					// don't know if we need to keep them until they are executed. Doing the check
+					// here (rather than in `update_effect`) allows us to skip the work for
+					// immediate effects.
+					if (effect.deps === null && effect.first === null && effect.nodes_start === null) {
+						if (effect.teardown === null) {
+							// remove this effect from the graph
+							unlink_effect(effect);
+						} else {
+							// keep the effect in the graph, but free up some memory
+							effect.fn = null;
+						}
+					}
 				}
+			} catch (error) {
+				handle_error(error, effect, null, effect.ctx);
 			}
 		}
 	}
@@ -612,13 +691,20 @@ function process_effects(effect, collected_effects) {
 		var flags = current_effect.f;
 		var is_branch = (flags & BRANCH_EFFECT) !== 0;
 		var is_skippable_branch = is_branch && (flags & CLEAN) !== 0;
+		var sibling = current_effect.next;
 
 		if (!is_skippable_branch && (flags & INERT) === 0) {
 			if ((flags & RENDER_EFFECT) !== 0) {
 				if (is_branch) {
 					current_effect.f ^= CLEAN;
-				} else if (check_dirtiness(current_effect)) {
-					update_effect(current_effect);
+				} else {
+					try {
+						if (check_dirtiness(current_effect)) {
+							update_effect(current_effect);
+						}
+					} catch (error) {
+						handle_error(error, current_effect, null, current_effect.ctx);
+					}
 				}
 
 				var child = current_effect.first;
@@ -632,8 +718,6 @@ function process_effects(effect, collected_effects) {
 			}
 		}
 
-		var sibling = current_effect.next;
-
 		if (sibling === null) {
 			let parent = current_effect.parent;
 
diff --git a/packages/svelte/svelte-html.d.ts b/packages/svelte/svelte-html.d.ts
index 50f7c25fc2..5042eaa4b8 100644
--- a/packages/svelte/svelte-html.d.ts
+++ b/packages/svelte/svelte-html.d.ts
@@ -244,6 +244,10 @@ declare global {
 			'svelte:document': HTMLProps<'svelte:document', HTMLAttributes>;
 			'svelte:fragment': { slot?: string };
 			'svelte:head': { [name: string]: any };
+			'svelte:boundary': {
+				onerror?: (error: unknown, reset: () => void) => void;
+				failed?: import('svelte').Snippet<[error: unknown, reset: () => void]>;
+			};
 			// don't type svelte:options, it would override the types in svelte/elements and it isn't extendable anyway
 
 			[name: string]: { [name: string]: any };
diff --git a/packages/svelte/tests/compiler-errors/samples/svelte-selfdestructive/_config.js b/packages/svelte/tests/compiler-errors/samples/svelte-selfdestructive/_config.js
index 371ddb81db..de5ee3bb69 100644
--- a/packages/svelte/tests/compiler-errors/samples/svelte-selfdestructive/_config.js
+++ b/packages/svelte/tests/compiler-errors/samples/svelte-selfdestructive/_config.js
@@ -4,7 +4,7 @@ export default test({
 	error: {
 		code: 'svelte_meta_invalid_tag',
 		message:
-			'Valid `<svelte:...>` tag names are svelte:head, svelte:options, svelte:window, svelte:document, svelte:body, svelte:element, svelte:component, svelte:self or svelte:fragment',
+			'Valid `<svelte:...>` tag names are svelte:head, svelte:options, svelte:window, svelte:document, svelte:body, svelte:element, svelte:component, svelte:self, svelte:fragment or svelte:boundary',
 		position: [10, 32]
 	}
 });
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-10/_config.js b/packages/svelte/tests/runtime-runes/samples/error-boundary-10/_config.js
new file mode 100644
index 0000000000..b8858d41fd
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-10/_config.js
@@ -0,0 +1,14 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	test({ assert, target, logs }) {
+		const [btn1, btn2] = target.querySelectorAll('button');
+
+		btn2?.click();
+		btn1?.click();
+		flushSync();
+
+		assert.deepEqual(logs, ['error caught!!!']);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-10/main.svelte b/packages/svelte/tests/runtime-runes/samples/error-boundary-10/main.svelte
new file mode 100644
index 0000000000..06c5e8004b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-10/main.svelte
@@ -0,0 +1,17 @@
+<script>
+	function throw_error() {
+		throw new Error('test')
+	}
+
+	let count = $state(0);
+	let onerror = $state((e) => console.log('error caught'));
+</script>
+
+<svelte:boundary {onerror}>
+	{count > 0 ? throw_error() : null}
+</svelte:boundary>
+
+<button onclick={() => count++}>+</button>
+<button onclick={() => onerror = () => console.log('error caught!!!')}>change error message</button>
+
+
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-11/_config.js b/packages/svelte/tests/runtime-runes/samples/error-boundary-11/_config.js
new file mode 100644
index 0000000000..b8858d41fd
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-11/_config.js
@@ -0,0 +1,14 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	test({ assert, target, logs }) {
+		const [btn1, btn2] = target.querySelectorAll('button');
+
+		btn2?.click();
+		btn1?.click();
+		flushSync();
+
+		assert.deepEqual(logs, ['error caught!!!']);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-11/main.svelte b/packages/svelte/tests/runtime-runes/samples/error-boundary-11/main.svelte
new file mode 100644
index 0000000000..f16b85527d
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-11/main.svelte
@@ -0,0 +1,17 @@
+<script>
+	function throw_error() {
+		throw new Error('test')
+	}
+
+	let count = $state(0);
+	let props = $state({ onerror: (e) => console.log('error caught') });
+</script>
+
+<svelte:boundary onerror={props.onerror}>
+	{count > 0 ? throw_error() : null}
+</svelte:boundary>
+
+<button onclick={() => count++}>+</button>
+<button onclick={() => props = { onerror: () => console.log('error caught!!!') }}>change error message</button>
+
+
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-12/_config.js b/packages/svelte/tests/runtime-runes/samples/error-boundary-12/_config.js
new file mode 100644
index 0000000000..b3edfefa20
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-12/_config.js
@@ -0,0 +1,13 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	test({ assert, target }) {
+		const btn = target.querySelector('button');
+
+		btn?.click();
+		flushSync();
+
+		assert.htmlEqual(target.innerHTML, `<button>change</button><p>Error occured</p>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-12/main.svelte b/packages/svelte/tests/runtime-runes/samples/error-boundary-12/main.svelte
new file mode 100644
index 0000000000..bae46c2590
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-12/main.svelte
@@ -0,0 +1,22 @@
+<script>
+	let count = $state(0);
+
+	const things = $derived.by(() => {
+		if (count === 1) {
+			throw new Error('123')
+		}
+		return [1, 2 ,3]
+	})
+</script>
+
+<button onclick={() => count++}>change</button>
+
+<svelte:boundary>
+	{#each things as thing}
+		<p>{thing}</p>
+	{/each}
+
+	{#snippet failed()}
+		<p>Error occured</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-13/Child.svelte b/packages/svelte/tests/runtime-runes/samples/error-boundary-13/Child.svelte
new file mode 100644
index 0000000000..6e607871d3
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-13/Child.svelte
@@ -0,0 +1,7 @@
+<script>
+	const { things } = $props();
+
+	$effect(() => {
+		things
+	})
+</script>
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-13/_config.js b/packages/svelte/tests/runtime-runes/samples/error-boundary-13/_config.js
new file mode 100644
index 0000000000..b3edfefa20
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-13/_config.js
@@ -0,0 +1,13 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	test({ assert, target }) {
+		const btn = target.querySelector('button');
+
+		btn?.click();
+		flushSync();
+
+		assert.htmlEqual(target.innerHTML, `<button>change</button><p>Error occured</p>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-13/main.svelte b/packages/svelte/tests/runtime-runes/samples/error-boundary-13/main.svelte
new file mode 100644
index 0000000000..65b71106fa
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-13/main.svelte
@@ -0,0 +1,22 @@
+<script>
+	import Child from './Child.svelte';
+
+	let count = $state(0);
+
+	const things = $derived.by(() => {
+		if (count === 1) {
+			throw new Error('123')
+		}
+		return [1, 2 ,3]
+	})
+</script>
+
+<button onclick={() => count++}>change</button>
+
+<svelte:boundary>
+	<Child {things} />
+
+	{#snippet failed()}
+		<p>Error occured</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-14/Child.svelte b/packages/svelte/tests/runtime-runes/samples/error-boundary-14/Child.svelte
new file mode 100644
index 0000000000..34e9cddfda
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-14/Child.svelte
@@ -0,0 +1,9 @@
+<script>
+	function throw_error() {
+		throw new Error('throw_error');
+	}
+</script>
+
+{throw_error()}
+
+<div>Foo</div>
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-14/_config.js b/packages/svelte/tests/runtime-runes/samples/error-boundary-14/_config.js
new file mode 100644
index 0000000000..1befa47b27
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-14/_config.js
@@ -0,0 +1,9 @@
+import { test } from '../../test';
+
+export default test({
+	mode: ['client'],
+
+	test({ assert, logs }) {
+		assert.deepEqual(logs, ['error caught']);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-14/main.svelte b/packages/svelte/tests/runtime-runes/samples/error-boundary-14/main.svelte
new file mode 100644
index 0000000000..32abad800c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-14/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	import Child from "./Child.svelte";
+</script>
+
+<svelte:boundary onerror={(e) => console.log('error caught')}>
+	<Child />
+</svelte:boundary>
+
+
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-15/Child.svelte b/packages/svelte/tests/runtime-runes/samples/error-boundary-15/Child.svelte
new file mode 100644
index 0000000000..34e9cddfda
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-15/Child.svelte
@@ -0,0 +1,9 @@
+<script>
+	function throw_error() {
+		throw new Error('throw_error');
+	}
+</script>
+
+{throw_error()}
+
+<div>Foo</div>
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-15/_config.js b/packages/svelte/tests/runtime-runes/samples/error-boundary-15/_config.js
new file mode 100644
index 0000000000..592cd3a00d
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-15/_config.js
@@ -0,0 +1,9 @@
+import { test } from '../../test';
+
+export default test({
+	mode: ['client'],
+
+	test({ assert, logs }) {
+		assert.deepEqual(logs, ['error caught 1', 'error caught 2']);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-15/main.svelte b/packages/svelte/tests/runtime-runes/samples/error-boundary-15/main.svelte
new file mode 100644
index 0000000000..e7dbf11d6e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-15/main.svelte
@@ -0,0 +1,19 @@
+<script>
+	import Child from "./Child.svelte";
+
+	function throw_error() {
+		throw new Error('test')
+	}
+</script>
+
+<svelte:boundary onerror={(e) => console.log('error caught 2')}>
+	<svelte:boundary onerror={(e) => console.log('error caught 1')}>
+		<Child />
+
+		{#snippet failed()}
+			{throw_error()}
+		{/snippet}
+	</svelte:boundary>
+</svelte:boundary>
+
+
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-16/Child.svelte b/packages/svelte/tests/runtime-runes/samples/error-boundary-16/Child.svelte
new file mode 100644
index 0000000000..0b78b50736
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-16/Child.svelte
@@ -0,0 +1,13 @@
+<script>
+	let count = $state(0);
+
+	$effect.pre(() => {
+		if (count > 1) {
+			throw new Error('too high');
+		}
+	});
+</script>
+
+{count}
+
+<button onclick={() => count++}>+</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-16/_config.js b/packages/svelte/tests/runtime-runes/samples/error-boundary-16/_config.js
new file mode 100644
index 0000000000..94a3638b28
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-16/_config.js
@@ -0,0 +1,24 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	test({ assert, target, logs }) {
+		let btn = target.querySelector('button');
+
+		btn?.click();
+		btn?.click();
+		flushSync();
+
+		assert.deepEqual(logs, ['error caught']);
+		assert.htmlEqual(target.innerHTML, `<div>An error occurred!</div>\n0\n<button>+</button>`);
+
+		btn = target.querySelector('button');
+
+		btn?.click();
+		btn?.click();
+		flushSync();
+
+		assert.deepEqual(logs, ['error caught', 'error caught']);
+		assert.htmlEqual(target.innerHTML, `<div>An error occurred!</div>\n0\n<button>+</button>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-16/main.svelte b/packages/svelte/tests/runtime-runes/samples/error-boundary-16/main.svelte
new file mode 100644
index 0000000000..b8db3c8c5a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-16/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	import Child from './Child.svelte';
+</script>
+
+<svelte:boundary onerror={(e) => console.log('error caught')}>
+	<Child />
+
+	{#snippet failed(err, reset)}
+		<div>An error occurred!</div>
+		<Child />
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-17/Child.svelte b/packages/svelte/tests/runtime-runes/samples/error-boundary-17/Child.svelte
new file mode 100644
index 0000000000..b96257d961
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-17/Child.svelte
@@ -0,0 +1,15 @@
+<script>
+	const { initial = 0 } = $props();
+
+	let count = $state(initial);
+
+	$effect.pre(() => {
+		if (count > 1) {
+			throw 'too high';
+		}
+	});
+</script>
+
+{count}
+
+<button onclick={() => count++}>+</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-17/_config.js b/packages/svelte/tests/runtime-runes/samples/error-boundary-17/_config.js
new file mode 100644
index 0000000000..5fb155f998
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-17/_config.js
@@ -0,0 +1,15 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	test({ assert, target, logs }) {
+		let btn = target.querySelector('button');
+
+		btn?.click();
+		btn?.click();
+		flushSync();
+
+		assert.deepEqual(logs, ['error caught 1', 'error caught 2']);
+		assert.htmlEqual(target.innerHTML, `<div>content before</div><div>content after</div>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-17/main.svelte b/packages/svelte/tests/runtime-runes/samples/error-boundary-17/main.svelte
new file mode 100644
index 0000000000..9675017d34
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-17/main.svelte
@@ -0,0 +1,18 @@
+<script>
+	import Child from './Child.svelte';
+</script>
+
+<div>content before</div>
+
+<svelte:boundary onerror={(e) => console.log('error caught 2')}>
+	<svelte:boundary onerror={(e) => console.log('error caught 1')}>
+		<Child />
+
+		{#snippet failed(err, reset)}
+			<div>An error occurred! {err}</div>
+			<Child initial={2} />
+		{/snippet}
+	</svelte:boundary>
+</svelte:boundary>
+
+<div>content after</div>
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-18/_config.js b/packages/svelte/tests/runtime-runes/samples/error-boundary-18/_config.js
new file mode 100644
index 0000000000..fedaaa9ad1
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-18/_config.js
@@ -0,0 +1,15 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	test({ assert, target }) {
+		let btn = target.querySelector('button');
+
+		btn?.click();
+		btn?.click();
+
+		assert.throws(() => {
+			flushSync();
+		}, /test\n\n\tin {expression}\n/);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-18/main.svelte b/packages/svelte/tests/runtime-runes/samples/error-boundary-18/main.svelte
new file mode 100644
index 0000000000..b9de7126db
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-18/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	let count = $state(0);
+
+	let test = $derived.by(() => {
+		if (count > 1) {
+			throw new Error('test');
+		}
+	});
+</script>
+
+<svelte:boundary onerror={(e) => { throw(e) }}>
+		<div>Count: {count}</div>
+		<button onclick={() => count++}>Increment</button>
+		{count} / {test}
+</svelte:boundary>
+
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-19/_config.js b/packages/svelte/tests/runtime-runes/samples/error-boundary-19/_config.js
new file mode 100644
index 0000000000..fd51be3ca1
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-19/_config.js
@@ -0,0 +1,14 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	test({ assert, target, logs }) {
+		let btn = target.querySelector('button');
+
+		btn?.click();
+		btn?.click();
+		flushSync();
+
+		assert.deepEqual(logs, ['error caught 1', 'error caught 2']);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-19/main.svelte b/packages/svelte/tests/runtime-runes/samples/error-boundary-19/main.svelte
new file mode 100644
index 0000000000..e24a94220f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-19/main.svelte
@@ -0,0 +1,22 @@
+<script>
+	let count = $state(0);
+
+	let test = $derived.by(() => {
+		if (count > 1) {
+			throw new Error('test');
+		}
+	});
+</script>
+
+<svelte:boundary onerror={(e) => {console.log('error caught 1')}}>
+		<div>Count: {count}</div>
+		<button onclick={() => count++}>Increment</button>
+		{count} / {test}
+</svelte:boundary>
+
+
+<svelte:boundary onerror={(e) => {console.log('error caught 2')}}>
+		<div>Count: {count}</div>
+		<button onclick={() => count++}>Increment</button>
+		{count} / {test}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-2/_config.js b/packages/svelte/tests/runtime-runes/samples/error-boundary-2/_config.js
new file mode 100644
index 0000000000..5e7803fc30
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-2/_config.js
@@ -0,0 +1,13 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	test({ assert, target, logs }) {
+		const btn = target.querySelector('button');
+
+		btn?.click();
+		flushSync();
+
+		assert.deepEqual(logs, ['error caught']);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-2/main.svelte b/packages/svelte/tests/runtime-runes/samples/error-boundary-2/main.svelte
new file mode 100644
index 0000000000..0f1c7fb54d
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-2/main.svelte
@@ -0,0 +1,15 @@
+<script>
+	function throw_error() {
+		throw new Error('test')
+	}
+
+	let count = $state(0);
+</script>
+
+<svelte:boundary onerror={(e) => console.log('error caught')}>
+	{count > 0 ? throw_error() : null}
+</svelte:boundary>
+
+<button onclick={() => count++}>+</button>
+
+
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-3/_config.js b/packages/svelte/tests/runtime-runes/samples/error-boundary-3/_config.js
new file mode 100644
index 0000000000..040e13676e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-3/_config.js
@@ -0,0 +1,14 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	test({ assert, target, logs }) {
+		const btn = target.querySelector('button');
+
+		btn?.click();
+		flushSync();
+
+		assert.deepEqual(logs, ['error caught']);
+		assert.htmlEqual(target.innerHTML, `<div>Fallback!</div><button>+</button>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-3/main.svelte b/packages/svelte/tests/runtime-runes/samples/error-boundary-3/main.svelte
new file mode 100644
index 0000000000..bad84666c0
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-3/main.svelte
@@ -0,0 +1,17 @@
+<script>
+	function throw_error() {
+		throw new Error('test')
+	}
+
+	let count = $state(0);
+</script>
+
+<svelte:boundary onerror={(e) => console.log('error caught')}>
+	{count > 0 ? throw_error() : null}
+
+	{#snippet failed()}
+		<div>Fallback!</div>
+	{/snippet}
+</svelte:boundary>
+
+<button onclick={() => count++}>+</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-4/_config.js b/packages/svelte/tests/runtime-runes/samples/error-boundary-4/_config.js
new file mode 100644
index 0000000000..040e13676e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-4/_config.js
@@ -0,0 +1,14 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	test({ assert, target, logs }) {
+		const btn = target.querySelector('button');
+
+		btn?.click();
+		flushSync();
+
+		assert.deepEqual(logs, ['error caught']);
+		assert.htmlEqual(target.innerHTML, `<div>Fallback!</div><button>+</button>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-4/main.svelte b/packages/svelte/tests/runtime-runes/samples/error-boundary-4/main.svelte
new file mode 100644
index 0000000000..36cb2b1b95
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-4/main.svelte
@@ -0,0 +1,17 @@
+<script>
+	function throw_error() {
+		throw new Error('test')
+	}
+
+	let count = $state(0);
+</script>
+
+{#snippet failed()}
+	<div>Fallback!</div>
+{/snippet}
+
+<svelte:boundary {failed} onerror={(e) => console.log('error caught')}>
+	{count > 0 ? throw_error() : null}
+</svelte:boundary>
+
+<button onclick={() => count++}>+</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-5/Child.svelte b/packages/svelte/tests/runtime-runes/samples/error-boundary-5/Child.svelte
new file mode 100644
index 0000000000..0b78b50736
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-5/Child.svelte
@@ -0,0 +1,13 @@
+<script>
+	let count = $state(0);
+
+	$effect.pre(() => {
+		if (count > 1) {
+			throw new Error('too high');
+		}
+	});
+</script>
+
+{count}
+
+<button onclick={() => count++}>+</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-5/_config.js b/packages/svelte/tests/runtime-runes/samples/error-boundary-5/_config.js
new file mode 100644
index 0000000000..791a4ec7a9
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-5/_config.js
@@ -0,0 +1,31 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	test({ assert, target, logs }) {
+		let btn = target.querySelector('button');
+
+		btn?.click();
+		btn?.click();
+		flushSync();
+
+		assert.deepEqual(logs, ['error caught']);
+		assert.htmlEqual(target.innerHTML, `<div>too high</div><button>Retry</button>`);
+
+		const [btn2] = target.querySelectorAll('button');
+
+		btn2?.click();
+		flushSync();
+
+		assert.htmlEqual(target.innerHTML, `0\n<button>+</button>`);
+
+		btn = target.querySelector('button');
+
+		btn?.click();
+		btn?.click();
+		flushSync();
+
+		assert.deepEqual(logs, ['error caught', 'error caught']);
+		assert.htmlEqual(target.innerHTML, `<div>too high</div><button>Retry</button>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-5/main.svelte b/packages/svelte/tests/runtime-runes/samples/error-boundary-5/main.svelte
new file mode 100644
index 0000000000..f0d1015ee6
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-5/main.svelte
@@ -0,0 +1,18 @@
+<script>
+	import Child from './Child.svelte';
+</script>
+
+<svelte:boundary onerror={(e) => console.log('error caught')}>
+	<svelte:boundary onerror={(e) => { throw e }}>
+		<svelte:boundary>
+			<Child />
+		</svelte:boundary>
+	</svelte:boundary>
+
+	{#snippet failed(e, retry)}
+		<div>too high</div>
+		<button onclick={retry}>Retry</button>
+	{/snippet}
+</svelte:boundary>
+
+
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-6/_config.js b/packages/svelte/tests/runtime-runes/samples/error-boundary-6/_config.js
new file mode 100644
index 0000000000..6a895cfa36
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-6/_config.js
@@ -0,0 +1,13 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	test({ assert, target }) {
+		const btn = target.querySelector('button');
+
+		btn?.click();
+		flushSync();
+
+		assert.htmlEqual(target.innerHTML, `<button>+</button><div>There is an error!</div>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-6/main.svelte b/packages/svelte/tests/runtime-runes/samples/error-boundary-6/main.svelte
new file mode 100644
index 0000000000..0ea6d964e8
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-6/main.svelte
@@ -0,0 +1,20 @@
+<script>
+	function throw_error() {
+		throw new Error('test')
+	}
+
+	let count = $state(0);
+	let error = $state();
+</script>
+
+<svelte:boundary onerror={(e) => error = e}>
+	{count > 0 ? throw_error() : null}
+</svelte:boundary>
+
+<button onclick={() => count++}>+</button>
+
+{#if error}
+	<div>There is an error!</div>
+{/if}
+
+
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-7/Child.svelte b/packages/svelte/tests/runtime-runes/samples/error-boundary-7/Child.svelte
new file mode 100644
index 0000000000..35e4424414
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-7/Child.svelte
@@ -0,0 +1,5 @@
+<script>
+	$effect.pre(() => {
+		throw new Error('oh noes');
+	});
+</script>
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-7/_config.js b/packages/svelte/tests/runtime-runes/samples/error-boundary-7/_config.js
new file mode 100644
index 0000000000..9664c233b7
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-7/_config.js
@@ -0,0 +1,8 @@
+import { test } from '../../test';
+
+export default test({
+	test({ assert, target, logs }) {
+		assert.deepEqual(logs, ['error caught']);
+		assert.htmlEqual(target.innerHTML, `<div>Error!</div><button>Retry</button>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-7/main.svelte b/packages/svelte/tests/runtime-runes/samples/error-boundary-7/main.svelte
new file mode 100644
index 0000000000..e94dc34b48
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-7/main.svelte
@@ -0,0 +1,14 @@
+<script>
+	import Child from './Child.svelte';
+</script>
+
+<svelte:boundary onerror={(e) => console.log('error caught')}>
+	<Child />
+
+	{#snippet failed(e, retry)}
+		<div>Error!</div>
+		<button onclick={retry}>Retry</button>
+	{/snippet}
+</svelte:boundary>
+
+
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-8/Child.svelte b/packages/svelte/tests/runtime-runes/samples/error-boundary-8/Child.svelte
new file mode 100644
index 0000000000..35e4424414
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-8/Child.svelte
@@ -0,0 +1,5 @@
+<script>
+	$effect.pre(() => {
+		throw new Error('oh noes');
+	});
+</script>
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-8/_config.js b/packages/svelte/tests/runtime-runes/samples/error-boundary-8/_config.js
new file mode 100644
index 0000000000..9664c233b7
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-8/_config.js
@@ -0,0 +1,8 @@
+import { test } from '../../test';
+
+export default test({
+	test({ assert, target, logs }) {
+		assert.deepEqual(logs, ['error caught']);
+		assert.htmlEqual(target.innerHTML, `<div>Error!</div><button>Retry</button>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-8/main.svelte b/packages/svelte/tests/runtime-runes/samples/error-boundary-8/main.svelte
new file mode 100644
index 0000000000..2cd07dbb46
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-8/main.svelte
@@ -0,0 +1,17 @@
+<script>
+	import Child from './Child.svelte';
+</script>
+
+<svelte:boundary onerror={(e) => console.log('error caught')}>
+	<!-- boundary should rethrow error as there's no control flow -->
+	<svelte:boundary>
+		<Child />
+	</svelte:boundary>
+
+	{#snippet failed(e, retry)}
+		<div>Error!</div>
+		<button onclick={retry}>Retry</button>
+	{/snippet}
+</svelte:boundary>
+
+
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-9/Child.svelte b/packages/svelte/tests/runtime-runes/samples/error-boundary-9/Child.svelte
new file mode 100644
index 0000000000..35e4424414
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-9/Child.svelte
@@ -0,0 +1,5 @@
+<script>
+	$effect.pre(() => {
+		throw new Error('oh noes');
+	});
+</script>
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-9/_config.js b/packages/svelte/tests/runtime-runes/samples/error-boundary-9/_config.js
new file mode 100644
index 0000000000..9664c233b7
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-9/_config.js
@@ -0,0 +1,8 @@
+import { test } from '../../test';
+
+export default test({
+	test({ assert, target, logs }) {
+		assert.deepEqual(logs, ['error caught']);
+		assert.htmlEqual(target.innerHTML, `<div>Error!</div><button>Retry</button>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-9/main.svelte b/packages/svelte/tests/runtime-runes/samples/error-boundary-9/main.svelte
new file mode 100644
index 0000000000..082fe873ee
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-9/main.svelte
@@ -0,0 +1,20 @@
+<script>
+	import Child from './Child.svelte';
+</script>
+
+<svelte:boundary onerror={(e) => console.log('error caught')}>
+	<!-- boundary should rethrow error as there's no control flow -->
+	<svelte:boundary>
+		<!-- rethrow the error in the handler -->
+		<svelte:boundary onerror={e => { throw e }}>
+			<Child />
+		</svelte:boundary>
+	</svelte:boundary>
+
+	{#snippet failed(e, retry)}
+		<div>Error!</div>
+		<button onclick={retry}>Retry</button>
+	{/snippet}
+</svelte:boundary>
+
+
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary/_config.js b/packages/svelte/tests/runtime-runes/samples/error-boundary/_config.js
new file mode 100644
index 0000000000..1befa47b27
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary/_config.js
@@ -0,0 +1,9 @@
+import { test } from '../../test';
+
+export default test({
+	mode: ['client'],
+
+	test({ assert, logs }) {
+		assert.deepEqual(logs, ['error caught']);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary/main.svelte b/packages/svelte/tests/runtime-runes/samples/error-boundary/main.svelte
new file mode 100644
index 0000000000..36bf871b5a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	function throw_error() {
+		throw new Error('test')
+	}
+</script>
+
+<svelte:boundary onerror={(e) => console.log('error caught')}>
+	{throw_error()}
+</svelte:boundary>
+
+
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
index c30662cc76..a03b7de570 100644
--- a/packages/svelte/types/index.d.ts
+++ b/packages/svelte/types/index.d.ts
@@ -1163,6 +1163,11 @@ declare module 'svelte/compiler' {
 			name: 'svelte:fragment';
 		}
 
+		export interface SvelteBoundary extends BaseElement {
+			type: 'SvelteBoundary';
+			name: 'svelte:boundary';
+		}
+
 		export interface SvelteHead extends BaseElement {
 			type: 'SvelteHead';
 			name: 'svelte:head';
@@ -1280,7 +1285,8 @@ declare module 'svelte/compiler' {
 		| AST.SvelteHead
 		| AST.SvelteOptionsRaw
 		| AST.SvelteSelf
-		| AST.SvelteWindow;
+		| AST.SvelteWindow
+		| AST.SvelteBoundary;
 	/**
 	 * The preprocess function provides convenient hooks for arbitrarily transforming component source code.
 	 * For example, it can be used to convert a `<style lang="sass">` block into vanilla CSS.

From f75a9a566eafccc8ef96082666166178f967a853 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Sun, 1 Dec 2024 08:57:44 -0500
Subject: [PATCH 126/159] Version Packages (#14486)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/polite-peaches-do.md | 5 -----
 packages/svelte/CHANGELOG.md    | 6 ++++++
 packages/svelte/package.json    | 2 +-
 packages/svelte/src/version.js  | 2 +-
 4 files changed, 8 insertions(+), 7 deletions(-)
 delete mode 100644 .changeset/polite-peaches-do.md

diff --git a/.changeset/polite-peaches-do.md b/.changeset/polite-peaches-do.md
deleted file mode 100644
index 7b59c33ea7..0000000000
--- a/.changeset/polite-peaches-do.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': minor
----
-
-feat: add error boundaries with `<svelte:boundary>`
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index b66a6e7e4f..90cdab294f 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,11 @@
 # svelte
 
+## 5.3.0
+
+### Minor Changes
+
+- feat: add error boundaries with `<svelte:boundary>` ([#14211](https://github.com/sveltejs/svelte/pull/14211))
+
 ## 5.2.12
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 641dcfa335..53eb447211 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.2.12",
+  "version": "5.3.0",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 500b12a06e..b24d5465b1 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.2.12';
+export const VERSION = '5.3.0';
 export const PUBLIC_VERSION = '5';

From 9fcfd7f0d1fc79a9e2449b5ddb3d01875ebb425f Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sun, 1 Dec 2024 09:58:14 -0500
Subject: [PATCH 127/159] docs: note when boundaries were added (#14487)

---
 documentation/docs/05-special-elements/01-svelte-boundary.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/documentation/docs/05-special-elements/01-svelte-boundary.md b/documentation/docs/05-special-elements/01-svelte-boundary.md
index 2e9f85c83a..d0a2fb9ae9 100644
--- a/documentation/docs/05-special-elements/01-svelte-boundary.md
+++ b/documentation/docs/05-special-elements/01-svelte-boundary.md
@@ -6,6 +6,9 @@ title: <svelte:boundary>
 <svelte:boundary onerror={handler}>...</svelte:boundary>
 ```
 
+> [!NOTE]
+> This feature was added in 5.3.0
+
 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.

From fe15ad4ae8c6523add7b2a24c86b3feafa7c5cc5 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sun, 1 Dec 2024 10:22:51 -0500
Subject: [PATCH 128/159] fix: treat spread elements the same as call
 expressions (#14488)

---
 .changeset/silly-readers-double.md               |  5 +++++
 .../src/compiler/phases/2-analyze/index.js       |  2 ++
 .../phases/2-analyze/visitors/SpreadElement.js   | 16 ++++++++++++++++
 .../samples/props-spread-operator/Child.svelte   |  5 +++++
 .../samples/props-spread-operator/_config.js     | 13 +++++++++++++
 .../samples/props-spread-operator/main.svelte    | 10 ++++++++++
 6 files changed, 51 insertions(+)
 create mode 100644 .changeset/silly-readers-double.md
 create mode 100644 packages/svelte/src/compiler/phases/2-analyze/visitors/SpreadElement.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/props-spread-operator/Child.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/props-spread-operator/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/props-spread-operator/main.svelte

diff --git a/.changeset/silly-readers-double.md b/.changeset/silly-readers-double.md
new file mode 100644
index 0000000000..6ed1ec41b6
--- /dev/null
+++ b/.changeset/silly-readers-double.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: treat spread elements the same as call expressions
diff --git a/packages/svelte/src/compiler/phases/2-analyze/index.js b/packages/svelte/src/compiler/phases/2-analyze/index.js
index 67eea43e1e..f5cd6ff9f7 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/index.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/index.js
@@ -51,6 +51,7 @@ import { RenderTag } from './visitors/RenderTag.js';
 import { SlotElement } from './visitors/SlotElement.js';
 import { SnippetBlock } from './visitors/SnippetBlock.js';
 import { SpreadAttribute } from './visitors/SpreadAttribute.js';
+import { SpreadElement } from './visitors/SpreadElement.js';
 import { StyleDirective } from './visitors/StyleDirective.js';
 import { SvelteBody } from './visitors/SvelteBody.js';
 import { SvelteComponent } from './visitors/SvelteComponent.js';
@@ -163,6 +164,7 @@ const visitors = {
 	SlotElement,
 	SnippetBlock,
 	SpreadAttribute,
+	SpreadElement,
 	StyleDirective,
 	SvelteBody,
 	SvelteComponent,
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/SpreadElement.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/SpreadElement.js
new file mode 100644
index 0000000000..c31f86e1a8
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/SpreadElement.js
@@ -0,0 +1,16 @@
+/** @import { SpreadElement } from 'estree' */
+/** @import { Context } from '../types' */
+
+/**
+ * @param {SpreadElement} node
+ * @param {Context} context
+ */
+export function SpreadElement(node, context) {
+	if (context.state.expression) {
+		// treat e.g. `[...x]` the same as `[...x.values()]`
+		context.state.expression.has_call = true;
+		context.state.expression.has_state = true;
+	}
+
+	context.next();
+}
diff --git a/packages/svelte/tests/runtime-runes/samples/props-spread-operator/Child.svelte b/packages/svelte/tests/runtime-runes/samples/props-spread-operator/Child.svelte
new file mode 100644
index 0000000000..9897004865
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/props-spread-operator/Child.svelte
@@ -0,0 +1,5 @@
+<script>
+	let { numbers } = $props();
+</script>
+
+{numbers.join(', ')}
diff --git a/packages/svelte/tests/runtime-runes/samples/props-spread-operator/_config.js b/packages/svelte/tests/runtime-runes/samples/props-spread-operator/_config.js
new file mode 100644
index 0000000000..43fbae84d4
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/props-spread-operator/_config.js
@@ -0,0 +1,13 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: '<button>+1</button> 0, 1, 2',
+
+	test({ target, assert }) {
+		const btn = target.querySelector('button');
+
+		flushSync(() => btn?.click());
+		assert.htmlEqual(target.innerHTML, '<button>+1</button> 0, 1, 2, 3');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/props-spread-operator/main.svelte b/packages/svelte/tests/runtime-runes/samples/props-spread-operator/main.svelte
new file mode 100644
index 0000000000..794cdec852
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/props-spread-operator/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	import { SvelteSet } from 'svelte/reactivity';
+	import Child from './Child.svelte';
+
+	const numbers = new SvelteSet([0, 1, 2]);
+</script>
+
+<button onclick={() => numbers.add(numbers.size)}>+1</button>
+
+<Child numbers={[...numbers]} />

From 945b625e95171de227bffa5a44a62dd983b15b93 Mon Sep 17 00:00:00 2001
From: ComputerGuy <63362464+Ocean-OS@users.noreply.github.com>
Date: Sun, 1 Dec 2024 07:23:04 -0800
Subject: [PATCH 129/159] fix: Prevent `$state` `bigint`s incrementing and
 decrementing from throwing (#14485)

* Fix `$.update` and `$.update_pre` for bigints

* resolve conflicts

* fix some things

* fix thing i definitely didn't just break

* hopefully this will fix it

* fix formatting

* simplify

* style consistency

* simplify

* changeset

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/young-beds-beam.md                 |  5 ++++
 .../svelte/src/internal/client/runtime.js     | 25 +++++++++++++------
 packages/svelte/tests/signals/test.ts         | 16 ++++++++++++
 3 files changed, 38 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/young-beds-beam.md

diff --git a/.changeset/young-beds-beam.md b/.changeset/young-beds-beam.md
new file mode 100644
index 0000000000..4349d82dd9
--- /dev/null
+++ b/.changeset/young-beds-beam.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: correctly increment/decrement bigints
diff --git a/packages/svelte/src/internal/client/runtime.js b/packages/svelte/src/internal/client/runtime.js
index caa481dd1f..2779898d6f 100644
--- a/packages/svelte/src/internal/client/runtime.js
+++ b/packages/svelte/src/internal/client/runtime.js
@@ -1068,23 +1068,32 @@ function get_parent_context(component_context) {
 }
 
 /**
- * @param {Value<number>} signal
+ * @template {number | bigint} T
+ * @param {Value<T>} signal
  * @param {1 | -1} [d]
- * @returns {number}
+ * @returns {T}
  */
 export function update(signal, d = 1) {
-	var value = +get(signal);
-	set(signal, value + d);
-	return value;
+	var value = get(signal);
+	var result = d === 1 ? value++ : value--;
+
+	set(signal, value);
+
+	// @ts-expect-error
+	return result;
 }
 
 /**
- * @param {Value<number>} signal
+ * @template {number | bigint} T
+ * @param {Value<T>} signal
  * @param {1 | -1} [d]
- * @returns {number}
+ * @returns {T}
  */
 export function update_pre(signal, d = 1) {
-	return set(signal, +get(signal) + d);
+	var value = get(signal);
+
+	// @ts-expect-error
+	return set(signal, d === 1 ? ++value : --value);
 }
 
 /**
diff --git a/packages/svelte/tests/signals/test.ts b/packages/svelte/tests/signals/test.ts
index db061bfb55..6796655cc8 100644
--- a/packages/svelte/tests/signals/test.ts
+++ b/packages/svelte/tests/signals/test.ts
@@ -765,4 +765,20 @@ describe('signals', () => {
 			assert.deepEqual(a.deriveds, null);
 		};
 	});
+
+	test('bigint states update correctly', () => {
+		return () => {
+			const count = state(0n);
+
+			assert.doesNotThrow(() => $.update(count));
+			assert.equal($.get(count), 1n);
+			assert.doesNotThrow(() => $.update(count, -1));
+			assert.equal($.get(count), 0n);
+
+			assert.doesNotThrow(() => $.update_pre(count));
+			assert.equal($.get(count), 1n);
+			assert.doesNotThrow(() => $.update_pre(count, -1));
+			assert.equal($.get(count), 0n);
+		};
+	});
 });

From 99b4cfbb510af722d3d111dac4d0059766ba6610 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Sun, 1 Dec 2024 16:20:00 -0500
Subject: [PATCH 130/159] Version Packages (#14489)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/silly-readers-double.md | 5 -----
 .changeset/young-beds-beam.md      | 5 -----
 packages/svelte/CHANGELOG.md       | 8 ++++++++
 packages/svelte/package.json       | 2 +-
 packages/svelte/src/version.js     | 2 +-
 5 files changed, 10 insertions(+), 12 deletions(-)
 delete mode 100644 .changeset/silly-readers-double.md
 delete mode 100644 .changeset/young-beds-beam.md

diff --git a/.changeset/silly-readers-double.md b/.changeset/silly-readers-double.md
deleted file mode 100644
index 6ed1ec41b6..0000000000
--- a/.changeset/silly-readers-double.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: treat spread elements the same as call expressions
diff --git a/.changeset/young-beds-beam.md b/.changeset/young-beds-beam.md
deleted file mode 100644
index 4349d82dd9..0000000000
--- a/.changeset/young-beds-beam.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: correctly increment/decrement bigints
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 90cdab294f..e840cb08ed 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,13 @@
 # svelte
 
+## 5.3.1
+
+### Patch Changes
+
+- fix: treat spread elements the same as call expressions ([#14488](https://github.com/sveltejs/svelte/pull/14488))
+
+- fix: correctly increment/decrement bigints ([#14485](https://github.com/sveltejs/svelte/pull/14485))
+
 ## 5.3.0
 
 ### Minor Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 53eb447211..343508b337 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.3.0",
+  "version": "5.3.1",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index b24d5465b1..ef611c9365 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.3.0';
+export const VERSION = '5.3.1';
 export const PUBLIC_VERSION = '5';

From 1f25bd4f4758529f98880ce85ad215c3e28beaad Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 2 Dec 2024 04:19:27 -0500
Subject: [PATCH 131/159] fix: correctly prune CSS for elements inside snippets
 (#14494)

fixes #14483
---
 .changeset/popular-dogs-exist.md                  |  5 +++++
 .../compiler/phases/2-analyze/css/css-prune.js    | 15 +++++++++------
 .../css/samples/render-tag-loop/expected.css      |  2 +-
 .../css/samples/snippets-elements/expected.css    |  4 ++++
 .../css/samples/snippets-elements/input.svelte    | 13 +++++++++++++
 5 files changed, 32 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/popular-dogs-exist.md
 create mode 100644 packages/svelte/tests/css/samples/snippets-elements/expected.css
 create mode 100644 packages/svelte/tests/css/samples/snippets-elements/input.svelte

diff --git a/.changeset/popular-dogs-exist.md b/.changeset/popular-dogs-exist.md
new file mode 100644
index 0000000000..6d8011b0bb
--- /dev/null
+++ b/.changeset/popular-dogs-exist.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: correctly prune CSS for elements inside snippets
diff --git a/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js b/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js
index 83c50c73d0..d017b215f2 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js
@@ -201,16 +201,19 @@ function apply_combinator(relative_selector, parent_selectors, rule, node) {
 				const parent = path[i];
 
 				if (parent.type === 'SnippetBlock') {
-					if (seen.has(parent)) return true;
-					seen.add(parent);
+					if (seen.has(parent)) {
+						parent_matched = true;
+					} else {
+						seen.add(parent);
 
-					for (const site of parent.metadata.sites) {
-						if (apply_combinator(relative_selector, parent_selectors, rule, site)) {
-							return true;
+						for (const site of parent.metadata.sites) {
+							if (apply_combinator(relative_selector, parent_selectors, rule, site)) {
+								parent_matched = true;
+							}
 						}
 					}
 
-					return false;
+					break;
 				}
 
 				if (parent.type === 'RegularElement' || parent.type === 'SvelteElement') {
diff --git a/packages/svelte/tests/css/samples/render-tag-loop/expected.css b/packages/svelte/tests/css/samples/render-tag-loop/expected.css
index 1f05ddb41c..9ced15e964 100644
--- a/packages/svelte/tests/css/samples/render-tag-loop/expected.css
+++ b/packages/svelte/tests/css/samples/render-tag-loop/expected.css
@@ -1,5 +1,5 @@
 
-	div div.svelte-xyz {
+	div.svelte-xyz div:where(.svelte-xyz) {
 		color: green;
 	}
 	/* (unused) div + div {
diff --git a/packages/svelte/tests/css/samples/snippets-elements/expected.css b/packages/svelte/tests/css/samples/snippets-elements/expected.css
new file mode 100644
index 0000000000..22dcfce37f
--- /dev/null
+++ b/packages/svelte/tests/css/samples/snippets-elements/expected.css
@@ -0,0 +1,4 @@
+
+	x.svelte-xyz y:where(.svelte-xyz) {
+		color: green;
+	}
diff --git a/packages/svelte/tests/css/samples/snippets-elements/input.svelte b/packages/svelte/tests/css/samples/snippets-elements/input.svelte
new file mode 100644
index 0000000000..a4d7f25375
--- /dev/null
+++ b/packages/svelte/tests/css/samples/snippets-elements/input.svelte
@@ -0,0 +1,13 @@
+{#snippet foo()}
+	<x>
+		<y></y>
+	</x>
+{/snippet}
+
+{@render foo()}
+
+<style>
+	x y {
+		color: green;
+	}
+</style>

From 83cec2f3d1690c3dc5552b2439932884f339bd0b Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 2 Dec 2024 04:23:18 -0500
Subject: [PATCH 132/159] chore: better SSR output for <svelte:element>
 (#14493)

---
 .../3-transform/server/visitors/SvelteElement.js    | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/SvelteElement.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/SvelteElement.js
index d53a223dbe..9f6faa33c8 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/SvelteElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/SvelteElement.js
@@ -14,13 +14,16 @@ import { build_template } from './shared/utils.js';
  */
 export function SvelteElement(node, context) {
 	let tag = /** @type {Expression} */ (context.visit(node.tag));
-	if (tag.type !== 'Identifier') {
-		const tag_id = context.state.scope.generate('$$tag');
-		context.state.init.push(b.const(tag_id, tag));
-		tag = b.id(tag_id);
-	}
 
 	if (dev) {
+		// Ensure getters/function calls aren't called multiple times.
+		// If we ever start referencing `tag` more than once in prod, move this out of the if block.
+		if (tag.type !== 'Identifier') {
+			const tag_id = context.state.scope.generate('$$tag');
+			context.state.init.push(b.const(tag_id, tag));
+			tag = b.id(tag_id);
+		}
+
 		if (node.fragment.nodes.length > 0) {
 			context.state.init.push(b.stmt(b.call('$.validate_void_dynamic_element', b.thunk(tag))));
 		}

From ef640c3b461783aef983d091712b7e9271d2cc4d Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 2 Dec 2024 04:25:31 -0500
Subject: [PATCH 133/159] fix: render attributes during SSR regardless of case
 (#14492)

fixes part of #14479
---
 .changeset/proud-crews-itch.md                |  5 +++++
 packages/svelte/src/internal/server/index.js  |  4 +++-
 .../samples/dynamic-element-svg/_config.js    | 20 +++++++++++++++++++
 .../samples/dynamic-element-svg/main.svelte   | 11 ++++++++++
 4 files changed, 39 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/proud-crews-itch.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/dynamic-element-svg/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/dynamic-element-svg/main.svelte

diff --git a/.changeset/proud-crews-itch.md b/.changeset/proud-crews-itch.md
new file mode 100644
index 0000000000..fd4657c588
--- /dev/null
+++ b/.changeset/proud-crews-itch.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: render attributes during SSR regardless of case
diff --git a/packages/svelte/src/internal/server/index.js b/packages/svelte/src/internal/server/index.js
index 615a49fbd4..b944c602b8 100644
--- a/packages/svelte/src/internal/server/index.js
+++ b/packages/svelte/src/internal/server/index.js
@@ -222,11 +222,13 @@ export function spread_attributes(attrs, classes, styles, flags = 0) {
 		if (name[0] === '$' && name[1] === '$') continue; // faster than name.startsWith('$$')
 		if (INVALID_ATTR_NAME_CHAR_REGEX.test(name)) continue;
 
+		var value = attrs[name];
+
 		if (lowercase) {
 			name = name.toLowerCase();
 		}
 
-		attr_str += attr(name, attrs[name], is_html && is_boolean_attribute(name));
+		attr_str += attr(name, value, is_html && is_boolean_attribute(name));
 	}
 
 	return attr_str;
diff --git a/packages/svelte/tests/runtime-runes/samples/dynamic-element-svg/_config.js b/packages/svelte/tests/runtime-runes/samples/dynamic-element-svg/_config.js
new file mode 100644
index 0000000000..b7c96dc8bd
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/dynamic-element-svg/_config.js
@@ -0,0 +1,20 @@
+import { test } from '../../test';
+
+export default test({
+	mode: ['hydrate'],
+
+	test({ assert, target, hydrate }) {
+		const svg = target.querySelector('svg');
+		const circle = target.querySelector('circle');
+
+		assert.equal(svg?.getAttribute('viewBox'), '0 0 1000 1000');
+		assert.equal(svg?.namespaceURI, 'http://www.w3.org/2000/svg');
+		assert.equal(circle?.namespaceURI, 'http://www.w3.org/2000/svg');
+
+		hydrate();
+
+		assert.equal(svg?.getAttribute('viewBox'), '0 0 1000 1000');
+		assert.equal(svg?.namespaceURI, 'http://www.w3.org/2000/svg');
+		assert.equal(circle?.namespaceURI, 'http://www.w3.org/2000/svg');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/dynamic-element-svg/main.svelte b/packages/svelte/tests/runtime-runes/samples/dynamic-element-svg/main.svelte
new file mode 100644
index 0000000000..b7e53714ac
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/dynamic-element-svg/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	let props = {
+		height: '100px',
+		width: '100px',
+		viewBox: '0 0 1000 1000'
+	};
+</script>
+
+<svelte:element this={'svg'} {...props}>
+	<circle cx="500" cy="500" r="500"></circle>
+</svelte:element>

From a39605ec7a4437cc30e48e2f8f5f55b28a6a79c1 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 2 Dec 2024 08:18:53 -0500
Subject: [PATCH 134/159] Version Packages (#14499)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/popular-dogs-exist.md | 5 -----
 .changeset/proud-crews-itch.md   | 5 -----
 packages/svelte/CHANGELOG.md     | 8 ++++++++
 packages/svelte/package.json     | 2 +-
 packages/svelte/src/version.js   | 2 +-
 5 files changed, 10 insertions(+), 12 deletions(-)
 delete mode 100644 .changeset/popular-dogs-exist.md
 delete mode 100644 .changeset/proud-crews-itch.md

diff --git a/.changeset/popular-dogs-exist.md b/.changeset/popular-dogs-exist.md
deleted file mode 100644
index 6d8011b0bb..0000000000
--- a/.changeset/popular-dogs-exist.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: correctly prune CSS for elements inside snippets
diff --git a/.changeset/proud-crews-itch.md b/.changeset/proud-crews-itch.md
deleted file mode 100644
index fd4657c588..0000000000
--- a/.changeset/proud-crews-itch.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: render attributes during SSR regardless of case
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index e840cb08ed..5d6f63b8c6 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,13 @@
 # svelte
 
+## 5.3.2
+
+### Patch Changes
+
+- fix: correctly prune CSS for elements inside snippets ([#14494](https://github.com/sveltejs/svelte/pull/14494))
+
+- fix: render attributes during SSR regardless of case ([#14492](https://github.com/sveltejs/svelte/pull/14492))
+
 ## 5.3.1
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 343508b337..81c37f025c 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.3.1",
+  "version": "5.3.2",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index ef611c9365..7307d00a3d 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.3.1';
+export const VERSION = '5.3.2';
 export const PUBLIC_VERSION = '5';

From a283083751e3fa40d50945a362ba1586fb4f36b0 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Mon, 2 Dec 2024 14:19:48 +0100
Subject: [PATCH 135/159] feat: each without as (#14396)

* feat: each without as

WIP

closes #8348

* properly

* docs

* changeset

* real world demo

* simplify

* typo

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/sixty-zoos-enjoy.md                |  5 ++
 .../docs/03-template-syntax/03-each.md        | 24 ++++++++++
 .../src/compiler/phases/1-parse/state/tag.js  | 23 +++++++---
 .../phases/2-analyze/visitors/EachBlock.js    |  2 +-
 .../3-transform/client/visitors/EachBlock.js  | 13 +++---
 .../3-transform/server/visitors/EachBlock.js  |  6 ++-
 packages/svelte/src/compiler/phases/scope.js  | 46 ++++++++++---------
 .../svelte/src/compiler/types/template.d.ts   |  3 +-
 .../samples/each-without-as/_config.js        |  5 ++
 .../samples/each-without-as/main.svelte       |  7 +++
 packages/svelte/types/index.d.ts              |  3 +-
 11 files changed, 98 insertions(+), 39 deletions(-)
 create mode 100644 .changeset/sixty-zoos-enjoy.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/each-without-as/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/each-without-as/main.svelte

diff --git a/.changeset/sixty-zoos-enjoy.md b/.changeset/sixty-zoos-enjoy.md
new file mode 100644
index 0000000000..71f3db3e1f
--- /dev/null
+++ b/.changeset/sixty-zoos-enjoy.md
@@ -0,0 +1,5 @@
+---
+'svelte': minor
+---
+
+feat: support `#each` without `as`
diff --git a/documentation/docs/03-template-syntax/03-each.md b/documentation/docs/03-template-syntax/03-each.md
index e4246b6e9a..df0ba4d8f5 100644
--- a/documentation/docs/03-template-syntax/03-each.md
+++ b/documentation/docs/03-template-syntax/03-each.md
@@ -74,6 +74,30 @@ You can freely use destructuring and rest patterns in each blocks.
 {/each}
 ```
 
+## Each blocks without an item
+
+```svelte
+<!--- copy: false  --->
+{#each expression}...{/each}
+```
+
+```svelte
+<!--- copy: false  --->
+{#each expression, index}...{/each}
+```
+
+In case you just want to render something `n` times, you can omit the `as` part ([demo](/playground/untitled#H4sIAAAAAAAAE3WR0W7CMAxFf8XKNAk0WsSeUEaRpn3Guoc0MbQiJFHiMlDVf18SOrZJ48259_jaVgZmxBEZZ28thgCNFV6xBdt1GgPj7wOji0t2EqI-wa_OleGEmpLWiID_6dIaQkMxhm1UdwKpRQhVzWSaVORJNdvWpqbhAYVsYQCNZk8thzWMC_DCHMZk3wPSThNQ088I3mghD9UwSwHwlLE5PMIzVFUFq3G7WUZ2OyUvU3JOuZU332wCXTRmtPy1NgzXZtUFp8WFw9536uWqpbIgPEaDsJBW90cTOHh0KGi2XsBq5-cT6-3nPauxXqHnsHJnCFZ3CvJVkyuCQ0mFF9TZyCQ162WGvteLKfG197Y3iv_pz_fmS68Hxt8iPBPj5HscP8YvCNX7uhYCAAA=)):
+
+```svelte
+<div class="chess-board">
+	{#each { length: 8 }, rank}
+		{#each { length: 8 }, file}
+			<div class:black={(rank + file) % 2 === 1}></div>
+		{/each}
+	{/each}
+</div>
+```
+
 ## Else blocks
 
 ```svelte
diff --git a/packages/svelte/src/compiler/phases/1-parse/state/tag.js b/packages/svelte/src/compiler/phases/1-parse/state/tag.js
index 3366c9ec97..317afe6f2f 100644
--- a/packages/svelte/src/compiler/phases/1-parse/state/tag.js
+++ b/packages/svelte/src/compiler/phases/1-parse/state/tag.js
@@ -1,4 +1,4 @@
-/** @import { ArrowFunctionExpression, Expression, Identifier } from 'estree' */
+/** @import { ArrowFunctionExpression, Expression, Identifier, Pattern } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { Parser } from '../index.js' */
 import read_pattern from '../read/context.js';
@@ -142,16 +142,25 @@ function open(parser) {
 				parser.index = end;
 			}
 		}
-		parser.eat('as', true);
-		parser.require_whitespace();
-
-		const context = read_pattern(parser);
-
-		parser.allow_whitespace();
 
+		/** @type {Pattern | null} */
+		let context = null;
 		let index;
 		let key;
 
+		if (parser.eat('as')) {
+			parser.require_whitespace();
+
+			context = read_pattern(parser);
+		} else {
+			// {#each Array.from({ length: 10 }), i} is read as a sequence expression,
+			// which is set back above - we now gotta reset the index as a consequence
+			// to properly read the , i part
+			parser.index = /** @type {number} */ (expression.end);
+		}
+
+		parser.allow_whitespace();
+
 		if (parser.eat(',')) {
 			parser.allow_whitespace();
 			index = parser.read_identifier();
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/EachBlock.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/EachBlock.js
index ac9e75bf8c..bd6c936f99 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/EachBlock.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/EachBlock.js
@@ -16,7 +16,7 @@ export function EachBlock(node, context) {
 	validate_block_not_empty(node.fallback, context);
 
 	const id = node.context;
-	if (id.type === 'Identifier' && (id.name === '$state' || id.name === '$derived')) {
+	if (id?.type === 'Identifier' && (id.name === '$state' || id.name === '$derived')) {
 		// TODO weird that this is necessary
 		e.state_invalid_placement(node, id.name);
 	}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/EachBlock.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/EachBlock.js
index 55d7ded247..d34f39f4c7 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/EachBlock.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/EachBlock.js
@@ -47,8 +47,8 @@ export function EachBlock(node, context) {
 
 	const key_is_item =
 		node.key?.type === 'Identifier' &&
-		node.context.type === 'Identifier' &&
-		node.context.name === node.key.name;
+		node.context?.type === 'Identifier' &&
+		node.context?.name === node.key.name;
 
 	// if the each block expression references a store subscription, we need
 	// to use mutable stores internally
@@ -147,7 +147,7 @@ export function EachBlock(node, context) {
 	// which needs a reference to the index
 	const index =
 		each_node_meta.contains_group_binding || !node.index ? each_node_meta.index : b.id(node.index);
-	const item = node.context.type === 'Identifier' ? node.context : b.id('$$item');
+	const item = node.context?.type === 'Identifier' ? node.context : b.id('$$item');
 
 	let uses_index = each_node_meta.contains_group_binding;
 	let key_uses_index = false;
@@ -185,7 +185,7 @@ export function EachBlock(node, context) {
 	if (!context.state.analysis.runes) sequence.push(invalidate);
 	if (invalidate_store) sequence.push(invalidate_store);
 
-	if (node.context.type === 'Identifier') {
+	if (node.context?.type === 'Identifier') {
 		const binding = /** @type {Binding} */ (context.state.scope.get(node.context.name));
 
 		child_state.transform[node.context.name] = {
@@ -218,7 +218,7 @@ export function EachBlock(node, context) {
 		};
 
 		delete key_state.transform[node.context.name];
-	} else {
+	} else if (node.context) {
 		const unwrapped = (flags & EACH_ITEM_REACTIVE) !== 0 ? b.call('$.get', item) : item;
 
 		for (const path of extract_paths(node.context)) {
@@ -260,11 +260,12 @@ export function EachBlock(node, context) {
 	let key_function = b.id('$.index');
 
 	if (node.metadata.keyed) {
+		const pattern = /** @type {Pattern} */ (node.context); // can only be keyed when a context is provided
 		const expression = /** @type {Expression} */ (
 			context.visit(/** @type {Expression} */ (node.key), key_state)
 		);
 
-		key_function = b.arrow(key_uses_index ? [node.context, index] : [node.context], expression);
+		key_function = b.arrow(key_uses_index ? [pattern, index] : [pattern], expression);
 	}
 
 	if (node.index && each_node_meta.contains_group_binding) {
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/EachBlock.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/EachBlock.js
index 478bb355a7..104f1f2405 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/EachBlock.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/EachBlock.js
@@ -21,7 +21,11 @@ export function EachBlock(node, context) {
 	state.init.push(b.const(array_id, b.call('$.ensure_array_like', collection)));
 
 	/** @type {Statement[]} */
-	const each = [b.let(/** @type {Pattern} */ (node.context), b.member(array_id, index, true))];
+	const each = [];
+
+	if (node.context) {
+		each.push(b.let(node.context, b.member(array_id, index, true)));
+	}
 
 	if (index.name !== node.index && node.index != null) {
 		each.push(b.let(node.index, index));
diff --git a/packages/svelte/src/compiler/phases/scope.js b/packages/svelte/src/compiler/phases/scope.js
index 454bb8c34e..7f22aa7c87 100644
--- a/packages/svelte/src/compiler/phases/scope.js
+++ b/packages/svelte/src/compiler/phases/scope.js
@@ -527,31 +527,33 @@ export function create_scopes(ast, root, allow_reactive_declarations, parent) {
 			const scope = state.scope.child();
 			scopes.set(node, scope);
 
-			// declarations
-			for (const id of extract_identifiers(node.context)) {
-				const binding = scope.declare(id, 'each', 'const');
-
-				let inside_rest = false;
-				let is_rest_id = false;
-				walk(node.context, null, {
-					Identifier(node) {
-						if (inside_rest && node === id) {
-							is_rest_id = true;
+			if (node.context) {
+				// declarations
+				for (const id of extract_identifiers(node.context)) {
+					const binding = scope.declare(id, 'each', 'const');
+
+					let inside_rest = false;
+					let is_rest_id = false;
+					walk(node.context, null, {
+						Identifier(node) {
+							if (inside_rest && node === id) {
+								is_rest_id = true;
+							}
+						},
+						RestElement(_, { next }) {
+							const prev = inside_rest;
+							inside_rest = true;
+							next();
+							inside_rest = prev;
 						}
-					},
-					RestElement(_, { next }) {
-						const prev = inside_rest;
-						inside_rest = true;
-						next();
-						inside_rest = prev;
-					}
-				});
+					});
 
-				binding.metadata = { inside_rest: is_rest_id };
-			}
+					binding.metadata = { inside_rest: is_rest_id };
+				}
 
-			// Visit to pick up references from default initializers
-			visit(node.context, { scope });
+				// Visit to pick up references from default initializers
+				visit(node.context, { scope });
+			}
 
 			if (node.index) {
 				const is_keyed =
diff --git a/packages/svelte/src/compiler/types/template.d.ts b/packages/svelte/src/compiler/types/template.d.ts
index ede4e1693c..1758b98d24 100644
--- a/packages/svelte/src/compiler/types/template.d.ts
+++ b/packages/svelte/src/compiler/types/template.d.ts
@@ -401,7 +401,8 @@ export namespace AST {
 	export interface EachBlock extends BaseNode {
 		type: 'EachBlock';
 		expression: Expression;
-		context: Pattern;
+		/** The `entry` in `{#each item as entry}`. `null` if `as` part is omitted */
+		context: Pattern | null;
 		body: Fragment;
 		fallback?: Fragment;
 		index?: string;
diff --git a/packages/svelte/tests/runtime-runes/samples/each-without-as/_config.js b/packages/svelte/tests/runtime-runes/samples/each-without-as/_config.js
new file mode 100644
index 0000000000..29a59cf6dd
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/each-without-as/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	html: `<div>hi</div> <div>hi</div> <div>0</div> <div>1</div>`
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/each-without-as/main.svelte b/packages/svelte/tests/runtime-runes/samples/each-without-as/main.svelte
new file mode 100644
index 0000000000..975ba2667b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/each-without-as/main.svelte
@@ -0,0 +1,7 @@
+{#each [10, 20]}
+	<div>hi</div>
+{/each}
+
+{#each [10, 20], i}
+	 <div>{i}</div>
+{/each}
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
index a03b7de570..0814796d27 100644
--- a/packages/svelte/types/index.d.ts
+++ b/packages/svelte/types/index.d.ts
@@ -1193,7 +1193,8 @@ declare module 'svelte/compiler' {
 		export interface EachBlock extends BaseNode {
 			type: 'EachBlock';
 			expression: Expression;
-			context: Pattern;
+			/** The `entry` in `{#each item as entry}`. `null` if `as` part is omitted */
+			context: Pattern | null;
 			body: Fragment;
 			fallback?: Fragment;
 			index?: string;

From a091fb5ce6f159d01e6c252c8f296954a15f4ffd Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 2 Dec 2024 08:21:53 -0500
Subject: [PATCH 136/159] Version Packages (#14501)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/sixty-zoos-enjoy.md | 5 -----
 packages/svelte/CHANGELOG.md   | 6 ++++++
 packages/svelte/package.json   | 2 +-
 packages/svelte/src/version.js | 2 +-
 4 files changed, 8 insertions(+), 7 deletions(-)
 delete mode 100644 .changeset/sixty-zoos-enjoy.md

diff --git a/.changeset/sixty-zoos-enjoy.md b/.changeset/sixty-zoos-enjoy.md
deleted file mode 100644
index 71f3db3e1f..0000000000
--- a/.changeset/sixty-zoos-enjoy.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': minor
----
-
-feat: support `#each` without `as`
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 5d6f63b8c6..a0c9e67285 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,11 @@
 # svelte
 
+## 5.4.0
+
+### Minor Changes
+
+- feat: support `#each` without `as` ([#14396](https://github.com/sveltejs/svelte/pull/14396))
+
 ## 5.3.2
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 81c37f025c..ce9d4e58f5 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.3.2",
+  "version": "5.4.0",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 7307d00a3d..3c7791b29c 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.3.2';
+export const VERSION = '5.4.0';
 export const PUBLIC_VERSION = '5';

From abb90d87370e2458e5342e679d92ec515e911f98 Mon Sep 17 00:00:00 2001
From: SukeshP1995 <30713956+SukeshP1995@users.noreply.github.com>
Date: Mon, 2 Dec 2024 14:36:54 +0100
Subject: [PATCH 137/159] docs: fix grammatical error (#14500)

a instead of an before failed
---
 documentation/docs/05-special-elements/01-svelte-boundary.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/documentation/docs/05-special-elements/01-svelte-boundary.md b/documentation/docs/05-special-elements/01-svelte-boundary.md
index d0a2fb9ae9..15f249a771 100644
--- a/documentation/docs/05-special-elements/01-svelte-boundary.md
+++ b/documentation/docs/05-special-elements/01-svelte-boundary.md
@@ -21,7 +21,7 @@ For the boundary to do anything, one or both of `failed` and `onerror` must be p
 
 ### `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)):
+If a `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>

From aaea2541020b24769180e64b106dc90d92f98f4f Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 2 Dec 2024 09:50:33 -0500
Subject: [PATCH 138/159] chore: serialize bigint AST, albeit incorrectly
 (#14504)

playgrounds/sandbox/run.js doesn't work for components containing bigints, because they can't be serialized to JSON. There isn't really a great fix for this issue but this at least allows the sandbox to run
---
 playgrounds/sandbox/run.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/playgrounds/sandbox/run.js b/playgrounds/sandbox/run.js
index 4531e7182d..771dcc668e 100644
--- a/playgrounds/sandbox/run.js
+++ b/playgrounds/sandbox/run.js
@@ -46,7 +46,14 @@ for (const generate of /** @type {const} */ (['client', 'server'])) {
 				modern: true
 			});
 
-			fs.writeFileSync(`${cwd}/output/${file}.json`, JSON.stringify(ast, null, '\t'));
+			fs.writeFileSync(
+				`${cwd}/output/${file}.json`,
+				JSON.stringify(
+					ast,
+					(key, value) => (typeof value === 'bigint' ? ['BigInt', value.toString()] : value),
+					'\t'
+				)
+			);
 
 			try {
 				const migrated = migrate(source);

From b72fd2b3cd2fafc3c63454f027da90da7b432052 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Mon, 2 Dec 2024 21:08:01 +0100
Subject: [PATCH 139/159] fix: ignore TypeScript generics on variables (#14509)

fixes #14505
---
 .changeset/wild-islands-help.md                              | 5 +++++
 .../src/compiler/phases/1-parse/remove_typescript_nodes.js   | 3 +++
 .../tests/runtime-runes/samples/typescript/main.svelte       | 4 +++-
 3 files changed, 11 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/wild-islands-help.md

diff --git a/.changeset/wild-islands-help.md b/.changeset/wild-islands-help.md
new file mode 100644
index 0000000000..5386e5d6b1
--- /dev/null
+++ b/.changeset/wild-islands-help.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ignore TypeScript generics on variables
diff --git a/packages/svelte/src/compiler/phases/1-parse/remove_typescript_nodes.js b/packages/svelte/src/compiler/phases/1-parse/remove_typescript_nodes.js
index 8db29ab067..b968e95213 100644
--- a/packages/svelte/src/compiler/phases/1-parse/remove_typescript_nodes.js
+++ b/packages/svelte/src/compiler/phases/1-parse/remove_typescript_nodes.js
@@ -104,6 +104,9 @@ const visitors = {
 		}
 		return context.visit(node.parameter);
 	},
+	TSInstantiationExpression(node, context) {
+		return context.visit(node.expression);
+	},
 	FunctionExpression: remove_this_param,
 	FunctionDeclaration: remove_this_param,
 	TSDeclareFunction() {
diff --git a/packages/svelte/tests/runtime-runes/samples/typescript/main.svelte b/packages/svelte/tests/runtime-runes/samples/typescript/main.svelte
index 8a3db5dead..3b98dafa05 100644
--- a/packages/svelte/tests/runtime-runes/samples/typescript/main.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/typescript/main.svelte
@@ -8,7 +8,7 @@
 		console.log(this);
 	}
 
-	class Foo {
+	class Foo<T> {
 		public name: string;
 		x = 'x' as const;
 		constructor(name: string) {
@@ -32,6 +32,8 @@
 	export function overload(c: any): any {}
 
 	export type { Hello };
+
+	const TypedFoo = Foo<true>;
 </script>
 
 <script>

From 2e57612ef495689e628078e988126f057cc2f7a8 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 2 Dec 2024 18:44:15 -0500
Subject: [PATCH 140/159] chore: fix typo (#14513)

---
 packages/svelte/src/index.d.ts   | 2 +-
 packages/svelte/types/index.d.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/svelte/src/index.d.ts b/packages/svelte/src/index.d.ts
index 5130721cbe..b8ba8b6f0a 100644
--- a/packages/svelte/src/index.d.ts
+++ b/packages/svelte/src/index.d.ts
@@ -38,7 +38,7 @@ type Properties<Props, Slots> = Props &
 /**
  * This was the base class for Svelte components in Svelte 4. Svelte 5+ components
  * are completely different under the hood. For typing, use `Component` instead.
- * To instantiate components, use `mount` instead`.
+ * To instantiate components, use `mount` instead.
  * See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) for more info.
  */
 export class SvelteComponent<
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
index 0814796d27..5a5cc86ae6 100644
--- a/packages/svelte/types/index.d.ts
+++ b/packages/svelte/types/index.d.ts
@@ -35,7 +35,7 @@ declare module 'svelte' {
 	/**
 	 * This was the base class for Svelte components in Svelte 4. Svelte 5+ components
 	 * are completely different under the hood. For typing, use `Component` instead.
-	 * To instantiate components, use `mount` instead`.
+	 * To instantiate components, use `mount` instead.
 	 * See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) for more info.
 	 */
 	export class SvelteComponent<

From 4d2f2fb8e615c7d375e0cee5aa9692b3c6c65918 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Tue, 3 Dec 2024 14:56:28 +0000
Subject: [PATCH 141/159] feat: allow snippets to be exported from module
 scripts (#14315)

* feat: allow snippets to be exported from module scripts

* tweak type

* fix issue + add test

* refactor

* refactor

* fix exports error

* fix lint

* fix lint

* error on undefined export

* hoisted snippets belong in transform state, not analysis

* put the code where it's used

* drop the local_. just binding. it's cleaner

* simplify

* simplify

* simplify

* simplify

* tidy up

* oops

* update message, add some details

* lint

* Apply suggestions from code review

* add some docs

* Update packages/svelte/src/compiler/phases/3-transform/utils.js

* Update .changeset/famous-parents-turn.md

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
---
 .changeset/famous-parents-turn.md             |  5 ++
 .../docs/03-template-syntax/06-snippet.md     | 14 +++++
 .../98-reference/.generated/compile-errors.md | 30 +++++++++++
 .../svelte/messages/compile-errors/script.md  | 26 +++++++++
 packages/svelte/src/compiler/errors.js        | 19 +++++++
 .../src/compiler/phases/1-parse/acorn.js      | 42 ++++++++++++---
 .../compiler/phases/1-parse/read/script.js    |  2 +-
 .../src/compiler/phases/1-parse/state/tag.js  |  1 +
 .../src/compiler/phases/2-analyze/index.js    | 13 ++++-
 .../phases/2-analyze/visitors/SnippetBlock.js | 54 ++++++++++++++++++-
 .../3-transform/client/transform-client.js    |  6 ++-
 .../phases/3-transform/client/types.d.ts      |  8 ++-
 .../client/visitors/SnippetBlock.js           |  6 ++-
 .../server/visitors/SnippetBlock.js           |  7 ++-
 .../svelte/src/compiler/phases/types.d.ts     |  4 +-
 packages/svelte/src/compiler/types/index.d.ts |  3 +-
 .../svelte/src/compiler/types/template.d.ts   |  1 +
 .../export-not-defined-module/_config.js      |  9 ++++
 .../export-not-defined-module/main.svelte     |  3 ++
 .../snippet-hoisted-module-2/Child.svelte     | 13 +++++
 .../snippet-hoisted-module-2/_config.js       |  8 +++
 .../snippet-hoisted-module-2/main.svelte      |  5 ++
 .../snippet-hoisted-module/Child.svelte       |  9 ++++
 .../samples/snippet-hoisted-module/_config.js |  8 +++
 .../snippet-hoisted-module/main.svelte        |  5 ++
 .../_expected/client/index.svelte.js          | 14 ++---
 .../_expected/server/index.svelte.js          |  9 ++--
 27 files changed, 292 insertions(+), 32 deletions(-)
 create mode 100644 .changeset/famous-parents-turn.md
 create mode 100644 packages/svelte/tests/compiler-errors/samples/export-not-defined-module/_config.js
 create mode 100644 packages/svelte/tests/compiler-errors/samples/export-not-defined-module/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/snippet-hoisted-module-2/Child.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/snippet-hoisted-module-2/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/snippet-hoisted-module-2/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/snippet-hoisted-module/Child.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/snippet-hoisted-module/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/snippet-hoisted-module/main.svelte

diff --git a/.changeset/famous-parents-turn.md b/.changeset/famous-parents-turn.md
new file mode 100644
index 0000000000..38f9e1f9df
--- /dev/null
+++ b/.changeset/famous-parents-turn.md
@@ -0,0 +1,5 @@
+---
+'svelte': minor
+---
+
+feat: allow snippets to be exported from module scripts
diff --git a/documentation/docs/03-template-syntax/06-snippet.md b/documentation/docs/03-template-syntax/06-snippet.md
index 4bbc970c5d..fd8cd78d6e 100644
--- a/documentation/docs/03-template-syntax/06-snippet.md
+++ b/documentation/docs/03-template-syntax/06-snippet.md
@@ -246,6 +246,20 @@ We can tighten things up further by declaring a generic, so that `data` and `row
 </script>
 ```
 
+## Exporting snippets
+
+Snippets declared at the top level of a `.svelte` file can be exported from a `<script module>` for use in other components, provided they don't reference any declarations in a non-module `<script>` (whether directly or indirectly, via other snippets) ([demo](/playground/untitled#H4sIAAAAAAAAE3WPwY7CMAxEf8UyB1hRgdhjl13Bga8gHFJipEqtGyUGFUX5dxJUtEB3b9bYM_MckHVLWOKut50TMuC5tpbEY4GnuiGP5T6gXG0-ykLSB8vW2oW_UCNZq7Snv_Rjx0Kc4kpc-6OrrfwoVlK3uQ4CaGMgwsl1LUwXy0f54J9-KV4vf20cNo7YkMu22aqAz4-oOLUI9YKluDPF4h_at-hX5PFyzA1tZ84N3fGpf8YfUU6GvDumLqDKmEqCjjCHUEX4hqDTWCU5PJ6Or38c4g1cPu9tnAEAAA==)):
+
+```svelte
+<script module>
+	export { add };
+</script>
+
+{#snippet add(a, b)}
+	{a} + {b} = {a + b}
+{/snippet}
+```
+
 ## Programmatic snippets
 
 Snippets can be created programmatically with the [`createRawSnippet`](svelte#createRawSnippet) API. This is intended for advanced use cases.
diff --git a/documentation/docs/98-reference/.generated/compile-errors.md b/documentation/docs/98-reference/.generated/compile-errors.md
index 77166097a2..e1925324e6 100644
--- a/documentation/docs/98-reference/.generated/compile-errors.md
+++ b/documentation/docs/98-reference/.generated/compile-errors.md
@@ -400,6 +400,12 @@ Expected token %token%
 Expected whitespace
 ```
 
+### export_undefined
+
+```
+`%name%` is not defined
+```
+
 ### global_reference_invalid
 
 ```
@@ -694,6 +700,30 @@ Cannot use `<slot>` syntax and `{@render ...}` tags in the same component. Migra
 Cannot use explicit children snippet at the same time as implicit children content. Remove either the non-whitespace content or the children snippet block
 ```
 
+### snippet_invalid_export
+
+```
+An exported snippet can only reference things declared in a `<script module>`, or other exportable snippets
+```
+
+It's possible to export a snippet from a `<script module>` block, but only if it doesn't reference anything defined inside a non-module-level `<script>`. For example you can't do this...
+
+```svelte
+<script module>
+	export { greeting };
+</script>
+
+<script>
+	let message = 'hello';
+</script>
+
+{#snippet greeting(name)}
+	<p>{message} {name}!</p>
+{/snippet}
+```
+
+...because `greeting` references `message`, which is defined in the second `<script>`.
+
 ### snippet_invalid_rest_parameter
 
 ```
diff --git a/packages/svelte/messages/compile-errors/script.md b/packages/svelte/messages/compile-errors/script.md
index 7310749f1b..69007bfb59 100644
--- a/packages/svelte/messages/compile-errors/script.md
+++ b/packages/svelte/messages/compile-errors/script.md
@@ -38,6 +38,10 @@
 
 > `$effect()` can only be used as an expression statement
 
+## export_undefined
+
+> `%name%` is not defined
+
 ## global_reference_invalid
 
 > `%name%` is an illegal variable name. To reference a global variable called `%name%`, use `globalThis.%name%`
@@ -134,6 +138,28 @@
 
 > %name% cannot be used in runes mode
 
+## snippet_invalid_export
+
+> An exported snippet can only reference things declared in a `<script module>`, or other exportable snippets
+
+It's possible to export a snippet from a `<script module>` block, but only if it doesn't reference anything defined inside a non-module-level `<script>`. For example you can't do this...
+
+```svelte
+<script module>
+	export { greeting };
+</script>
+
+<script>
+	let message = 'hello';
+</script>
+
+{#snippet greeting(name)}
+	<p>{message} {name}!</p>
+{/snippet}
+```
+
+...because `greeting` references `message`, which is defined in the second `<script>`.
+
 ## snippet_parameter_assignment
 
 > Cannot reassign or bind to snippet parameter
diff --git a/packages/svelte/src/compiler/errors.js b/packages/svelte/src/compiler/errors.js
index bb99275c6b..a6e4549e2f 100644
--- a/packages/svelte/src/compiler/errors.js
+++ b/packages/svelte/src/compiler/errors.js
@@ -168,6 +168,16 @@ export function effect_invalid_placement(node) {
 	e(node, "effect_invalid_placement", "`$effect()` can only be used as an expression statement");
 }
 
+/**
+ * `%name%` is not defined
+ * @param {null | number | NodeLike} node
+ * @param {string} name
+ * @returns {never}
+ */
+export function export_undefined(node, name) {
+	e(node, "export_undefined", `\`${name}\` is not defined`);
+}
+
 /**
  * `%name%` is an illegal variable name. To reference a global variable called `%name%`, use `globalThis.%name%`
  * @param {null | number | NodeLike} node
@@ -395,6 +405,15 @@ export function runes_mode_invalid_import(node, name) {
 	e(node, "runes_mode_invalid_import", `${name} cannot be used in runes mode`);
 }
 
+/**
+ * An exported snippet can only reference things declared in a `<script module>`, or other exportable snippets
+ * @param {null | number | NodeLike} node
+ * @returns {never}
+ */
+export function snippet_invalid_export(node) {
+	e(node, "snippet_invalid_export", "An exported snippet can only reference things declared in a `<script module>`, or other exportable snippets");
+}
+
 /**
  * Cannot reassign or bind to snippet parameter
  * @param {null | number | NodeLike} node
diff --git a/packages/svelte/src/compiler/phases/1-parse/acorn.js b/packages/svelte/src/compiler/phases/1-parse/acorn.js
index 52c4b69895..6c106e0a84 100644
--- a/packages/svelte/src/compiler/phases/1-parse/acorn.js
+++ b/packages/svelte/src/compiler/phases/1-parse/acorn.js
@@ -10,17 +10,43 @@ const ParserWithTS = acorn.Parser.extend(tsPlugin({ allowSatisfies: true }));
 /**
  * @param {string} source
  * @param {boolean} typescript
+ * @param {boolean} [is_script]
  */
-export function parse(source, typescript) {
+export function parse(source, typescript, is_script) {
 	const parser = typescript ? ParserWithTS : acorn.Parser;
 	const { onComment, add_comments } = get_comment_handlers(source);
-
-	const ast = parser.parse(source, {
-		onComment,
-		sourceType: 'module',
-		ecmaVersion: 13,
-		locations: true
-	});
+	// @ts-ignore
+	const parse_statement = parser.prototype.parseStatement;
+
+	// If we're dealing with a <script> then it might contain an export
+	// for something that doesn't exist directly inside but is inside the
+	// component instead, so we need to ensure that Acorn doesn't throw
+	// an error in these cases
+	if (is_script) {
+		// @ts-ignore
+		parser.prototype.parseStatement = function (...args) {
+			const v = parse_statement.call(this, ...args);
+			// @ts-ignore
+			this.undefinedExports = {};
+			return v;
+		};
+	}
+
+	let ast;
+
+	try {
+		ast = parser.parse(source, {
+			onComment,
+			sourceType: 'module',
+			ecmaVersion: 13,
+			locations: true
+		});
+	} finally {
+		if (is_script) {
+			// @ts-ignore
+			parser.prototype.parseStatement = parse_statement;
+		}
+	}
 
 	if (typescript) amend(source, ast);
 	add_comments(ast);
diff --git a/packages/svelte/src/compiler/phases/1-parse/read/script.js b/packages/svelte/src/compiler/phases/1-parse/read/script.js
index 85023cb781..87367aff08 100644
--- a/packages/svelte/src/compiler/phases/1-parse/read/script.js
+++ b/packages/svelte/src/compiler/phases/1-parse/read/script.js
@@ -34,7 +34,7 @@ export function read_script(parser, start, attributes) {
 	let ast;
 
 	try {
-		ast = acorn.parse(source, parser.ts);
+		ast = acorn.parse(source, parser.ts, true);
 	} catch (err) {
 		parser.acorn_error(err);
 	}
diff --git a/packages/svelte/src/compiler/phases/1-parse/state/tag.js b/packages/svelte/src/compiler/phases/1-parse/state/tag.js
index 317afe6f2f..0eadd2b8b5 100644
--- a/packages/svelte/src/compiler/phases/1-parse/state/tag.js
+++ b/packages/svelte/src/compiler/phases/1-parse/state/tag.js
@@ -325,6 +325,7 @@ function open(parser) {
 			parameters: function_expression.params,
 			body: create_fragment(),
 			metadata: {
+				can_hoist: false,
 				sites: new Set()
 			}
 		});
diff --git a/packages/svelte/src/compiler/phases/2-analyze/index.js b/packages/svelte/src/compiler/phases/2-analyze/index.js
index f5cd6ff9f7..8f1efd7f63 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/index.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/index.js
@@ -429,7 +429,6 @@ export function analyze_component(root, source, options) {
 		reactive_statements: new Map(),
 		binding_groups: new Map(),
 		slot_names: new Map(),
-		top_level_snippets: [],
 		css: {
 			ast: root.css,
 			hash: root.css
@@ -443,6 +442,7 @@ export function analyze_component(root, source, options) {
 			keyframes: []
 		},
 		source,
+		undefined_exports: new Map(),
 		snippet_renderers: new Map(),
 		snippets: new Set()
 	};
@@ -697,6 +697,17 @@ export function analyze_component(root, source, options) {
 		analysis.reactive_statements = order_reactive_statements(analysis.reactive_statements);
 	}
 
+	for (const node of analysis.module.ast.body) {
+		if (node.type === 'ExportNamedDeclaration' && node.specifiers !== null) {
+			for (const specifier of node.specifiers) {
+				if (specifier.local.type !== 'Identifier') continue;
+
+				const binding = analysis.module.scope.get(specifier.local.name);
+				if (!binding) e.export_undefined(specifier, specifier.local.name);
+			}
+		}
+	}
+
 	if (analysis.event_directive_node && analysis.uses_event_attributes) {
 		e.mixed_event_handler_syntaxes(
 			analysis.event_directive_node,
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/SnippetBlock.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/SnippetBlock.js
index c94b65e361..cd8af21f98 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/SnippetBlock.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/SnippetBlock.js
@@ -1,4 +1,5 @@
-/** @import { AST } from '#compiler' */
+/** @import { AST, Binding, SvelteNode } from '#compiler' */
+/** @import { Scope } from '../../scope' */
 /** @import { Context } from '../types' */
 import { validate_block_not_empty, validate_opening_tag } from './shared/utils.js';
 import * as e from '../../../errors.js';
@@ -24,6 +25,25 @@ export function SnippetBlock(node, context) {
 
 	context.next({ ...context.state, parent_element: null });
 
+	const can_hoist =
+		context.path.length === 1 &&
+		context.path[0].type === 'Fragment' &&
+		can_hoist_snippet(context.state.scope, context.state.scopes);
+
+	const name = node.expression.name;
+
+	if (can_hoist) {
+		const binding = /** @type {Binding} */ (context.state.scope.get(name));
+		context.state.analysis.module.scope.declarations.set(name, binding);
+	} else {
+		const undefined_export = context.state.analysis.undefined_exports.get(name);
+		if (undefined_export) {
+			e.snippet_invalid_export(undefined_export);
+		}
+	}
+
+	node.metadata.can_hoist = can_hoist;
+
 	const { path } = context;
 	const parent = path.at(-2);
 	if (!parent) return;
@@ -58,3 +78,35 @@ export function SnippetBlock(node, context) {
 		}
 	}
 }
+
+/**
+ * @param {Map<SvelteNode, Scope>} scopes
+ * @param {Scope} scope
+ */
+function can_hoist_snippet(scope, scopes, visited = new Set()) {
+	for (const [reference] of scope.references) {
+		const binding = scope.get(reference);
+
+		if (!binding || binding.scope.function_depth === 0) {
+			continue;
+		}
+
+		// ignore bindings declared inside the snippet (e.g. the snippet's own parameters)
+		if (binding.scope.function_depth >= scope.function_depth) {
+			continue;
+		}
+
+		if (binding.initial?.type === 'SnippetBlock') {
+			if (visited.has(binding)) continue;
+			visited.add(binding);
+
+			if (can_hoist_snippet(binding.scope, scopes, visited)) {
+				continue;
+			}
+		}
+
+		return false;
+	}
+
+	return true;
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js b/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
index 99cb78358a..3edbc49f16 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
@@ -165,6 +165,8 @@ export function client_component(analysis, options) {
 		private_state: new Map(),
 		transform: {},
 		in_constructor: false,
+		instance_level_snippets: [],
+		module_level_snippets: [],
 
 		// these are set inside the `Fragment` visitor, and cannot be used until then
 		before_init: /** @type {any} */ (null),
@@ -370,7 +372,7 @@ export function client_component(analysis, options) {
 		...store_setup,
 		...legacy_reactive_declarations,
 		...group_binding_declarations,
-		...analysis.top_level_snippets,
+		...state.instance_level_snippets,
 		.../** @type {ESTree.Statement[]} */ (instance.body),
 		analysis.runes || !analysis.needs_context
 			? b.empty
@@ -485,7 +487,7 @@ export function client_component(analysis, options) {
 		}
 	}
 
-	body = [...imports, ...body];
+	body = [...imports, ...state.module_level_snippets, ...body];
 
 	const component = b.function_declaration(
 		b.id(analysis.name),
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/types.d.ts b/packages/svelte/src/compiler/phases/3-transform/client/types.d.ts
index 0b54de5384..8013615995 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/types.d.ts
+++ b/packages/svelte/src/compiler/phases/3-transform/client/types.d.ts
@@ -6,7 +6,8 @@ import type {
 	PrivateIdentifier,
 	Expression,
 	AssignmentExpression,
-	UpdateExpression
+	UpdateExpression,
+	VariableDeclaration
 } from 'estree';
 import type { Namespace, SvelteNode, ValidatedCompileOptions } from '#compiler';
 import type { TransformState } from '../types.js';
@@ -85,6 +86,11 @@ export interface ComponentClientTransformState extends ClientTransformState {
 
 	/** The $: calls, which will be ordered in the end */
 	readonly legacy_reactive_statements: Map<LabeledStatement, Statement>;
+
+	/** Snippets hoisted to the instance */
+	readonly instance_level_snippets: VariableDeclaration[];
+	/** Snippets hoisted to the module */
+	readonly module_level_snippets: VariableDeclaration[];
 }
 
 export interface StateField {
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SnippetBlock.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SnippetBlock.js
index 814fd3b0fb..7a0d6981b5 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SnippetBlock.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SnippetBlock.js
@@ -83,7 +83,11 @@ export function SnippetBlock(node, context) {
 
 	// Top-level snippets are hoisted so they can be referenced in the `<script>`
 	if (context.path.length === 1 && context.path[0].type === 'Fragment') {
-		context.state.analysis.top_level_snippets.push(declaration);
+		if (node.metadata.can_hoist) {
+			context.state.module_level_snippets.push(declaration);
+		} else {
+			context.state.instance_level_snippets.push(declaration);
+		}
 	} else {
 		context.state.init.push(declaration);
 	}
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/SnippetBlock.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/SnippetBlock.js
index ec06dd5ec7..eb83917927 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/SnippetBlock.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/SnippetBlock.js
@@ -17,6 +17,9 @@ export function SnippetBlock(node, context) {
 	// @ts-expect-error - TODO remove this hack once $$render_inner for legacy bindings is gone
 	fn.___snippet = true;
 
-	// TODO hoist where possible
-	context.state.init.push(fn);
+	if (node.metadata.can_hoist) {
+		context.state.hoisted.push(fn);
+	} else {
+		context.state.init.push(fn);
+	}
 }
diff --git a/packages/svelte/src/compiler/phases/types.d.ts b/packages/svelte/src/compiler/phases/types.d.ts
index fed5d66b2c..4e7ef867b4 100644
--- a/packages/svelte/src/compiler/phases/types.d.ts
+++ b/packages/svelte/src/compiler/phases/types.d.ts
@@ -1,5 +1,5 @@
 import type { AST, Binding, Css, SvelteNode } from '#compiler';
-import type { Identifier, LabeledStatement, Program, VariableDeclaration } from 'estree';
+import type { Identifier, LabeledStatement, Node, Program } from 'estree';
 import type { Scope, ScopeRoot } from './scope.js';
 
 export interface Js {
@@ -62,7 +62,6 @@ export interface ComponentAnalysis extends Analysis {
 	/** If `true`, should append styles through JavaScript */
 	inject_styles: boolean;
 	reactive_statements: Map<LabeledStatement, ReactiveStatement>;
-	top_level_snippets: VariableDeclaration[];
 	/** Identifiers that make up the `bind:group` expression -> internal group binding name */
 	binding_groups: Map<[key: string, bindings: Array<Binding | null>], Identifier>;
 	slot_names: Map<string, AST.SlotElement>;
@@ -72,6 +71,7 @@ export interface ComponentAnalysis extends Analysis {
 		keyframes: string[];
 	};
 	source: string;
+	undefined_exports: Map<string, Node>;
 	/**
 	 * Every render tag/component, and whether it could be definitively resolved or not
 	 */
diff --git a/packages/svelte/src/compiler/types/index.d.ts b/packages/svelte/src/compiler/types/index.d.ts
index f8aa3db69d..fe306bd020 100644
--- a/packages/svelte/src/compiler/types/index.d.ts
+++ b/packages/svelte/src/compiler/types/index.d.ts
@@ -279,7 +279,8 @@ export interface Binding {
 		| 'snippet'
 		| 'store_sub'
 		| 'legacy_reactive'
-		| 'template';
+		| 'template'
+		| 'snippet';
 	declaration_kind: DeclarationKind;
 	/**
 	 * What the value was initialized with.
diff --git a/packages/svelte/src/compiler/types/template.d.ts b/packages/svelte/src/compiler/types/template.d.ts
index 1758b98d24..a409cf5704 100644
--- a/packages/svelte/src/compiler/types/template.d.ts
+++ b/packages/svelte/src/compiler/types/template.d.ts
@@ -461,6 +461,7 @@ export namespace AST {
 		body: Fragment;
 		/** @internal */
 		metadata: {
+			can_hoist: boolean;
 			/** The set of components/render tags that could render this snippet,
 			 * used for CSS pruning */
 			sites: Set<Component | SvelteComponent | SvelteSelf | RenderTag>;
diff --git a/packages/svelte/tests/compiler-errors/samples/export-not-defined-module/_config.js b/packages/svelte/tests/compiler-errors/samples/export-not-defined-module/_config.js
new file mode 100644
index 0000000000..40a5ecee4c
--- /dev/null
+++ b/packages/svelte/tests/compiler-errors/samples/export-not-defined-module/_config.js
@@ -0,0 +1,9 @@
+import { test } from '../../test';
+
+export default test({
+	error: {
+		code: 'export_undefined',
+		message: '`blah` is not defined',
+		position: [26, 30]
+	}
+});
diff --git a/packages/svelte/tests/compiler-errors/samples/export-not-defined-module/main.svelte b/packages/svelte/tests/compiler-errors/samples/export-not-defined-module/main.svelte
new file mode 100644
index 0000000000..1093dccff8
--- /dev/null
+++ b/packages/svelte/tests/compiler-errors/samples/export-not-defined-module/main.svelte
@@ -0,0 +1,3 @@
+<script module>
+	export { blah };
+</script>
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-hoisted-module-2/Child.svelte b/packages/svelte/tests/runtime-runes/samples/snippet-hoisted-module-2/Child.svelte
new file mode 100644
index 0000000000..902386fd7e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-hoisted-module-2/Child.svelte
@@ -0,0 +1,13 @@
+<script module>
+	const message = 'hello';
+
+	export { one };
+</script>
+
+{#snippet one()}
+	{@render two()}
+{/snippet}
+
+{#snippet two()}
+	{message}
+{/snippet}
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-hoisted-module-2/_config.js b/packages/svelte/tests/runtime-runes/samples/snippet-hoisted-module-2/_config.js
new file mode 100644
index 0000000000..55ab126f89
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-hoisted-module-2/_config.js
@@ -0,0 +1,8 @@
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true // Render in dev mode to check that the validation error is not thrown
+	},
+	html: `hello`
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-hoisted-module-2/main.svelte b/packages/svelte/tests/runtime-runes/samples/snippet-hoisted-module-2/main.svelte
new file mode 100644
index 0000000000..11b7297397
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-hoisted-module-2/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	import { one } from './Child.svelte';
+</script>
+
+{@render one()}
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-hoisted-module/Child.svelte b/packages/svelte/tests/runtime-runes/samples/snippet-hoisted-module/Child.svelte
new file mode 100644
index 0000000000..ffa1c12b34
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-hoisted-module/Child.svelte
@@ -0,0 +1,9 @@
+<script module>
+	export {
+		foo
+	}
+</script>
+
+{#snippet foo(a, b)}
+	Hello world {a + b}
+{/snippet}
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-hoisted-module/_config.js b/packages/svelte/tests/runtime-runes/samples/snippet-hoisted-module/_config.js
new file mode 100644
index 0000000000..be8d22b4e8
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-hoisted-module/_config.js
@@ -0,0 +1,8 @@
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true // Render in dev mode to check that the validation error is not thrown
+	},
+	html: `Hello world 3`
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-hoisted-module/main.svelte b/packages/svelte/tests/runtime-runes/samples/snippet-hoisted-module/main.svelte
new file mode 100644
index 0000000000..80e9df514b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-hoisted-module/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	import { foo } from './Child.svelte';
+</script>
+
+{@render foo(1, 2)}
diff --git a/packages/svelte/tests/snapshot/samples/bind-component-snippet/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/bind-component-snippet/_expected/client/index.svelte.js
index 58ccf7ed7f..bcddb6f658 100644
--- a/packages/svelte/tests/snapshot/samples/bind-component-snippet/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/bind-component-snippet/_expected/client/index.svelte.js
@@ -2,17 +2,17 @@ import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
 import TextInput from './Child.svelte';
 
-var root = $.template(`<!> `, 1);
+const snippet = ($$anchor) => {
+	$.next();
 
-export default function Bind_component_snippet($$anchor) {
-	const snippet = ($$anchor) => {
-		$.next();
+	var text = $.text("Something");
 
-		var text = $.text("Something");
+	$.append($$anchor, text);
+};
 
-		$.append($$anchor, text);
-	};
+var root = $.template(`<!> `, 1);
 
+export default function Bind_component_snippet($$anchor) {
 	let value = $.state('');
 	const _snippet = snippet;
 	var fragment = root();
diff --git a/packages/svelte/tests/snapshot/samples/bind-component-snippet/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/bind-component-snippet/_expected/server/index.svelte.js
index b645d05570..d223a31502 100644
--- a/packages/svelte/tests/snapshot/samples/bind-component-snippet/_expected/server/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/bind-component-snippet/_expected/server/index.svelte.js
@@ -1,14 +1,13 @@
 import * as $ from "svelte/internal/server";
 import TextInput from './Child.svelte';
 
+function snippet($$payload) {
+	$$payload.out += `<!---->Something`;
+}
+
 export default function Bind_component_snippet($$payload) {
 	let value = '';
 	const _snippet = snippet;
-
-	function snippet($$payload) {
-		$$payload.out += `<!---->Something`;
-	}
-
 	let $$settled = true;
 	let $$inner_payload;
 

From e722ef6b15f496d5cff7637cedd2a0c057c6f20c Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 3 Dec 2024 09:58:18 -0500
Subject: [PATCH 142/159] Version Packages (#14510)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/famous-parents-turn.md |  5 -----
 .changeset/wild-islands-help.md   |  5 -----
 packages/svelte/CHANGELOG.md      | 10 ++++++++++
 packages/svelte/package.json      |  2 +-
 packages/svelte/src/version.js    |  2 +-
 5 files changed, 12 insertions(+), 12 deletions(-)
 delete mode 100644 .changeset/famous-parents-turn.md
 delete mode 100644 .changeset/wild-islands-help.md

diff --git a/.changeset/famous-parents-turn.md b/.changeset/famous-parents-turn.md
deleted file mode 100644
index 38f9e1f9df..0000000000
--- a/.changeset/famous-parents-turn.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': minor
----
-
-feat: allow snippets to be exported from module scripts
diff --git a/.changeset/wild-islands-help.md b/.changeset/wild-islands-help.md
deleted file mode 100644
index 5386e5d6b1..0000000000
--- a/.changeset/wild-islands-help.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: ignore TypeScript generics on variables
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index a0c9e67285..a53738689f 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,15 @@
 # svelte
 
+## 5.5.0
+
+### Minor Changes
+
+- feat: allow snippets to be exported from module scripts ([#14315](https://github.com/sveltejs/svelte/pull/14315))
+
+### Patch Changes
+
+- fix: ignore TypeScript generics on variables ([#14509](https://github.com/sveltejs/svelte/pull/14509))
+
 ## 5.4.0
 
 ### Minor Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index ce9d4e58f5..fe25b0bb34 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.4.0",
+  "version": "5.5.0",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 3c7791b29c..1271d6cb90 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.4.0';
+export const VERSION = '5.5.0';
 export const PUBLIC_VERSION = '5';

From 7142fa0b5c6577548371884b28bb4d07e43eba20 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 3 Dec 2024 10:01:55 -0500
Subject: [PATCH 143/159] docs: note requirement on 5.5.0 to export snippets
 (#14523)

---
 documentation/docs/03-template-syntax/06-snippet.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/documentation/docs/03-template-syntax/06-snippet.md b/documentation/docs/03-template-syntax/06-snippet.md
index fd8cd78d6e..f8148f3dc3 100644
--- a/documentation/docs/03-template-syntax/06-snippet.md
+++ b/documentation/docs/03-template-syntax/06-snippet.md
@@ -260,6 +260,9 @@ Snippets declared at the top level of a `.svelte` file can be exported from a `<
 {/snippet}
 ```
 
+> [!NOTE]
+> This requires Svelte 5.5.0 or newer
+
 ## Programmatic snippets
 
 Snippets can be created programmatically with the [`createRawSnippet`](svelte#createRawSnippet) API. This is intended for advanced use cases.

From 3d36e15ddd630a5b074eaaec1e19c6300f5645b9 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Tue, 3 Dec 2024 17:02:37 +0100
Subject: [PATCH 144/159] docs: add tsconfig.json info to TS docs (#14519)

Also fix adjacent code examples

closes #14187
---
 documentation/docs/07-misc/03-typescript.md | 24 +++++++++++++++------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/documentation/docs/07-misc/03-typescript.md b/documentation/docs/07-misc/03-typescript.md
index f4513a9a2d..fbf8817069 100644
--- a/documentation/docs/07-misc/03-typescript.md
+++ b/documentation/docs/07-misc/03-typescript.md
@@ -40,26 +40,26 @@ If you want to use one of these features, you need to setup up a `script` prepro
 
 To use non-type-only TypeScript features within Svelte components, you need to add a preprocessor that will turn TypeScript into JavaScript.
 
-### Using SvelteKit or Vite
-
-The easiest way to get started is scaffolding a new SvelteKit project by typing `npx sv create`, following the prompts and choosing the TypeScript option.
-
 ```ts
 /// file: svelte.config.js
 // @noErrors
-import { vitePreprocess } from '@sveltejs/kit/vite';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
 const config = {
-	preprocess: vitePreprocess()
+	// Note the additional `{ script: true }`
+	preprocess: vitePreprocess({ script: true })
 };
 
 export default config;
 ```
 
-If you don't need or want all the features SvelteKit has to offer, you can scaffold a Svelte-flavoured Vite project instead by typing `npm create vite@latest` and selecting the `svelte-ts` option.
+### Using SvelteKit or Vite
+
+The easiest way to get started is scaffolding a new SvelteKit project by typing `npx sv create`, following the prompts and choosing the TypeScript option.
 
 ```ts
 /// file: svelte.config.js
+// @noErrors
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
 const config = {
@@ -69,6 +69,8 @@ const config = {
 export default config;
 ```
 
+If you don't need or want all the features SvelteKit has to offer, you can scaffold a Svelte-flavoured Vite project instead by typing `npm create vite@latest` and selecting the `svelte-ts` option.
+
 In both cases, a `svelte.config.js` with `vitePreprocess` will be added. Vite/SvelteKit will read from this config file.
 
 ### Other build tools
@@ -77,6 +79,14 @@ If you're using tools like Rollup or Webpack instead, install their respective S
 
 > [!NOTE] If you're starting a new project, we recommend using SvelteKit or Vite instead
 
+## tsconfig.json settings
+
+When using TypeScript, make sure your `tsconfig.json` is setup correctly.
+
+- Use a [`target`](https://www.typescriptlang.org/tsconfig/#target) of at least `ES2022`, or a `target` of at least `ES2015` alongside [`useDefineForClassFields`](https://www.typescriptlang.org/tsconfig/#useDefineForClassFields). This ensures that rune declarations on class fields are not messed with, which would break the Svelte compiler
+- Set [`verbatimModuleSyntax`](https://www.typescriptlang.org/tsconfig/#verbatimModuleSyntax) to `true` so that imports are left as-is
+- Set [`isolatedModules`](https://www.typescriptlang.org/tsconfig/#isolatedModules) to `true` so that each file is looked at in isolation. TypeScript has a few features which require cross-file analysis and compilation, which the Svelte compiler and tooling like Vite don't do. 
+
 ## Typing `$props`
 
 Type `$props` just like a regular object with certain properties.

From 94694a5e63baf5537128527d08c424de1639bc1f Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Tue, 3 Dec 2024 17:09:59 +0000
Subject: [PATCH 145/159] chore: add test for binding event reactive context
 (#14522)

* chore: add test for binding event reactive context

* revised
---
 .../client/dom/elements/bindings/input.js     |  2 +-
 .../effect-tracking-binding-set/_config.js    |  7 ++++++
 .../effect-tracking-binding-set/main.svelte   | 24 +++++++++++++++++++
 3 files changed, 32 insertions(+), 1 deletion(-)
 create mode 100644 packages/svelte/tests/runtime-runes/samples/effect-tracking-binding-set/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/effect-tracking-binding-set/main.svelte

diff --git a/packages/svelte/src/internal/client/dom/elements/bindings/input.js b/packages/svelte/src/internal/client/dom/elements/bindings/input.js
index aec6f815a0..1cbe2a731f 100644
--- a/packages/svelte/src/internal/client/dom/elements/bindings/input.js
+++ b/packages/svelte/src/internal/client/dom/elements/bindings/input.js
@@ -1,6 +1,6 @@
 import { DEV } from 'esm-env';
 import { render_effect, teardown } from '../../../reactivity/effects.js';
-import { listen_to_event_and_reset_event, without_reactive_context } from './shared.js';
+import { listen_to_event_and_reset_event } from './shared.js';
 import * as e from '../../../errors.js';
 import { is } from '../../../proxy.js';
 import { queue_micro_task } from '../../task.js';
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-tracking-binding-set/_config.js b/packages/svelte/tests/runtime-runes/samples/effect-tracking-binding-set/_config.js
new file mode 100644
index 0000000000..aebbfec832
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/effect-tracking-binding-set/_config.js
@@ -0,0 +1,7 @@
+import { test } from '../../test';
+
+export default test({
+	test({ assert, logs }) {
+		assert.deepEqual(logs, [false]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-tracking-binding-set/main.svelte b/packages/svelte/tests/runtime-runes/samples/effect-tracking-binding-set/main.svelte
new file mode 100644
index 0000000000..f21ecfdce6
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/effect-tracking-binding-set/main.svelte
@@ -0,0 +1,24 @@
+<script>
+	let bar = $state('');
+
+	const foo = {
+		set bar(v) {
+
+			console.log($effect.tracking());
+
+			bar = v;
+		},
+		get bar() {
+			return bar;
+		}
+	}
+
+	let input;
+
+	$effect(() => {
+		input.value = 'everybody';
+		input.dispatchEvent(new window.Event('input'));
+	})
+</script>
+
+<input type="text" bind:value={foo.bar} bind:this={input}>

From aac929d50355ab7cfbade2d1fdb76674a233c460 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 3 Dec 2024 13:08:22 -0500
Subject: [PATCH 146/159] fix: leave update expressions untransformed unless a
 transformer is provided (#14507)

* fix: leave update expressions untransformed unless a transformer is provided

* fix more cases
---
 .changeset/neat-news-dance.md                 |  5 +++
 .../phases/3-transform/client/types.d.ts      |  2 +-
 .../3-transform/client/visitors/EachBlock.js  |  5 ++-
 .../3-transform/client/visitors/Program.js    | 16 ++++----
 .../client/visitors/UpdateExpression.js       | 38 +++++++------------
 .../bigint-increment-mutation/_config.js      | 15 ++++++++
 .../bigint-increment-mutation/main.svelte     | 16 ++++++++
 .../samples/bigint-increment/_config.js       |  7 ++++
 .../samples/bigint-increment/main.svelte      |  5 +++
 9 files changed, 75 insertions(+), 34 deletions(-)
 create mode 100644 .changeset/neat-news-dance.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/bigint-increment-mutation/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/bigint-increment-mutation/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/bigint-increment/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/bigint-increment/main.svelte

diff --git a/.changeset/neat-news-dance.md b/.changeset/neat-news-dance.md
new file mode 100644
index 0000000000..817c012330
--- /dev/null
+++ b/.changeset/neat-news-dance.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: leave update expressions untransformed unless a transformer is provided
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/types.d.ts b/packages/svelte/src/compiler/phases/3-transform/client/types.d.ts
index 8013615995..47af9813e2 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/types.d.ts
+++ b/packages/svelte/src/compiler/phases/3-transform/client/types.d.ts
@@ -32,7 +32,7 @@ export interface ClientTransformState extends TransformState {
 			/** turn `foo = bar` into e.g. `$.set(foo, bar)` */
 			assign?: (node: Identifier, value: Expression) => Expression;
 			/** turn `foo.bar = baz` into e.g. `$.mutate(foo, $.get(foo).bar = baz);` */
-			mutate?: (node: Identifier, mutation: AssignmentExpression) => Expression;
+			mutate?: (node: Identifier, mutation: AssignmentExpression | UpdateExpression) => Expression;
 			/** turn `foo++` into e.g. `$.update(foo)` */
 			update?: (node: UpdateExpression) => Expression;
 		}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/EachBlock.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/EachBlock.js
index d34f39f4c7..9f70981205 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/EachBlock.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/EachBlock.js
@@ -214,7 +214,10 @@ export function EachBlock(node, context) {
 
 				return b.sequence([b.assignment('=', left, value), ...sequence]);
 			},
-			mutate: (_, mutation) => b.sequence([mutation, ...sequence])
+			mutate: (_, mutation) => {
+				uses_index = true;
+				return b.sequence([mutation, ...sequence]);
+			}
 		};
 
 		delete key_state.transform[node.context.name];
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/Program.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/Program.js
index c34a9b05c6..29403ca6ed 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/Program.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/Program.js
@@ -77,13 +77,15 @@ export function Program(_, context) {
 					return b.call(
 						'$.store_mutate',
 						get_store(),
-						b.assignment(
-							mutation.operator,
-							/** @type {MemberExpression} */ (
-								replace(/** @type {MemberExpression} */ (mutation.left))
-							),
-							mutation.right
-						),
+						mutation.type === 'AssignmentExpression'
+							? b.assignment(
+									mutation.operator,
+									/** @type {MemberExpression} */ (
+										replace(/** @type {MemberExpression} */ (mutation.left))
+									),
+									mutation.right
+								)
+							: b.update(mutation.operator, replace(mutation.argument), mutation.prefix),
 						untracked
 					);
 				},
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/UpdateExpression.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/UpdateExpression.js
index 91383a5679..13c1b4bc51 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/UpdateExpression.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/UpdateExpression.js
@@ -1,4 +1,4 @@
-/** @import { Expression, Node, Pattern, Statement, UpdateExpression } from 'estree' */
+/** @import { AssignmentExpression, Expression, UpdateExpression } from 'estree' */
 /** @import { Context } from '../types' */
 import { is_ignored } from '../../../../state.js';
 import { object } from '../../../../utils/ast.js';
@@ -34,34 +34,22 @@ export function UpdateExpression(node, context) {
 	}
 
 	const left = object(argument);
-	if (left === null) return context.next();
+	const transformers = left && context.state.transform[left.name];
 
-	if (left === argument) {
-		const transform = context.state.transform;
-		const update = transform[left.name]?.update;
-
-		if (update && Object.hasOwn(transform, left.name)) {
-			return update(node);
-		}
+	if (left === argument && transformers?.update) {
+		// we don't need to worry about ownership_invalid_mutation here, because
+		// we're not mutating but reassigning
+		return transformers.update(node);
 	}
 
-	const assignment = /** @type {Expression} */ (
-		context.visit(
-			b.assignment(
-				node.operator === '++' ? '+=' : '-=',
-				/** @type {Pattern} */ (argument),
-				b.literal(1)
-			)
-		)
-	);
+	let update = /** @type {Expression} */ (context.next());
 
-	const parent = /** @type {Node} */ (context.path.at(-1));
-	const is_standalone = parent.type === 'ExpressionStatement'; // TODO and possibly others, but not e.g. the `test` of a WhileStatement
-
-	const update =
-		node.prefix || is_standalone
-			? assignment
-			: b.binary(node.operator === '++' ? '-' : '+', assignment, b.literal(1));
+	if (left && transformers?.mutate) {
+		update = transformers.mutate(
+			left,
+			/** @type {AssignmentExpression | UpdateExpression} */ (update)
+		);
+	}
 
 	return is_ignored(node, 'ownership_invalid_mutation')
 		? b.call('$.skip_ownership_validation', b.thunk(update))
diff --git a/packages/svelte/tests/runtime-runes/samples/bigint-increment-mutation/_config.js b/packages/svelte/tests/runtime-runes/samples/bigint-increment-mutation/_config.js
new file mode 100644
index 0000000000..fe1e962de2
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/bigint-increment-mutation/_config.js
@@ -0,0 +1,15 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: '<button>mutate</button><button>reassign</button><p>0</p>',
+	test({ assert, target }) {
+		const [btn1, btn2] = target.querySelectorAll('button');
+
+		flushSync(() => btn1.click());
+		assert.htmlEqual(target.innerHTML, '<button>mutate</button><button>reassign</button><p>1</p>');
+
+		flushSync(() => btn2.click());
+		assert.htmlEqual(target.innerHTML, '<button>mutate</button><button>reassign</button><p>0</p>');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/bigint-increment-mutation/main.svelte b/packages/svelte/tests/runtime-runes/samples/bigint-increment-mutation/main.svelte
new file mode 100644
index 0000000000..148c7cef9f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/bigint-increment-mutation/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	let object = $state({ n: 0n });
+
+	function reassign() {
+		object = { n: 0n };
+	}
+
+	function mutate() {
+		return object.n++;
+	}
+</script>
+
+<button onclick={mutate}>mutate</button>
+<button onclick={reassign}>reassign</button>
+
+<p>{object.n}</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/bigint-increment/_config.js b/packages/svelte/tests/runtime-runes/samples/bigint-increment/_config.js
new file mode 100644
index 0000000000..95b9addae6
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/bigint-increment/_config.js
@@ -0,0 +1,7 @@
+import { test } from '../../test';
+
+export default test({
+	test({ assert, logs }) {
+		assert.deepEqual(logs, [0n, 1n, 2n, 3n, 4n, 5n]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/bigint-increment/main.svelte b/packages/svelte/tests/runtime-runes/samples/bigint-increment/main.svelte
new file mode 100644
index 0000000000..a3370b5467
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/bigint-increment/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	for (let i = 0n; i <= 5n; i++) {
+		console.log(i);
+	}
+</script>

From 8ad9295535f5a5945f70b86e8d66b01d6af71c18 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 3 Dec 2024 13:16:52 -0500
Subject: [PATCH 147/159] docs: hints on preserving reactivity (#14514)

---
 documentation/docs/02-runes/02-$state.md | 55 +++++++++++++++++++++---
 1 file changed, 48 insertions(+), 7 deletions(-)

diff --git a/documentation/docs/02-runes/02-$state.md b/documentation/docs/02-runes/02-$state.md
index e8213d3cf4..cc4ba0992c 100644
--- a/documentation/docs/02-runes/02-$state.md
+++ b/documentation/docs/02-runes/02-$state.md
@@ -36,12 +36,7 @@ let todos = $state([
 ...modifying an individual todo's property will trigger updates to anything in your UI that depends on that specific property:
 
 ```js
-// @filename: ambient.d.ts
-declare global {
-	const todos: Array<{ done: boolean, text: string }>
-}
-
-// @filename: index.js
+let todos = [{ done: false, text: 'add more todos' }];
 // ---cut---
 todos[0].done = !todos[0].done;
 ```
@@ -64,6 +59,17 @@ todos.push({
 
 > [!NOTE] When you update properties of proxies, the original object is _not_ mutated.
 
+Note that if you destructure a reactive value, the references are not reactive — as in normal JavaScript, they are evaluated at the point of destructuring:
+
+```js
+let todos = [{ done: false, text: 'add more todos' }];
+// ---cut---
+let { done, text } = todos[0];
+
+// this will not affect the value of `done`
+todos[0].done = !todos[0].done;
+```
+
 ### Classes
 
 You can also use `$state` in class fields (whether public or private):
@@ -85,7 +91,42 @@ class Todo {
 }
 ```
 
-> [!NOTE] The compiler transforms `done` and `text` into `get`/`set` methods on the class prototype referencing private fields.
+> [!NOTE] The compiler transforms `done` and `text` into `get`/`set` methods on the class prototype referencing private fields. This means the properties are not enumerable.
+
+When calling methods in JavaScript, the value of [`this`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this) matters. This won't work, because `this` inside the `reset` method will be the `<button>` rather than the `Todo`:
+
+```svelte
+<button onclick={todo.reset}>
+	reset
+</button>
+```
+
+You can either use an inline function...
+
+```svelte
+<button onclick=+++{() => todo.reset()}>+++
+	reset
+</button>
+```
+
+...or use an arrow function in the class definition:
+
+```js
+// @errors: 7006 2554
+class Todo {
+	done = $state(false);
+	text = $state();
+
+	constructor(text) {
+		this.text = text;
+	}
+
+	+++reset = () => {+++
+		this.text = '';
+		this.done = false;
+	}
+}
+```
 
 ## `$state.raw`
 

From 87863da6ff892a8678eca35876e8d863065cb1ef Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 3 Dec 2024 13:17:12 -0500
Subject: [PATCH 148/159] docs: how to javascript (#14528)

---
 documentation/docs/02-runes/02-$state.md | 87 ++++++++++++++++++++++++
 1 file changed, 87 insertions(+)

diff --git a/documentation/docs/02-runes/02-$state.md b/documentation/docs/02-runes/02-$state.md
index cc4ba0992c..80bf6bd03f 100644
--- a/documentation/docs/02-runes/02-$state.md
+++ b/documentation/docs/02-runes/02-$state.md
@@ -168,3 +168,90 @@ To take a static snapshot of a deeply reactive `$state` proxy, use `$state.snaps
 ```
 
 This is handy when you want to pass some state to an external library or API that doesn't expect a proxy, such as `structuredClone`.
+
+## Passing state into functions
+
+JavaScript is a _pass-by-value_ language — when you call a function, the arguments are the _values_ rather than the _variables_. In other words:
+
+```js
+/// file: index.js
+// @filename: index.js
+// ---cut---
+/**
+ * @param {number} a
+ * @param {number} b
+ */
+function add(a, b) {
+	return a + b;
+}
+
+let a = 1;
+let b = 2;
+let total = add(a, b);
+console.log(total); // 3
+
+a = 3;
+b = 4;
+console.log(total); // still 3!
+```
+
+If `add` wanted to have access to the _current_ values of `a` and `b`, and to return the current `total` value, you would need to use functions instead:
+
+```js
+/// file: index.js
+// @filename: index.js
+// ---cut---
+/**
+ * @param {() => number} getA
+ * @param {() => number} getB
+ */
+function add(+++getA, getB+++) {
+	return +++() => getA() + getB()+++;
+}
+
+let a = 1;
+let b = 2;
+let total = add+++(() => a, () => b)+++;
+console.log(+++total()+++); // 3
+
+a = 3;
+a = 4;
+console.log(+++total()+++); // 7
+```
+
+State in Svelte is no different — when you reference something declared with the `$state` rune...
+
+```js
+let a = +++$state(1)+++;
+let b = +++$state(2)+++;
+```
+
+...you're accessing its _current value_.
+
+Note that 'functions' is broad — it encompasses properties of proxies and [`get`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get)/[`set`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/set) properties...
+
+```js
+/// file: index.js
+// @filename: index.js
+// ---cut---
+/**
+ * @param {{ a: number, b: number }} input
+ */
+function add(input) {
+	return {
+		get value() {
+			return input.a + input.b;
+		}
+	};
+}
+
+let input = $state({ a: 1, b: 2 });
+let total = add(input);
+console.log(total.value); // 3
+
+input.a = 3;
+input.b = 4;
+console.log(total.value); // 7
+```
+
+...though if you find yourself writing code like that, consider using [classes](#Classes) instead.

From a5de086f9507a6a1852da4926d02ec08551ae3bd Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 3 Dec 2024 13:45:46 -0500
Subject: [PATCH 149/159] feat: turn
 `reactive_declaration_non_reactive_property` into a runtime warning (#14192)

* turn `reactive_declaration_non_reactive_property` into a runtime warning

* ignore warning

* Update packages/svelte/src/internal/client/reactivity/effects.js

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>

* Update packages/svelte/src/internal/client/runtime.js

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>

* fix

* test

* changeset

* Update .changeset/witty-turtles-bake.md

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>

* add some details

* check

* regenerate

---------

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
---
 .changeset/witty-turtles-bake.md              |  5 +++
 .../.generated/client-warnings.md             | 34 +++++++++++++++++++
 .../.generated/compile-warnings.md            |  6 ----
 .../messages/client-warnings/warnings.md      | 32 +++++++++++++++++
 .../messages/compile-warnings/script.md       |  4 ---
 .../2-analyze/visitors/MemberExpression.js    | 25 --------------
 .../client/visitors/LabeledStatement.js       | 11 +++++-
 packages/svelte/src/compiler/warnings.js      |  9 -----
 packages/svelte/src/constants.js              |  3 +-
 .../src/internal/client/dev/location.js       | 25 ++++++++++++++
 .../src/internal/client/dom/blocks/html.js    |  5 ++-
 .../src/internal/client/reactivity/effects.js | 28 +++++++++++++--
 .../svelte/src/internal/client/runtime.js     | 24 ++++++++++---
 .../svelte/src/internal/client/warnings.js    | 13 +++++++
 .../_config.js                                | 26 ++++++++++++++
 .../data.svelte.js                            | 11 ++++++
 .../main.svelte                               | 13 +++++++
 .../_config.js                                |  3 --
 .../input.svelte                              |  8 -----
 .../warnings.json                             | 14 --------
 20 files changed, 217 insertions(+), 82 deletions(-)
 create mode 100644 .changeset/witty-turtles-bake.md
 create mode 100644 packages/svelte/src/internal/client/dev/location.js
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/reactive-statement-non-reactive-import-statement/_config.js
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/reactive-statement-non-reactive-import-statement/data.svelte.js
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/reactive-statement-non-reactive-import-statement/main.svelte
 delete mode 100644 packages/svelte/tests/validator/samples/reactive-statement-non-reactive-import-statement/_config.js
 delete mode 100644 packages/svelte/tests/validator/samples/reactive-statement-non-reactive-import-statement/input.svelte
 delete mode 100644 packages/svelte/tests/validator/samples/reactive-statement-non-reactive-import-statement/warnings.json

diff --git a/.changeset/witty-turtles-bake.md b/.changeset/witty-turtles-bake.md
new file mode 100644
index 0000000000..04637516f8
--- /dev/null
+++ b/.changeset/witty-turtles-bake.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+chore: turn reactive_declaration_non_reactive_property into a runtime warning
diff --git a/documentation/docs/98-reference/.generated/client-warnings.md b/documentation/docs/98-reference/.generated/client-warnings.md
index e9f1a88c3c..6e97211341 100644
--- a/documentation/docs/98-reference/.generated/client-warnings.md
+++ b/documentation/docs/98-reference/.generated/client-warnings.md
@@ -86,6 +86,40 @@ Mutating a value outside the component that created it is strongly discouraged.
 %component% mutated a value owned by %owner%. This is strongly discouraged. Consider passing values to child components with `bind:`, or use a callback instead
 ```
 
+### reactive_declaration_non_reactive_property
+
+```
+A `$:` statement (%location%) read reactive state that was not visible to the compiler. Updates to this state will not cause the statement to re-run. The behaviour of this code will change if you migrate it to runes mode
+```
+
+In legacy mode, a `$:` [reactive statement](https://svelte.dev/docs/svelte/legacy-reactive-assignments) re-runs when the state it _references_ changes. This is determined at compile time, by analysing the code.
+
+In runes mode, effects and deriveds re-run when there are changes to the values that are read during the function's _execution_.
+
+Often, the result is the same — for example these can be considered equivalent:
+
+```js
+$: sum = a + b;
+```
+
+```js
+const sum = $derived(a + b);
+```
+
+In some cases — such as the one that triggered the above warning — they are _not_ the same:
+
+```js
+const add = () => a + b;
+
+// the compiler can't 'see' that `sum` depends on `a` and `b`, but
+// they _would_ be read while executing the `$derived` version
+$: sum = add();
+```
+
+Similarly, reactive properties of [deep state](https://svelte.dev/docs/svelte/$state#Deep-state) are not visible to the compiler. As such, changes to these properties will cause effects and deriveds to re-run but will _not_ cause `$:` statements to re-run.
+
+When you [migrate this component](https://svelte.dev/docs/svelte/v5-migration-guide) to runes mode, the behaviour will change accordingly.
+
 ### state_proxy_equality_mismatch
 
 ```
diff --git a/documentation/docs/98-reference/.generated/compile-warnings.md b/documentation/docs/98-reference/.generated/compile-warnings.md
index 775e0681c9..cc948e2547 100644
--- a/documentation/docs/98-reference/.generated/compile-warnings.md
+++ b/documentation/docs/98-reference/.generated/compile-warnings.md
@@ -726,12 +726,6 @@ Reactive declarations only exist at the top level of the instance script
 Reassignments of module-level declarations will not cause reactive statements to update
 ```
 
-### reactive_declaration_non_reactive_property
-
-```
-Properties of objects and arrays are not reactive unless in runes mode. Changes to this property will not cause the reactive statement to update
-```
-
 ### script_context_deprecated
 
 ```
diff --git a/packages/svelte/messages/client-warnings/warnings.md b/packages/svelte/messages/client-warnings/warnings.md
index e9014207fd..d82cdc47a1 100644
--- a/packages/svelte/messages/client-warnings/warnings.md
+++ b/packages/svelte/messages/client-warnings/warnings.md
@@ -54,6 +54,38 @@ The easiest way to log a value as it changes over time is to use the [`$inspect`
 
 > %component% mutated a value owned by %owner%. This is strongly discouraged. Consider passing values to child components with `bind:`, or use a callback instead
 
+## reactive_declaration_non_reactive_property
+
+> A `$:` statement (%location%) read reactive state that was not visible to the compiler. Updates to this state will not cause the statement to re-run. The behaviour of this code will change if you migrate it to runes mode
+
+In legacy mode, a `$:` [reactive statement](https://svelte.dev/docs/svelte/legacy-reactive-assignments) re-runs when the state it _references_ changes. This is determined at compile time, by analysing the code.
+
+In runes mode, effects and deriveds re-run when there are changes to the values that are read during the function's _execution_.
+
+Often, the result is the same — for example these can be considered equivalent:
+
+```js
+$: sum = a + b;
+```
+
+```js
+const sum = $derived(a + b);
+```
+
+In some cases — such as the one that triggered the above warning — they are _not_ the same:
+
+```js
+const add = () => a + b;
+
+// the compiler can't 'see' that `sum` depends on `a` and `b`, but
+// they _would_ be read while executing the `$derived` version
+$: sum = add();
+```
+
+Similarly, reactive properties of [deep state](https://svelte.dev/docs/svelte/$state#Deep-state) are not visible to the compiler. As such, changes to these properties will cause effects and deriveds to re-run but will _not_ cause `$:` statements to re-run.
+
+When you [migrate this component](https://svelte.dev/docs/svelte/v5-migration-guide) to runes mode, the behaviour will change accordingly.
+
 ## state_proxy_equality_mismatch
 
 > Reactive `$state(...)` proxies and the values they proxy have different identities. Because of this, comparisons with `%operator%` will produce unexpected results
diff --git a/packages/svelte/messages/compile-warnings/script.md b/packages/svelte/messages/compile-warnings/script.md
index 293f065ba7..2c891b4fc7 100644
--- a/packages/svelte/messages/compile-warnings/script.md
+++ b/packages/svelte/messages/compile-warnings/script.md
@@ -26,10 +26,6 @@
 
 > Reassignments of module-level declarations will not cause reactive statements to update
 
-## reactive_declaration_non_reactive_property
-
-> Properties of objects and arrays are not reactive unless in runes mode. Changes to this property will not cause the reactive statement to update
-
 ## state_referenced_locally
 
 > State referenced in its own scope will never update. Did you mean to reference it inside a closure?
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/MemberExpression.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/MemberExpression.js
index 1cc20c96da..6ea8f238e1 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/MemberExpression.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/MemberExpression.js
@@ -26,30 +26,5 @@ export function MemberExpression(node, context) {
 		context.state.analysis.needs_context = true;
 	}
 
-	if (context.state.reactive_statement) {
-		const left = object(node);
-
-		if (left !== null) {
-			const binding = context.state.scope.get(left.name);
-
-			if (binding && binding.kind === 'normal') {
-				const parent = /** @type {Node} */ (context.path.at(-1));
-
-				if (
-					binding.scope === context.state.analysis.module.scope ||
-					binding.declaration_kind === 'import' ||
-					(binding.initial &&
-						binding.initial.type !== 'ArrayExpression' &&
-						binding.initial.type !== 'ObjectExpression' &&
-						binding.scope.function_depth <= 1)
-				) {
-					if (parent.type !== 'MemberExpression' && parent.type !== 'CallExpression') {
-						w.reactive_declaration_non_reactive_property(node);
-					}
-				}
-			}
-		}
-	}
-
 	context.next();
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/LabeledStatement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/LabeledStatement.js
index 87f56262a8..8ca6534457 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/LabeledStatement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/LabeledStatement.js
@@ -1,6 +1,8 @@
+/** @import { Location } from 'locate-character' */
 /** @import { Expression, LabeledStatement, Statement } from 'estree' */
 /** @import { ReactiveStatement } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
+import { dev, is_ignored, locator } from '../../../../state.js';
 import * as b from '../../../../utils/builders.js';
 import { build_getter } from '../utils.js';
 
@@ -48,6 +50,11 @@ export function LabeledStatement(node, context) {
 		sequence.push(serialized);
 	}
 
+	const location =
+		dev && !is_ignored(node, 'reactive_declaration_non_reactive_property')
+			? locator(/** @type {number} */ (node.start))
+			: undefined;
+
 	// these statements will be topologically ordered later
 	context.state.legacy_reactive_statements.set(
 		node,
@@ -55,7 +62,9 @@ export function LabeledStatement(node, context) {
 			b.call(
 				'$.legacy_pre_effect',
 				sequence.length > 0 ? b.thunk(b.sequence(sequence)) : b.thunk(b.block([])),
-				b.thunk(b.block(body))
+				b.thunk(b.block(body)),
+				location && b.literal(location.line),
+				location && b.literal(location.column)
 			)
 		)
 	);
diff --git a/packages/svelte/src/compiler/warnings.js b/packages/svelte/src/compiler/warnings.js
index bd28956230..f6ed7de7d5 100644
--- a/packages/svelte/src/compiler/warnings.js
+++ b/packages/svelte/src/compiler/warnings.js
@@ -102,7 +102,6 @@ export const codes = [
 	"perf_avoid_nested_class",
 	"reactive_declaration_invalid_placement",
 	"reactive_declaration_module_script_dependency",
-	"reactive_declaration_non_reactive_property",
 	"state_referenced_locally",
 	"store_rune_conflict",
 	"css_unused_selector",
@@ -641,14 +640,6 @@ export function reactive_declaration_module_script_dependency(node) {
 	w(node, "reactive_declaration_module_script_dependency", "Reassignments of module-level declarations will not cause reactive statements to update");
 }
 
-/**
- * Properties of objects and arrays are not reactive unless in runes mode. Changes to this property will not cause the reactive statement to update
- * @param {null | NodeLike} node
- */
-export function reactive_declaration_non_reactive_property(node) {
-	w(node, "reactive_declaration_non_reactive_property", "Properties of objects and arrays are not reactive unless in runes mode. Changes to this property will not cause the reactive statement to update");
-}
-
 /**
  * State referenced in its own scope will never update. Did you mean to reference it inside a closure?
  * @param {null | NodeLike} node
diff --git a/packages/svelte/src/constants.js b/packages/svelte/src/constants.js
index 03fddc5ebd..f8a7143b20 100644
--- a/packages/svelte/src/constants.js
+++ b/packages/svelte/src/constants.js
@@ -44,7 +44,8 @@ export const IGNORABLE_RUNTIME_WARNINGS = /** @type {const} */ ([
 	'hydration_attribute_changed',
 	'hydration_html_changed',
 	'ownership_invalid_binding',
-	'ownership_invalid_mutation'
+	'ownership_invalid_mutation',
+	'reactive_declaration_non_reactive_property'
 ]);
 
 /**
diff --git a/packages/svelte/src/internal/client/dev/location.js b/packages/svelte/src/internal/client/dev/location.js
new file mode 100644
index 0000000000..b2e16c371e
--- /dev/null
+++ b/packages/svelte/src/internal/client/dev/location.js
@@ -0,0 +1,25 @@
+import { DEV } from 'esm-env';
+import { FILENAME } from '../../../constants.js';
+import { dev_current_component_function } from '../runtime.js';
+
+/**
+ *
+ * @param {number} [line]
+ * @param {number} [column]
+ */
+export function get_location(line, column) {
+	if (!DEV || line === undefined) return undefined;
+
+	var filename = dev_current_component_function?.[FILENAME];
+	var location = filename && `${filename}:${line}:${column}`;
+
+	return sanitize_location(location);
+}
+
+/**
+ * Prevent devtools trying to make `location` a clickable link by inserting a zero-width space
+ * @param {string | undefined} location
+ */
+export function sanitize_location(location) {
+	return location?.replace(/\//g, '/\u200b');
+}
diff --git a/packages/svelte/src/internal/client/dom/blocks/html.js b/packages/svelte/src/internal/client/dom/blocks/html.js
index aa13336b29..2f815b454e 100644
--- a/packages/svelte/src/internal/client/dom/blocks/html.js
+++ b/packages/svelte/src/internal/client/dom/blocks/html.js
@@ -9,6 +9,7 @@ import { hash } from '../../../../utils.js';
 import { DEV } from 'esm-env';
 import { dev_current_component_function } from '../../runtime.js';
 import { get_first_child, get_next_sibling } from '../operations.js';
+import { sanitize_location } from '../../dev/location.js';
 
 /**
  * @param {Element} element
@@ -28,9 +29,7 @@ function check_hash(element, server_hash, value) {
 		location = `in ${dev_current_component_function[FILENAME]}`;
 	}
 
-	w.hydration_html_changed(
-		location?.replace(/\//g, '/\u200b') // prevent devtools trying to make it a clickable link by inserting a zero-width space
-	);
+	w.hydration_html_changed(sanitize_location(location));
 }
 
 /**
diff --git a/packages/svelte/src/internal/client/reactivity/effects.js b/packages/svelte/src/internal/client/reactivity/effects.js
index 69b006fc0f..912aab37b6 100644
--- a/packages/svelte/src/internal/client/reactivity/effects.js
+++ b/packages/svelte/src/internal/client/reactivity/effects.js
@@ -16,7 +16,8 @@ import {
 	set_is_flushing_effect,
 	set_signal_status,
 	untrack,
-	skip_reaction
+	skip_reaction,
+	capture_signals
 } from '../runtime.js';
 import {
 	DIRTY,
@@ -39,10 +40,13 @@ import {
 } from '../constants.js';
 import { set } from './sources.js';
 import * as e from '../errors.js';
+import * as w from '../warnings.js';
 import { DEV } from 'esm-env';
 import { define_property } from '../../shared/utils.js';
 import { get_next_sibling } from '../dom/operations.js';
 import { destroy_derived } from './deriveds.js';
+import { FILENAME } from '../../../constants.js';
+import { get_location } from '../dev/location.js';
 
 /**
  * @param {'$effect' | '$effect.pre' | '$inspect'} rune
@@ -261,14 +265,21 @@ export function effect(fn) {
  * Internal representation of `$: ..`
  * @param {() => any} deps
  * @param {() => void | (() => void)} fn
+ * @param {number} [line]
+ * @param {number} [column]
  */
-export function legacy_pre_effect(deps, fn) {
+export function legacy_pre_effect(deps, fn, line, column) {
 	var context = /** @type {ComponentContextLegacy} */ (component_context);
 
 	/** @type {{ effect: null | Effect, ran: boolean }} */
 	var token = { effect: null, ran: false };
 	context.l.r1.push(token);
 
+	if (DEV && line !== undefined) {
+		var location = get_location(line, column);
+		var explicit_deps = capture_signals(deps);
+	}
+
 	token.effect = render_effect(() => {
 		deps();
 
@@ -278,7 +289,18 @@ export function legacy_pre_effect(deps, fn) {
 
 		token.ran = true;
 		set(context.l.r2, true);
-		untrack(fn);
+
+		if (DEV && location) {
+			var implicit_deps = capture_signals(() => untrack(fn));
+
+			for (var signal of implicit_deps) {
+				if (!explicit_deps.has(signal)) {
+					w.reactive_declaration_non_reactive_property(/** @type {string} */ (location));
+				}
+			}
+		} else {
+			untrack(fn);
+		}
 	});
 }
 
diff --git a/packages/svelte/src/internal/client/runtime.js b/packages/svelte/src/internal/client/runtime.js
index 2779898d6f..a3ec5bca34 100644
--- a/packages/svelte/src/internal/client/runtime.js
+++ b/packages/svelte/src/internal/client/runtime.js
@@ -894,15 +894,17 @@ export function safe_get(signal) {
 }
 
 /**
- * Invokes a function and captures all signals that are read during the invocation,
- * then invalidates them.
- * @param {() => any} fn
+ * Capture an array of all the signals that are read when `fn` is called
+ * @template T
+ * @param {() => T} fn
  */
-export function invalidate_inner_signals(fn) {
+export function capture_signals(fn) {
 	var previous_captured_signals = captured_signals;
 	captured_signals = new Set();
+
 	var captured = captured_signals;
 	var signal;
+
 	try {
 		untrack(fn);
 		if (previous_captured_signals !== null) {
@@ -913,7 +915,19 @@ export function invalidate_inner_signals(fn) {
 	} finally {
 		captured_signals = previous_captured_signals;
 	}
-	for (signal of captured) {
+
+	return captured;
+}
+
+/**
+ * Invokes a function and captures all signals that are read during the invocation,
+ * then invalidates them.
+ * @param {() => any} fn
+ */
+export function invalidate_inner_signals(fn) {
+	var captured = capture_signals(() => untrack(fn));
+
+	for (var signal of captured) {
 		// Go one level up because derived signals created as part of props in legacy mode
 		if ((signal.f & LEGACY_DERIVED_PROP) !== 0) {
 			for (const dep of /** @type {Derived} */ (signal).deps || []) {
diff --git a/packages/svelte/src/internal/client/warnings.js b/packages/svelte/src/internal/client/warnings.js
index 0478313719..5e38db52f0 100644
--- a/packages/svelte/src/internal/client/warnings.js
+++ b/packages/svelte/src/internal/client/warnings.js
@@ -153,6 +153,19 @@ export function ownership_invalid_mutation(component, owner) {
 	}
 }
 
+/**
+ * A `$:` statement (%location%) read reactive state that was not visible to the compiler. Updates to this state will not cause the statement to re-run. The behaviour of this code will change if you migrate it to runes mode
+ * @param {string} location
+ */
+export function reactive_declaration_non_reactive_property(location) {
+	if (DEV) {
+		console.warn(`%c[svelte] reactive_declaration_non_reactive_property\n%cA \`$:\` statement (${location}) read reactive state that was not visible to the compiler. Updates to this state will not cause the statement to re-run. The behaviour of this code will change if you migrate it to runes mode`, bold, normal);
+	} else {
+		// TODO print a link to the documentation
+		console.warn("reactive_declaration_non_reactive_property");
+	}
+}
+
 /**
  * Reactive `$state(...)` proxies and the values they proxy have different identities. Because of this, comparisons with `%operator%` will produce unexpected results
  * @param {string} operator
diff --git a/packages/svelte/tests/runtime-legacy/samples/reactive-statement-non-reactive-import-statement/_config.js b/packages/svelte/tests/runtime-legacy/samples/reactive-statement-non-reactive-import-statement/_config.js
new file mode 100644
index 0000000000..7a77424bb2
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/reactive-statement-non-reactive-import-statement/_config.js
@@ -0,0 +1,26 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+
+	html: '<p>42</p><p>42</p><button>update</button><button>reset</button>',
+
+	test({ assert, target }) {
+		const [update, reset] = target.querySelectorAll('button');
+		flushSync(() => update.click());
+
+		assert.htmlEqual(
+			target.innerHTML,
+			'<p>42</p><p>42</p><button>update</button><button>reset</button>'
+		);
+
+		flushSync(() => reset.click());
+	},
+
+	warnings: [
+		'A `$:` statement (main.svelte:4:1) read reactive state that was not visible to the compiler. Updates to this state will not cause the statement to re-run. The behaviour of this code will change if you migrate it to runes mode'
+	]
+});
diff --git a/packages/svelte/tests/runtime-legacy/samples/reactive-statement-non-reactive-import-statement/data.svelte.js b/packages/svelte/tests/runtime-legacy/samples/reactive-statement-non-reactive-import-statement/data.svelte.js
new file mode 100644
index 0000000000..70fd0a6abc
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/reactive-statement-non-reactive-import-statement/data.svelte.js
@@ -0,0 +1,11 @@
+export const obj = $state({
+	prop: 42
+});
+
+export function update() {
+	obj.prop += 1;
+}
+
+export function reset() {
+	obj.prop = 42;
+}
diff --git a/packages/svelte/tests/runtime-legacy/samples/reactive-statement-non-reactive-import-statement/main.svelte b/packages/svelte/tests/runtime-legacy/samples/reactive-statement-non-reactive-import-statement/main.svelte
new file mode 100644
index 0000000000..2a9b1e1f23
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/reactive-statement-non-reactive-import-statement/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	import { obj, update, reset } from './data.svelte.js';
+
+	$: a = obj.prop;
+
+	// svelte-ignore reactive_declaration_non_reactive_property
+	$: b = obj.prop;
+</script>
+
+<p>{a}</p>
+<p>{b}</p>
+<button on:click={update}>update</button>
+<button on:click={reset}>reset</button>
diff --git a/packages/svelte/tests/validator/samples/reactive-statement-non-reactive-import-statement/_config.js b/packages/svelte/tests/validator/samples/reactive-statement-non-reactive-import-statement/_config.js
deleted file mode 100644
index f47bee71df..0000000000
--- a/packages/svelte/tests/validator/samples/reactive-statement-non-reactive-import-statement/_config.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { test } from '../../test';
-
-export default test({});
diff --git a/packages/svelte/tests/validator/samples/reactive-statement-non-reactive-import-statement/input.svelte b/packages/svelte/tests/validator/samples/reactive-statement-non-reactive-import-statement/input.svelte
deleted file mode 100644
index 2582974b71..0000000000
--- a/packages/svelte/tests/validator/samples/reactive-statement-non-reactive-import-statement/input.svelte
+++ /dev/null
@@ -1,8 +0,0 @@
-<script>
-	import { obj } from './data.js';
-
-	$: prop = obj.prop;
-	obj.foo = 'a different prop';
-</script>
-
-<p>{prop}</p>
diff --git a/packages/svelte/tests/validator/samples/reactive-statement-non-reactive-import-statement/warnings.json b/packages/svelte/tests/validator/samples/reactive-statement-non-reactive-import-statement/warnings.json
deleted file mode 100644
index 4184902753..0000000000
--- a/packages/svelte/tests/validator/samples/reactive-statement-non-reactive-import-statement/warnings.json
+++ /dev/null
@@ -1,14 +0,0 @@
-[
-	{
-		"code": "reactive_declaration_non_reactive_property",
-		"message": "Properties of objects and arrays are not reactive unless in runes mode. Changes to this property will not cause the reactive statement to update",
-		"start": {
-			"line": 4,
-			"column": 11
-		},
-		"end": {
-			"line": 4,
-			"column": 19
-		}
-	}
-]

From 39275684e5f19c86ea976af4b2235e6b6588c27d Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Tue, 3 Dec 2024 19:49:32 +0100
Subject: [PATCH 150/159] fix: don't throw with nullish actions (#13559)

Co-authored-by: Oscar Dominguez <dominguez.celada@gmail.com>
---
 .changeset/afraid-worms-clean.md                           | 5 +++++
 .../phases/3-transform/client/visitors/UseDirective.js     | 5 ++++-
 .../tests/runtime-runes/samples/nullish-actions/_config.js | 5 +++++
 .../runtime-runes/samples/nullish-actions/main.svelte      | 7 +++++++
 4 files changed, 21 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/afraid-worms-clean.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/nullish-actions/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/nullish-actions/main.svelte

diff --git a/.changeset/afraid-worms-clean.md b/.changeset/afraid-worms-clean.md
new file mode 100644
index 0000000000..800177b95b
--- /dev/null
+++ b/.changeset/afraid-worms-clean.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: don't throw with nullish actions
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/UseDirective.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/UseDirective.js
index f6d918ce45..be9eb2d516 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/UseDirective.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/UseDirective.js
@@ -20,7 +20,10 @@ export function UseDirective(node, context) {
 		context.state.node,
 		b.arrow(
 			params,
-			b.call(/** @type {Expression} */ (context.visit(parse_directive_name(node.name))), ...params)
+			b.maybe_call(
+				/** @type {Expression} */ (context.visit(parse_directive_name(node.name))),
+				...params
+			)
 		)
 	];
 
diff --git a/packages/svelte/tests/runtime-runes/samples/nullish-actions/_config.js b/packages/svelte/tests/runtime-runes/samples/nullish-actions/_config.js
new file mode 100644
index 0000000000..5d96dc96a4
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/nullish-actions/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	html: '<div></div> <div></div>'
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/nullish-actions/main.svelte b/packages/svelte/tests/runtime-runes/samples/nullish-actions/main.svelte
new file mode 100644
index 0000000000..2cbeb6722d
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/nullish-actions/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	let { action_prop } = $props();
+	let action = $state();
+</script>
+
+<div use:action></div>
+<div use:action_prop></div>
\ No newline at end of file

From 2f8eda94f34f756f5f5c6ea50d202f83e0d875a8 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 3 Dec 2024 13:49:57 -0500
Subject: [PATCH 151/159] fix: ensure SvelteDate cached methods have correct
 reactive context (#14525)

* fix: ensure SvelteDate cached methods have no reactive context

* fix: ensure SvelteDate cached methods have no reactive context

* fix

* lint

* use active reaction at time of instance creation

* tweak changeset

* Update packages/svelte/src/internal/client/dom/elements/bindings/shared.js

Co-authored-by: Paolo Ricciuti <ricciutipaolo@gmail.com>

---------

Co-authored-by: Dominic Gannaway <dg@domgan.com>
Co-authored-by: Paolo Ricciuti <ricciutipaolo@gmail.com>
---
 .changeset/wicked-zebras-exist.md           |  5 ++++
 packages/svelte/src/reactivity/date.js      | 14 +++++++---
 packages/svelte/src/reactivity/date.test.ts | 30 +++++++++++++++++++++
 3 files changed, 46 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/wicked-zebras-exist.md

diff --git a/.changeset/wicked-zebras-exist.md b/.changeset/wicked-zebras-exist.md
new file mode 100644
index 0000000000..f76d77bb90
--- /dev/null
+++ b/.changeset/wicked-zebras-exist.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: use correct reaction when lazily creating deriveds inside `SvelteDate`
diff --git a/packages/svelte/src/reactivity/date.js b/packages/svelte/src/reactivity/date.js
index 2d8de624bc..33da2e1761 100644
--- a/packages/svelte/src/reactivity/date.js
+++ b/packages/svelte/src/reactivity/date.js
@@ -1,8 +1,7 @@
 /** @import { Source } from '#client' */
-import { DESTROYED } from '../internal/client/constants.js';
 import { derived } from '../internal/client/index.js';
 import { source, set } from '../internal/client/reactivity/sources.js';
-import { get } from '../internal/client/runtime.js';
+import { active_reaction, get, set_active_reaction } from '../internal/client/runtime.js';
 
 var inited = false;
 
@@ -12,6 +11,8 @@ export class SvelteDate extends Date {
 	/** @type {Map<keyof Date, Source<unknown>>} */
 	#deriveds = new Map();
 
+	#reaction = active_reaction;
+
 	/** @param {any[]} params */
 	constructor(...params) {
 		// @ts-ignore
@@ -43,7 +44,12 @@ export class SvelteDate extends Date {
 
 					var d = this.#deriveds.get(method);
 
-					if (d === undefined || (d.f & DESTROYED) !== 0) {
+					if (d === undefined) {
+						// lazily create the derived, but as though it were being
+						// created at the same time as the class instance
+						const reaction = active_reaction;
+						set_active_reaction(this.#reaction);
+
 						d = derived(() => {
 							get(this.#time);
 							// @ts-ignore
@@ -51,6 +57,8 @@ export class SvelteDate extends Date {
 						});
 
 						this.#deriveds.set(method, d);
+
+						set_active_reaction(reaction);
 					}
 
 					return get(d);
diff --git a/packages/svelte/src/reactivity/date.test.ts b/packages/svelte/src/reactivity/date.test.ts
index 87bfde41c8..f90c5a102c 100644
--- a/packages/svelte/src/reactivity/date.test.ts
+++ b/packages/svelte/src/reactivity/date.test.ts
@@ -642,3 +642,33 @@ test('Date methods invoked for the first time in a derived', () => {
 
 	cleanup();
 });
+
+test('Date methods shared between deriveds', () => {
+	const date = new SvelteDate(initial_date);
+	const log: any = [];
+
+	const cleanup = effect_root(() => {
+		const year = derived(() => {
+			return date.getFullYear();
+		});
+		const year2 = derived(() => {
+			return date.getTime(), date.getFullYear();
+		});
+
+		render_effect(() => {
+			log.push(get(year) + '/' + get(year2).toString());
+		});
+
+		flushSync(() => {
+			date.setFullYear(date.getFullYear() + 1);
+		});
+
+		flushSync(() => {
+			date.setFullYear(date.getFullYear() + 1);
+		});
+	});
+
+	assert.deepEqual(log, ['2023/2023', '2024/2024', '2025/2025']);
+
+	cleanup();
+});

From d595cc16fbc5a88e3ce0dff8c3e36c10a9e78ac9 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 3 Dec 2024 13:50:54 -0500
Subject: [PATCH 152/159] Version Packages (#14529)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/afraid-worms-clean.md |  5 -----
 .changeset/neat-news-dance.md    |  5 -----
 .changeset/witty-turtles-bake.md |  5 -----
 packages/svelte/CHANGELOG.md     | 10 ++++++++++
 packages/svelte/package.json     |  2 +-
 packages/svelte/src/version.js   |  2 +-
 6 files changed, 12 insertions(+), 17 deletions(-)
 delete mode 100644 .changeset/afraid-worms-clean.md
 delete mode 100644 .changeset/neat-news-dance.md
 delete mode 100644 .changeset/witty-turtles-bake.md

diff --git a/.changeset/afraid-worms-clean.md b/.changeset/afraid-worms-clean.md
deleted file mode 100644
index 800177b95b..0000000000
--- a/.changeset/afraid-worms-clean.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: don't throw with nullish actions
diff --git a/.changeset/neat-news-dance.md b/.changeset/neat-news-dance.md
deleted file mode 100644
index 817c012330..0000000000
--- a/.changeset/neat-news-dance.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: leave update expressions untransformed unless a transformer is provided
diff --git a/.changeset/witty-turtles-bake.md b/.changeset/witty-turtles-bake.md
deleted file mode 100644
index 04637516f8..0000000000
--- a/.changeset/witty-turtles-bake.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-chore: turn reactive_declaration_non_reactive_property into a runtime warning
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index a53738689f..c1a102378a 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,15 @@
 # svelte
 
+## 5.5.1
+
+### Patch Changes
+
+- fix: don't throw with nullish actions ([#13559](https://github.com/sveltejs/svelte/pull/13559))
+
+- fix: leave update expressions untransformed unless a transformer is provided ([#14507](https://github.com/sveltejs/svelte/pull/14507))
+
+- chore: turn reactive_declaration_non_reactive_property into a runtime warning ([#14192](https://github.com/sveltejs/svelte/pull/14192))
+
 ## 5.5.0
 
 ### Minor Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index fe25b0bb34..6d1229415b 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.5.0",
+  "version": "5.5.1",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 1271d6cb90..1fbb82c6fb 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.5.0';
+export const VERSION = '5.5.1';
 export const PUBLIC_VERSION = '5';

From a65e68ca37d171663feec99382efd46e7cea364f Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 3 Dec 2024 13:59:16 -0500
Subject: [PATCH 153/159] Version Packages (#14530)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/wicked-zebras-exist.md | 5 -----
 packages/svelte/CHANGELOG.md      | 6 ++++++
 packages/svelte/package.json      | 2 +-
 packages/svelte/src/version.js    | 2 +-
 4 files changed, 8 insertions(+), 7 deletions(-)
 delete mode 100644 .changeset/wicked-zebras-exist.md

diff --git a/.changeset/wicked-zebras-exist.md b/.changeset/wicked-zebras-exist.md
deleted file mode 100644
index f76d77bb90..0000000000
--- a/.changeset/wicked-zebras-exist.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: use correct reaction when lazily creating deriveds inside `SvelteDate`
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index c1a102378a..8bf0885277 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,11 @@
 # svelte
 
+## 5.5.2
+
+### Patch Changes
+
+- fix: use correct reaction when lazily creating deriveds inside `SvelteDate` ([#14525](https://github.com/sveltejs/svelte/pull/14525))
+
 ## 5.5.1
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 6d1229415b..0728adf5fc 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.5.1",
+  "version": "5.5.2",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 1fbb82c6fb..0394adda82 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.5.1';
+export const VERSION = '5.5.2';
 export const PUBLIC_VERSION = '5';

From d5a28a01a16b1151c62dde878f69c4cb6e80d108 Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Tue, 3 Dec 2024 22:31:28 +0100
Subject: [PATCH 154/159] docs: fix typo in `$state` (#14535)

---
 documentation/docs/02-runes/02-$state.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/documentation/docs/02-runes/02-$state.md b/documentation/docs/02-runes/02-$state.md
index 80bf6bd03f..77140dc690 100644
--- a/documentation/docs/02-runes/02-$state.md
+++ b/documentation/docs/02-runes/02-$state.md
@@ -215,7 +215,7 @@ let total = add+++(() => a, () => b)+++;
 console.log(+++total()+++); // 3
 
 a = 3;
-a = 4;
+b = 4;
 console.log(+++total()+++); // 7
 ```
 

From b5588523fc03cddec877161c17dd93d524a15129 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Tue, 3 Dec 2024 22:22:23 +0000
Subject: [PATCH 155/159] fix: capture infinite_loop_guard in error boundary
 (#14534)

* fix: capture infinite_loop_guard in error boundary

* fix
---
 .changeset/hip-forks-exercise.md              |  5 ++
 .../svelte/src/internal/client/runtime.js     | 52 ++++++++++++++-----
 .../samples/error-boundary-20/Child.svelte    | 17 ++++++
 .../samples/error-boundary-20/_config.js      | 13 +++++
 .../samples/error-boundary-20/main.svelte     | 10 ++++
 5 files changed, 85 insertions(+), 12 deletions(-)
 create mode 100644 .changeset/hip-forks-exercise.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/error-boundary-20/Child.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/error-boundary-20/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/error-boundary-20/main.svelte

diff --git a/.changeset/hip-forks-exercise.md b/.changeset/hip-forks-exercise.md
new file mode 100644
index 0000000000..41df40bd6a
--- /dev/null
+++ b/.changeset/hip-forks-exercise.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: capture infinite_loop_guard in error boundary
diff --git a/packages/svelte/src/internal/client/runtime.js b/packages/svelte/src/internal/client/runtime.js
index a3ec5bca34..4928419d16 100644
--- a/packages/svelte/src/internal/client/runtime.js
+++ b/packages/svelte/src/internal/client/runtime.js
@@ -48,6 +48,9 @@ let scheduler_mode = FLUSH_MICROTASK;
 // Used for handling scheduling
 let is_micro_task_queued = false;
 
+/** @type {Effect | null} */
+let last_scheduled_effect = null;
+
 export let is_flushing_effect = false;
 export let is_destroying_effect = false;
 
@@ -532,27 +535,47 @@ export function update_effect(effect) {
 	}
 }
 
+function log_effect_stack() {
+	// eslint-disable-next-line no-console
+	console.error(
+		'Last ten effects were: ',
+		dev_effect_stack.slice(-10).map((d) => d.fn)
+	);
+	dev_effect_stack = [];
+}
+
 function infinite_loop_guard() {
 	if (flush_count > 1000) {
 		flush_count = 0;
-		if (DEV) {
-			try {
-				e.effect_update_depth_exceeded();
-			} catch (error) {
+		try {
+			e.effect_update_depth_exceeded();
+		} catch (error) {
+			if (DEV) {
 				// stack is garbage, ignore. Instead add a console.error message.
 				define_property(error, 'stack', {
 					value: ''
 				});
-				// eslint-disable-next-line no-console
-				console.error(
-					'Last ten effects were: ',
-					dev_effect_stack.slice(-10).map((d) => d.fn)
-				);
-				dev_effect_stack = [];
+			}
+			// Try and handle the error so it can be caught at a boundary, that's
+			// if there's an effect available from when it was last scheduled
+			if (last_scheduled_effect !== null) {
+				if (DEV) {
+					try {
+						handle_error(error, last_scheduled_effect, null, null);
+					} catch (e) {
+						// Only log the effect stack if the error is re-thrown
+						log_effect_stack();
+						throw e;
+					}
+				} else {
+					handle_error(error, last_scheduled_effect, null, null);
+				}
+			} else {
+				if (DEV) {
+					log_effect_stack();
+				}
 				throw error;
 			}
-		} else {
-			e.effect_update_depth_exceeded();
 		}
 	}
 	flush_count++;
@@ -637,8 +660,10 @@ function process_deferred() {
 	const previous_queued_root_effects = queued_root_effects;
 	queued_root_effects = [];
 	flush_queued_root_effects(previous_queued_root_effects);
+
 	if (!is_micro_task_queued) {
 		flush_count = 0;
+		last_scheduled_effect = null;
 		if (DEV) {
 			dev_effect_stack = [];
 		}
@@ -657,6 +682,8 @@ export function schedule_effect(signal) {
 		}
 	}
 
+	last_scheduled_effect = signal;
+
 	var effect = signal;
 
 	while (effect.parent !== null) {
@@ -776,6 +803,7 @@ export function flush_sync(fn) {
 		}
 
 		flush_count = 0;
+		last_scheduled_effect = null;
 		if (DEV) {
 			dev_effect_stack = [];
 		}
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-20/Child.svelte b/packages/svelte/tests/runtime-runes/samples/error-boundary-20/Child.svelte
new file mode 100644
index 0000000000..ff97dd96f0
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-20/Child.svelte
@@ -0,0 +1,17 @@
+<script>
+	let count = $state(0);
+	let clicked = $state(false);
+
+	function increment() {
+		clicked = true;
+		count++;
+	}
+
+	$effect(() => {
+		if (clicked) {
+			count++;
+		}
+	});
+</script>
+
+<button onclick={increment}>{count}</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-20/_config.js b/packages/svelte/tests/runtime-runes/samples/error-boundary-20/_config.js
new file mode 100644
index 0000000000..ccff614ade
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-20/_config.js
@@ -0,0 +1,13 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	test({ assert, target }) {
+		let btn = target.querySelector('button');
+
+		btn?.click();
+		flushSync();
+
+		assert.htmlEqual(target.innerHTML, `<div class="error">An error occurred!</div>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-20/main.svelte b/packages/svelte/tests/runtime-runes/samples/error-boundary-20/main.svelte
new file mode 100644
index 0000000000..18f216147f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-20/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	import Child from "./Child.svelte"
+</script>
+<svelte:boundary>
+	<Child />
+
+	{#snippet failed()}
+		<div class="error">An error occurred!</div>
+	{/snippet}
+</svelte:boundary>

From bbee1fc7e05a24b3b31fbce50144aee5d898009a Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Tue, 3 Dec 2024 23:24:10 +0100
Subject: [PATCH 156/159] fix: don't try to add owners to non-`$state` class
 fields (#14533)

* fix: don't try to add owners to non-`$state` class fields

`$state.raw` and `$derived(.by)` will not have a state symbol on them, potentially causing a disastrous amount of traversal to potentially not find any state symbol. So it's better to not traverse them.

Potentially someone could create a `$state` while creating `$state.raw` or inside a `$derived.by`, but that feels so much of an edge case that it doesn't warrant a perf hit for the common case.

Fixes #14491

* for bind:, too
---
 .changeset/giant-windows-dance.md             |  5 ++++
 .../3-transform/client/visitors/ClassBody.js  | 25 +++++++++-------
 .../client/visitors/shared/component.js       | 30 ++++++++++++-------
 3 files changed, 40 insertions(+), 20 deletions(-)
 create mode 100644 .changeset/giant-windows-dance.md

diff --git a/.changeset/giant-windows-dance.md b/.changeset/giant-windows-dance.md
new file mode 100644
index 0000000000..7ada8c4836
--- /dev/null
+++ b/.changeset/giant-windows-dance.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: don't try to add owners to non-`$state` class fields
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/ClassBody.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/ClassBody.js
index 11a524d33c..5e842a82fe 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/ClassBody.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/ClassBody.js
@@ -184,17 +184,22 @@ export function ClassBody(node, context) {
 				'method',
 				b.id('$.ADD_OWNER'),
 				[b.id('owner')],
-				Array.from(public_state.keys()).map((name) =>
-					b.stmt(
-						b.call(
-							'$.add_owner',
-							b.call('$.get', b.member(b.this, b.private_id(name))),
-							b.id('owner'),
-							b.literal(false),
-							is_ignored(node, 'ownership_invalid_binding') && b.true
+				Array.from(public_state)
+					// Only run ownership addition on $state fields.
+					// Theoretically someone could create a `$state` while creating `$state.raw` or inside a `$derived.by`,
+					// but that feels so much of an edge case that it doesn't warrant a perf hit for the common case.
+					.filter(([_, { kind }]) => kind === 'state')
+					.map(([name]) =>
+						b.stmt(
+							b.call(
+								'$.add_owner',
+								b.call('$.get', b.member(b.this, b.private_id(name))),
+								b.id('owner'),
+								b.literal(false),
+								is_ignored(node, 'ownership_invalid_binding') && b.true
+							)
 						)
-					)
-				),
+					),
 				true
 			)
 		);
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
index 8e1a536707..5dde60b3b4 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
@@ -2,7 +2,7 @@
 /** @import { AST, TemplateNode } from '#compiler' */
 /** @import { ComponentContext } from '../../types.js' */
 import { dev, is_ignored } from '../../../../../state.js';
-import { get_attribute_chunks } from '../../../../../utils/ast.js';
+import { get_attribute_chunks, object } from '../../../../../utils/ast.js';
 import * as b from '../../../../../utils/builders.js';
 import { create_derived } from '../../utils.js';
 import { build_bind_this, validate_binding } from '../shared/utils.js';
@@ -176,16 +176,26 @@ export function build_component(node, component_name, context, anchor = context.
 				bind_this = attribute.expression;
 			} else {
 				if (dev) {
-					binding_initializers.push(
-						b.stmt(
-							b.call(
-								b.id('$.add_owner_effect'),
-								b.thunk(expression),
-								b.id(component_name),
-								is_ignored(node, 'ownership_invalid_binding') && b.true
+					const left = object(attribute.expression);
+					let binding;
+					if (left?.type === 'Identifier') {
+						binding = context.state.scope.get(left.name);
+					}
+					// Only run ownership addition on $state fields.
+					// Theoretically someone could create a `$state` while creating `$state.raw` or inside a `$derived.by`,
+					// but that feels so much of an edge case that it doesn't warrant a perf hit for the common case.
+					if (binding?.kind !== 'derived' && binding?.kind !== 'raw_state') {
+						binding_initializers.push(
+							b.stmt(
+								b.call(
+									b.id('$.add_owner_effect'),
+									b.thunk(expression),
+									b.id(component_name),
+									is_ignored(node, 'ownership_invalid_binding') && b.true
+								)
 							)
-						)
-					);
+						);
+					}
 				}
 
 				const is_store_sub =

From fe0bd299a5101c7dc24546cd92dac04857f3b53d Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 3 Dec 2024 17:24:47 -0500
Subject: [PATCH 157/159] fix: proxify values when assigning using `||=`, `&&=`
 and `??=` operators (#14273)

* add failing test for #14268

* simplify

* proxify values when using ||=, &&= and ??= assignment operators

* proxify values assigned to private state fields

* changeset

* fix

* fix

* add warning

* update test
---
 .changeset/shaggy-spies-happen.md             |   5 +
 .../.generated/client-warnings.md             |  32 ++++++
 .../messages/client-warnings/warnings.md      |  30 +++++
 .../client/visitors/AssignmentExpression.js   | 104 ++++++++++++++++--
 .../svelte/src/internal/client/dev/assign.js  |  57 ++++++++++
 packages/svelte/src/internal/client/index.js  |   1 +
 .../svelte/src/internal/client/warnings.js    |  14 +++
 .../_config.js                                |  24 ++++
 .../main.svelte                               |   7 ++
 .../_config.js                                |  16 +++
 .../main.svelte                               |   7 ++
 11 files changed, 287 insertions(+), 10 deletions(-)
 create mode 100644 .changeset/shaggy-spies-happen.md
 create mode 100644 packages/svelte/src/internal/client/dev/assign.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/proxy-nullish-coalescing-assignment-warning/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/proxy-nullish-coalescing-assignment-warning/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/proxy-nullish-coalescing-assignment/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/proxy-nullish-coalescing-assignment/main.svelte

diff --git a/.changeset/shaggy-spies-happen.md b/.changeset/shaggy-spies-happen.md
new file mode 100644
index 0000000000..bb80ffd8f8
--- /dev/null
+++ b/.changeset/shaggy-spies-happen.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: proxify values when assigning using `||=`, `&&=` and `??=` operators
diff --git a/documentation/docs/98-reference/.generated/client-warnings.md b/documentation/docs/98-reference/.generated/client-warnings.md
index 6e97211341..60eb3e126c 100644
--- a/documentation/docs/98-reference/.generated/client-warnings.md
+++ b/documentation/docs/98-reference/.generated/client-warnings.md
@@ -1,5 +1,37 @@
 <!-- This file is generated by scripts/process-messages/index.js. Do not edit! -->
 
+### assignment_value_stale
+
+```
+Assignment to `%property%` property (%location%) will evaluate to the right-hand side, not the value of `%property%` following the assignment. This may result in unexpected behaviour.
+```
+
+Given a case like this...
+
+```svelte
+<script>
+	let object = $state({ array: null });
+
+	function add() {
+		(object.array ??= []).push(object.array.length);
+	}
+</script>
+
+<button onclick={add}>add</button>
+<p>items: {JSON.stringify(object.items)}</p>
+```
+
+...the array being pushed to when the button is first clicked is the `[]` on the right-hand side of the assignment, but the resulting value of `object.array` is an empty state proxy. As a result, the pushed value will be discarded.
+
+You can fix this by separating it into two statements:
+
+```js
+function add() {
+	object.array ??= [];
+	object.array.push(object.array.length);
+}
+```
+
 ### binding_property_non_reactive
 
 ```
diff --git a/packages/svelte/messages/client-warnings/warnings.md b/packages/svelte/messages/client-warnings/warnings.md
index d82cdc47a1..482a3d7faa 100644
--- a/packages/svelte/messages/client-warnings/warnings.md
+++ b/packages/svelte/messages/client-warnings/warnings.md
@@ -1,3 +1,33 @@
+## assignment_value_stale
+
+> Assignment to `%property%` property (%location%) will evaluate to the right-hand side, not the value of `%property%` following the assignment. This may result in unexpected behaviour.
+
+Given a case like this...
+
+```svelte
+<script>
+	let object = $state({ array: null });
+
+	function add() {
+		(object.array ??= []).push(object.array.length);
+	}
+</script>
+
+<button onclick={add}>add</button>
+<p>items: {JSON.stringify(object.items)}</p>
+```
+
+...the array being pushed to when the button is first clicked is the `[]` on the right-hand side of the assignment, but the resulting value of `object.array` is an empty state proxy. As a result, the pushed value will be discarded.
+
+You can fix this by separating it into two statements:
+
+```js
+function add() {
+	object.array ??= [];
+	object.array.push(object.array.length);
+}
+```
+
 ## binding_property_non_reactive
 
 > `%binding%` is binding to a non-reactive property
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/AssignmentExpression.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/AssignmentExpression.js
index ee909ede91..66ea2c4941 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/AssignmentExpression.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/AssignmentExpression.js
@@ -1,8 +1,14 @@
-/** @import { AssignmentExpression, AssignmentOperator, Expression, Pattern } from 'estree' */
+/** @import { Location } from 'locate-character' */
+/** @import { AssignmentExpression, AssignmentOperator, Expression, Identifier, Literal, MemberExpression, Pattern } from 'estree' */
+/** @import { AST } from '#compiler' */
 /** @import { Context } from '../types.js' */
 import * as b from '../../../../utils/builders.js';
-import { build_assignment_value } from '../../../../utils/ast.js';
-import { is_ignored } from '../../../../state.js';
+import {
+	build_assignment_value,
+	get_attribute_expression,
+	is_event_attribute
+} from '../../../../utils/ast.js';
+import { dev, filename, is_ignored, locator } from '../../../../state.js';
 import { build_proxy_reassignment, should_proxy } from '../utils.js';
 import { visit_assignment_expression } from '../../shared/assignments.js';
 
@@ -20,6 +26,24 @@ export function AssignmentExpression(node, context) {
 		: expression;
 }
 
+/**
+ * Determines whether the value will be coerced on assignment (as with e.g. `+=`).
+ * If not, we may need to proxify the value, or warn that the value will not be
+ * proxified in time
+ * @param {AssignmentOperator} operator
+ */
+function is_non_coercive_operator(operator) {
+	return ['=', '||=', '&&=', '??='].includes(operator);
+}
+
+/** @type {Record<string, string>} */
+const callees = {
+	'=': '$.assign',
+	'&&=': '$.assign_and',
+	'||=': '$.assign_or',
+	'??=': '$.assign_nullish'
+};
+
 /**
  * @param {AssignmentOperator} operator
  * @param {Pattern} left
@@ -41,7 +65,11 @@ function build_assignment(operator, left, right, context) {
 				context.visit(build_assignment_value(operator, left, right))
 			);
 
-			if (private_state.kind !== 'raw_state' && should_proxy(value, context.state.scope)) {
+			if (
+				private_state.kind === 'state' &&
+				is_non_coercive_operator(operator) &&
+				should_proxy(value, context.state.scope)
+			) {
 				value = build_proxy_reassignment(value, b.member(b.this, private_state.id));
 			}
 
@@ -73,24 +101,28 @@ function build_assignment(operator, left, right, context) {
 		? context.state.transform[object.name]
 		: null;
 
+	const path = context.path.map((node) => node.type);
+
 	// reassignment
 	if (object === left && transform?.assign) {
+		// special case — if an element binding, we know it's a primitive
+
+		const is_primitive = path.at(-1) === 'BindDirective' && path.at(-2) === 'RegularElement';
+
 		let value = /** @type {Expression} */ (
 			context.visit(build_assignment_value(operator, left, right))
 		);
 
-		// special case — if an element binding, we know it's a primitive
-		const path = context.path.map((node) => node.type);
-		const is_primitive = path.at(-1) === 'BindDirective' && path.at(-2) === 'RegularElement';
-
 		if (
 			!is_primitive &&
 			binding.kind !== 'prop' &&
 			binding.kind !== 'bindable_prop' &&
+			binding.kind !== 'raw_state' &&
 			context.state.analysis.runes &&
-			should_proxy(value, context.state.scope)
+			should_proxy(right, context.state.scope) &&
+			is_non_coercive_operator(operator)
 		) {
-			value = binding.kind === 'raw_state' ? value : build_proxy_reassignment(value, object);
+			value = build_proxy_reassignment(value, object);
 		}
 
 		return transform.assign(object, value);
@@ -108,5 +140,57 @@ function build_assignment(operator, left, right, context) {
 		);
 	}
 
+	// in cases like `(object.items ??= []).push(value)`, we may need to warn
+	// if the value gets proxified, since the proxy _isn't_ the thing that
+	// will be pushed to. we do this by transforming it to something like
+	// `$.assign_nullish(object, 'items', [])`
+	let should_transform =
+		dev && path.at(-1) !== 'ExpressionStatement' && is_non_coercive_operator(operator);
+
+	// special case — ignore `onclick={() => (...)}`
+	if (
+		path.at(-1) === 'ArrowFunctionExpression' &&
+		(path.at(-2) === 'RegularElement' || path.at(-2) === 'SvelteElement')
+	) {
+		const element = /** @type {AST.RegularElement} */ (context.path.at(-2));
+
+		const attribute = element.attributes.find((attribute) => {
+			if (attribute.type !== 'Attribute' || !is_event_attribute(attribute)) {
+				return false;
+			}
+
+			const expression = get_attribute_expression(attribute);
+
+			return expression === context.path.at(-1);
+		});
+
+		if (attribute) {
+			should_transform = false;
+		}
+	}
+
+	if (left.type === 'MemberExpression' && should_transform) {
+		const callee = callees[operator];
+
+		const loc = /** @type {Location} */ (locator(/** @type {number} */ (left.start)));
+		const location = `${filename}:${loc.line}:${loc.column}`;
+
+		return /** @type {Expression} */ (
+			context.visit(
+				b.call(
+					callee,
+					/** @type {Expression} */ (left.object),
+					/** @type {Expression} */ (
+						left.computed
+							? left.property
+							: b.literal(/** @type {Identifier} */ (left.property).name)
+					),
+					right,
+					b.literal(location)
+				)
+			)
+		);
+	}
+
 	return null;
 }
diff --git a/packages/svelte/src/internal/client/dev/assign.js b/packages/svelte/src/internal/client/dev/assign.js
new file mode 100644
index 0000000000..cf8c31a941
--- /dev/null
+++ b/packages/svelte/src/internal/client/dev/assign.js
@@ -0,0 +1,57 @@
+import * as w from '../warnings.js';
+import { sanitize_location } from './location.js';
+
+/**
+ *
+ * @param {any} a
+ * @param {any} b
+ * @param {string} property
+ * @param {string} location
+ */
+function compare(a, b, property, location) {
+	if (a !== b) {
+		w.assignment_value_stale(property, /** @type {string} */ (sanitize_location(location)));
+	}
+
+	return a;
+}
+
+/**
+ * @param {any} object
+ * @param {string} property
+ * @param {any} value
+ * @param {string} location
+ */
+export function assign(object, property, value, location) {
+	return compare((object[property] = value), object[property], property, location);
+}
+
+/**
+ * @param {any} object
+ * @param {string} property
+ * @param {any} value
+ * @param {string} location
+ */
+export function assign_and(object, property, value, location) {
+	return compare((object[property] &&= value), object[property], property, location);
+}
+
+/**
+ * @param {any} object
+ * @param {string} property
+ * @param {any} value
+ * @param {string} location
+ */
+export function assign_or(object, property, value, location) {
+	return compare((object[property] ||= value), object[property], property, location);
+}
+
+/**
+ * @param {any} object
+ * @param {string} property
+ * @param {any} value
+ * @param {string} location
+ */
+export function assign_nullish(object, property, value, location) {
+	return compare((object[property] ??= value), object[property], property, location);
+}
diff --git a/packages/svelte/src/internal/client/index.js b/packages/svelte/src/internal/client/index.js
index e8cbefb090..6fae2893e6 100644
--- a/packages/svelte/src/internal/client/index.js
+++ b/packages/svelte/src/internal/client/index.js
@@ -1,4 +1,5 @@
 export { FILENAME, HMR, NAMESPACE_SVG } from '../../constants.js';
+export { assign, assign_and, assign_or, assign_nullish } from './dev/assign.js';
 export { cleanup_styles } from './dev/css.js';
 export { add_locations } from './dev/elements.js';
 export { hmr } from './dev/hmr.js';
diff --git a/packages/svelte/src/internal/client/warnings.js b/packages/svelte/src/internal/client/warnings.js
index 5e38db52f0..2f28d3e9e3 100644
--- a/packages/svelte/src/internal/client/warnings.js
+++ b/packages/svelte/src/internal/client/warnings.js
@@ -5,6 +5,20 @@ import { DEV } from 'esm-env';
 var bold = 'font-weight: bold';
 var normal = 'font-weight: normal';
 
+/**
+ * Assignment to `%property%` property (%location%) will evaluate to the right-hand side, not the value of `%property%` following the assignment. This may result in unexpected behaviour.
+ * @param {string} property
+ * @param {string} location
+ */
+export function assignment_value_stale(property, location) {
+	if (DEV) {
+		console.warn(`%c[svelte] assignment_value_stale\n%cAssignment to \`${property}\` property (${location}) will evaluate to the right-hand side, not the value of \`${property}\` following the assignment. This may result in unexpected behaviour.`, bold, normal);
+	} else {
+		// TODO print a link to the documentation
+		console.warn("assignment_value_stale");
+	}
+}
+
 /**
  * `%binding%` (%location%) is binding to a non-reactive property
  * @param {string} binding
diff --git a/packages/svelte/tests/runtime-runes/samples/proxy-nullish-coalescing-assignment-warning/_config.js b/packages/svelte/tests/runtime-runes/samples/proxy-nullish-coalescing-assignment-warning/_config.js
new file mode 100644
index 0000000000..a6d79c05ed
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/proxy-nullish-coalescing-assignment-warning/_config.js
@@ -0,0 +1,24 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+
+	html: `<button>items: null</button>`,
+
+	test({ assert, target, warnings }) {
+		const btn = target.querySelector('button');
+
+		flushSync(() => btn?.click());
+		assert.htmlEqual(target.innerHTML, `<button>items: []</button>`);
+
+		flushSync(() => btn?.click());
+		assert.htmlEqual(target.innerHTML, `<button>items: [0]</button>`);
+
+		assert.deepEqual(warnings, [
+			'Assignment to `items` property (main.svelte:5:24) will evaluate to the right-hand side, not the value of `items` following the assignment. This may result in unexpected behaviour.'
+		]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/proxy-nullish-coalescing-assignment-warning/main.svelte b/packages/svelte/tests/runtime-runes/samples/proxy-nullish-coalescing-assignment-warning/main.svelte
new file mode 100644
index 0000000000..f151336046
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/proxy-nullish-coalescing-assignment-warning/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	let object = $state({ items: null });
+</script>
+
+<button onclick={() => (object.items ??= []).push(object.items.length)}>
+	items: {JSON.stringify(object.items)}
+</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/proxy-nullish-coalescing-assignment/_config.js b/packages/svelte/tests/runtime-runes/samples/proxy-nullish-coalescing-assignment/_config.js
new file mode 100644
index 0000000000..99d957e980
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/proxy-nullish-coalescing-assignment/_config.js
@@ -0,0 +1,16 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `<button>items: null</button>`,
+
+	test({ assert, target }) {
+		const [btn1, btn2] = target.querySelectorAll('button');
+
+		flushSync(() => btn1.click());
+		assert.htmlEqual(target.innerHTML, `<button>items: [0]</button>`);
+
+		flushSync(() => btn1.click());
+		assert.htmlEqual(target.innerHTML, `<button>items: [0,1]</button>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/proxy-nullish-coalescing-assignment/main.svelte b/packages/svelte/tests/runtime-runes/samples/proxy-nullish-coalescing-assignment/main.svelte
new file mode 100644
index 0000000000..84c1c32c5c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/proxy-nullish-coalescing-assignment/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	let items = $state(null);
+</script>
+
+<button onclick={() => (items ??= []).push(items.length)}>
+	items: {JSON.stringify(items)}
+</button>

From 3d9122fcc430b65fcf6b32722d77928d62bc6a0e Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 3 Dec 2024 17:51:23 -0500
Subject: [PATCH 158/159] Version Packages (#14537)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/giant-windows-dance.md |  5 -----
 .changeset/hip-forks-exercise.md  |  5 -----
 .changeset/shaggy-spies-happen.md |  5 -----
 packages/svelte/CHANGELOG.md      | 10 ++++++++++
 packages/svelte/package.json      |  2 +-
 packages/svelte/src/version.js    |  2 +-
 6 files changed, 12 insertions(+), 17 deletions(-)
 delete mode 100644 .changeset/giant-windows-dance.md
 delete mode 100644 .changeset/hip-forks-exercise.md
 delete mode 100644 .changeset/shaggy-spies-happen.md

diff --git a/.changeset/giant-windows-dance.md b/.changeset/giant-windows-dance.md
deleted file mode 100644
index 7ada8c4836..0000000000
--- a/.changeset/giant-windows-dance.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: don't try to add owners to non-`$state` class fields
diff --git a/.changeset/hip-forks-exercise.md b/.changeset/hip-forks-exercise.md
deleted file mode 100644
index 41df40bd6a..0000000000
--- a/.changeset/hip-forks-exercise.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: capture infinite_loop_guard in error boundary
diff --git a/.changeset/shaggy-spies-happen.md b/.changeset/shaggy-spies-happen.md
deleted file mode 100644
index bb80ffd8f8..0000000000
--- a/.changeset/shaggy-spies-happen.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: proxify values when assigning using `||=`, `&&=` and `??=` operators
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 8bf0885277..4024b6ec77 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,15 @@
 # svelte
 
+## 5.5.3
+
+### Patch Changes
+
+- fix: don't try to add owners to non-`$state` class fields ([#14533](https://github.com/sveltejs/svelte/pull/14533))
+
+- fix: capture infinite_loop_guard in error boundary ([#14534](https://github.com/sveltejs/svelte/pull/14534))
+
+- fix: proxify values when assigning using `||=`, `&&=` and `??=` operators ([#14273](https://github.com/sveltejs/svelte/pull/14273))
+
 ## 5.5.2
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 0728adf5fc..3c925c30f6 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.5.2",
+  "version": "5.5.3",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 0394adda82..a9ec7f8cf2 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.5.2';
+export const VERSION = '5.5.3';
 export const PUBLIC_VERSION = '5';

From 4c4f18b24c644f7e17cd9fea7fde777f3324e206 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 3 Dec 2024 18:31:53 -0500
Subject: [PATCH 159/159] chore: fix docs (#14538)

---
 .../docs/98-reference/.generated/client-warnings.md       | 8 ++++++++
 packages/svelte/messages/client-warnings/warnings.md      | 8 ++++++++
 2 files changed, 16 insertions(+)

diff --git a/documentation/docs/98-reference/.generated/client-warnings.md b/documentation/docs/98-reference/.generated/client-warnings.md
index 60eb3e126c..ef19a28994 100644
--- a/documentation/docs/98-reference/.generated/client-warnings.md
+++ b/documentation/docs/98-reference/.generated/client-warnings.md
@@ -26,6 +26,8 @@ Given a case like this...
 You can fix this by separating it into two statements:
 
 ```js
+let object = { array: [0] };
+// ---cut---
 function add() {
 	object.array ??= [];
 	object.array.push(object.array.length);
@@ -131,16 +133,22 @@ In runes mode, effects and deriveds re-run when there are changes to the values
 Often, the result is the same — for example these can be considered equivalent:
 
 ```js
+let a = 1, b = 2, sum = 3;
+// ---cut---
 $: sum = a + b;
 ```
 
 ```js
+let a = 1, b = 2;
+// ---cut---
 const sum = $derived(a + b);
 ```
 
 In some cases — such as the one that triggered the above warning — they are _not_ the same:
 
 ```js
+let a = 1, b = 2, sum = 3;
+// ---cut---
 const add = () => a + b;
 
 // the compiler can't 'see' that `sum` depends on `a` and `b`, but
diff --git a/packages/svelte/messages/client-warnings/warnings.md b/packages/svelte/messages/client-warnings/warnings.md
index 482a3d7faa..019e83e7b1 100644
--- a/packages/svelte/messages/client-warnings/warnings.md
+++ b/packages/svelte/messages/client-warnings/warnings.md
@@ -22,6 +22,8 @@ Given a case like this...
 You can fix this by separating it into two statements:
 
 ```js
+let object = { array: [0] };
+// ---cut---
 function add() {
 	object.array ??= [];
 	object.array.push(object.array.length);
@@ -95,16 +97,22 @@ In runes mode, effects and deriveds re-run when there are changes to the values
 Often, the result is the same — for example these can be considered equivalent:
 
 ```js
+let a = 1, b = 2, sum = 3;
+// ---cut---
 $: sum = a + b;
 ```
 
 ```js
+let a = 1, b = 2;
+// ---cut---
 const sum = $derived(a + b);
 ```
 
 In some cases — such as the one that triggered the above warning — they are _not_ the same:
 
 ```js
+let a = 1, b = 2, sum = 3;
+// ---cut---
 const add = () => a + b;
 
 // the compiler can't 'see' that `sum` depends on `a` and `b`, but