From a752ef4709587851b783137997c7457fadd2ddb6 Mon Sep 17 00:00:00 2001
From: Alex <aleksandrosansan@gmail.com>
Date: Tue, 4 Oct 2022 00:34:10 +0300
Subject: [PATCH 01/45] GitHub Workflows security hardening (#7883)

---
 .github/workflows/ci.yml   | 2 ++
 .github/workflows/docs.yml | 4 +++-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index bbfde04f67..4f5e161f89 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -1,5 +1,7 @@
 name: CI
 on: [push, pull_request]
+permissions:
+  contents: read # to fetch code (actions/checkout)
 jobs:
   Tests:
     runs-on: ${{ matrix.os }}
diff --git a/.github/workflows/docs.yml b/.github/workflows/docs.yml
index ea6e0f5a60..763fb72577 100644
--- a/.github/workflows/docs.yml
+++ b/.github/workflows/docs.yml
@@ -7,6 +7,8 @@ on:
     paths:
       - site/content/**
 
+permissions: {}
+
 jobs:
   release:
     name: Deploy docs
@@ -25,4 +27,4 @@ jobs:
           repo: 'svelte'
           branch: 'master'
           docs_path: 'site/content'
-          token: ${{ steps.github-app.outputs.token }}
\ No newline at end of file
+          token: ${{ steps.github-app.outputs.token }}

From 7d20194d8ae9b600936e47826de53eb4f75e58e1 Mon Sep 17 00:00:00 2001
From: Ben McCann <322311+benmccann@users.noreply.github.com>
Date: Tue, 4 Oct 2022 21:38:58 -0700
Subject: [PATCH 02/45] [docs] create getting started guide outside blog
 (#7812)

---
 CONTRIBUTING.md                               |  2 +-
 site/content/docs/01-getting-started.md       | 21 +++++++++++++++++++
 ...onent-format.md => 02-component-format.md} |  0
 ...mplate-syntax.md => 03-template-syntax.md} |  0
 .../docs/{03-run-time.md => 04-run-time.md}   |  0
 ...{04-compile-time.md => 05-compile-time.md} |  0
 ...rnings.md => 06-accessibility-warnings.md} |  0
 .../01-introduction/01-basics/text.md         |  2 +-
 .../19-next-steps/01-congratulations/text.md  |  2 +-
 9 files changed, 24 insertions(+), 3 deletions(-)
 create mode 100644 site/content/docs/01-getting-started.md
 rename site/content/docs/{01-component-format.md => 02-component-format.md} (100%)
 rename site/content/docs/{02-template-syntax.md => 03-template-syntax.md} (100%)
 rename site/content/docs/{03-run-time.md => 04-run-time.md} (100%)
 rename site/content/docs/{04-compile-time.md => 05-compile-time.md} (100%)
 rename site/content/docs/{05-accessibility-warnings.md => 06-accessibility-warnings.md} (100%)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index c7989caeea..816faf31aa 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -11,7 +11,7 @@ The [Open Source Guides](https://opensource.guide/) website has a collection of
 
 There are many ways to contribute to Svelte, and many of them do not involve writing any code. Here's a few ideas to get started:
 
-- Simply start using Svelte. Go through the [Getting Started](https://svelte.dev/blog/the-easiest-way-to-get-started) guide. Does everything work as expected? If not, we're always looking for improvements. Let us know by [opening an issue](#reporting-new-issues).
+- Simply start using Svelte. Go through the [Getting Started](https://svelte.dev/docs#getting-started) guide. Does everything work as expected? If not, we're always looking for improvements. Let us know by [opening an issue](#reporting-new-issues).
 - Look through the [open issues](https://github.com/sveltejs/svelte/issues). A good starting point would be issues tagged [good first issue](https://github.com/sveltejs/svelte/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22). Provide workarounds, ask for clarification, or suggest labels. Help [triage issues](#triaging-issues-and-pull-requests).
 - If you find an issue you would like to fix, [open a pull request](#your-first-pull-request).
 - Read through our [tutorials](https://svelte.dev/tutorial/basics). If you find anything that is confusing or can be improved, you can make edits by clicking "Edit this chapter" at the bottom left of the tutorial page.
diff --git a/site/content/docs/01-getting-started.md b/site/content/docs/01-getting-started.md
new file mode 100644
index 0000000000..b8119390f4
--- /dev/null
+++ b/site/content/docs/01-getting-started.md
@@ -0,0 +1,21 @@
+---
+title: Getting started
+---
+
+---
+
+To try Svelte in an interactive online environment you can try [the REPL](https://svelte.dev/repl) or [StackBlitz](https://node.new/svelte).
+
+To create a project locally, run:
+```
+npm create vite@latest myapp -- --template svelte
+cd myapp
+npm install
+npm run dev
+```
+
+Or use [SvelteKit](https://kit.svelte.dev/), the official application framework from the Svelte team (currently in beta).
+
+See the SvelteSociety website run by the Svelte community for a list of integrations with various [tooling and editots](https://sveltesociety.dev/tools).
+
+If you're having trouble, get help on [Discord](https://svelte.dev/blog/chat) or [StackOverflow](https://stackoverflow.com/questions/tagged/svelte).
diff --git a/site/content/docs/01-component-format.md b/site/content/docs/02-component-format.md
similarity index 100%
rename from site/content/docs/01-component-format.md
rename to site/content/docs/02-component-format.md
diff --git a/site/content/docs/02-template-syntax.md b/site/content/docs/03-template-syntax.md
similarity index 100%
rename from site/content/docs/02-template-syntax.md
rename to site/content/docs/03-template-syntax.md
diff --git a/site/content/docs/03-run-time.md b/site/content/docs/04-run-time.md
similarity index 100%
rename from site/content/docs/03-run-time.md
rename to site/content/docs/04-run-time.md
diff --git a/site/content/docs/04-compile-time.md b/site/content/docs/05-compile-time.md
similarity index 100%
rename from site/content/docs/04-compile-time.md
rename to site/content/docs/05-compile-time.md
diff --git a/site/content/docs/05-accessibility-warnings.md b/site/content/docs/06-accessibility-warnings.md
similarity index 100%
rename from site/content/docs/05-accessibility-warnings.md
rename to site/content/docs/06-accessibility-warnings.md
diff --git a/site/content/tutorial/01-introduction/01-basics/text.md b/site/content/tutorial/01-introduction/01-basics/text.md
index 08ba922b42..c0a2b9eba0 100644
--- a/site/content/tutorial/01-introduction/01-basics/text.md
+++ b/site/content/tutorial/01-introduction/01-basics/text.md
@@ -4,7 +4,7 @@ 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](/blog/the-easiest-way-to-get-started).
+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#getting-started).
 
 
 ## What is Svelte?
diff --git a/site/content/tutorial/19-next-steps/01-congratulations/text.md b/site/content/tutorial/19-next-steps/01-congratulations/text.md
index 5b8256463e..1b4b13d4ab 100644
--- a/site/content/tutorial/19-next-steps/01-congratulations/text.md
+++ b/site/content/tutorial/19-next-steps/01-congratulations/text.md
@@ -4,7 +4,7 @@ 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](/blog/the-easiest-way-to-get-started).
+To get set up in your local development environment, check out [the quickstart guide](/docs#getting-started).
 
 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).
 

From be70a898f392149aa5910bc000a0a55b85ba7f9a Mon Sep 17 00:00:00 2001
From: Shawn <62589492+laazyCmd@users.noreply.github.com>
Date: Wed, 5 Oct 2022 14:44:08 +0000
Subject: [PATCH 03/45] [docs] fix link redirect to discord (#7911)

* fix link redirect to discord

* fix link redirect to discord
---
 .../content/blog/2017-08-07-the-easiest-way-to-get-started.md | 2 +-
 .../2017-12-31-sapper-towards-the-ideal-web-app-framework.md  | 2 +-
 site/content/blog/2018-04-18-version-2.md                     | 4 ++--
 site/content/blog/2019-01-31-svelte-on-the-changelog.md       | 2 +-
 site/content/docs/01-getting-started.md                       | 2 +-
 5 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/site/content/blog/2017-08-07-the-easiest-way-to-get-started.md b/site/content/blog/2017-08-07-the-easiest-way-to-get-started.md
index fe4a14eaeb..29e59270d0 100644
--- a/site/content/blog/2017-08-07-the-easiest-way-to-get-started.md
+++ b/site/content/blog/2017-08-07-the-easiest-way-to-get-started.md
@@ -63,4 +63,4 @@ 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](chat), or via [@sveltejs](https://twitter.com/sveltejs) on Twitter!
+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/site/content/blog/2017-12-31-sapper-towards-the-ideal-web-app-framework.md b/site/content/blog/2017-12-31-sapper-towards-the-ideal-web-app-framework.md
index 42ed7012b9..1001caa5f4 100644
--- a/site/content/blog/2017-12-31-sapper-towards-the-ideal-web-app-framework.md
+++ b/site/content/blog/2017-12-31-sapper-towards-the-ideal-web-app-framework.md
@@ -81,4 +81,4 @@ I believe the next frontier of web performance is 'whole-app optimisation'. Curr
 
 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](chat).
+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/site/content/blog/2018-04-18-version-2.md b/site/content/blog/2018-04-18-version-2.md
index cbfe98b282..48d4cb2c34 100644
--- a/site/content/blog/2018-04-18-version-2.md
+++ b/site/content/blog/2018-04-18-version-2.md
@@ -12,7 +12,7 @@ Almost a year after we first started talking about version 2 on the Svelte issue
 
 ## tl;dr
 
-Each of these items is described in more depth below. If you get stuck, ask for help in our friendly [Discord chatroom](chat).
+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)
@@ -201,4 +201,4 @@ Before, there was a `svelte.validate` method which checked your component was va
 
 ## 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](chat) or raise an issue on the [tracker](https://github.com/sveltejs/svelte/issues).
+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/site/content/blog/2019-01-31-svelte-on-the-changelog.md b/site/content/blog/2019-01-31-svelte-on-the-changelog.md
index 0b8e1894e4..c9f9c2897c 100644
--- a/site/content/blog/2019-01-31-svelte-on-the-changelog.md
+++ b/site/content/blog/2019-01-31-svelte-on-the-changelog.md
@@ -14,7 +14,7 @@ Earlier this month, I had the privilege of appearing on [The Changelog](https://
 
 ...and, most importantly, Svelte 3.
 
-Unless you hang out in our [Discord server](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.
+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).
 
diff --git a/site/content/docs/01-getting-started.md b/site/content/docs/01-getting-started.md
index b8119390f4..8ae5b1fb9c 100644
--- a/site/content/docs/01-getting-started.md
+++ b/site/content/docs/01-getting-started.md
@@ -18,4 +18,4 @@ Or use [SvelteKit](https://kit.svelte.dev/), the official application framework
 
 See the SvelteSociety website run by the Svelte community for a list of integrations with various [tooling and editots](https://sveltesociety.dev/tools).
 
-If you're having trouble, get help on [Discord](https://svelte.dev/blog/chat) or [StackOverflow](https://stackoverflow.com/questions/tagged/svelte).
+If you're having trouble, get help on [Discord](https://svelte.dev/chat) or [StackOverflow](https://stackoverflow.com/questions/tagged/svelte).

From 01a91163a9ffd6d18ea4699cef4c531b72fbfc00 Mon Sep 17 00:00:00 2001
From: Yuichiro Yamashita <xydybaseball@gmail.com>
Date: Thu, 6 Oct 2022 00:28:00 +0900
Subject: [PATCH 04/45] [fix] Improve error message if `this` attribute of
 `<svelte:component>` is not valid (#7551)

* add test

* improve error message if this attribute of <svelte:component> is not SvelteComponent

* add more tests

* improve validation

* simplify test

Co-authored-by: Tan Li Hau <tanhauhau@users.noreply.github.com>
---
 .../wrappers/InlineComponent/index.ts         |  4 ++--
 src/runtime/internal/dev.ts                   | 18 ++++++++++++++++++
 src/runtime/internal/dom.ts                   |  4 ++++
 src/runtime/internal/ssr.ts                   |  2 +-
 .../component-not-constructor-dev/_config.js  |  8 ++++++++
 .../component-not-constructor-dev/main.svelte |  5 +++++
 .../component-not-constructor/Sub.svelte      |  1 +
 .../component-not-constructor/_config.js      |  8 ++++++++
 .../component-not-constructor/main.svelte     |  9 +++++++++
 .../component-not-constructor2-dev/Sub.svelte |  1 +
 .../component-not-constructor2-dev/_config.js | 19 +++++++++++++++++++
 .../main.svelte                               | 14 ++++++++++++++
 .../component-not-constructor2/Sub.svelte     |  1 +
 .../component-not-constructor2/_config.js     | 16 ++++++++++++++++
 .../component-not-constructor2/main.svelte    | 14 ++++++++++++++
 15 files changed, 121 insertions(+), 3 deletions(-)
 create mode 100644 test/runtime/samples/component-not-constructor-dev/_config.js
 create mode 100644 test/runtime/samples/component-not-constructor-dev/main.svelte
 create mode 100644 test/runtime/samples/component-not-constructor/Sub.svelte
 create mode 100644 test/runtime/samples/component-not-constructor/_config.js
 create mode 100644 test/runtime/samples/component-not-constructor/main.svelte
 create mode 100644 test/runtime/samples/component-not-constructor2-dev/Sub.svelte
 create mode 100644 test/runtime/samples/component-not-constructor2-dev/_config.js
 create mode 100644 test/runtime/samples/component-not-constructor2-dev/main.svelte
 create mode 100644 test/runtime/samples/component-not-constructor2/Sub.svelte
 create mode 100644 test/runtime/samples/component-not-constructor2/_config.js
 create mode 100644 test/runtime/samples/component-not-constructor2/main.svelte

diff --git a/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts b/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts
index f44170cda1..5b2883850a 100644
--- a/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts
+++ b/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts
@@ -425,7 +425,7 @@ export default class InlineComponentWrapper extends Wrapper {
 				}
 
 				if (${switch_value}) {
-					${name} = new ${switch_value}(${switch_props}(#ctx));
+					${name} = @construct_svelte_component(${switch_value}, ${switch_props}(#ctx));
 
 					${munged_bindings}
 					${munged_handlers}
@@ -473,7 +473,7 @@ export default class InlineComponentWrapper extends Wrapper {
 
 					if (${switch_value}) {
 						${update_insert}
-						${name} = new ${switch_value}(${switch_props}(#ctx));
+						${name} = @construct_svelte_component(${switch_value}, ${switch_props}(#ctx));
 
 						${munged_bindings}
 						${munged_handlers}
diff --git a/src/runtime/internal/dev.ts b/src/runtime/internal/dev.ts
index 32d14571d9..9d24ad2a07 100644
--- a/src/runtime/internal/dev.ts
+++ b/src/runtime/internal/dev.ts
@@ -123,6 +123,24 @@ export function validate_void_dynamic_element(tag: undefined | string) {
 	}
 }
 
+export function construct_svelte_component_dev(component, props) {
+	const error_message = 'this={...} of <svelte:component> should specify a Svelte component.';
+	try {
+		const instance = new component(props);
+		if (!instance.$$ || !instance.$set || !instance.$on || !instance.$destroy) {
+			throw new Error(error_message);
+		}
+		return instance;
+	} catch (err) {
+		const { message } = err;
+		if (typeof message === 'string' && message.indexOf('is not a constructor') !== -1) {
+			throw new Error(error_message);
+		} else {
+			throw err;
+		}
+	}
+}
+
 type Props = Record<string, any>;
 export interface SvelteComponentDev {
 	$set(props?: Props): void;
diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts
index d359513eb4..a1c0e1c0aa 100644
--- a/src/runtime/internal/dom.ts
+++ b/src/runtime/internal/dom.ts
@@ -768,3 +768,7 @@ export function get_custom_elements_slots(element: HTMLElement) {
 	});
 	return result;
 }
+
+export function construct_svelte_component(component, props) {
+	return new component(props);
+}
diff --git a/src/runtime/internal/ssr.ts b/src/runtime/internal/ssr.ts
index dc4c16dffb..571a25f1ac 100644
--- a/src/runtime/internal/ssr.ts
+++ b/src/runtime/internal/ssr.ts
@@ -124,7 +124,7 @@ export const missing_component = {
 export function validate_component(component, name) {
 	if (!component || !component.$$render) {
 		if (name === 'svelte:component') name += ' this={...}';
-		throw new Error(`<${name}> is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules`);
+		throw new Error(`<${name}> is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules. Otherwise you may need to fix a <${name}>.`);
 	}
 
 	return component;
diff --git a/test/runtime/samples/component-not-constructor-dev/_config.js b/test/runtime/samples/component-not-constructor-dev/_config.js
new file mode 100644
index 0000000000..15ea469a0f
--- /dev/null
+++ b/test/runtime/samples/component-not-constructor-dev/_config.js
@@ -0,0 +1,8 @@
+export default {
+	skip_if_ssr: true,
+	skip_if_hydrate_from_ssr: true,
+	compileOptions: {
+		dev: true
+	},
+	error: 'this={...} of <svelte:component> should specify a Svelte component.'
+};
diff --git a/test/runtime/samples/component-not-constructor-dev/main.svelte b/test/runtime/samples/component-not-constructor-dev/main.svelte
new file mode 100644
index 0000000000..80f9f969e6
--- /dev/null
+++ b/test/runtime/samples/component-not-constructor-dev/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	let banana = {};
+</script>
+
+<svelte:component this={banana} />
diff --git a/test/runtime/samples/component-not-constructor/Sub.svelte b/test/runtime/samples/component-not-constructor/Sub.svelte
new file mode 100644
index 0000000000..dd6d0bb1a9
--- /dev/null
+++ b/test/runtime/samples/component-not-constructor/Sub.svelte
@@ -0,0 +1 @@
+<div>Sub</div>
\ No newline at end of file
diff --git a/test/runtime/samples/component-not-constructor/_config.js b/test/runtime/samples/component-not-constructor/_config.js
new file mode 100644
index 0000000000..8c0dcced41
--- /dev/null
+++ b/test/runtime/samples/component-not-constructor/_config.js
@@ -0,0 +1,8 @@
+export default {
+	skip_if_ssr: true,
+	skip_if_hydrate_from_ssr: true,
+	props: {
+		selected: false
+	},
+	error: 'component is not a constructor'
+};
diff --git a/test/runtime/samples/component-not-constructor/main.svelte b/test/runtime/samples/component-not-constructor/main.svelte
new file mode 100644
index 0000000000..dec7e2af79
--- /dev/null
+++ b/test/runtime/samples/component-not-constructor/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	import Sub from './Sub.svelte';
+	export let selected;
+	let banana = {};
+	let component = banana;
+	$: selected ? component = Sub : component = banana;
+</script>
+
+<svelte:component this={component} />
diff --git a/test/runtime/samples/component-not-constructor2-dev/Sub.svelte b/test/runtime/samples/component-not-constructor2-dev/Sub.svelte
new file mode 100644
index 0000000000..dd6d0bb1a9
--- /dev/null
+++ b/test/runtime/samples/component-not-constructor2-dev/Sub.svelte
@@ -0,0 +1 @@
+<div>Sub</div>
\ No newline at end of file
diff --git a/test/runtime/samples/component-not-constructor2-dev/_config.js b/test/runtime/samples/component-not-constructor2-dev/_config.js
new file mode 100644
index 0000000000..98e3cc942b
--- /dev/null
+++ b/test/runtime/samples/component-not-constructor2-dev/_config.js
@@ -0,0 +1,19 @@
+export default {
+	compileOptions: {
+		dev: true
+	},
+	props: {
+		componentName: 'Sub'
+	},
+	html: '<div>Sub</div>',
+	test({ assert, component, target }) {
+		component.componentName = 'Proxy';
+		assert.htmlEqual(target.innerHTML, '<div>Sub</div>');
+		try {
+			component.componentName = 'banana';
+			throw new Error('Expected an error');
+		} catch (err) {
+			assert.equal(err.message, 'this={...} of <svelte:component> should specify a Svelte component.');
+		}
+	}
+};
diff --git a/test/runtime/samples/component-not-constructor2-dev/main.svelte b/test/runtime/samples/component-not-constructor2-dev/main.svelte
new file mode 100644
index 0000000000..331fdfc385
--- /dev/null
+++ b/test/runtime/samples/component-not-constructor2-dev/main.svelte
@@ -0,0 +1,14 @@
+<script>
+	import Sub from './Sub.svelte';
+	export let componentName = 'Sub';
+	let proxy = new Proxy(Sub, {});
+	let banana = {};
+	let component;
+	$: {
+		if (componentName === 'Sub') component = Sub;
+		else if (componentName === 'Proxy') component = proxy;
+		else component = banana;
+	};
+</script>
+
+<svelte:component this={component} />
diff --git a/test/runtime/samples/component-not-constructor2/Sub.svelte b/test/runtime/samples/component-not-constructor2/Sub.svelte
new file mode 100644
index 0000000000..dd6d0bb1a9
--- /dev/null
+++ b/test/runtime/samples/component-not-constructor2/Sub.svelte
@@ -0,0 +1 @@
+<div>Sub</div>
\ No newline at end of file
diff --git a/test/runtime/samples/component-not-constructor2/_config.js b/test/runtime/samples/component-not-constructor2/_config.js
new file mode 100644
index 0000000000..8fae65afdd
--- /dev/null
+++ b/test/runtime/samples/component-not-constructor2/_config.js
@@ -0,0 +1,16 @@
+export default {
+	props: {
+		componentName: 'Sub'
+	},
+	html: '<div>Sub</div>',
+	test({ assert, component, target }) {
+		component.componentName = 'Proxy';
+		assert.htmlEqual(target.innerHTML, '<div>Sub</div>');
+		try {
+			component.componentName = 'banana';
+			throw new Error('Expected an error');
+		} catch (err) {
+			assert.equal(err.message, 'component is not a constructor');
+		}
+	}
+};
diff --git a/test/runtime/samples/component-not-constructor2/main.svelte b/test/runtime/samples/component-not-constructor2/main.svelte
new file mode 100644
index 0000000000..331fdfc385
--- /dev/null
+++ b/test/runtime/samples/component-not-constructor2/main.svelte
@@ -0,0 +1,14 @@
+<script>
+	import Sub from './Sub.svelte';
+	export let componentName = 'Sub';
+	let proxy = new Proxy(Sub, {});
+	let banana = {};
+	let component;
+	$: {
+		if (componentName === 'Sub') component = Sub;
+		else if (componentName === 'Proxy') component = proxy;
+		else component = banana;
+	};
+</script>
+
+<svelte:component this={component} />

From ea2f83adebd0a656fae72200525f6e4a1259701f Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Wed, 5 Oct 2022 23:29:43 +0800
Subject: [PATCH 05/45] Update CHANGELOG.md

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0d0ee54c0d..afa432f613 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -16,6 +16,7 @@
 * Supports custom element in `<svelte:element>` ([#7766](https://github.com/sveltejs/svelte/pull/7766))
 * Improve performance of custom element data setting in `<svelte:element>` ([#7869](https://github.com/sveltejs/svelte/pull/7869))
 * Supports nullish values for component event handlers ([#7568](https://github.com/sveltejs/svelte/issues/7568))
+* Better error message when specifying an invalid value for `<svelte:component this={...}>` ([#7550](https://github.com/sveltejs/svelte/issues/7550))
 
 ## 3.50.1
 

From 5c5bc27d9782039259ce8ffca3eb1673f22396c5 Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Thu, 6 Oct 2022 00:18:37 +0800
Subject: [PATCH 06/45] [feat] Support style props for SVG components (#7859)

---
 site/content/docs/03-template-syntax.md       | 16 ++++++
 src/compiler/compile/nodes/InlineComponent.ts | 12 ++++
 .../wrappers/InlineComponent/index.ts         | 29 ++++++----
 .../render_ssr/handlers/InlineComponent.ts    | 18 ++++--
 src/compiler/utils/namespaces.ts              |  2 +-
 .../Svg.svelte                                | 17 ++++++
 .../_config.js                                | 55 +++++++++++++++++++
 .../main.svelte                               | 25 +++++++++
 8 files changed, 159 insertions(+), 15 deletions(-)
 create mode 100644 test/runtime-puppeteer/samples/component-css-custom-properties-dynamic-svg/Svg.svelte
 create mode 100644 test/runtime-puppeteer/samples/component-css-custom-properties-dynamic-svg/_config.js
 create mode 100644 test/runtime-puppeteer/samples/component-css-custom-properties-dynamic-svg/main.svelte

diff --git a/site/content/docs/03-template-syntax.md b/site/content/docs/03-template-syntax.md
index 1094e25184..24b6111fae 100644
--- a/site/content/docs/03-template-syntax.md
+++ b/site/content/docs/03-template-syntax.md
@@ -1374,6 +1374,22 @@ Desugars to this:
 
 ---
 
+For SVG namespace, the example above desugars into using `<g>` instead:
+
+```sv
+<g style="--rail-color: black; --track-color: rgb(0, 0, 255)">
+  <Slider
+    bind:value
+    min={0}
+    max={100}
+  />
+</g>
+```
+
+**Note**: Since this is an extra `<g>`, beware that your CSS structure might accidentally target this. Be mindful of this added wrapper element when using this feature.
+
+---
+
 Svelte's CSS Variables support allows for easily themable components:
 
 ```sv
diff --git a/src/compiler/compile/nodes/InlineComponent.ts b/src/compiler/compile/nodes/InlineComponent.ts
index 13fb13c278..8871c5f306 100644
--- a/src/compiler/compile/nodes/InlineComponent.ts
+++ b/src/compiler/compile/nodes/InlineComponent.ts
@@ -22,6 +22,7 @@ export default class InlineComponent extends Node {
 	css_custom_properties: Attribute[] = [];
 	children: INode[];
 	scope: TemplateScope;
+	namespace: string;
 
 	constructor(component: Component, parent: Node, scope: TemplateScope, info: TemplateNode) {
 		super(component, parent, scope, info);
@@ -33,6 +34,7 @@ export default class InlineComponent extends Node {
 		}
 
 		this.name = info.name;
+		this.namespace = get_namespace(parent, component.namespace);
 
 		this.expression = this.name === 'svelte:component'
 			? new Expression(component, this, scope, info.expression)
@@ -165,3 +167,13 @@ export default class InlineComponent extends Node {
 function not_whitespace_text(node) {
 	return !(node.type === 'Text' && /^\s+$/.test(node.data));
 }
+
+function get_namespace(parent: Node, explicit_namespace: string) {
+	const parent_element = parent.find_nearest(/^Element/);
+
+	if (!parent_element) {
+		return explicit_namespace;
+	}
+
+	return parent_element.namespace;
+}
diff --git a/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts b/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts
index 5b2883850a..37aaf2e7b2 100644
--- a/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts
+++ b/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts
@@ -20,6 +20,7 @@ import { string_to_member_expression } from '../../../utils/string_to_member_exp
 import SlotTemplate from '../../../nodes/SlotTemplate';
 import { is_head } from '../shared/is_head';
 import compiler_warnings from '../../../compiler_warnings';
+import { namespaces } from '../../../../utils/namespaces';
 
 type SlotDefinition = { block: Block; scope: TemplateScope; get_context?: Node; get_changes?: Node };
 
@@ -150,7 +151,9 @@ export default class InlineComponentWrapper extends Wrapper {
 		}
 
 		const has_css_custom_properties = this.node.css_custom_properties.length > 0;
-		const css_custom_properties_wrapper = has_css_custom_properties ? block.get_unique_name('div') : null;
+		const is_svg_namespace = this.node.namespace === namespaces.svg;
+		const css_custom_properties_wrapper_element = is_svg_namespace ? 'g' : 'div';
+		const css_custom_properties_wrapper = has_css_custom_properties ? block.get_unique_name(css_custom_properties_wrapper_element) : null;
 		if (has_css_custom_properties) {
 			block.add_variable(css_custom_properties_wrapper);
 		}
@@ -411,7 +414,7 @@ export default class InlineComponentWrapper extends Wrapper {
 			const snippet = this.node.expression.manipulate(block);
 
 			if (has_css_custom_properties) {
-				this.set_css_custom_properties(block, css_custom_properties_wrapper);
+				this.set_css_custom_properties(block, css_custom_properties_wrapper, css_custom_properties_wrapper_element, is_svg_namespace);
 			}
 
 			block.chunks.init.push(b`
@@ -440,7 +443,7 @@ export default class InlineComponentWrapper extends Wrapper {
 			block.chunks.mount.push(b`if (${name}) @mount_component(${name}, ${mount_target}, ${mount_anchor});`);
 
 			if (to_claim) {
-				if (css_custom_properties_wrapper) claim_nodes = this.create_css_custom_properties_wrapper_claim_chunk(block, claim_nodes, css_custom_properties_wrapper);
+				if (css_custom_properties_wrapper) claim_nodes = this.create_css_custom_properties_wrapper_claim_chunk(block, claim_nodes, css_custom_properties_wrapper, css_custom_properties_wrapper_element, is_svg_namespace);
 				block.chunks.claim.push(b`if (${name}) @claim_component(${name}.$$.fragment, ${claim_nodes});`);
 			}
 
@@ -514,7 +517,7 @@ export default class InlineComponentWrapper extends Wrapper {
 			`);
 
 			if (has_css_custom_properties) {
-				this.set_css_custom_properties(block, css_custom_properties_wrapper);
+				this.set_css_custom_properties(block, css_custom_properties_wrapper, css_custom_properties_wrapper_element, is_svg_namespace);
 			}
 			block.chunks.create.push(b`@create_component(${name}.$$.fragment);`);
 
@@ -522,7 +525,7 @@ export default class InlineComponentWrapper extends Wrapper {
 			block.chunks.mount.push(b`@mount_component(${name}, ${mount_target}, ${mount_anchor});`);
 
 			if (to_claim) {
-				if (css_custom_properties_wrapper) claim_nodes = this.create_css_custom_properties_wrapper_claim_chunk(block, claim_nodes, css_custom_properties_wrapper);
+				if (css_custom_properties_wrapper) claim_nodes = this.create_css_custom_properties_wrapper_claim_chunk(block, claim_nodes, css_custom_properties_wrapper, css_custom_properties_wrapper_element, is_svg_namespace);
 				block.chunks.claim.push(b`@claim_component(${name}.$$.fragment, ${claim_nodes});`);
 			}
 
@@ -568,11 +571,14 @@ export default class InlineComponentWrapper extends Wrapper {
 	private create_css_custom_properties_wrapper_claim_chunk(
 		block: Block,
 		parent_nodes: Identifier,
-		css_custom_properties_wrapper: Identifier | null
+		css_custom_properties_wrapper: Identifier | null,
+		css_custom_properties_wrapper_element: string,
+		is_svg_namespace: boolean
 	) {
 		const nodes = block.get_unique_name(`${css_custom_properties_wrapper.name}_nodes`);
+		const claim_element = is_svg_namespace ? x`@claim_svg_element` : x`@claim_element`;
 		block.chunks.claim.push(b`
-			${css_custom_properties_wrapper} = @claim_element(${parent_nodes}, "DIV", { style: true })
+			${css_custom_properties_wrapper} = ${claim_element}(${parent_nodes}, "${css_custom_properties_wrapper_element.toUpperCase()}", { style: true })
 			var ${nodes} = @children(${css_custom_properties_wrapper});
 		`);
 		return nodes;
@@ -580,10 +586,13 @@ export default class InlineComponentWrapper extends Wrapper {
 
 	private set_css_custom_properties(
 		block: Block,
-		css_custom_properties_wrapper: Identifier
+		css_custom_properties_wrapper: Identifier,
+		css_custom_properties_wrapper_element: string,
+		is_svg_namespace: boolean
 	) {
-		block.chunks.create.push(b`${css_custom_properties_wrapper} = @element("div");`);
-		block.chunks.hydrate.push(b`@set_style(${css_custom_properties_wrapper}, "display", "contents");`);
+		const element = is_svg_namespace ? x`@svg_element` : x`@element`;
+		block.chunks.create.push(b`${css_custom_properties_wrapper} = ${element}("${css_custom_properties_wrapper_element}");`);
+		if (!is_svg_namespace) block.chunks.hydrate.push(b`@set_style(${css_custom_properties_wrapper}, "display", "contents");`);
 		this.node.css_custom_properties.forEach((attr) => {
 			const dependencies = attr.get_dependencies();
 			const should_cache = attr.should_cache();
diff --git a/src/compiler/compile/render_ssr/handlers/InlineComponent.ts b/src/compiler/compile/render_ssr/handlers/InlineComponent.ts
index 626365e3e2..8287b46268 100644
--- a/src/compiler/compile/render_ssr/handlers/InlineComponent.ts
+++ b/src/compiler/compile/render_ssr/handlers/InlineComponent.ts
@@ -3,6 +3,7 @@ import { get_attribute_value } from './shared/get_attribute_value';
 import Renderer, { RenderOptions } from '../Renderer';
 import InlineComponent from '../../nodes/InlineComponent';
 import { p, x } from 'code-red';
+import { namespaces } from '../../../utils/namespaces';
 
 function get_prop_value(attribute) {
 	if (attribute.is_true) return x`true`;
@@ -88,11 +89,16 @@ export default function(node: InlineComponent, renderer: Renderer, options: Rend
 	}`;
 
 	if (node.css_custom_properties.length > 0) {
-		renderer.add_string('<div style="display: contents;');
-		node.css_custom_properties.forEach(attr => {
-			renderer.add_string(` ${attr.name}:`);
+		if (node.namespace === namespaces.svg) {
+			renderer.add_string('<g style="');
+		} else {
+			renderer.add_string('<div style="display: contents; ');
+		}
+		node.css_custom_properties.forEach((attr, index) => {
+			renderer.add_string(`${attr.name}:`);
 			renderer.add_expression(get_attribute_value(attr));
 			renderer.add_string(';');
+			if (index < node.css_custom_properties.length - 1) renderer.add_string(' ');
 		});
 		renderer.add_string('">');
 	}
@@ -100,6 +106,10 @@ export default function(node: InlineComponent, renderer: Renderer, options: Rend
 	renderer.add_expression(x`@validate_component(${expression}, "${node.name}").$$render($$result, ${props}, ${bindings}, ${slots})`);
 
 	if (node.css_custom_properties.length > 0) {
-		renderer.add_string('</div>');
+		if (node.namespace === namespaces.svg) {
+			renderer.add_string('</g>');
+		} else {
+			renderer.add_string('</div>');
+		}
 	}
 }
diff --git a/src/compiler/utils/namespaces.ts b/src/compiler/utils/namespaces.ts
index 7da64afc8c..d51b303fe1 100644
--- a/src/compiler/utils/namespaces.ts
+++ b/src/compiler/utils/namespaces.ts
@@ -25,4 +25,4 @@ export const valid_namespaces = [
 	xmlns
 ];
 
-export const namespaces: Record<string, string> = { foreign, html, mathml, svg, xlink, xml, xmlns };
+export const namespaces = { foreign, html, mathml, svg, xlink, xml, xmlns } as const;
diff --git a/test/runtime-puppeteer/samples/component-css-custom-properties-dynamic-svg/Svg.svelte b/test/runtime-puppeteer/samples/component-css-custom-properties-dynamic-svg/Svg.svelte
new file mode 100644
index 0000000000..26e93bff29
--- /dev/null
+++ b/test/runtime-puppeteer/samples/component-css-custom-properties-dynamic-svg/Svg.svelte
@@ -0,0 +1,17 @@
+<script>
+  export let id;
+</script>
+
+<g {id}>
+  <circle cx="50" cy="50" r="10" />
+  <rect width="100" height="100" />
+</g>
+
+<style>
+  circle {
+    fill: var(--circle-color);
+  }
+  rect {
+    fill: var(--rect-color)
+  }
+</style>
\ No newline at end of file
diff --git a/test/runtime-puppeteer/samples/component-css-custom-properties-dynamic-svg/_config.js b/test/runtime-puppeteer/samples/component-css-custom-properties-dynamic-svg/_config.js
new file mode 100644
index 0000000000..ea8b5584db
--- /dev/null
+++ b/test/runtime-puppeteer/samples/component-css-custom-properties-dynamic-svg/_config.js
@@ -0,0 +1,55 @@
+export default {
+	props: {
+		rectColor1: 'green',
+		circleColor1: 'red',
+		rectColor2: 'black',
+		circleColor2: 'blue'
+	},
+	html: `
+		<svg xmlns="http://www.w3.org/2000/svg">
+			<g style="--rect-color:green; --circle-color:red;">
+				<g id="svg-1">
+					<circle cx="50" cy="50" r="10" class="svelte-1qzlp1k"></circle>
+					<rect width="100" height="100" class="svelte-1qzlp1k"></rect>
+				</g>
+			</g>
+			<g style="--rect-color:black; --circle-color:blue;">
+				<g id="svg-2">
+					<circle cx="50" cy="50" r="10" class="svelte-1qzlp1k"></circle>
+					<rect width="100" height="100" class="svelte-1qzlp1k"></rect>
+				</g>
+			</g>
+		</svg>
+	`,
+	test({ component, assert, target }) {
+		component.rectColor1 = 'yellow';
+		component.circleColor2 = 'cyan';
+
+		assert.htmlEqual(target.innerHTML, `
+			<svg xmlns="http://www.w3.org/2000/svg">
+				<g style="--rect-color:yellow; --circle-color:red;">
+					<g id="svg-1">
+						<circle cx="50" cy="50" r="10" class="svelte-1qzlp1k"></circle>
+						<rect width="100" height="100" class="svelte-1qzlp1k"></rect>
+					</g>
+				</g>
+				<g style="--rect-color:black; --circle-color:cyan;">
+					<g id="svg-2">
+						<circle cx="50" cy="50" r="10" class="svelte-1qzlp1k"></circle>
+						<rect width="100" height="100" class="svelte-1qzlp1k"></rect>
+					</g>
+				</g>
+			</svg>
+		`);
+
+		const circleColor1 = target.querySelector('#svg-1 circle');
+		const rectColor1 = target.querySelector('#svg-1 rect');
+		const circleColor2 = target.querySelector('#svg-2 circle');
+		const rectColor2 = target.querySelector('#svg-2 rect');
+
+		assert.htmlEqual(window.getComputedStyle(circleColor1).fill, 'rgb(255, 0, 0)');
+		assert.htmlEqual(window.getComputedStyle(rectColor1).fill, 'rgb(255, 255, 0)');
+		assert.htmlEqual(window.getComputedStyle(circleColor2).fill, 'rgb(0, 255, 255)');
+		assert.htmlEqual(window.getComputedStyle(rectColor2).fill, 'rgb(0, 0, 0)');
+	}
+};
diff --git a/test/runtime-puppeteer/samples/component-css-custom-properties-dynamic-svg/main.svelte b/test/runtime-puppeteer/samples/component-css-custom-properties-dynamic-svg/main.svelte
new file mode 100644
index 0000000000..b30be2dbac
--- /dev/null
+++ b/test/runtime-puppeteer/samples/component-css-custom-properties-dynamic-svg/main.svelte
@@ -0,0 +1,25 @@
+<script>
+	import Svg from './Svg.svelte';
+	export let rectColor1;
+	export let rectColor2;
+	export let circleColor1;
+	export let circleColor2;
+
+	function identity(color) {
+		return color;
+	}
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg">
+	<Svg
+		id="svg-1"
+		--rect-color={rectColor1}
+		--circle-color={circleColor1}
+	/>
+
+	<Svg
+		id="svg-2"
+		--rect-color={rectColor2}
+		--circle-color={identity(circleColor2)}
+	/>
+</svg>
\ No newline at end of file

From 57541e6abc3837c07019a468d32ef74552bf2677 Mon Sep 17 00:00:00 2001
From: Yuichiro Yamashita <xydybaseball@gmail.com>
Date: Thu, 6 Oct 2022 01:21:31 +0900
Subject: [PATCH 07/45] Update CHANGELOG.md

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index afa432f613..e26890d97b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@
 * Supports SVG elements with `<svelte:element>`([#7613](https://github.com/sveltejs/svelte/issues/7613))
 * Warn user when binding on a `{...rest}` object in `{#each}` block ([#6860](https://github.com/sveltejs/svelte/issues/6860))
 * Supports `--style-props` for `<svelte:component>` ([#7461](https://github.com/sveltejs/svelte/issues/7461))
+* Supports `--style-props` for SVG components ([#7808](https://github.com/sveltejs/svelte/issues/7808))
 * Add a11y warnings:
 	* `a11y-no-noninteractive-tabindex`: check for tabindex on non-interactive elements ([#6693](https://github.com/sveltejs/svelte/pull/6693))
 	* `a11y-click-events-have-key-events`: check if click event is accompanied by key events ([#5073](https://github.com/sveltejs/svelte/pull/5073))

From 81d4dbad99f2c349ced55c65f7ac2db704a771f6 Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Thu, 6 Oct 2022 09:21:36 +0800
Subject: [PATCH 08/45] [fix] call `on_destroy` if unmounted called immediately
 before `on_mount` (#7860)

* call on_destroy if unmounted called immediately before on_mount

* feat: review changes
---
 src/runtime/internal/Component.ts             | 49 +++----------------
 src/runtime/internal/await_block.ts           | 29 ++++++++++-
 src/runtime/internal/transitions.ts           |  2 +-
 src/runtime/internal/types.ts                 | 39 +++++++++++++++
 .../Component.svelte                          | 13 +++++
 .../_config.js                                |  9 ++++
 .../main.svelte                               | 36 ++++++++++++++
 7 files changed, 133 insertions(+), 44 deletions(-)
 create mode 100644 src/runtime/internal/types.ts
 create mode 100644 test/runtime/samples/await-mount-and-unmount-immediately/Component.svelte
 create mode 100644 test/runtime/samples/await-mount-and-unmount-immediately/_config.js
 create mode 100644 test/runtime/samples/await-mount-and-unmount-immediately/main.svelte

diff --git a/src/runtime/internal/Component.ts b/src/runtime/internal/Component.ts
index 624339e7fa..5aec24c651 100644
--- a/src/runtime/internal/Component.ts
+++ b/src/runtime/internal/Component.ts
@@ -3,43 +3,7 @@ import { current_component, set_current_component } from './lifecycle';
 import { blank_object, is_empty, is_function, run, run_all, noop } from './utils';
 import { children, detach, start_hydrating, end_hydrating } from './dom';
 import { transition_in } from './transitions';
-
-/**
- * INTERNAL, DO NOT USE. Code may change at any time.
- */
-export interface Fragment {
-	key: string | null;
-	first: null;
-	/* create  */ c: () => void;
-	/* claim   */ l: (nodes: any) => void;
-	/* hydrate */ h: () => void;
-	/* mount   */ m: (target: HTMLElement, anchor: any) => void;
-	/* update  */ p: (ctx: T$$['ctx'], dirty: T$$['dirty']) => void;
-	/* measure */ r: () => void;
-	/* fix     */ f: () => void;
-	/* animate */ a: () => void;
-	/* intro   */ i: (local: any) => void;
-	/* outro   */ o: (local: any) => void;
-	/* destroy */ d: (detaching: 0 | 1) => void;
-}
-interface T$$ {
-	dirty: number[];
-	ctx: any[];
-	bound: any;
-	update: () => void;
-	callbacks: any;
-	after_update: any[];
-	props: Record<string, 0 | string>;
-	fragment: null | false | Fragment;
-	not_equal: any;
-	before_update: any[];
-	context: Map<any, any>;
-	on_mount: any[];
-	on_destroy: any[];
-	skip_bound: boolean;
-	on_disconnect: any[];
-	root:Element | ShadowRoot
-}
+import { T$$ } from './types';
 
 export function bind(component, name, callback) {
 	const index = component.$$.props[name];
@@ -58,7 +22,7 @@ export function claim_component(block, parent_nodes) {
 }
 
 export function mount_component(component, target, anchor, customElement) {
-	const { fragment, on_mount, on_destroy, after_update } = component.$$;
+	const { fragment, after_update } = component.$$;
 
 	fragment && fragment.m(target, anchor);
 
@@ -66,9 +30,12 @@ export function mount_component(component, target, anchor, customElement) {
 		// onMount happens before the initial afterUpdate
 		add_render_callback(() => {
 
-			const new_on_destroy = on_mount.map(run).filter(is_function);
-			if (on_destroy) {
-				on_destroy.push(...new_on_destroy);
+			const new_on_destroy = component.$$.on_mount.map(run).filter(is_function);
+			// if the component was destroyed immediately
+			// it will update the `$$.on_destroy` reference to `null`.
+			// the destructured on_destroy may still reference to the old array
+			if (component.$$.on_destroy) {
+				component.$$.on_destroy.push(...new_on_destroy);
 			} else {
 				// Edge case - component was destroyed immediately,
 				// most likely as a result of a binding initialising
diff --git a/src/runtime/internal/await_block.ts b/src/runtime/internal/await_block.ts
index ea6e8a187f..1e09ada6cf 100644
--- a/src/runtime/internal/await_block.ts
+++ b/src/runtime/internal/await_block.ts
@@ -2,11 +2,36 @@ import { is_promise } from './utils';
 import { check_outros, group_outros, transition_in, transition_out } from './transitions';
 import { flush } from './scheduler';
 import { get_current_component, set_current_component } from './lifecycle';
+import { Fragment, FragmentFactory } from './types';
+
+interface PromiseInfo<T> {
+	ctx: null | any;
+	// unique object instance as a key to compare different promises
+	token: {},
+	hasCatch: boolean,
+	pending: FragmentFactory,
+	then: FragmentFactory,
+	catch: FragmentFactory,
+	// ctx index for resolved value and rejected error
+	value: number,
+	error: number,
+	// resolved value or rejected error
+	resolved?: T,
+	// the current factory function for creating the fragment
+	current: FragmentFactory | null,
+	// the current fragment
+	block: Fragment | null,
+	// tuple of the pending, then, catch fragment
+	blocks: [null | Fragment, null | Fragment, null | Fragment];
+	// DOM elements to mount and anchor on for the {#await} block
+	mount: () => HTMLElement;
+	anchor: HTMLElement;
+}
 
-export function handle_promise(promise, info) {
+export function handle_promise<T>(promise: Promise<T>, info: PromiseInfo<T>) {
 	const token = info.token = {};
 
-	function update(type, index, key?, value?) {
+	function update(type: FragmentFactory, index: 0 | 1 | 2, key?: number, value?) {
 		if (info.token !== token) return;
 
 		info.resolved = value;
diff --git a/src/runtime/internal/transitions.ts b/src/runtime/internal/transitions.ts
index 306a5e3793..9aa45dc4f1 100644
--- a/src/runtime/internal/transitions.ts
+++ b/src/runtime/internal/transitions.ts
@@ -5,7 +5,7 @@ import { create_rule, delete_rule } from './style_manager';
 import { custom_event } from './dom';
 import { add_render_callback } from './scheduler';
 import { TransitionConfig } from '../transition';
-import { Fragment } from './Component';
+import { Fragment } from './types';
 
 let promise: Promise<void> | null;
 type INTRO = 1;
diff --git a/src/runtime/internal/types.ts b/src/runtime/internal/types.ts
new file mode 100644
index 0000000000..41f8f1ca43
--- /dev/null
+++ b/src/runtime/internal/types.ts
@@ -0,0 +1,39 @@
+/**
+ * INTERNAL, DO NOT USE. Code may change at any time.
+ */
+export interface Fragment {
+  key: string | null;
+  first: null;
+	/* create  */ c: () => void;
+	/* claim   */ l: (nodes: any) => void;
+	/* hydrate */ h: () => void;
+	/* mount   */ m: (target: HTMLElement, anchor: any) => void;
+	/* update  */ p: (ctx: T$$['ctx'], dirty: T$$['dirty']) => void;
+	/* measure */ r: () => void;
+	/* fix     */ f: () => void;
+	/* animate */ a: () => void;
+	/* intro   */ i: (local: any) => void;
+	/* outro   */ o: (local: any) => void;
+	/* destroy */ d: (detaching: 0 | 1) => void;
+}
+
+export type FragmentFactory = (ctx: any) => Fragment;
+
+export interface T$$ {
+	dirty: number[];
+	ctx: any[];
+	bound: any;
+	update: () => void;
+	callbacks: any;
+	after_update: any[];
+	props: Record<string, 0 | string>;
+	fragment: null | false | Fragment;
+	not_equal: any;
+	before_update: any[];
+	context: Map<any, any>;
+	on_mount: any[];
+	on_destroy: any[];
+	skip_bound: boolean;
+	on_disconnect: any[];
+	root:Element | ShadowRoot
+}
diff --git a/test/runtime/samples/await-mount-and-unmount-immediately/Component.svelte b/test/runtime/samples/await-mount-and-unmount-immediately/Component.svelte
new file mode 100644
index 0000000000..be0c7e36b0
--- /dev/null
+++ b/test/runtime/samples/await-mount-and-unmount-immediately/Component.svelte
@@ -0,0 +1,13 @@
+<script>
+	import { onMount } from 'svelte';
+  export let logs;
+  export let state;
+	onMount(() => {
+    logs.push(`mount ${state}`);
+		return () => {
+      logs.push(`unmount ${state}`);
+		};
+	});
+</script>
+
+{state}
diff --git a/test/runtime/samples/await-mount-and-unmount-immediately/_config.js b/test/runtime/samples/await-mount-and-unmount-immediately/_config.js
new file mode 100644
index 0000000000..b944091319
--- /dev/null
+++ b/test/runtime/samples/await-mount-and-unmount-immediately/_config.js
@@ -0,0 +1,9 @@
+export default {
+	html: 'Loading...',
+	async test({ assert, component, target }) {
+		await component.test();
+
+		assert.htmlEqual(target.innerHTML, '1');
+		assert.deepEqual(component.logs, ['mount 0', 'unmount 0', 'mount 1']);
+	}
+};
diff --git a/test/runtime/samples/await-mount-and-unmount-immediately/main.svelte b/test/runtime/samples/await-mount-and-unmount-immediately/main.svelte
new file mode 100644
index 0000000000..245304be83
--- /dev/null
+++ b/test/runtime/samples/await-mount-and-unmount-immediately/main.svelte
@@ -0,0 +1,36 @@
+<script>
+	import { tick } from 'svelte';
+	import Component from './Component.svelte';
+
+	let promise;
+	let resolve;
+	let value = 0;
+	export let logs = [];
+	
+	async function new_promise() {
+		promise = new Promise(r => {
+			resolve = r;
+		});
+	}
+
+	async function resolve_promise() {
+		await Promise.resolve();
+		resolve(value++);
+	}
+
+	export async function test() {
+		resolve_promise();
+		await Promise.resolve();
+		new_promise();
+		resolve_promise();
+		return tick();
+	}
+
+	new_promise();
+</script>
+
+{#await promise}
+	Loading...
+{:then state}
+	<Component {state} {logs} />
+{/await}
\ No newline at end of file

From bfb7536c1a6718babc21c869070ff94de484c946 Mon Sep 17 00:00:00 2001
From: Yuichiro Yamashita <xydybaseball@gmail.com>
Date: Thu, 6 Oct 2022 10:28:41 +0900
Subject: [PATCH 09/45] Update CHANGELOG.md

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e26890d97b..b5ba64d0bb 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -18,6 +18,7 @@
 * Improve performance of custom element data setting in `<svelte:element>` ([#7869](https://github.com/sveltejs/svelte/pull/7869))
 * Supports nullish values for component event handlers ([#7568](https://github.com/sveltejs/svelte/issues/7568))
 * Better error message when specifying an invalid value for `<svelte:component this={...}>` ([#7550](https://github.com/sveltejs/svelte/issues/7550))
+* Fix to call component unmount if a component is mounted and then immediately unmounted ([#7817](https://github.com/sveltejs/svelte/issues/7817))
 
 ## 3.50.1
 

From ce569f97ebd633d44c747cef8039725325c7d753 Mon Sep 17 00:00:00 2001
From: Marcos Mercuri <marcos@rillet.io>
Date: Thu, 6 Oct 2022 11:23:29 +0200
Subject: [PATCH 10/45] [docs] Add clarification on how reactivity works
 (#7819)

* Add clarification on how reactivity works

Based on the fact that there are multiple issues were opened related to a perceived bug on the reactive variables, I thought it would be good to add a clarification on the docs. Part of the text is taken from [this comment](https://github.com/sveltejs/svelte/issues/7818#issuecomment-1230374639) that I found super useful.

* Reword based on PR comments
---
 site/content/docs/02-component-format.md | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/site/content/docs/02-component-format.md b/site/content/docs/02-component-format.md
index 23508b5c7b..5212b001ac 100644
--- a/site/content/docs/02-component-format.md
+++ b/site/content/docs/02-component-format.md
@@ -192,6 +192,25 @@ Total: {total}
 </button>
 ```
 
+---
+It is important to note that the reactive blocks are ordered via simple static analysis at compile time, and all the compiler looks at are the variables that are assigned to and used within the block itself, not in any functions called by them. This means that `yDependent` will not be updated when `x` is updated in the following example:
+
+```sv
+<script>
+	let x = 0;
+	let y = 0;
+	
+	const setY = (value) => {
+		y = value;
+	}
+	
+	$: yDependent = y;
+	$: setY(x);
+</script>
+```
+
+Moving the line `$: yDependent = y` bellow `$: setY(x)` will cause `yDependent` to be updated when `x` is updated.
+
 ---
 
 If a statement consists entirely of an assignment to an undeclared variable, Svelte will inject a `let` declaration on your behalf.

From 158ec43d99376ccb70c374e306552151b1dbf63b Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Thu, 6 Oct 2022 22:29:48 +0800
Subject: [PATCH 11/45] [fix] do not warn about missing props for bindings
 (#6583)

---
 src/compiler/compile/render_dom/index.ts      | 21 +++++-----
 .../samples/capture-inject-state/expected.js  | 22 +++++------
 test/js/samples/debug-empty/expected.js       | 14 +++----
 .../debug-foo-bar-baz-things/expected.js      | 38 +++++++++----------
 test/js/samples/debug-foo/expected.js         | 22 +++++------
 .../expected.js                               | 14 +++----
 .../Foo.svelte                                |  8 ++++
 .../_config.js                                |  9 +++++
 .../main.svelte                               |  8 ++++
 9 files changed, 89 insertions(+), 67 deletions(-)
 create mode 100644 test/runtime/samples/dev-warning-missing-data-component-bind/Foo.svelte
 create mode 100644 test/runtime/samples/dev-warning-missing-data-component-bind/_config.js
 create mode 100644 test/runtime/samples/dev-warning-missing-data-component-bind/main.svelte

diff --git a/src/compiler/compile/render_dom/index.ts b/src/compiler/compile/render_dom/index.ts
index 5fdac9bce4..173d93d5dd 100644
--- a/src/compiler/compile/render_dom/index.ts
+++ b/src/compiler/compile/render_dom/index.ts
@@ -121,7 +121,7 @@ export default function dom(
 	const accessors = [];
 
 	const not_equal = component.component_options.immutable ? x`@not_equal` : x`@safe_not_equal`;
-	let dev_props_check: Node[] | Node;
+	let missing_props_check: Node[] | Node;
 	let inject_state: Expression;
 	let capture_state: Expression;
 	let props_inject: Node[] | Node;
@@ -227,13 +227,13 @@ export default function dom(
 		const expected = props.filter(prop => prop.writable && !prop.initialised);
 
 		if (expected.length) {
-			dev_props_check = b`
-				const { ctx: #ctx } = this.$$;
-				const props = ${options.customElement ? x`this.attributes` : x`options.props || {}`};
-				${expected.map(prop => b`
-				if (${renderer.reference(prop.name)} === undefined && !('${prop.export_name}' in props)) {
-					@_console.warn("<${component.tag}> was created without expected prop '${prop.export_name}'");
-				}`)}
+			missing_props_check = b`
+				$$self.$$.on_mount.push(function () {
+					${expected.map(prop => b`
+					if (${prop.name} === undefined && !(('${prop.export_name}' in $$props) || $$self.$$.bound[$$self.$$.props['${prop.export_name}']])) {
+						@_console.warn("<${component.tag}> was created without expected prop '${prop.export_name}'");
+					}`)}
+				});
 			`;
 		}
 
@@ -476,6 +476,7 @@ export default function dom(
 
 				${instance_javascript}
 
+				${missing_props_check}
 				${unknown_props_check}
 
 				${renderer.binding_groups.size > 0 && b`const $$binding_groups = [${[...renderer.binding_groups.keys()].map(_ => x`[]`)}];`}
@@ -533,8 +534,6 @@ export default function dom(
 
 					@init(this, { target: this.shadowRoot, props: ${init_props}, customElement: true }, ${definition}, ${has_create_fragment ? 'create_fragment' : 'null'}, ${not_equal}, ${prop_indexes}, null, ${dirty});
 
-					${dev_props_check}
-
 					if (options) {
 						if (options.target) {
 							@insert(options.target, this, options.anchor);
@@ -594,8 +593,6 @@ export default function dom(
 					super(${options.dev && 'options'});
 					@init(this, options, ${definition}, ${has_create_fragment ? 'create_fragment' : 'null'}, ${not_equal}, ${prop_indexes}, ${optional_parameters});
 					${options.dev && b`@dispatch_dev("SvelteRegisterComponent", { component: this, tagName: "${name.name}", options, id: create_fragment.name });`}
-
-					${dev_props_check}
 				}
 			}
 		`[0] as ClassDeclaration;
diff --git a/test/js/samples/capture-inject-state/expected.js b/test/js/samples/capture-inject-state/expected.js
index 58e1879553..882b3e9cf6 100644
--- a/test/js/samples/capture-inject-state/expected.js
+++ b/test/js/samples/capture-inject-state/expected.js
@@ -113,6 +113,17 @@ function instance($$self, $$props, $$invalidate) {
 	let { alias: realName } = $$props;
 	let local;
 	let shadowedByModule;
+
+	$$self.$$.on_mount.push(function () {
+		if (prop === undefined && !('prop' in $$props || $$self.$$.bound[$$self.$$.props['prop']])) {
+			console.warn("<Component> was created without expected prop 'prop'");
+		}
+
+		if (realName === undefined && !('alias' in $$props || $$self.$$.bound[$$self.$$.props['alias']])) {
+			console.warn("<Component> was created without expected prop 'alias'");
+		}
+	});
+
 	const writable_props = ['prop', 'alias'];
 
 	Object.keys($$props).forEach(key => {
@@ -166,17 +177,6 @@ class Component extends SvelteComponentDev {
 			options,
 			id: create_fragment.name
 		});
-
-		const { ctx } = this.$$;
-		const props = options.props || {};
-
-		if (/*prop*/ ctx[0] === undefined && !('prop' in props)) {
-			console.warn("<Component> was created without expected prop 'prop'");
-		}
-
-		if (/*realName*/ ctx[1] === undefined && !('alias' in props)) {
-			console.warn("<Component> was created without expected prop 'alias'");
-		}
 	}
 
 	get prop() {
diff --git a/test/js/samples/debug-empty/expected.js b/test/js/samples/debug-empty/expected.js
index 55303b41b7..ee304591cb 100644
--- a/test/js/samples/debug-empty/expected.js
+++ b/test/js/samples/debug-empty/expected.js
@@ -72,6 +72,13 @@ function instance($$self, $$props, $$invalidate) {
 	let { $$slots: slots = {}, $$scope } = $$props;
 	validate_slots('Component', slots, []);
 	let { name } = $$props;
+
+	$$self.$$.on_mount.push(function () {
+		if (name === undefined && !('name' in $$props || $$self.$$.bound[$$self.$$.props['name']])) {
+			console.warn("<Component> was created without expected prop 'name'");
+		}
+	});
+
 	const writable_props = ['name'];
 
 	Object.keys($$props).forEach(key => {
@@ -106,13 +113,6 @@ class Component extends SvelteComponentDev {
 			options,
 			id: create_fragment.name
 		});
-
-		const { ctx } = this.$$;
-		const props = options.props || {};
-
-		if (/*name*/ ctx[0] === undefined && !('name' in props)) {
-			console.warn("<Component> was created without expected prop 'name'");
-		}
 	}
 
 	get name() {
diff --git a/test/js/samples/debug-foo-bar-baz-things/expected.js b/test/js/samples/debug-foo-bar-baz-things/expected.js
index 3377d35018..02be04c26e 100644
--- a/test/js/samples/debug-foo-bar-baz-things/expected.js
+++ b/test/js/samples/debug-foo-bar-baz-things/expected.js
@@ -176,6 +176,25 @@ function instance($$self, $$props, $$invalidate) {
 	let { foo } = $$props;
 	let { bar } = $$props;
 	let { baz } = $$props;
+
+	$$self.$$.on_mount.push(function () {
+		if (things === undefined && !('things' in $$props || $$self.$$.bound[$$self.$$.props['things']])) {
+			console.warn("<Component> was created without expected prop 'things'");
+		}
+
+		if (foo === undefined && !('foo' in $$props || $$self.$$.bound[$$self.$$.props['foo']])) {
+			console.warn("<Component> was created without expected prop 'foo'");
+		}
+
+		if (bar === undefined && !('bar' in $$props || $$self.$$.bound[$$self.$$.props['bar']])) {
+			console.warn("<Component> was created without expected prop 'bar'");
+		}
+
+		if (baz === undefined && !('baz' in $$props || $$self.$$.bound[$$self.$$.props['baz']])) {
+			console.warn("<Component> was created without expected prop 'baz'");
+		}
+	});
+
 	const writable_props = ['things', 'foo', 'bar', 'baz'];
 
 	Object.keys($$props).forEach(key => {
@@ -216,25 +235,6 @@ class Component extends SvelteComponentDev {
 			options,
 			id: create_fragment.name
 		});
-
-		const { ctx } = this.$$;
-		const props = options.props || {};
-
-		if (/*things*/ ctx[0] === undefined && !('things' in props)) {
-			console.warn("<Component> was created without expected prop 'things'");
-		}
-
-		if (/*foo*/ ctx[1] === undefined && !('foo' in props)) {
-			console.warn("<Component> was created without expected prop 'foo'");
-		}
-
-		if (/*bar*/ ctx[2] === undefined && !('bar' in props)) {
-			console.warn("<Component> was created without expected prop 'bar'");
-		}
-
-		if (/*baz*/ ctx[3] === undefined && !('baz' in props)) {
-			console.warn("<Component> was created without expected prop 'baz'");
-		}
 	}
 
 	get things() {
diff --git a/test/js/samples/debug-foo/expected.js b/test/js/samples/debug-foo/expected.js
index 518897c237..84dedb0a91 100644
--- a/test/js/samples/debug-foo/expected.js
+++ b/test/js/samples/debug-foo/expected.js
@@ -168,6 +168,17 @@ function instance($$self, $$props, $$invalidate) {
 	validate_slots('Component', slots, []);
 	let { things } = $$props;
 	let { foo } = $$props;
+
+	$$self.$$.on_mount.push(function () {
+		if (things === undefined && !('things' in $$props || $$self.$$.bound[$$self.$$.props['things']])) {
+			console.warn("<Component> was created without expected prop 'things'");
+		}
+
+		if (foo === undefined && !('foo' in $$props || $$self.$$.bound[$$self.$$.props['foo']])) {
+			console.warn("<Component> was created without expected prop 'foo'");
+		}
+	});
+
 	const writable_props = ['things', 'foo'];
 
 	Object.keys($$props).forEach(key => {
@@ -204,17 +215,6 @@ class Component extends SvelteComponentDev {
 			options,
 			id: create_fragment.name
 		});
-
-		const { ctx } = this.$$;
-		const props = options.props || {};
-
-		if (/*things*/ ctx[0] === undefined && !('things' in props)) {
-			console.warn("<Component> was created without expected prop 'things'");
-		}
-
-		if (/*foo*/ ctx[1] === undefined && !('foo' in props)) {
-			console.warn("<Component> was created without expected prop 'foo'");
-		}
 	}
 
 	get things() {
diff --git a/test/js/samples/dev-warning-missing-data-computed/expected.js b/test/js/samples/dev-warning-missing-data-computed/expected.js
index 5e10ec55f8..a94cf7b5f2 100644
--- a/test/js/samples/dev-warning-missing-data-computed/expected.js
+++ b/test/js/samples/dev-warning-missing-data-computed/expected.js
@@ -69,6 +69,13 @@ function instance($$self, $$props, $$invalidate) {
 	validate_slots('Component', slots, []);
 	let { foo } = $$props;
 	let bar;
+
+	$$self.$$.on_mount.push(function () {
+		if (foo === undefined && !('foo' in $$props || $$self.$$.bound[$$self.$$.props['foo']])) {
+			console.warn("<Component> was created without expected prop 'foo'");
+		}
+	});
+
 	const writable_props = ['foo'];
 
 	Object.keys($$props).forEach(key => {
@@ -110,13 +117,6 @@ class Component extends SvelteComponentDev {
 			options,
 			id: create_fragment.name
 		});
-
-		const { ctx } = this.$$;
-		const props = options.props || {};
-
-		if (/*foo*/ ctx[0] === undefined && !('foo' in props)) {
-			console.warn("<Component> was created without expected prop 'foo'");
-		}
 	}
 
 	get foo() {
diff --git a/test/runtime/samples/dev-warning-missing-data-component-bind/Foo.svelte b/test/runtime/samples/dev-warning-missing-data-component-bind/Foo.svelte
new file mode 100644
index 0000000000..60278c4845
--- /dev/null
+++ b/test/runtime/samples/dev-warning-missing-data-component-bind/Foo.svelte
@@ -0,0 +1,8 @@
+<script>
+	export let w;
+	export let x;
+	export let y;
+	export let z = undefined;
+</script>
+
+<div>{w} {x} {y}</div>
\ No newline at end of file
diff --git a/test/runtime/samples/dev-warning-missing-data-component-bind/_config.js b/test/runtime/samples/dev-warning-missing-data-component-bind/_config.js
new file mode 100644
index 0000000000..ececa00a8c
--- /dev/null
+++ b/test/runtime/samples/dev-warning-missing-data-component-bind/_config.js
@@ -0,0 +1,9 @@
+export default {
+	compileOptions: {
+		dev: true
+	},
+
+	warnings: [
+		"<Foo> was created without expected prop 'y'"
+	]
+};
diff --git a/test/runtime/samples/dev-warning-missing-data-component-bind/main.svelte b/test/runtime/samples/dev-warning-missing-data-component-bind/main.svelte
new file mode 100644
index 0000000000..eab3c8336f
--- /dev/null
+++ b/test/runtime/samples/dev-warning-missing-data-component-bind/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	import Foo from './Foo.svelte';
+
+	let x = undefined;
+	let w = 'w';
+</script>
+
+<Foo bind:w bind:x />
\ No newline at end of file

From d04b1cca24fdfb9f170d0a5f747d94eabe7ee22b Mon Sep 17 00:00:00 2001
From: Yuichiro Yamashita <xydybaseball@gmail.com>
Date: Thu, 6 Oct 2022 23:30:42 +0900
Subject: [PATCH 12/45] Update CHANGELOG.md

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b5ba64d0bb..d12212be87 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -19,6 +19,7 @@
 * Supports nullish values for component event handlers ([#7568](https://github.com/sveltejs/svelte/issues/7568))
 * Better error message when specifying an invalid value for `<svelte:component this={...}>` ([#7550](https://github.com/sveltejs/svelte/issues/7550))
 * Fix to call component unmount if a component is mounted and then immediately unmounted ([#7817](https://github.com/sveltejs/svelte/issues/7817))
+* Fix false positive warnings about props binding in dev mode ([#4457](https://github.com/sveltejs/svelte/issues/4457))
 
 ## 3.50.1
 

From 8de7931c64b46d22fc303adce14eb3f680c8ca66 Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Fri, 7 Oct 2022 08:23:12 +0800
Subject: [PATCH 13/45] [feat] better error message for invalid logic block
 placement (#7862)

* better error message for invalid logic block placement

* include checking for {@html} tags in invalid location
---
 src/compiler/parse/errors.ts                  |  8 ++++++++
 src/compiler/parse/state/tag.ts               | 19 ++++++++++++++++---
 .../html-block-in-attribute/errors.json       |  9 +++++++++
 .../html-block-in-attribute/input.svelte      |  1 +
 .../html-block-in-textarea/errors.json        |  9 +++++++++
 .../html-block-in-textarea/input.svelte       |  3 +++
 .../logic-block-in-attribute/errors.json      |  9 +++++++++
 .../logic-block-in-attribute/input.svelte     |  1 +
 .../logic-block-in-textarea/errors.json       |  9 +++++++++
 .../logic-block-in-textarea/input.svelte      |  5 +++++
 10 files changed, 70 insertions(+), 3 deletions(-)
 create mode 100644 test/validator/samples/html-block-in-attribute/errors.json
 create mode 100644 test/validator/samples/html-block-in-attribute/input.svelte
 create mode 100644 test/validator/samples/html-block-in-textarea/errors.json
 create mode 100644 test/validator/samples/html-block-in-textarea/input.svelte
 create mode 100644 test/validator/samples/logic-block-in-attribute/errors.json
 create mode 100644 test/validator/samples/logic-block-in-attribute/input.svelte
 create mode 100644 test/validator/samples/logic-block-in-textarea/errors.json
 create mode 100644 test/validator/samples/logic-block-in-textarea/input.svelte

diff --git a/src/compiler/parse/errors.ts b/src/compiler/parse/errors.ts
index 63bd5b0919..26f03c0cb1 100644
--- a/src/compiler/parse/errors.ts
+++ b/src/compiler/parse/errors.ts
@@ -107,6 +107,14 @@ export default {
 		code: `invalid-${slug}-placement`,
 		message: `<${name}> tags cannot be inside elements or blocks`
 	}),
+	invalid_logic_block_placement: (location: string, name: string) => ({
+		code: 'invalid-logic-block-placement',
+		message: `{#${name}} logic block cannot be ${location}`
+	}),
+	invalid_tag_placement: (location: string, name: string) => ({
+		code: 'invalid-tag-placement',
+		message: `{@${name}} tag cannot be ${location}`
+	}),
 	invalid_ref_directive: (name: string) => ({
 		code: 'invalid-ref-directive',
 		message: `The ref directive is no longer supported — use \`bind:this={${name}}\` instead`
diff --git a/src/compiler/parse/state/tag.ts b/src/compiler/parse/state/tag.ts
index efce375b7e..4be47f25b0 100644
--- a/src/compiler/parse/state/tag.ts
+++ b/src/compiler/parse/state/tag.ts
@@ -219,7 +219,8 @@ export default function tag(parser: Parser) {
 		element.children = read_sequence(
 			parser,
 			() =>
-				/^<\/textarea(\s[^>]*)?>/i.test(parser.template.slice(parser.index))
+				/^<\/textarea(\s[^>]*)?>/i.test(parser.template.slice(parser.index)),
+			'inside <textarea>'
 		);
 		parser.read(/^<\/textarea(\s[^>]*)?>/i);
 		element.end = parser.index;
@@ -473,7 +474,7 @@ function read_attribute_value(parser: Parser) {
 
 	let value;
 	try {
-		value = read_sequence(parser, () => !!parser.match_regex(regex));
+		value = read_sequence(parser, () => !!parser.match_regex(regex), 'in attribute value');
 	} catch (error) {
 		if (error.code === 'parse-error') {
 			// if the attribute value didn't close + self-closing tag
@@ -495,7 +496,7 @@ function read_attribute_value(parser: Parser) {
 	return value;
 }
 
-function read_sequence(parser: Parser, done: () => boolean): TemplateNode[] {
+function read_sequence(parser: Parser, done: () => boolean, location: string): TemplateNode[] {
 	let current_chunk: Text = {
 		start: parser.index,
 		end: null,
@@ -521,6 +522,18 @@ function read_sequence(parser: Parser, done: () => boolean): TemplateNode[] {
 			flush(parser.index);
 			return chunks;
 		} else if (parser.eat('{')) {
+			if (parser.match('#')) {
+				const index = parser.index - 1;
+				parser.eat('#');
+				const name = parser.read_until(/[^a-z]/);
+				parser.error(parser_errors.invalid_logic_block_placement(location, name), index);
+			} else if (parser.match('@')) {
+				const index = parser.index - 1;
+				parser.eat('@');
+				const name = parser.read_until(/[^a-z]/);
+				parser.error(parser_errors.invalid_tag_placement(location, name), index);
+			}
+
 			flush(parser.index - 1);
 
 			parser.allow_whitespace();
diff --git a/test/validator/samples/html-block-in-attribute/errors.json b/test/validator/samples/html-block-in-attribute/errors.json
new file mode 100644
index 0000000000..7cfe43dc0b
--- /dev/null
+++ b/test/validator/samples/html-block-in-attribute/errors.json
@@ -0,0 +1,9 @@
+[
+	{
+		"code": "invalid-tag-placement",
+		"message": "{@html} tag cannot be in attribute value",
+		"start": { "line": 1, "column": 12, "character": 12 },
+		"end": { "line": 1, "column": 12, "character": 12 },
+		"pos": 12
+	}
+]
diff --git a/test/validator/samples/html-block-in-attribute/input.svelte b/test/validator/samples/html-block-in-attribute/input.svelte
new file mode 100644
index 0000000000..46b8ca5b7e
--- /dev/null
+++ b/test/validator/samples/html-block-in-attribute/input.svelte
@@ -0,0 +1 @@
+<div style="{@html text}" />
\ No newline at end of file
diff --git a/test/validator/samples/html-block-in-textarea/errors.json b/test/validator/samples/html-block-in-textarea/errors.json
new file mode 100644
index 0000000000..756fa5ad3e
--- /dev/null
+++ b/test/validator/samples/html-block-in-textarea/errors.json
@@ -0,0 +1,9 @@
+[
+	{
+		"code": "invalid-tag-placement",
+		"message": "{@html} tag cannot be inside <textarea>",
+		"start": { "line": 2, "column": 1, "character": 12 },
+		"end": { "line": 2, "column": 1, "character": 12 },
+		"pos": 12
+	}
+]
diff --git a/test/validator/samples/html-block-in-textarea/input.svelte b/test/validator/samples/html-block-in-textarea/input.svelte
new file mode 100644
index 0000000000..5da8dbf75a
--- /dev/null
+++ b/test/validator/samples/html-block-in-textarea/input.svelte
@@ -0,0 +1,3 @@
+<textarea>
+	{@html fruit}
+</textarea>
\ No newline at end of file
diff --git a/test/validator/samples/logic-block-in-attribute/errors.json b/test/validator/samples/logic-block-in-attribute/errors.json
new file mode 100644
index 0000000000..ebf68938e7
--- /dev/null
+++ b/test/validator/samples/logic-block-in-attribute/errors.json
@@ -0,0 +1,9 @@
+[
+	{
+		"code": "invalid-logic-block-placement",
+		"message": "{#if} logic block cannot be in attribute value",
+		"start": { "line": 1, "column": 12, "character": 12 },
+		"end": { "line": 1, "column": 12, "character": 12 },
+		"pos": 12
+	}
+]
diff --git a/test/validator/samples/logic-block-in-attribute/input.svelte b/test/validator/samples/logic-block-in-attribute/input.svelte
new file mode 100644
index 0000000000..241529527c
--- /dev/null
+++ b/test/validator/samples/logic-block-in-attribute/input.svelte
@@ -0,0 +1 @@
+<div style="{#if condition}a{/if}" />
\ No newline at end of file
diff --git a/test/validator/samples/logic-block-in-textarea/errors.json b/test/validator/samples/logic-block-in-textarea/errors.json
new file mode 100644
index 0000000000..b1d73d4903
--- /dev/null
+++ b/test/validator/samples/logic-block-in-textarea/errors.json
@@ -0,0 +1,9 @@
+[
+	{
+		"code": "invalid-logic-block-placement",
+		"message": "{#each} logic block cannot be inside <textarea>",
+		"start": { "line": 2, "column": 1, "character": 12 },
+		"end": { "line": 2, "column": 1, "character": 12 },
+		"pos": 12
+	}
+]
diff --git a/test/validator/samples/logic-block-in-textarea/input.svelte b/test/validator/samples/logic-block-in-textarea/input.svelte
new file mode 100644
index 0000000000..63fdd9fbaa
--- /dev/null
+++ b/test/validator/samples/logic-block-in-textarea/input.svelte
@@ -0,0 +1,5 @@
+<textarea>
+	{#each fruits as fruit}
+		{fruit}
+	{/each}
+</textarea>
\ No newline at end of file

From 2b7393885724ed158dd3ce1b9e53b9737a5f3c3e Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Fri, 7 Oct 2022 08:25:04 +0800
Subject: [PATCH 14/45] Update CHANGELOG.md

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d12212be87..6ca984af7d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -20,6 +20,7 @@
 * Better error message when specifying an invalid value for `<svelte:component this={...}>` ([#7550](https://github.com/sveltejs/svelte/issues/7550))
 * Fix to call component unmount if a component is mounted and then immediately unmounted ([#7817](https://github.com/sveltejs/svelte/issues/7817))
 * Fix false positive warnings about props binding in dev mode ([#4457](https://github.com/sveltejs/svelte/issues/4457))
+* Better error message when using logic blocks or tags in invalid place ([#7552](https://github.com/sveltejs/svelte/issues/7552))
 
 ## 3.50.1
 

From 220325cd9feea12f9a9bc5eb8df5120f856b1bc9 Mon Sep 17 00:00:00 2001
From: Samuel Stroschein <35429197+samuelstroschein@users.noreply.github.com>
Date: Fri, 7 Oct 2022 11:11:46 +0200
Subject: [PATCH 15/45] [docs] add inline documentation to svelte runtime
 functions (#7846)

* add documentation

* add links do docs
---
 src/runtime/internal/lifecycle.ts | 69 +++++++++++++++++++++++++++++++
 1 file changed, 69 insertions(+)

diff --git a/src/runtime/internal/lifecycle.ts b/src/runtime/internal/lifecycle.ts
index fbbeca9a67..e75bbdc501 100644
--- a/src/runtime/internal/lifecycle.ts
+++ b/src/runtime/internal/lifecycle.ts
@@ -11,18 +11,47 @@ export function get_current_component() {
 	return current_component;
 }
 
+/**
+ * Schedules a callback to run immediately before the component is updated after any state change.
+ * 
+ * The first time the callback runs will be before the initial `onMount`
+ * 
+ * https://svelte.dev/docs#run-time-svelte-beforeupdate
+ */
 export function beforeUpdate(fn: () => any) {
 	get_current_component().$$.before_update.push(fn);
 }
 
+/**
+ * The `onMount` function schedules a callback to run as soon as the component has been mounted to the DOM. 
+ * It must be called during the component's initialisation (but doesn't need to live *inside* the component; 
+ * it can be called from an external module).
+ * 
+ * `onMount` does not run inside a [server-side component](/docs#run-time-server-side-component-api).
+ * 
+ * https://svelte.dev/docs#run-time-svelte-onmount
+ */
 export function onMount(fn: () => any) {
 	get_current_component().$$.on_mount.push(fn);
 }
 
+/**
+ * Schedules a callback to run immediately after the component has been updated.
+ * 
+ * The first time the callback runs will be after the initial `onMount` 
+ */
 export function afterUpdate(fn: () => any) {
 	get_current_component().$$.after_update.push(fn);
 }
 
+/** 
+ * Schedules a callback to run immediately before the component is unmounted.
+ * 
+ * Out of `onMount`, `beforeUpdate`, `afterUpdate` and `onDestroy`, this is the 
+ * only one that runs inside a server-side component.
+ * 
+ * https://svelte.dev/docs#run-time-svelte-ondestroy
+ */
 export function onDestroy(fn: () => any) {
 	get_current_component().$$.on_destroy.push(fn);
 }
@@ -31,6 +60,18 @@ export interface DispatchOptions {
 	cancelable?: boolean;
 }
 
+/**
+ * Creates an event dispatcher that can be used to dispatch [component events](/docs#template-syntax-component-directives-on-eventname). 
+ * Event dispatchers are functions that can take two arguments: `name` and `detail`.
+ * 
+ * Component events created with `createEventDispatcher` create a 
+ * [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent). 
+ * These events do not [bubble](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture).
+ * The `detail` argument corresponds to the [CustomEvent.detail](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/detail) 
+ * property and can contain any type of data. 
+ * 
+ * https://svelte.dev/docs#run-time-svelte-createeventdispatcher
+ */
 export function createEventDispatcher<EventMap extends {} = any>(): <
 	EventKey extends Extract<keyof EventMap, string>
 >(
@@ -57,19 +98,47 @@ export function createEventDispatcher<EventMap extends {} = any>(): <
 	};
 }
 
+/**
+ * Associates an arbitrary `context` object with the current component and the specified `key` 
+ * and returns that object. The context is then available to children of the component 
+ * (including slotted content) with `getContext`.
+ * 
+ * Like lifecycle functions, this must be called during component initialisation. 
+ * 
+ * https://svelte.dev/docs#run-time-svelte-setcontext
+ */
 export function setContext<T>(key, context: T): T {
 	get_current_component().$$.context.set(key, context);
 	return context;
 }
 
+/**
+ * Retrieves the context that belongs to the closest parent component with the specified `key`. 
+ * Must be called during component initialisation. 
+ * 
+ * https://svelte.dev/docs#run-time-svelte-getcontext
+ */
 export function getContext<T>(key): T {
 	return get_current_component().$$.context.get(key);
 }
 
+/**
+ * Retrieves the whole context map that belongs to the closest parent component. 
+ * Must be called during component initialisation. Useful, for example, if you 
+ * programmatically create a component and want to pass the existing context to it.
+ * 
+ * https://svelte.dev/docs#run-time-svelte-getallcontexts
+ */
 export function getAllContexts<T extends Map<any, any> = Map<any, any>>(): T {
 	return get_current_component().$$.context;
 }
 
+/**
+ * Checks whether a given `key` has been set in the context of a parent component. 
+ * Must be called during component initialisation. 
+ * 
+ * https://svelte.dev/docs#run-time-svelte-hascontext
+ */
 export function hasContext(key): boolean {
 	return get_current_component().$$.context.has(key);	
 }

From ff2759e1437559669bd032abaff6920c2fc46570 Mon Sep 17 00:00:00 2001
From: Geoff Rich <4992896+geoffrich@users.noreply.github.com>
Date: Fri, 7 Oct 2022 16:25:19 -0700
Subject: [PATCH 16/45] [docs] fix typo in getting started (#7918)

---
 site/content/docs/01-getting-started.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/site/content/docs/01-getting-started.md b/site/content/docs/01-getting-started.md
index 8ae5b1fb9c..e8aae80f23 100644
--- a/site/content/docs/01-getting-started.md
+++ b/site/content/docs/01-getting-started.md
@@ -7,6 +7,7 @@ title: Getting started
 To try Svelte in an interactive online environment you can try [the REPL](https://svelte.dev/repl) or [StackBlitz](https://node.new/svelte).
 
 To create a project locally, run:
+
 ```
 npm create vite@latest myapp -- --template svelte
 cd myapp
@@ -16,6 +17,6 @@ npm run dev
 
 Or use [SvelteKit](https://kit.svelte.dev/), the official application framework from the Svelte team (currently in beta).
 
-See the SvelteSociety website run by the Svelte community for a list of integrations with various [tooling and editots](https://sveltesociety.dev/tools).
+The Svelte team maintains a [VS Code extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) and the Svelte community has created a list of integrations with various other [tooling and editors](https://sveltesociety.dev/tools).
 
 If you're having trouble, get help on [Discord](https://svelte.dev/chat) or [StackOverflow](https://stackoverflow.com/questions/tagged/svelte).

From 1c659193a0b1fdf6e472be182fb600a430784d20 Mon Sep 17 00:00:00 2001
From: Ben McCann <322311+benmccann@users.noreply.github.com>
Date: Fri, 7 Oct 2022 16:34:31 -0700
Subject: [PATCH 17/45] [docs] update SvelteKit status (#7919)

---
 site/content/docs/01-getting-started.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/content/docs/01-getting-started.md b/site/content/docs/01-getting-started.md
index e8aae80f23..48cdbcc231 100644
--- a/site/content/docs/01-getting-started.md
+++ b/site/content/docs/01-getting-started.md
@@ -15,7 +15,7 @@ npm install
 npm run dev
 ```
 
-Or use [SvelteKit](https://kit.svelte.dev/), the official application framework from the Svelte team (currently in beta).
+Or use [SvelteKit](https://kit.svelte.dev/), the official application framework from the Svelte team (currently in release candidate status).
 
 The Svelte team maintains a [VS Code extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) and the Svelte community has created a list of integrations with various other [tooling and editors](https://sveltesociety.dev/tools).
 

From 6ac7038e47c38221f16f0f73af93c9024ff2a18c Mon Sep 17 00:00:00 2001
From: Conduitry <git@chor.date>
Date: Mon, 10 Oct 2022 13:15:45 -0400
Subject: [PATCH 18/45] -> v3.51.0

---
 CHANGELOG.md      | 34 +++++++++++++++++-----------------
 package-lock.json |  2 +-
 package.json      |  2 +-
 3 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6ca984af7d..cbf22201f6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,26 +1,26 @@
 # Svelte changelog
 
-## Unreleased
+## 3.51.0
 
-* Fix hydration issue with using `{@html}` and components in `svelte:head` ([#4533](https://github.com/sveltejs/svelte/issues/4533), [#6463](https://github.com/sveltejs/svelte/issues/6463), [#7444](https://github.com/sveltejs/svelte/issues/7444))
-* Warn instead of throwing error if `<svelte:element>` is void tag ([#7566](https://github.com/sveltejs/svelte/issues/7566))
-* Treat `inert` as boolean attribute ([#7785](https://github.com/sveltejs/svelte/pull/7785))
-* Supporting scoped style for `<svelte:element>` ([#7443](https://github.com/sveltejs/svelte/issues/7443))
-* Supports SVG elements with `<svelte:element>`([#7613](https://github.com/sveltejs/svelte/issues/7613))
-* Warn user when binding on a `{...rest}` object in `{#each}` block ([#6860](https://github.com/sveltejs/svelte/issues/6860))
-* Supports `--style-props` for `<svelte:component>` ([#7461](https://github.com/sveltejs/svelte/issues/7461))
-* Supports `--style-props` for SVG components ([#7808](https://github.com/sveltejs/svelte/issues/7808))
 * Add a11y warnings:
-	* `a11y-no-noninteractive-tabindex`: check for tabindex on non-interactive elements ([#6693](https://github.com/sveltejs/svelte/pull/6693))
 	* `a11y-click-events-have-key-events`: check if click event is accompanied by key events ([#5073](https://github.com/sveltejs/svelte/pull/5073))
-* `a11y-role-has-required-aria-props` do not warn when elements matched their semantic role ([#7838](https://github.com/sveltejs/svelte/pull/7838))
-* Supports custom element in `<svelte:element>` ([#7766](https://github.com/sveltejs/svelte/pull/7766))
-* Improve performance of custom element data setting in `<svelte:element>` ([#7869](https://github.com/sveltejs/svelte/pull/7869))
+	* `a11y-no-noninteractive-tabindex`: check for tabindex on non-interactive elements ([#6693](https://github.com/sveltejs/svelte/pull/6693))
+* Warn when two-way binding to `{...rest}` object in `{#each}` block ([#6860](https://github.com/sveltejs/svelte/issues/6860))
+* Support `--style-props` on `<svelte:component>` ([#7461](https://github.com/sveltejs/svelte/issues/7461))
 * Supports nullish values for component event handlers ([#7568](https://github.com/sveltejs/svelte/issues/7568))
-* Better error message when specifying an invalid value for `<svelte:component this={...}>` ([#7550](https://github.com/sveltejs/svelte/issues/7550))
-* Fix to call component unmount if a component is mounted and then immediately unmounted ([#7817](https://github.com/sveltejs/svelte/issues/7817))
-* Fix false positive warnings about props binding in dev mode ([#4457](https://github.com/sveltejs/svelte/issues/4457))
-* Better error message when using logic blocks or tags in invalid place ([#7552](https://github.com/sveltejs/svelte/issues/7552))
+* Supports SVG elements with `<svelte:element>`([#7613](https://github.com/sveltejs/svelte/issues/7613))
+* Treat `inert` as boolean attribute ([#7785](https://github.com/sveltejs/svelte/pull/7785))
+* Support `--style-props` for SVG components ([#7808](https://github.com/sveltejs/svelte/issues/7808))
+* Fix false positive dev warnings about unset props when they are bound ([#4457](https://github.com/sveltejs/svelte/issues/4457))
+* Fix hydration with `{@html}` and components in `<svelte:head>` ([#4533](https://github.com/sveltejs/svelte/issues/4533), [#6463](https://github.com/sveltejs/svelte/issues/6463), [#7444](https://github.com/sveltejs/svelte/issues/7444))
+* Support scoped style for `<svelte:element>` ([#7443](https://github.com/sveltejs/svelte/issues/7443))
+* Improve error message for invalid value for `<svelte:component this={...}>` ([#7550](https://github.com/sveltejs/svelte/issues/7550))
+* Improve error message when using logic blocks or tags at invalid location ([#7552](https://github.com/sveltejs/svelte/issues/7552))
+* Warn instead of throwing error if `<svelte:element>` is a void tag ([#7566](https://github.com/sveltejs/svelte/issues/7566))
+* Supports custom elements in `<svelte:element>` ([#7733](https://github.com/sveltejs/svelte/issues/7733))
+* Fix calling component unmount if a component is mounted and then immediately unmounted ([#7817](https://github.com/sveltejs/svelte/issues/7817))
+* Do not generate `a11y-role-has-required-aria-props` warning when elements match their semantic role ([#7837](https://github.com/sveltejs/svelte/issues/7837))
+* Improve performance of custom element data setting in `<svelte:element>` ([#7869](https://github.com/sveltejs/svelte/pull/7869))
 
 ## 3.50.1
 
diff --git a/package-lock.json b/package-lock.json
index 23ccc6b66f..dec2c8ef0e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "svelte",
-  "version": "3.50.1",
+  "version": "3.51.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
diff --git a/package.json b/package.json
index 836fa33267..bf6b9e7754 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "svelte",
-  "version": "3.50.1",
+  "version": "3.51.0",
   "description": "Cybernetically enhanced web apps",
   "module": "index.mjs",
   "main": "index",

From 26a428972b7865d3871e05368df5e7b47bbf7e5b Mon Sep 17 00:00:00 2001
From: metonym <ericyl.us@gmail.com>
Date: Thu, 13 Oct 2022 05:49:00 -0700
Subject: [PATCH 19/45] [fix] "not interactive" -> "noninteractive" (#7930)

---
 site/content/docs/06-accessibility-warnings.md            | 2 +-
 src/compiler/compile/compiler_warnings.ts                 | 2 +-
 .../samples/a11y-no-nointeractive-tabindex/warnings.json  | 8 ++++----
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/site/content/docs/06-accessibility-warnings.md b/site/content/docs/06-accessibility-warnings.md
index c82ef21fcb..8be8eb888c 100644
--- a/site/content/docs/06-accessibility-warnings.md
+++ b/site/content/docs/06-accessibility-warnings.md
@@ -268,7 +268,7 @@ Some HTML elements have default ARIA roles. Giving these elements an ARIA role t
 Tab key navigation should be limited to elements on the page that can be interacted with.
 
 ```sv
-<!-- A11y: not interactive element cannot have positive tabIndex value -->
+<!-- A11y: noninteractive element cannot have positive tabIndex value -->
 <div tabindex='0' />
 ```
 
diff --git a/src/compiler/compile/compiler_warnings.ts b/src/compiler/compile/compiler_warnings.ts
index f194090870..3a11e04bd1 100644
--- a/src/compiler/compile/compiler_warnings.ts
+++ b/src/compiler/compile/compiler_warnings.ts
@@ -185,7 +185,7 @@ export default {
 	}),
 	a11y_no_noninteractive_tabindex: {
 		code: 'a11y-no-noninteractive-tabindex',
-		message: 'A11y: not interactive element cannot have positive tabIndex value'
+		message: 'A11y: noninteractive element cannot have positive tabIndex value'
 	},
 	redundant_event_modifier_for_touch: {
 		code: 'redundant-event-modifier',
diff --git a/test/validator/samples/a11y-no-nointeractive-tabindex/warnings.json b/test/validator/samples/a11y-no-nointeractive-tabindex/warnings.json
index 97b8ccd9b3..740d9b346c 100644
--- a/test/validator/samples/a11y-no-nointeractive-tabindex/warnings.json
+++ b/test/validator/samples/a11y-no-nointeractive-tabindex/warnings.json
@@ -6,7 +6,7 @@
 			"column": 20,
 			"line": 11
 		},
-		"message": "A11y: not interactive element cannot have positive tabIndex value",
+		"message": "A11y: noninteractive element cannot have positive tabIndex value",
 		"pos": 221,
 		"start": {
 			"character": 221,
@@ -21,7 +21,7 @@
 			"column": 35,
 			"line": 12
 		},
-		"message": "A11y: not interactive element cannot have positive tabIndex value",
+		"message": "A11y: noninteractive element cannot have positive tabIndex value",
 		"pos": 242,
 		"start": {
 			"character": 242,
@@ -36,7 +36,7 @@
 			"column": 24,
 			"line": 13
 		},
-		"message": "A11y: not interactive element cannot have positive tabIndex value",
+		"message": "A11y: noninteractive element cannot have positive tabIndex value",
 		"pos": 278,
 		"start": {
 			"character": 278,
@@ -51,7 +51,7 @@
 			"column": 26,
 			"line": 14
 		},
-		"message": "A11y: not interactive element cannot have positive tabIndex value",
+		"message": "A11y: noninteractive element cannot have positive tabIndex value",
 		"pos": 303,
 		"start": {
 			"character": 303,

From 0eba57113be4185836a76ba894cbc29f366da252 Mon Sep 17 00:00:00 2001
From: Hofer Ivan <ivan.hofer@outlook.com>
Date: Thu, 13 Oct 2022 14:54:30 +0200
Subject: [PATCH 20/45] [chore]: store regexp as variable instead of defining
 it inline (#7716)

* store regexp as variable instead of defining it inline

* fix naming of `regex_quoted_value`

* some more variables

* optimize `.replace() calls

* restore formatting changes

* optimize `parser.*` calls

* small refactor

* optimize `.test() calls

* rename some variables

* fix tests

* rename pattern variables

* extract common regexes into `patters.ts`

* rename variables to use snake_case

* fix trim
---
 src/compiler/compile/Component.ts             | 22 +++++++-----
 src/compiler/compile/css/Selector.ts          | 15 +++++---
 src/compiler/compile/css/Stylesheet.ts        |  9 +++--
 src/compiler/compile/index.ts                 |  7 ++--
 src/compiler/compile/nodes/Binding.ts         |  4 +--
 src/compiler/compile/nodes/Element.ts         | 26 +++++++++-----
 src/compiler/compile/nodes/EventHandler.ts    |  6 ++--
 src/compiler/compile/nodes/Head.ts            |  3 +-
 src/compiler/compile/nodes/InlineComponent.ts |  7 ++--
 src/compiler/compile/nodes/Text.ts            |  7 ++--
 .../compile/nodes/shared/AbstractBlock.ts     |  4 ++-
 .../compile/nodes/shared/Expression.ts        |  4 ++-
 src/compiler/compile/render_dom/Block.ts      |  3 +-
 src/compiler/compile/render_dom/index.ts      |  3 +-
 .../render_dom/wrappers/Element/Attribute.ts  | 17 +++++----
 .../wrappers/Element/StyleAttribute.ts        | 13 ++++---
 .../render_dom/wrappers/Element/index.ts      | 36 ++++++++++++-------
 .../compile/render_dom/wrappers/Fragment.ts   |  3 +-
 .../wrappers/InlineComponent/index.ts         |  4 ++-
 .../compile/render_dom/wrappers/Text.ts       |  4 ++-
 .../render_dom/wrappers/shared/add_actions.ts |  4 ++-
 .../shared/create_debugging_comment.ts        |  4 ++-
 .../compile/render_ssr/handlers/Element.ts    |  6 ++--
 .../handlers/shared/get_attribute_value.ts    |  3 +-
 .../utils/remove_whitespace_children.ts       |  3 +-
 .../compile/utils/get_name_from_filename.ts   | 19 ++++++----
 src/compiler/compile/utils/hash.ts            |  5 ++-
 src/compiler/compile/utils/stringify.ts       |  8 +++--
 src/compiler/parse/index.ts                   | 14 ++++----
 src/compiler/parse/read/context.ts            |  3 +-
 src/compiler/parse/read/expression.ts         |  4 +--
 src/compiler/parse/read/script.ts             |  9 +++--
 src/compiler/parse/read/style.ts              |  6 ++--
 src/compiler/parse/state/mustache.ts          | 30 ++++++++--------
 src/compiler/parse/state/tag.ts               | 26 +++++++++-----
 src/compiler/preprocess/index.ts              | 22 +++++++-----
 src/compiler/utils/extract_svelte_ignore.ts   |  7 ++--
 src/compiler/utils/get_code_frame.ts          |  4 ++-
 src/compiler/utils/mapped_code.ts             | 10 ++++--
 src/compiler/utils/names.ts                   | 12 ++++---
 src/compiler/utils/patterns.ts                | 28 ++++++++++++---
 src/compiler/utils/trim.ts                    |  6 ++--
 42 files changed, 283 insertions(+), 147 deletions(-)

diff --git a/src/compiler/compile/Component.ts b/src/compiler/compile/Component.ts
index 2f8874de7a..1bbaac3ff4 100644
--- a/src/compiler/compile/Component.ts
+++ b/src/compiler/compile/Component.ts
@@ -47,6 +47,10 @@ interface ComponentOptions {
 	preserveWhitespace?: boolean;
 }
 
+const regex_leading_directory_separator = /^[/\\]/;
+const regex_starts_with_term_export = /^Export/;
+const regex_contains_term_function = /Function/;
+
 export default class Component {
 	stats: Stats;
 	warnings: Warning[];
@@ -136,7 +140,7 @@ export default class Component {
 			(typeof process !== 'undefined'
 				? compile_options.filename
 					.replace(process.cwd(), '')
-					.replace(/^[/\\]/, '')
+					.replace(regex_leading_directory_separator, '')
 				: compile_options.filename);
 		this.locate = getLocator(this.source, { offsetLine: 1 });
 
@@ -638,7 +642,7 @@ export default class Component {
 				body.splice(i, 1);
 			}
 
-			if (/^Export/.test(node.type)) {
+			if (regex_starts_with_term_export.test(node.type)) {
 				const replacement = this.extract_exports(node, true);
 				if (replacement) {
 					body[i] = replacement;
@@ -795,7 +799,7 @@ export default class Component {
 					return this.skip();
 				}
 
-				if (/^Export/.test(node.type)) {
+				if (regex_starts_with_term_export.test(node.type)) {
 					const replacement = component.extract_exports(node);
 					if (replacement) {
 						this.replace(replacement);
@@ -918,7 +922,7 @@ export default class Component {
 				}
 
 				if (name[1] !== '$' && scope.has(name.slice(1)) && scope.find_owner(name.slice(1)) !== this.instance_scope) {
-					if (!((/Function/.test(parent.type) && prop === 'params') || (parent.type === 'VariableDeclarator' && prop === 'id'))) {
+					if (!((regex_contains_term_function.test(parent.type) && prop === 'params') || (parent.type === 'VariableDeclarator' && prop === 'id'))) {
 						return this.error(node as any, compiler_errors.contextual_store);
 					}
 				}
@@ -965,7 +969,7 @@ export default class Component {
 
 		walk(this.ast.instance.content, {
 			enter(node: Node) {
-				if (/Function/.test(node.type)) {
+				if (regex_contains_term_function.test(node.type)) {
 					return this.skip();
 				}
 
@@ -1089,7 +1093,7 @@ export default class Component {
 
 						this.replace(b`
 							${node.declarations.length ? node : null}
-							${ props.length > 0 && b`let { ${ props } } = $$props;`}
+							${ props.length > 0 && b`let { ${props} } = $$props;`}
 							${inserts}
 						` as any);
 						return this.skip();
@@ -1460,6 +1464,8 @@ export default class Component {
 	}
 }
 
+const regex_valid_tag_name = /^[a-zA-Z][a-zA-Z0-9]*-[a-zA-Z0-9-]+$/;
+
 function process_component_options(component: Component, nodes) {
 	const component_options: ComponentOptions = {
 		immutable: component.compile_options.immutable || false,
@@ -1473,7 +1479,7 @@ function process_component_options(component: Component, nodes) {
 
 	const node = nodes.find(node => node.name === 'svelte:options');
 
-	function get_value(attribute, {code, message}) {
+	function get_value(attribute, { code, message }) {
 		const { value } = attribute;
 		const chunk = value[0];
 
@@ -1505,7 +1511,7 @@ function process_component_options(component: Component, nodes) {
 							return component.error(attribute, compiler_errors.invalid_tag_attribute);
 						}
 
-						if (tag && !/^[a-zA-Z][a-zA-Z0-9]*-[a-zA-Z0-9-]+$/.test(tag)) {
+						if (tag && !regex_valid_tag_name.test(tag)) {
 							return component.error(attribute, compiler_errors.invalid_tag_property);
 						}
 
diff --git a/src/compiler/compile/css/Selector.ts b/src/compiler/compile/css/Selector.ts
index 17302c4abd..28cf5ba6af 100644
--- a/src/compiler/compile/css/Selector.ts
+++ b/src/compiler/compile/css/Selector.ts
@@ -9,6 +9,7 @@ import EachBlock from '../nodes/EachBlock';
 import IfBlock from '../nodes/IfBlock';
 import AwaitBlock from '../nodes/AwaitBlock';
 import compiler_errors from '../compiler_errors';
+import { regex_starts_with_whitespace, regex_ends_with_whitespace } from '../../utils/patterns';
 
 enum BlockAppliesToNode {
 	NotPossible,
@@ -25,6 +26,8 @@ const whitelist_attribute_selector = new Map([
 	['dialog', new Set(['open'])]
 ]);
 
+const regex_is_single_css_selector = /[^\\],(?!([^([]+[^\\]|[^([\\])[)\]])/;
+
 export default class Selector {
 	node: CssNode;
 	stylesheet: Stylesheet;
@@ -157,7 +160,7 @@ export default class Selector {
 		for (const block of this.blocks) {
 			for (const selector of block.selectors) {
 				if (selector.type === 'PseudoClassSelector' && selector.name === 'global') {
-					if (/[^\\],(?!([^([]+[^\\]|[^([\\])[)\]])/.test(selector.children[0].value)) {
+					if (regex_is_single_css_selector.test(selector.children[0].value)) {
 						component.error(selector, compiler_errors.css_invalid_global_selector);
 					}
 				}
@@ -281,12 +284,14 @@ function apply_selector(blocks: Block[], node: Element, to_encapsulate: Array<{
 	return true;
 }
 
+const regex_backslash_and_following_character = /\\(.)/g;
+
 function block_might_apply_to_node(block: Block, node: Element): BlockAppliesToNode {
 	let i = block.selectors.length;
 
 	while (i--) {
 		const selector = block.selectors[i];
-		const name = typeof selector.name === 'string' && selector.name.replace(/\\(.)/g, '$1');
+		const name = typeof selector.name === 'string' && selector.name.replace(regex_backslash_and_following_character, '$1');
 
 		if (selector.type === 'PseudoClassSelector' && (name === 'host' || name === 'root')) {
 			return BlockAppliesToNode.NotPossible;
@@ -371,7 +376,7 @@ function attribute_matches(node: CssNode, name: string, expected_value: string,
 			const start_with_space = [];
 			const remaining = [];
 			current_possible_values.forEach((current_possible_value: string) => {
-				if (/^\s/.test(current_possible_value)) {
+				if (regex_starts_with_whitespace.test(current_possible_value)) {
 					start_with_space.push(current_possible_value);
 				} else {
 					remaining.push(current_possible_value);
@@ -392,7 +397,7 @@ function attribute_matches(node: CssNode, name: string, expected_value: string,
 				prev_values = combined;
 
 				start_with_space.forEach((value: string) => {
-					if (/\s$/.test(value)) {
+					if (regex_ends_with_whitespace.test(value)) {
 						possible_values.add(value);
 					} else {
 						prev_values.push(value);
@@ -406,7 +411,7 @@ function attribute_matches(node: CssNode, name: string, expected_value: string,
 		}
 
 		current_possible_values.forEach((current_possible_value: string) => {
-			if (/\s$/.test(current_possible_value)) {
+			if (regex_ends_with_whitespace.test(current_possible_value)) {
 				possible_values.add(current_possible_value);
 			} else {
 				prev_values.push(current_possible_value);
diff --git a/src/compiler/compile/css/Stylesheet.ts b/src/compiler/compile/css/Stylesheet.ts
index 1a9ea7feeb..9a3cbe9d13 100644
--- a/src/compiler/compile/css/Stylesheet.ts
+++ b/src/compiler/compile/css/Stylesheet.ts
@@ -9,9 +9,12 @@ import hash from '../utils/hash';
 import compiler_warnings from '../compiler_warnings';
 import { extract_ignores_above_position } from '../../utils/extract_svelte_ignore';
 import { push_array } from '../../utils/push_array';
+import { regex_only_whitespaces, regex_whitespace } from '../../utils/patterns';
+
+const regex_css_browser_prefix = /^-((webkit)|(moz)|(o)|(ms))-/;
 
 function remove_css_prefix(name: string): string {
-	return name.replace(/^-((webkit)|(moz)|(o)|(ms))-/, '');
+	return name.replace(regex_css_browser_prefix, '');
 }
 
 const is_keyframes_node = (node: CssNode) =>
@@ -147,10 +150,10 @@ class Declaration {
 
 		// Don't minify whitespace in custom properties, since some browsers (Chromium < 99)
 		// treat --foo: ; and --foo:; differently
-		if (first.type === 'Raw' && /^\s+$/.test(first.value)) return;
+		if (first.type === 'Raw' && regex_only_whitespaces.test(first.value)) return;
 
 		let start = first.start;
-		while (/\s/.test(code.original[start])) start += 1;
+		while (regex_whitespace.test(code.original[start])) start += 1;
 
 		if (start - c > 1) {
 			code.overwrite(c, start, ':');
diff --git a/src/compiler/compile/index.ts b/src/compiler/compile/index.ts
index afe9c56cf4..a5edc3a6f7 100644
--- a/src/compiler/compile/index.ts
+++ b/src/compiler/compile/index.ts
@@ -35,6 +35,9 @@ const valid_options = [
 	'cssHash'
 ];
 
+const regex_valid_identifier = /^[a-zA-Z_$][a-zA-Z_$0-9]*$/;
+const regex_starts_with_lowercase_character = /^[a-z]/;
+
 function validate_options(options: CompileOptions, warnings: Warning[]) {
 	const { name, filename, loopGuardTimeout, dev, namespace } = options;
 
@@ -48,11 +51,11 @@ function validate_options(options: CompileOptions, warnings: Warning[]) {
 		}
 	});
 
-	if (name && !/^[a-zA-Z_$][a-zA-Z_$0-9]*$/.test(name)) {
+	if (name && !regex_valid_identifier.test(name)) {
 		throw new Error(`options.name must be a valid identifier (got '${name}')`);
 	}
 
-	if (name && /^[a-z]/.test(name)) {
+	if (name && regex_starts_with_lowercase_character.test(name)) {
 		const message = 'options.name should be capitalised';
 		warnings.push({
 			code: 'options-lowercase-name',
diff --git a/src/compiler/compile/nodes/Binding.ts b/src/compiler/compile/nodes/Binding.ts
index 594490a5fb..f826df4828 100644
--- a/src/compiler/compile/nodes/Binding.ts
+++ b/src/compiler/compile/nodes/Binding.ts
@@ -3,7 +3,7 @@ import get_object from '../utils/get_object';
 import Expression from './shared/Expression';
 import Component from '../Component';
 import TemplateScope from './shared/TemplateScope';
-import {dimensions} from '../../utils/patterns';
+import { regex_dimensions } from '../../utils/patterns';
 import { Node as ESTreeNode } from 'estree';
 import { TemplateNode } from '../../interfaces';
 import Element from './Element';
@@ -88,7 +88,7 @@ export default class Binding extends Node {
 		const type = parent.get_static_attribute_value('type');
 
 		this.is_readonly =
-			dimensions.test(this.name) ||
+			regex_dimensions.test(this.name) ||
 			(isElement(parent) &&
 				((parent.is_media_node() && read_only_media_attributes.has(this.name)) ||
 					(parent.name === 'input' && type === 'file')) /* TODO others? */);
diff --git a/src/compiler/compile/nodes/Element.ts b/src/compiler/compile/nodes/Element.ts
index 79f2800437..d5fad18f54 100644
--- a/src/compiler/compile/nodes/Element.ts
+++ b/src/compiler/compile/nodes/Element.ts
@@ -11,7 +11,7 @@ import StyleDirective from './StyleDirective';
 import Text from './Text';
 import { namespaces } from '../../utils/namespaces';
 import map_children from './shared/map_children';
-import { dimensions, start_newline } from '../../utils/patterns';
+import { regex_dimensions, regex_starts_with_newline, regex_non_whitespace_character } from '../../utils/patterns';
 import fuzzymatch from '../../utils/fuzzymatch';
 import list from '../../utils/list';
 import Let from './Let';
@@ -203,6 +203,10 @@ function is_valid_aria_attribute_value(schema: ARIAPropertyDefinition, value: st
 	}
 }
 
+const regex_any_repeated_whitespaces = /[\s]+/g;
+const regex_heading_tags = /^h[1-6]$/;
+const regex_illegal_attribute_character = /(^[0-9-.])|[\^$@%&#?!|()[\]{}^*+~;]/;
+
 export default class Element extends Node {
 	type: 'Element';
 	name: string;
@@ -253,7 +257,7 @@ export default class Element extends Node {
 					// places if there's another newline afterwards.
 					// see https://html.spec.whatwg.org/multipage/syntax.html#element-restrictions
 					// see https://html.spec.whatwg.org/multipage/grouping-content.html#the-pre-element
-					first.data = first.data.replace(start_newline, '');
+					first.data = first.data.replace(regex_starts_with_newline, '');
 				}
 			}
 
@@ -398,7 +402,7 @@ export default class Element extends Node {
 
 			// Errors
 
-			if (/(^[0-9-.])|[\^$@%&#?!|()[\]{}^*+~;]/.test(name)) {
+			if (regex_illegal_attribute_character.test(name)) {
 				return component.error(attribute, compiler_errors.illegal_attribute(name));
 			}
 
@@ -464,7 +468,7 @@ export default class Element extends Node {
 					component.warn(attribute, compiler_warnings.a11y_unknown_aria_attribute(type, match));
 				}
 
-				if (name === 'aria-hidden' && /^h[1-6]$/.test(this.name)) {
+				if (name === 'aria-hidden' && regex_heading_tags.test(this.name)) {
 					component.warn(attribute, compiler_warnings.a11y_hidden(this.name));
 				}
 
@@ -729,7 +733,7 @@ export default class Element extends Node {
 		if (this.name === 'figure') {
 			const children = this.children.filter(node => {
 				if (node.type === 'Comment') return false;
-				if (node.type === 'Text') return /\S/.test(node.data);
+				if (node.type === 'Text') return regex_non_whitespace_character.test(node.data);
 				return true;
 			});
 
@@ -861,7 +865,7 @@ export default class Element extends Node {
 				if (this.name !== 'video') {
 					return component.error(binding, compiler_errors.invalid_binding_element_with('<video>', name));
 				}
-			} else if (dimensions.test(name)) {
+			} else if (regex_dimensions.test(name)) {
 				if (this.name === 'svg' && (name === 'offsetWidth' || name === 'offsetHeight')) {
 					return component.error(binding, compiler_errors.invalid_binding_on(binding.name, `<svg>. Use '${name.replace('offset', 'client')}' instead`));
 				} else if (is_svg(this.name)) {
@@ -988,7 +992,7 @@ export default class Element extends Node {
 			if (attribute && !attribute.is_true) {
 				attribute.chunks.forEach((chunk, index) => {
 					if (chunk.type === 'Text') {
-						let data = chunk.data.replace(/[\s\n\t]+/g, ' ');
+						let data = chunk.data.replace(regex_any_repeated_whitespaces, ' ');
 						if (index === 0) {
 							data = data.trimLeft();
 						} else if (index === attribute.chunks.length - 1) {
@@ -1002,12 +1006,14 @@ export default class Element extends Node {
 	}
 }
 
+const regex_starts_with_vovel = /^[aeiou]/;
+
 function should_have_attribute(
 	node,
 	attributes: string[],
 	name = node.name
 ) {
-	const article = /^[aeiou]/.test(attributes[0]) ? 'an' : 'a';
+	const article = regex_starts_with_vovel.test(attributes[0]) ? 'an' : 'a';
 	const sequence = attributes.length > 1 ?
 		attributes.slice(0, -1).join(', ') + ` or ${attributes[attributes.length - 1]}` :
 		attributes[0];
@@ -1015,10 +1021,12 @@ function should_have_attribute(
 	node.component.warn(node, compiler_warnings.a11y_missing_attribute(name, article, sequence));
 }
 
+const regex_minus_sign = /-/;
+
 function within_custom_element(parent: INode) {
 	while (parent) {
 		if (parent.type === 'InlineComponent') return false;
-		if (parent.type === 'Element' && /-/.test(parent.name)) return true;
+		if (parent.type === 'Element' && regex_minus_sign.test(parent.name)) return true;
 		parent = parent.parent;
 	}
 	return false;
diff --git a/src/compiler/compile/nodes/EventHandler.ts b/src/compiler/compile/nodes/EventHandler.ts
index 1bac53b6af..4b426580b3 100644
--- a/src/compiler/compile/nodes/EventHandler.ts
+++ b/src/compiler/compile/nodes/EventHandler.ts
@@ -6,6 +6,8 @@ import { Identifier } from 'estree';
 import TemplateScope from './shared/TemplateScope';
 import { TemplateNode } from '../../interfaces';
 
+const regex_contains_term_function_expression = /FunctionExpression/;
+
 export default class EventHandler extends Node {
 	type: 'EventHandler';
 	name: string;
@@ -25,7 +27,7 @@ export default class EventHandler extends Node {
 			this.expression = new Expression(component, this, template_scope, info.expression);
 			this.uses_context = this.expression.uses_context;
 
-			if (/FunctionExpression/.test(info.expression.type) && info.expression.params.length === 0) {
+			if (regex_contains_term_function_expression.test(info.expression.type) && info.expression.params.length === 0) {
 				// TODO make this detection more accurate — if `event.preventDefault` isn't called, and
 				// `event` is passed to another function, we can make it passive
 				this.can_make_passive = true;
@@ -55,7 +57,7 @@ export default class EventHandler extends Node {
 		}
 		const node = this.expression.node;
 
-		if (/FunctionExpression/.test(node.type)) {
+		if (regex_contains_term_function_expression.test(node.type)) {
 			return false;
 		}
 
diff --git a/src/compiler/compile/nodes/Head.ts b/src/compiler/compile/nodes/Head.ts
index fb000e0d5b..1ebe0c053a 100644
--- a/src/compiler/compile/nodes/Head.ts
+++ b/src/compiler/compile/nodes/Head.ts
@@ -5,6 +5,7 @@ import Component from '../Component';
 import TemplateScope from './shared/TemplateScope';
 import { TemplateNode } from '../../interfaces';
 import compiler_errors from '../compiler_errors';
+import { regex_non_whitespace_character } from '../../utils/patterns';
 
 export default class Head extends Node {
 	type: 'Head';
@@ -20,7 +21,7 @@ export default class Head extends Node {
 		}
 
 		this.children = map_children(component, parent, scope, info.children.filter(child => {
-			return (child.type !== 'Text' || /\S/.test(child.data));
+			return (child.type !== 'Text' || regex_non_whitespace_character.test(child.data));
 		}));
 
 		if (this.children.length > 0) {
diff --git a/src/compiler/compile/nodes/InlineComponent.ts b/src/compiler/compile/nodes/InlineComponent.ts
index 8871c5f306..26cfeb7ef9 100644
--- a/src/compiler/compile/nodes/InlineComponent.ts
+++ b/src/compiler/compile/nodes/InlineComponent.ts
@@ -10,6 +10,7 @@ import TemplateScope from './shared/TemplateScope';
 import { INode } from './interfaces';
 import { TemplateNode } from '../../interfaces';
 import compiler_errors from '../compiler_errors';
+import { regex_only_whitespaces } from '../../utils/patterns';
 
 export default class InlineComponent extends Node {
 	type: 'InlineComponent';
@@ -73,10 +74,10 @@ export default class InlineComponent extends Node {
 
 				case 'Transition':
 					return component.error(node, compiler_errors.invalid_transition);
-				
+
 				case 'StyleDirective':
 					return component.error(node, compiler_errors.invalid_component_style_directive);
-	
+
 				default:
 					throw new Error(`Not implemented: ${node.type}`);
 			}
@@ -165,7 +166,7 @@ export default class InlineComponent extends Node {
 }
 
 function not_whitespace_text(node) {
-	return !(node.type === 'Text' && /^\s+$/.test(node.data));
+	return !(node.type === 'Text' && regex_only_whitespaces.test(node.data));
 }
 
 function get_namespace(parent: Node, explicit_namespace: string) {
diff --git a/src/compiler/compile/nodes/Text.ts b/src/compiler/compile/nodes/Text.ts
index 347beb9c23..ac6cd9b828 100644
--- a/src/compiler/compile/nodes/Text.ts
+++ b/src/compiler/compile/nodes/Text.ts
@@ -3,6 +3,7 @@ import Component from '../Component';
 import TemplateScope from './shared/TemplateScope';
 import { INode } from './interfaces';
 import { TemplateNode } from '../../interfaces';
+import { regex_non_whitespace_character } from '../../utils/patterns';
 
 // Whitespace inside one of these elements will not result in
 // a whitespace node being created in any circumstances. (This
@@ -16,6 +17,8 @@ const elements_without_text = new Set([
 	'video'
 ]);
 
+const regex_ends_with_svg = /svg$/;
+
 export default class Text extends Node {
 	type: 'Text';
 	data: string;
@@ -28,7 +31,7 @@ export default class Text extends Node {
 	}
 
 	should_skip() {
-		if (/\S/.test(this.data)) return false;
+		if (regex_non_whitespace_character.test(this.data)) return false;
 
 		const parent_element = this.find_nearest(/(?:Element|InlineComponent|SlotTemplate|Head)/);
 		if (!parent_element) return false;
@@ -37,7 +40,7 @@ export default class Text extends Node {
 		if (parent_element.type === 'InlineComponent') return parent_element.children.length === 1 && this === parent_element.children[0];
 
 		// svg namespace exclusions
-		if (/svg$/.test(parent_element.namespace)) {
+		if (regex_ends_with_svg.test(parent_element.namespace)) {
 			if (this.prev && this.prev.type === 'Element' && this.prev.name === 'tspan') return false;
 		}
 
diff --git a/src/compiler/compile/nodes/shared/AbstractBlock.ts b/src/compiler/compile/nodes/shared/AbstractBlock.ts
index 04917f5a6b..91af3fc0f7 100644
--- a/src/compiler/compile/nodes/shared/AbstractBlock.ts
+++ b/src/compiler/compile/nodes/shared/AbstractBlock.ts
@@ -4,6 +4,8 @@ import Node from './Node';
 import { INode } from '../interfaces';
 import compiler_warnings from '../../compiler_warnings';
 
+const regex_non_whitespace_characters = /[^ \r\n\f\v\t]/;
+
 export default class AbstractBlock extends Node {
 	block: Block;
 	children: INode[];
@@ -17,7 +19,7 @@ export default class AbstractBlock extends Node {
 
 		const child = this.children[0];
 
-		if (!child || (child.type === 'Text' && !/[^ \r\n\f\v\t]/.test(child.data))) {
+		if (!child || (child.type === 'Text' && !regex_non_whitespace_characters.test(child.data))) {
 			this.component.warn(this, compiler_warnings.empty_block);
 		}
 	}
diff --git a/src/compiler/compile/nodes/shared/Expression.ts b/src/compiler/compile/nodes/shared/Expression.ts
index 0603c15589..6ea509d8b8 100644
--- a/src/compiler/compile/nodes/shared/Expression.ts
+++ b/src/compiler/compile/nodes/shared/Expression.ts
@@ -21,6 +21,8 @@ import compiler_errors from '../../compiler_errors';
 
 type Owner = INode;
 
+const regex_contains_term_function_expression = /FunctionExpression/;
+
 export default class Expression {
 	type: 'Expression' = 'Expression';
 	component: Component;
@@ -72,7 +74,7 @@ export default class Expression {
 					scope = map.get(node);
 				}
 
-				if (!function_expression && /FunctionExpression/.test(node.type)) {
+				if (!function_expression && regex_contains_term_function_expression.test(node.type)) {
 					function_expression = node;
 				}
 
diff --git a/src/compiler/compile/render_dom/Block.ts b/src/compiler/compile/render_dom/Block.ts
index 34c4774804..164e938674 100644
--- a/src/compiler/compile/render_dom/Block.ts
+++ b/src/compiler/compile/render_dom/Block.ts
@@ -3,6 +3,7 @@ import Wrapper from './wrappers/shared/Wrapper';
 import { b, x } from 'code-red';
 import { Node, Identifier, ArrayPattern } from 'estree';
 import { is_head } from './wrappers/shared/is_head';
+import { regex_double_quotes } from '../../utils/patterns';
 
 export interface Bindings {
 	object: Identifier;
@@ -415,7 +416,7 @@ export default class Block {
 						block: ${block},
 						id: ${this.name || 'create_fragment'}.name,
 						type: "${this.type}",
-						source: "${this.comment ? this.comment.replace(/"/g, '\\"') : ''}",
+						source: "${this.comment ? this.comment.replace(regex_double_quotes, '\\"') : ''}",
 						ctx: #ctx
 					});
 					return ${block};`
diff --git a/src/compiler/compile/render_dom/index.ts b/src/compiler/compile/render_dom/index.ts
index 173d93d5dd..c36ca2acd4 100644
--- a/src/compiler/compile/render_dom/index.ts
+++ b/src/compiler/compile/render_dom/index.ts
@@ -12,6 +12,7 @@ import { RawSourceMap, DecodedSourceMap } from '@ampproject/remapping/dist/types
 import { flatten } from '../../utils/flatten';
 import check_enable_sourcemap from '../utils/check_enable_sourcemap';
 import { push_array } from '../../utils/push_array';
+import { regex_backslashes } from '../../utils/patterns';
 
 export default function dom(
 	component: Component,
@@ -530,7 +531,7 @@ export default function dom(
 				constructor(options) {
 					super();
 
-					${css.code && b`this.shadowRoot.innerHTML = \`<style>${css.code.replace(/\\/g, '\\\\')}${css_sourcemap_enabled && options.dev ? `\n/*# sourceMappingURL=${css.map.toUrl()} */` : ''}</style>\`;`}
+					${css.code && b`this.shadowRoot.innerHTML = \`<style>${css.code.replace(regex_backslashes, '\\\\')}${css_sourcemap_enabled && options.dev ? `\n/*# sourceMappingURL=${css.map.toUrl()} */` : ''}</style>\`;`}
 
 					@init(this, { target: this.shadowRoot, props: ${init_props}, customElement: true }, ${definition}, ${has_create_fragment ? 'create_fragment' : 'null'}, ${not_equal}, ${prop_indexes}, null, ${dirty});
 
diff --git a/src/compiler/compile/render_dom/wrappers/Element/Attribute.ts b/src/compiler/compile/render_dom/wrappers/Element/Attribute.ts
index 21a44ab92a..fb604f564e 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/Attribute.ts
+++ b/src/compiler/compile/render_dom/wrappers/Element/Attribute.ts
@@ -10,6 +10,7 @@ import handle_select_value_binding from './handle_select_value_binding';
 import { Identifier, Node } from 'estree';
 import { namespaces } from '../../../../utils/namespaces';
 import { boolean_attributes } from '../../../../../shared/boolean_attributes';
+import { regex_double_quotes } from '../../../../utils/patterns';
 
 const non_textlike_input_types = new Set([
 	'button',
@@ -42,9 +43,12 @@ export class BaseAttributeWrapper {
 		}
 	}
 
-	render(_block: Block) {}
+	render(_block: Block) { }
 }
 
+const regex_minus_sign = /-/;
+const regex_invalid_variable_identifier_characters = /[^a-zA-Z_$]/g;
+
 export default class AttributeWrapper extends BaseAttributeWrapper {
 	node: Attribute;
 	parent: ElementWrapper;
@@ -115,7 +119,7 @@ export default class AttributeWrapper extends BaseAttributeWrapper {
 		// xlink is a special case... we could maybe extend this to generic
 		// namespaced attributes but I'm not sure that's applicable in
 		// HTML5?
-		const method = /-/.test(element.node.name)
+		const method = regex_minus_sign.test(element.node.name)
 			? '@set_custom_element_data'
 			: name.slice(0, 6) === 'xlink:'
 				? '@xlink_attr'
@@ -196,7 +200,7 @@ export default class AttributeWrapper extends BaseAttributeWrapper {
 
 	get_init(block: Block, value) {
 		this.last = this.should_cache && block.get_unique_name(
-			`${this.parent.var.name}_${this.name.replace(/[^a-zA-Z_$]/g, '_')}_value`
+			`${this.parent.var.name}_${this.name.replace(regex_invalid_variable_identifier_characters, '_')}_value`
 		);
 
 		if (this.should_cache) block.add_variable(this.last);
@@ -313,7 +317,7 @@ export default class AttributeWrapper extends BaseAttributeWrapper {
 
 		return `="${value.map(chunk => {
 			return chunk.type === 'Text'
-				? chunk.data.replace(/"/g, '\\"')
+				? chunk.data.replace(regex_double_quotes, '\\"')
 				: `\${${chunk.manipulate()}}`;
 		}).join('')}"`;
 	}
@@ -381,13 +385,14 @@ function should_cache(attribute: AttributeWrapper) {
 	return attribute.is_src || attribute.node.should_cache();
 }
 
+const regex_contains_checked_or_group = /checked|group/;
+
 function is_indirectly_bound_value(attribute: AttributeWrapper) {
 	const element = attribute.parent;
 	return attribute.name === 'value' &&
 		(element.node.name === 'option' || // TODO check it's actually bound
 			(element.node.name === 'input' &&
 				element.node.bindings.some(
-					(binding) =>
-						/checked|group/.test(binding.name)
+					(binding) => regex_contains_checked_or_group.test(binding.name)
 				)));
 }
diff --git a/src/compiler/compile/render_dom/wrappers/Element/StyleAttribute.ts b/src/compiler/compile/render_dom/wrappers/Element/StyleAttribute.ts
index ac7f66b6ac..4481b6b98f 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/StyleAttribute.ts
+++ b/src/compiler/compile/render_dom/wrappers/Element/StyleAttribute.ts
@@ -69,6 +69,8 @@ export default class StyleAttributeWrapper extends AttributeWrapper {
 	}
 }
 
+const regex_style_prop_key = /^\s*([\w-]+):\s*/;
+
 function optimize_style(value: Array<Text | Expression>) {
 	const props: StyleProp[] = [];
 	let chunks = value.slice();
@@ -78,7 +80,7 @@ function optimize_style(value: Array<Text | Expression>) {
 
 		if (chunk.type !== 'Text') return null;
 
-		const key_match = /^\s*([\w-]+):\s*/.exec(chunk.data);
+		const key_match = regex_style_prop_key.exec(chunk.data);
 		if (!key_match) return null;
 
 		const key = key_match[1];
@@ -106,6 +108,9 @@ function optimize_style(value: Array<Text | Expression>) {
 	return props;
 }
 
+const regex_important_flag = /\s*!important\s*$/;
+const regex_semicolon_or_whitespace = /[;\s]/;
+
 function get_style_value(chunks: Array<Text | Expression>) {
 	const value: Array<Text | Expression> = [];
 
@@ -151,7 +156,7 @@ function get_style_value(chunks: Array<Text | Expression>) {
 				} as Text);
 			}
 
-			while (/[;\s]/.test(chunk.data[c])) c += 1;
+			while (regex_semicolon_or_whitespace.test(chunk.data[c])) c += 1;
 			const remaining_data = chunk.data.slice(c);
 
 			if (remaining_data) {
@@ -172,9 +177,9 @@ function get_style_value(chunks: Array<Text | Expression>) {
 	let important = false;
 
 	const last_chunk = value[value.length - 1];
-	if (last_chunk && last_chunk.type === 'Text' && /\s*!important\s*$/.test(last_chunk.data)) {
+	if (last_chunk && last_chunk.type === 'Text' && regex_important_flag.test(last_chunk.data)) {
 		important = true;
-		last_chunk.data = last_chunk.data.replace(/\s*!important\s*$/, '');
+		last_chunk.data = last_chunk.data.replace(regex_important_flag, '');
 		if (!last_chunk.data) value.pop();
 	}
 
diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts
index 4f0b49729c..01f03b5589 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/index.ts
+++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts
@@ -12,7 +12,7 @@ import { namespaces } from '../../../../utils/namespaces';
 import AttributeWrapper from './Attribute';
 import StyleAttributeWrapper from './StyleAttribute';
 import SpreadAttributeWrapper from './SpreadAttribute';
-import { dimensions, start_newline } from '../../../../utils/patterns';
+import { regex_dimensions, regex_starts_with_newline, regex_backslashes } from '../../../../utils/patterns';
 import Binding from './Binding';
 import add_to_set from '../../../utils/add_to_set';
 import { add_event_handler } from '../shared/add_event_handlers';
@@ -34,12 +34,16 @@ interface BindingGroup {
 	bindings: Binding[];
 }
 
+const regex_contains_radio_or_checkbox_or_file = /radio|checkbox|file/;
+const regex_contains_radio_or_checkbox_or_range_or_file = /radio|checkbox|range|file/;
+
 const events = [
 	{
 		event_names: ['input'],
 		filter: (node: Element, _name: string) =>
 			node.name === 'textarea' ||
-			node.name === 'input' && !/radio|checkbox|range|file/.test(node.get_static_attribute_value('type') as string)
+			node.name === 'input' &&
+			!regex_contains_radio_or_checkbox_or_range_or_file.test(node.get_static_attribute_value('type') as string)
 	},
 	{
 		event_names: ['input'],
@@ -51,7 +55,8 @@ const events = [
 		event_names: ['change'],
 		filter: (node: Element, _name: string) =>
 			node.name === 'select' ||
-			node.name === 'input' && /radio|checkbox|file/.test(node.get_static_attribute_value('type') as string)
+			node.name === 'input' &&
+			regex_contains_radio_or_checkbox_or_file.test(node.get_static_attribute_value('type') as string)
 	},
 	{
 		event_names: ['change', 'input'],
@@ -62,7 +67,7 @@ const events = [
 	{
 		event_names: ['elementresize'],
 		filter: (_node: Element, name: string) =>
-			dimensions.test(name)
+			regex_dimensions.test(name)
 	},
 
 	// media events
@@ -136,6 +141,8 @@ const events = [
 ];
 
 const CHILD_DYNAMIC_ELEMENT_BLOCK = 'child_dynamic_element';
+const regex_invalid_variable_identifier_characters = /[^a-zA-Z0-9_$]/g;
+const regex_minus_signs = /-/g;
 
 export default class ElementWrapper extends Wrapper {
 	node: Element;
@@ -182,7 +189,7 @@ export default class ElementWrapper extends Wrapper {
 
 		this.var = {
 			type: 'Identifier',
-			name: node.name.replace(/[^a-zA-Z0-9_$]/g, '_')
+			name: node.name.replace(regex_invalid_variable_identifier_characters, '_')
 		};
 
 		this.void = is_void(node.name);
@@ -547,7 +554,7 @@ export default class ElementWrapper extends Wrapper {
 		}
 	}
 
-	add_directives_in_order (block: Block) {
+	add_directives_in_order(block: Block) {
 		type OrderedAttribute = EventHandler | BindingGroup | Binding | Action;
 
 		const binding_groups = events
@@ -561,7 +568,7 @@ export default class ElementWrapper extends Wrapper {
 
 		const this_binding = this.bindings.find(b => b.node.name === 'this');
 
-		function getOrder (item: OrderedAttribute) {
+		function getOrder(item: OrderedAttribute) {
 			if (item instanceof EventHandler) {
 				return item.node.start;
 			} else if (item instanceof Binding) {
@@ -1100,7 +1107,7 @@ export default class ElementWrapper extends Wrapper {
 			const snippet = expression.manipulate(block);
 			let cached_snippet;
 			if (should_cache) {
-				cached_snippet = block.get_unique_name(`style_${name.replace(/-/g, '_')}`);
+				cached_snippet = block.get_unique_name(`style_${name.replace(regex_minus_signs, '_')}`);
 				block.add_variable(cached_snippet, snippet);
 			}
 
@@ -1138,6 +1145,9 @@ export default class ElementWrapper extends Wrapper {
 	}
 }
 
+const regex_backticks = /`/g;
+const regex_dollar_signs = /\$/g;
+
 function to_html(wrappers: Array<ElementWrapper | TextWrapper | MustacheTagWrapper | RawMustacheTagWrapper>, block: Block, literal: any, state: any, can_use_raw_text?: boolean) {
 	wrappers.forEach(wrapper => {
 		if (wrapper instanceof TextWrapper) {
@@ -1155,9 +1165,9 @@ function to_html(wrappers: Array<ElementWrapper | TextWrapper | MustacheTagWrapp
 			);
 
 			state.quasi.value.raw += (raw ? wrapper.data : escape_html(wrapper.data))
-				.replace(/\\/g, '\\\\')
-				.replace(/`/g, '\\`')
-				.replace(/\$/g, '\\$');
+				.replace(regex_backslashes, '\\\\')
+				.replace(regex_backticks, '\\`')
+				.replace(regex_dollar_signs, '\\$');
 		} else if (wrapper instanceof MustacheTagWrapper || wrapper instanceof RawMustacheTagWrapper) {
 			literal.quasis.push(state.quasi);
 			literal.expressions.push(wrapper.node.expression.manipulate(block));
@@ -1192,7 +1202,7 @@ function to_html(wrappers: Array<ElementWrapper | TextWrapper | MustacheTagWrapp
 					// Two or more leading newlines are required to restore the leading newline immediately after `<pre>`.
 					// see https://html.spec.whatwg.org/multipage/grouping-content.html#the-pre-element
 					const first = wrapper.fragment.nodes[0];
-					if (first && first.node.type === 'Text' && start_newline.test(first.node.data)) {
+					if (first && first.node.type === 'Text' && regex_starts_with_newline.test(first.node.data)) {
 						state.quasi.value.raw += '\n';
 					}
 				}
@@ -1204,7 +1214,7 @@ function to_html(wrappers: Array<ElementWrapper | TextWrapper | MustacheTagWrapp
 						// Two or more leading newlines are required to restore the leading newline immediately after `<textarea>`.
 						// see https://html.spec.whatwg.org/multipage/syntax.html#element-restrictions
 						const first = value_attribute.node.chunks[0];
-						if (first && first.type === 'Text' && start_newline.test(first.data)) {
+						if (first && first.type === 'Text' && regex_starts_with_newline.test(first.data)) {
 							state.quasi.value.raw += '\n';
 						}
 						to_html_for_attr_value(value_attribute, block, literal, state);
diff --git a/src/compiler/compile/render_dom/wrappers/Fragment.ts b/src/compiler/compile/render_dom/wrappers/Fragment.ts
index 87ce775ca9..1e3b89e97f 100644
--- a/src/compiler/compile/render_dom/wrappers/Fragment.ts
+++ b/src/compiler/compile/render_dom/wrappers/Fragment.ts
@@ -21,6 +21,7 @@ import Block from '../Block';
 import { trim_start, trim_end } from '../../../utils/trim';
 import { link } from '../../../utils/link';
 import { Identifier } from 'estree';
+import { regex_starts_with_whitespace } from '../../../utils/patterns';
 
 const wrappers = {
 	AwaitBlock,
@@ -92,7 +93,7 @@ export default class FragmentWrapper {
 				// *unless* there is no whitespace between this node and its next sibling
 				if (this.nodes.length === 0) {
 					const should_trim = (
-						next_sibling ? (next_sibling.node.type === 'Text' && /^\s/.test(next_sibling.node.data) && trimmable_at(child, next_sibling)) : !child.has_ancestor('EachBlock')
+						next_sibling ? (next_sibling.node.type === 'Text' && regex_starts_with_whitespace.test(next_sibling.node.data) && trimmable_at(child, next_sibling)) : !child.has_ancestor('EachBlock')
 					);
 
 					if (should_trim && !child.keep_space()) {
diff --git a/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts b/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts
index 37aaf2e7b2..37416379c9 100644
--- a/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts
+++ b/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts
@@ -24,6 +24,8 @@ import { namespaces } from '../../../../utils/namespaces';
 
 type SlotDefinition = { block: Block; scope: TemplateScope; get_context?: Node; get_changes?: Node };
 
+const regex_invalid_variable_identifier_characters = /[^a-zA-Z_$]/g;
+
 export default class InlineComponentWrapper extends Wrapper {
 	var: Identifier;
 	slots: Map<string, SlotDefinition> = new Map();
@@ -596,7 +598,7 @@ export default class InlineComponentWrapper extends Wrapper {
 		this.node.css_custom_properties.forEach((attr) => {
 			const dependencies = attr.get_dependencies();
 			const should_cache = attr.should_cache();
-			const last = should_cache &&	block.get_unique_name(`${attr.name.replace(/[^a-zA-Z_$]/g, '_')}_last`);
+			const last = should_cache &&	block.get_unique_name(`${attr.name.replace(regex_invalid_variable_identifier_characters, '_')}_last`);
 			if (should_cache) block.add_variable(last);
 			const value = attr.get_value(block);
 			const init = should_cache ? x`${last} = ${value}` : value;
diff --git a/src/compiler/compile/render_dom/wrappers/Text.ts b/src/compiler/compile/render_dom/wrappers/Text.ts
index 2a342b5678..7d02735d9a 100644
--- a/src/compiler/compile/render_dom/wrappers/Text.ts
+++ b/src/compiler/compile/render_dom/wrappers/Text.ts
@@ -5,6 +5,8 @@ import Wrapper from './shared/Wrapper';
 import { x } from 'code-red';
 import { Identifier } from 'estree';
 
+const regex_non_whitespace_characters = /[\S\u00A0]/;
+
 export default class TextWrapper extends Wrapper {
 	node: Text;
 	data: string;
@@ -27,7 +29,7 @@ export default class TextWrapper extends Wrapper {
 
 	use_space() {
 		if (this.renderer.component.component_options.preserveWhitespace) return false;
-		if (/[\S\u00A0]/.test(this.data)) return false;
+		if (regex_non_whitespace_characters.test(this.data)) return false;
 
 		return !this.node.within_pre();
 	}
diff --git a/src/compiler/compile/render_dom/wrappers/shared/add_actions.ts b/src/compiler/compile/render_dom/wrappers/shared/add_actions.ts
index 6429f18928..3b39494994 100644
--- a/src/compiler/compile/render_dom/wrappers/shared/add_actions.ts
+++ b/src/compiler/compile/render_dom/wrappers/shared/add_actions.ts
@@ -12,6 +12,8 @@ export default function add_actions(
 	actions.forEach(action => add_action(block, target, action));
 }
 
+const regex_invalid_variable_identifier_characters = /[^a-zA-Z0-9_$]/g;
+
 export function add_action(block: Block, target: string | Expression, action: Action) {
 	const { expression, template_scope } = action;
 	let snippet;
@@ -23,7 +25,7 @@ export function add_action(block: Block, target: string | Expression, action: Ac
 	}
 
 	const id = block.get_unique_name(
-		`${action.name.replace(/[^a-zA-Z0-9_$]/g, '_')}_action`
+		`${action.name.replace(regex_invalid_variable_identifier_characters, '_')}_action`
 	);
 
 	block.add_variable(id);
diff --git a/src/compiler/compile/render_dom/wrappers/shared/create_debugging_comment.ts b/src/compiler/compile/render_dom/wrappers/shared/create_debugging_comment.ts
index 8e9f7fab37..6512b42862 100644
--- a/src/compiler/compile/render_dom/wrappers/shared/create_debugging_comment.ts
+++ b/src/compiler/compile/render_dom/wrappers/shared/create_debugging_comment.ts
@@ -1,5 +1,7 @@
 import Component from '../../../Component';
 import { INode } from '../../../nodes/interfaces';
+import { regex_whitespace_characters } from '../../../../utils/patterns';
+
 
 export default function create_debugging_comment(
 	node: INode,
@@ -36,5 +38,5 @@ export default function create_debugging_comment(
 	const start = locate(c);
 	const loc = `(${start.line}:${start.column})`;
 
-	return `${loc} ${source.slice(c, d)}`.replace(/\s/g, ' ');
+	return `${loc} ${source.slice(c, d)}`.replace(regex_whitespace_characters, ' ');
 }
diff --git a/src/compiler/compile/render_ssr/handlers/Element.ts b/src/compiler/compile/render_ssr/handlers/Element.ts
index 2af0343b2a..081988b567 100644
--- a/src/compiler/compile/render_ssr/handlers/Element.ts
+++ b/src/compiler/compile/render_ssr/handlers/Element.ts
@@ -8,7 +8,7 @@ import Expression from '../../nodes/shared/Expression';
 import remove_whitespace_children from './utils/remove_whitespace_children';
 import fix_attribute_casing from '../../render_dom/wrappers/Element/fix_attribute_casing';
 import { namespaces } from '../../../utils/namespaces';
-import { start_newline } from '../../../utils/patterns';
+import { regex_starts_with_newline } from '../../../utils/patterns';
 import { Node, Expression as ESExpression } from 'estree';
 
 export default function (node: Element, renderer: Renderer, options: RenderOptions) {
@@ -173,7 +173,7 @@ export default function (node: Element, renderer: Renderer, options: RenderOptio
 				const value_attribute = node.attributes.find(({ name }) => name === 'value');
 				if (value_attribute) {
 					const first = value_attribute.chunks[0];
-					if (first && first.type === 'Text' && start_newline.test(first.data)) {
+					if (first && first.type === 'Text' && regex_starts_with_newline.test(first.data)) {
 						renderer.add_string('\n');
 					}
 				}
@@ -188,7 +188,7 @@ export default function (node: Element, renderer: Renderer, options: RenderOptio
 			// see https://html.spec.whatwg.org/multipage/grouping-content.html#the-pre-element
 			// see https://html.spec.whatwg.org/multipage/syntax.html#element-restrictions
 			const first = children[0];
-			if (first && first.type === 'Text' && start_newline.test(first.data)) {
+			if (first && first.type === 'Text' && regex_starts_with_newline.test(first.data)) {
 				renderer.add_string('\n');
 			}
 		}
diff --git a/src/compiler/compile/render_ssr/handlers/shared/get_attribute_value.ts b/src/compiler/compile/render_ssr/handlers/shared/get_attribute_value.ts
index 20d4eddbc5..f431ea01db 100644
--- a/src/compiler/compile/render_ssr/handlers/shared/get_attribute_value.ts
+++ b/src/compiler/compile/render_ssr/handlers/shared/get_attribute_value.ts
@@ -4,6 +4,7 @@ import Text from '../../../nodes/Text';
 import { x } from 'code-red';
 import Expression from '../../../nodes/shared/Expression';
 import { Expression as ESTreeExpression } from 'estree';
+import { regex_double_quotes } from '../../../../utils/patterns';
 
 export function get_class_attribute_value(attribute: Attribute): ESTreeExpression {
 	// handle special case — `class={possiblyUndefined}` with scoped CSS
@@ -21,7 +22,7 @@ export function get_attribute_value(attribute: Attribute): ESTreeExpression {
 	return attribute.chunks
 		.map((chunk) => {
 			return chunk.type === 'Text'
-				? string_literal(chunk.data.replace(/"/g, '&quot;')) as ESTreeExpression
+				? string_literal(chunk.data.replace(regex_double_quotes, '&quot;')) as ESTreeExpression
 				: x`@escape(${chunk.node}, true)`;
 		})
 		.reduce((lhs, rhs) => x`${lhs} + ${rhs}`);
diff --git a/src/compiler/compile/render_ssr/handlers/utils/remove_whitespace_children.ts b/src/compiler/compile/render_ssr/handlers/utils/remove_whitespace_children.ts
index 7733c89cb8..10ccaefa92 100644
--- a/src/compiler/compile/render_ssr/handlers/utils/remove_whitespace_children.ts
+++ b/src/compiler/compile/render_ssr/handlers/utils/remove_whitespace_children.ts
@@ -1,6 +1,7 @@
 import { INode } from '../../../nodes/interfaces';
 import { trim_end, trim_start } from '../../../../utils/trim';
 import { link } from '../../../../utils/link';
+import { regex_starts_with_whitespace } from '../../../../utils/patterns';
 
 // similar logic from `compile/render_dom/wrappers/Fragment`
 // We want to remove trailing whitespace inside an element/component/block,
@@ -22,7 +23,7 @@ export default function remove_whitespace_children(children: INode[], next?: INo
 			if (nodes.length === 0) {
 				const should_trim = next
 					? next.type === 'Text' &&
-					  /^\s/.test(next.data) &&
+					regex_starts_with_whitespace.test(next.data) &&
 					  trimmable_at(child, next)
 					: !child.has_ancestor('EachBlock');
 
diff --git a/src/compiler/compile/utils/get_name_from_filename.ts b/src/compiler/compile/utils/get_name_from_filename.ts
index b05605b5ee..7c0f805b76 100644
--- a/src/compiler/compile/utils/get_name_from_filename.ts
+++ b/src/compiler/compile/utils/get_name_from_filename.ts
@@ -1,3 +1,10 @@
+import { regex_starts_with_underscore, regex_ends_with_underscore } from '../../utils/patterns';
+
+const regex_percentage_characters = /%/g;
+const regex_file_ending = /\.[^.]+$/;
+const regex_repeated_invalid_variable_identifier_characters = /[^a-zA-Z_$0-9]+/g;
+const regex_starts_with_digit = /^(\d)/;
+
 export default function get_name_from_filename(filename: string) {
 	if (!filename) return null;
 
@@ -12,12 +19,12 @@ export default function get_name_from_filename(filename: string) {
 	}
 
 	const base = parts.pop()
-		.replace(/%/g, 'u')
-		.replace(/\.[^.]+$/, '')
-		.replace(/[^a-zA-Z_$0-9]+/g, '_')
-		.replace(/^_/, '')
-		.replace(/_$/, '')
-		.replace(/^(\d)/, '_$1');
+		.replace(regex_percentage_characters, 'u')
+		.replace(regex_file_ending, '')
+		.replace(regex_repeated_invalid_variable_identifier_characters, '_')
+		.replace(regex_starts_with_underscore, '')
+		.replace(regex_ends_with_underscore, '')
+		.replace(regex_starts_with_digit, '_$1');
 
 	if (!base) {
 		throw new Error(`Could not derive component name from file ${filename}`);
diff --git a/src/compiler/compile/utils/hash.ts b/src/compiler/compile/utils/hash.ts
index c0ea2b3d88..d5b5a20609 100644
--- a/src/compiler/compile/utils/hash.ts
+++ b/src/compiler/compile/utils/hash.ts
@@ -1,6 +1,9 @@
 // https://github.com/darkskyapp/string-hash/blob/master/index.js
+
+const regex_return_characters = /\r/g;
+
 export default function hash(str: string): string {
-	str = str.replace(/\r/g, '');
+	str = str.replace(regex_return_characters, '');
 	let hash = 5381;
 	let i = str.length;
 
diff --git a/src/compiler/compile/utils/stringify.ts b/src/compiler/compile/utils/stringify.ts
index aa1c42c512..84073c6469 100644
--- a/src/compiler/compile/utils/stringify.ts
+++ b/src/compiler/compile/utils/stringify.ts
@@ -19,10 +19,14 @@ const escaped = {
 	'>': '&gt;'
 };
 
+const regex_html_characters_to_escape = /["'&<>]/g;
+
 export function escape_html(html) {
-	return String(html).replace(/["'&<>]/g, match => escaped[match]);
+	return String(html).replace(regex_html_characters_to_escape, match => escaped[match]);
 }
 
+const regex_template_characters_to_escape = /(\${|`|\\)/g;
+
 export function escape_template(str) {
-	return str.replace(/(\${|`|\\)/g, '\\$1');
+	return str.replace(regex_template_characters_to_escape, '\\$1');
 }
diff --git a/src/compiler/parse/index.ts b/src/compiler/parse/index.ts
index e5e2260bc0..079be0e20c 100644
--- a/src/compiler/parse/index.ts
+++ b/src/compiler/parse/index.ts
@@ -1,6 +1,6 @@
 import { isIdentifierStart, isIdentifierChar } from 'acorn';
 import fragment from './state/fragment';
-import { whitespace } from '../utils/patterns';
+import { regex_whitespace } from '../utils/patterns';
 import { reserved } from '../utils/names';
 import full_char_code_at from '../utils/full_char_code_at';
 import { TemplateNode, Ast, ParserOptions, Fragment, Style, Script } from '../interfaces';
@@ -15,6 +15,8 @@ interface LastAutoClosedTag {
 	depth: number;
 }
 
+const regex_position_indicator = / \(\d+:\d+\)$/;
+
 export class Parser {
 	readonly template: string;
 	readonly filename?: string;
@@ -74,10 +76,10 @@ export class Parser {
 
 		if (this.html.children.length) {
 			let start = this.html.children[0].start;
-			while (whitespace.test(template[start])) start += 1;
+			while (regex_whitespace.test(template[start])) start += 1;
 
 			let end = this.html.children[this.html.children.length - 1].end;
-			while (whitespace.test(template[end - 1])) end -= 1;
+			while (regex_whitespace.test(template[end - 1])) end -= 1;
 
 			this.html.start = start;
 			this.html.end = end;
@@ -93,7 +95,7 @@ export class Parser {
 	acorn_error(err: any) {
 		this.error({
 			code: 'parse-error',
-			message: err.message.replace(/ \(\d+:\d+\)$/, '')
+			message: err.message.replace(regex_position_indicator, '')
 		}, err.pos);
 	}
 
@@ -138,7 +140,7 @@ export class Parser {
 	allow_whitespace() {
 		while (
 			this.index < this.template.length &&
-			whitespace.test(this.template[this.index])
+			regex_whitespace.test(this.template[this.index])
 		) {
 			this.index++;
 		}
@@ -200,7 +202,7 @@ export class Parser {
 	}
 
 	require_whitespace() {
-		if (!whitespace.test(this.template[this.index])) {
+		if (!regex_whitespace.test(this.template[this.index])) {
 			this.error({
 				code: 'missing-whitespace',
 				message: 'Expected whitespace'
diff --git a/src/compiler/parse/read/context.ts b/src/compiler/parse/read/context.ts
index 1e97baf8a7..134d11a6ad 100644
--- a/src/compiler/parse/read/context.ts
+++ b/src/compiler/parse/read/context.ts
@@ -10,6 +10,7 @@ import {
 import { parse_expression_at } from '../acorn';
 import { Pattern } from 'estree';
 import parser_errors from '../errors';
+import { regex_not_newline_characters } from '../../utils/patterns';
 
 export default function read_context(
 	parser: Parser
@@ -65,7 +66,7 @@ export default function read_context(
 		// so we offset it by removing 1 character in the `space_with_newline`
 		// to achieve that, we remove the 1st space encountered,
 		// so it will not affect the `column` of the node
-		let space_with_newline = parser.template.slice(0, start).replace(/[^\n]/g, ' ');
+		let space_with_newline = parser.template.slice(0, start).replace(regex_not_newline_characters, ' ');
 		const first_space = space_with_newline.indexOf(' ');
 		space_with_newline = space_with_newline.slice(0, first_space) + space_with_newline.slice(first_space + 1);
 
diff --git a/src/compiler/parse/read/expression.ts b/src/compiler/parse/read/expression.ts
index 5464a950ce..935574440f 100644
--- a/src/compiler/parse/read/expression.ts
+++ b/src/compiler/parse/read/expression.ts
@@ -1,7 +1,7 @@
 import { parse_expression_at } from '../acorn';
 import { Parser } from '../index';
 import { Node } from 'estree';
-import { whitespace } from '../../utils/patterns';
+import { regex_whitespace } from '../../utils/patterns';
 import parser_errors from '../errors';
 
 export default function read_expression(parser: Parser): Node {
@@ -20,7 +20,7 @@ export default function read_expression(parser: Parser): Node {
 
 			if (char === ')') {
 				num_parens -= 1;
-			} else if (!whitespace.test(char)) {
+			} else if (!regex_whitespace.test(char)) {
 				parser.error(parser_errors.unexpected_token(')'), index);
 			}
 
diff --git a/src/compiler/parse/read/script.ts b/src/compiler/parse/read/script.ts
index c9ac4ac344..02506ab3d5 100644
--- a/src/compiler/parse/read/script.ts
+++ b/src/compiler/parse/read/script.ts
@@ -3,6 +3,9 @@ import { Parser } from '../index';
 import { Script } from '../../interfaces';
 import { Node, Program } from 'estree';
 import parser_errors from '../errors';
+import { regex_not_newline_characters } from '../../utils/patterns';
+
+const regex_closing_script_tag = /<\/script\s*>/;
 
 function get_context(parser: Parser, attributes: any[], start: number): string {
 	const context = attributes.find(attribute => attribute.name === 'context');
@@ -23,13 +26,13 @@ function get_context(parser: Parser, attributes: any[], start: number): string {
 
 export default function read_script(parser: Parser, start: number, attributes: Node[]): Script {
 	const script_start = parser.index;
-	const data = parser.read_until(/<\/script\s*>/, parser_errors.unclosed_script);
+	const data = parser.read_until(regex_closing_script_tag, parser_errors.unclosed_script);
 	if (parser.index >= parser.template.length) {
 		parser.error(parser_errors.unclosed_script);
 	}
 
-	const source = parser.template.slice(0, script_start).replace(/[^\n]/g, ' ') + data;
-	parser.read(/<\/script\s*>/);
+	const source = parser.template.slice(0, script_start).replace(regex_not_newline_characters, ' ') + data;
+	parser.read(regex_closing_script_tag);
 
 	let ast: Program;
 
diff --git a/src/compiler/parse/read/style.ts b/src/compiler/parse/read/style.ts
index e4a885a8cc..1e21dddc67 100644
--- a/src/compiler/parse/read/style.ts
+++ b/src/compiler/parse/read/style.ts
@@ -5,10 +5,12 @@ import { Node } from 'estree';
 import { Style } from '../../interfaces';
 import parser_errors from '../errors';
 
+const regex_closing_style_tag = /<\/style\s*>/;
+
 export default function read_style(parser: Parser, start: number, attributes: Node[]): Style {
 	const content_start = parser.index;
 
-	const styles = parser.read_until(/<\/style\s*>/, parser_errors.unclosed_style);
+	const styles = parser.read_until(regex_closing_style_tag, parser_errors.unclosed_style);
 
 	if (parser.index >= parser.template.length) {
 		parser.error(parser_errors.unclosed_style);
@@ -67,7 +69,7 @@ export default function read_style(parser: Parser, start: number, attributes: No
 		}
 	});
 
-	parser.read(/<\/style\s*>/);
+	parser.read(regex_closing_style_tag);
 	const end = parser.index;
 
 	return {
diff --git a/src/compiler/parse/state/mustache.ts b/src/compiler/parse/state/mustache.ts
index da9016a9df..c3b58afe2a 100644
--- a/src/compiler/parse/state/mustache.ts
+++ b/src/compiler/parse/state/mustache.ts
@@ -1,7 +1,7 @@
 import read_context from '../read/context';
 import read_expression from '../read/expression';
 import { closing_tag_omitted } from '../utils/html';
-import { whitespace } from '../../utils/patterns';
+import { regex_whitespace } from '../../utils/patterns';
 import { trim_start, trim_end } from '../../utils/trim';
 import { to_string } from '../utils/node';
 import { Parser } from '../index';
@@ -33,6 +33,8 @@ function trim_whitespace(block: TemplateNode, trim_before: boolean, trim_after:
 	}
 }
 
+const regex_whitespace_with_closing_curly_brace = /\s*}/;
+
 export default function mustache(parser: Parser) {
 	const start = parser.index;
 	parser.index += 1;
@@ -87,8 +89,8 @@ export default function mustache(parser: Parser) {
 		// strip leading/trailing whitespace as necessary
 		const char_before = parser.template[block.start - 1];
 		const char_after = parser.template[parser.index];
-		const trim_before = !char_before || whitespace.test(char_before);
-		const trim_after = !char_after || whitespace.test(char_after);
+		const trim_before = !char_before || regex_whitespace.test(char_before);
+		const trim_after = !char_after || regex_whitespace.test(char_after);
 
 		trim_whitespace(block, trim_before, trim_after);
 
@@ -106,8 +108,8 @@ export default function mustache(parser: Parser) {
 			const block = parser.current();
 			if (block.type !== 'IfBlock') {
 				parser.error(
-					parser.stack.some(block => block.type === 'IfBlock') 
-						? parser_errors.invalid_elseif_placement_unclosed_block(to_string(block)) 
+					parser.stack.some(block => block.type === 'IfBlock')
+						? parser_errors.invalid_elseif_placement_unclosed_block(to_string(block))
 						: parser_errors.invalid_elseif_placement_outside_if
 				);
 			}
@@ -141,8 +143,8 @@ export default function mustache(parser: Parser) {
 			const block = parser.current();
 			if (block.type !== 'IfBlock' && block.type !== 'EachBlock') {
 				parser.error(
-					parser.stack.some(block => block.type === 'IfBlock' || block.type === 'EachBlock') 
-						? parser_errors.invalid_else_placement_unclosed_block(to_string(block)) 
+					parser.stack.some(block => block.type === 'IfBlock' || block.type === 'EachBlock')
+						? parser_errors.invalid_else_placement_unclosed_block(to_string(block))
 						: parser_errors.invalid_else_placement_outside_if
 				);
 			}
@@ -167,15 +169,15 @@ export default function mustache(parser: Parser) {
 			if (block.type !== 'PendingBlock') {
 				parser.error(
 					parser.stack.some(block => block.type === 'PendingBlock')
-						? parser_errors.invalid_then_placement_unclosed_block(to_string(block)) 
-						: parser_errors.invalid_then_placement_without_await 
+						? parser_errors.invalid_then_placement_unclosed_block(to_string(block))
+						: parser_errors.invalid_then_placement_without_await
 				);
 			}
 		} else {
 			if (block.type !== 'ThenBlock' && block.type !== 'PendingBlock') {
 				parser.error(parser.stack.some(block => block.type === 'ThenBlock' || block.type === 'PendingBlock')
-						? parser_errors.invalid_catch_placement_unclosed_block(to_string(block)) 
-						: parser_errors.invalid_catch_placement_without_await 
+					? parser_errors.invalid_catch_placement_unclosed_block(to_string(block))
+					: parser_errors.invalid_catch_placement_without_await
 				);
 			}
 		}
@@ -290,7 +292,7 @@ export default function mustache(parser: Parser) {
 
 		const await_block_shorthand = type === 'AwaitBlock' && parser.eat('then');
 		if (await_block_shorthand) {
-			if (parser.match_regex(/\s*}/)) {
+			if (parser.match_regex(regex_whitespace_with_closing_curly_brace)) {
 				parser.allow_whitespace();
 			} else {
 				parser.require_whitespace();
@@ -301,7 +303,7 @@ export default function mustache(parser: Parser) {
 
 		const await_block_catch_shorthand = !await_block_shorthand && type === 'AwaitBlock' && parser.eat('catch');
 		if (await_block_catch_shorthand) {
-			if (parser.match_regex(/\s*}/)) {
+			if (parser.match_regex(regex_whitespace_with_closing_curly_brace)) {
 				parser.allow_whitespace();
 			} else {
 				parser.require_whitespace();
@@ -350,7 +352,7 @@ export default function mustache(parser: Parser) {
 		let identifiers;
 
 		// Implies {@debug} which indicates "debug all"
-		if (parser.read(/\s*}/)) {
+		if (parser.read(regex_whitespace_with_closing_curly_brace)) {
 			identifiers = [];
 		} else {
 			const expression = read_expression(parser);
diff --git a/src/compiler/parse/state/tag.ts b/src/compiler/parse/state/tag.ts
index 4be47f25b0..bf50c6c774 100644
--- a/src/compiler/parse/state/tag.ts
+++ b/src/compiler/parse/state/tag.ts
@@ -53,13 +53,17 @@ function parent_is_head(stack) {
 	return false;
 }
 
+const regex_closing_textarea_tag = /^<\/textarea(\s[^>]*)?>/i;
+const regex_closing_comment = /-->/;
+const regex_capital_letter = /[A-Z]/;
+
 export default function tag(parser: Parser) {
 	const start = parser.index++;
 
 	let parent = parser.current();
 
 	if (parser.eat('!--')) {
-		const data = parser.read_until(/-->/);
+		const data = parser.read_until(regex_closing_comment);
 		parser.eat('-->', true, parser_errors.unclosed_comment);
 
 		parser.current().children.push({
@@ -104,7 +108,7 @@ export default function tag(parser: Parser) {
 
 	const type = meta_tags.has(name)
 		? meta_tags.get(name)
-		: (/[A-Z]/.test(name[0]) || name === 'svelte:self' || name === 'svelte:component') ? 'InlineComponent'
+		: (regex_capital_letter.test(name[0]) || name === 'svelte:self' || name === 'svelte:component') ? 'InlineComponent'
 			: name === 'svelte:fragment' ? 'SlotTemplate'
 				: name === 'title' && parent_is_head(parser.stack) ? 'Title'
 					: name === 'slot' && !parser.customElement ? 'Slot' : 'Element';
@@ -218,11 +222,10 @@ export default function tag(parser: Parser) {
 		// special case
 		element.children = read_sequence(
 			parser,
-			() =>
-				/^<\/textarea(\s[^>]*)?>/i.test(parser.template.slice(parser.index)),
+			() => regex_closing_textarea_tag.test(parser.template.slice(parser.index)),
 			'inside <textarea>'
 		);
-		parser.read(/^<\/textarea(\s[^>]*)?>/i);
+		parser.read(regex_closing_textarea_tag);
 		element.end = parser.index;
 	} else if (name === 'script' || name === 'style') {
 		// special case
@@ -237,6 +240,8 @@ export default function tag(parser: Parser) {
 	}
 }
 
+const regex_whitespace_or_slash_or_closing_tag = /(\s|\/|>)/;
+
 function read_tag_name(parser: Parser) {
 	const start = parser.index;
 
@@ -266,7 +271,7 @@ function read_tag_name(parser: Parser) {
 
 	if (parser.read(SLOT)) return 'svelte:fragment';
 
-	const name = parser.read_until(/(\s|\/|>)/);
+	const name = parser.read_until(regex_whitespace_or_slash_or_closing_tag);
 
 	if (meta_tags.has(name)) return name;
 
@@ -286,6 +291,10 @@ function read_tag_name(parser: Parser) {
 	return name;
 }
 
+// eslint-disable-next-line no-useless-escape
+const regex_token_ending_character = /[\s=\/>"']/;
+const regex_quote_characters = /["']/;
+
 function read_attribute(parser: Parser, unique_names: Set<string>) {
 	const start = parser.index;
 
@@ -344,8 +353,7 @@ function read_attribute(parser: Parser, unique_names: Set<string>) {
 		}
 	}
 
-	// eslint-disable-next-line no-useless-escape
-	const name = parser.read_until(/[\s=\/>"']/);
+	const name = parser.read_until(regex_token_ending_character);
 	if (!name) return null;
 
 	let end = parser.index;
@@ -360,7 +368,7 @@ function read_attribute(parser: Parser, unique_names: Set<string>) {
 		parser.allow_whitespace();
 		value = read_attribute_value(parser);
 		end = parser.index;
-	} else if (parser.match_regex(/["']/)) {
+	} else if (parser.match_regex(regex_quote_characters)) {
 		parser.error(parser_errors.unexpected_token('='), parser.index);
 	}
 
diff --git a/src/compiler/preprocess/index.ts b/src/compiler/preprocess/index.ts
index ab2ede29e0..45885afa96 100644
--- a/src/compiler/preprocess/index.ts
+++ b/src/compiler/preprocess/index.ts
@@ -4,6 +4,7 @@ import { MappedCode, SourceLocation, parse_attached_sourcemap, sourcemap_add_off
 import { decode_map } from './decode_sourcemap';
 import { replace_in_code, slice_source } from './replace_in_code';
 import { MarkupPreprocessor, Source, Preprocessor, PreprocessorGroup, Processed } from './types';
+import { regex_whitespaces } from '../utils/patterns';
 
 export * from './types';
 
@@ -13,8 +14,10 @@ interface SourceUpdate {
 	dependencies?: string[];
 }
 
+const regex_filepath_separator = /[/\\]/;
+
 function get_file_basename(filename: string) {
-	return filename.split(/[/\\]/).pop();
+	return filename.split(regex_filepath_separator).pop();
 }
 
 /**
@@ -120,20 +123,26 @@ function processed_tag_to_code(
 	return tag_open_code.concat(content_code).concat(tag_close_code);
 }
 
+const regex_quoted_value = /^['"](.*)['"]$/;
+
 function parse_tag_attributes(str: string) {
 	// note: won't work with attribute values containing spaces.
 	return str
-		.split(/\s+/)
+		.split(regex_whitespaces)
 		.filter(Boolean)
 		.reduce((attrs, attr) => {
 			const i = attr.indexOf('=');
 			const [key, value] = i > 0 ? [attr.slice(0, i), attr.slice(i + 1)] : [attr];
-			const [, unquoted] = (value && value.match(/^['"](.*)['"]$/)) || [];
+			const [, unquoted] = (value && value.match(regex_quoted_value)) || [];
 
 			return { ...attrs, [key]: unquoted ?? value ?? true };
 		}, {});
 }
 
+
+const regex_style_tags = /<!--[^]*?-->|<style(\s[^]*?)?(?:>([^]*?)<\/style>|\/>)/gi;
+const regex_script_tags = /<!--[^]*?-->|<script(\s[^]*?)?(?:>([^]*?)<\/script>|\/>)/gi;
+
 /**
  * Calculate the updates required to process all instances of the specified tag.
  */
@@ -143,10 +152,7 @@ async function process_tag(
 	source: Source
 ): Promise<SourceUpdate> {
 	const { filename, source: markup } = source;
-	const tag_regex =
-		tag_name === 'style'
-			? /<!--[^]*?-->|<style(\s[^]*?)?(?:>([^]*?)<\/style>|\/>)/gi
-			: /<!--[^]*?-->|<script(\s[^]*?)?(?:>([^]*?)<\/script>|\/>)/gi;
+	const tag_regex = tag_name === 'style' ? regex_style_tags : regex_script_tags;
 
 	const dependencies: string[] = [];
 
@@ -190,7 +196,7 @@ async function process_markup(process: MarkupPreprocessor, source: Source) {
 			string: processed.code,
 			map: processed.map
 				? // TODO: can we use decode_sourcemap?
-				  typeof processed.map === 'string'
+				typeof processed.map === 'string'
 					? JSON.parse(processed.map)
 					: processed.map
 				: undefined,
diff --git a/src/compiler/utils/extract_svelte_ignore.ts b/src/compiler/utils/extract_svelte_ignore.ts
index 306ba872d6..30be2893a4 100644
--- a/src/compiler/utils/extract_svelte_ignore.ts
+++ b/src/compiler/utils/extract_svelte_ignore.ts
@@ -1,11 +1,12 @@
 import { TemplateNode } from '../interfaces';
 import { flatten } from './flatten';
+import { regex_whitespace } from './patterns';
 
-const pattern = /^\s*svelte-ignore\s+([\s\S]+)\s*$/m;
+const regex_svelte_ignore = /^\s*svelte-ignore\s+([\s\S]+)\s*$/m;
 
 export function extract_svelte_ignore(text: string): string[] {
-	const match = pattern.exec(text);
-	return match ? match[1].split(/[^\S]/).map(x => x.trim()).filter(Boolean) : [];
+	const match = regex_svelte_ignore.exec(text);
+	return match ? match[1].split(regex_whitespace).map(x => x.trim()).filter(Boolean) : [];
 }
 
 export function extract_svelte_ignore_from_comments<Node extends { leadingComments?: Array<{value: string}> }>(node: Node): string[] {
diff --git a/src/compiler/utils/get_code_frame.ts b/src/compiler/utils/get_code_frame.ts
index 1097f5b3d2..14ca44badb 100644
--- a/src/compiler/utils/get_code_frame.ts
+++ b/src/compiler/utils/get_code_frame.ts
@@ -1,5 +1,7 @@
+const regex_tabs = /^\t+/;
+
 function tabs_to_spaces(str: string) {
-	return str.replace(/^\t+/, match => match.split('\t').join('  '));
+	return str.replace(regex_tabs, match => match.split('\t').join('  '));
 }
 
 export default function get_code_frame(
diff --git a/src/compiler/utils/mapped_code.ts b/src/compiler/utils/mapped_code.ts
index 04fa05be9a..bf7b016fc5 100644
--- a/src/compiler/utils/mapped_code.ts
+++ b/src/compiler/utils/mapped_code.ts
@@ -61,6 +61,8 @@ function merge_tables<T>(this_table: T[], other_table: T[]): [T[], number[], boo
 	return [new_table, idx_map, val_changed, idx_changed];
 }
 
+const regex_line_token = /([^\d\w\s]|\s+)/g;
+
 export class MappedCode {
 	string: string;
 	map: DecodedSourceMap;
@@ -195,7 +197,7 @@ export class MappedCode {
 		const line_list = source.split('\n');
 		for (let line = 0; line < line_list.length; line++) {
 			map.mappings.push([]);
-			const token_list = line_list[line].split(/([^\d\w\s]|\s+)/g);
+			const token_list = line_list[line].split(regex_line_token);
 			for (let token = 0, column = 0; token < token_list.length; token++) {
 				if (token_list[token] == '') continue;
 				map.mappings[line].push([column, 0, offset.line + line, column]);
@@ -245,7 +247,7 @@ export function combine_sourcemaps(
 	if (!map.file) delete map.file; // skip optional field `file`
 
 	// When source maps are combined and the leading map is empty, sources is not set.
-	// Add the filename to the empty array in this case. 
+	// Add the filename to the empty array in this case.
 	// Further improvements to remapping may help address this as well https://github.com/ampproject/remapping/issues/116
 	if (!map.sources.length) map.sources = [filename];
 
@@ -289,6 +291,8 @@ export function apply_preprocessor_sourcemap(filename: string, svelte_map: Sourc
 	return result_map as SourceMap;
 }
 
+const regex_data_uri = /data:(?:application|text)\/json;(?:charset[:=]\S+?;)?base64,(\S*)/;
+
 // parse attached sourcemap in processed.code
 export function parse_attached_sourcemap(processed: Processed, tag_name: 'script' | 'style'): void {
 	const r_in = '[#@]\\s*sourceMappingURL\\s*=\\s*(\\S*)';
@@ -302,7 +306,7 @@ export function parse_attached_sourcemap(processed: Processed, tag_name: 'script
 	}
 	processed.code = processed.code.replace(regex, (_, match1, match2) => {
 		const map_url = (tag_name == 'script') ? (match1 || match2) : match1;
-		const map_data = (map_url.match(/data:(?:application|text)\/json;(?:charset[:=]\S+?;)?base64,(\S*)/) || [])[1];
+		const map_data = (map_url.match(regex_data_uri) || [])[1];
 		if (map_data) {
 			// sourceMappingURL is data URL
 			if (processed.map) {
diff --git a/src/compiler/utils/names.ts b/src/compiler/utils/names.ts
index 9d5b78fceb..303c6297b0 100644
--- a/src/compiler/utils/names.ts
+++ b/src/compiler/utils/names.ts
@@ -1,5 +1,6 @@
 import { isIdentifierStart, isIdentifierChar } from 'acorn';
 import full_char_code_at from './full_char_code_at';
+import { regex_starts_with_underscore, regex_ends_with_underscore } from './patterns';
 
 export const reserved = new Set([
 	'arguments',
@@ -65,10 +66,13 @@ export function is_valid(str: string): boolean {
 	return true;
 }
 
+const regex_non_standard_characters = /[^a-zA-Z0-9_]+/g;
+const regex_starts_with_number = /^[0-9]/;
+
 export function sanitize(name: string) {
 	return name
-		.replace(/[^a-zA-Z0-9_]+/g, '_')
-		.replace(/^_/, '')
-		.replace(/_$/, '')
-		.replace(/^[0-9]/, '_$&');
+		.replace(regex_non_standard_characters, '_')
+		.replace(regex_starts_with_underscore, '')
+		.replace(regex_ends_with_underscore, '')
+		.replace(regex_starts_with_number, '_$&');
 }
diff --git a/src/compiler/utils/patterns.ts b/src/compiler/utils/patterns.ts
index 071abd791f..9429d47227 100644
--- a/src/compiler/utils/patterns.ts
+++ b/src/compiler/utils/patterns.ts
@@ -1,6 +1,24 @@
-export const whitespace = /[ \t\r\n]/;
-export const start_whitespace = /^[ \t\r\n]*/;
-export const end_whitespace = /[ \t\r\n]*$/;
-export const start_newline = /^\r?\n/;
+export const regex_whitespace = /\s/;
+export const regex_whitespaces = /\s+/;
+export const regex_starts_with_whitespace = /^\s/;
+export const regex_starts_with_whitespaces = /^[ \t\r\n]*/;
+export const regex_ends_with_whitespace = /\s$/;
+export const regex_ends_with_whitespaces = /[ \t\r\n]*$/;
+export const regex_only_whitespaces = /^\s+$/;
 
-export const dimensions = /^(?:offset|client)(?:Width|Height)$/;
+export const regex_whitespace_characters = /\s/g;
+export const regex_non_whitespace_character = /\S/;
+
+export const regex_starts_with_newline = /^\r?\n/;
+export const regex_not_newline_characters = /[^\n]/g;
+
+export const regex_double_quotes = /"/g;
+
+export const regex_backslashes = /\\/g;
+
+export const regex_starts_with_underscore = /^_/;
+export const regex_ends_with_underscore = /_$/;
+
+export const regex_invalid_variable_identifier_characters = /[^a-zA-Z0-9_$]/g;
+
+export const regex_dimensions = /^(?:offset|client)(?:Width|Height)$/;
diff --git a/src/compiler/utils/trim.ts b/src/compiler/utils/trim.ts
index 05af79cc90..919a423d7f 100644
--- a/src/compiler/utils/trim.ts
+++ b/src/compiler/utils/trim.ts
@@ -1,9 +1,9 @@
-import { start_whitespace, end_whitespace } from './patterns';
+import { regex_starts_with_whitespaces, regex_ends_with_whitespaces } from './patterns';
 
 export function trim_start(str: string) {
-	return str.replace(start_whitespace, '');
+	return str.replace(regex_starts_with_whitespaces, '');
 }
 
 export function trim_end(str: string) {
-	return str.replace(end_whitespace, '');
+	return str.replace(regex_ends_with_whitespaces, '');
 }

From 739bfaec1285e9be1301f9dbc26551c79c61c2d8 Mon Sep 17 00:00:00 2001
From: Hofer Ivan <ivan.hofer@outlook.com>
Date: Thu, 13 Oct 2022 14:56:09 +0200
Subject: [PATCH 21/45] [chore] add missing types to
 `compiler/compile/render_dom` functions and variables (#7777)

* add missing types to `compiler/compile/render_dom` functions and variables

* add `DetachingOrNull`

* fis `is_head`
---
 src/compiler/compile/render_dom/Renderer.ts   |  2 +-
 src/compiler/compile/render_dom/index.ts      |  6 ++---
 src/compiler/compile/render_dom/invalidate.ts |  2 +-
 .../compile/render_dom/wrappers/EachBlock.ts  |  2 +-
 .../render_dom/wrappers/Element/Attribute.ts  |  6 ++---
 .../render_dom/wrappers/Element/Binding.ts    |  6 ++---
 .../wrappers/Element/EventHandler.ts          |  2 +-
 .../wrappers/Element/fix_attribute_casing.ts  |  2 +-
 .../render_dom/wrappers/Element/index.ts      | 24 +++++++++----------
 .../compile/render_dom/wrappers/Fragment.ts   |  2 +-
 .../compile/render_dom/wrappers/Head.ts       |  2 +-
 .../compile/render_dom/wrappers/IfBlock.ts    | 20 +++++++++-------
 .../wrappers/InlineComponent/index.ts         |  4 ++--
 .../render_dom/wrappers/RawMustacheTag.ts     |  4 ++--
 .../compile/render_dom/wrappers/Slot.ts       | 10 ++++----
 .../compile/render_dom/wrappers/Window.ts     |  2 +-
 .../render_dom/wrappers/shared/add_actions.ts |  6 ++---
 .../shared/create_debugging_comment.ts        |  2 +-
 .../wrappers/shared/get_slot_definition.ts    |  6 ++---
 .../render_dom/wrappers/shared/is_head.ts     |  6 +++--
 20 files changed, 59 insertions(+), 57 deletions(-)

diff --git a/src/compiler/compile/render_dom/Renderer.ts b/src/compiler/compile/render_dom/Renderer.ts
index 179fc0c956..c00ef95586 100644
--- a/src/compiler/compile/render_dom/Renderer.ts
+++ b/src/compiler/compile/render_dom/Renderer.ts
@@ -168,7 +168,7 @@ export default class Renderer {
 		return member;
 	}
 
-	invalidate(name: string, value?, main_execution_context: boolean = false) {
+	invalidate(name: string, value?: unknown, main_execution_context: boolean = false) {
 		return renderer_invalidate(this, name, value, main_execution_context);
 	}
 
diff --git a/src/compiler/compile/render_dom/index.ts b/src/compiler/compile/render_dom/index.ts
index c36ca2acd4..3055715b4c 100644
--- a/src/compiler/compile/render_dom/index.ts
+++ b/src/compiler/compile/render_dom/index.ts
@@ -83,7 +83,7 @@ export default function dom(
 	}
 
 	const uses_slots = component.var_lookup.has('$$slots');
-	let compute_slots;
+	let compute_slots: Node[] | undefined;
 	if (uses_slots) {
 		compute_slots = b`
 			const $$slots = @compute_slots(#slots);
@@ -396,7 +396,7 @@ export default function dom(
 
 	if (has_definition) {
 		const reactive_declarations: (Node | Node[]) = [];
-		const fixed_reactive_declarations = []; // not really 'reactive' but whatever
+		const fixed_reactive_declarations: Node[] = []; // not really 'reactive' but whatever
 
 		component.reactive_declarations.forEach(d => {
 			const dependencies = Array.from(d.dependencies);
@@ -441,7 +441,7 @@ export default function dom(
 			return b`let ${$name};`;
 		});
 
-		let unknown_props_check;
+		let unknown_props_check: Node[] | undefined;
 		if (component.compile_options.dev && !(uses_props || uses_rest)) {
 			unknown_props_check = b`
 				const writable_props = [${writable_props.map(prop => x`'${prop.export_name}'`)}];
diff --git a/src/compiler/compile/render_dom/invalidate.ts b/src/compiler/compile/render_dom/invalidate.ts
index 7eeb34a894..ffc5b6b42e 100644
--- a/src/compiler/compile/render_dom/invalidate.ts
+++ b/src/compiler/compile/render_dom/invalidate.ts
@@ -80,7 +80,7 @@ export function invalidate(renderer: Renderer, scope: Scope, node: Node, names:
 	return invalidate;
 }
 
-export function renderer_invalidate(renderer: Renderer, name: string, value?, main_execution_context: boolean = false) {
+export function renderer_invalidate(renderer: Renderer, name: string, value?: unknown, main_execution_context: boolean = false) {
 	const variable = renderer.component.var_lookup.get(name);
 
 	if (variable && (variable.subscribable && (variable.reassigned || variable.export_name))) {
diff --git a/src/compiler/compile/render_dom/wrappers/EachBlock.ts b/src/compiler/compile/render_dom/wrappers/EachBlock.ts
index d4648954ca..0c49c38028 100644
--- a/src/compiler/compile/render_dom/wrappers/EachBlock.ts
+++ b/src/compiler/compile/render_dom/wrappers/EachBlock.ts
@@ -582,7 +582,7 @@ export default class EachBlockWrapper extends Wrapper {
 
 			const start = this.block.has_update_method ? 0 : '#old_length';
 
-			let remove_old_blocks;
+			let remove_old_blocks: Node[];
 
 			if (this.block.has_outros) {
 				const out = block.get_unique_name('out');
diff --git a/src/compiler/compile/render_dom/wrappers/Element/Attribute.ts b/src/compiler/compile/render_dom/wrappers/Element/Attribute.ts
index fb604f564e..81a1898331 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/Attribute.ts
+++ b/src/compiler/compile/render_dom/wrappers/Element/Attribute.ts
@@ -130,7 +130,7 @@ export default class AttributeWrapper extends BaseAttributeWrapper {
 		const dependencies = this.get_dependencies();
 		const value = this.get_value(block);
 
-		let updater;
+		let updater: Node[];
 		const init = this.get_init(block, value);
 
 		if (is_legacy_input_type) {
@@ -258,7 +258,7 @@ export default class AttributeWrapper extends BaseAttributeWrapper {
 		return metadata;
 	}
 
-	get_value(block) {
+	get_value(block: Block) {
 		if (this.node.is_true) {
 			if (this.metadata && boolean_attributes.has(this.metadata.property_name.toLowerCase())) {
 				return x`true`;
@@ -287,7 +287,7 @@ export default class AttributeWrapper extends BaseAttributeWrapper {
 		return value;
 	}
 
-	get_class_name_text(block) {
+	get_class_name_text(block: Block) {
 		const scoped_css = this.node.chunks.some((chunk: Text) => chunk.synthetic);
 		const rendered = this.render_chunks(block);
 
diff --git a/src/compiler/compile/render_dom/wrappers/Element/Binding.ts b/src/compiler/compile/render_dom/wrappers/Element/Binding.ts
index bc218a510b..9e2ec85f0f 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/Binding.ts
+++ b/src/compiler/compile/render_dom/wrappers/Element/Binding.ts
@@ -299,8 +299,8 @@ function get_binding_group(renderer: Renderer, value: Binding, block: Block) {
 
 	for (const dep of contextual_dependencies) {
 		const context = block.bindings.get(dep);
-		let key;
-		let name;
+		let key: string;
+		let name: string;
 		if (context) {
 			key = context.object.name;
 			name = context.property.name;
@@ -364,7 +364,7 @@ function get_event_handler(
 	const contextual_dependencies = new Set<string>(binding.node.expression.contextual_dependencies);
 
 	const context = block.bindings.get(name);
-	let set_store;
+	let set_store: Node[] | undefined;
 
 	if (context) {
 		const { object, property, store, snippet } = context;
diff --git a/src/compiler/compile/render_dom/wrappers/Element/EventHandler.ts b/src/compiler/compile/render_dom/wrappers/Element/EventHandler.ts
index fc65a9aa5e..b0ed4a73d6 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/EventHandler.ts
+++ b/src/compiler/compile/render_dom/wrappers/Element/EventHandler.ts
@@ -26,7 +26,7 @@ export default class EventHandlerWrapper {
 		}
 	}
 
-	get_snippet(block) {
+	get_snippet(block: Block) {
 		const snippet = this.node.expression ? this.node.expression.manipulate(block) : block.renderer.reference(this.node.handler_name);
 
 		if (this.node.reassigned) {
diff --git a/src/compiler/compile/render_dom/wrappers/Element/fix_attribute_casing.ts b/src/compiler/compile/render_dom/wrappers/Element/fix_attribute_casing.ts
index 7044d5d7b3..0ff7c27e4b 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/fix_attribute_casing.ts
+++ b/src/compiler/compile/render_dom/wrappers/Element/fix_attribute_casing.ts
@@ -6,7 +6,7 @@ svg_attributes.forEach(name => {
 	svg_attribute_lookup.set(name.toLowerCase(), name);
 });
 
-export default function fix_attribute_casing(name) {
+export default function fix_attribute_casing(name: string) {
 	name = name.toLowerCase();
 	return svg_attribute_lookup.get(name) || name;
 }
diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts
index 01f03b5589..97984748c3 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/index.ts
+++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts
@@ -19,7 +19,7 @@ import { add_event_handler } from '../shared/add_event_handlers';
 import { add_action } from '../shared/add_actions';
 import bind_this from '../shared/bind_this';
 import { is_head } from '../shared/is_head';
-import { Identifier, ExpressionStatement, CallExpression } from 'estree';
+import { Identifier, ExpressionStatement, CallExpression, Node } from 'estree';
 import EventHandler from './EventHandler';
 import { extract_names } from 'periscopic';
 import Action from '../../../nodes/Action';
@@ -534,7 +534,7 @@ export default class ElementWrapper extends Wrapper {
 			.filter((attr) => !(attr instanceof SpreadAttributeWrapper) && !attr.property_name)
 			.map((attr) => p`${(attr as StyleAttributeWrapper | AttributeWrapper).name}: true`);
 
-		let reference;
+		let reference: string | ReturnType<typeof x>;
 		if (this.node.tag_expr.node.type === 'Literal') {
 			if (this.node.namespace) {
 				reference = `"${this.node.tag_expr.node.value}"`;
@@ -634,7 +634,7 @@ export default class ElementWrapper extends Wrapper {
 		// media bindings — awkward special case. The native timeupdate events
 		// fire too infrequently, so we need to take matters into our
 		// own hands
-		let animation_frame;
+		let animation_frame: Identifier | undefined;
 		if (binding_group.events[0] === 'timeupdate') {
 			animation_frame = block.get_unique_name(`${this.var.name}_animationframe`);
 			block.add_variable(animation_frame);
@@ -874,9 +874,7 @@ export default class ElementWrapper extends Wrapper {
 		}
 	}
 
-	add_transitions(
-		block: Block
-	) {
+	add_transitions(block: Block) {
 		const { intro, outro } = this.node;
 		if (!intro && !outro) return;
 
@@ -933,7 +931,7 @@ export default class ElementWrapper extends Wrapper {
 
 				const fn = this.renderer.reference(intro.name);
 
-				let intro_block;
+				let intro_block: Node[];
 
 				if (outro) {
 					intro_block = b`
@@ -1032,7 +1030,7 @@ export default class ElementWrapper extends Wrapper {
 			${outro && b`@add_transform(${this.var}, ${rect});`}
 		`);
 
-		let params;
+		let params: Node | ReturnType<typeof x>;
 		if (this.node.animation.expression) {
 			params = this.node.animation.expression.manipulate(block);
 
@@ -1060,8 +1058,8 @@ export default class ElementWrapper extends Wrapper {
 		const has_spread = this.node.attributes.some(attr => attr.is_spread);
 		this.node.classes.forEach(class_directive => {
 			const { expression, name } = class_directive;
-			let snippet;
-			let dependencies;
+			let snippet: Node | string;
+			let dependencies: Set<string>;
 			if (expression) {
 				snippet = expression.manipulate(block);
 				dependencies = expression.dependencies;
@@ -1105,7 +1103,7 @@ export default class ElementWrapper extends Wrapper {
 			const { name, expression, should_cache } = style_directive;
 
 			const snippet = expression.manipulate(block);
-			let cached_snippet;
+			let cached_snippet: Identifier | undefined;
 			if (should_cache) {
 				cached_snippet = block.get_unique_name(`style_${name.replace(regex_minus_signs, '_')}`);
 				block.add_variable(cached_snippet, snippet);
@@ -1136,7 +1134,7 @@ export default class ElementWrapper extends Wrapper {
 		});
 	}
 
-	add_manual_style_scoping(block) {
+	add_manual_style_scoping(block: Block) {
 		if (this.node.needs_manual_style_scoping) {
 			const updater = b`@toggle_class(${this.var}, "${this.node.component.stylesheet.id}", true);`;
 			block.chunks.hydrate.push(updater);
@@ -1151,7 +1149,7 @@ const regex_dollar_signs = /\$/g;
 function to_html(wrappers: Array<ElementWrapper | TextWrapper | MustacheTagWrapper | RawMustacheTagWrapper>, block: Block, literal: any, state: any, can_use_raw_text?: boolean) {
 	wrappers.forEach(wrapper => {
 		if (wrapper instanceof TextWrapper) {
-			// Don't add the <pre>/<textare> newline logic here because pre/textarea.innerHTML
+			// Don't add the <pre>/<textarea> newline logic here because pre/textarea.innerHTML
 			// would keep the leading newline, too, only someParent.innerHTML = '..<pre/textarea>..' won't
 
 			if ((wrapper as TextWrapper).use_space()) state.quasi.value.raw += ' ';
diff --git a/src/compiler/compile/render_dom/wrappers/Fragment.ts b/src/compiler/compile/render_dom/wrappers/Fragment.ts
index 1e3b89e97f..e2eb519393 100644
--- a/src/compiler/compile/render_dom/wrappers/Fragment.ts
+++ b/src/compiler/compile/render_dom/wrappers/Fragment.ts
@@ -65,7 +65,7 @@ export default class FragmentWrapper {
 		this.nodes = [];
 
 		let last_child: Wrapper;
-		let window_wrapper;
+		let window_wrapper: Window | undefined;
 
 		let i = nodes.length;
 		while (i--) {
diff --git a/src/compiler/compile/render_dom/wrappers/Head.ts b/src/compiler/compile/render_dom/wrappers/Head.ts
index 3869994ae4..7915604f98 100644
--- a/src/compiler/compile/render_dom/wrappers/Head.ts
+++ b/src/compiler/compile/render_dom/wrappers/Head.ts
@@ -33,7 +33,7 @@ export default class HeadWrapper extends Wrapper {
 	}
 
 	render(block: Block, _parent_node: Identifier, _parent_nodes: Identifier) {
-		let nodes;
+		let nodes: Identifier;
 		if (this.renderer.options.hydratable && this.fragment.nodes.length) {
 			nodes = block.get_unique_name('head_nodes');
 			block.chunks.claim.push(b`const ${nodes} = @head_selector('${this.node.id}', @_document.head);`);
diff --git a/src/compiler/compile/render_dom/wrappers/IfBlock.ts b/src/compiler/compile/render_dom/wrappers/IfBlock.ts
index d74ce270bf..9c4798c69c 100644
--- a/src/compiler/compile/render_dom/wrappers/IfBlock.ts
+++ b/src/compiler/compile/render_dom/wrappers/IfBlock.ts
@@ -13,6 +13,8 @@ import { Identifier, Node } from 'estree';
 import { push_array } from '../../../utils/push_array';
 import { add_const_tags, add_const_tags_context } from './shared/add_const_tags';
 
+type DetachingOrNull = 'detaching' | null;
+
 function is_else_if(node: ElseBlock) {
 	return (
 		node && node.children.length === 1 && node.children[0].type === 'IfBlock'
@@ -213,7 +215,7 @@ export default class IfBlockWrapper extends Wrapper {
 
 		const vars = { name, anchor, if_exists_condition, has_else, has_transitions };
 
-		const detaching = parent_node && !is_head(parent_node) ? null : 'detaching';
+		const detaching: DetachingOrNull = parent_node && !is_head(parent_node) ? null : 'detaching';
 
 		if (this.node.else) {
 			this.branches.forEach(branch => {
@@ -275,9 +277,9 @@ export default class IfBlockWrapper extends Wrapper {
 		block: Block,
 		parent_node: Identifier,
 		_parent_nodes: Identifier,
-		dynamic,
+		dynamic: boolean,
 		{ name, anchor, has_else, if_exists_condition, has_transitions },
-		detaching
+		detaching: DetachingOrNull
 	) {
 		const select_block_type = this.renderer.component.get_unique_name('select_block_type');
 		const current_block_type = block.get_unique_name('current_block_type');
@@ -414,9 +416,9 @@ export default class IfBlockWrapper extends Wrapper {
 		block: Block,
 		parent_node: Identifier,
 		_parent_nodes: Identifier,
-		dynamic,
+		dynamic: boolean,
 		{ name, anchor, has_else, has_transitions, if_exists_condition },
-		detaching
+		detaching: DetachingOrNull
 	) {
 		const select_block_type = this.renderer.component.get_unique_name('select_block_type');
 		const current_block_type_index = block.get_unique_name('current_block_type_index');
@@ -428,8 +430,8 @@ export default class IfBlockWrapper extends Wrapper {
 		const if_ctx = select_block_ctx ? x`${select_block_ctx}(#ctx, ${current_block_type_index})` : x`#ctx`;
 
 		const if_current_block_type_index = has_else
-			? nodes => nodes
-			: nodes => b`if (~${current_block_type_index}) { ${nodes} }`;
+			? (nodes: Node[]) => nodes
+			: (nodes: Node[]) => b`if (~${current_block_type_index}) { ${nodes} }`;
 
 		block.add_variable(current_block_type_index);
 		block.add_variable(name);
@@ -593,9 +595,9 @@ export default class IfBlockWrapper extends Wrapper {
 		block: Block,
 		parent_node: Identifier,
 		_parent_nodes: Identifier,
-		dynamic,
+		dynamic: boolean,
 		{ name, anchor, if_exists_condition, has_transitions },
-		detaching
+		detaching: DetachingOrNull
 	) {
 		const branch = this.branches[0];
 		const if_ctx = branch.get_ctx_name ? x`${branch.get_ctx_name}(#ctx)` : x`#ctx`;
diff --git a/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts b/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts
index 37416379c9..bca01fdb4c 100644
--- a/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts
+++ b/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts
@@ -139,7 +139,7 @@ export default class InlineComponentWrapper extends Wrapper {
 			child.render(block, null, x`#nodes` as Identifier);
 		});
 
-		let props;
+		let props: Identifier | undefined;
 		const name_changes = block.get_unique_name(`${name.name}_changes`);
 
 		const uses_spread = !!this.node.attributes.find(a => a.is_spread);
@@ -234,7 +234,7 @@ export default class InlineComponentWrapper extends Wrapper {
 						: null;
 					const unchanged = dependencies.size === 0;
 
-					let change_object;
+					let change_object: Node | ReturnType<typeof x>;
 					if (attr.is_spread) {
 						const value = attr.expression.manipulate(block);
 						initial_props.push(value);
diff --git a/src/compiler/compile/render_dom/wrappers/RawMustacheTag.ts b/src/compiler/compile/render_dom/wrappers/RawMustacheTag.ts
index 7810d8f099..8dc8460e1d 100644
--- a/src/compiler/compile/render_dom/wrappers/RawMustacheTag.ts
+++ b/src/compiler/compile/render_dom/wrappers/RawMustacheTag.ts
@@ -8,7 +8,7 @@ import Element from '../../nodes/Element';
 import MustacheTag from '../../nodes/MustacheTag';
 import RawMustacheTag from '../../nodes/RawMustacheTag';
 import { is_head } from './shared/is_head';
-import { Identifier } from 'estree';
+import { Identifier, Node } from 'estree';
 
 export default class RawMustacheTagWrapper extends Tag {
 	var: Identifier = { type: 'Identifier', name: 'raw' };
@@ -30,7 +30,7 @@ export default class RawMustacheTagWrapper extends Tag {
 		const can_use_innerhtml = !in_head && parent_node && !this.prev && !this.next;
 
 		if (can_use_innerhtml) {
-			const insert = content => b`${parent_node}.innerHTML = ${content};`[0];
+			const insert = (content: Node) => b`${parent_node}.innerHTML = ${content};`[0];
 
 			const { init } = this.rename_this_method(
 				block,
diff --git a/src/compiler/compile/render_dom/wrappers/Slot.ts b/src/compiler/compile/render_dom/wrappers/Slot.ts
index 5a778ba5fb..0a589e3394 100644
--- a/src/compiler/compile/render_dom/wrappers/Slot.ts
+++ b/src/compiler/compile/render_dom/wrappers/Slot.ts
@@ -9,7 +9,7 @@ import add_to_set from '../../utils/add_to_set';
 import get_slot_data from '../../utils/get_slot_data';
 import { is_reserved_keyword } from '../../utils/reserved_keywords';
 import is_dynamic from './shared/is_dynamic';
-import { Identifier, ObjectExpression } from 'estree';
+import { Identifier, ObjectExpression, Node } from 'estree';
 import create_debugging_comment from './shared/create_debugging_comment';
 
 export default class SlotWrapper extends Wrapper {
@@ -75,9 +75,9 @@ export default class SlotWrapper extends Wrapper {
 			block = this.slot_block;
 		}
 
-		let get_slot_changes_fn;
-		let get_slot_spread_changes_fn;
-		let get_slot_context_fn;
+		let get_slot_changes_fn: Identifier | 'null';
+		let get_slot_spread_changes_fn: Identifier | undefined;
+		let get_slot_context_fn: Identifier | 'null';
 
 		if (this.node.values.size > 0) {
 			get_slot_changes_fn = renderer.component.get_unique_name(`get_${sanitize(slot_name)}_slot_changes`);
@@ -176,7 +176,7 @@ export default class SlotWrapper extends Wrapper {
 		].filter(Boolean);
 		const all_dirty_condition = all_dirty_conditions.length ? all_dirty_conditions.reduce((condition1, condition2) => x`${condition1} || ${condition2}`) : null;
 
-		let slot_update;
+		let slot_update: Node[];
 		if (all_dirty_condition) {
 			const dirty = x`${all_dirty_condition} ? @get_all_dirty_from_scope(${renderer.reference('$$scope')}) : @get_slot_changes(${slot_definition}, ${renderer.reference('$$scope')}, #dirty, ${get_slot_changes_fn})`;
 
diff --git a/src/compiler/compile/render_dom/wrappers/Window.ts b/src/compiler/compile/render_dom/wrappers/Window.ts
index 3c55680446..c98af18268 100644
--- a/src/compiler/compile/render_dom/wrappers/Window.ts
+++ b/src/compiler/compile/render_dom/wrappers/Window.ts
@@ -45,7 +45,7 @@ export default class WindowWrapper extends Wrapper {
 		const { renderer } = this;
 		const { component } = renderer;
 
-		const events = {};
+		const events: Record<string, Array<{ name: string; value: string }>> = {};
 		const bindings: Record<string, string> = {};
 
 		add_actions(block, '@_window', this.node.actions);
diff --git a/src/compiler/compile/render_dom/wrappers/shared/add_actions.ts b/src/compiler/compile/render_dom/wrappers/shared/add_actions.ts
index 3b39494994..734cfea972 100644
--- a/src/compiler/compile/render_dom/wrappers/shared/add_actions.ts
+++ b/src/compiler/compile/render_dom/wrappers/shared/add_actions.ts
@@ -1,7 +1,7 @@
 import { b, x } from 'code-red';
 import Block from '../../Block';
 import Action from '../../../nodes/Action';
-import { Expression } from 'estree';
+import { Expression, Node } from 'estree';
 import is_contextual from '../../../nodes/shared/is_contextual';
 
 export default function add_actions(
@@ -16,8 +16,8 @@ const regex_invalid_variable_identifier_characters = /[^a-zA-Z0-9_$]/g;
 
 export function add_action(block: Block, target: string | Expression, action: Action) {
 	const { expression, template_scope } = action;
-	let snippet;
-	let dependencies;
+	let snippet: Node | undefined;
+	let dependencies: string[] | undefined;
 
 	if (expression) {
 		snippet = expression.manipulate(block);
diff --git a/src/compiler/compile/render_dom/wrappers/shared/create_debugging_comment.ts b/src/compiler/compile/render_dom/wrappers/shared/create_debugging_comment.ts
index 6512b42862..9e989dc49c 100644
--- a/src/compiler/compile/render_dom/wrappers/shared/create_debugging_comment.ts
+++ b/src/compiler/compile/render_dom/wrappers/shared/create_debugging_comment.ts
@@ -15,7 +15,7 @@ export default function create_debugging_comment(
 		while (source[c - 1] === '{') c -= 1;
 	}
 
-	let d;
+	let d: number;
 
 	if (node.type === 'InlineComponent' || node.type === 'Element' || node.type === 'SlotTemplate') {
 		if (node.children.length) {
diff --git a/src/compiler/compile/render_dom/wrappers/shared/get_slot_definition.ts b/src/compiler/compile/render_dom/wrappers/shared/get_slot_definition.ts
index 2279c7c845..2114096988 100644
--- a/src/compiler/compile/render_dom/wrappers/shared/get_slot_definition.ts
+++ b/src/compiler/compile/render_dom/wrappers/shared/get_slot_definition.ts
@@ -2,7 +2,7 @@ import Let from '../../../nodes/Let';
 import { x, p } from 'code-red';
 import Block from '../../Block';
 import TemplateScope from '../../../nodes/shared/TemplateScope';
-import { BinaryExpression } from 'estree';
+import { BinaryExpression, Identifier } from 'estree';
 
 export function get_slot_definition(block: Block, scope: TemplateScope, lets: Let[]) {
 	if (lets.length === 0) return { block, scope };
@@ -21,7 +21,7 @@ export function get_slot_definition(block: Block, scope: TemplateScope, lets: Le
 	const value_map = new Map();
 
 	lets.forEach(l => {
-		let value;
+		let value: Identifier;
 		if (l.names.length > 1) {
 			// more than one, probably destructuring
 			const unique_name = block.get_unique_name(l.names.join('_')).name;
@@ -86,7 +86,7 @@ export function get_slot_definition(block: Block, scope: TemplateScope, lets: Le
 					elements[g] = grouped[g]
 						? grouped[g]
 							.map(({ name, n }) => x`${name} ? ${1 << n} : 0`)
-							.reduce((lhs, rhs) => x`${lhs} | ${rhs}`)
+							.reduce((lhs: ReturnType<typeof x>, rhs: ReturnType<typeof x>) => x`${lhs} | ${rhs}`)
 						: x`0`;
 				}
 
diff --git a/src/compiler/compile/render_dom/wrappers/shared/is_head.ts b/src/compiler/compile/render_dom/wrappers/shared/is_head.ts
index 36bf571aad..da34274d5b 100644
--- a/src/compiler/compile/render_dom/wrappers/shared/is_head.ts
+++ b/src/compiler/compile/render_dom/wrappers/shared/is_head.ts
@@ -1,3 +1,5 @@
-export function is_head(node) {
-	return node && node.type === 'MemberExpression' && node.object.name === '@_document' && node.property.name === 'head';
+import { Node } from 'estree';
+
+export function is_head(node: Node) {
+	return node && node.type === 'MemberExpression' && node.object['name'] === '@_document' && node.property['name'] === 'head';
 }

From 1ca83c20506d7b4c97a921d98c21fc564f8efa16 Mon Sep 17 00:00:00 2001
From: Don Alfons <donalfonsnnisnoni@gmail.com>
Date: Thu, 13 Oct 2022 21:01:58 +0800
Subject: [PATCH 22/45] [docs] Improve grammar (#7923)

* [docs] Improve grammar

* revert spelling changes

Co-authored-by: tanhauhau <lhtan93@gmail.com>
---
 site/content/docs/03-template-syntax.md | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/site/content/docs/03-template-syntax.md b/site/content/docs/03-template-syntax.md
index 24b6111fae..5d84827494 100644
--- a/site/content/docs/03-template-syntax.md
+++ b/site/content/docs/03-template-syntax.md
@@ -158,7 +158,7 @@ You can use HTML comments inside components.
 
 ---
 
-Comments beginning with `svelte-ignore` disable warnings for the next block of markup. Usually these are accessibility warnings; make sure that you're disabling them for a good reason.
+Comments beginning with `svelte-ignore` disable warnings for the next block of markup. Usually, these are accessibility warnings; make sure that you're disabling them for a good reason.
 
 ```sv
 <!-- svelte-ignore a11y-autofocus -->
@@ -593,7 +593,7 @@ The simplest bindings reflect the value of a property, such as `input.value`.
 
 ---
 
-If the name matches the value, you can use a shorthand.
+If the name matches the value, you can use shorthand.
 
 ```sv
 <!-- These are equivalent -->
@@ -750,7 +750,7 @@ Videos additionally have readonly `videoWidth` and `videoHeight` bindings.
 
 ---
 
-Block-level elements have 4 readonly bindings, measured using a technique similar to [this one](http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/):
+Block-level elements have 4 read-only bindings, measured using a technique similar to [this one](http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/):
 
 * `clientWidth`
 * `clientHeight`
@@ -981,7 +981,7 @@ transition = (node: HTMLElement, params: any) => {
 
 A transition is triggered by an element entering or leaving the DOM as a result of a state change.
 
-When a block is transitioning out, all elements inside the block, including those that do not have their own transitions, are kept in the DOM until every transition in the block has completed.
+When a block is transitioning out, all elements inside the block, including those that do not have their own transitions, are kept in the DOM until every transition in the block has been completed.
 
 The `transition:` directive indicates a *bidirectional* transition, which means it can be smoothly reversed while the transition is in progress.
 
@@ -1241,7 +1241,7 @@ As with actions and transitions, animations can have parameters.
 
 ---
 
-Animations can use custom functions that provide the `node`, an `animation` object and any `parameters` as arguments. The `animation` parameter is an object containing `from` and `to` properties each containing a [DOMRect](https://developer.mozilla.org/en-US/docs/Web/API/DOMRect#Properties) describing the geometry of the element in its `start` and `end` positions. The `from` property is the DOMRect of the element in its starting position, the `to` property is the DOMRect of the element in its final position after the list has been reordered and the DOM updated.
+Animations can use custom functions that provide the `node`, an `animation` object and any `parameters` as arguments. The `animation` parameter is an object containing `from` and `to` properties each containing a [DOMRect](https://developer.mozilla.org/en-US/docs/Web/API/DOMRect#Properties) describing the geometry of the element in its `start` and `end` positions. The `from` property is the DOMRect of the element in its starting position, and the `to` property is the DOMRect of the element in its final position after the list has been reordered and the DOM updated.
 
 If the returned object has a `css` method, Svelte will create a CSS animation that plays on the element.
 
@@ -1390,7 +1390,7 @@ For SVG namespace, the example above desugars into using `<g>` instead:
 
 ---
 
-Svelte's CSS Variables support allows for easily themable components:
+Svelte's CSS Variables support allows for easily themeable components:
 
 ```sv
 <!-- Slider.svelte -->
@@ -1654,7 +1654,7 @@ If `this` is falsy, no component is rendered.
 
 The `<svelte:element>` element lets you render an element of a dynamically specified type. This is useful for example when displaying rich text content from a CMS. Any properties and event listeners present will be applied to the element.
 
-The only supported binding is `bind:this`, since the element type specific bindings that Svelte does at build time (e.g. `bind:value` for input elements) does not work with a dynamic tag type.
+The only supported binding is `bind:this`, since the element type specific bindings that Svelte does at build time (e.g. `bind:value` for input elements) do not work with a dynamic tag type.
 
 If `this` has a nullish value, the element and its children will not be rendered.
 

From ff6e1c39d0ff783a06a2303328a7360d2206b778 Mon Sep 17 00:00:00 2001
From: Siarhei <siarhei.krukau@gmail.com>
Date: Thu, 13 Oct 2022 15:51:06 +0200
Subject: [PATCH 23/45] [chore] Bump actions' versions (#7921)

---
 .github/workflows/ci.yml | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 4f5e161f89..548b8492ca 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -11,8 +11,8 @@ jobs:
         node-version: [8, 10, 12, 14, 16]
         os: [ubuntu-latest, windows-latest, macOS-latest]
     steps:
-      - uses: actions/checkout@v1
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
           cache: npm
@@ -24,8 +24,8 @@ jobs:
     runs-on: ubuntu-latest
     timeout-minutes: 5
     steps:
-      - uses: actions/checkout@v1
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
           cache: npm
       - run: 'npm i && npm run lint'
@@ -36,8 +36,8 @@ jobs:
       matrix:
         os: [ubuntu-latest, windows-latest, macOS-latest]
     steps:
-      - uses: actions/checkout@v1
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
           cache: npm
       - run: 'npm i && npm run test:unit'

From bee1851faa9c2a8b39099299a7929ebfe9c25494 Mon Sep 17 00:00:00 2001
From: gtmnayan <50981692+gtm-nayan@users.noreply.github.com>
Date: Thu, 13 Oct 2022 19:37:06 +0545
Subject: [PATCH 24/45] [feat] `|important` modifier for style directive
 (#7489)

* important modifier for style directive

* docs

* Exclude third param if false
third param for set_style is optional

* Remove unused test

Runtime test doesn't work because of weird behaviour of computed style
the puppeteer test should cover it

* remove unnecessary test

Co-authored-by: tanhauhau <lhtan93@gmail.com>
---
 site/content/docs/03-template-syntax.md       |  3 ++
 src/compiler/compile/compiler_errors.ts       |  6 ++-
 src/compiler/compile/nodes/StyleDirective.ts  | 27 +++++++++-
 .../render_dom/wrappers/Element/index.ts      |  4 +-
 .../compile/render_ssr/handlers/Element.ts    |  5 +-
 src/compiler/parse/state/tag.ts               |  1 +
 .../input.svelte                              |  1 +
 .../output.json                               | 50 +++++++++++++++++++
 .../output.json                               |  3 +-
 .../output.json                               |  9 +++-
 .../attribute-style-directive/output.json     |  1 +
 .../_config.js                                | 22 ++++++++
 .../main.svelte                               | 12 +++++
 .../errors.json                               | 15 ++++++
 .../input.svelte                              |  1 +
 15 files changed, 153 insertions(+), 7 deletions(-)
 create mode 100644 test/parser/samples/attribute-style-directive-modifiers/input.svelte
 create mode 100644 test/parser/samples/attribute-style-directive-modifiers/output.json
 create mode 100644 test/runtime-puppeteer/samples/inline-style-directive-important/_config.js
 create mode 100644 test/runtime-puppeteer/samples/inline-style-directive-important/main.svelte
 create mode 100644 test/validator/samples/style-directive-modifiers-invalid/errors.json
 create mode 100644 test/validator/samples/style-directive-modifiers-invalid/input.svelte

diff --git a/site/content/docs/03-template-syntax.md b/site/content/docs/03-template-syntax.md
index 5d84827494..9afe399469 100644
--- a/site/content/docs/03-template-syntax.md
+++ b/site/content/docs/03-template-syntax.md
@@ -874,6 +874,9 @@ The `style:` directive provides a shorthand for setting multiple styles on an el
 
 <!-- Multiple styles can be included -->
 <div style:color style:width="12rem" style:background-color={darkMode ? "black" : "white"}>...</div>
+
+<!-- Styles can be marked as important -->
+<div style:color|important="red">...</div>
 ```
 
 ---
diff --git a/src/compiler/compile/compiler_errors.ts b/src/compiler/compile/compiler_errors.ts
index c1a7d8bc5c..e4d4ffddad 100644
--- a/src/compiler/compile/compiler_errors.ts
+++ b/src/compiler/compile/compiler_errors.ts
@@ -281,5 +281,9 @@ export default {
 	invalid_component_style_directive: {
 		code: 'invalid-component-style-directive',
 		message: 'Style directives cannot be used on components'
-	}
+	},
+	invalid_style_directive_modifier: (valid: string) => ({
+		code: 'invalid-style-directive-modifier',
+		message: `Valid modifiers for style directives are: ${valid}`
+	})
 };
diff --git a/src/compiler/compile/nodes/StyleDirective.ts b/src/compiler/compile/nodes/StyleDirective.ts
index ea340cf2dc..01af8cc62e 100644
--- a/src/compiler/compile/nodes/StyleDirective.ts
+++ b/src/compiler/compile/nodes/StyleDirective.ts
@@ -1,20 +1,42 @@
 import { TemplateNode } from '../../interfaces';
+import list from '../../utils/list';
+import compiler_errors from '../compiler_errors';
 import Component from '../Component';
 import { nodes_to_template_literal } from '../utils/nodes_to_template_literal';
 import Expression from './shared/Expression';
 import Node from './shared/Node';
 import TemplateScope from './shared/TemplateScope';
 
+const valid_modifiers = new Set(['important']);
+
 export default class StyleDirective extends Node {
 	type: 'StyleDirective';
 	name: string;
+	modifiers: Set<string>;
 	expression: Expression;
 	should_cache: boolean;
 
-	constructor(component: Component, parent: Node, scope: TemplateScope, info: TemplateNode) {
+	constructor(
+		component: Component,
+		parent: Node,
+		scope: TemplateScope,
+		info: TemplateNode
+	) {
 		super(component, parent, scope, info);
 
 		this.name = info.name;
+		this.modifiers = new Set(info.modifiers);
+
+		for (const modifier of this.modifiers) {
+			if (!valid_modifiers.has(modifier)) {
+				component.error(
+					this,
+					compiler_errors.invalid_style_directive_modifier(
+						list([...valid_modifiers])
+					)
+				);
+			}
+		}
 
 		// Convert the value array to an expression so it's easier to handle
 		// the StyleDirective going forward.
@@ -34,6 +56,9 @@ export default class StyleDirective extends Node {
 			this.expression = new Expression(component, this, scope, raw_expression);
 			this.should_cache = raw_expression.expressions.length > 0;
 		}
+	}
 
+	get important() {
+		return this.modifiers.has('important');
 	}
 }
diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts
index 97984748c3..8d0429879e 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/index.ts
+++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts
@@ -1100,7 +1100,7 @@ export default class ElementWrapper extends Wrapper {
 	add_styles(block: Block) {
 		const has_spread = this.node.attributes.some(attr => attr.is_spread);
 		this.node.styles.forEach((style_directive) => {
-			const { name, expression, should_cache } = style_directive;
+			const { name, expression, should_cache, important } = style_directive;
 
 			const snippet = expression.manipulate(block);
 			let cached_snippet: Identifier | undefined;
@@ -1109,7 +1109,7 @@ export default class ElementWrapper extends Wrapper {
 				block.add_variable(cached_snippet, snippet);
 			}
 
-			const updater = b`@set_style(${this.var}, "${name}", ${should_cache ? cached_snippet : snippet}, false)`;
+			const updater = b`@set_style(${this.var}, "${name}", ${should_cache ? cached_snippet : snippet}, ${important ? 1 : null})`;
 
 			block.chunks.hydrate.push(updater);
 
diff --git a/src/compiler/compile/render_ssr/handlers/Element.ts b/src/compiler/compile/render_ssr/handlers/Element.ts
index 081988b567..f1dd86dd2b 100644
--- a/src/compiler/compile/render_ssr/handlers/Element.ts
+++ b/src/compiler/compile/render_ssr/handlers/Element.ts
@@ -44,7 +44,10 @@ export default function (node: Element, renderer: Renderer, options: RenderOptio
 		class_expression_list.reduce((lhs, rhs) => x`${lhs} + ' ' + ${rhs}`);
 
 	const style_expression_list = node.styles.map(style_directive => {
-		const { name, expression: { node: expression } } = style_directive;
+		let { name, important, expression: { node: expression } } = style_directive;
+		if (important) {
+			expression = x`${expression} + ' !important'`;
+		}
 		return p`"${name}": ${expression}`;
 	});
 
diff --git a/src/compiler/parse/state/tag.ts b/src/compiler/parse/state/tag.ts
index bf50c6c774..9d1bf5e5c2 100644
--- a/src/compiler/parse/state/tag.ts
+++ b/src/compiler/parse/state/tag.ts
@@ -395,6 +395,7 @@ function read_attribute(parser: Parser, unique_names: Set<string>) {
 				end,
 				type,
 				name: directive_name,
+				modifiers,
 				value
 			};
 		}
diff --git a/test/parser/samples/attribute-style-directive-modifiers/input.svelte b/test/parser/samples/attribute-style-directive-modifiers/input.svelte
new file mode 100644
index 0000000000..1ec740107d
--- /dev/null
+++ b/test/parser/samples/attribute-style-directive-modifiers/input.svelte
@@ -0,0 +1 @@
+<div style:color|important={myColor}></div>
\ No newline at end of file
diff --git a/test/parser/samples/attribute-style-directive-modifiers/output.json b/test/parser/samples/attribute-style-directive-modifiers/output.json
new file mode 100644
index 0000000000..3c607fb5ea
--- /dev/null
+++ b/test/parser/samples/attribute-style-directive-modifiers/output.json
@@ -0,0 +1,50 @@
+{
+	"html": {
+		"start": 0,
+		"end": 43,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 43,
+				"type": "Element",
+				"name": "div",
+				"attributes": [
+					{
+						"start": 5,
+						"end": 36,
+						"type": "StyleDirective",
+						"name": "color",
+						"modifiers": [
+							"important"
+						],
+						"value": [
+							{
+								"start": 27,
+								"end": 36,
+								"type": "MustacheTag",
+								"expression": {
+									"type": "Identifier",
+									"start": 28,
+									"end": 35,
+									"loc": {
+										"start": {
+											"line": 1,
+											"column": 28
+										},
+										"end": {
+											"line": 1,
+											"column": 35
+										}
+									},
+									"name": "myColor"
+								}
+							}
+						]
+					}
+				],
+				"children": []
+			}
+		]
+	}
+}
\ No newline at end of file
diff --git a/test/parser/samples/attribute-style-directive-shorthand/output.json b/test/parser/samples/attribute-style-directive-shorthand/output.json
index ac658408e6..80fb4f741f 100644
--- a/test/parser/samples/attribute-style-directive-shorthand/output.json
+++ b/test/parser/samples/attribute-style-directive-shorthand/output.json
@@ -15,6 +15,7 @@
 						"end": 16,
 						"type": "StyleDirective",
 						"name": "color",
+						"modifiers": [],
 						"value": true
 					}
 				],
@@ -22,4 +23,4 @@
 			}
 		]
 	}
-}
\ No newline at end of file
+}
diff --git a/test/parser/samples/attribute-style-directive-string/output.json b/test/parser/samples/attribute-style-directive-string/output.json
index e81e7be3c9..505e9333e1 100644
--- a/test/parser/samples/attribute-style-directive-string/output.json
+++ b/test/parser/samples/attribute-style-directive-string/output.json
@@ -15,6 +15,7 @@
 						"end": 22,
 						"type": "StyleDirective",
 						"name": "color",
+						"modifiers": [],
 						"value": [
 							{
 								"start": 18,
@@ -45,6 +46,7 @@
 						"start": 35,
 						"end": 52,
 						"type": "StyleDirective",
+						"modifiers": [],
 						"name": "color",
 						"value": [
 							{
@@ -77,6 +79,7 @@
 						"end": 80,
 						"type": "StyleDirective",
 						"name": "color",
+						"modifiers": [],
 						"value": [
 							{
 								"start": 77,
@@ -108,6 +111,7 @@
 						"end": 120,
 						"type": "StyleDirective",
 						"name": "color",
+						"modifiers": [],
 						"value": [
 							{
 								"start": 106,
@@ -160,6 +164,7 @@
 						"end": 160,
 						"type": "StyleDirective",
 						"name": "color",
+						"modifiers": [],
 						"value": [
 							{
 								"start": 146,
@@ -212,6 +217,7 @@
 						"end": 198,
 						"type": "StyleDirective",
 						"name": "color",
+						"modifiers": [],
 						"value": [
 							{
 								"start": 185,
@@ -264,6 +270,7 @@
 						"end": 245,
 						"type": "StyleDirective",
 						"name": "color",
+						"modifiers": [],
 						"value": [
 							{
 								"start": 223,
@@ -352,4 +359,4 @@
 			}
 		]
 	}
-}
\ No newline at end of file
+}
diff --git a/test/parser/samples/attribute-style-directive/output.json b/test/parser/samples/attribute-style-directive/output.json
index f36ce6b01e..d80d61bddb 100644
--- a/test/parser/samples/attribute-style-directive/output.json
+++ b/test/parser/samples/attribute-style-directive/output.json
@@ -15,6 +15,7 @@
 						"end": 26,
 						"type": "StyleDirective",
 						"name": "color",
+						"modifiers": [],
 						"value": [
 							{
 								"start": 17,
diff --git a/test/runtime-puppeteer/samples/inline-style-directive-important/_config.js b/test/runtime-puppeteer/samples/inline-style-directive-important/_config.js
new file mode 100644
index 0000000000..d6323b82e3
--- /dev/null
+++ b/test/runtime-puppeteer/samples/inline-style-directive-important/_config.js
@@ -0,0 +1,22 @@
+export default {
+	html: `
+		<h1 class="svelte-szzkfu" style="background-color: red;">hello</h1>
+		<h1 class="svelte-szzkfu" style="background-color: red !important;">hello</h1>
+	`,
+
+	ssrHtml: `
+		<h1 class="svelte-szzkfu" style="background-color: red;">hello</h1>
+		<h1 class="svelte-szzkfu" style="background-color: red !important;">hello</h1>
+	`,
+	
+	test({ assert, target, window, component }) {
+		const h1s = target.querySelectorAll('h1');
+
+		assert.equal(window.getComputedStyle(h1s[0])['backgroundColor'], 'rgb(0, 0, 255)');
+		assert.equal(window.getComputedStyle(h1s[1])['backgroundColor'], 'rgb(255, 0, 0)');
+
+		component.color = 'yellow';
+		assert.equal(window.getComputedStyle(h1s[0])['backgroundColor'], 'rgb(0, 0, 255)');
+		assert.equal(window.getComputedStyle(h1s[1])['backgroundColor'], 'rgb(255, 255, 0)');
+	}
+};
diff --git a/test/runtime-puppeteer/samples/inline-style-directive-important/main.svelte b/test/runtime-puppeteer/samples/inline-style-directive-important/main.svelte
new file mode 100644
index 0000000000..e869a9a473
--- /dev/null
+++ b/test/runtime-puppeteer/samples/inline-style-directive-important/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	export let color = 'red'
+</script>
+
+<h1 style:background-color={color} >hello</h1>
+<h1 style:background-color|important="{color}">hello</h1>
+
+<style>
+	h1 {
+		background-color: blue !important;
+	}
+</style> 
\ No newline at end of file
diff --git a/test/validator/samples/style-directive-modifiers-invalid/errors.json b/test/validator/samples/style-directive-modifiers-invalid/errors.json
new file mode 100644
index 0000000000..245dfc63a8
--- /dev/null
+++ b/test/validator/samples/style-directive-modifiers-invalid/errors.json
@@ -0,0 +1,15 @@
+[{
+	"message": "Valid modifiers for style directives are: important",
+	"code": "invalid-style-directive-modifier",
+	"start": {
+		"line": 1,
+		"column": 8,
+		"character": 8
+	},
+	"end": {
+		"line": 1,
+		"column": 29,
+		"character": 29
+	},
+	"pos": 8
+}]
diff --git a/test/validator/samples/style-directive-modifiers-invalid/input.svelte b/test/validator/samples/style-directive-modifiers-invalid/input.svelte
new file mode 100644
index 0000000000..5fd7b1b1b5
--- /dev/null
+++ b/test/validator/samples/style-directive-modifiers-invalid/input.svelte
@@ -0,0 +1 @@
+<button style:color|bad='red'></button>
\ No newline at end of file

From ea9ee3911f06f76f7c31a0f72aab737adf674f6f Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Thu, 13 Oct 2022 21:53:23 +0800
Subject: [PATCH 25/45] Update CHANGELOG.md

---
 CHANGELOG.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index cbf22201f6..2c9afd52e3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Svelte changelog
 
+## Unreleased
+
+* Support `|important` modifier to style directive ([#7489](https://github.com/sveltejs/svelte/pull/7489))
+
 ## 3.51.0
 
 * Add a11y warnings:

From c7c6c05c7f891a864f888f14b5770c467970feac Mon Sep 17 00:00:00 2001
From: Joffrey LEVEUGLE <joffrey.leveugle@gmail.com>
Date: Thu, 13 Oct 2022 15:58:10 +0200
Subject: [PATCH 26/45] [feat] add security warning for anchor element (rel
 attribute) (#6289)

* add security warning for anchor element (rel attribute)

* manage more case for security warnings on anchor (aplocks, false positive ...)

* remove noopener checks as noreferrer imples noopener

Co-authored-by: tanhauhau <lhtan93@gmail.com>
---
 src/compiler/compile/nodes/Element.ts         |  20 ++
 .../input.svelte                              |  31 ++
 .../warnings.json                             | 272 ++++++++++++++++++
 3 files changed, 323 insertions(+)
 create mode 100644 test/validator/samples/security-anchor-rel-noreferrer/input.svelte
 create mode 100644 test/validator/samples/security-anchor-rel-noreferrer/warnings.json

diff --git a/src/compiler/compile/nodes/Element.ts b/src/compiler/compile/nodes/Element.ts
index d5fad18f54..298276c437 100644
--- a/src/compiler/compile/nodes/Element.ts
+++ b/src/compiler/compile/nodes/Element.ts
@@ -613,6 +613,26 @@ export default class Element extends Node {
 			const href_attribute = attribute_map.get('href') || attribute_map.get('xlink:href');
 			const id_attribute = attribute_map.get('id');
 			const name_attribute = attribute_map.get('name');
+			const target_attribute = attribute_map.get('target');
+
+			if (target_attribute && target_attribute.get_static_value() === '_blank' && href_attribute) {
+				const href_static_value = href_attribute.get_static_value() ? href_attribute.get_static_value().toLowerCase() : null;
+
+				if (href_static_value === null || href_static_value.match(/^(https?:)?\/\//i)) {
+					const rel = attribute_map.get('rel');
+					const rel_values = rel ? rel.get_static_value().split(' ') : [];
+					const expected_values = ['noreferrer'];
+
+					expected_values.forEach(expected_value => {
+						if (!rel || rel && rel_values.indexOf(expected_value) < 0) {
+							component.warn(this, {
+								code: `security-anchor-rel-${expected_value}`,
+								message: `Security: Anchor with "target=_blank" should have rel attribute containing the value "${expected_value}"`
+							});
+						}
+					});
+				}
+			}
 
 			if (href_attribute) {
 				const href_value = href_attribute.get_static_value();
diff --git a/test/validator/samples/security-anchor-rel-noreferrer/input.svelte b/test/validator/samples/security-anchor-rel-noreferrer/input.svelte
new file mode 100644
index 0000000000..de52d5a596
--- /dev/null
+++ b/test/validator/samples/security-anchor-rel-noreferrer/input.svelte
@@ -0,0 +1,31 @@
+<a href="https://svelte.dev" target="_blank">svelte website (invalid)</a>
+<a href="https://svelte.dev" target="_blank" rel="">svelte website (invalid)</a>
+<a href="https://svelte.dev" target="_blank" rel="noopener">svelte website (invalid)</a>
+<a href={'https://svelte.dev'} target="_blank">svelte website (invalid)</a>
+<a href={'https://svelte.dev'} target="_blank" rel="">svelte website (invalid)</a>
+<a href={'https://svelte.dev'} target="_blank" rel="noopener">svelte website (invalid)</a>
+<a href="//svelte.dev" target="_blank">svelte website (invalid)</a>
+<a href="//svelte.dev" target="_blank" rel="">svelte website (invalid)</a>
+<a href="//svelte.dev" target="_blank" rel="noopener">svelte website (invalid)</a>
+<a href="http://svelte.dev" target="_blank">svelte website (invalid)</a>
+<a href="http://svelte.dev" target="_blank" rel="">svelte website (invalid)</a>
+<a href="http://svelte.dev" target="_blank" rel="noopener">svelte website (invalid)</a>
+<a href="HTTP://svelte.dev" target="_blank">svelte website (invalid)</a>
+<a href="HTTP://svelte.dev" target="_blank" rel="">svelte website (invalid)</a>
+<a href="HTTP://svelte.dev" target="_blank" rel="noopener">svelte website (invalid)</a>
+<a href={'HTTPS://svelte.dev'} target="_blank">svelte website (invalid)</a>
+<a href={'HTTPS://svelte.dev'} target="_blank" rel="">svelte website (invalid)</a>
+<a href={'HTTPS://svelte.dev'} target="_blank" rel="noopener">svelte website (invalid)</a>
+<a href="same-host" target="_blank">Same host (valid)</a>
+<a href="same-host" target="_blank" rel="">Same host (valid)</a>
+<a href="same-host" target="_blank" rel="noopener">Same host (valid)</a>
+<a href="http://svelte.dev" target="_blank" rel="noreferrer">svelte website (valid)</a>
+<a href="http://svelte.dev" target="_blank" rel="noreferrer noopener">svelte website (valid)</a>
+<a href="HTTP://svelte.dev" target="_blank" rel="noreferrer">svelte website (valid)</a>
+<a href="HTTP://svelte.dev" target="_blank" rel="noreferrer noopener">svelte website (valid)</a>
+<a href="https://svelte.dev" target="_blank" rel="noreferrer">svelte website (valid)</a>
+<a href="https://svelte.dev" target="_blank" rel="noreferrer noopener">svelte website (valid)</a>
+<a href="HTTPS://svelte.dev" target="_blank" rel="noreferrer">svelte website (valid)</a>
+<a href="HTTPS://svelte.dev" target="_blank" rel="noreferrer noopener">svelte website (valid)</a>
+<a href="//svelte.dev" target="_blank" rel="noreferrer">svelte website (valid)</a>
+<a href="//svelte.dev" target="_blank" rel="noreferrer noopener">svelte website (valid)</a>
\ No newline at end of file
diff --git a/test/validator/samples/security-anchor-rel-noreferrer/warnings.json b/test/validator/samples/security-anchor-rel-noreferrer/warnings.json
new file mode 100644
index 0000000000..24c10fb763
--- /dev/null
+++ b/test/validator/samples/security-anchor-rel-noreferrer/warnings.json
@@ -0,0 +1,272 @@
+[
+	{
+		"code": "security-anchor-rel-noreferrer",
+		"message": "Security: Anchor with \"target=_blank\" should have rel attribute containing the value \"noreferrer\"",
+		"end": {
+			"character": 73,
+			"column": 73,
+			"line": 1
+		},
+		"pos": 0,
+		"start": {
+			"character": 0,
+			"column": 0,
+			"line": 1
+		}
+	},
+	{
+		"code": "security-anchor-rel-noreferrer",
+		"message": "Security: Anchor with \"target=_blank\" should have rel attribute containing the value \"noreferrer\"",
+		"end": {
+			"character": 154,
+			"column": 80,
+			"line": 2
+		},
+		"pos": 74,
+		"start": {
+			"character": 74,
+			"column": 0,
+			"line": 2
+		}
+	},
+	{
+		"code": "security-anchor-rel-noreferrer",
+		"message": "Security: Anchor with \"target=_blank\" should have rel attribute containing the value \"noreferrer\"",
+		"end": {
+			"character": 243,
+			"column": 88,
+			"line": 3
+		},
+		"pos": 155,
+		"start": {
+			"character": 155,
+			"column": 0,
+			"line": 3
+		}
+	},
+	{
+		"code": "security-anchor-rel-noreferrer",
+		"message": "Security: Anchor with \"target=_blank\" should have rel attribute containing the value \"noreferrer\"",
+		"end": {
+			"character": 319,
+			"column": 75,
+			"line": 4
+		},
+		"pos": 244,
+		"start": {
+			"character": 244,
+			"column": 0,
+			"line": 4
+		}
+	},
+	{
+		"code": "security-anchor-rel-noreferrer",
+		"message": "Security: Anchor with \"target=_blank\" should have rel attribute containing the value \"noreferrer\"",
+		"end": {
+			"character": 402,
+			"column": 82,
+			"line": 5
+		},
+		"pos": 320,
+		"start": {
+			"character": 320,
+			"column": 0,
+			"line": 5
+		}
+	},
+	{
+		"code": "security-anchor-rel-noreferrer",
+		"message": "Security: Anchor with \"target=_blank\" should have rel attribute containing the value \"noreferrer\"",
+		"end": {
+			"character": 493,
+			"column": 90,
+			"line": 6
+		},
+		"pos": 403,
+		"start": {
+			"character": 403,
+			"column": 0,
+			"line": 6
+		}
+	},
+	{
+		"code": "security-anchor-rel-noreferrer",
+		"message": "Security: Anchor with \"target=_blank\" should have rel attribute containing the value \"noreferrer\"",
+		"end": {
+			"character": 561,
+			"column": 67,
+			"line": 7
+		},
+		"pos": 494,
+		"start": {
+			"character": 494,
+			"column": 0,
+			"line": 7
+		}
+	},
+	{
+		"code": "security-anchor-rel-noreferrer",
+		"message": "Security: Anchor with \"target=_blank\" should have rel attribute containing the value \"noreferrer\"",
+		"end": {
+			"character": 636,
+			"column": 74,
+			"line": 8
+		},
+		"pos": 562,
+		"start": {
+			"character": 562,
+			"column": 0,
+			"line": 8
+		}
+	},
+	{
+		"code": "security-anchor-rel-noreferrer",
+		"message": "Security: Anchor with \"target=_blank\" should have rel attribute containing the value \"noreferrer\"",
+		"end": {
+			"character": 719,
+			"column": 82,
+			"line": 9
+		},
+		"pos": 637,
+		"start": {
+			"character": 637,
+			"column": 0,
+			"line": 9
+		}
+	},
+	{
+		"code": "security-anchor-rel-noreferrer",
+		"message": "Security: Anchor with \"target=_blank\" should have rel attribute containing the value \"noreferrer\"",
+		"end": {
+			"character": 792,
+			"column": 72,
+			"line": 10
+		},
+		"pos": 720,
+		"start": {
+			"character": 720,
+			"column": 0,
+			"line": 10
+		}
+	},
+	{
+		"code": "security-anchor-rel-noreferrer",
+		"message": "Security: Anchor with \"target=_blank\" should have rel attribute containing the value \"noreferrer\"",
+		"end": {
+			"character": 872,
+			"column": 79,
+			"line": 11
+		},
+		"pos": 793,
+		"start": {
+			"character": 793,
+			"column": 0,
+			"line": 11
+		}
+	},
+	{
+		"code": "security-anchor-rel-noreferrer",
+		"message": "Security: Anchor with \"target=_blank\" should have rel attribute containing the value \"noreferrer\"",
+		"end": {
+			"character": 960,
+			"column": 87,
+			"line": 12
+		},
+		"pos": 873,
+		"start": {
+			"character": 873,
+			"column": 0,
+			"line": 12
+		}
+	},
+	{
+		"code": "security-anchor-rel-noreferrer",
+		"message": "Security: Anchor with \"target=_blank\" should have rel attribute containing the value \"noreferrer\"",
+		"end": {
+			"character": 1033,
+			"column": 72,
+			"line": 13
+		},
+		"pos": 961,
+		"start": {
+			"character": 961,
+			"column": 0,
+			"line": 13
+		}
+	},
+	{
+		"code": "security-anchor-rel-noreferrer",
+		"message": "Security: Anchor with \"target=_blank\" should have rel attribute containing the value \"noreferrer\"",
+		"end": {
+			"character": 1113,
+			"column": 79,
+			"line": 14
+		},
+		"pos": 1034,
+		"start": {
+			"character": 1034,
+			"column": 0,
+			"line": 14
+		}
+	},
+	{
+		"code": "security-anchor-rel-noreferrer",
+		"message": "Security: Anchor with \"target=_blank\" should have rel attribute containing the value \"noreferrer\"",
+		"end": {
+			"character": 1201,
+			"column": 87,
+			"line": 15
+		},
+		"pos": 1114,
+		"start": {
+			"character": 1114,
+			"column": 0,
+			"line": 15
+		}
+	},
+	{
+		"code": "security-anchor-rel-noreferrer",
+		"message": "Security: Anchor with \"target=_blank\" should have rel attribute containing the value \"noreferrer\"",
+		"end": {
+			"character": 1277,
+			"column": 75,
+			"line": 16
+		},
+		"pos": 1202,
+		"start": {
+			"character": 1202,
+			"column": 0,
+			"line": 16
+		}
+	},
+	{
+		"code": "security-anchor-rel-noreferrer",
+		"message": "Security: Anchor with \"target=_blank\" should have rel attribute containing the value \"noreferrer\"",
+		"end": {
+			"character": 1360,
+			"column": 82,
+			"line": 17
+		},
+		"pos": 1278,
+		"start": {
+			"character": 1278,
+			"column": 0,
+			"line": 17
+		}
+	},
+	{
+		"code": "security-anchor-rel-noreferrer",
+		"message": "Security: Anchor with \"target=_blank\" should have rel attribute containing the value \"noreferrer\"",
+		"end": {
+			"character": 1451,
+			"column": 90,
+			"line": 18
+		},
+		"pos": 1361,
+		"start": {
+			"character": 1361,
+			"column": 0,
+			"line": 18
+		}
+	}
+]

From ab1285a4f80cffde46e4d54d45018e95c9a35a03 Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Thu, 13 Oct 2022 21:59:07 +0800
Subject: [PATCH 27/45] Update CHANGELOG.md

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2c9afd52e3..e3bffdb324 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,7 @@
 ## Unreleased
 
 * Support `|important` modifier to style directive ([#7489](https://github.com/sveltejs/svelte/pull/7489))
+* Warn when using `<a target="_blank">` without `rel="noreferrer"` ([#6188](https://github.com/sveltejs/svelte/issues/6188))
 
 ## 3.51.0
 

From 88ed9931f22f4d1cd19c297a6686cc497c65f67a Mon Sep 17 00:00:00 2001
From: Billy Levin <billy.levin97@gmail.com>
Date: Thu, 13 Oct 2022 15:23:07 +0100
Subject: [PATCH 28/45] warn on assignment to const (#4960)

* warn on assignment to const

* fix formatting and switch to error

* check most local scopes first

* fix logic and add more tests

* more formatting

* Fix broken test

* use find_owner instead

Co-authored-by: tanhauhau <lhtan93@gmail.com>
---
 src/compiler/compile/Component.ts             | 36 +++++++++++++++++++
 .../compile/nodes/shared/Expression.ts        | 22 +++++++++++-
 .../samples/unchanged-expression/expected.js  |  2 +-
 .../samples/unchanged-expression/input.svelte |  2 +-
 .../samples/assignment-to-const-2/errors.json | 17 +++++++++
 .../assignment-to-const-2/input.svelte        | 15 ++++++++
 .../samples/assignment-to-const-3/errors.json | 17 +++++++++
 .../assignment-to-const-3/input.svelte        | 20 +++++++++++
 .../samples/assignment-to-const-4/errors.json | 17 +++++++++
 .../assignment-to-const-4/input.svelte        | 21 +++++++++++
 .../samples/assignment-to-const/errors.json   | 17 +++++++++
 .../samples/assignment-to-const/input.svelte  | 24 +++++++++++++
 12 files changed, 207 insertions(+), 3 deletions(-)
 create mode 100644 test/validator/samples/assignment-to-const-2/errors.json
 create mode 100644 test/validator/samples/assignment-to-const-2/input.svelte
 create mode 100644 test/validator/samples/assignment-to-const-3/errors.json
 create mode 100644 test/validator/samples/assignment-to-const-3/input.svelte
 create mode 100644 test/validator/samples/assignment-to-const-4/errors.json
 create mode 100644 test/validator/samples/assignment-to-const-4/input.svelte
 create mode 100644 test/validator/samples/assignment-to-const/errors.json
 create mode 100644 test/validator/samples/assignment-to-const/input.svelte

diff --git a/src/compiler/compile/Component.ts b/src/compiler/compile/Component.ts
index 1bbaac3ff4..c0d703892b 100644
--- a/src/compiler/compile/Component.ts
+++ b/src/compiler/compile/Component.ts
@@ -792,6 +792,42 @@ export default class Component {
 					scope = map.get(node);
 				}
 
+				let deep = false;
+				let names: string[] | undefined; 
+
+				if (node.type === 'AssignmentExpression') {
+					deep = node.left.type === 'MemberExpression';
+					names = deep
+						? [get_object(node.left).name]
+						: extract_names(node.left);
+				} else if (node.type === 'UpdateExpression') {
+					deep = node.argument.type === 'MemberExpression';
+					const { name } = get_object(node.argument);
+					names = [name];
+				}
+
+				if (names) {
+					names.forEach(name => {
+						let current_scope = scope;
+						let declaration;
+
+						while (current_scope) {
+							if (current_scope.declarations.has(name)) {
+								declaration = current_scope.declarations.get(name);
+								break;
+							}
+							current_scope = current_scope.parent;
+						}
+
+						if (declaration && declaration.kind === 'const' && !deep) {
+							component.error(node as any, {
+								code: 'assignment-to-const',
+								message: 'You are assigning to a const'
+							});
+						}
+					});
+				}
+
 				if (node.type === 'ImportDeclaration') {
 					component.extract_imports(node);
 					// TODO: to use actual remove
diff --git a/src/compiler/compile/nodes/shared/Expression.ts b/src/compiler/compile/nodes/shared/Expression.ts
index 6ea509d8b8..d726b811a1 100644
--- a/src/compiler/compile/nodes/shared/Expression.ts
+++ b/src/compiler/compile/nodes/shared/Expression.ts
@@ -128,6 +128,7 @@ export default class Expression {
 						deep = node.left.type === 'MemberExpression';
 						names = extract_names(deep ? get_object(node.left) : node.left);
 					} else if (node.type === 'UpdateExpression') {
+                        deep = node.argument.type === 'MemberExpression';
 						names = extract_names(get_object(node.argument));
 					}
 				}
@@ -149,7 +150,26 @@ export default class Expression {
 							component.add_reference(node, name);
 
 							const variable = component.var_lookup.get(name);
-							if (variable) variable[deep ? 'mutated' : 'reassigned'] = true;
+
+							if (variable) {
+								variable[deep ? 'mutated' : 'reassigned'] = true;
+							}
+
+							const declaration: any = scope.find_owner(name)?.declarations.get(name);
+
+							if (declaration) {
+								if (declaration.kind === 'const' && !deep) {
+									component.error(node, {
+										code: 'assignment-to-const',
+										message: 'You are assigning to a const'
+									});
+								}
+							} else if (variable && variable.writable === false && !deep) {
+								component.error(node, {
+									code: 'assignment-to-const',
+									message: 'You are assigning to a const'
+								});
+							}
 						}
 					});
 				}
diff --git a/test/js/samples/unchanged-expression/expected.js b/test/js/samples/unchanged-expression/expected.js
index 48ae8131ff..8ede703cec 100644
--- a/test/js/samples/unchanged-expression/expected.js
+++ b/test/js/samples/unchanged-expression/expected.js
@@ -73,7 +73,7 @@ let world1 = 'world';
 let world2 = 'world';
 
 function instance($$self, $$props, $$invalidate) {
-	const world3 = 'world';
+	let world3 = 'world';
 
 	function foo() {
 		$$invalidate(0, world3 = 'svelte');
diff --git a/test/js/samples/unchanged-expression/input.svelte b/test/js/samples/unchanged-expression/input.svelte
index 057201358c..35fa8b65d3 100644
--- a/test/js/samples/unchanged-expression/input.svelte
+++ b/test/js/samples/unchanged-expression/input.svelte
@@ -1,7 +1,7 @@
 <script>
   let world1 = 'world';
   let world2 = 'world';
-  const world3 = 'world';
+  let world3 = 'world';
   function foo() {
     world3 = 'svelte';
   }
diff --git a/test/validator/samples/assignment-to-const-2/errors.json b/test/validator/samples/assignment-to-const-2/errors.json
new file mode 100644
index 0000000000..b8da2a3d8e
--- /dev/null
+++ b/test/validator/samples/assignment-to-const-2/errors.json
@@ -0,0 +1,17 @@
+[
+	{
+		"code": "assignment-to-const",
+		"message": "You are assigning to a const",
+		"start": {
+			"line": 13,
+			"column": 24,
+			"character": 282
+		},
+		"end": {
+			"line": 13,
+			"column": 35,
+			"character": 293
+		},
+		"pos": 282
+	}
+]
\ No newline at end of file
diff --git a/test/validator/samples/assignment-to-const-2/input.svelte b/test/validator/samples/assignment-to-const-2/input.svelte
new file mode 100644
index 0000000000..433c6d0076
--- /dev/null
+++ b/test/validator/samples/assignment-to-const-2/input.svelte
@@ -0,0 +1,15 @@
+<script>
+	const immutable = 0;
+
+	const obj1 = { prop: true };
+	const obj2 = { prop: 0 }
+</script>
+
+<!-- should not error -->
+<button on:click={() => obj1.prop = false}>click</button>
+<button on:click={() => obj2.prop++}>click</button>
+
+<!-- should error -->
+<button on:click={() => immutable++}>click</button>
+
+
diff --git a/test/validator/samples/assignment-to-const-3/errors.json b/test/validator/samples/assignment-to-const-3/errors.json
new file mode 100644
index 0000000000..4842d55dc3
--- /dev/null
+++ b/test/validator/samples/assignment-to-const-3/errors.json
@@ -0,0 +1,17 @@
+[
+	{
+		"code": "assignment-to-const",
+		"message": "You are assigning to a const",
+		"start": {
+			"line": 14,
+			"column": 3,
+			"character": 172
+		},
+		"end": {
+			"line": 14,
+			"column": 10,
+			"character": 179
+		},
+		"pos": 172
+	}
+]
\ No newline at end of file
diff --git a/test/validator/samples/assignment-to-const-3/input.svelte b/test/validator/samples/assignment-to-const-3/input.svelte
new file mode 100644
index 0000000000..faaf448823
--- /dev/null
+++ b/test/validator/samples/assignment-to-const-3/input.svelte
@@ -0,0 +1,20 @@
+<script>
+	const foo = 'hello';
+	
+	function shouldNotError() {
+		let foo = 0;
+		
+		function inner() {
+			foo = 1;
+		}
+	}
+	
+	function shouldError() {
+		function inner() {
+			foo = 1;
+		}
+	}
+</script>
+
+<button on:click={shouldNotError}>click</button>
+<button on:click={shouldError}>click</button>
\ No newline at end of file
diff --git a/test/validator/samples/assignment-to-const-4/errors.json b/test/validator/samples/assignment-to-const-4/errors.json
new file mode 100644
index 0000000000..aa97538a60
--- /dev/null
+++ b/test/validator/samples/assignment-to-const-4/errors.json
@@ -0,0 +1,17 @@
+[
+	{
+		"code": "assignment-to-const",
+		"message": "You are assigning to a const",
+		"start": {
+			"line": 17,
+			"column": 2,
+			"character": 189
+		},
+		"end": {
+			"line": 17,
+			"column": 9,
+			"character": 196
+		},
+		"pos": 189
+	}
+]
\ No newline at end of file
diff --git a/test/validator/samples/assignment-to-const-4/input.svelte b/test/validator/samples/assignment-to-const-4/input.svelte
new file mode 100644
index 0000000000..12229132bf
--- /dev/null
+++ b/test/validator/samples/assignment-to-const-4/input.svelte
@@ -0,0 +1,21 @@
+<script>
+	const foo = 'hello';
+</script>
+
+<button on:click={() => {
+	let foo = 0;
+		
+	function inner() {
+		foo = 1;
+	}
+}}>
+	click
+</button>
+
+<button on:click={() => {
+	function inner() {
+		foo = 1;
+	}
+}}>
+	click
+</button>
\ No newline at end of file
diff --git a/test/validator/samples/assignment-to-const/errors.json b/test/validator/samples/assignment-to-const/errors.json
new file mode 100644
index 0000000000..7f4f264f1d
--- /dev/null
+++ b/test/validator/samples/assignment-to-const/errors.json
@@ -0,0 +1,17 @@
+[
+	{
+		"code": "assignment-to-const",
+		"message": "You are assigning to a const",
+		"start": {
+			"line": 16,
+			"column": 2,
+			"character": 225
+		},
+		"end": {
+			"line": 16,
+			"column": 18,
+			"character": 241
+		},
+		"pos": 225
+	}
+]
\ No newline at end of file
diff --git a/test/validator/samples/assignment-to-const/input.svelte b/test/validator/samples/assignment-to-const/input.svelte
new file mode 100644
index 0000000000..d570e7c86b
--- /dev/null
+++ b/test/validator/samples/assignment-to-const/input.svelte
@@ -0,0 +1,24 @@
+<script>
+	const immutable = false;
+
+	const obj1 = { prop: true };
+	const obj2 = { prop: 0 };
+
+	function shouldNotError() {
+		obj1.prop = false;
+	}
+
+	function shouldNotError2() {
+		obj2.prop++;
+	}
+
+	function shouldError() {
+		immutable = true
+	}
+
+	
+</script>
+
+<button on:click={shouldNotError}>click</button>
+<button on:click={shouldNotError2}>click</button>
+<button on:click={shouldError}>click</button>

From bb83eddfc623437528f24e9fe210885b446e72fa Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Thu, 13 Oct 2022 22:25:39 +0800
Subject: [PATCH 29/45] Update CHANGELOG.md

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e3bffdb324..da06afc1fb 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,7 @@
 
 * Support `|important` modifier to style directive ([#7489](https://github.com/sveltejs/svelte/pull/7489))
 * Warn when using `<a target="_blank">` without `rel="noreferrer"` ([#6188](https://github.com/sveltejs/svelte/issues/6188))
+* Throw helpful compiler error for attempting to update `const` variable ([#4895](https://github.com/sveltejs/svelte/issues/4895))
 
 ## 3.51.0
 

From e8b4997bb53134d96c736833ecffeee083b5689d Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Fri, 14 Oct 2022 13:15:04 +0800
Subject: [PATCH 30/45] [fix] duplicate meta tags during hydration (#7941)

---
 src/compiler/compile/render_ssr/handlers/Head.ts         | 9 ++++++++-
 test/server-side-rendering/index.ts                      | 4 +++-
 .../samples/head-meta-hydrate-duplicate/_config.js       | 3 ++-
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/compiler/compile/render_ssr/handlers/Head.ts b/src/compiler/compile/render_ssr/handlers/Head.ts
index f4bb3fa118..95648e1aca 100644
--- a/src/compiler/compile/render_ssr/handlers/Head.ts
+++ b/src/compiler/compile/render_ssr/handlers/Head.ts
@@ -1,6 +1,7 @@
 import Renderer, { RenderOptions } from '../Renderer';
 import Head from '../../nodes/Head';
 import { x } from 'code-red';
+import { Node } from 'estree';
 
 export default function(node: Head, renderer: Renderer, options: RenderOptions) {
 	const head_options = {
@@ -11,6 +12,12 @@ export default function(node: Head, renderer: Renderer, options: RenderOptions)
 	renderer.push();
 	renderer.render(node.children, head_options);
 	const result = renderer.pop();
+	let expression: Node = result;
+	if (options.hydratable) {
+		const start_comment = `HEAD_${node.id}_START`;
+		const end_comment = `HEAD_${node.id}_END`;
+		expression = x`'<!-- ${start_comment} -->' + ${expression} + '<!-- ${end_comment} -->'`;
+	}
 
-	renderer.add_expression(x`$$result.head += '<!-- HEAD_${node.id}_START -->' + ${result} + '<!-- HEAD_${node.id}_END -->', ""`);
+	renderer.add_expression(x`$$result.head += ${expression}, ""`);
 }
diff --git a/test/server-side-rendering/index.ts b/test/server-side-rendering/index.ts
index 2a4e0596e7..a5458be109 100644
--- a/test/server-side-rendering/index.ts
+++ b/test/server-side-rendering/index.ts
@@ -117,7 +117,9 @@ describe('ssr', () => {
 					fs.writeFileSync(`${dir}/_actual-head.html`, head);
 
 					try {
-						assert.htmlEqual(
+						(compileOptions.hydratable
+							? assert.htmlEqualWithComments
+							: assert.htmlEqual)(
 							head,
 							fs.readFileSync(`${dir}/_expected-head.html`, 'utf-8')
 						);
diff --git a/test/server-side-rendering/samples/head-meta-hydrate-duplicate/_config.js b/test/server-side-rendering/samples/head-meta-hydrate-duplicate/_config.js
index ae9b250f86..f1f4fff921 100644
--- a/test/server-side-rendering/samples/head-meta-hydrate-duplicate/_config.js
+++ b/test/server-side-rendering/samples/head-meta-hydrate-duplicate/_config.js
@@ -1,5 +1,6 @@
 export default {
 	compileOptions: {
 		hydratable: true
-	}
+	},
+	withoutNormalizeHtml: true
 };

From a6169f65ebf84634908d23c20f1e562742dd338b Mon Sep 17 00:00:00 2001
From: Yuichiro Yamashita <xydybaseball@gmail.com>
Date: Fri, 14 Oct 2022 14:15:28 +0900
Subject: [PATCH 31/45] Update CHANGELOG.md

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index da06afc1fb..3099d542d8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,7 @@
 * Support `|important` modifier to style directive ([#7489](https://github.com/sveltejs/svelte/pull/7489))
 * Warn when using `<a target="_blank">` without `rel="noreferrer"` ([#6188](https://github.com/sveltejs/svelte/issues/6188))
 * Throw helpful compiler error for attempting to update `const` variable ([#4895](https://github.com/sveltejs/svelte/issues/4895))
+* Refix hydration with `{@html}` and components in `<svelte:head>` ([#7941](https://github.com/sveltejs/svelte/pull/7941))
 
 ## 3.51.0
 

From 244d74d4a752e8ec768a9323d88257dcf9bee202 Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Fri, 14 Oct 2022 20:08:25 +0800
Subject: [PATCH 32/45] [feat] pre-build before testing in CI (#7933)

---
 .github/workflows/ci.yml | 59 ++++++++++++++++++++++++++++++++++++++--
 .mocharc.js              |  6 ++--
 .mocharc.unit.js         | 15 ++++++++++
 package.json             | 12 ++++----
 scripts/skip_in_ci.js    |  7 +++++
 5 files changed, 88 insertions(+), 11 deletions(-)
 create mode 100644 .mocharc.unit.js
 create mode 100644 scripts/skip_in_ci.js

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 548b8492ca..e878e8eb02 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -3,7 +3,42 @@ on: [push, pull_request]
 permissions:
   contents: read # to fetch code (actions/checkout)
 jobs:
+  Setup:
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        os: [ubuntu-latest, windows-latest, macOS-latest]
+    steps:
+      - uses: actions/checkout@v1
+      - uses: actions/setup-node@v2
+        with:
+          node-version: 16
+          cache: npm
+      - run: npm install
+        env:
+          SKIP_PREPARE: true
+      - run: npm run build
+        env:
+          PUBLISH: true
+      - uses: actions/cache@v3
+        with:
+          # cache key based on OS as the full path for each OS may be different
+          # and windows is not able to reuse the cache from ubuntu
+          key: output-${{ github.run_id }}-${{ matrix.os }}
+          path: |
+            index.*
+            compiler.*
+            ssr.*
+            action/
+            animate/
+            easing/
+            internal/
+            motion/
+            store/
+            transition/
+            types/
   Tests:
+    needs: Setup
     runs-on: ${{ matrix.os }}
     timeout-minutes: 15
     strategy:
@@ -16,8 +51,25 @@ jobs:
         with:
           node-version: ${{ matrix.node-version }}
           cache: npm
+      - uses: actions/cache@v3
+        with:
+          key: output-${{ github.run_id }}-${{ matrix.os }}
+          path: |
+            index.*
+            compiler.*
+            ssr.*
+            action/
+            animate/
+            easing/
+            internal/
+            motion/
+            store/
+            transition/
+            types/
       - run: npm install
-      - run: npm test
+        env:
+          SKIP_PREPARE: true
+      - run: npm run test:integration
         env:
           CI: true
   Lint:
@@ -40,4 +92,7 @@ jobs:
       - uses: actions/setup-node@v3
         with:
           cache: npm
-      - run: 'npm i && npm run test:unit'
+      - run: npm install
+        env:
+          SKIP_PREPARE: true
+      - run: npm run test:unit
diff --git a/.mocharc.js b/.mocharc.js
index e55f26099e..449f81ecd6 100644
--- a/.mocharc.js
+++ b/.mocharc.js
@@ -1,7 +1,7 @@
+const is_unit_test = process.env.UNIT_TEST;
+
 module.exports = {
-	file: [
-		'test/test.ts'
-	],
+	file: is_unit_test ? [] : ['test/test.ts'],
 	require: [
 		'sucrase/register'
 	]
diff --git a/.mocharc.unit.js b/.mocharc.unit.js
new file mode 100644
index 0000000000..387d70e7e0
--- /dev/null
+++ b/.mocharc.unit.js
@@ -0,0 +1,15 @@
+module.exports = {
+	spec: [
+		'src/**/__test__.ts',
+	],
+	require: [
+		'sucrase/register'
+	],
+	recursive: true,
+};
+
+// add coverage options when running 'npx c8 mocha'
+if (process.env.NODE_V8_COVERAGE) {
+	module.exports.fullTrace = true;
+	module.exports.require.push('source-map-support/register');
+}
diff --git a/package.json b/package.json
index bf6b9e7754..c9a67c9311 100644
--- a/package.json
+++ b/package.json
@@ -86,15 +86,15 @@
   },
   "types": "types/runtime/index.d.ts",
   "scripts": {
-    "test": "mocha --exit",
-    "test:unit": "mocha --require sucrase/register --recursive src/**/__test__.ts --exit",
-    "quicktest": "mocha",
+    "test": "npm run test:unit && npm run test:integration",
+    "test:integration": "mocha --exit",
+    "test:unit": "mocha --config .mocharc.unit.js --exit",
+    "quicktest": "mocha --exit",
     "build": "rollup -c && npm run tsd",
-    "prepare": "npm run build",
+    "prepare": "node scripts/skip_in_ci.js npm run build",
     "dev": "rollup -cw",
-    "pretest": "npm run build",
     "posttest": "agadoo internal/index.mjs",
-    "prepublishOnly": "node check_publish_env.js && npm run lint && npm test",
+    "prepublishOnly": "node check_publish_env.js && npm run lint && npm run build && npm test",
     "tsd": "node ./generate-type-definitions.js",
     "lint": "eslint \"{src,test}/**/*.{ts,js}\""
   },
diff --git a/scripts/skip_in_ci.js b/scripts/skip_in_ci.js
new file mode 100644
index 0000000000..d845d000ab
--- /dev/null
+++ b/scripts/skip_in_ci.js
@@ -0,0 +1,7 @@
+if (process.env.SKIP_PREPARE) {
+  console.log('Skipped "prepare" script');
+} else {
+	const { execSync } = require("child_process");
+	const command = process.argv.slice(2).join(" ");
+	execSync(command, { stdio: "inherit" });
+}

From ef849217c43e157863dd0a7996ad56e1084b150b Mon Sep 17 00:00:00 2001
From: Conduitry <git@chor.date>
Date: Sat, 15 Oct 2022 09:57:24 -0400
Subject: [PATCH 33/45] -> v3.52.0

---
 CHANGELOG.md      | 8 ++++----
 package-lock.json | 4 ++--
 package.json      | 2 +-
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3099d542d8..41eebe64d1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,11 +1,11 @@
 # Svelte changelog
 
-## Unreleased
+## 3.52.0
 
-* Support `|important` modifier to style directive ([#7489](https://github.com/sveltejs/svelte/pull/7489))
+* Throw compile-time error when attempting to update `const` variable ([#4895](https://github.com/sveltejs/svelte/issues/4895))
 * Warn when using `<a target="_blank">` without `rel="noreferrer"` ([#6188](https://github.com/sveltejs/svelte/issues/6188))
-* Throw helpful compiler error for attempting to update `const` variable ([#4895](https://github.com/sveltejs/svelte/issues/4895))
-* Refix hydration with `{@html}` and components in `<svelte:head>` ([#7941](https://github.com/sveltejs/svelte/pull/7941))
+* Support `style:foo|important` modifier ([#7365](https://github.com/sveltejs/svelte/issues/7365))
+* Fix hydration regression with `{@html}` and components in `<svelte:head>` ([#7941](https://github.com/sveltejs/svelte/pull/7941))
 
 ## 3.51.0
 
diff --git a/package-lock.json b/package-lock.json
index dec2c8ef0e..cc2e097814 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "svelte",
-  "version": "3.51.0",
+  "version": "3.52.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "svelte",
-      "version": "3.49.0",
+      "version": "3.52.0",
       "license": "MIT",
       "devDependencies": {
         "@ampproject/remapping": "^0.3.0",
diff --git a/package.json b/package.json
index c9a67c9311..30afca4209 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "svelte",
-  "version": "3.51.0",
+  "version": "3.52.0",
   "description": "Cybernetically enhanced web apps",
   "module": "index.mjs",
   "main": "index",

From caca8a53401e975d23672255393dd778a58a48ff Mon Sep 17 00:00:00 2001
From: Yuichiro Yamashita <xydybaseball@gmail.com>
Date: Sun, 16 Oct 2022 13:55:23 +0900
Subject: [PATCH 34/45] [chore] Improve CI (#7945)

* stop to use cache

* update on.push.branches

* rename
---
 .github/workflows/ci.yml | 35 ++++++++++++++---------------------
 1 file changed, 14 insertions(+), 21 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index e878e8eb02..948f5d3bac 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -1,5 +1,8 @@
 name: CI
-on: [push, pull_request]
+on:
+  push:
+    branches: [ master ]
+  pull_request:
 permissions:
   contents: read # to fetch code (actions/checkout)
 jobs:
@@ -9,8 +12,8 @@ jobs:
       matrix:
         os: [ubuntu-latest, windows-latest, macOS-latest]
     steps:
-      - uses: actions/checkout@v1
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
           node-version: 16
           cache: npm
@@ -20,11 +23,11 @@ jobs:
       - run: npm run build
         env:
           PUBLISH: true
-      - uses: actions/cache@v3
+      - name: Upload build assets
+        id: upload-artifact
+        uses: actions/upload-artifact@v3
         with:
-          # cache key based on OS as the full path for each OS may be different
-          # and windows is not able to reuse the cache from ubuntu
-          key: output-${{ github.run_id }}-${{ matrix.os }}
+          name: build-assets
           path: |
             index.*
             compiler.*
@@ -51,21 +54,11 @@ jobs:
         with:
           node-version: ${{ matrix.node-version }}
           cache: npm
-      - uses: actions/cache@v3
+      - name: Download build assets
+        uses: actions/download-artifact@v3
+        id: download-artifact
         with:
-          key: output-${{ github.run_id }}-${{ matrix.os }}
-          path: |
-            index.*
-            compiler.*
-            ssr.*
-            action/
-            animate/
-            easing/
-            internal/
-            motion/
-            store/
-            transition/
-            types/
+          name: build-assets
       - run: npm install
         env:
           SKIP_PREPARE: true

From 1de2c025350511c4be27a784d7a295b17727692f Mon Sep 17 00:00:00 2001
From: Yuri <yurivish@gmail.com>
Date: Sun, 16 Oct 2022 04:25:39 -0400
Subject: [PATCH 35/45] Ensure onmouseleave event fires in Hoverable example
 (#7873)

Fixes the browser-quirk-related issue described in #6520 and #7867, based on a [suggestion](https://github.com/sveltejs/svelte/issues/7867#issuecomment-1248993436) by @Prinzhorn.

Tested in the editable example area on the Svelte site: https://svelte.dev/examples/slot-props
---
 .../examples/15-composition/03-slot-props/App.svelte        | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/site/content/examples/15-composition/03-slot-props/App.svelte b/site/content/examples/15-composition/03-slot-props/App.svelte
index 299cd336a6..5525867932 100644
--- a/site/content/examples/15-composition/03-slot-props/App.svelte
+++ b/site/content/examples/15-composition/03-slot-props/App.svelte
@@ -43,4 +43,8 @@
 		background-color: #ff3e00;
 		color: white;
 	}
-</style>
\ No newline at end of file
+	
+	p {
+		pointer-events: none;
+	}
+</style>

From 8921c04a21e60bf6773cded17e79fde016c1018a Mon Sep 17 00:00:00 2001
From: Sid <vistax86live@gmail.com>
Date: Sun, 16 Oct 2022 14:28:34 +0530
Subject: [PATCH 36/45] [chore] Upgrade css-tree version to 2.1.0 (#7572)

* chore: upgrade to css-tree major version

* fix: handle whitespace token for new ast

* fix: css syntax error

* remove @types/css-tree

* import css-tree/parser instead of file path import

Co-authored-by: tanhauhau <lhtan93@gmail.com>
---
 package-lock.json                        | 181 ++++++++++++++++-------
 package.json                             |   4 +-
 src/compiler/compile/css/Selector.ts     |   2 +-
 src/compiler/parse/read/style.ts         |   3 +-
 test/parser/samples/error-css/error.json |   2 +-
 5 files changed, 133 insertions(+), 59 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index cc2e097814..1e4763cac4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,7 @@
         "@ampproject/remapping": "^0.3.0",
         "@rollup/plugin-commonjs": "^11.0.0",
         "@rollup/plugin-json": "^4.0.1",
-        "@rollup/plugin-node-resolve": "^6.0.0",
+        "@rollup/plugin-node-resolve": "^11.2.1",
         "@rollup/plugin-replace": "^2.3.0",
         "@rollup/plugin-sucrase": "^3.1.0",
         "@rollup/plugin-typescript": "^2.0.1",
@@ -28,7 +28,7 @@
         "aria-query": "^5.0.0",
         "axobject-query": "^3.0.1",
         "code-red": "^0.2.5",
-        "css-tree": "^1.1.2",
+        "css-tree": "^2.1.0",
         "eslint": "^8.0.0",
         "eslint-plugin-import": "^2.26.0",
         "eslint-plugin-svelte3": "^4.0.0",
@@ -209,21 +209,54 @@
       }
     },
     "node_modules/@rollup/plugin-node-resolve": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-6.0.0.tgz",
-      "integrity": "sha512-GqWz1CfXOsqpeVMcoM315+O7zMxpRsmhWyhJoxLFHVSp9S64/u02i7len/FnbTNbmgYs+sZyilasijH8UiuboQ==",
+      "version": "11.2.1",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-11.2.1.tgz",
+      "integrity": "sha512-yc2n43jcqVyGE2sqV5/YCmocy9ArjVAP/BeXyTtADTBBX6V0e5UMqwO8CdQ0kzjb6zu5P1qMzsScCMRvE9OlVg==",
       "dev": true,
       "dependencies": {
-        "@rollup/pluginutils": "^3.0.0",
-        "@types/resolve": "0.0.8",
+        "@rollup/pluginutils": "^3.1.0",
+        "@types/resolve": "1.17.1",
         "builtin-modules": "^3.1.0",
+        "deepmerge": "^4.2.2",
         "is-module": "^1.0.0",
-        "resolve": "^1.11.1"
+        "resolve": "^1.19.0"
+      },
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^1.20.0||^2.0.0"
+      }
+    },
+    "node_modules/@rollup/plugin-node-resolve/node_modules/@rollup/pluginutils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.1.0.tgz",
+      "integrity": "sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==",
+      "dev": true,
+      "dependencies": {
+        "@types/estree": "0.0.39",
+        "estree-walker": "^1.0.1",
+        "picomatch": "^2.2.2"
       },
       "engines": {
         "node": ">= 8.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^1.20.0||^2.0.0"
       }
     },
+    "node_modules/@rollup/plugin-node-resolve/node_modules/@types/estree": {
+      "version": "0.0.39",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz",
+      "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==",
+      "dev": true
+    },
+    "node_modules/@rollup/plugin-node-resolve/node_modules/estree-walker": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-1.0.1.tgz",
+      "integrity": "sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==",
+      "dev": true
+    },
     "node_modules/@rollup/plugin-replace": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-replace/-/plugin-replace-2.3.0.tgz",
@@ -331,9 +364,9 @@
       "dev": true
     },
     "node_modules/@types/resolve": {
-      "version": "0.0.8",
-      "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-0.0.8.tgz",
-      "integrity": "sha512-auApPaJf3NPfe18hSoJkp8EbZzer2ISk7o8mCC3M9he/a04+gbMF97NkpD2S8riMGvm4BMRI59/SZQSaLTKpsQ==",
+      "version": "1.17.1",
+      "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
+      "integrity": "sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==",
       "dev": true,
       "dependencies": {
         "@types/node": "*"
@@ -1077,25 +1110,17 @@
       "dev": true
     },
     "node_modules/css-tree": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.2.tgz",
-      "integrity": "sha512-wCoWush5Aeo48GLhfHPbmvZs59Z+M7k5+B1xDnXbdWNcEF423DoFdqSWE0PM5aNk5nI5cp1q7ms36zGApY/sKQ==",
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz",
+      "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==",
       "dev": true,
       "dependencies": {
-        "mdn-data": "2.0.14",
-        "source-map": "^0.6.1"
+        "mdn-data": "2.0.28",
+        "source-map-js": "^1.0.1"
       },
       "engines": {
-        "node": ">=8.0.0"
-      }
-    },
-    "node_modules/css-tree/node_modules/source-map": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+        "npm": ">=7.0.0"
       }
     },
     "node_modules/cssom": {
@@ -1177,6 +1202,15 @@
       "integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=",
       "dev": true
     },
+    "node_modules/deepmerge": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
+      "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/define-properties": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz",
@@ -3108,9 +3142,9 @@
       }
     },
     "node_modules/mdn-data": {
-      "version": "2.0.14",
-      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
-      "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==",
+      "version": "2.0.28",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz",
+      "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==",
       "dev": true
     },
     "node_modules/merge2": {
@@ -4055,6 +4089,15 @@
         "node": ">= 8"
       }
     },
+    "node_modules/source-map-js": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/source-map-support": {
       "version": "0.5.13",
       "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.13.tgz",
@@ -4884,16 +4927,42 @@
       }
     },
     "@rollup/plugin-node-resolve": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-6.0.0.tgz",
-      "integrity": "sha512-GqWz1CfXOsqpeVMcoM315+O7zMxpRsmhWyhJoxLFHVSp9S64/u02i7len/FnbTNbmgYs+sZyilasijH8UiuboQ==",
+      "version": "11.2.1",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-11.2.1.tgz",
+      "integrity": "sha512-yc2n43jcqVyGE2sqV5/YCmocy9ArjVAP/BeXyTtADTBBX6V0e5UMqwO8CdQ0kzjb6zu5P1qMzsScCMRvE9OlVg==",
       "dev": true,
       "requires": {
-        "@rollup/pluginutils": "^3.0.0",
-        "@types/resolve": "0.0.8",
+        "@rollup/pluginutils": "^3.1.0",
+        "@types/resolve": "1.17.1",
         "builtin-modules": "^3.1.0",
+        "deepmerge": "^4.2.2",
         "is-module": "^1.0.0",
-        "resolve": "^1.11.1"
+        "resolve": "^1.19.0"
+      },
+      "dependencies": {
+        "@rollup/pluginutils": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.1.0.tgz",
+          "integrity": "sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==",
+          "dev": true,
+          "requires": {
+            "@types/estree": "0.0.39",
+            "estree-walker": "^1.0.1",
+            "picomatch": "^2.2.2"
+          }
+        },
+        "@types/estree": {
+          "version": "0.0.39",
+          "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz",
+          "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==",
+          "dev": true
+        },
+        "estree-walker": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-1.0.1.tgz",
+          "integrity": "sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==",
+          "dev": true
+        }
       }
     },
     "@rollup/plugin-replace": {
@@ -4997,9 +5066,9 @@
       "dev": true
     },
     "@types/resolve": {
-      "version": "0.0.8",
-      "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-0.0.8.tgz",
-      "integrity": "sha512-auApPaJf3NPfe18hSoJkp8EbZzer2ISk7o8mCC3M9he/a04+gbMF97NkpD2S8riMGvm4BMRI59/SZQSaLTKpsQ==",
+      "version": "1.17.1",
+      "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
+      "integrity": "sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==",
       "dev": true,
       "requires": {
         "@types/node": "*"
@@ -5545,21 +5614,13 @@
       "dev": true
     },
     "css-tree": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.2.tgz",
-      "integrity": "sha512-wCoWush5Aeo48GLhfHPbmvZs59Z+M7k5+B1xDnXbdWNcEF423DoFdqSWE0PM5aNk5nI5cp1q7ms36zGApY/sKQ==",
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz",
+      "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==",
       "dev": true,
       "requires": {
-        "mdn-data": "2.0.14",
-        "source-map": "^0.6.1"
-      },
-      "dependencies": {
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
-        }
+        "mdn-data": "2.0.28",
+        "source-map-js": "^1.0.1"
       }
     },
     "cssom": {
@@ -5626,6 +5687,12 @@
       "integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=",
       "dev": true
     },
+    "deepmerge": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
+      "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==",
+      "dev": true
+    },
     "define-properties": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz",
@@ -7103,9 +7170,9 @@
       }
     },
     "mdn-data": {
-      "version": "2.0.14",
-      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
-      "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==",
+      "version": "2.0.28",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz",
+      "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==",
       "dev": true
     },
     "merge2": {
@@ -7837,6 +7904,12 @@
       "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
       "dev": true
     },
+    "source-map-js": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "dev": true
+    },
     "source-map-support": {
       "version": "0.5.13",
       "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.13.tgz",
diff --git a/package.json b/package.json
index 30afca4209..245c9b1834 100644
--- a/package.json
+++ b/package.json
@@ -118,7 +118,7 @@
     "@ampproject/remapping": "^0.3.0",
     "@rollup/plugin-commonjs": "^11.0.0",
     "@rollup/plugin-json": "^4.0.1",
-    "@rollup/plugin-node-resolve": "^6.0.0",
+    "@rollup/plugin-node-resolve": "^11.2.1",
     "@rollup/plugin-replace": "^2.3.0",
     "@rollup/plugin-sucrase": "^3.1.0",
     "@rollup/plugin-typescript": "^2.0.1",
@@ -134,7 +134,7 @@
     "aria-query": "^5.0.0",
     "axobject-query": "^3.0.1",
     "code-red": "^0.2.5",
-    "css-tree": "^1.1.2",
+    "css-tree": "^2.1.0",
     "eslint": "^8.0.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-svelte3": "^4.0.0",
diff --git a/src/compiler/compile/css/Selector.ts b/src/compiler/compile/css/Selector.ts
index 28cf5ba6af..07e2dc439e 100644
--- a/src/compiler/compile/css/Selector.ts
+++ b/src/compiler/compile/css/Selector.ts
@@ -212,7 +212,7 @@ function apply_selector(blocks: Block[], node: Element, to_encapsulate: Array<{
 	}
 
 	if (block.combinator) {
-		if (block.combinator.type === 'WhiteSpace') {
+		if (block.combinator.type === 'Combinator' && block.combinator.name === ' ') {
 			for (const ancestor_block of blocks) {
 				if (ancestor_block.global) {
 					continue;
diff --git a/src/compiler/parse/read/style.ts b/src/compiler/parse/read/style.ts
index 1e21dddc67..d7ba83c6e5 100644
--- a/src/compiler/parse/read/style.ts
+++ b/src/compiler/parse/read/style.ts
@@ -1,4 +1,5 @@
-import parse from 'css-tree/lib/parser/index.js';
+// @ts-ignore
+import parse from 'css-tree/parser';
 import { walk } from 'estree-walker';
 import { Parser } from '../index';
 import { Node } from 'estree';
diff --git a/test/parser/samples/error-css/error.json b/test/parser/samples/error-css/error.json
index 90f7a091d2..78bea3030c 100644
--- a/test/parser/samples/error-css/error.json
+++ b/test/parser/samples/error-css/error.json
@@ -1,6 +1,6 @@
 {
 	"code": "css-syntax-error",
-	"message": "LeftCurlyBracket is expected",
+	"message": "\"{\" is expected",
 	"start": {
 		"line": 2,
 		"column": 16,

From f9e5b3e995a488ff5ef21b4258a5954ea6667dbf Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Sun, 16 Oct 2022 17:01:12 +0800
Subject: [PATCH 37/45] Update CHANGELOG.md

---
 CHANGELOG.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 41eebe64d1..cc41f14a88 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,8 @@
 # Svelte changelog
 
+## Unreleased
+* Upgraded `css-tree` to `2.1.0` ([#7572](https://github.com/sveltejs/svelte/pull/7572))
+
 ## 3.52.0
 
 * Throw compile-time error when attempting to update `const` variable ([#4895](https://github.com/sveltejs/svelte/issues/4895))

From 0a7cf0e73e386e46a692e06d540703c435d4d003 Mon Sep 17 00:00:00 2001
From: Josiah Nieves <23145687+jtn7@users.noreply.github.com>
Date: Sun, 16 Oct 2022 22:45:03 -0400
Subject: [PATCH 38/45] [docs] fix typo "bellow" vs "below" (#7955)

---
 site/content/docs/02-component-format.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/content/docs/02-component-format.md b/site/content/docs/02-component-format.md
index 5212b001ac..268444ab7d 100644
--- a/site/content/docs/02-component-format.md
+++ b/site/content/docs/02-component-format.md
@@ -209,7 +209,7 @@ It is important to note that the reactive blocks are ordered via simple static a
 </script>
 ```
 
-Moving the line `$: yDependent = y` bellow `$: setY(x)` will cause `yDependent` to be updated when `x` is updated.
+Moving the line `$: yDependent = y` below `$: setY(x)` will cause `yDependent` to be updated when `x` is updated.
 
 ---
 

From 146e7a6310627d4599bb60760d573dffa5d1d2ce Mon Sep 17 00:00:00 2001
From: Neagu Mihai <74415486+devneagu@users.noreply.github.com>
Date: Thu, 20 Oct 2022 21:04:35 +0300
Subject: [PATCH 39/45] fix: Remove Security Message (#7959)

---
 site/content/examples/03-logic/03-each-blocks/App.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/content/examples/03-logic/03-each-blocks/App.svelte b/site/content/examples/03-logic/03-each-blocks/App.svelte
index 3ecbe5ca2f..7d08b79ab8 100644
--- a/site/content/examples/03-logic/03-each-blocks/App.svelte
+++ b/site/content/examples/03-logic/03-each-blocks/App.svelte
@@ -11,7 +11,7 @@
 <ul>
 	{#each cats as { id, name }, i}
 		<li>
-			<a target="_blank" href="https://www.youtube.com/watch?v={id}">
+			<a target="_blank" rel="noreferrer" href="https://www.youtube.com/watch?v={id}">
 				{i + 1}: {name}
 			</a>
 		</li>

From b265bc6f0fb4d981827fc1dbb89185076a9f3885 Mon Sep 17 00:00:00 2001
From: Josh Soref <2119212+jsoref@users.noreply.github.com>
Date: Thu, 27 Oct 2022 11:09:18 -0400
Subject: [PATCH 40/45] [chore] fix spelling and typos (#7974)

---
 CHANGELOG.md                                                | 2 +-
 .../blog/2020-10-01-whats-new-in-svelte-october-2020.md     | 4 ++--
 .../blog/2021-02-01-whats-new-in-svelte-february-2021.md    | 2 +-
 .../blog/2021-07-01-whats-new-in-svelte-july-2021.md        | 2 +-
 .../blog/2021-08-01-whats-new-in-svelte-august-2021.md      | 2 +-
 .../blog/2021-10-01-whats-new-in-svelte-october-2021.md     | 2 +-
 .../blog/2021-11-01-whats-new-in-svelte-november-2021.md    | 2 +-
 .../blog/2022-02-01-whats-new-in-svelte-february-2022.md    | 2 +-
 .../blog/2022-06-01-whats-new-in-svelte-june-2022.md        | 2 +-
 .../blog/2022-07-01-whats-new-in-svelte-july-2022.md        | 6 +++---
 .../blog/2022-10-01-whats-new-in-svelte-october-2022.md     | 2 +-
 .../examples/05-bindings/02-checkbox-inputs/App.svelte      | 2 +-
 ...at.md => 425-is-there-a-tool-to-automatically-format.md} | 0
 site/content/tutorial/01-introduction/01-basics/text.md     | 2 +-
 .../06-bindings/03-checkbox-inputs/app-a/App.svelte         | 2 +-
 .../06-bindings/03-checkbox-inputs/app-b/App.svelte         | 2 +-
 src/compiler/compile/compiler_warnings.ts                   | 2 +-
 src/compiler/compile/nodes/Element.ts                       | 2 +-
 src/runtime/internal/dom.ts                                 | 2 +-
 test/runtime/samples/binding-this-with-context/_config.js   | 4 ++--
 .../samples/each-block-dynamic-else-static/_config.js       | 2 +-
 .../_config.js                                              | 0
 .../main.svelte                                             | 0
 test/runtime/samples/spread-element-input-value/_config.js  | 2 +-
 .../samples/a11y-aria-proptypes-token/input.svelte          | 2 +-
 .../samples/a11y-aria-proptypes-tokenlist/input.svelte      | 4 ++--
 .../samples/rest-eachblock-binding-2/warnings.json          | 2 +-
 .../samples/rest-eachblock-binding-3/warnings.json          | 2 +-
 test/validator/samples/rest-eachblock-binding/warnings.json | 2 +-
 29 files changed, 31 insertions(+), 31 deletions(-)
 rename site/content/faq/{425-is-there-a-tool-to-automaticly-format.md => 425-is-there-a-tool-to-automatically-format.md} (100%)
 rename test/runtime/samples/{each-block-keyed-dyanmic-key => each-block-keyed-dynamic-key}/_config.js (100%)
 rename test/runtime/samples/{each-block-keyed-dyanmic-key => each-block-keyed-dynamic-key}/main.svelte (100%)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index cc41f14a88..606645a7b0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1204,7 +1204,7 @@ Also:
 ## 2.12.0
 
 * Initialise actions on mount rather than hydrate ([#1653](https://github.com/sveltejs/svelte/pull/1653))
-* Allow non-existent components to be destroyed ([#1677](https://github.com/sveltejs/svelte/pull/1677))
+* Allow nonexistent components to be destroyed ([#1677](https://github.com/sveltejs/svelte/pull/1677))
 * Pass AMD ID from CLI correctly ([#1672](https://github.com/sveltejs/svelte/pull/1672))
 * Minor AST tweaks ([#1673](https://github.com/sveltejs/svelte/pull/1673), [#1674](https://github.com/sveltejs/svelte/pull/1674))
 * Reduce code duplication in component initialisation ([#1670](https://github.com/sveltejs/svelte/pull/1670))
diff --git a/site/content/blog/2020-10-01-whats-new-in-svelte-october-2020.md b/site/content/blog/2020-10-01-whats-new-in-svelte-october-2020.md
index ba2ee80caf..d9617ec917 100644
--- a/site/content/blog/2020-10-01-whats-new-in-svelte-october-2020.md
+++ b/site/content/blog/2020-10-01-whats-new-in-svelte-october-2020.md
@@ -12,7 +12,7 @@ Welcome to the first edition of our "What's new in Svelte" series! We'll try to
 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. Whever 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**)
+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:
 ```html
@@ -53,7 +53,7 @@ For all the features and bugfixes see the CHANGELOG for [Svelte](https://github.
 
 ## 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
+- [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!
 
diff --git a/site/content/blog/2021-02-01-whats-new-in-svelte-february-2021.md b/site/content/blog/2021-02-01-whats-new-in-svelte-february-2021.md
index cb7bcb425e..0e6aaba925 100644
--- a/site/content/blog/2021-02-01-whats-new-in-svelte-february-2021.md
+++ b/site/content/blog/2021-02-01-whats-new-in-svelte-february-2021.md
@@ -66,7 +66,7 @@ New changes to the Svelte Society website include [a new cheat sheet](https://sv
 - [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)
+- [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
diff --git a/site/content/blog/2021-07-01-whats-new-in-svelte-july-2021.md b/site/content/blog/2021-07-01-whats-new-in-svelte-july-2021.md
index c7510143a8..f1f32fd6be 100644
--- a/site/content/blog/2021-07-01-whats-new-in-svelte-july-2021.md
+++ b/site/content/blog/2021-07-01-whats-new-in-svelte-july-2021.md
@@ -49,7 +49,7 @@ As the northern hemisphere heats up, Svelte has stayed cool with lots of perform
 
 
 **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.
+- [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
diff --git a/site/content/blog/2021-08-01-whats-new-in-svelte-august-2021.md b/site/content/blog/2021-08-01-whats-new-in-svelte-august-2021.md
index 145d3aa784..12ebd77c6c 100644
--- a/site/content/blog/2021-08-01-whats-new-in-svelte-august-2021.md
+++ b/site/content/blog/2021-08-01-whats-new-in-svelte-august-2021.md
@@ -52,7 +52,7 @@ To see all updates to SvelteKit, check out the [SvelteKit changelog](https://git
 - [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 course from Hasura.
+- [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**
diff --git a/site/content/blog/2021-10-01-whats-new-in-svelte-october-2021.md b/site/content/blog/2021-10-01-whats-new-in-svelte-october-2021.md
index 706b4907e0..46531a0611 100644
--- a/site/content/blog/2021-10-01-whats-new-in-svelte-october-2021.md
+++ b/site/content/blog/2021-10-01-whats-new-in-svelte-october-2021.md
@@ -57,7 +57,7 @@ To see all updates to SvelteKit, check out the [SvelteKit changelog](https://git
 **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 Podast: 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!
+- [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
diff --git a/site/content/blog/2021-11-01-whats-new-in-svelte-november-2021.md b/site/content/blog/2021-11-01-whats-new-in-svelte-november-2021.md
index 0b2d82c199..33dbd0a20b 100644
--- a/site/content/blog/2021-11-01-whats-new-in-svelte-november-2021.md
+++ b/site/content/blog/2021-11-01-whats-new-in-svelte-november-2021.md
@@ -41,7 +41,7 @@ To see all updates to Svelte and SvelteKit, check out the [Svelte](https://githu
 - [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 pallete generator
+- [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!
diff --git a/site/content/blog/2022-02-01-whats-new-in-svelte-february-2022.md b/site/content/blog/2022-02-01-whats-new-in-svelte-february-2022.md
index 9de6a3a28d..7f750c08ce 100644
--- a/site/content/blog/2022-02-01-whats-new-in-svelte-february-2022.md
+++ b/site/content/blog/2022-02-01-whats-new-in-svelte-february-2022.md
@@ -69,7 +69,7 @@ _To Read_
 - [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/)
+- [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
 
diff --git a/site/content/blog/2022-06-01-whats-new-in-svelte-june-2022.md b/site/content/blog/2022-06-01-whats-new-in-svelte-june-2022.md
index d38921b7eb..e5455f88c8 100644
--- a/site/content/blog/2022-06-01-whats-new-in-svelte-june-2022.md
+++ b/site/content/blog/2022-06-01-whats-new-in-svelte-june-2022.md
@@ -16,7 +16,7 @@ Let's dive in!
 
 
 ## 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 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))
+- 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))
 
diff --git a/site/content/blog/2022-07-01-whats-new-in-svelte-july-2022.md b/site/content/blog/2022-07-01-whats-new-in-svelte-july-2022.md
index e8c76a0857..ae10ab1fea 100644
--- a/site/content/blog/2022-07-01-whats-new-in-svelte-july-2022.md
+++ b/site/content/blog/2022-07-01-whats-new-in-svelte-july-2022.md
@@ -26,7 +26,7 @@ We will also be utilizing OpenCollective funds to allow Svelte core maintainers
 - 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 correlary to `browser` and `dev` ([#5251](https://github.com/sveltejs/kit/pull/5251))
+- `server` and `prod` environment variables are now available as a corollary to `browser` and `dev` ([#5251](https://github.com/sveltejs/kit/pull/5251))
 
 ---
 
@@ -63,7 +63,7 @@ _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
+- [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
 
@@ -85,7 +85,7 @@ _To Read_
 - [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 "accessbility-first" component library for Svelte
+- [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 🎊
diff --git a/site/content/blog/2022-10-01-whats-new-in-svelte-october-2022.md b/site/content/blog/2022-10-01-whats-new-in-svelte-october-2022.md
index 647d185fa4..30b4e61c8d 100644
--- a/site/content/blog/2022-10-01-whats-new-in-svelte-october-2022.md
+++ b/site/content/blog/2022-10-01-whats-new-in-svelte-october-2022.md
@@ -110,7 +110,7 @@ _To Read_
 - [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
+- [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
 
 
diff --git a/site/content/examples/05-bindings/02-checkbox-inputs/App.svelte b/site/content/examples/05-bindings/02-checkbox-inputs/App.svelte
index b82d31e783..1831da1793 100644
--- a/site/content/examples/05-bindings/02-checkbox-inputs/App.svelte
+++ b/site/content/examples/05-bindings/02-checkbox-inputs/App.svelte
@@ -10,7 +10,7 @@
 {#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>
+	<p>You must opt-in to continue. If you're not paying, you're the product.</p>
 {/if}
 
 <button disabled={!yes}>
diff --git a/site/content/faq/425-is-there-a-tool-to-automaticly-format.md b/site/content/faq/425-is-there-a-tool-to-automatically-format.md
similarity index 100%
rename from site/content/faq/425-is-there-a-tool-to-automaticly-format.md
rename to site/content/faq/425-is-there-a-tool-to-automatically-format.md
diff --git a/site/content/tutorial/01-introduction/01-basics/text.md b/site/content/tutorial/01-introduction/01-basics/text.md
index c0a2b9eba0..eb48a36ba3 100644
--- a/site/content/tutorial/01-introduction/01-basics/text.md
+++ b/site/content/tutorial/01-introduction/01-basics/text.md
@@ -24,7 +24,7 @@ You'll need to have basic familiarity with HTML, CSS and JavaScript to understan
 
 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 in to the editor.
+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
diff --git a/site/content/tutorial/06-bindings/03-checkbox-inputs/app-a/App.svelte b/site/content/tutorial/06-bindings/03-checkbox-inputs/app-a/App.svelte
index 2847dad485..7d8425a8db 100644
--- a/site/content/tutorial/06-bindings/03-checkbox-inputs/app-a/App.svelte
+++ b/site/content/tutorial/06-bindings/03-checkbox-inputs/app-a/App.svelte
@@ -10,7 +10,7 @@
 {#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>
+	<p>You must opt-in to continue. If you're not paying, you're the product.</p>
 {/if}
 
 <button disabled={!yes}>
diff --git a/site/content/tutorial/06-bindings/03-checkbox-inputs/app-b/App.svelte b/site/content/tutorial/06-bindings/03-checkbox-inputs/app-b/App.svelte
index b82d31e783..1831da1793 100644
--- a/site/content/tutorial/06-bindings/03-checkbox-inputs/app-b/App.svelte
+++ b/site/content/tutorial/06-bindings/03-checkbox-inputs/app-b/App.svelte
@@ -10,7 +10,7 @@
 {#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>
+	<p>You must opt-in to continue. If you're not paying, you're the product.</p>
 {/if}
 
 <button disabled={!yes}>
diff --git a/src/compiler/compile/compiler_warnings.ts b/src/compiler/compile/compiler_warnings.ts
index 3a11e04bd1..bbc12617e9 100644
--- a/src/compiler/compile/compiler_warnings.ts
+++ b/src/compiler/compile/compiler_warnings.ts
@@ -197,6 +197,6 @@ export default {
 	},
 	invalid_rest_eachblock_binding: (rest_element_name: string) => ({
 		code: 'invalid-rest-eachblock-binding',
-		message: `...${rest_element_name} operator will create a new object and binding propogation with original object will not work`
+		message: `...${rest_element_name} operator will create a new object and binding propagation with original object will not work`
 	})
 };
diff --git a/src/compiler/compile/nodes/Element.ts b/src/compiler/compile/nodes/Element.ts
index 298276c437..303b2e9122 100644
--- a/src/compiler/compile/nodes/Element.ts
+++ b/src/compiler/compile/nodes/Element.ts
@@ -250,7 +250,7 @@ export default class Element extends Node {
 			if (this.name === 'pre' || this.name === 'textarea') {
 				const first = info.children[0];
 				if (first && first.type === 'Text') {
-					// The leading newline character needs to be stripped because of a qirk,
+					// The leading newline character needs to be stripped because of a quirk,
 					// it is ignored by browsers if the tag and its contents are set through
 					// innerHTML (NOT if set through the innerHTML of the tag or dynamically).
 					// Therefore strip it here but add it back in the appropriate
diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts
index a1c0e1c0aa..e6b2c270df 100644
--- a/src/runtime/internal/dom.ts
+++ b/src/runtime/internal/dom.ts
@@ -56,7 +56,7 @@ function init_hydrate(target: NodeEx) {
 	* Reorder claimed children optimally.
 	* We can reorder claimed children optimally by finding the longest subsequence of
 	* nodes that are already claimed in order and only moving the rest. The longest
-	* subsequence subsequence of nodes that are claimed in order can be found by
+	* subsequence of nodes that are claimed in order can be found by
 	* computing the longest increasing subsequence of .claim_order values.
 	*
 	* This algorithm is optimal in generating the least amount of reorder operations
diff --git a/test/runtime/samples/binding-this-with-context/_config.js b/test/runtime/samples/binding-this-with-context/_config.js
index 33ef091b33..66e862b6ea 100644
--- a/test/runtime/samples/binding-this-with-context/_config.js
+++ b/test/runtime/samples/binding-this-with-context/_config.js
@@ -33,8 +33,8 @@ export default {
 		assert.equal(component.divs.length, 3, 'the divs array is still 3 long');
 		assert.equal(component.divs[2], null, 'the last div is unregistered');
 		assert.equal(component.ps[2], null, 'the last p is unregistered');
-		assert.equal(component.spans['-bar1'], null, 'the bar span is unregisterd');
-		assert.equal(component.hrs.bar, null, 'the bar hr is unregisterd');
+		assert.equal(component.spans['-bar1'], null, 'the bar span is unregistered');
+		assert.equal(component.hrs.bar, null, 'the bar hr is unregistered');
 
 		elems = target.querySelectorAll('div');
 		component.divs.forEach((e, i) => {
diff --git a/test/runtime/samples/each-block-dynamic-else-static/_config.js b/test/runtime/samples/each-block-dynamic-else-static/_config.js
index d8f45b3cdb..adec9625dd 100644
--- a/test/runtime/samples/each-block-dynamic-else-static/_config.js
+++ b/test/runtime/samples/each-block-dynamic-else-static/_config.js
@@ -16,7 +16,7 @@ export default {
 		` );
 
 		// trigger an 'update' of the else block, to ensure that
-		// non-existent update method is not called
+		// nonexistent update method is not called
 		component.animals = [];
 
 		component.animals = ['wombat'];
diff --git a/test/runtime/samples/each-block-keyed-dyanmic-key/_config.js b/test/runtime/samples/each-block-keyed-dynamic-key/_config.js
similarity index 100%
rename from test/runtime/samples/each-block-keyed-dyanmic-key/_config.js
rename to test/runtime/samples/each-block-keyed-dynamic-key/_config.js
diff --git a/test/runtime/samples/each-block-keyed-dyanmic-key/main.svelte b/test/runtime/samples/each-block-keyed-dynamic-key/main.svelte
similarity index 100%
rename from test/runtime/samples/each-block-keyed-dyanmic-key/main.svelte
rename to test/runtime/samples/each-block-keyed-dynamic-key/main.svelte
diff --git a/test/runtime/samples/spread-element-input-value/_config.js b/test/runtime/samples/spread-element-input-value/_config.js
index 0df088159a..e8672e8365 100644
--- a/test/runtime/samples/spread-element-input-value/_config.js
+++ b/test/runtime/samples/spread-element-input-value/_config.js
@@ -6,7 +6,7 @@ export default {
 		// therefore, jsdom could not validate minlength / maxlength
 
 		// we simulate user input with
-		// setting input.value + dispathEvent
+		// setting input.value + dispatchEvent
 
 		// and we determine if svelte does not set the `input.value` again by
 		// spying on the setter of `input.value`
diff --git a/test/validator/samples/a11y-aria-proptypes-token/input.svelte b/test/validator/samples/a11y-aria-proptypes-token/input.svelte
index 4a336ccbfb..7d879d468c 100644
--- a/test/validator/samples/a11y-aria-proptypes-token/input.svelte
+++ b/test/validator/samples/a11y-aria-proptypes-token/input.svelte
@@ -1,5 +1,5 @@
 <div aria-sort="" />
-<div aria-sort="descnding" />
+<div aria-sort="incorrect" />
 <div aria-sort />
 <div aria-sort={true} />
 <div aria-sort={"false"} />
diff --git a/test/validator/samples/a11y-aria-proptypes-tokenlist/input.svelte b/test/validator/samples/a11y-aria-proptypes-tokenlist/input.svelte
index 33ebbccab5..f0926cee60 100644
--- a/test/validator/samples/a11y-aria-proptypes-tokenlist/input.svelte
+++ b/test/validator/samples/a11y-aria-proptypes-tokenlist/input.svelte
@@ -3,5 +3,5 @@
 <div aria-relevant />
 <div aria-relevant={true} />
 <div aria-relevant={"false"} />
-<div aria-relevant="additions removalss" />
-<div aria-relevant="additions removalss " />
\ No newline at end of file
+<div aria-relevant="additions removals_" />
+<div aria-relevant="additions removals_ " />
\ No newline at end of file
diff --git a/test/validator/samples/rest-eachblock-binding-2/warnings.json b/test/validator/samples/rest-eachblock-binding-2/warnings.json
index a55e08ac05..921f14c619 100644
--- a/test/validator/samples/rest-eachblock-binding-2/warnings.json
+++ b/test/validator/samples/rest-eachblock-binding-2/warnings.json
@@ -1,7 +1,7 @@
 [
   {
     "code": "invalid-rest-eachblock-binding",
-    "message": "...rest operator will create a new object and binding propogation with original object will not work",
+    "message": "...rest operator will create a new object and binding propagation with original object will not work",
 		"pos": 102,
     "start": { "line": 8, "column": 24, "character": 102 },
 		"end": { "line": 8, "column": 31, "character": 109 }
diff --git a/test/validator/samples/rest-eachblock-binding-3/warnings.json b/test/validator/samples/rest-eachblock-binding-3/warnings.json
index c3410b3888..8da9d536d1 100644
--- a/test/validator/samples/rest-eachblock-binding-3/warnings.json
+++ b/test/validator/samples/rest-eachblock-binding-3/warnings.json
@@ -1,7 +1,7 @@
 [
   {
     "code": "invalid-rest-eachblock-binding",
-    "message": "...rest operator will create a new object and binding propogation with original object will not work",
+    "message": "...rest operator will create a new object and binding propagation with original object will not work",
 		"pos": 168,
     "start": { "line": 5, "column": 32, "character": 168 },
 		"end": { "line": 5, "column": 39, "character": 175 }
diff --git a/test/validator/samples/rest-eachblock-binding/warnings.json b/test/validator/samples/rest-eachblock-binding/warnings.json
index d5d34f31d1..12942ec95a 100644
--- a/test/validator/samples/rest-eachblock-binding/warnings.json
+++ b/test/validator/samples/rest-eachblock-binding/warnings.json
@@ -1,7 +1,7 @@
 [
   {
     "code": "invalid-rest-eachblock-binding",
-    "message": "...rest operator will create a new object and binding propogation with original object will not work",
+    "message": "...rest operator will create a new object and binding propagation with original object will not work",
 		"pos": 143,
 		"start": { "line": 5, "column": 25, "character": 143 },
     "end": { "line": 5, "column": 32, "character": 150 }

From df2e927b46b9d8b44ab39203dea02e3a28d04608 Mon Sep 17 00:00:00 2001
From: Daniel Sandoval <daniel@desandoval.net>
Date: Mon, 31 Oct 2022 14:20:54 -0600
Subject: [PATCH 41/45] [docs] "What's new in Svelte" November newsletter
 (#7986)

Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com>
Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
---
 ...11-01-whats-new-in-svelte-november-2022.md | 116 ++++++++++++++++++
 1 file changed, 116 insertions(+)
 create mode 100644 site/content/blog/2022-11-01-whats-new-in-svelte-november-2022.md

diff --git a/site/content/blog/2022-11-01-whats-new-in-svelte-november-2022.md b/site/content/blog/2022-11-01-whats-new-in-svelte-november-2022.md
new file mode 100644
index 0000000000..0c909548af
--- /dev/null
+++ b/site/content/blog/2022-11-01-whats-new-in-svelte-november-2022.md
@@ -0,0 +1,116 @@
+---
+title: "What's new in Svelte: November 2022"
+description: "Better forms, routes and inline styles across SvelteKit and Svelte"
+author: Daniel Sandoval
+authorURL: https://desandoval.net
+---
+
+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 👋

From bba3ffed0e7ed0c417df0cb8414eea2b96758a8a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B8rgen=20Kalsnes=20Hagen?=
 <43886029+Snailedlt@users.noreply.github.com>
Date: Thu, 3 Nov 2022 09:43:39 +0100
Subject: [PATCH 42/45] [chore] Update link to feature request template (#7992)

---
 CONTRIBUTING.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 816faf31aa..6153ae25d9 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -65,7 +65,7 @@ Working on your first Pull Request? You can learn how from this free video serie
 
 ### Proposing a change
 
-If you would like to request a new feature or enhancement but are not yet thinking about opening a pull request, you can also file an issue with [feature template](https://github.com/sveltejs/svelte/issues/new?template=feature_request.md).
+If you would like to request a new feature or enhancement but are not yet thinking about opening a pull request, you can also file an issue with [feature template](https://github.com/sveltejs/svelte/issues/new?template=feature_request.yml).
 
 If you're only fixing a bug, it's fine to submit a pull request right away, but we still recommend that you file an issue detailing what you're fixing. This is helpful in case we don't accept that specific fix but want to keep track of the issue.
 

From d39920fb102a66e0bc4301c7dd633ea748648e60 Mon Sep 17 00:00:00 2001
From: tomoam <29677552+tomoam@users.noreply.github.com>
Date: Mon, 7 Nov 2022 18:15:25 +0900
Subject: [PATCH 43/45] [docs] fix link in November newsletter (#7998)

---
 .../blog/2022-11-01-whats-new-in-svelte-november-2022.md        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/content/blog/2022-11-01-whats-new-in-svelte-november-2022.md b/site/content/blog/2022-11-01-whats-new-in-svelte-november-2022.md
index 0c909548af..1bd83afb2e 100644
--- a/site/content/blog/2022-11-01-whats-new-in-svelte-november-2022.md
+++ b/site/content/blog/2022-11-01-whats-new-in-svelte-november-2022.md
@@ -12,7 +12,7 @@ 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))
+- `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:**

From 84ea242666174a405d27a46e19d148d1ef622875 Mon Sep 17 00:00:00 2001
From: byt3r <glevin2@gmail.com>
Date: Mon, 7 Nov 2022 14:09:01 +0200
Subject: [PATCH 44/45] [fix] check parentNode exists before removing child
 (#6910)

Fixes #6037
---
 src/runtime/internal/dom.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts
index e6b2c270df..ca76b11ab3 100644
--- a/src/runtime/internal/dom.ts
+++ b/src/runtime/internal/dom.ts
@@ -204,7 +204,9 @@ export function insert_hydration(target: NodeEx, node: NodeEx, anchor?: NodeEx)
 }
 
 export function detach(node: Node) {
-	node.parentNode.removeChild(node);
+	if (node.parentNode) {
+		node.parentNode.removeChild(node);
+	}
 }
 
 export function destroy_each(iterations, detaching) {

From b05b684b95a5670968f83ae6868881f2231afa74 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Mon, 7 Nov 2022 13:09:53 +0100
Subject: [PATCH 45/45] Update changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 606645a7b0..491da451c4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 ## Unreleased
 * Upgraded `css-tree` to `2.1.0` ([#7572](https://github.com/sveltejs/svelte/pull/7572))
+* Check if `parentNode` exists before removing child ([#6037](https://github.com/sveltejs/svelte/issues/6037))
 
 ## 3.52.0